'use client';

/**
 * Débitos técnicos — `/projetos/[id]/software/debitos-tecnicos`
 */

import { Plus, Save } from 'lucide-react';
import { ICON_SIZE_MD } from '@/components/icons';
import React, { useMemo, useState } from 'react';
import { useParams } from 'next/navigation';
import { Alert, Button, Form, Input, Modal, Select, Space, Tag, 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 ProjetoLayout from '@/components/layouts/ProjetoLayout';
import { ListPageCreateFloatButton } from '@/components/listings';
import { LazyDataTable } from '@/components/lazy';
import {
    ProjetoTipologicoEmptyState,
} from '@/features/projetos/projeto-tipologico-empty-state';

export type ProjetoSoftwareDebitoTecnico = {
    id: number;
    codigo?: string | null;
    titulo: string;
    descricao?: string | null;
    impacto?: string | null;
    risco?: string | null;
    urgencia?: string | null;
    esforco?: string | null;
    solucao_proposta?: string | null;
    responsavel?: string | null;
    prazo?: string | null;
    status?: string | null;
    versao_prevista?: string | null;
    observacoes?: string | null;
};

const FORM_ID = 'projeto-debito-form';

const STATUS = [
    { label: 'Aberto', value: 'aberto' },
    { label: 'Em andamento', value: 'em_andamento' },
    { label: 'Resolvido', value: 'resolvido' },
    { label: 'Aceito', value: 'aceito' },
    { label: 'Cancelado', value: 'cancelado' },
];

const NIVEL = [
    { label: 'Baixa', value: 'baixa' },
    { label: 'Média', value: 'media' },
    { label: 'Alta', value: 'alta' },
    { label: 'Crítica', value: 'critica' },
];

export function ProjetoSoftwareDebitosTecnicosScreen() {
    const params = useParams();
    const id = params?.id as string;
    const { canEditar, tooltipSemPermissao } = useProjetoWriteGates();
    const tooltipSemEdicao = !canEditar ? tooltipSemPermissao('editar débitos') : undefined;
    const [modalOpen, setModalOpen] = useState(false);
    const [editing, setEditing] = useState<ProjetoSoftwareDebitoTecnico | null>(null);
    const [form] = Form.useForm();
    const formModalLayout = useWaygestFormModalProps();

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

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

    const abertosSemResponsavel = useMemo(
        () =>
            itens.filter((d) => {
                const status = (d.status ?? '').toLowerCase();
                const aberto = !status || status === 'aberto' || status === 'em_andamento';
                return aberto && !d.responsavel?.trim();
            }).length,
        [itens],
    );

    const criticidadeTag = (v: string | null | undefined) => {
        if (!v) return '—';
        const color =
            v === 'critica' || v === 'alta'
                ? v === 'critica'
                    ? 'error'
                    : 'warning'
                : v === 'media'
                  ? 'processing'
                  : 'default';
        return <Tag color={color}>{v}</Tag>;
    };

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

    const openCreate = () => {
        setEditing(null);
        form.resetFields();
        form.setFieldsValue({ status: 'aberto' });
        setModalOpen(true);
    };

    const columns: ColumnsType<ProjetoSoftwareDebitoTecnico> = useMemo(
        () => [
            { title: 'Código', dataIndex: 'codigo', key: 'codigo', width: 100 },
            { title: 'Título', dataIndex: 'titulo', key: 'titulo' },
            {
                title: 'Impacto',
                dataIndex: 'impacto',
                key: 'impacto',
                width: 100,
                render: (v: string | null | undefined) => criticidadeTag(v),
            },
            {
                title: 'Urgência',
                dataIndex: 'urgencia',
                key: 'urg',
                width: 100,
                render: (v: string | null | undefined) => criticidadeTag(v),
            },
            {
                title: 'Status',
                dataIndex: 'status',
                key: 'status',
                width: 120,
                render: (v: string | null | undefined) => v || '—',
            },
            {
                title: 'Responsável',
                dataIndex: 'responsavel',
                key: 'responsavel',
                width: 140,
                render: (v: string | null | undefined) =>
                    v?.trim() ? v : <Tag color="warning">Sem responsável</Tag>,
            },
            {
                title: 'Ações',
                key: 'acoes',
                width: 160,
                render: (_: unknown, row: ProjetoSoftwareDebitoTecnico) => (
                    <Space>
                        <Button
                            type="link"
                            disabled={!canEditar}
                            onClick={() => {
                                setEditing(row);
                                form.setFieldsValue({ ...row });
                                setModalOpen(true);
                            }}
                        >
                            Editar
                        </Button>
                        <Button
                            type="link"
                            danger
                            disabled={!canEditar}
                            onClick={() =>
                                confirmDialog({
                                    title: 'Excluir débito?',
                                    content: `Remover “${row.titulo}”?`,
                                    okText: 'Excluir',
                                    okType: 'danger',
                                    onOk: async () => {
                                        try {
                                            await apiClient.delete(
                                                API_ENDPOINTS.projetos.debitosTecnicos.destroy(
                                                    id,
                                                    row.id,
                                                ),
                                            );
                                            message.success('Débito excluído.');
                                            refetch();
                                        } catch (error) {
                                            notifyApiError(
                                                error,
                                                'Erro ao excluir.',
                                                'debitos-tecnicos',
                                            );
                                        }
                                    },
                                })
                            }
                        >
                            Excluir
                        </Button>
                    </Space>
                ),
            },
        ],
        [canEditar, form, id, refetch],
    );

    return (
        <ProjetoLayout
            projetoId={id}
            pageTitle="Débitos técnicos"
            pageIcon="exclamation-triangle"
            titleSection="Governança"
            breadcrumbItems={[
                { title: 'PROJETO' },
                { title: 'Projeto', path: `/projetos/${id}` },
                { title: 'Débitos técnicos' },
            ]}
            data-testid="projeto-debitos-tecnicos"
        >
            
            {itens.length === 0 && !isLoading ? (
                <ProjetoTipologicoEmptyState
                    title="Nenhum débito técnico"
                    domainKey="debitosTecnicos"
                    projetoId={id}
                    primaryAction={
                        canEditar ? (
                            <Button type="primary" onClick={openCreate}>
                                Adicionar débito
                            </Button>
                        ) : undefined
                    }
                />
            ) : (
                <>
                    {abertosSemResponsavel > 0 ? (
                        <Alert
                            type="warning"
                            showIcon
                            style={{ marginBottom: 16 }}
                            data-testid="projeto-debitos-sem-responsavel"
                            message={`${abertosSemResponsavel} débito(s) aberto(s) sem responsável`}
                            description="Atribua ownership para priorizar e acompanhar a quitação."
                        />
                    ) : null}
                    <LazyDataTable
                        columns={columns}
                        data={itens}
                        loading={isLoading}
                        rowKey="id"
                        pagination={{ pageSize: 20, hideOnSinglePage: true }}
                        ariaRegionLabel="Débitos técnicos do projeto"
                        autoMobileFromColumns={{
                            testIdPrefix: 'software-debitos-tecnicos',
                            listHeading: 'Lista de débitos técnicos',
                            getFallbackTitle: (r) =>
                                r.titulo?.trim() || r.codigo?.trim() || `Débito ${r.id}`,
                        }}
                    />
                </>
            )}
            {canEditar ? (
                <ListPageCreateFloatButton
                    icon={<Plus size={ICON_SIZE_MD} aria-hidden />}
                    onClick={openCreate}
                    aria-label="Adicionar débito técnico"
                />
            ) : null}
            

            <Modal
                {...formModalLayout}
                open={modalOpen}
                title={editing ? 'Editar débito' : 'Novo débito técnico'}
                onCancel={() => {
                    setModalOpen(false);
                    setEditing(null);
                }}
                footer={
                    <div className={waygestFormModalFooterClassName}>
                        <Button onClick={() => setModalOpen(false)}>Cancelar</Button>
                        <Tooltip title={tooltipSemEdicao}>
                            <Button
                                type="primary"
                                htmlType="submit"
                                form={FORM_ID}
                                icon={<Save size={ICON_SIZE_MD} aria-hidden />}
                                loading={saveMutation.isPending}
                                disabled={!canEditar}
                            >
                                Salvar
                            </Button>
                        </Tooltip>
                    </div>
                }
            >
                <Form id={FORM_ID} form={form} layout="vertical" onFinish={(v) => saveMutation.mutate(v)} scrollToFirstError>
                    <Form.Item name="codigo" label="Código">
                        <Input placeholder="DT-001" />
                    </Form.Item>
                    <Form.Item name="titulo" label="Título" rules={[{ required: true }]}>
                        <Input />
                    </Form.Item>
                    <Form.Item name="descricao" label="Descrição">
                        <FormTextarea rows={3} />
                    </Form.Item>
                    <Form.Item name="impacto" label="Impacto">
                        <Select allowClear options={NIVEL} />
                    </Form.Item>
                    <Form.Item name="risco" label="Risco">
                        <Select allowClear options={NIVEL} />
                    </Form.Item>
                    <Form.Item name="urgencia" label="Urgência">
                        <Select allowClear options={NIVEL} />
                    </Form.Item>
                    <Form.Item name="esforco" label="Esforço">
                        <Select
                            allowClear
                            options={[
                                { label: 'XS', value: 'xs' },
                                { label: 'S', value: 's' },
                                { label: 'M', value: 'm' },
                                { label: 'L', value: 'l' },
                                { label: 'XL', value: 'xl' },
                            ]}
                        />
                    </Form.Item>
                    <Form.Item name="solucao_proposta" label="Solução proposta">
                        <FormTextarea rows={3} />
                    </Form.Item>
                    <Form.Item name="status" label="Status">
                        <Select options={STATUS} />
                    </Form.Item>
                    <Form.Item name="prazo" label="Prazo (AAAA-MM-DD)">
                        <Input />
                    </Form.Item>
                    <Form.Item name="versao_prevista" label="Versão prevista">
                        <Input />
                    </Form.Item>
                    <Form.Item name="responsavel" label="Responsável">
                        <Input />
                    </Form.Item>
                    <Form.Item name="observacoes" label="Observações">
                        <FormTextarea rows={2} />
                    </Form.Item>
                </Form>
            </Modal>
        </ProjetoLayout>
    );
}