import React, { useState, useEffect, useMemo } from 'react';
import { initializeApp } from 'firebase/app';
import { 
  getAuth, 
  signInWithCustomToken, 
  signInAnonymously, 
  onAuthStateChanged 
} from 'firebase/auth';
import { 
  getFirestore, 
  collection, 
  doc, 
  setDoc, 
  onSnapshot, 
  addDoc, 
  deleteDoc,
  updateDoc
} from 'firebase/firestore';
import { 
  BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, 
  LineChart, Line
} from 'recharts';
import { 
  User, 
  GraduationCap, 
  TrendingUp, 
  CheckCircle2, 
  AlertCircle, 
  BookOpen, 
  Users,
  ChevronRight,
  ClipboardList,
  Plus,
  Trash2,
  Lock,
  LogOut,
  Upload,
  FileSpreadsheet,
  MessageSquare,
  Search,
  ArrowLeft,
  ThumbsUp,
  UserPlus
} from 'lucide-react';

// --- Configuration Firebase ---
const firebaseConfig = JSON.parse(__firebase_config);
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
const db = getFirestore(app);
const appId = typeof __app_id !== 'undefined' ? __app_id : 'pestel-eval-app';

const App = () => {
  const [user, setUser] = useState(null);
  const [role, setRole] = useState(null); 
  const [currentStudent, setCurrentStudent] = useState(null);
  const [selectedStudentForTeacher, setSelectedStudentForTeacher] = useState(null);
  const [students, setStudents] = useState([]);
  const [allEvaluations, setAllEvaluations] = useState([]);
  const [activeStep, setActiveStep] = useState(0);
  const [newStudentName, setNewStudentName] = useState("");
  const [newStudentClass, setNewStudentClass] = useState("");
  const [loading, setLoading] = useState(true);
  const [importing, setImporting] = useState(false);
  const [searchQuery, setSearchQuery] = useState("");

  // --- Chargement de SheetJS ---
  useEffect(() => {
    const script = document.createElement('script');
    script.src = "https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js";
    script.async = true;
    document.body.appendChild(script);
    return () => { document.body.removeChild(script); };
  }, []);

  // --- Initialisation Auth ---
  useEffect(() => {
    const initAuth = async () => {
      try {
        if (typeof __initial_auth_token !== 'undefined' && __initial_auth_token) {
          await signInWithCustomToken(auth, __initial_auth_token);
        } else {
          await signInAnonymously(auth);
        }
      } catch (err) { console.error("Auth error:", err); }
    };
    initAuth();
    const unsubscribe = onAuthStateChanged(auth, (u) => {
      setUser(u);
      setLoading(false);
    });
    return () => unsubscribe();
  }, []);

  // --- Données ---
  useEffect(() => {
    if (!user) return;
    const unsubStudents = onSnapshot(collection(db, 'artifacts', appId, 'public', 'data', 'students'), (snap) => {
      const list = snap.docs.map(doc => ({ id: doc.id, ...doc.data() }));
      list.sort((a, b) => (a.class || "").localeCompare(b.class || "") || a.name.localeCompare(b.name));
      setStudents(list);
    });
    const unsubEvals = onSnapshot(collection(db, 'artifacts', appId, 'public', 'data', 'evaluations'), (snap) => {
      setAllEvaluations(snap.docs.map(doc => ({ id: doc.id, ...doc.data() })));
    });
    return () => { unsubStudents(); unsubEvals(); };
  }, [user]);

  // --- Logique Métier ---
  const skills = [
    { id: 'ident', label: 'Identifier les facteurs du macro-environnement' },
    { id: 'expl', label: 'Expliquer les composantes du modèle PESTEL' },
    { id: 'impact', label: 'Analyser les impacts des facteurs sur l\'activité' },
    { id: 'mobil', label: 'Mobiliser PESTEL dans une situation contextualisée' }
  ];

  const phases = [
    { id: 'diagnostique', label: 'Phase Diagnostique', desc: 'Rappel des notions' },
    { id: 'formative', label: 'Phase Formative', desc: 'Exercices guidés' },
    { id: 'sommative', label: 'Phase Sommative', desc: 'Cas pratique autonome' }
  ];

  const handleUpdateEval = async (phaseId, skillId, value) => {
    if (!currentStudent || !user) return;
    const evalId = `${currentStudent.id}_${phaseId}`;
    const evalRef = doc(db, 'artifacts', appId, 'public', 'data', 'evaluations', evalId);
    const existing = allEvaluations.find(e => e.id === evalId) || { scores: {}, teacherFeedback: {} };
    const newScores = { ...existing.scores, [skillId]: parseInt(value) };
    await setDoc(evalRef, {
      ...existing,
      studentId: currentStudent.id,
      studentName: currentStudent.name,
      studentClass: currentStudent.class || "Non définie",
      phaseId,
      scores: newScores,
      updatedAt: Date.now()
    });
  };

  const handleTeacherFeedback = async (studentId, phaseId, skillId, comment) => {
    if (!user) return;
    const evalId = `${studentId}_${phaseId}`;
    const evalRef = doc(db, 'artifacts', appId, 'public', 'data', 'evaluations', evalId);
    const existing = allEvaluations.find(e => e.id === evalId);
    
    const teacherFeedback = existing?.teacherFeedback || {};
    teacherFeedback[skillId] = comment;

    if (existing) {
      await updateDoc(evalRef, { teacherFeedback });
    } else {
      await setDoc(evalRef, {
        studentId,
        phaseId,
        scores: {},
        teacherFeedback,
        updatedAt: Date.now()
      });
    }
  };

  const handleAddStudent = async () => {
    if (!user || !newStudentName.trim()) return;
    try {
      await addDoc(collection(db, 'artifacts', appId, 'public', 'data', 'students'), {
        name: newStudentName.trim(),
        class: newStudentClass.trim() || "Non définie",
        createdAt: Date.now()
      });
      setNewStudentName(""); 
      setNewStudentClass("");
      setSearchQuery(""); // Réinitialise la recherche pour voir le nouvel élève
    } catch (err) {
      console.error("Erreur lors de l'ajout manuel:", err);
    }
  };

  const handleDeleteStudent = async (id) => {
    if (!user) return;
    if (confirm(`Voulez-vous vraiment supprimer cet élève ?`)) {
      await deleteDoc(doc(db, 'artifacts', appId, 'public', 'data', 'students', id));
    }
  };

  const handleFileUpload = (e) => {
    const file = e.target.files[0];
    if (!file || !window.XLSX) return;
    setImporting(true);
    const reader = new FileReader();
    reader.onload = async (evt) => {
      const bstr = evt.target.result;
      const wb = window.XLSX.read(bstr, { type: 'binary' });
      const ws = wb.Sheets[wb.SheetNames[0]];
      const data = window.XLSX.utils.sheet_to_json(ws);
      for (const row of data) {
        const nom = row.Nom || row.nom || "";
        const prenom = row.Prénom || row.prenom || "";
        const classe = row.Classe || row.classe || "Non définie";
        if (nom || prenom) {
          await addDoc(collection(db, 'artifacts', appId, 'public', 'data', 'students'), {
            name: `${prenom} ${nom}`.trim(),
            class: String(classe),
            createdAt: Date.now()
          });
        }
      }
      setImporting(false);
      e.target.value = null;
    };
    reader.readAsBinaryString(file);
  };

  const getProgressionForId = (studentId) => {
    return phases.map(p => {
      const evalData = allEvaluations.find(e => e.studentId === studentId && e.phaseId === p.id);
      const scores = evalData ? Object.values(evalData.scores) : [];
      const avg = scores.length > 0 ? scores.reduce((a, b) => a + b, 0) / skills.length : 0;
      return { name: p.label.split(' ')[1], score: avg };
    });
  };

  const filteredStudents = useMemo(() => {
    return students.filter(s => 
      s.name.toLowerCase().includes(searchQuery.toLowerCase()) || 
      s.class.toLowerCase().includes(searchQuery.toLowerCase())
    );
  }, [students, searchQuery]);

  if (loading) return <div className="flex h-screen items-center justify-center bg-slate-50 text-indigo-600 font-bold">Chargement de l'application...</div>;

  // --- LOGIN ---
  if (!role) {
    return (
      <div className="min-h-screen bg-slate-100 flex items-center justify-center p-4">
        <div className="max-w-md w-full space-y-8 bg-white p-10 rounded-3xl shadow-xl border border-slate-200">
          <div className="text-center">
            <div className="bg-indigo-100 w-20 h-20 rounded-2xl flex items-center justify-center mx-auto mb-6">
              <GraduationCap size={40} className="text-indigo-600" />
            </div>
            <h1 className="text-3xl font-extrabold text-slate-900">Eco-Eval PESTEL</h1>
            <p className="text-slate-500 mt-2">Portail d'auto-évaluation pédagogique</p>
          </div>
          <div className="grid grid-cols-1 gap-4">
            <button onClick={() => setRole('student')} className="group p-6 border-2 border-slate-200 rounded-2xl hover:border-indigo-500 hover:bg-indigo-50 transition-all text-left flex items-center gap-4">
              <div className="bg-slate-100 p-3 rounded-xl group-hover:bg-indigo-100"><User size={24} className="text-slate-600 group-hover:text-indigo-600" /></div>
              <div>
                <h3 className="font-bold text-lg leading-none">Espace Élève</h3>
                <p className="text-xs text-slate-500 mt-1">S'évaluer et voir ses remédiations</p>
              </div>
            </button>
            <button onClick={() => setRole('teacher')} className="group p-6 border-2 border-slate-200 rounded-2xl hover:border-indigo-500 hover:bg-indigo-50 transition-all text-left flex items-center gap-4">
              <div className="bg-slate-100 p-3 rounded-xl group-hover:bg-indigo-100"><Lock size={24} className="text-slate-600 group-hover:text-indigo-600" /></div>
              <div>
                <h3 className="font-bold text-lg leading-none">Espace Enseignant</h3>
                <p className="text-xs text-slate-500 mt-1">Gérer la classe et valider les acquis</p>
              </div>
            </button>
          </div>
        </div>
      </div>
    );
  }

  // --- SÉLECTION ÉLÈVE ---
  if (role === 'student' && !currentStudent) {
    return (
      <div className="min-h-screen bg-slate-100 flex items-center justify-center p-4">
        <div className="max-w-lg w-full bg-white p-8 rounded-3xl shadow-xl border border-slate-200">
          <button onClick={() => setRole(null)} className="text-slate-400 hover:text-slate-600 mb-6 flex items-center gap-1 text-sm font-medium">
            <ArrowLeft size={16} /> Retour
          </button>
          <h2 className="text-2xl font-bold mb-6">Bonjour, qui êtes-vous ?</h2>
          <div className="relative mb-4">
             <Search className="absolute left-3 top-2.5 text-slate-400" size={18} />
             <input 
               type="text" placeholder="Rechercher mon nom..." 
               value={searchQuery} onChange={(e) => setSearchQuery(e.target.value)}
               className="w-full pl-10 pr-4 py-2 bg-slate-50 border border-slate-200 rounded-xl outline-none focus:ring-2 focus:ring-indigo-500"
             />
          </div>
          <div className="space-y-2 max-h-[400px] overflow-y-auto pr-2 custom-scrollbar">
            {filteredStudents.map(s => (
              <button key={s.id} onClick={() => setCurrentStudent(s)} className="w-full p-4 text-left border border-slate-200 rounded-xl hover:bg-indigo-50 hover:border-indigo-200 transition-all flex items-center justify-between group">
                <div>
                  <div className="font-bold text-slate-700">{s.name}</div>
                  <div className="text-[10px] font-bold text-indigo-500 uppercase">{s.class}</div>
                </div>
                <ChevronRight size={18} className="text-slate-300 group-hover:text-indigo-500" />
              </button>
            ))}
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-slate-50 font-sans text-slate-900">
      <nav className="bg-indigo-600 text-white p-4 shadow-lg sticky top-0 z-50">
        <div className="max-w-6xl mx-auto flex justify-between items-center">
          <div className="flex items-center gap-3">
            <GraduationCap size={28} />
            <h1 className="font-bold text-xl hidden sm:block">Eco-Eval PESTEL</h1>
            {currentStudent && <span className="bg-indigo-500/50 px-3 py-1 rounded-full text-xs font-bold border border-white/20">{currentStudent.name}</span>}
            {role === 'teacher' && <span className="bg-white/20 px-3 py-1 rounded-full text-xs font-bold border border-white/20">Dashboard Prof</span>}
          </div>
          <button onClick={() => { setRole(null); setCurrentStudent(null); setSelectedStudentForTeacher(null); }} className="flex items-center gap-2 px-3 py-1.5 rounded-lg bg-indigo-700 hover:bg-indigo-800 transition-colors text-sm font-medium">
            <LogOut size={16} /> Quitter
          </button>
        </div>
      </nav>

      <main className="max-w-6xl mx-auto p-4 md:p-8">
        {role === 'student' ? (
          /* --- VUE ÉLÈVE --- */
          <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
            <div className="lg:col-span-2 space-y-6">
              <header className="bg-white p-6 rounded-2xl shadow-sm border border-slate-200">
                <h2 className="text-2xl font-bold text-slate-800">Auto-évaluation</h2>
                <p className="text-slate-500">Analyser le macro-environnement de l'entreprise</p>
              </header>

              <div className="flex gap-2 overflow-x-auto pb-2 scrollbar-hide">
                {phases.map((p, idx) => (
                  <button key={p.id} onClick={() => setActiveStep(idx)} className={`flex-1 min-w-[150px] p-4 rounded-xl border-2 transition-all text-left ${activeStep === idx ? 'border-indigo-500 bg-indigo-50' : 'border-transparent bg-white hover:border-slate-200'}`}>
                    <span className="text-xs font-bold uppercase tracking-wider text-indigo-600">Phase {idx + 1}</span>
                    <h3 className="font-semibold block truncate">{p.label}</h3>
                  </button>
                ))}
              </div>

              <div className="bg-white p-8 rounded-2xl shadow-sm border border-slate-200">
                <div className="mb-6 flex justify-between items-center">
                  <div>
                    <h3 className="text-lg font-bold flex items-center gap-2"><ClipboardList className="text-indigo-500" /> {phases[activeStep].label}</h3>
                    <p className="text-sm text-slate-500">{phases[activeStep].desc}</p>
                  </div>
                </div>

                <div className="space-y-10">
                  {skills.map(skill => {
                    const currentEval = allEvaluations.find(e => e.studentId === currentStudent.id && e.phaseId === phases[activeStep].id);
                    const value = currentEval?.scores?.[skill.id] || 0;
                    const feedback = currentEval?.teacherFeedback?.[skill.id];
                    
                    return (
                      <div key={skill.id} className="space-y-4">
                        <div className="flex justify-between items-start gap-4">
                          <label className="text-sm font-semibold text-slate-700 flex-1">{skill.label}</label>
                          <span className={`text-[10px] font-bold px-2 py-1 rounded uppercase flex-shrink-0 ${
                            value === 4 ? 'bg-green-100 text-green-700' : value >= 2 ? 'bg-indigo-100 text-indigo-700' : 'bg-slate-100 text-slate-500'
                          }`}>
                            {['Non débuté', 'Débutant', 'En progrès', 'Acquis', 'Maîtrisé'][value]}
                          </span>
                        </div>
                        <input type="range" min="0" max="4" step="1" value={value} onChange={(e) => handleUpdateEval(phases[activeStep].id, skill.id, e.target.value)} className="w-full h-2 bg-slate-200 rounded-lg appearance-none cursor-pointer accent-indigo-600" />
                        
                        {feedback && (
                          <div className="mt-2 bg-orange-50 border-l-4 border-orange-400 p-3 rounded-r-xl animate-in fade-in slide-in-from-left-2">
                             <div className="flex items-center gap-2 mb-1 text-orange-800 font-bold text-[10px] uppercase tracking-wider">
                               <MessageSquare size={12} /> Commentaire du professeur :
                             </div>
                             <p className="text-sm text-orange-900 leading-relaxed italic">"{feedback}"</p>
                          </div>
                        )}
                      </div>
                    );
                  })}
                </div>
              </div>
            </div>

            <div className="space-y-6">
              <div className="bg-white p-6 rounded-2xl shadow-sm border border-slate-200">
                <h3 className="text-lg font-bold mb-4 flex items-center gap-2"><TrendingUp className="text-green-500" /> Progression</h3>
                <div className="h-48 w-full">
                  <ResponsiveContainer width="100%" height="100%">
                    <LineChart data={getProgressionForId(currentStudent.id)}>
                      <CartesianGrid strokeDasharray="3 3" vertical={false} />
                      <XAxis dataKey="name" fontSize={10} />
                      <YAxis domain={[0, 4]} fontSize={10} />
                      <Tooltip />
                      <Line type="monotone" dataKey="score" stroke="#4f46e5" strokeWidth={3} dot={{ r: 6 }} />
                    </LineChart>
                  </ResponsiveContainer>
                </div>
              </div>
              <div className="bg-indigo-900 text-white p-6 rounded-2xl shadow-md">
                 <h3 className="text-lg font-bold mb-4 flex items-center gap-2"><AlertCircle className="text-indigo-300" /> Conseils</h3>
                 <p className="text-sm text-indigo-200 italic leading-relaxed">
                   Surveille les bulles de commentaires oranges dans tes phases d'évaluation pour lire les conseils personnalisés de ton professeur.
                 </p>
              </div>
            </div>
          </div>
        ) : (
          /* --- VUE ENSEIGNANT --- */
          <div className="space-y-8">
            {!selectedStudentForTeacher ? (
              /* --- LISTE DES ÉLÈVES (PROF) --- */
              <div className="space-y-6 animate-in fade-in duration-500">
                <header className="bg-white p-6 rounded-2xl shadow-sm border border-slate-200 flex flex-col md:flex-row md:justify-between md:items-center gap-4">
                  <div>
                    <h2 className="text-2xl font-bold text-slate-800">Suivi Individualisé</h2>
                    <p className="text-slate-500">Gérez vos élèves et validez leurs compétences</p>
                  </div>
                  <div className="flex items-center gap-4">
                    <div className="text-right">
                      <span className="block text-3xl font-bold text-indigo-600 leading-none">{students.length}</span>
                      <span className="text-[10px] text-slate-400 uppercase font-bold tracking-widest">Élèves</span>
                    </div>
                    <label className={`flex items-center gap-2 px-4 py-2 rounded-xl text-sm font-bold cursor-pointer transition-all bg-green-600 text-white hover:bg-green-700 shadow-md shadow-green-100`}>
                      <FileSpreadsheet size={18} /> {importing ? "Importation..." : "Import Excel"}
                      <input type="file" accept=".xlsx, .xls, .csv" className="hidden" onChange={handleFileUpload} disabled={importing} />
                    </label>
                  </div>
                </header>

                {/* FORMULAIRE D'AJOUT MANUEL (CORRIGÉ ET DÉPLACÉ) */}
                <div className="bg-white p-6 rounded-2xl shadow-sm border border-slate-200">
                  <h3 className="text-sm font-bold text-slate-400 uppercase tracking-widest mb-4 flex items-center gap-2">
                    <UserPlus size={16} /> Ajouter un élève manuellement
                  </h3>
                  <div className="flex flex-col sm:flex-row gap-3">
                    <input 
                      type="text" 
                      placeholder="Nom Prénom de l'élève" 
                      value={newStudentName} 
                      onChange={(e) => setNewStudentName(e.target.value)} 
                      className="flex-[2] bg-slate-50 border border-slate-200 rounded-xl px-4 py-2 text-sm outline-none focus:ring-2 focus:ring-indigo-500" 
                    />
                    <input 
                      type="text" 
                      placeholder="Classe" 
                      value={newStudentClass} 
                      onChange={(e) => setNewStudentClass(e.target.value)} 
                      className="flex-1 bg-slate-50 border border-slate-200 rounded-xl px-4 py-2 text-sm outline-none focus:ring-2 focus:ring-indigo-500" 
                    />
                    <button 
                      onClick={handleAddStudent} 
                      className="bg-indigo-600 text-white px-6 py-2 rounded-xl hover:bg-indigo-700 transition-colors flex items-center justify-center gap-2 font-bold text-sm"
                    >
                      <Plus size={18} /> Ajouter
                    </button>
                  </div>
                </div>

                <div className="bg-white p-6 rounded-2xl shadow-sm border border-slate-200">
                  <div className="flex flex-col md:flex-row justify-between gap-4 mb-6">
                    <div className="relative flex-1">
                       <Search className="absolute left-3 top-2.5 text-slate-400" size={18} />
                       <input 
                         type="text" placeholder="Rechercher par nom ou classe dans la liste..." 
                         value={searchQuery} onChange={(e) => setSearchQuery(e.target.value)}
                         className="w-full pl-10 pr-4 py-2 bg-slate-50 border border-slate-200 rounded-xl outline-none border-transparent focus:border-indigo-300"
                       />
                    </div>
                  </div>

                  <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                    {filteredStudents.map(s => {
                      const hasFeedback = allEvaluations.some(e => e.studentId === s.id && e.teacherFeedback && Object.keys(e.teacherFeedback).length > 0);
                      const isComplete = allEvaluations.some(e => e.studentId === s.id && e.phaseId === 'sommative');
                      return (
                        <div key={s.id} onClick={() => setSelectedStudentForTeacher(s)} className="p-4 bg-slate-50 border border-slate-100 rounded-2xl hover:border-indigo-300 hover:shadow-md transition-all cursor-pointer relative group">
                           <div className="flex justify-between items-start mb-2">
                             <div>
                               <h4 className="font-bold text-slate-800">{s.name}</h4>
                               <span className="text-[10px] font-bold text-indigo-500 uppercase">{s.class}</span>
                             </div>
                             {hasFeedback && <MessageSquare size={14} className="text-green-500" title="Commentaires présents" />}
                           </div>
                           <div className="flex items-center gap-2 mt-4">
                             <div className="flex-1 h-1 bg-slate-200 rounded-full overflow-hidden">
                                <div className={`h-full bg-indigo-500 transition-all ${isComplete ? 'w-full' : 'w-1/3'}`}></div>
                             </div>
                             <span className="text-[10px] font-bold text-slate-400">{isComplete ? "Validé" : "En cours"}</span>
                           </div>
                           <button onClick={(e) => {e.stopPropagation(); handleDeleteStudent(s.id);}} className="absolute -top-2 -right-2 bg-white text-slate-300 hover:text-red-500 shadow-md rounded-full p-1 opacity-0 group-hover:opacity-100 transition-opacity">
                             <Trash2 size={12} />
                           </button>
                        </div>
                      );
                    })}
                    {filteredStudents.length === 0 && (
                      <div className="col-span-full py-10 text-center text-slate-400 italic">
                        Aucun élève ne correspond à votre recherche.
                      </div>
                    )}
                  </div>
                </div>
              </div>
            ) : (
              /* --- DÉTAIL ÉLÈVE + VALIDATION (PROF) --- */
              <div className="space-y-6 animate-in slide-in-from-right duration-300">
                <button onClick={() => setSelectedStudentForTeacher(null)} className="flex items-center gap-2 text-sm font-bold text-slate-500 hover:text-indigo-600 mb-2">
                  <ArrowLeft size={18} /> Retour à la liste complète
                </button>
                
                <header className="bg-white p-6 rounded-2xl shadow-sm border border-slate-200 flex flex-col md:flex-row md:justify-between items-center gap-4">
                  <div className="flex items-center gap-4">
                    <div className="bg-indigo-100 w-12 h-12 rounded-xl flex items-center justify-center text-indigo-600 font-bold text-xl uppercase">
                      {selectedStudentForTeacher.name.charAt(0)}
                    </div>
                    <div>
                      <h2 className="text-2xl font-bold">{selectedStudentForTeacher.name}</h2>
                      <p className="text-slate-500 text-sm">Classe : {selectedStudentForTeacher.class}</p>
                    </div>
                  </div>
                  <div className="h-24 w-48">
                    <ResponsiveContainer width="100%" height="100%">
                      <LineChart data={getProgressionForId(selectedStudentForTeacher.id)}>
                        <Line type="monotone" dataKey="score" stroke="#4f46e5" strokeWidth={2} dot={{ r: 4 }} />
                      </LineChart>
                    </ResponsiveContainer>
                  </div>
                </header>

                <div className="grid grid-cols-1 gap-6">
                  {phases.map(phase => (
                    <div key={phase.id} className="bg-white rounded-2xl border border-slate-200 overflow-hidden shadow-sm">
                      <div className="bg-slate-50 p-4 border-b border-slate-100 flex justify-between items-center">
                        <h3 className="font-bold text-slate-700 flex items-center gap-2">
                          <ClipboardList size={18} className="text-indigo-500" />
                          {phase.label}
                        </h3>
                        <span className="text-[10px] uppercase font-bold text-slate-400">{phase.desc}</span>
                      </div>
                      
                      <div className="p-6 space-y-6">
                        {skills.map(skill => {
                          const evalData = allEvaluations.find(e => e.studentId === selectedStudentForTeacher.id && e.phaseId === phase.id);
                          const score = evalData?.scores?.[skill.id] || 0;
                          const feedback = evalData?.teacherFeedback?.[skill.id] || "";
                          
                          return (
                            <div key={skill.id} className="flex flex-col md:flex-row gap-6 p-4 rounded-xl border border-slate-50 hover:bg-slate-50/50 transition-colors">
                              <div className="flex-1">
                                <div className="flex justify-between mb-2">
                                  <h4 className="text-sm font-bold text-slate-700">{skill.label}</h4>
                                  <span className={`text-[10px] font-bold px-2 py-0.5 rounded ${score >= 3 ? 'bg-green-100 text-green-700' : 'bg-slate-100 text-slate-500'}`}>
                                    Auto-éval : {score}/4
                                  </span>
                                </div>
                                <div className="w-full bg-slate-100 h-1.5 rounded-full overflow-hidden">
                                  <div className="h-full bg-indigo-500" style={{ width: `${(score/4)*100}%` }}></div>
                                </div>
                              </div>
                              
                              <div className="flex-1 space-y-2">
                                <label className="text-[10px] font-bold text-slate-400 uppercase flex items-center gap-1">
                                  <MessageSquare size={10} /> Commentaire / Remédiation
                                </label>
                                <div className="flex gap-2">
                                  <textarea 
                                    rows="2"
                                    value={feedback}
                                    placeholder="Ex: Attention à ne pas confondre légal et politique..."
                                    onChange={(e) => handleTeacherFeedback(selectedStudentForTeacher.id, phase.id, skill.id, e.target.value)}
                                    className="flex-1 bg-white border border-slate-200 rounded-lg p-2 text-xs outline-none focus:ring-2 focus:ring-indigo-500"
                                  />
                                  <div className="flex flex-col justify-center">
                                    <button 
                                      className="p-2 text-indigo-500 hover:bg-indigo-50 rounded-lg"
                                      title="Sauvegarde automatique"
                                    >
                                      <ThumbsUp size={16} />
                                    </button>
                                  </div>
                                </div>
                              </div>
                            </div>
                          );
                        })}
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            )}
          </div>
        )}
      </main>

      <style>{`
        .scrollbar-hide::-webkit-scrollbar { display: none; }
        .scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }
        .custom-scrollbar::-webkit-scrollbar { width: 6px; }
        .custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
        .custom-scrollbar::-webkit-scrollbar-thumb { background: #e2e8f0; border-radius: 10px; }
        .custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #cbd5e1; }
      `}</style>
    </div>
  );
};

export default App;