'use client';

/**
 * Auth & Security 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 ProjetoPlanejamentoAuthSecurityScreenProps {
    projetoId: string;
}

const checklist = [
    {
        titulo: 'Modelo de sessão e tokens',
        texto: 'Expiração, refresh, revogação e comportamento multi-dispositivo.',
    },
    {
        titulo: 'OAuth — scopes e redirect URIs',
        texto: 'Princípio do menor privilégio; valide todos os callbacks.',
    },
    {
        titulo: 'Rotação de segredos',
        texto: 'Procedimento se API key ou client secret vazarem.',
    },
];

const riscos = [
    'Tokens long-lived sem revogação aumentam impacto de vazamento.',
    'Permissões OAuth amplas violam menor privilégio.',
];

export function ProjetoPlanejamentoAuthSecurityScreen({ projetoId }: ProjetoPlanejamentoAuthSecurityScreenProps) {
    if (!projetoId) return null;

    return (
        <ProjetoLayout projetoId={projetoId} pageTitle="Auth & Security" titleSection="Auth & Security">
            <Space direction="vertical" size="large" style={{ width: '100%' }}>
                <OperativeRouteHint
                    message="Alinhar com implementação real"
                    description="Este tela suporta documentação vivante: registre JWT vs OAuth vs API Keys, políticas de CORS/rate-limit e onde vive o catálogo de scopes. Conecte com ACL quando tratar permissões dentro do produto."
                >
                    <Space wrap>
                        <Link href={`/projetos/${projetoId}/planejamento/acl`}>ACL / permissões</Link>
                        <Link href={`/projetos/${projetoId}/planejamento/endpoints`}>Contrato e endpoints</Link>
                        <Link href={`/projetos/${projetoId}/qualidade/vulnerabilidades`}>Vulnerabilidades</Link>
                        <Link href={`/projetos/${projetoId}/integracoes/webhooks`}>Webhooks</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="Registro colaborativo"
                    description="Use os comentários para ADRs rápidos de segurança, links a specs e resultados de revistas — ficam cronológicos por projeto."
                />

                <Card styles={{ body: { paddingTop: 0 } }}>
                    <Divider orientation="left" plain>
                        Comentários do projeto (Auth & segurança)
                    </Divider>
                    <ProjetoComments projetoId={projetoId} />
                </Card>
            </Space>
        </ProjetoLayout>
    );
}