'use client';

/**
 * Modelagem de dados por projeto — guia técnico + comentários (API de comentários do projeto).
 */

import { CheckCircle2, TriangleAlert } from 'lucide-react';
import { ICON_SIZE_MD } from '@/components/icons';
import React from 'react';
import Link from 'next/link';
import { Alert, List, Space, Typography, Divider, Card } from 'antd';
import ProjetoLayout from '@/components/layouts/ProjetoLayout';
import { OperativeRouteHint } from '@/components/layouts/OperativeRouteHint/OperativeRouteHint';
import ContentCard from '@/components/layouts/ContentCard';
import { ProjetoComments } from '@/features/projetos/components/ProjetoComments/ProjetoComments';

export interface ProjetoPlanejamentoModelagemScreenProps {
    projetoId: string;
}

const checklist = [
    {
        titulo: 'Entidades, cardinalidades e chaves',
        texto: '1:1, 1:N, N:N com tabelas de junção; identifique chaves naturais vs surrogate.',
    },
    {
        titulo: 'Restrições e integridade referencial',
        texto: 'ON DELETE, unicidade, campos obrigatórios e índices para consultas críticas.',
    },
    {
        titulo: 'Impacto de mudanças',
        texto: 'Registre breaking vs compatível; ligue decisões ao backlog técnico e às migrações.',
    },
];

const riscos = [
    'Alterações sem visão de dependências quebram integrações e relatórios.',
    'N:N implícitos ou duplicados geram inconsistência de domínio.',
];

export function ProjetoPlanejamentoModelagemScreen({ projetoId }: ProjetoPlanejamentoModelagemScreenProps) {
    if (!projetoId) return null;

    return (
        <ProjetoLayout projetoId={projetoId} pageTitle="Modelagem de dados" titleSection="Modelagem de dados">
            <Space direction="vertical" size="large" style={{ width: '100%' }}>
                <OperativeRouteHint
                    message="Fonte única para o modelo lógico"
                    description="Anexe diagramas externos (draw.io, Mermaid export) ou cole notas estruturadas nos comentários abaixo. O backlog e os requisitos continuam os locais formais para itens aceites."
                >
                    <Space wrap>
                        <Link href={`/projetos/${projetoId}/planejamento/endpoints`}>Endpoints</Link>
                        <Link href={`/projetos/${projetoId}/planejamento/migracao-dados`}>Migração de dados</Link>
                        <Link href={`/projetos/${projetoId}/planejamento/requisitos`}>Requisitos</Link>
                        <Link href={`/projetos/${projetoId}/software/stack`}>Stack</Link>
                    </Space>
                </OperativeRouteHint>

                <ContentCard title="Guia rápido" compact>
                    <List
                        dataSource={checklist}
                        renderItem={(item) => (
                            <List.Item>
                                <Space align="start">
                                    <CheckCircle2 style={{ color: '#52c41a', marginTop: 4 }} aria-hidden />
                                    <div>
                                        <Typography.Text strong>{item.titulo}</Typography.Text>
                                        <Typography.Paragraph type="secondary" style={{ marginBottom: 0, marginTop: 4 }}>
                                            {item.texto}
                                        </Typography.Paragraph>
                                    </div>
                                </Space>
                            </List.Item>
                        )}
                    />
                    <Alert
                        style={{ marginTop: 16 }}
                        type="warning"
                        showIcon
                        icon={<TriangleAlert />}
                        message="Pontos de atenção"
                        description={
                            <ul style={{ marginBottom: 0, paddingLeft: 20 }}>
                                {riscos.map((r: any) => (
                                    <li key={r}>{r}</li>
                                ))}
                            </ul>
                        }
                    />
                </ContentCard>

                <Alert
                    type="info"
                    showIcon
                    message="Discussão persistente"
                    description="Os comentários são compartilhados com o projeto: use-os para registrar modelo ER, vínculos e decisões até existir artefacto estruturado dedicado na API."
                />

                <Card styles={{ body: { paddingTop: 0 } }}>
                    <Divider orientation="left" plain>
                        Comentários do projeto (modelagem e ER)
                    </Divider>
                    <ProjetoComments projetoId={projetoId} />
                </Card>
            </Space>
        </ProjetoLayout>
    );
}