'use client';

/**
 * Arquitetura tipológica — narrativa C4 + componentes + relações/Mermaid.
 * Rota: `/projetos/[id]/software/arquitetura`
 */

import { Copy, GitBranch, Network, Plus, Save } from 'lucide-react';
import { ICON_SIZE_MD } from '@/components/icons';
import React, { useEffect, useMemo, useState } from 'react';
import { useParams } from 'next/navigation';
import { Alert, Button, Form, Input, Modal, Select, Space, Spin, Tabs, Tag, Tooltip } 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 {
    COMPONENTE_TIPO_OPTIONS,
    type ProjetoSoftwareComponenteArq,
    type ProjetoSoftwareComponenteRelacao,
} from './types';

const FORM_COMP = 'projeto-software-componente-arq-form';
const FORM_REL = 'projeto-software-componente-rel-form';

const STATUS_OPTIONS = [
    { label: 'Ativo', value: 'ativo' },
    { label: 'Inativo', value: 'inativo' },
    { label: 'Planejado', value: 'planejado' },
    { label: 'Legado', value: 'legado' },
];

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

export function ProjetoSoftwareArquiteturaScreen() {
    const params = useParams();
    const id = params?.id as string;
    const { canEditar, tooltipSemPermissao } = useProjetoWriteGates();
    const tooltipSemEdicao = !canEditar
        ? tooltipSemPermissao('editar arquitetura')
        : undefined;

    const [compModal, setCompModal] = useState(false);
    const [editingComp, setEditingComp] = useState<ProjetoSoftwareComponenteArq | null>(null);
    const [relModal, setRelModal] = useState(false);
    const [editingRel, setEditingRel] = useState<ProjetoSoftwareComponenteRelacao | null>(null);
    const [compForm] = Form.useForm();
    const [relForm] = Form.useForm();
    const [c4Form] = Form.useForm();
    const formModalLayout = useWaygestFormModalProps();

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

    useEffect(() => {
        c4Form.setFieldsValue({ arquitetura_c4: projeto?.arquitetura_c4 ?? '' });
    }, [projeto?.arquitetura_c4, c4Form]);

    const {
        data: listCompData,
        isLoading: loadingComp,
        refetch: refetchComp,
    } = useQueryCache<{ data: ProjetoSoftwareComponenteArq[] } | ProjetoSoftwareComponenteArq[]>({
        queryKey: queryKeys.projetos.componentesArq(id),
        endpoint: API_ENDPOINTS.projetos.componentesArq.index(id),
        enabled: !!id,
        staleTime: 60_000,
    });

    const {
        data: listRelData,
        isLoading: loadingRel,
        refetch: refetchRel,
    } = useQueryCache<{ data: ProjetoSoftwareComponenteRelacao[] } | ProjetoSoftwareComponenteRelacao[]>({
        queryKey: queryKeys.projetos.componentesArqRelacoes(id),
        endpoint: API_ENDPOINTS.projetos.componentesArqRelacoes.index(id),
        enabled: !!id,
        staleTime: 60_000,
    });

    const { data: diagramaData, refetch: refetchDiagrama } = useQueryCache<{
        mermaid: string;
        componentes_count: number;
        relacoes_count: number;
    }>({
        queryKey: queryKeys.projetos.componentesArqDiagrama(id),
        endpoint: API_ENDPOINTS.projetos.componentesArq.diagrama(id),
        enabled: !!id,
        staleTime: 30_000,
    });

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

    const semResponsavelCount = useMemo(
        () => componentes.filter((c) => !c.responsavel?.trim()).length,
        [componentes],
    );

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

    const invalidateArq = [
        queryKeys.projetos.componentesArq(id),
        queryKeys.projetos.componentesArqRelacoes(id),
        queryKeys.projetos.componentesArqDiagrama(id),
        queryKeys.projetos.documentacaoHealth(id),
    ];

    const saveCompMutation = useMutationCache({
        endpoint: editingComp
            ? API_ENDPOINTS.projetos.componentesArq.update(id, editingComp.id)
            : API_ENDPOINTS.projetos.componentesArq.store(id),
        method: editingComp ? 'PUT' : 'POST',
        invalidateQueries: invalidateArq,
        onSuccess: () => {
            message.success(editingComp ? 'Componente atualizado.' : 'Componente registrado.');
            setCompModal(false);
            setEditingComp(null);
            compForm.resetFields();
            refetchComp();
            refetchDiagrama();
        },
        onError: (error: unknown) => {
            notifyApiError(error, 'Erro ao salvar o componente.', 'componentes-arq');
        },
    });

    const saveRelMutation = useMutationCache({
        endpoint: editingRel
            ? API_ENDPOINTS.projetos.componentesArqRelacoes.update(id, editingRel.id)
            : API_ENDPOINTS.projetos.componentesArqRelacoes.store(id),
        method: editingRel ? 'PUT' : 'POST',
        invalidateQueries: invalidateArq,
        onSuccess: () => {
            message.success(editingRel ? 'Relação atualizada.' : 'Relação registrada.');
            setRelModal(false);
            setEditingRel(null);
            relForm.resetFields();
            refetchRel();
            refetchDiagrama();
        },
        onError: (error: unknown) => {
            notifyApiError(error, 'Erro ao salvar a relação.', 'componentes-arq-rel');
        },
    });

    const c4Mutation = useMutationCache({
        endpoint: API_ENDPOINTS.projetos.update(id),
        method: 'PUT',
        invalidateQueries: [
            queryKeys.projetos.detail(id),
            queryKeys.projetos.documentacaoHealth(id),
        ],
        onSuccess: () => {
            message.success('Narrativa C4 salva.');
            refetchProjeto();
        },
        onError: (error: unknown) => {
            notifyApiError(error, 'Erro ao salvar a narrativa.', 'arquitetura-c4');
        },
    });

    const openCreateComp = () => {
        setEditingComp(null);
        compForm.resetFields();
        compForm.setFieldsValue({ tipo: 'backend', status: 'ativo' });
        setCompModal(true);
    };

    const openEditComp = (row: ProjetoSoftwareComponenteArq) => {
        setEditingComp(row);
        compForm.setFieldsValue({
            nome: row.nome,
            tipo: row.tipo,
            tecnologia: row.tecnologia ?? '',
            versao: row.versao ?? '',
            finalidade: row.finalidade ?? '',
            status: row.status ?? 'ativo',
            criticidade: row.criticidade ?? undefined,
            responsavel: row.responsavel ?? '',
            descricao: row.descricao ?? '',
            observacoes: row.observacoes ?? '',
        });
        setCompModal(true);
    };

    const handleDeleteComp = (row: ProjetoSoftwareComponenteArq) => {
        confirmDialog({
            title: 'Excluir componente?',
            content: `Remover “${row.nome}”? Relações associadas serão removidas.`,
            okText: 'Excluir',
            okType: 'danger',
            onOk: async () => {
                try {
                    await apiClient.delete(API_ENDPOINTS.projetos.componentesArq.destroy(id, row.id));
                    message.success('Componente excluído.');
                    refetchComp();
                    refetchRel();
                    refetchDiagrama();
                } catch (error) {
                    notifyApiError(error, 'Erro ao excluir.', 'componentes-arq');
                }
            },
        });
    };

    const openCreateRel = () => {
        setEditingRel(null);
        relForm.resetFields();
        relForm.setFieldsValue({ direcao: 'origem_destino', sincronismo: 'sincrono' });
        setRelModal(true);
    };

    const openEditRel = (row: ProjetoSoftwareComponenteRelacao) => {
        setEditingRel(row);
        relForm.setFieldsValue({
            origem_id: row.origem_id,
            destino_id: row.destino_id,
            protocolo: row.protocolo ?? '',
            porta: row.porta ?? '',
            direcao: row.direcao ?? 'origem_destino',
            sincronismo: row.sincronismo ?? undefined,
            autenticacao: row.autenticacao ?? '',
            criticidade: row.criticidade ?? undefined,
            descricao: row.descricao ?? '',
        });
        setRelModal(true);
    };

    const handleDeleteRel = (row: ProjetoSoftwareComponenteRelacao) => {
        confirmDialog({
            title: 'Excluir relação?',
            content: 'Remover esta aresta do diagrama?',
            okText: 'Excluir',
            okType: 'danger',
            onOk: async () => {
                try {
                    await apiClient.delete(
                        API_ENDPOINTS.projetos.componentesArqRelacoes.destroy(id, row.id),
                    );
                    message.success('Relação excluída.');
                    refetchRel();
                    refetchDiagrama();
                } catch (error) {
                    notifyApiError(error, 'Erro ao excluir.', 'componentes-arq-rel');
                }
            },
        });
    };

    const copyMermaid = async () => {
        const text = diagramaData?.mermaid ?? '';
        if (!text) return;
        try {
            await navigator.clipboard.writeText(text);
            message.success('Mermaid copiado.');
        } catch {
            message.error('Não foi possível copiar.');
        }
    };

    const compOptions = componentes.map((c) => ({ label: c.nome, value: c.id }));

    if (loadingProjeto && !projeto) {
        return (
            <ProjetoLayout projetoId={id} pageTitle="Arquitetura" pageIcon="sitemap">
                <Spin />
            </ProjetoLayout>
        );
    }

    return (
        <ProjetoLayout
            projetoId={id}
            pageTitle="Arquitetura"
            pageIcon="sitemap"
            titleSection="Arquitetura"
            breadcrumbItems={[
                { title: 'PROJETO' },
                { title: 'Projeto', path: `/projetos/${id}` },
                { title: 'Arquitetura' },
            ]}
            data-testid="projeto-arquitetura"
        >
            
            <Tabs
                items={[
                    {
                        key: 'componentes',
                        label: (
                            <span>
                                <Network size={14} aria-hidden style={{ marginInlineEnd: 6 }} />
                                Componentes
                            </span>
                        ),
                        children: (
                            <>
                                {componentes.length > 0 && semResponsavelCount > 0 ? (
                                    <Alert
                                        type="warning"
                                        showIcon
                                        style={{ marginBottom: 16 }}
                                        data-testid="projeto-arquitetura-sem-responsavel"
                                        message={`${semResponsavelCount} componente(s) sem responsável`}
                                        description="Defina ownership técnico para operação e incidentes."
                                    />
                                ) : null}
                                {componentes.length === 0 && !loadingComp ? (
                                    <ProjetoTipologicoEmptyState
                                        title="Nenhum componente arquitetural"
                                        domainKey="arquitetura"
                                        projetoId={id}
                                        primaryAction={
                                            canEditar ? (
                                                <Button type="primary" onClick={openCreateComp}>
                                                    Adicionar componente
                                                </Button>
                                            ) : undefined
                                        }
                                    />
                                ) : (
                                    <LazyDataTable
                                        rowKey="id"
                                        loading={loadingComp}
                                        data={componentes}
                                        pagination={{ pageSize: 20, hideOnSinglePage: true }}
                                        autoMobileFromColumns={{
                                            testIdPrefix: 'software-arquitetura-componentes',
                                            listHeading: 'Componentes de arquitetura',
                                            getFallbackTitle: (r) =>
                                                r.nome?.trim() || `Componente ${r.id}`,
                                        }}
                                        columns={[
                                            { title: 'Nome', dataIndex: 'nome', key: 'nome' },
                                            { title: 'Tipo', dataIndex: 'tipo', key: 'tipo', width: 130 },
                                            {
                                                title: 'Tecnologia',
                                                key: 'tech',
                                                render: (_: unknown, r: ProjetoSoftwareComponenteArq) =>
                                                    [r.tecnologia, r.versao].filter(Boolean).join(' ') || '—',
                                            },
                                            {
                                                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: 'Responsável',
                                                dataIndex: 'responsavel',
                                                key: 'responsavel',
                                                width: 140,
                                                render: (v: string | null | undefined) =>
                                                    v?.trim() ? (
                                                        v
                                                    ) : (
                                                        <Tag color="warning">Sem responsável</Tag>
                                                    ),
                                            },
                                            { title: 'Status', dataIndex: 'status', key: 'status', width: 110 },
                                            {
                                                title: 'Ações',
                                                key: 'acoes',
                                                width: 160,
                                                render: (_: unknown, row: ProjetoSoftwareComponenteArq) => (
                                                    <Space>
                                                        <Button
                                                            type="link"
                                                            disabled={!canEditar}
                                                            onClick={() => openEditComp(row)}
                                                        >
                                                            Editar
                                                        </Button>
                                                        <Button
                                                            type="link"
                                                            danger
                                                            disabled={!canEditar}
                                                            onClick={() => handleDeleteComp(row)}
                                                        >
                                                            Excluir
                                                        </Button>
                                                    </Space>
                                                ),
                                            },
                                        ]}
                                        ariaRegionLabel="Componentes de arquitetura do projeto"
                                    />
                                )}
                                {canEditar ? (
                                    <ListPageCreateFloatButton
                                        icon={<Plus size={ICON_SIZE_MD} aria-hidden />}
                                        onClick={openCreateComp}
                                        aria-label="Adicionar componente"
                                    />
                                ) : null}
                            </>
                        ),
                    },
                    {
                        key: 'relacoes',
                        label: (
                            <span>
                                <GitBranch size={14} aria-hidden style={{ marginInlineEnd: 6 }} />
                                Relações / Mermaid
                            </span>
                        ),
                        children: (
                            <Space direction="vertical" size="large" style={{ width: '100%' }}>
                                {relacoes.length === 0 && !loadingRel ? (
                                    <ProjetoTipologicoEmptyState
                                        title="Nenhuma relação entre componentes"
                                        domainDescription="Ligue origem→destino (protocolo, porta, sincronismo) para gerar o diagrama."
                                        syncScope="manual_only"
                                        projetoId={id}
                                        primaryAction={
                                            canEditar && componentes.length >= 2 ? (
                                                <Button type="primary" onClick={openCreateRel}>
                                                    Adicionar relação
                                                </Button>
                                            ) : undefined
                                        }
                                    />
                                ) : (
                                    <LazyDataTable
                                        rowKey="id"
                                        loading={loadingRel}
                                        data={relacoes}
                                        pagination={{ pageSize: 20, hideOnSinglePage: true }}
                                        autoMobileFromColumns={{
                                            testIdPrefix: 'software-arquitetura-relacoes',
                                            listHeading: 'Relações entre componentes',
                                            getFallbackTitle: (r) => {
                                                const origem = r.origem?.nome ?? String(r.origem_id ?? '');
                                                const destino = r.destino?.nome ?? String(r.destino_id ?? '');
                                                return origem && destino
                                                    ? `${origem} → ${destino}`
                                                    : origem || destino || `Relação ${r.id}`;
                                            },
                                        }}
                                        columns={[
                                            {
                                                title: 'Origem',
                                                key: 'origem',
                                                render: (_: unknown, r: ProjetoSoftwareComponenteRelacao) =>
                                                    r.origem?.nome ?? r.origem_id,
                                            },
                                            {
                                                title: 'Destino',
                                                key: 'destino',
                                                render: (_: unknown, r: ProjetoSoftwareComponenteRelacao) =>
                                                    r.destino?.nome ?? r.destino_id,
                                            },
                                            { title: 'Protocolo', dataIndex: 'protocolo', key: 'proto', width: 110 },
                                            { title: 'Porta', dataIndex: 'porta', key: 'porta', width: 80 },
                                            { title: 'Sync', dataIndex: 'sincronismo', key: 'sync', width: 110 },
                                            {
                                                title: 'Ações',
                                                key: 'acoes',
                                                width: 160,
                                                render: (_: unknown, row: ProjetoSoftwareComponenteRelacao) => (
                                                    <Space>
                                                        <Button
                                                            type="link"
                                                            disabled={!canEditar}
                                                            onClick={() => openEditRel(row)}
                                                        >
                                                            Editar
                                                        </Button>
                                                        <Button
                                                            type="link"
                                                            danger
                                                            disabled={!canEditar}
                                                            onClick={() => handleDeleteRel(row)}
                                                        >
                                                            Excluir
                                                        </Button>
                                                    </Space>
                                                ),
                                            },
                                        ]}
                                        ariaRegionLabel="Relações entre componentes do projeto"
                                    />
                                )}
                                {canEditar && componentes.length >= 2 ? (
                                    <Button type="dashed" icon={<Plus size={14} />} onClick={openCreateRel}>
                                        Adicionar relação
                                    </Button>
                                ) : null}
                                <div>
                                    <Space style={{ marginBottom: 8 }}>
                                        <strong>Diagrama Mermaid</strong>
                                        <Button
                                            size="small"
                                            icon={<Copy size={14} />}
                                            onClick={copyMermaid}
                                            disabled={!diagramaData?.mermaid}
                                        >
                                            Copiar
                                        </Button>
                                    </Space>
                                    <pre
                                        style={{
                                            margin: 0,
                                            padding: 12,
                                            background: 'var(--gray-100, #f5f5f5)',
                                            borderRadius: 6,
                                            fontSize: 12,
                                            whiteSpace: 'pre-wrap',
                                            wordBreak: 'break-word',
                                        }}
                                    >
                                        {diagramaData?.mermaid ?? '—'}
                                    </pre>
                                </div>
                            </Space>
                        ),
                    },
                    {
                        key: 'narrativa',
                        label: 'Narrativa C4 (texto)',
                        children: (
                            <Form
                                form={c4Form}
                                layout="vertical"
                                onFinish={(values) =>
                                    c4Mutation.mutate({
                                        arquitetura_c4: values.arquitetura_c4?.trim() || null,
                                    })
                                }
                            >
                                <Form.Item
                                    name="arquitetura_c4"
                                    label="Contexto C4 / HLD"
                                    extra="Complementa o inventário estruturado (decisões, contexto L1, notas)."
                                >
                                    <FormTextarea
                                        rows={16}
                                        disabled={!canEditar}
                                        placeholder="Descreva o contexto do sistema (C4 L1), containers e decisões…"
                                    />
                                </Form.Item>
                                <Tooltip title={tooltipSemEdicao}>
                                    <Button
                                        type="primary"
                                        htmlType="submit"
                                        icon={<Save size={ICON_SIZE_MD} aria-hidden />}
                                        loading={c4Mutation.isPending}
                                        disabled={!canEditar}
                                    >
                                        Salvar narrativa
                                    </Button>
                                </Tooltip>
                            </Form>
                        ),
                    },
                ]}
            />
            

            <Modal
                {...formModalLayout}
                open={compModal}
                title={editingComp ? 'Editar componente' : 'Novo componente'}
                onCancel={() => {
                    setCompModal(false);
                    setEditingComp(null);
                }}
                footer={
                    <div className={waygestFormModalFooterClassName}>
                        <Button onClick={() => setCompModal(false)}>Cancelar</Button>
                        <Tooltip title={tooltipSemEdicao}>
                            <Button
                                type="primary"
                                htmlType="submit"
                                form={FORM_COMP}
                                icon={<Save size={ICON_SIZE_MD} aria-hidden />}
                                loading={saveCompMutation.isPending}
                                disabled={!canEditar}
                            >
                                Salvar
                            </Button>
                        </Tooltip>
                    </div>
                }
            >
                <Form
                    id={FORM_COMP}
                    form={compForm}
                    layout="vertical"
                    onFinish={(values) => saveCompMutation.mutate(values)}
                >
                    <Form.Item name="nome" label="Nome" rules={[{ required: true, message: 'Informe o nome' }]}>
                        <Input />
                    </Form.Item>
                    <Form.Item name="tipo" label="Tipo" rules={[{ required: true }]}>
                        <Select options={COMPONENTE_TIPO_OPTIONS} />
                    </Form.Item>
                    <Form.Item name="tecnologia" label="Tecnologia">
                        <Input />
                    </Form.Item>
                    <Form.Item name="versao" label="Versão">
                        <Input />
                    </Form.Item>
                    <Form.Item name="finalidade" label="Finalidade">
                        <Input />
                    </Form.Item>
                    <Form.Item name="status" label="Status">
                        <Select options={STATUS_OPTIONS} />
                    </Form.Item>
                    <Form.Item name="criticidade" label="Criticidade">
                        <Select allowClear options={CRIT_OPTIONS} />
                    </Form.Item>
                    <Form.Item name="responsavel" label="Responsável">
                        <Input />
                    </Form.Item>
                    <Form.Item name="descricao" label="Descrição">
                        <FormTextarea rows={3} />
                    </Form.Item>
                    <Form.Item name="observacoes" label="Observações">
                        <FormTextarea rows={2} />
                    </Form.Item>
                </Form>
            </Modal>

            <Modal
                {...formModalLayout}
                open={relModal}
                title={editingRel ? 'Editar relação' : 'Nova relação'}
                onCancel={() => {
                    setRelModal(false);
                    setEditingRel(null);
                }}
                footer={
                    <div className={waygestFormModalFooterClassName}>
                        <Button onClick={() => setRelModal(false)}>Cancelar</Button>
                        <Tooltip title={tooltipSemEdicao}>
                            <Button
                                type="primary"
                                htmlType="submit"
                                form={FORM_REL}
                                icon={<Save size={ICON_SIZE_MD} aria-hidden />}
                                loading={saveRelMutation.isPending}
                                disabled={!canEditar}
                            >
                                Salvar
                            </Button>
                        </Tooltip>
                    </div>
                }
            >
                <Form
                    id={FORM_REL}
                    form={relForm}
                    layout="vertical"
                    onFinish={(values) => saveRelMutation.mutate(values)}
                >
                    <Form.Item name="origem_id" label="Origem" rules={[{ required: true }]}>
                        <Select options={compOptions} showSearch optionFilterProp="label" />
                    </Form.Item>
                    <Form.Item name="destino_id" label="Destino" rules={[{ required: true }]}>
                        <Select options={compOptions} showSearch optionFilterProp="label" />
                    </Form.Item>
                    <Form.Item name="protocolo" label="Protocolo">
                        <Input placeholder="HTTPS, AMQP, gRPC…" />
                    </Form.Item>
                    <Form.Item name="porta" label="Porta">
                        <Input />
                    </Form.Item>
                    <Form.Item name="direcao" label="Direção">
                        <Select
                            options={[
                                { label: 'Origem → Destino', value: 'origem_destino' },
                                { label: 'Bidirecional', value: 'bidirecional' },
                            ]}
                        />
                    </Form.Item>
                    <Form.Item name="sincronismo" label="Sincronismo">
                        <Select
                            allowClear
                            options={[
                                { label: 'Síncrono', value: 'sincrono' },
                                { label: 'Assíncrono', value: 'assincrono' },
                            ]}
                        />
                    </Form.Item>
                    <Form.Item name="autenticacao" label="Autenticação (sem secrets)">
                        <Input placeholder="OAuth2, mTLS, API Key (referência)…" />
                    </Form.Item>
                    <Form.Item name="criticidade" label="Criticidade">
                        <Select allowClear options={CRIT_OPTIONS} />
                    </Form.Item>
                    <Form.Item name="descricao" label="Descrição">
                        <FormTextarea rows={2} />
                    </Form.Item>
                </Form>
            </Modal>
        </ProjetoLayout>
    );
}