import { useNavigate, useParams, useLocation } from 'react-router-dom';
import { BsArrowLeft, BsCheckCircleFill } from 'react-icons/bs';
import { TaleDashbaordMainCard } from '@components/TaleDashbaordMainCard';
import { TaleText } from '@components/TaleText';
import TaleButton from '@components/TaleButton';
import TaleStepper from '@components/TaleStepper';
import { TALESCAN_STEPS } from './taleScanSteps';

const CHECKLIST = (count) => [
    'Validé automatiquement selon le modèle',
    'Questions adaptées au contexte',
    `Durée estimée : ${Math.max(1, Math.round(count * 0.25))} min`,
];

/**
 * Écran 4 — Validation humaine.
 * Contrôle final avant lancement (spec §16) : "Modifier" ramène à l'Écran 3
 * pour retoucher le questionnaire (contrairement à l'Écran 3 où "Modifier"
 * édite les questions sur place).
 */
export default function TaleScanValidate({ basePath = '/scan' }) {
    const navigate = useNavigate();
    const { problemId } = useParams();
    const { state } = useLocation();

    const problem = state?.problem;
    const context = state?.context ?? {};
    const questions = state?.questions ?? [];

    const handleModifier = () =>
        navigate(`${basePath}/${problemId}/generate`, { state: { problem, context } });

    const handleValider = () =>
        navigate(`${basePath}/${problemId}/launch`, { state: { problem, context, questions } });

    return (
        <TaleDashbaordMainCard className="flex flex-col gap-6 p-8 bg-white rounded-2xl shadow-sm">
            <h1 className="text-2xl font-bold text-gray-900">{TALESCAN_STEPS[2].title}</h1>

            <div className="w-full flex justify-center">
                <TaleStepper level={2} steps={TALESCAN_STEPS} canNavigate={false} />
            </div>

            <div className="w-full max-w-[560px] mx-auto flex flex-col gap-6">
                <div className="border border-gray-200 rounded-2xl p-6 flex flex-col gap-4">
                    <TaleText applyEffect={false} className="text-xs uppercase tracking-wide text-gray-500">Questionnaire</TaleText>
                    <TaleText applyEffect={false} className="text-2xl font-bold text-gray-900">{questions.length} questions</TaleText>

                    <div className="flex flex-col gap-2">
                        {CHECKLIST(questions.length).map((label) => (
                            <div key={label} className="flex items-center gap-2">
                                <BsCheckCircleFill className="text-green-500 w-4 h-4 shrink-0" />
                                <TaleText applyEffect={false} className="text-sm text-gray-900">{label}</TaleText>
                            </div>
                        ))}
                    </div>

                    <div className="flex justify-between items-center pt-2">
                        <button
                            onClick={handleModifier}
                            className="inline-flex items-center gap-1 text-sm font-semibold text-gray-500 hover:text-gray-900 transition-colors"
                        >
                            <BsArrowLeft className="w-4 h-4" />
                            Modifier
                        </button>
                        <TaleButton role="business" onClick={handleValider} className="!w-auto !px-6">
                            <span className="flex items-center gap-2">
                                <BsCheckCircleFill /> Valider le questionnaire
                            </span>
                        </TaleButton>
                    </div>
                </div>
            </div>
        </TaleDashbaordMainCard>
    );
}