'use client';

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

import { ICON_SIZE_MD } from '@/components/icons';
import ContentCard from '@/components/layouts/ContentCard';
import {
    recordProjectTypeScOnboardingCompleted,
    recordProjectTypeScOnboardingStarted,
    recordProjectTypeScOnboardingStep,
} from '@/lib/telemetry/projectTypeScTelemetry';

import type { ScOnboardingChecklist } from './types';
import styles from './ScProntidaoHubBlock.module.scss';

const { Text } = Typography;

export type ScOnboardingChecklistCardProps = {
    /** Necessário para telemetria `project_type_sc_onboarding_*` (só ID). */
    projetoId: string;
    checklist: ScOnboardingChecklist;
    loading?: boolean;
};

/**
 * Checklist C7 de onboarding tipológico — hub Visão Geral SC.
 */
export function ScOnboardingChecklistCard({
    projetoId,
    checklist,
    loading = false,
}: ScOnboardingChecklistCardProps) {
    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 startedRef = useRef(false);
    const completedRef = useRef(false);

    const projetoIdNum = Number.parseInt(projetoId, 10);

    useEffect(() => {
        if (loading || !Number.isFinite(projetoIdNum)) return;
        if (!startedRef.current && completedCount === 0) {
            startedRef.current = true;
            recordProjectTypeScOnboardingStarted(projetoIdNum);
        }
        if (!completedRef.current && ttfvComplete) {
            completedRef.current = true;
            recordProjectTypeScOnboardingCompleted(projetoIdNum);
        }
    }, [loading, completedCount, ttfvComplete, projetoIdNum]);

    return (
        <div data-testid="sc-onboarding-checklist">
            <ContentCard
                title="Checklist de onboarding"
                icon={<ListChecks size={ICON_SIZE_MD} aria-hidden />}
                loading={loading}
            >
                <Text type="secondary" className={styles.cardSubtitle}>
                    Implantação Sistema customizado — progresso tipológico (C7)
                </Text>

                {allEmpty ? (
                    <Empty
                        image={Empty.PRESENTED_IMAGE_SIMPLE}
                        description="Ainda não há progresso tipológico neste projeto. Comece por requisitos ou módulos para o time-to-first-value."
                        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 ? ' · TTFV mínimo atingido' : ''}
                            </Text>
                            <Progress percent={pct} size="small" showInfo={false} />
                        </Space>

                        <ul className={styles.checklistList}>
                            {items.map((item) => (
                                <li key={item.id} className={styles.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={styles.checklistBody}>
                                        <span className={styles.checklistLabel}>{item.label}</span>
                                        {item.detail ? (
                                            <span className={styles.checklistDetail}>{item.detail}</span>
                                        ) : null}
                                    </div>
                                </li>
                            ))}
                        </ul>
                    </>
                )}

                {nextCta ? (
                    <div className={styles.ctaRow}>
                        <Button
                            type="primary"
                            className={styles.ctaButton}
                            data-testid="sc-onboarding-cta"
                            onClick={() => {
                                if (Number.isFinite(projetoIdNum) && nextCta.id) {
                                    recordProjectTypeScOnboardingStep(projetoIdNum, nextCta.id);
                                }
                                router.push(nextCta.href);
                            }}
                        >
                            {nextCta.ctaLabel}
                        </Button>
                    </div>
                ) : (
                    <div className={styles.ctaRow}>
                        <Text type="success" data-testid="sc-onboarding-cta">
                            Onboarding tipológico completo.
                        </Text>
                    </div>
                )}
            </ContentCard>
        </div>
    );
}