import { useState } from 'react';
import { useLocation } from 'react-router-dom';
import { BsCheckCircleFill } from 'react-icons/bs';
import { TaleDashbaordMainCard } from '@components/TaleDashbaordMainCard';
import { TaleText } from '@components/TaleText';
import { TaleInput } from '@components/TaleInput';
import { TaleRadio } from '@components/TaleRadio';
import TaleButton from '@components/TaleButton';
import TaleStepper from '@components/TaleStepper';
import { TALESCAN_STEPS } from './taleScanSteps';

const TARGETS = [
    { value: 'panel', label: 'Panel Tale' },
    { value: 'own-audience', label: 'Mon audience' },
    { value: 'social', label: 'Réseaux sociaux' },
];

/**
 * Écran 5 — Lancement.
 * Pas de backend pour l'instant : `handleLaunch` simule l'appel API et
 * affiche une confirmation locale. À remplacer par le vrai POST /scans une
 * fois l'endpoint dispo — la shape du payload ne devrait pas changer.
 */
export default function TaleScanLaunch() {
    const { state } = useLocation();
    const problem = state?.problem;
    const context = state?.context ?? {};
    const questions = state?.questions ?? [];

    const [target, setTarget] = useState('panel');
    const [responseCount, setResponseCount] = useState(100);
    const [launched, setLaunched] = useState(false);
    const [launching, setLaunching] = useState(false);

    const handleLaunch = () => {
        setLaunching(true);
        const payload = { problem, context, questions, target, responseCount };
        // TODO: remplacer par POST /scans (ou équivalent) une fois le backend prêt
        setTimeout(() => {
            console.log('TaleScan launch payload', payload);
            setLaunching(false);
            setLaunched(true);
        }, 800);
    };

    if (launched) {
        return (
            <TaleDashbaordMainCard className="flex flex-col items-center justify-center gap-2 py-16 bg-white rounded-2xl shadow-sm">
                <div className="flex items-center gap-2">
                    <BsCheckCircleFill className="text-green-500 w-5 h-5" />
                    <TaleText applyEffect={false} className="text-xl font-bold text-gray-900">
                        Scan lancé
                    </TaleText>
                </div>
                <TaleText applyEffect={false} className="text-sm text-gray-500">
                    Collecte en cours auprès de {responseCount} répondants (
                    {TARGETS.find((t) => t.value === target)?.label}).
                </TaleText>
            </TaleDashbaordMainCard>
        );
    }

    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 text-center">{TALESCAN_STEPS[3].title}</h1>

            <div className="w-full flex justify-center">
                <TaleStepper level={3} 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-6">
                    <TaleText applyEffect={false} className="text-xl font-bold text-gray-900 text-center">
                        Lancer mon scan
                    </TaleText>

                    <div className="flex flex-col gap-2">
                        <TaleText applyEffect={false} className="font-semibold text-sm text-gray-900">Cible</TaleText>
                        <div className="flex flex-col gap-2">
                            {TARGETS.map((t) => (
                                <TaleRadio
                                    key={t.value}
                                    role="business"
                                    checked={target === t.value}
                                    onChange={() => setTarget(t.value)}
                                    label={t.label}
                                />
                            ))}
                        </div>
                    </div>

                    <TaleInput
                        role="business"
                        label="Nombre de réponses"
                        type="number"
                        min={1}
                        value={responseCount}
                        onChange={(e) => setResponseCount(Number(e.target.value))}
                    />

                    <TaleButton
                        role="business"
                        loading={launching}
                        disabled={responseCount < 1}
                        onClick={handleLaunch}
                    >
                        Lancer le Scan
                    </TaleButton>
                </div>
            </div>
        </TaleDashbaordMainCard>
    );
}