'use client';

/**
 * Glossário tipológico — `/projetos/[id]/software/glossario` (DOC-TEC-120).
 */

import { BookOpen, Plus, Save } from 'lucide-react';
import { ICON_SIZE_MD } from '@/components/icons';
import React, { useMemo, useState } from 'react';
import { useParams } from 'next/navigation';
import { Button, Form, Input, Modal, Space, Spin, Tooltip } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import { message } from '@/lib/feedback/message';
import { notifyApiError } from '@/lib/feedback/notifyApiError';
import { confirmDialog } from '@/lib/feedback/confirmDialog';
import { FormTextarea } from '@/components/form';
import {
    useWaygestFormModalProps,
    waygestFormModalFooterClassName,
} from '@/hooks/useWaygestFormModalProps';
import { useQueryCache } from '@/hooks/useQueryCache';
import { useMutationCache } from '@/hooks/useMutationCache';
import { useProjetoWriteGates } from '@/features/projetos/hooks/useProjetoWriteGates';
import { queryKeys } from '@/lib/cache/queryKeys';
import { API_ENDPOINTS } from '@/lib/api/endpoints';
import apiClient from '@/lib/api/client';
import type { Projeto } from '@/types';
import ProjetoLayout from '@/components/layouts/ProjetoLayout';
import { ListPageCreateFloatButton } from '@/components/listings';
import { LazyDataTable } from '@/components/lazy';
import { resolveProjetoFromResponse } from '@/features/projetos/lib/resolveProjetoFromResponse';
import {
    ProjetoTipologicoEmptyState,
    TIPOLOGICO_EMPTY_DOMAIN,
} from '@/features/projetos/projeto-tipologico-empty-state';
import type { GlossarioTermo, GlossarioTermoPayload } from './types';

const FORM_ID = 'projeto-glossario-form';

