'use client';

/**
 * Painel S2.2 do passo Sync — prompt canónico, status tipológico, pré-req passo 2.
 */

import { useCallback } from 'react';
import Link from 'next/link';
import { Alert, Button, Descriptions, Space, Typography } from 'antd';
import { Copy, ExternalLink } from 'lucide-react';

import { ICON_SIZE_SM } from '@/components/icons';
import { useIsMobile } from '@/hooks/useIsMobile';
import { message } from '@/lib/feedback/message';

import { sugestoesCursorDeepLink } from './deepLinks';
import type { ConectarPassoDto, ConectarPassoStatus } from './types';
import styles from './ProjetoConectar.module.scss';

const { Text, Paragraph } = Typography;

type Props = {
    projetoId: string;
    passo: ConectarPassoDto;
    passoCursorStatus?: ConectarPassoStatus;
};

function num(sinais: Record<string, unknown>, key: string): number | null {
    const v = sinais[key];
    return typeof v === 'number' ? v : null;
}

export function ConectarSyncPassoPanel({ projetoId, passo, passoCursorStatus }: Props) {
    const isMobile = useIsMobile();
    const promptTexto =
        typeof passo.prompt?.texto === 'string' && passo.prompt.texto.trim() !== ''
            ? passo.prompt.texto
            : null;
    const promptTitulo = passo.prompt?.titulo ?? 'Primeira sincronização do workspace';
    const tipo = passo.prompt?.tipo_codigo ?? null;

    const cursorOk = passoCursorStatus === 'concluido';
    const contextoHref =
        typeof passo.links.contexto === 'string' ? passo.links.contexto : `/projetos/${projetoId}/desenvolvimento/contexto`;
    const guiaHref =
        typeof passo.links.guia_cursor_pack === 'string'
            ? passo.links.guia_cursor_pack
            : `/projetos/${projetoId}/desenvolvimento/guia-cursor-pack`;

    const copyPrompt = useCallback(async () => {
        if (!promptTexto) {
            message.warning('Prompt ainda não disponível para este tipo.');
            return;
        }
        try {
            await navigator.clipboard.writeText(promptTexto);
            message.success('Prompt copiado. Cole no agente Cursor no workspace do projeto.');
        } catch {
            message.error('Não foi possível copiar. Selecione o texto e copie manualmente.');
        }
    }, [promptTexto]);

    return (
        <Space direction="vertical" size="middle" style={{ width: '100%' }}>
            {!cursorOk ? (
                <Alert
                    type="warning"
                    showIcon
                    message="Conclua o passo Cursor Pack antes"
                    description="O sync tipológico assume .cursor e token do projeto. Você pode copiar o prompt, mas o envio tende a falhar sem o passo 2."
                />
            ) : null}

            <Alert
                type="info"
                showIcon
                message={promptTitulo}
                description={
                    <Paragraph style={{ marginBottom: 0 }}>
                        No Cursor (workspace do cliente), rode a skill{' '}
                        <Text code>sincronizar-projeto-waygest</Text> ou o script{' '}
                        <Text code>sync.ps1</Text>/<Text code>sync.sh</Text>. A UI não envia o
                        inventário sozinha — o agente/script usa a API Cursor já existente.
                        {tipo ? (
                            <>
                                {' '}
                                Tipo: <Text code>{tipo}</Text>.
                            </>
                        ) : null}
                    </Paragraph>
                }
            />

            {promptTexto ? (
                <div>
                    <Text strong>Prompt canónico</Text>
                    <Paragraph>
                        <pre className={styles.promptPre}>{promptTexto}</pre>
                    </Paragraph>
                    <Space wrap>
                        <Button
                            type="primary"
                            icon={<Copy size={ICON_SIZE_SM} />}
                            onClick={() => void copyPrompt()}
                        >
                            Copiar prompt
                        </Button>
                        <Button href={guiaHref} icon={<ExternalLink size={ICON_SIZE_SM} />}>
                            Abrir guia Cursor Pack
                        </Button>
                    </Space>
                </div>
            ) : null}

            <div>
                <Text strong>Último sync / inventário</Text>
                <Descriptions
                    size="small"
                    column={isMobile ? 1 : 2}
                    layout={isMobile ? 'vertical' : 'horizontal'}
                    style={{ marginTop: 8 }}
                    data-testid="conectar-sync-inventario"
                    items={[
                        {
                            key: 'synced',
                            label: 'Synced em',
                            children:
                                typeof passo.sinais.synced_at === 'string'
                                    ? passo.sinais.synced_at
                                    : '—',
                        },
                        {
                            key: 'files',
                            label: 'Arquivos contexto',
                            children: num(passo.sinais, 'total_files') ?? '—',
                        },
                        {
                            key: 'tec',
                            label: 'Tecnologias',
                            children: num(passo.sinais, 'tecnologias_count') ?? '—',
                        },
                        {
                            key: 'mod',
                            label: 'Módulos',
                            children: num(passo.sinais, 'modulos_count') ?? '—',
                        },
                        {
                            key: 'pag',
                            label: 'Páginas',
                            children: num(passo.sinais, 'paginas_count') ?? '—',
                        },
                        {
                            key: 'ep',
                            label: 'Endpoints',
                            children: num(passo.sinais, 'endpoints_count') ?? '—',
                        },
                        {
                            key: 'crit',
                            label: 'Critério',
                            children:
                                typeof passo.sinais.criterio === 'string'
                                    ? passo.sinais.criterio
                                    : '—',
                            span: 2,
                        },
                    ]}
                />
                <Space wrap style={{ marginTop: 8 }}>
                    <Link href={contextoHref}>Abrir contexto do projeto</Link>
                    <Link href={sugestoesCursorDeepLink(projetoId)}>Sugestões Cursor</Link>
                </Space>
            </div>

            {passo.sinais.estruturado_ok === true ? (
                <Alert
                    type="success"
                    showIcon
                    message="Sync estruturado OK"
                    description="Contexto do pack presente e mínimo tipológico atendido (ou fallback contexto + stack)."
                />
            ) : (
                <Alert
                    type="warning"
                    showIcon
                    message="Aguardando sync estruturado"
                    description="É preciso contexto (arquivos do pack) e o mínimo do tipo (módulos, páginas/endpoints ou stack). Só arquivos de contexto sem stack/módulos não conclui o passo."
                />
            )}
        </Space>
    );
}