'use client';

/**
 * Integrações de sistemas externos — `/projetos/[id]/software/integracoes-sistemas` (DOC-TEC-121).
 * Distinto de webhooks ERP / `integracoes` do projeto.
 */

import { Network, 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, Select, Space, Spin, Tooltip, Alert, Tag } from 'antd';
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 { IntegracaoSistema, IntegracaoSistemaPayload } from './types';

const FORM_ID = 'projeto-integracao-sistema-form';

const STATUS_OPTIONS = [
    { label: 'Planejada', value: 'planejada' },
    { label: 'Ativa', value: 'ativa' },
    { label: 'Desativada', value: 'desativada' },
];

export function ProjetoSoftwareIntegracoesSistemasScreen() {
    const params = useParams();
    const id = params?.id as string;
    const { canEditar, tooltipSemPermissao } = useProjetoWriteGates();
    const [modalOpen, setModalOpen] = useState(false);
    const [editing, setEditing] = useState<IntegracaoSistema | 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: IntegracaoSistema[] } | IntegracaoSistema[]>({
        queryKey: queryKeys.projetos.integracoesSistemas(id),
        endpoint: API_ENDPOINTS.projetos.integracoesSistemas.index(id),
        enabled: !!id,
        staleTime: 60_000,
    });

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

    const semOwnerCount = useMemo(
        () => itens.filter((i) => !i.owner?.trim()).length,
        [itens],
    );
    const criticasSemOwner = useMemo(
        () =>
            itens.filter(
                (i) =>
                    !i.owner?.trim() &&
                    (i.criticidade === 'alta' || i.criticidade === 'critica'),
            ).length,
        [itens],
    );

    const saveMutation = useMutationCache({
        endpoint: editing
            ? API_ENDPOINTS.projetos.integracoesSistemas.update(id, editing.id)
            : API_ENDPOINTS.projetos.integracoesSistemas.store(id),
        method: editing ? 'PUT' : 'POST',
        invalidateQueries: [queryKeys.projetos.integracoesSistemas(id)],
        onSuccess: () => {
            message.success(editing ? 'Integração atualizada.' : 'Integração registrada.');
            setModalOpen(false);
            setEditing(null);
            form.resetFields();
            refetch();
        },
        onError: (error: unknown) => {
            notifyApiError(error, 'Erro ao salvar a integração.', 'integracoes-sistemas');
        },
    });

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

    const openEdit = (row: IntegracaoSistema) => {
        setEditing(row);
        form.setFieldsValue({
            nome: row.nome,
            proposito: row.proposito ?? '',
            protocolo: row.protocolo ?? '',
            auth_tipo: row.auth_tipo ?? '',
            frequencia: row.frequencia ?? '',
            owner: row.owner ?? '',
            criticidade: row.criticidade ?? undefined,
            falhas_retry: row.falhas_retry ?? '',
            sla_texto: row.sla_texto ?? '',
            status: row.status ?? 'planejada',
        });
        setModalOpen(true);
    };

    const handleDelete = (row: IntegracaoSistema) => {
        confirmDialog({
            title: 'Excluir ficha de integração?',
            content: `A integração «${row.nome}» será removida. Isto não afeta webhooks do ERP.`,
            okText: 'Excluir',
            okType: 'danger',
            cancelText: 'Cancelar',
            onOk: async () => {
                try {
                    await apiClient.delete(
                        API_ENDPOINTS.projetos.integracoesSistemas.destroy(id, row.id),
                    );
                    message.success('Integração excluída.');
                    refetch();
                } catch (error: unknown) {
                    notifyApiError(error, 'Erro ao excluir a integração.', 'integracoes-sistemas');
                }
            },
        });
    };

    const handleSubmit = (values: IntegracaoSistemaPayload) => {
        saveMutation.mutate({
            nome: values.nome?.trim(),
            proposito: values.proposito?.trim() || null,
            protocolo: values.protocolo?.trim() || null,
            auth_tipo: values.auth_tipo?.trim() || null,
            frequencia: values.frequencia?.trim() || null,
            owner: values.owner?.trim() || null,
            criticidade: values.criticidade || null,
            falhas_retry: values.falhas_retry?.trim() || null,
            sla_texto: values.sla_texto?.trim() || null,
            status: values.status || null,
        });
    };

    const tooltipSemEdicao = !canEditar
        ? tooltipSemPermissao('editar integrações de sistemas')
        : undefined;

    const columns = [
        { title: 'Nome', dataIndex: 'nome', key: 'nome', ellipsis: true },
        {
            title: 'Protocolo',
            dataIndex: 'protocolo',
            key: 'protocolo',
            width: 120,
            render: (v: string | null) => v || '—',
        },
        {
            title: 'Criticidade',
            dataIndex: 'criticidade',
            key: 'criticidade',
            width: 110,
            render: (v: string | null | undefined) => {
                if (!v) return '—';
                const color =
                    v === 'critica' ? 'error' : v === 'alta' ? 'warning' : v === 'media' ? 'processing' : 'default';
                return <Tag color={color}>{v}</Tag>;
            },
        },
        {
            title: 'Auth',
            dataIndex: 'auth_tipo',
            key: 'auth_tipo',
            width: 120,
            render: (v: string | null) => v || '—',
        },
        {
            title: 'Status',
            dataIndex: 'status',
            key: 'status',
            width: 110,
            render: (v: string | null) => v || '—',
        },
        {
            title: 'Owner',
            dataIndex: 'owner',
            key: 'owner',
            width: 140,
            ellipsis: true,
            render: (v: string | null) =>
                v?.trim() ? v : <Tag color="warning">Sem owner</Tag>,
        },
        {
            title: 'Ações',
            key: 'acoes',
            width: 160,
            render: (_: unknown, row: IntegracaoSistema) => (
                <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>
            ),
        },
    ];

    if ((loadingProjeto || loadingList) && !projeto && itens.length === 0) {
        return (
            <ProjetoLayout
                projetoId={id}
                pageTitle="Integrações de sistemas"
                pageIcon="network-wired"
                titleSection="Integrações de sistemas"
            >
                <div style={{ textAlign: 'center', padding: 50 }}>
                    <Spin size="large" />
                </div>
            </ProjetoLayout>
        );
    }

    return (
        <ProjetoLayout
            projetoId={id}
            pageTitle="Integrações de sistemas"
            pageIcon="network-wired"
            titleSection="Integrações de sistemas"
            breadcrumbItems={[
                { title: 'PROJETO' },
                { title: projeto?.nome || 'Projeto' },
                { title: 'Integrações de sistemas' },
            ]}
            headerActions={
                <Tooltip title={tooltipSemEdicao}>
                    <Button
                        type="primary"
                        icon={<Plus size={ICON_SIZE_MD} aria-hidden />}
                        disabled={!canEditar}
                        onClick={openCreate}
                        data-testid="projeto-integracoes-sistemas-novo"
                    >
                        Nova integração
                    </Button>
                </Tooltip>
            }
        >
            
            {isError ? (
                <ProjetoTipologicoEmptyState
                    projetoId={id}
                    title="Não foi possível carregar as integrações"
                    domainDescription="A API de integrações de sistemas pode ainda não estar disponível. Isto é distinto dos webhooks do ERP."
                    showSyncCtas
                    data-testid="projeto-integracoes-sistemas-erro"
                />
            ) : itens.length === 0 ? (
                <ProjetoTipologicoEmptyState
                    projetoId={id}
                    title="Nenhuma integração de sistema"
                    domainDescription={TIPOLOGICO_EMPTY_DOMAIN.integracoesSistemas}
                    icon={<Network size={32} aria-hidden />}
                    primaryAction={
                        <Tooltip title={tooltipSemEdicao}>
                            <Button
                                type="primary"
                                icon={<Plus size={ICON_SIZE_MD} aria-hidden />}
                                disabled={!canEditar}
                                onClick={openCreate}
                            >
                                Cadastrar primeira ficha
                            </Button>
                        </Tooltip>
                    }
                    data-testid="projeto-integracoes-sistemas-empty"
                />
            ) : (
                <>
                    {semOwnerCount > 0 ? (
                        <Alert
                            type={criticasSemOwner > 0 ? 'error' : 'warning'}
                            showIcon
                            style={{ marginBottom: 16 }}
                            data-testid="projeto-integracoes-sem-owner"
                            message={
                                criticasSemOwner > 0
                                    ? `${criticasSemOwner} integração(ões) crítica(s)/alta(s) sem owner`
                                    : `${semOwnerCount} integração(ões) sem owner`
                            }
                            description="Defina o responsável pela ficha técnica para operação e incidentes."
                        />
                    ) : null}
                    <LazyDataTable
                        rowKey="id"
                        columns={columns}
                        data={itens}
                        loading={loadingList}
                        pagination={{ pageSize: 20, showSizeChanger: true }}
                        scroll={{ x: true }}
                        data-testid="projeto-integracoes-sistemas-table"
                        ariaRegionLabel="Integrações e sistemas do projeto"
                        autoMobileFromColumns={{
                            testIdPrefix: 'software-integracoes-sistemas',
                            listHeading: 'Integrações e sistemas',
                            getFallbackTitle: (r) =>
                                r.nome?.trim() || `Integração ${r.id}`,
                            getSubtitle: (r) =>
                                [r.status, r.owner?.trim() || null]
                                    .filter(Boolean)
                                    .join(' · ') || undefined,
                            excludeFieldKeys: ['nome'],
                        }}
                    />
                </>
            )}
            

            {canEditar ? (
                <ListPageCreateFloatButton
                    onClick={openCreate}
                    tooltip={{ title: 'Nova integração' }}
                    data-testid="projeto-integracoes-sistemas-fab"
                    aria-label="Nova integração de sistema"
                />
            ) : null}

            <Modal
                {...formModalLayout}
                title={editing ? 'Editar integração' : 'Nova integração de sistema'}
                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
                width={640}
            >
                <Form form={form} layout="vertical" id={FORM_ID} onFinish={handleSubmit} scrollToFirstError>
                    <Form.Item
                        name="nome"
                        label="Nome do sistema"
                        rules={[
                            { required: true, message: 'Informe o nome.' },
                            { max: 255, message: 'Máximo 255 caracteres.' },
                        ]}
                    >
                        <Input placeholder="Ex.: Gateway de pagamento X" allowClear />
                    </Form.Item>
                    <FormTextarea
                        name="proposito"
                        label="Propósito"
                        rows={3}
                        maxLength={2000}
                        showCount
                        placeholder="Para que serve esta integração no projeto…"
                    />
                    <Form.Item name="protocolo" label="Protocolo" rules={[{ max: 128 }]}>
                        <Input placeholder="REST, SOAP, SFTP, fila…" allowClear />
                    </Form.Item>
                    <Form.Item name="auth_tipo" label="Tipo de autenticação" rules={[{ max: 128 }]}>
                        <Input placeholder="OAuth2, API key, mTLS…" allowClear />
                    </Form.Item>
                    <Form.Item name="frequencia" label="Frequência" rules={[{ max: 128 }]}>
                        <Input placeholder="Tempo real, diário, sob demanda…" allowClear />
                    </Form.Item>
                    <Form.Item name="owner" label="Owner" rules={[{ max: 255 }]}>
                        <Input placeholder="Papel ou pessoa responsável" allowClear />
                    </Form.Item>
                    <Form.Item name="criticidade" label="Criticidade">
                        <Select
                            allowClear
                            placeholder="Criticidade"
                            options={[
                                { label: 'Baixa', value: 'baixa' },
                                { label: 'Média', value: 'media' },
                                { label: 'Alta', value: 'alta' },
                                { label: 'Crítica', value: 'critica' },
                            ]}
                        />
                    </Form.Item>
                    <FormTextarea
                        name="falhas_retry"
                        label="Falhas e retry"
                        rows={3}
                        maxLength={2000}
                        showCount
                        placeholder="Política de retry, circuit breaker, alertas…"
                    />
                    <FormTextarea
                        name="sla_texto"
                        label="SLA"
                        rows={2}
                        maxLength={1000}
                        showCount
                        placeholder="Acordo de nível de serviço / RTO esperado…"
                    />
                    <Form.Item name="status" label="Status">
                        <Select options={STATUS_OPTIONS} allowClear placeholder="Status" />
                    </Form.Item>
                </Form>
            </Modal>
        </ProjetoLayout>
    );
}