'use client';

/**
 * Inventário de infraestrutura tipológica — `/projetos/[id]/software/infraestrutura-inventario`.
 * Distinto de hospedagem/FTP (`software/hospedagem`).
 */

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 { Button, Form, Input, Modal, Select, Space, 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';
import type { ProjetoSoftwareAmbiente } from '@/features/projetos/projeto-software-ambientes/types';
import {
    INFRA_TIPO_OPTIONS,
    type ProjetoSoftwareInfraRecurso,
} from './types';

const FORM_ID = 'projeto-infra-recurso-form';

export function ProjetoSoftwareInfraestruturaInventarioScreen() {
    const params = useParams();
    const id = params?.id as string;
    const { canEditar, tooltipSemPermissao } = useProjetoWriteGates();
    const tooltipSemEdicao = !canEditar
        ? tooltipSemPermissao('editar inventário de infraestrutura')
        : undefined;
    const [modalOpen, setModalOpen] = useState(false);
    const [editing, setEditing] = useState<ProjetoSoftwareInfraRecurso | null>(null);
    const [form] = Form.useForm();
    const formModalLayout = useWaygestFormModalProps();

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

    const { data: ambientesData } = useQueryCache<
        { data: ProjetoSoftwareAmbiente[] } | ProjetoSoftwareAmbiente[]
    >({
        queryKey: queryKeys.projetos.ambientes(id),
        endpoint: API_ENDPOINTS.projetos.ambientes.index(id),
        enabled: !!id,
        staleTime: 60_000,
    });

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

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

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

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

    const openEdit = (row: ProjetoSoftwareInfraRecurso) => {
        setEditing(row);
        form.setFieldsValue({
            nome: row.nome,
            tipo: row.tipo,
            ambiente_id: row.ambiente_id ?? undefined,
            fornecedor: row.fornecedor ?? '',
            finalidade: row.finalidade ?? '',
            tecnologia: row.tecnologia ?? '',
            versao: row.versao ?? '',
            capacidade: row.capacidade ?? '',
            criticidade: row.criticidade ?? undefined,
            status: row.status ?? 'ativo',
            responsavel: row.responsavel ?? '',
            observacoes: row.observacoes ?? '',
        });
        setModalOpen(true);
    };

    const handleDelete = (row: ProjetoSoftwareInfraRecurso) => {
        confirmDialog({
            title: 'Excluir recurso?',
            content: `Remover “${row.nome}”?`,
            okText: 'Excluir',
            okType: 'danger',
            onOk: async () => {
                try {
                    await apiClient.delete(API_ENDPOINTS.projetos.infraRecursos.destroy(id, row.id));
                    message.success('Recurso excluído.');
                    refetch();
                } catch (error) {
                    notifyApiError(error, 'Erro ao excluir.', 'infra-recursos');
                }
            },
        });
    };

    const columns: ColumnsType<ProjetoSoftwareInfraRecurso> = useMemo(
        () => [
            { title: 'Nome', dataIndex: 'nome', key: 'nome' },
            { title: 'Tipo', dataIndex: 'tipo', key: 'tipo', width: 140 },
            {
                title: 'Ambiente',
                key: 'ambiente',
                width: 140,
                render: (_: unknown, row: ProjetoSoftwareInfraRecurso) =>
                    row.ambiente?.nome ?? '—',
            },
            { title: 'Tecnologia', dataIndex: 'tecnologia', key: 'tech', width: 120 },
            { title: 'Criticidade', dataIndex: 'criticidade', key: 'crit', width: 110 },
            { title: 'Status', dataIndex: 'status', key: 'status', width: 100 },
            {
                title: 'Ações',
                key: 'acoes',
                width: 160,
                render: (_: unknown, row: ProjetoSoftwareInfraRecurso) => (
                    <Space>
                        <Button type="link" disabled={!canEditar} onClick={() => openEdit(row)}>
                            Editar
                        </Button>
                        <Button
                            type="link"
                            danger
                            disabled={!canEditar}
                            onClick={() => handleDelete(row)}
                        >
                            Excluir
                        </Button>
                    </Space>
                ),
            },
        ],
        [canEditar],
    );

    return (
        <ProjetoLayout
            projetoId={id}
            pageTitle="Inventário de infraestrutura"
            pageIcon="server"
            titleSection="Especificação"
            breadcrumbItems={[
                { title: 'PROJETO' },
                { title: 'Projeto', path: `/projetos/${id}` },
                { title: 'Infraestrutura' },
            ]}
            data-testid="projeto-infra-inventario"
        >
            
            {itens.length === 0 && !isLoading ? (
                <ProjetoTipologicoEmptyState
                    title="Inventário de infraestrutura vazio"
                    domainKey="infraestrutura"
                    projetoId={id}
                    primaryAction={
                        canEditar ? (
                            <Button type="primary" onClick={openCreate}>
                                Adicionar recurso
                            </Button>
                        ) : undefined
                    }
                />
            ) : (
                <LazyDataTable
                    columns={columns}
                    data={itens}
                    loading={isLoading}
                    rowKey="id"
                    pagination={{ pageSize: 20, hideOnSinglePage: true }}
                    ariaRegionLabel="Inventário de infraestrutura do projeto"
                    autoMobileFromColumns={{
                        testIdPrefix: 'software-infraestrutura',
                        listHeading: 'Inventário de infraestrutura',
                        getFallbackTitle: (r) =>
                            r.nome?.trim() || `Recurso ${r.id}`,
                        getSubtitle: (r) =>
                            [r.tipo, r.ambiente?.nome, r.status]
                                .filter(Boolean)
                                .join(' · ') || undefined,
                        excludeFieldKeys: ['nome'],
                    }}
                />
            )}
            {canEditar ? (
                <ListPageCreateFloatButton
                    icon={<Plus size={ICON_SIZE_MD} aria-hidden />}
                    onClick={openCreate}
                    aria-label="Adicionar recurso de infraestrutura"
                />
            ) : null}
            

            <Modal
                {...formModalLayout}
                open={modalOpen}
                title={editing ? 'Editar recurso' : 'Novo recurso'}
                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={(values) =>
                        saveMutation.mutate({
                            ...values,
                            ambiente_id: values.ambiente_id ?? null,
                        })
                    }
                    scrollToFirstError
                >
                    <Form.Item name="nome" label="Nome" rules={[{ required: true }]}>
                        <Input />
                    </Form.Item>
                    <Form.Item name="tipo" label="Tipo" rules={[{ required: true }]}>
                        <Select options={INFRA_TIPO_OPTIONS} />
                    </Form.Item>
                    <Form.Item name="ambiente_id" label="Ambiente">
                        <Select
                            allowClear
                            options={ambientes.map((a) => ({
                                label: `${a.nome} (${a.tipo})`,
                                value: a.id,
                            }))}
                        />
                    </Form.Item>
                    <Form.Item name="fornecedor" label="Fornecedor">
                        <Input />
                    </Form.Item>
                    <Form.Item name="tecnologia" label="Tecnologia">
                        <Input />
                    </Form.Item>
                    <Form.Item name="versao" label="Versão">
                        <Input />
                    </Form.Item>
                    <Form.Item name="capacidade" label="Capacidade">
                        <Input />
                    </Form.Item>
                    <Form.Item name="criticidade" label="Criticidade">
                        <Select
                            allowClear
                            options={[
                                { label: 'Baixa', value: 'baixa' },
                                { label: 'Média', value: 'media' },
                                { label: 'Alta', value: 'alta' },
                                { label: 'Crítica', value: 'critica' },
                            ]}
                        />
                    </Form.Item>
                    <Form.Item name="status" label="Status">
                        <Select
                            options={[
                                { label: 'Ativo', value: 'ativo' },
                                { label: 'Inativo', value: 'inativo' },
                                { label: 'Planejado', value: 'planejado' },
                            ]}
                        />
                    </Form.Item>
                    <Form.Item name="responsavel" label="Responsável">
                        <Input />
                    </Form.Item>
                    <Form.Item name="finalidade" label="Finalidade">
                        <Input />
                    </Form.Item>
                    <Form.Item name="observacoes" label="Observações">
                        <FormTextarea rows={3} />
                    </Form.Item>
                </Form>
            </Modal>
        </ProjetoLayout>
    );
}