import React, { useState } from 'react';
import { PlusCircle, MinusCircle, ArrowRight, ArrowLeft, CheckCircle, Printer, RotateCcw, Lightbulb, BrainCircuit } from 'lucide-react';

export default function App() {
  const [step, setStep] = useState(1);
  const [question, setQuestion] = useState("");
  const [choices, setChoices] = useState([{ id: 1, text: "" }, { id: 2, text: "" }, { id: 3, text: "" }, { id: 4, text: "" }]);
  const [reflections, setReflections] = useState({});
  // Nouvel état pour les réflexions finales de l'étape 3
  const [finalReflections, setFinalReflections] = useState({ q1: "", q2: "", q3: "" });

  const handleChoiceChange = (id, text) => {
    setChoices(choices.map(c => c.id === id ? { ...c, text } : c));
  };

  const addChoice = () => {
    if (choices.length < 6) {
      setChoices([...choices, { id: Date.now(), text: "" }]);
    }
  };

  const removeChoice = (id) => {
    if (choices.length > 2) {
      setChoices(choices.filter(c => c.id !== id));
      const newReflections = { ...reflections };
      delete newReflections[id];
      setReflections(newReflections);
    }
  };

  const handleReflectionChange = (id, text) => {
    setReflections({ ...reflections, [id]: text });
  };

  const handleFinalReflectionChange = (qId, text) => {
    setFinalReflections(prev => ({ ...prev, [qId]: text }));
  };

  const isStep1Valid = question.trim() !== "" && choices.every(c => c.text.trim() !== "");
  const isStep2Valid = choices.every(c => reflections[c.id] && reflections[c.id].trim() !== "");

  const resetAll = () => {
    setStep(1);
    setQuestion("");
    setChoices([{ id: 1, text: "" }, { id: 2, text: "" }, { id: 3, text: "" }, { id: 4, text: "" }]);
    setReflections({});
    setFinalReflections({ q1: "", q2: "", q3: "" });
  };

  const handlePrint = () => {
    window.print();
  };

  return (
    <div className="min-h-screen bg-slate-50 text-slate-800 font-sans p-4 md:p-8">
      <div className="max-w-4xl mx-auto">
        
        {/* Header */}
        <header className="mb-8 text-center print:hidden">
          <div className="inline-flex items-center justify-center p-3 bg-blue-100 rounded-full mb-4 text-blue-600">
            <BrainCircuit size={32} />
          </div>
          <h1 className="text-3xl font-bold text-slate-900 mb-2">Simulateur de questions avec distracteurs réfléchis</h1>
          <p className="text-slate-600 max-w-2xl mx-auto">
            Un outil de réflexion pour analyser la qualité de vos QCM et la capacité qu'elles ont de vous aider à comprendre les conceptions alternatives de vos élèves.
          </p>
        </header>

        {/* Progress Bar print:hidden */}
        <div className="mb-8 print:hidden">
          <div className="flex justify-between items-center relative">
            <div className="absolute left-0 top-1/2 transform -translate-y-1/2 w-full h-1 bg-slate-200 -z-10"></div>
            <div className={`absolute left-0 top-1/2 transform -translate-y-1/2 h-1 bg-blue-600 -z-10 transition-all duration-300`} style={{ width: `${((step - 1) / 2) * 100}%` }}></div>
            
            {[1, 2, 3].map((num) => (
              <div key={num} className={`w-10 h-10 rounded-full flex items-center justify-center font-bold text-sm transition-colors duration-300 ${step >= num ? 'bg-blue-600 text-white' : 'bg-slate-200 text-slate-500'}`}>
                {num}
              </div>
            ))}
          </div>
          <div className="flex justify-between text-xs font-medium text-slate-500 mt-2 px-1">
            <span>Conception du QCM</span>
            <span>Analyse des choix</span>
            <span>Bilan</span>
          </div>
        </div>

        {/* Main Content Area */}
        <main className="bg-white rounded-2xl shadow-sm border border-slate-200 p-6 md:p-10">
          
          {/* STEP 1: Question and Choices */}
          {step === 1 && (
            <div className="animate-fade-in">
              <h2 className="text-2xl font-bold mb-6 flex items-center text-slate-800">
                <span className="bg-blue-100 text-blue-700 w-8 h-8 rounded-lg flex items-center justify-center mr-3 text-lg">1</span>
                Le QCM
              </h2>
              <div className="space-y-6">
                <div>
                  <label className="block text-sm font-semibold text-slate-700 mb-2">
                    Écrivez une question ciblant une conception possible des élèves :
                  </label>
                  <textarea 
                    className="w-full p-4 border border-slate-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all resize-none min-h-[100px]"
                    placeholder="Ex: Pourquoi fait-il plus chaud en été qu'en hiver ?"
                    value={question}
                    onChange={(e) => setQuestion(e.target.value)}
                  />
                </div>

                <div>
                  <label className="block text-sm font-semibold text-slate-700 mb-4">
                    Les choix proposés aux élèves :
                  </label>
                  <div className="space-y-3">
                    {choices.map((choice, index) => (
                      <div key={choice.id} className="flex items-center gap-3">
                        <div className="w-8 h-8 shrink-0 rounded-full bg-slate-100 flex items-center justify-center font-bold text-slate-500">
                          {String.fromCharCode(65 + index)}
                        </div>
                        <input 
                          type="text"
                          className="flex-1 p-3 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all"
                          placeholder={`Choix ${index + 1}...`}
                          value={choice.text}
                          onChange={(e) => handleChoiceChange(choice.id, e.target.value)}
                        />
                        <button 
                          onClick={() => removeChoice(choice.id)}
                          disabled={choices.length <= 2}
                          className="p-2 text-slate-400 hover:text-red-500 disabled:opacity-30 disabled:hover:text-slate-400 transition-colors"
                          title="Supprimer ce choix"
                        >
                          <MinusCircle size={24} />
                        </button>
                      </div>
                    ))}
                  </div>
                  
                  {choices.length < 6 && (
                    <button 
                      onClick={addChoice}
                      className="mt-4 flex items-center text-sm font-medium text-blue-600 hover:text-blue-800 transition-colors"
                    >
                      <PlusCircle size={18} className="mr-1" /> Ajouter un choix
                    </button>
                  )}
                </div>
              </div>

              <div className="mt-10 flex justify-end">
                <button 
                  onClick={() => setStep(2)}
                  disabled={!isStep1Valid}
                  className="flex items-center px-6 py-3 bg-blue-600 text-white font-semibold rounded-xl hover:bg-blue-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
                >
                  Passer à l'analyse <ArrowRight size={20} className="ml-2" />
                </button>
              </div>
            </div>
          )}

          {/* STEP 2: Epistemic Empathy */}
          {step === 2 && (
            <div className="animate-fade-in">
              <h2 className="text-2xl font-bold mb-6 flex items-center text-slate-800">
                <span className="bg-blue-100 text-blue-700 w-8 h-8 rounded-lg flex items-center justify-center mr-3 text-lg">2</span>
                Les distracteurs réfléchis
              </h2>
              
              <div className="bg-slate-50 p-5 rounded-xl border border-slate-200 mb-8">
                <h3 className="text-xs font-bold uppercase tracking-wider text-slate-500 mb-2">Question posée :</h3>
                <p className="text-lg font-medium text-slate-800">{question}</p>
              </div>

              <p className="mb-6 text-slate-600 font-medium">
                Pour <strong className="text-slate-800">chacun des choix</strong>, complétez la phrase afin d'expliciter le raisonnement de l'élève.
              </p>

              <div className="space-y-8">
                {choices.map((choice, index) => (
                  <div key={choice.id} className="relative pl-6 border-l-4 border-blue-200 focus-within:border-blue-500 transition-colors duration-300">
                    <div className="absolute -left-[22px] top-0 w-10 h-10 bg-white border-4 border-slate-50 text-blue-600 rounded-full flex items-center justify-center font-bold shadow-sm">
                      {String.fromCharCode(65 + index)}
                    </div>
                    
                    <div className="mb-3 pl-2">
                      <span className="text-sm font-semibold text-slate-500 uppercase tracking-wider">Le choix de l'élève :</span>
                      <p className="text-slate-800 text-lg mt-1 bg-white p-3 border border-slate-100 rounded-lg shadow-sm">« {choice.text} »</p>
                    </div>

                    <div className="bg-blue-50/50 p-4 rounded-xl border border-blue-100">
                      <label className="flex items-start text-blue-900 font-medium mb-3">
                        <Lightbulb size={20} className="mr-2 text-blue-600 shrink-0 mt-0.5" />
                        « Un élève qui choisit cette réponse croit probablement que... »
                      </label>
                      <textarea 
                        className="w-full p-4 border border-blue-200 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all resize-none min-h-[100px] bg-white text-slate-700"
                        placeholder="Ex: la Terre est plus proche du Soleil pendant l'été..."
                        value={reflections[choice.id] || ""}
                        onChange={(e) => handleReflectionChange(choice.id, e.target.value)}
                      />
                    </div>
                  </div>
                ))}
              </div>

              <div className="mt-10 flex justify-between items-center">
                <button 
                  onClick={() => setStep(1)}
                  className="flex items-center px-4 py-2 text-slate-600 hover:text-slate-900 transition-colors font-medium"
                >
                  <ArrowLeft size={20} className="mr-2" /> Retour
                </button>
                <button 
                  onClick={() => setStep(3)}
                  disabled={!isStep2Valid}
                  className="flex items-center px-6 py-3 bg-blue-600 text-white font-semibold rounded-xl hover:bg-blue-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
                >
                  Voir le bilan <CheckCircle size={20} className="ml-2" />
                </button>
              </div>
            </div>
          )}

          {/* STEP 3: Summary */}
          {step === 3 && (
            <div className="animate-fade-in print:text-black">
              <div className="flex justify-between items-start mb-6 print:hidden">
                <h2 className="text-2xl font-bold flex items-center text-slate-800">
                  <span className="bg-green-100 text-green-700 w-8 h-8 rounded-lg flex items-center justify-center mr-3 text-lg">3</span>
                  Bilan de l'analyse
                </h2>
                <div className="flex gap-3">
                  <button onClick={handlePrint} className="flex items-center px-4 py-2 border border-slate-300 text-slate-700 rounded-lg hover:bg-slate-50 transition-colors">
                    <Printer size={18} className="mr-2" /> Imprimer rapide
                  </button>
                </div>
              </div>

              <div className="hidden print:block mb-8 text-center">
                <h1 className="text-3xl font-bold border-b-2 border-gray-800 pb-4 mb-4">Analyse de QCM - Distracteurs réfléchis</h1>
              </div>

              <div className="bg-slate-800 text-white p-6 rounded-2xl mb-8 print:bg-white print:text-black print:border-2 print:border-gray-800 print:rounded-none">
                <h3 className="text-sm font-bold uppercase tracking-wider text-slate-400 print:text-gray-600 mb-2">Question posée</h3>
                <p className="text-xl font-medium">{question}</p>
              </div>

              <div className="space-y-6 mb-10">
                <h3 className="text-xl font-bold text-slate-800 mb-4 print:text-black border-b pb-2">Décryptage des choix</h3>
                
                <div className="grid gap-6">
                  {choices.map((choice, index) => (
                    <div key={choice.id} className="bg-white border border-slate-200 rounded-xl overflow-hidden shadow-sm flex flex-col md:flex-row print:shadow-none print:border-gray-400 print:rounded-none">
                      
                      {/* Choix Section */}
                      <div className="bg-slate-50 p-5 md:w-1/3 border-b md:border-b-0 md:border-r border-slate-200 print:border-gray-400 print:bg-gray-50">
                        <div className="flex items-center mb-2">
                          <span className="w-6 h-6 bg-slate-200 text-slate-700 rounded-full flex items-center justify-center text-sm font-bold mr-2 print:border print:border-gray-400">
                            {String.fromCharCode(65 + index)}
                          </span>
                          <span className="text-xs font-bold uppercase text-slate-500 print:text-gray-700">Le choix</span>
                        </div>
                        <p className="text-slate-800 font-medium">{choice.text}</p>
                      </div>

                      {/* Analyse Section */}
                      <div className="p-5 md:w-2/3">
                        <div className="flex items-start">
                          <BrainCircuit size={18} className="text-blue-500 mt-0.5 mr-2 shrink-0 print:text-gray-600" />
                          <div className="w-full">
                            <p className="text-sm text-slate-500 mb-1 italic print:text-gray-600">« L'élève qui choisit cette réponse croit probablement que... »</p>
                            <p className="text-slate-800 leading-relaxed bg-white rounded-lg whitespace-pre-wrap">{reflections[choice.id]}</p>
                          </div>
                        </div>
                      </div>

                    </div>
                  ))}
                </div>
              </div>

              {/* Questions de réflexion ajoutées */}
              <div className="bg-gradient-to-br from-amber-50 to-orange-50 border border-amber-200 p-6 rounded-2xl print:bg-white print:border-gray-400 print:shadow-none print:rounded-none shadow-sm break-inside-avoid">
                <h3 className="text-xl font-bold text-amber-800 mb-4 flex items-center print:text-black border-b border-amber-200 print:border-gray-300 pb-2">
                  <Lightbulb size={24} className="mr-2 text-amber-600 print:text-gray-800" />
                  Pour aller plus loin : Changement de posture
                </h3>
                <p className="text-amber-900 mb-6 print:text-black font-medium">
                  À la lumière de votre analyse ci-dessus, prenez un moment pour documenter votre réflexion sur ces trois constats fondamentaux :
                </p>

                <div className="space-y-6">
                  {/* Q1 */}
                  <div className="bg-white/70 p-5 rounded-xl border border-amber-100 print:border-gray-300 print:rounded-none">
                    <h4 className="font-bold text-amber-900 mb-2 print:text-black text-lg">1. Une cohérence fonctionnelle</h4>
                    <p className="text-amber-800 print:text-gray-800 text-sm md:text-base mb-4">
                      Les conceptions alternatives ne sont <strong>pas des erreurs aléatoires</strong>. Observez-vous comment les raisonnements que vous avez identifiés possèdent une cohérence fonctionnelle et logique pour le cerveau de l'élève ?
                    </p>
                    <textarea 
                      className="w-full p-4 border border-amber-200 rounded-lg focus:ring-2 focus:ring-amber-500 focus:border-amber-500 transition-all resize-none min-h-[100px] bg-white text-slate-700 print:hidden"
                      placeholder="Votre réflexion..."
                      value={finalReflections.q1}
                      onChange={(e) => handleFinalReflectionChange('q1', e.target.value)}
                    />
                    {/* Vue impression */}
                    <div className="hidden print:block text-black whitespace-pre-wrap mt-2 p-3 bg-gray-50 border border-gray-200 min-h-[80px]">
                      {finalReflections.q1 || <span className="text-gray-400 italic">Aucune note inscrite.</span>}
                    </div>
                  </div>

                  {/* Q2 */}
                  <div className="bg-white/70 p-5 rounded-xl border border-amber-100 print:border-gray-300 print:rounded-none">
                    <h4 className="font-bold text-amber-900 mb-2 print:text-black text-lg">2. L'ancrage sensoriel</h4>
                    <p className="text-amber-800 print:text-gray-800 text-sm md:text-base mb-4"> 
                      Elles se sont souvent construites à partir <strong>d'expériences sensorielles directes</strong> (par exemple, l'idée qu'un manteau « chauffe » parce que la peau se réchauffe à son contact). Pouvez-vous repérer la racine expérientielle de la conception ciblée par votre QCM ?
                    </p>
                    <textarea 
                      className="w-full p-4 border border-amber-200 rounded-lg focus:ring-2 focus:ring-amber-500 focus:border-amber-500 transition-all resize-none min-h-[100px] bg-white text-slate-700 print:hidden"
                      placeholder="Votre réflexion..."
                      value={finalReflections.q2}
                      onChange={(e) => handleFinalReflectionChange('q2', e.target.value)}
                    />
                    {/* Vue impression */}
                    <div className="hidden print:block text-black whitespace-pre-wrap mt-2 p-3 bg-gray-50 border border-gray-200 min-h-[80px]">
                      {finalReflections.q2 || <span className="text-gray-400 italic">Aucune note inscrite.</span>}
                    </div>
                  </div>

                  {/* Q3 */}
                  <div className="bg-white/70 p-5 rounded-xl border border-amber-100 print:border-gray-300 print:rounded-none">
                    <h4 className="font-bold text-amber-900 mb-2 print:text-black text-lg">3. Les distracteurs comme fenêtres</h4>
                    <p className="text-amber-800 print:text-gray-800 text-sm md:text-base mb-4">
                      La finalité de cet exercice est d'apprendre à lire chaque distracteur comme <strong>une fenêtre sur le raisonnement</strong> de l'élève, et non plus simplement comme une « faute » à comptabiliser. Votre grille d'analyse vous permet-elle de poser ce regard diagnostique ?
                    </p>
                    <textarea 
                      className="w-full p-4 border border-amber-200 rounded-lg focus:ring-2 focus:ring-amber-500 focus:border-amber-500 transition-all resize-none min-h-[100px] bg-white text-slate-700 print:hidden"
                      placeholder="Votre réflexion..."
                      value={finalReflections.q3}
                      onChange={(e) => handleFinalReflectionChange('q3', e.target.value)}
                    />
                    {/* Vue impression */}
                    <div className="hidden print:block text-black whitespace-pre-wrap mt-2 p-3 bg-gray-50 border border-gray-200 min-h-[80px]">
                      {finalReflections.q3 || <span className="text-gray-400 italic">Aucune note inscrite.</span>}
                    </div>
                  </div>
                </div>
              </div>

              {/* Boutons d'action finaux (cachés à l'impression) */}
              <div className="mt-12 pt-8 border-t border-slate-200 flex flex-col sm:flex-row justify-center items-center gap-4 print:hidden">
                <button 
                  onClick={handlePrint}
                  className="flex items-center justify-center px-8 py-4 bg-blue-600 text-white font-bold rounded-xl hover:bg-blue-700 transition-colors shadow-md w-full sm:w-auto"
                >
                  <Printer size={22} className="mr-2" /> Imprimer l'analyse complète
                </button>
                <button 
                  onClick={resetAll}
                  className="flex items-center justify-center px-6 py-4 bg-slate-100 text-slate-700 font-semibold rounded-xl hover:bg-slate-200 transition-colors w-full sm:w-auto"
                >
                  <RotateCcw size={20} className="mr-2" /> Recommencer
                </button>
              </div>

            </div>
          )}

        </main>
      </div>
      
      <style dangerouslySetInnerHTML={{__html: `
        @keyframes fadeIn {
          from { opacity: 0; transform: translateY(10px); }
          to { opacity: 1; transform: translateY(0); }
        }
        .animate-fade-in {
          animation: fadeIn 0.4s ease-out forwards;
        }
        
        @media print {
          body {
            background-color: white !important;
          }
          /* Empêche les sauts de page au milieu d'un bloc de réflexion */
          .break-inside-avoid {
            break-inside: avoid;
          }
        }
      `}} />
    </div>
  );
}