import { useEffect, useState, useCallback } from 'react';
import { useNavigate, useParams, 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 { TaleLoadingFallback } from '@components/TaleLoadingFallback';
import TaleButton from '@components/TaleButton';
import TaleStepper from '@components/TaleStepper';
import { getProblemById, generateQuestions } from './taleScanProblems';
import { TALESCAN_STEPS } from './taleScanSteps';

const CHECKLIST = [
    'Problème identifié',
    'Modèle expert sélectionné',
    'Contexte analysé',
    'Questionnaire optimisé',
];

/**
 * Écran 3 — IA + génération.
 * "Modifier" (spec §16) = éditer le texte des questions, pas revenir à
 * l'écran contexte : bascule tout le questionnaire en mode édition inline.
 */
export default function TaleScanGenerate({ basePath = '/scan' }) {
    const navigate = useNavigate();
    const { problemId } = useParams();
    const { state } = useLocation();

    const problem = state?.problem ?? getProblemById(problemId);
    const context = state?.context ?? {};

    const [loading, setLoading] = useState(true);
    const [questions, setQuestions] = useState([]);
    const [editMode, setEditMode] = useState(false);

    const runGeneration = useCallback(() => {
        setEditMode(false);
        setLoading(true);
        generateQuestions(problem, context).then((result) => {
            setQuestions(result);
            setLoading(false);
        });
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [problem?.problemId]);

    useEffect(() => {
        runGeneration();
    }, [runGeneration]);

    const handleQuestionChange = (id, text) =>
        setQuestions((prev) => prev.map((q) => (q.id === id ? { ...q, text } : q)));

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

    if (loading) {
        return (
            <TaleDashbaordMainCard className="flex items-center justify-center p-8 bg-white rounded-2xl shadow-sm">
                <div className="flex flex-col items-center gap-3">
                    <TaleLoadingFallback />
                    <TaleText applyEffect={false} className="text-gray-500">Génération du questionnaire…</TaleText>
                </div>
            </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">{TALESCAN_STEPS[1].title}</h1>

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

            <div className="w-full max-w-[560px] mx-auto flex flex-col gap-6">
                <TaleText applyEffect={false} className="text-xl font-bold text-gray-900 text-center">
                    Votre scan est prêt
                </TaleText>

                <div className="flex flex-col gap-1.5">
                    {CHECKLIST.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>

                {problem && (
                    <div className="flex items-center gap-2 justify-center">
                        <TaleText applyEffect={false} className="text-sm text-gray-500">{problem.question}</TaleText>
                        <span className="text-xs font-medium px-2 py-1 rounded-full bg-gray-100 text-gray-700">
              {problem.templateName}
            </span>
                    </div>
                )}

                <TaleText applyEffect={false} className="font-semibold text-gray-900 text-center">
                    {questions.length} QUESTIONS
                </TaleText>

                <div className="border border-gray-200 rounded-2xl divide-y divide-gray-200">
                    {questions.map((q, index) =>
                        editMode ? (
                            <div key={q.id} className="p-3">
                                <TaleInput
                                    role="business"
                                    label={`Question ${index + 1}`}
                                    value={q.text}
                                    onChange={(e) => handleQuestionChange(q.id, e.target.value)}
                                />
                            </div>
                        ) : (
                            <div key={q.id} className="p-3">
                                <TaleText applyEffect={false} className="text-gray-900">{`${index + 1}. ${q.text}`}</TaleText>
                            </div>
                        )
                    )}
                </div>

                <div className="flex justify-between items-center gap-3">
                    <div className="flex gap-2">
                        <TaleButton
                            role="business"
                            variant={editMode ? 'filled' : 'outlined'}
                            onClick={() => setEditMode((prev) => !prev)}
                            className="!w-auto !px-6"
                        >
                            {editMode ? 'Terminer' : 'Modifier'}
                        </TaleButton>
                        <TaleButton role="business" variant="outlined" onClick={runGeneration} className="!w-auto !px-6">
                            Régénérer
                        </TaleButton>
                    </div>
                    <TaleButton role="business" onClick={handleValider} className="!w-auto !px-8">
                        Valider
                    </TaleButton>
                </div>
            </div>
        </TaleDashbaordMainCard>
    );
}