'use client';

/**
 * Domínios do projeto (`/projetos/[id]/software/dominios`).
 * CRUD completo em `GET/POST/PUT/DELETE /v1/projetos/{id}/dominios`.
 */

import React, { useEffect, useMemo, useState } from 'react';
import { Globe, Loader2, Menu as MenuIcon, Plus } from 'lucide-react';
import { useParams } from 'next/navigation';
import { Button, Form, Modal, Space, Tooltip } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import ProjetoLayout from '@/components/layouts/ProjetoLayout';
import { OperativeRouteHint } from '@/components/layouts/OperativeRouteHint/OperativeRouteHint';
import { useProjetoLayoutContextOptional } from '@/components/layouts/ProjetoLayout/ProjetoLayoutContext';
import { ICON_SIZE_MD } from '@/components/icons';
import { FormInput, FormTextarea } from '@/components/form';
import { ListPageCreateFloatButton } from '@/components/listings';
import { useProjetoWriteGates } from '@/features/projetos/hooks/useProjetoWriteGates';
import { LazyDataTable, LazyExportButton } from '@/components/lazy';
import { TableScrollWrapper } from '@/components/tables/TableScrollWrapper';
import btnHeaderStyles from '@/components/ui/buttons/ButtonHeaderIcon/ButtonHeaderIcon.module.scss';
import { routeProjetoId } from '@/features/projetos/feira-list';
import { useRecordWebsiteOnboardingVisit } from '@/features/projetos/website-personalizado-onboarding';
import { isAplicacaoReactTipologia } from '@/features/projetos/lib/resolveAplicacaoReactTipologiaCopy';
import { AplicacaoReactExportCsvButton } from '@/features/projetos/aplicacao-react-export';
import { CloudflareDnsSyncStubSection } from '@/features/projetos/projeto-software-dominios/CloudflareDnsSyncStubSection';
import { ModalOpcoesDominio } from '@/features/projetos/projeto-software-dominios/ModalOpcoesDominio';
import type { ProjetoDominioType } from '@/features/projetos/projeto-software-dominios/types';
import {
    ProjetoTipologicoEmptyState,
    TIPOLOGICO_EMPTY_DOMAIN,
} from '@/features/projetos/projeto-tipologico-empty-state';
import { useQueryCache } from '@/hooks/useQueryCache';
import { useMutationCache } from '@/hooks/useMutationCache';
import {
    useWaygestFormModalProps,
    waygestFormModalFooterClassName,
} from '@/hooks/useWaygestFormModalProps';
import { queryKeys } from '@/lib/cache/queryKeys';
import { API_ENDPOINTS } from '@/lib/api/endpoints';
import apiClient from '@/lib/api/client';
import { message } from '@/lib/feedback/message';
import { confirmDialog } from '@/lib/feedback/confirmDialog';
import { notifyApiError } from '@/lib/feedback/notifyApiError';
import { extractApiErrorMessage } from '@/lib/api/extractApiErrorMessage';

export function ProjetoSoftwareDominiosScreen() {
    const params = useParams();
    const id = routeProjetoId(params);

    return (
        <ProjetoLayout
            projetoId={id}
            pageTitle="Domínios"
            pageIcon="globe"
            titleSection="Domínios"
            breadcrumbItems={[
                { title: 'PROJETO' },
                { title: 'Projeto', path: `/projetos/${id}` },
                { title: 'Software' },
                { title: 'Domínios' },
            ]}
        >
            <ProjetoSoftwareDominiosBody projetoId={id} />
        </ProjetoLayout>
    );
}