export function ProjetoSoftwareGlossarioScreen() {
    const params = useParams();
    const id = params?.id as string;
    const { canEditar, tooltipSemPermissao } = useProjetoWriteGates();
    const [modalOpen, setModalOpen] = useState(false);
    const [editing, setEditing] = useState<GlossarioTermo | null>(null);
    const [form] = Form.useForm();
    const formModalLayout = useWaygestFormModalProps();

    const { data: projetoResponse, isLoading: loadingProjeto } = useQueryCache<
        Projeto | { projeto?: Projeto }
    >({
        queryKey: queryKeys.projetos.detail(id),
        endpoint: API_ENDPOINTS.projetos.show(id),
        enabled: !!id,
        staleTime: 60_000,
    });
    const projeto = resolveProjetoFromResponse(projetoResponse);

    const {
        data: listData,
        isLoading: loadingList,
        refetch,
        isError,
    } = useQueryCache<{ data: GlossarioTermo[] } | GlossarioTermo[]>({
        queryKey: queryKeys.projetos.glossario(id),
        endpoint: API_ENDPOINTS.projetos.glossario.index(id),
        enabled: !!id,
        staleTime: 60_000,
    });

    const termos = useMemo(() => {
        if (Array.isArray(listData)) return listData;
        return listData?.data ?? [];
    }, [listData]);

    const saveMutation = useMutationCache({
        endpoint: editing
            ? API_ENDPOINTS.projetos.glossario.update(id, editing.id)
            : API_ENDPOINTS.projetos.glossario.store(id),
        method: editing ? 'PUT' : 'POST',
        invalidateQueries: [queryKeys.projetos.glossario(id)],
        onSuccess: () => {
            message.success(editing ? 'Termo atualizado.' : 'Termo registrado.');
            setModalOpen(false);
            setEditing(null);
            form.resetFields();
            refetch();
        },
        onError: (error: unknown) => {
            notifyApiError(error, 'Erro ao salvar o termo.', 'glossario');
        },
    });

    const openCreate = () => {
        setEditing(null);
        form.resetFields();
        setModalOpen(true);
    };

    const openEdit = (row: GlossarioTermo) => {
        setEditing(row);
        form.setFieldsValue({
            termo: row.termo,
            definicao: row.definicao,
            sigla: row.sigla ?? '',
        });
        setModalOpen(true);
    };

    const handleDelete = (row: GlossarioTermo) => {
        confirmDialog({
            title: 'Excluir termo?',
            content: `O termo «${row.termo}» será removido do glossário.`,
            okText: 'Excluir',
            okType: 'danger',
            cancelText: 'Cancelar',
            onOk: async () => {
                try {
                    await apiClient.delete(API_ENDPOINTS.projetos.glossario.destroy(id, row.id));
                    message.success('Termo excluído.');
                    refetch();
                } catch (error: unknown) {
                    notifyApiError(error, 'Erro ao excluir o termo.', 'glossario');
                }
            },
        });
    };

    const handleSubmit = (values: GlossarioTermoPayload) => {
        saveMutation.mutate({
            termo: values.termo?.trim(),
            definicao: values.definicao?.trim(),
            sigla: values.sigla?.trim() || null,
        });
    };

    const tooltipSemEdicao = !canEditar
        ? tooltipSemPermissao('editar o glossário')
        : undefined;

    const columns: ColumnsType<GlossarioTermo> = useMemo(
        () => [
            { title: 'Termo', dataIndex: 'termo', key: 'termo', ellipsis: true },
            {
                title: 'Sigla',
                dataIndex: 'sigla',
                key: 'sigla',
                width: 100,
                render: (v: string | null) => v || '—',
            },
            { title: 'Definição', dataIndex: 'definicao', key: 'definicao', ellipsis: true },
            {
                title: 'Ações',
                key: 'acoes',
                width: 160,
                render: (_: unknown, row: GlossarioTermo) => (
                    <Space size="small">
                        <Tooltip title={tooltipSemEdicao}>
                            <Button type="link" size="small" disabled={!canEditar} onClick={() => openEdit(row)}>
                                Editar
                            </Button>
                        </Tooltip>
                        <Tooltip title={tooltipSemEdicao}>
                            <Button
                                type="link"
                                size="small"
                                danger
                                disabled={!canEditar}
                                onClick={() => handleDelete(row)}
                            >
                                Excluir
                            </Button>
                        </Tooltip>
                    </Space>
                ),
            },
        ],
        [canEditar, tooltipSemEdicao],
    );

    if ((loadingProjeto || loadingList) && !projeto && termos.length === 0) {
        return (
            <ProjetoLayout
                projetoId={id}
                pageTitle="Glossário"
                pageIcon="book"
                titleSection="Glossário"
            >
                <div style={{ textAlign: 'center', padding: 50 }}>
                    <Spin size="large" />
                </div>
            </ProjetoLayout>
        );
    }

    return (
        <ProjetoLayout
            projetoId={id}
            pageTitle="Glossário"
            pageIcon="book"
            titleSection="Glossário"
            breadcrumbItems={[
                { title: 'PROJETO' },
                { title: projeto?.nome || 'Projeto' },
                { title: 'Glossário' },
            ]}
            headerActions={
                <Tooltip title={tooltipSemEdicao}>
                    <Button
                        type="primary"
                        icon={<Plus size={ICON_SIZE_MD} aria-hidden />}
                        disabled={!canEditar}
                        onClick={openCreate}
                        data-testid="projeto-glossario-novo"
                    >
                        Novo termo
                    </Button>
                </Tooltip>
            }
        >
            
            {isError ? (
                <ProjetoTipologicoEmptyState
                    projetoId={id}
                    title="Não foi possível carregar o glossário"
                    domainDescription="A API de glossário pode ainda não estar disponível. Tente sincronizar o pack ou volte mais tarde."
                    showSyncCtas
                    data-testid="projeto-glossario-erro"
                />
            ) : termos.length === 0 ? (
                <ProjetoTipologicoEmptyState
                    projetoId={id}
                    title="Glossário vazio"
                    domainDescription={TIPOLOGICO_EMPTY_DOMAIN.glossario}
                    icon={<BookOpen size={32} aria-hidden />}
                    primaryAction={
                        <Tooltip title={tooltipSemEdicao}>
                            <Button
                                type="primary"
                                icon={<Plus size={ICON_SIZE_MD} aria-hidden />}
                                disabled={!canEditar}
                                onClick={openCreate}
                            >
                                Cadastrar primeiro termo
                            </Button>
                        </Tooltip>
                    }
                    data-testid="projeto-glossario-empty"
                />
            ) : (
                <LazyDataTable
                    columns={columns}
                    data={termos}
                    loading={loadingList}
                    rowKey="id"
                    pagination={{ pageSize: 20, showSizeChanger: true }}
                    scroll={{ x: true }}
                    ariaRegionLabel="Glossário do projeto"
                    data-testid="projeto-glossario-table"
                    autoMobileFromColumns={{
                        testIdPrefix: 'software-glossario',
                        listHeading: 'Lista do glossário',
                        getFallbackTitle: (r) =>
                            [r.termo?.trim(), r.sigla?.trim()].filter(Boolean).join(' · ') ||
                            `Termo ${r.id}`,
                        excludeFieldKeys: ['termo'],
                    }}
                />
            )}
            

            {canEditar ? (
                <ListPageCreateFloatButton
                    onClick={openCreate}
                    tooltip={{ title: 'Novo termo' }}
                    data-testid="projeto-glossario-fab"
                    aria-label="Novo termo do glossário"
                />
            ) : null}

            <Modal
                {...formModalLayout}
                title={editing ? 'Editar termo' : 'Novo termo'}
                open={modalOpen}
                onCancel={() => {
                    setModalOpen(false);
                    setEditing(null);
                    form.resetFields();
                }}
                footer={
                    <div className={waygestFormModalFooterClassName}>
                        <Button
                            onClick={() => {
                                setModalOpen(false);
                                setEditing(null);
                                form.resetFields();
                            }}
                        >
                            Cancelar
                        </Button>
                        <Button
                            type="primary"
                            htmlType="submit"
                            form={FORM_ID}
                            loading={saveMutation.isPending}
                            icon={<Save size={ICON_SIZE_MD} aria-hidden />}
                        >
                            Salvar
                        </Button>
                    </div>
                }
                destroyOnHidden
            >
                <Form form={form} layout="vertical" id={FORM_ID} onFinish={handleSubmit} scrollToFirstError>
                    <Form.Item
                        name="termo"
                        label="Termo"
                        rules={[
                            { required: true, message: 'Informe o termo.' },
                            { max: 255, message: 'Máximo 255 caracteres.' },
                        ]}
                    >
                        <Input placeholder="Ex.: RACI" allowClear />
                    </Form.Item>
                    <Form.Item name="sigla" label="Sigla" rules={[{ max: 64, message: 'Máximo 64 caracteres.' }]}>
                        <Input placeholder="Opcional" allowClear />
                    </Form.Item>
                    <FormTextarea
                        name="definicao"
                        label="Definição"
                        required
                        rows={5}
                        maxLength={5000}
                        showCount
                        placeholder="Definição clara do termo no contexto do projeto…"
                        rules={[{ max: 5000, message: 'Máximo 5.000 caracteres.' }]}
                    />
                </Form>
            </Modal>
        </ProjetoLayout>
    );
}