'use client';

/**
 * Checklist tipológico de onboarding — Produto de software (TASK-PPS-018).
 * Padrão visual alinhado a `ScOnboardingChecklistCard`.
 */

import { CheckCircle2, Circle, ListChecks } from 'lucide-react';
import { Alert, Button, Empty, Progress, Space, Typography } from 'antd';
import { useRouter } from 'next/navigation';

import { ICON_SIZE_MD } from '@/components/icons';
import ContentCard from '@/components/layouts/ContentCard';
import scStyles from '@/features/projetos/sistema-customizado-prontidao/ScProntidaoHubBlock.module.scss';

import type { ProdutoOnboardingChecklist } from './buildProdutoOnboardingChecklist';

const { Text } = Typography;

/** TASK-PPS-034 — alinhado a `ProjetoProdutoTextoLivrePii::MSG_ONBOARDING` (API). */
export const PRODUTO_ONBOARDING_SEM_PII_MSG =
    'Não cole dados pessoais (e-mail, CPF ou CNPJ) em visão, notas ou meta_json. Use o cadastro de Pessoas/stakeholders.';

export type ProdutoOnboardingChecklistCardProps = {
    projetoId: string;
    checklist: ProdutoOnboardingChecklist;
    loading?: boolean;
    /** Sem `projetos.criar` o empty não promete adicionar superfície. */
    canCriarSuperficie?: boolean;
};

/**
 * Card com progresso, passos tipológicos, CTA do próximo passo e skip explícito.
 */
export function ProdutoOnboardingChecklistCard({
    projetoId,
    checklist,
    loading = false,
    canCriarSuperficie = true,
}: ProdutoOnboardingChecklistCardProps) {
    const router = useRouter();
    const { items, nextCta, completedCount, ttfvComplete } = checklist;
    const pct = Math.round((completedCount / Math.max(items.length, 1)) * 100);
    const allEmpty = completedCount === 0 && !loading;
    const base = `/projetos/${projetoId}`;

    const emptyDescription = canCriarSuperficie
        ? 'Comece por confirmar o tipo do programa e a equipe. Depois adicione a 1.ª superfície e a 1.ª release.'
        : 'Comece por confirmar o tipo do programa e a equipe. Superfícies (subprojetos) só podem ser adicionadas por quem tiver permissão de criar projetos.';

    return (
        <div data-testid="produto-onboarding-checklist">
            <ContentCard
                title="Checklist de onboarding"
                icon={<ListChecks size={ICON_SIZE_MD} aria-hidden />}
                loading={loading}
            >
                <Text type="secondary" className={scStyles.cardSubtitle}>
                    Produto de software — progresso tipológico (tipo, equipe, superfície, release)
                </Text>

                <Alert
                    type="info"
                    showIcon
                    style={{ marginBottom: 12 }}
                    message="Não colar PII em textos livres"
                    description={PRODUTO_ONBOARDING_SEM_PII_MSG}
                    data-testid="produto-onboarding-sem-pii"
                />

                {allEmpty ? (
                    <Empty
                        image={Empty.PRESENTED_IMAGE_SIMPLE}
                        description={emptyDescription}
                        style={{ margin: '8px 0 16px' }}
                    />
                ) : (
                    <>
                        <Space direction="vertical" size={4} style={{ width: '100%', marginBottom: 8 }}>
                            <Text type="secondary" style={{ fontSize: 12 }}>
                                {completedCount} de {items.length} passos
                                {ttfvComplete ? ' · Programa com superfície (V1)' : ''}
                            </Text>
                            <Progress
                                percent={pct}
                                size="small"
                                showInfo={false}
                                data-testid="produto-onboarding-progress"
                            />
                        </Space>

                        <ul className={scStyles.checklistList}>
                            {items.map((item) => (
                                <li key={item.id} className={scStyles.checklistItem}>
                                    {item.complete ? (
                                        <CheckCircle2
                                            size={18}
                                            aria-label="Concluído"
                                            style={{
                                                color: 'var(--color-success, #52c41a)',
                                                flexShrink: 0,
                                            }}
                                        />
                                    ) : (
                                        <Circle
                                            size={18}
                                            aria-label="Pendente"
                                            style={{
                                                color: 'var(--text-muted, #d9d9d9)',
                                                flexShrink: 0,
                                            }}
                                        />
                                    )}
                                    <div className={scStyles.checklistBody}>
                                        <span className={scStyles.checklistLabel}>{item.label}</span>
                                        {item.detail ? (
                                            <span className={scStyles.checklistDetail}>{item.detail}</span>
                                        ) : null}
                                    </div>
                                </li>
                            ))}
                        </ul>
                    </>
                )}

                <Space direction="vertical" size={12} style={{ width: '100%', marginTop: 16 }}>
                    {nextCta ? (
                        <div className={scStyles.ctaRow}>
                            <Button
                                type="primary"
                                className={scStyles.ctaButton}
                                data-testid="produto-onboarding-cta"
                                onClick={() => router.push(nextCta.href)}
                            >
                                {nextCta.ctaLabel}
                            </Button>
                        </div>
                    ) : (
                        <Text type="success" data-testid="produto-onboarding-cta">
                            Onboarding tipológico completo.
                        </Text>
                    )}

                    <Space wrap size={8} data-testid="produto-onboarding-skip">
                        <Text type="secondary" style={{ fontSize: 12, width: '100%' }}>
                            Prefere continuar depois? Pode pular para as superfícies ou o dashboard.
                        </Text>
                        <Button
                            data-testid="produto-onboarding-skip-superficies"
                            onClick={() => router.push(`${base}/produto/superficies`)}
                        >
                            Pular para superfícies
                        </Button>
                        <Button
                            data-testid="produto-onboarding-skip-dashboard"
                            onClick={() => router.push(`${base}/produto/dashboard`)}
                        >
                            Pular para dashboard
                        </Button>
                    </Space>
                </Space>
            </ContentCard>
        </div>
    );
}