function ProjetoSoftwareDominiosBody({ projetoId }: { projetoId: string }) {
    const { canEditar, permsLoading } = useProjetoWriteGates();
    const layoutCtx = useProjetoLayoutContextOptional();
    const projeto = layoutCtx?.projeto;
    const tipologiaReady = layoutCtx != null && !layoutCtx.isLoading;
    const tipologiaCodigo = projeto?.categoria_projeto?.codigo;
    const isAplicacaoReact = isAplicacaoReactTipologia(tipologiaCodigo);
    const projetoIdNum = Number(projetoId);
    const showCloudflareStub =
        tipologiaReady && !isAplicacaoReact && Number.isFinite(projetoIdNum);

    const [modalVisible, setModalVisible] = useState(false);
    const [editingItem, setEditingItem] = useState<ProjetoDominioType | null>(null);
    const [opcoesItem, setOpcoesItem] = useState<ProjetoDominioType | null>(null);
    const [form] = Form.useForm();
    const formModalLayout = useWaygestFormModalProps();

    useRecordWebsiteOnboardingVisit(projetoId, 'dominios');

    const {
        data: listResponse,
        isLoading,
        refetch,
    } = useQueryCache<{ data: ProjetoDominioType[] }>({
        queryKey: queryKeys.projetos.dominios(projetoId),
        endpoint: API_ENDPOINTS.projetos.dominios.index(projetoId),
        enabled: !!projetoId,
    });

    const list = listResponse?.data ?? [];

    const saveMutation = useMutationCache<
        ProjetoDominioType,
        { dominio: string; observacoes?: string }
    >({
        endpoint: editingItem
            ? API_ENDPOINTS.projetos.dominios.update(projetoId, editingItem.id)
            : API_ENDPOINTS.projetos.dominios.store(projetoId),
        method: editingItem ? 'PUT' : 'POST',
        invalidateQueries: [queryKeys.projetos.dominios(projetoId)],
        onSuccess: () => {
            message.success(
                editingItem
                    ? 'Domínio atualizado com sucesso!'
                    : 'Domínio cadastrado com sucesso!',
            );
            setModalVisible(false);
            setEditingItem(null);
            form.resetFields();
            refetch();
        },
        onError: (error: unknown) => {
            notifyApiError(
                error,
                extractApiErrorMessage(error, 'Erro ao salvar o domínio.'),
                'dominios',
            );
        },
    });

    const handleCreate = () => {
        setEditingItem(null);
        form.resetFields();
        setModalVisible(true);
    };

    const handleEdit = (item: ProjetoDominioType) => {
        setEditingItem(item);
        setModalVisible(true);
    };

    useEffect(() => {
        if (!modalVisible || !editingItem) return;
        form.setFieldsValue({
            dominio: editingItem.dominio,
            observacoes: editingItem.observacoes ?? '',
        });
    }, [modalVisible, editingItem, form]);

    const handleDelete = async (item: ProjetoDominioType) => {
        const result = await confirmDialog({
            title: 'Excluir domínio?',
            content: `O domínio "${item.dominio}" será removido deste projeto.`,
            okText: 'Excluir',
            okType: 'danger',
        });
        if (!result.isConfirmed) return;
        try {
            await apiClient.delete(
                API_ENDPOINTS.projetos.dominios.destroy(projetoId, item.id),
            );
            message.success('Domínio excluído com sucesso!');
            setOpcoesItem(null);
            refetch();
        } catch (error: unknown) {
            notifyApiError(error, 'Erro ao excluir o domínio.', 'dominios');
        }
    };

    const handleSubmit = (values: Record<string, unknown>) => {
        const dominio = String(values.dominio ?? '').trim();
        if (!dominio) {
            message.warning('Informe o domínio.');
            return;
        }
        saveMutation.mutate({
            dominio,
            observacoes: values.observacoes
                ? String(values.observacoes).trim()
                : undefined,
        });
    };

    const exportRows = useMemo(
        () =>
            list.map((d) => ({
                dominio: d.dominio,
                observacoes: d.observacoes ?? '',
            })),
        [list],
    );

    const columns: ColumnsType<ProjetoDominioType> = [
        {
            title: 'Domínio',
            dataIndex: 'dominio',
            key: 'dominio',
            sorter: (a, b) =>
                String(a.dominio ?? '').localeCompare(String(b.dominio ?? ''), 'pt'),
            render: (v: string) => (
                <span style={{ fontWeight: 600, color: '#2c3e50' }}>{v}</span>
            ),
        },
        {
            title: 'Observações',
            dataIndex: 'observacoes',
            key: 'observacoes',
            ellipsis: true,
            render: (v: string | null | undefined) => v || '—',
        },
        {
            title: '',
            key: 'menu',
            width: 56,
            align: 'center',
            onCell: () => ({ onClick: (e: React.MouseEvent) => e.stopPropagation() }),
            render: (_: unknown, record: ProjetoDominioType) => (
                <Button
                    type="text"
                    size="small"
                    icon={<MenuIcon size={ICON_SIZE_MD} aria-hidden />}
                    onClick={() => setOpcoesItem(record)}
                    aria-label="Opções"
                />
            ),
        },
    ];

    return (
        <div data-testid="projeto-software-dominios-screen">
            {isLoading ? (
                <div style={{ textAlign: 'center', padding: 40 }}>
                    <Loader2
                        size={ICON_SIZE_MD}
                        style={{ fontSize: 32, color: '#95a5a6' }}
                        className="animate-spin"
                        aria-hidden
                    />
                    <p style={{ marginTop: 12, color: '#7f8c8d' }}>Carregando domínios…</p>
                </div>
            ) : list.length === 0 ? (
                
                <ProjetoTipologicoEmptyState
                    projetoId={projetoId}
                    icon={
                        <Globe
                            size={ICON_SIZE_MD}
                            style={{ fontSize: 48, color: '#d9d9d9' }}
                            aria-hidden
                        />
                    }
                    title="Nenhum domínio cadastrado"
                    domainDescription={
                        canEditar
                            ? TIPOLOGICO_EMPTY_DOMAIN.dominios
                            : 'Não há domínios nesta listagem. Peça acesso para cadastrar se precisar incluir um registro.'
                    }
                    data-testid="projeto-dominios-empty"
                    primaryAction={
                        !permsLoading && canEditar ? (
                            <Space wrap>
                                <Button
                                    type="primary"
                                    icon={<Plus size={ICON_SIZE_MD} aria-hidden />}
                                    onClick={handleCreate}
                                    data-testid="projeto-dominios-adicionar"
                                >
                                    Adicionar domínio
                                </Button>
                                {isAplicacaoReact ? (
                                    <AplicacaoReactExportCsvButton
                                        projetoId={projetoId}
                                        kind="dominios"
                                    />
                                ) : null}
                            </Space>
                        ) : isAplicacaoReact ? (
                            <AplicacaoReactExportCsvButton
                                projetoId={projetoId}
                                kind="dominios"
                            />
                        ) : undefined
                    }
                />
                
            ) : (
                <>
                    <div
                        style={{
                            marginBottom: 16,
                            display: 'flex',
                            justifyContent: 'flex-end',
                        }}
                    >
                        <Space wrap size={8}>
                            {isAplicacaoReact ? (
                                <AplicacaoReactExportCsvButton
                                    projetoId={projetoId}
                                    kind="dominios"
                                />
                            ) : null}
                            <Tooltip title="Exportar os domínios visíveis nesta página">
                                <span style={{ display: 'inline-block' }}>
                                    <LazyExportButton
                                        data={
                                            exportRows as unknown as Record<string, unknown>[]
                                        }
                                        columns={[
                                            { key: 'dominio', label: 'Domínio' },
                                            { key: 'observacoes', label: 'Observações' },
                                        ]}
                                        filename={`projeto-${projetoId}-dominios`}
                                        title="Exportar domínios"
                                        iconOnly
                                        size="large"
                                        exportMenuMode="modal"
                                        className={btnHeaderStyles.btnHeaderIcon}
                                    />
                                </span>
                            </Tooltip>
                            {!permsLoading && canEditar ? (
                                <Button
                                    type="primary"
                                    icon={<Plus size={ICON_SIZE_MD} aria-hidden />}
                                    onClick={handleCreate}
                                    data-testid="projeto-dominios-adicionar"
                                >
                                    Adicionar domínio
                                </Button>
                            ) : null}
                        </Space>
                    </div>
                    <OperativeRouteHint
                        type="info"
                        message="Domínios do projeto"
                        description="Cadastre FQDNs usados no go-live. Sync Cloudflare permanece opcional/externo; aqui o registro é do Waygest."
                    />
                    <TableScrollWrapper>
                        <LazyDataTable
                            columns={columns}
                            data={list}
                            loading={false}
                            rowKey="id"
                            onRow={(record: unknown) => ({
                                onClick: () => setOpcoesItem(record as ProjetoDominioType),
                                style: { cursor: 'pointer' },
                            })}
                        />
                    </TableScrollWrapper>
                </>
            )}

            <ModalOpcoesDominio
                open={opcoesItem !== null}
                onClose={() => setOpcoesItem(null)}
                item={opcoesItem}
                onEditar={(item) => {
                    setOpcoesItem(null);
                    handleEdit(item);
                }}
                onExcluir={(item) => {
                    void handleDelete(item);
                }}
            />

            <Modal
                title={editingItem ? 'Editar domínio' : 'Novo domínio'}
                data-testid="projeto-dominios-form-modal"
                open={modalVisible}
                onCancel={() => {
                    setModalVisible(false);
                    setEditingItem(null);
                    form.resetFields();
                }}
                footer={
                    <div className={waygestFormModalFooterClassName}>
                        <Button
                            onClick={() => {
                                setModalVisible(false);
                                setEditingItem(null);
                                form.resetFields();
                            }}
                        >
                            Cancelar
                        </Button>
                        <Button
                            type="primary"
                            loading={saveMutation.isPending}
                            onClick={() => form.submit()}
                            data-testid="projeto-dominios-salvar"
                        >
                            {editingItem ? 'Atualizar' : 'Salvar'}
                        </Button>
                    </div>
                }
                width={formModalLayout.width ?? 560}
                centered={formModalLayout.centered ?? true}
                className={formModalLayout.className}
                styles={formModalLayout.styles ?? {}}
                destroyOnHidden
            >
                <Form form={form} layout="vertical" onFinish={handleSubmit} scrollToFirstError>
                    <FormInput
                        name="dominio"
                        label="Domínio"
                        placeholder="Ex.: www.exemplo.com.br"
                        rules={[{ required: true, message: 'Informe o domínio.' }]}
                    />
                    <FormTextarea
                        name="observacoes"
                        label="Observações"
                        rows={3}
                        placeholder="Ambiente, registrador, responsável pela renovação…"
                    />
                </Form>
            </Modal>

            {showCloudflareStub ? (
                <CloudflareDnsSyncStubSection projetoId={projetoIdNum} />
            ) : null}

            {!permsLoading && canEditar ? (
                <ListPageCreateFloatButton
                    data-testid="projeto-dominios-fab-novo"
                    tooltip={{ title: 'Adicionar domínio' }}
                    onClick={handleCreate}
                />
            ) : null}
        </div>
    );
}