'use client';

import { useMemo, useState } from 'react';
import { Alert, Checkbox, Progress, Space, Typography } from 'antd';
import ContentCard from '@/components/layouts/ContentCard';
import {
    prevendaChecklistItemCount,
    resolvePrevendaChecklist,
} from '../prevendaChecklist';

const { Text } = Typography;

export type ProjetoPrevendaChecklistCardProps = {
    categoriaCodigo?: string | null;
    className?: string;
};

/**
 * Checklist tipológico leve da pré-venda (N9) — 8 itens sugeridos, editáveis localmente.
 */
export function ProjetoPrevendaChecklistCard({
    categoriaCodigo,
    className,
}: ProjetoPrevendaChecklistCardProps) {
    const resolved = useMemo(
        () => resolvePrevendaChecklist(categoriaCodigo),
        [categoriaCodigo],
    );
    const [checked, setChecked] = useState<Record<string, boolean>>({});

    if (!resolved) {
        return (
            <ContentCard
                title="Checklist de discovery"
                className={className}
                data-testid="crm-prevenda-checklist-generico"
            >
                <Alert
                    type="info"
                    showIcon
                    message="Checklist genérico"
                    description="Para este tipo de projeto, use o briefing e o escopo. Checklists tipológicos completos cobrem sistema, WordPress, API e app mobile."
                />
            </ContentCard>
        );
    }

    const total = resolved.itens.length;
    const done = resolved.itens.filter((i) => checked[i.key]).length;
    const pct = total > 0 ? Math.round((done / total) * 100) : 0;

    return (
        <ContentCard
            title="Checklist de discovery"
            className={className}
            data-testid={`crm-prevenda-checklist-${resolved.tipo}`}
            headerActions={
                <Text type="secondary" style={{ fontSize: 13 }}>
                    {done}/{total}
                </Text>
            }
        >
            <Space direction="vertical" size="middle" style={{ width: '100%' }}>
                <Progress percent={pct} size="small" status={pct === 100 ? 'success' : 'active'} />
                <Text type="secondary" style={{ fontSize: 13 }}>
                    Itens sugeridos para precificação e proposta — não bloqueiam o envio na primeira
                    onda.
                </Text>
                <Checkbox.Group
                    style={{ width: '100%', display: 'flex', flexDirection: 'column', gap: 8 }}
                    value={Object.keys(checked).filter((k) => checked[k])}
                    onChange={(keys) => {
                        const next: Record<string, boolean> = {};
                        for (const item of resolved.itens) {
                            next[item.key] = keys.includes(item.key);
                        }
                        setChecked(next);
                    }}
                >
                    {resolved.itens.map((item) => (
                        <Checkbox key={item.key} value={item.key}>
                            {item.label}
                        </Checkbox>
                    ))}
                </Checkbox.Group>
            </Space>
        </ContentCard>
    );
}

export { prevendaChecklistItemCount };