'use client';

/**
 * Checklist go-live onboarding — Website personalizado (TASK-PWP-025).
 * Padrão visual alinhado a `ScOnboardingChecklistCard` / `ProdutoOnboardingChecklistCard`.
 */

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

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

import { AplicacaoReactGitAdiarButton } from './AplicacaoReactGitAdiarButton';
import type { WebsiteOnboardingChecklist } from './buildWebsiteOnboardingChecklist';
import type { WebsiteTipologiaHubMeta } from './resolveWebsiteTipologiaHubMeta';

const { Text } = Typography;

export type WebsiteOnboardingChecklistCardProps = {
    projetoId: string;
    checklist: WebsiteOnboardingChecklist;
    loading?: boolean;
    /** TASK-PWP-064 CA-4 — chip tipológico + CTA Ficha só WP. */
    tipologiaMeta?: WebsiteTipologiaHubMeta | null;
    /** TASK-APR-038 — botão Adiar Git quando passo git incompleto. */
    showGitAdiar?: boolean;
    isFilhoFrontEnd?: boolean;
};

/**
 * Card com progresso %, passos tipológicos e CTA do próximo passo incompleto.
 */
export function WebsiteOnboardingChecklistCard({
    projetoId,
    checklist,
    loading = false,
    tipologiaMeta = null,
    showGitAdiar = false,
    isFilhoFrontEnd = false,
}: WebsiteOnboardingChecklistCardProps) {
    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 paginasPendentes = items.find((item) => item.id === 'paginas' && !item.complete);
    const gitPendente = items.find((item) => item.id === 'git' && !item.complete);
    const hubCopy = resolveHubOnboardingTipologiaCopy(tipologiaMeta?.codigo);
    const ttfvHint = items.some((i) => i.id === 'paginas' || i.id === 'objetivo')
        ? ttfvComplete
            ? ' · Briefing ou páginas iniciados'
            : ''
        : ttfvComplete
          ? ' · Stack iniciada'
          : '';

    return (
        <div data-testid="website-onboarding-checklist">
            <ContentCard
                title="Checklist de go-live"
                icon={<ListChecks size={ICON_SIZE_MD} aria-hidden />}
                loading={loading}
                headerActions={
                    !loading ? (
                        <Space size={8} align="center" wrap>
                            {tipologiaMeta ? (
                                <Tag
                                    color={tipologiaMeta.chipColor}
                                    data-testid="website-hub-tipologia-chip"
                                >
                                    {tipologiaMeta.chipLabel}
                                </Tag>
                            ) : null}
                            <Text type="secondary" style={{ fontSize: 13 }} data-testid="website-onboarding-pct">
                                {pct}%
                            </Text>
                        </Space>
                    ) : undefined
                }
            >
                <Text type="secondary" className={scStyles.cardSubtitle}>
                    {hubCopy.progressSubtitle}
                </Text>

                {tipologiaMeta?.fichaCta ? (
                    <div className={scStyles.ctaRow} style={{ marginTop: 0, marginBottom: 12 }}>
                        <Button
                            type="default"
                            size="small"
                            data-testid="website-hub-ficha-wp-cta"
                            onClick={() => router.push(tipologiaMeta.fichaCta!.href)}
                        >
                            {tipologiaMeta.fichaCta.label}
                        </Button>
                        <Text type="secondary" style={{ display: 'block', fontSize: 12, marginTop: 4 }}>
                            Registo manual da ficha WordPress (Em breve) — sem sync automático.
                        </Text>
                    </div>
                ) : null}

                {allEmpty ? (
                    <Empty
                        image={Empty.PRESENTED_IMAGE_SIMPLE}
                        description={hubCopy.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
                                {ttfvHint}
                            </Text>
                            <Progress
                                percent={pct}
                                size="small"
                                showInfo={false}
                                data-testid="website-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>
                    </>
                )}

                {nextCta ? (
                    <div className={scStyles.ctaRow}>
                        <Space wrap size={8}>
                            {paginasPendentes ? (
                                <AplicarProjetoTemplateAction
                                    projetoId={projetoId}
                                    buttonProps={{ type: 'default' }}
                                />
                            ) : null}
                            {showGitAdiar && gitPendente ? (
                                <AplicacaoReactGitAdiarButton
                                    projetoId={projetoId}
                                    isFilhoFrontEnd={isFilhoFrontEnd}
                                />
                            ) : null}
                            <Button
                                type="primary"
                                className={scStyles.ctaButton}
                                data-testid="website-onboarding-cta"
                                onClick={() => router.push(nextCta.href)}
                            >
                                {nextCta.ctaLabel}
                            </Button>
                        </Space>
                    </div>
                ) : (
                    <div className={scStyles.ctaRow}>
                        <Text type="success" data-testid="website-onboarding-cta">
                            Checklist go-live completo.
                        </Text>
                    </div>
                )}
            </ContentCard>
        </div>
    );
}