// Parcours 1 — Wizard création évaluation (étapes 1-4) + Correction + Résultats

const WizardStepper = ({ current }) => {
  const steps = [
    { n: 1, label: 'Paramètres', route: '#/prof/wizard/1' },
    { n: 2, label: 'Exercices', route: '#/prof/wizard/2' },
    { n: 3, label: 'Diffusion', route: '#/prof/wizard/3' },
    { n: 4, label: 'Aperçu', route: '#/prof/wizard/4' },
  ];
  return (
    <div className="flex items-center gap-2" style={{ padding: '12px 0' }}>
      {steps.map((s, i) => (
        <React.Fragment key={s.n}>
          <a href={s.route} className="flex items-center gap-2" style={{ padding: '6px 14px', borderRadius: 999, background: current === s.n ? 'linear-gradient(135deg, #6ECFB5, #4DB8A0)' : current > s.n ? '#F0FDF9' : '#F8FAFC', color: current === s.n ? 'white' : current > s.n ? '#047857' : '#94A3B8', fontWeight: 600, fontSize: 13, border: current === s.n ? 'none' : '1px solid #E2E8F0' }}>
            <div style={{ width: 20, height: 20, borderRadius: 999, background: current === s.n ? 'rgba(255,255,255,0.25)' : current > s.n ? '#6ECFB5' : '#E2E8F0', color: current > s.n ? 'white' : 'inherit', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 11, fontWeight: 700 }}>
              {current > s.n ? <Icon name="check" size={11}/> : s.n}
            </div>
            {s.label}
          </a>
          {i < 3 && <div style={{ width: 30, height: 2, background: current > s.n ? '#6ECFB5' : '#E2E8F0' }}/>}
        </React.Fragment>
      ))}
    </div>
  );
};

// Step 1: Paramètres
const WizardStep1 = () => {
  const [title, setTitle] = React.useState('Algorithmique — Complexité & récursivité');
  const [desc, setDesc] = React.useState('Évaluation de mi-semestre couvrant les notions de complexité algorithmique (Big-O) et les fondamentaux de la récursivité.');
  const [opts, setOpts] = React.useState({ fullscreen: true, tabDetect: true, randQ: true, randA: false });
  const toggle = k => setOpts({ ...opts, [k]: !opts[k] });
  return (
    <ProfShell active="evals">
      <div style={{ padding: '24px 32px', maxWidth: 1100 }}>
        <div className="flex items-center gap-2 t-small" style={{ color: '#64748B', marginBottom: 6 }}>
          <a href="#/prof">Tableau de bord</a> <Icon name="chevronRight" size={12}/> Nouvelle évaluation
        </div>
        <h1 className="t-h1" style={{ marginBottom: 4 }}>Nouvelle évaluation</h1>
        <WizardStepper current={1}/>

        <div className="card" style={{ padding: 28, marginTop: 12 }}>
          <h3 className="t-h3" style={{ marginBottom: 4 }}>1. Paramètres</h3>
          <p className="t-small" style={{ color: '#64748B', marginBottom: 24 }}>Définissez le périmètre et les règles de l’évaluation.</p>

          <div style={{ display: 'grid', gap: 20 }}>
            <div>
              <label className="t-label" style={{ display: 'block', marginBottom: 6, color: '#64748B' }}>Titre</label>
              <input className="input" value={title} onChange={e => setTitle(e.target.value)}/>
            </div>
            <div>
              <label className="t-label" style={{ display: 'block', marginBottom: 6, color: '#64748B' }}>Description</label>
              <textarea className="input" rows="2" value={desc} onChange={e => setDesc(e.target.value)} style={{ resize: 'vertical', fontFamily: 'Inter' }}/>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
              <div>
                <label className="t-label" style={{ display: 'block', marginBottom: 6, color: '#64748B' }}>Campus</label>
                <select className="input"><option>Paris — Sorbonne</option><option>Lyon — La Doua</option></select>
              </div>
              <div>
                <label className="t-label" style={{ display: 'block', marginBottom: 6, color: '#64748B' }}>Groupe</label>
                <select className="input"><option>L2 Info · Groupe A (28)</option><option>L2 Info · Groupe B (26)</option></select>
              </div>
              <div>
                <label className="t-label" style={{ display: 'block', marginBottom: 6, color: '#64748B' }}>Module</label>
                <select className="input"><option>INF201 — Algorithmique</option></select>
              </div>
              <div>
                <label className="t-label" style={{ display: 'block', marginBottom: 6, color: '#64748B' }}>Durée</label>
                <div style={{ position: 'relative' }}>
                  <Icon name="clock" size={14} style={{ position: 'absolute', left: 12, top: 13, color: '#94A3B8' }}/>
                  <input className="input" defaultValue="45 minutes" style={{ paddingLeft: 34 }}/>
                </div>
              </div>
              <div>
                <label className="t-label" style={{ display: 'block', marginBottom: 6, color: '#64748B' }}>Niveau</label>
                <div style={{ display: 'flex', gap: 6 }}>
                  <button className="btn btn-sm" style={{ flex: 1, background: '#F0FDF9', color: '#047857', border: '1px solid #6ECFB5' }}>Révision</button>
                  <button className="btn btn-secondary btn-sm" style={{ flex: 1 }}>Examen</button>
                </div>
              </div>
              <div>
                <label className="t-label" style={{ display: 'block', marginBottom: 6, color: '#64748B' }}>Tentatives autorisées</label>
                <select className="input"><option>1 tentative</option><option>2 tentatives</option><option>Illimitées</option></select>
              </div>
              <div>
                <label className="t-label" style={{ display: 'block', marginBottom: 6, color: '#64748B' }}>Disponible à partir du</label>
                <div style={{ position: 'relative' }}>
                  <Icon name="calendar" size={14} style={{ position: 'absolute', left: 12, top: 13, color: '#94A3B8' }}/>
                  <input className="input" defaultValue="28/04/2026 — 14:00" style={{ paddingLeft: 34 }}/>
                </div>
              </div>
              <div>
                <label className="t-label" style={{ display: 'block', marginBottom: 6, color: '#64748B' }}>Fin de disponibilité</label>
                <div style={{ position: 'relative' }}>
                  <Icon name="calendar" size={14} style={{ position: 'absolute', left: 12, top: 13, color: '#94A3B8' }}/>
                  <input className="input" defaultValue="28/04/2026 — 18:00" style={{ paddingLeft: 34 }}/>
                </div>
              </div>
            </div>

            <div>
              <div className="t-label" style={{ color: '#64748B', marginBottom: 10 }}>Options de sécurité</div>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
                {[
                  ['fullscreen', 'Plein écran forcé', 'L’étudiant ne peut pas sortir du mode plein écran'],
                  ['tabDetect', 'Détection sortie d’onglet', 'Avertissement si l’étudiant change d’onglet'],
                  ['randQ', 'Randomiser les questions', 'Ordre des questions différent par étudiant'],
                  ['randA', 'Randomiser les réponses', 'Ordre des choix différent par étudiant'],
                ].map(([k, label, sub]) => (
                  <label key={k} onClick={() => toggle(k)} style={{ display: 'flex', gap: 12, padding: 14, borderRadius: 12, border: '1px solid ' + (opts[k] ? '#6ECFB5' : '#E2E8F0'), background: opts[k] ? '#F0FDF9' : 'white', cursor: 'pointer', transition: 'all 0.2s' }}>
                    <div style={{ width: 36, height: 20, borderRadius: 999, background: opts[k] ? '#6ECFB5' : '#CBD5E1', position: 'relative', flexShrink: 0, transition: 'all 0.2s' }}>
                      <div style={{ position: 'absolute', left: opts[k] ? 18 : 2, top: 2, width: 16, height: 16, borderRadius: 999, background: 'white', transition: 'all 0.2s' }}/>
                    </div>
                    <div>
                      <div style={{ fontFamily: 'Poppins', fontWeight: 600, fontSize: 13 }}>{label}</div>
                      <div style={{ fontSize: 12, color: '#64748B' }}>{sub}</div>
                    </div>
                  </label>
                ))}
              </div>
            </div>
          </div>

          <div className="flex justify-between" style={{ marginTop: 28, paddingTop: 20, borderTop: '1px solid #E2E8F0' }}>
            <button className="btn btn-ghost"><Icon name="save" size={14}/> Enregistrer comme brouillon</button>
            <a href="#/prof/wizard/2" className="btn btn-primary-prof">Étape suivante <Icon name="arrowRight" size={14}/></a>
          </div>
        </div>
      </div>
    </ProfShell>
  );
};

// Step 2: Exercices
const WizardStep2 = () => {
  const types = [
    { id: 'qcm-single', icon: 'check', label: 'QCM simple', desc: 'Une seule bonne réponse' },
    { id: 'qcm-multi', icon: 'checkCircle', label: 'QCM multiple', desc: 'Plusieurs bonnes réponses' },
    { id: 'matching', icon: 'layers', label: 'Association', desc: 'Relier deux listes' },
    { id: 'cloze', icon: 'edit', label: 'Texte à trous', desc: 'Compléter un énoncé' },
    { id: 'short', icon: 'file', label: 'Réponse courte', desc: 'Quelques mots' },
    { id: 'essay', icon: 'files', label: 'Question ouverte', desc: 'Rédaction longue' },
    { id: 'ordering', icon: 'grip', label: 'Ordonnancement', desc: 'Classer dans l’ordre' },
  ];
  const [selected, setSelected] = React.useState(0);
  const exercises = [
    { id: 1, type: 'qcm-multi', title: 'Complexités O(1) en moyenne', fam: 'f1', points: 2 },
    { id: 2, type: 'cloze', title: 'Définition de la récursivité', fam: 'f1', points: 2 },
    { id: 3, type: 'ordering', title: 'Ordonner les complexités', fam: 'f1', points: 3 },
    { id: 4, type: 'essay', title: 'Récursivité terminale vs non-terminale', fam: 'f1', points: 5 },
    { id: 5, type: 'matching', title: 'Algorithmes et complexités', fam: 'f1', points: 3 },
    { id: 6, type: 'qcm-single', title: 'Insertion tableau dynamique', fam: 'f1', points: 1 },
  ];
  const typeLabel = id => types.find(t => t.id === id)?.label || id;
  const current = exercises[selected];

  return (
    <ProfShell active="evals">
      <div style={{ padding: '24px 32px' }}>
        <div className="flex items-center gap-2 t-small" style={{ color: '#64748B', marginBottom: 6 }}>
          <a href="#/prof">Tableau de bord</a> <Icon name="chevronRight" size={12}/> Nouvelle évaluation
        </div>
        <h1 className="t-h1" style={{ marginBottom: 4 }}>Algorithmique — Complexité & récursivité</h1>
        <WizardStepper current={2}/>

        <div style={{ display: 'grid', gridTemplateColumns: '240px 300px 1fr', gap: 16, marginTop: 12, minHeight: 600 }}>
          {/* Left: types */}
          <div className="card" style={{ padding: 14 }}>
            <div className="t-label" style={{ color: '#64748B', marginBottom: 10 }}>Bibliothèque</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
              {types.map(t => (
                <div key={t.id} style={{ padding: 10, borderRadius: 10, cursor: 'grab', border: '1px solid #E2E8F0', transition: 'all 0.15s' }}
                     onMouseEnter={e => { e.currentTarget.style.background = '#F0FDF9'; e.currentTarget.style.borderColor = '#6ECFB5'; }}
                     onMouseLeave={e => { e.currentTarget.style.background = 'white'; e.currentTarget.style.borderColor = '#E2E8F0'; }}>
                  <div className="flex items-center gap-2" style={{ marginBottom: 2 }}>
                    <Icon name={t.icon} size={14} style={{ color: '#6ECFB5' }}/>
                    <span style={{ fontFamily: 'Poppins', fontWeight: 600, fontSize: 12 }}>{t.label}</span>
                  </div>
                  <div style={{ fontSize: 11, color: '#64748B' }}>{t.desc}</div>
                </div>
              ))}
            </div>
          </div>

          {/* Middle: ordered list */}
          <div className="card" style={{ padding: 14, display: 'flex', flexDirection: 'column' }}>
            <div className="flex items-center justify-between" style={{ marginBottom: 10 }}>
              <div className="t-label" style={{ color: '#64748B' }}>Exercices ({exercises.length})</div>
              <button className="btn btn-ghost btn-sm" style={{ padding: 4 }}><Icon name="plus" size={14}/></button>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 6, flex: 1 }}>
              {exercises.map((ex, i) => (
                <div key={ex.id} onClick={() => setSelected(i)} style={{ padding: 10, borderRadius: 10, border: '1px solid ' + (selected === i ? '#6ECFB5' : '#E2E8F0'), background: selected === i ? '#F0FDF9' : 'white', cursor: 'pointer', display: 'flex', gap: 8, alignItems: 'flex-start', transition: 'all 0.15s' }}>
                  <Icon name="grip" size={14} style={{ color: '#CBD5E1', marginTop: 2, cursor: 'grab' }}/>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div className="flex items-center gap-1" style={{ marginBottom: 3 }}>
                      <span style={{ fontFamily: 'JetBrains Mono', fontSize: 10, color: '#94A3B8' }}>#{i+1}</span>
                      <span className="badge badge-f1" style={{ fontSize: 9 }}>{typeLabel(ex.type)}</span>
                    </div>
                    <div style={{ fontSize: 12, fontWeight: 600, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{ex.title}</div>
                    <div style={{ fontSize: 11, color: '#64748B', marginTop: 2 }}>{ex.points} pt{ex.points > 1 ? 's' : ''}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>

          {/* Right: editor */}
          <div className="card" style={{ padding: 24 }}>
            <div className="flex items-center justify-between" style={{ marginBottom: 14 }}>
              <div>
                <span className="badge badge-f1">{typeLabel(current.type)}</span>
                <h3 className="t-h3" style={{ marginTop: 6 }}>Édition — Exercice #{selected + 1}</h3>
              </div>
              <div className="flex gap-2">
                <button className="btn btn-ghost btn-sm" style={{ padding: 6 }}><Icon name="copy" size={14}/></button>
                <button className="btn btn-ghost btn-sm" style={{ padding: 6, color: '#EF4444' }}><Icon name="trash" size={14}/></button>
              </div>
            </div>
            <div style={{ display: 'grid', gap: 16 }}>
              <div>
                <label className="t-label" style={{ display: 'block', marginBottom: 6, color: '#64748B' }}>Énoncé</label>
                <textarea className="input" rows="2" defaultValue="Parmi les structures suivantes, lesquelles ont une complexité d’accès en O(1) en moyenne ?"/>
              </div>
              <div>
                <label className="t-label" style={{ display: 'block', marginBottom: 8, color: '#64748B' }}>Choix de réponse</label>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                  {[
                    { letter: 'A', text: 'Table de hachage (HashMap)', correct: true },
                    { letter: 'B', text: 'Arbre binaire équilibré', correct: false },
                    { letter: 'C', text: 'Tableau indexé', correct: true },
                    { letter: 'D', text: 'Liste chaînée simple', correct: false },
                  ].map((c, i) => (
                    <div key={i} style={{ display: 'flex', gap: 10, padding: 10, borderRadius: 10, border: '1px solid ' + (c.correct ? '#6ECFB5' : '#E2E8F0'), background: c.correct ? '#F0FDF9' : 'white' }}>
                      <div style={{ width: 24, height: 24, borderRadius: 6, background: c.correct ? '#6ECFB5' : '#F1F5F9', color: c.correct ? 'white' : '#64748B', display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 700, fontSize: 11, flexShrink: 0 }}>
                        {c.correct ? <Icon name="check" size={12}/> : c.letter}
                      </div>
                      <input className="input" defaultValue={c.text} style={{ border: 'none', background: 'transparent', padding: '2px 0' }}/>
                      <button className="btn btn-ghost btn-sm" style={{ padding: 4 }}><Icon name="x" size={14}/></button>
                    </div>
                  ))}
                  <button className="btn btn-ghost btn-sm" style={{ alignSelf: 'flex-start', color: '#6ECFB5' }}><Icon name="plus" size={12}/> Ajouter un choix</button>
                </div>
              </div>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12 }}>
                <div>
                  <label className="t-label" style={{ display: 'block', marginBottom: 6, color: '#64748B' }}>Points</label>
                  <input className="input" defaultValue="2"/>
                </div>
                <div>
                  <label className="t-label" style={{ display: 'block', marginBottom: 6, color: '#64748B' }}>Difficulté</label>
                  <select className="input"><option>Moyenne</option><option>Facile</option><option>Difficile</option></select>
                </div>
                <div>
                  <label className="t-label" style={{ display: 'block', marginBottom: 6, color: '#64748B' }}>Famille</label>
                  <select className="input"><option>f1 — Algorithmique</option></select>
                </div>
              </div>
              <div>
                <label className="t-label" style={{ display: 'block', marginBottom: 6, color: '#64748B' }}>Feedback par choix (optionnel)</label>
                <textarea className="input" rows="2" placeholder="Ce feedback s’affichera après validation de la réponse…"/>
              </div>
            </div>
          </div>
        </div>

        {/* Footer */}
        <div className="flex items-center justify-between" style={{ marginTop: 16, padding: '14px 20px', background: 'white', borderRadius: 14, border: '1px solid #E2E8F0' }}>
          <button className="btn btn-ai"><Icon name="sparkles" size={14}/> Générer un exercice avec l’IA</button>
          <div className="flex items-center gap-4 t-small" style={{ color: '#64748B' }}>
            <span><Icon name="files" size={12} style={{ display: 'inline', verticalAlign: 'middle' }}/> <b style={{ color: '#1A1A2E' }}>{exercises.length}</b> exercices</span>
            <span><Icon name="trophy" size={12} style={{ display: 'inline', verticalAlign: 'middle' }}/> <b style={{ color: '#1A1A2E' }}>{exercises.reduce((a, b) => a + b.points, 0)}</b> points</span>
            <span><Icon name="clock" size={12} style={{ display: 'inline', verticalAlign: 'middle' }}/> ~<b style={{ color: '#1A1A2E' }}>42 min</b></span>
          </div>
          <div className="flex gap-2">
            <a href="#/prof/wizard/1" className="btn btn-secondary">Précédent</a>
            <a href="#/prof" className="btn btn-primary-prof">Diffuser <Icon name="send" size={14}/></a>
          </div>
        </div>
      </div>
    </ProfShell>
  );
};

// 1.5 Correction
const ProfCorrection = () => {
  const D = window.STUDYHUB_DATA;
  const [selectedId, setSelectedId] = React.useState(3); // Chloé by default
  const [aiTyping, setAiTyping] = React.useState(true);
  const [displayed, setDisplayed] = React.useState('');
  const [score, setScore] = React.useState(15.5);
  const [decision, setDecision] = React.useState(null);

  const justification = "La copie démontre une bonne maîtrise de la distinction entre la Vème République et les régimes précédents. L'étudiante identifie correctement les mécanismes de rationalisation du parlementarisme (art. 49.3, 40, 41, 44.3) et rattache avec pertinence l'exemple du 49.3 retraites de 2023. \n\nPoints forts : structure argumentative claire, exemples datés et sourcés. Points à améliorer : la partie sur le bicamérisme reste superficielle, et la notion de \"parlementarisme rationalisé\" mériterait une définition plus précise en introduction.";

  React.useEffect(() => {
    if (!aiTyping) return;
    let i = 0;
    setDisplayed('');
    const id = setInterval(() => {
      if (i >= justification.length) { clearInterval(id); setAiTyping(false); return; }
      setDisplayed(justification.slice(0, i + 1));
      i += 3;
    }, 12);
    return () => clearInterval(id);
  }, [selectedId]);

  const statusIcon = (s) => {
    if (s === 'corrige') return <span title="Corrigée auto" style={{ color: '#10B981' }}><Icon name="check" size={14}/></span>;
    if (s === 'ai-suggested') return <span title="IA suggérée" style={{ color: '#A78BFA' }}><Icon name="sparkles" size={14}/></span>;
    if (s === 'modified') return <span title="Modifiée" style={{ color: '#F5C842' }}><Icon name="edit" size={14}/></span>;
    return <span title="En attente" style={{ color: '#94A3B8' }}><Icon name="clock" size={14}/></span>;
  };

  const current = D.students.find(s => s.id === selectedId) || D.students[0];
  const progression = D.students.filter(s => s.status !== 'pending').length;

  return (
    <ProfShell active="evals">
      <div style={{ padding: '20px 24px' }}>
        <div className="flex items-center gap-2 t-small" style={{ color: '#64748B', marginBottom: 6 }}>
          <a href="#/prof">Tableau de bord</a> <Icon name="chevronRight" size={12}/> Droit constitutionnel <Icon name="chevronRight" size={12}/> Correction
        </div>
        <div className="flex items-center justify-between" style={{ marginBottom: 16 }}>
          <div>
            <h1 className="t-h2">Droit constitutionnel — Vème République</h1>
            <div className="t-small" style={{ color: '#64748B' }}>L1 Droit · Cohorte B · 64 copies · Progression correction {progression}/{D.students.length}</div>
          </div>
          <div className="flex gap-2">
            <button className="btn btn-secondary btn-sm"><Icon name="filter" size={14}/> Filtrer</button>
            <button className="btn btn-primary-prof btn-sm">Finaliser la session</button>
          </div>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '300px 1fr', gap: 16 }}>
          {/* Left: list */}
          <div className="card" style={{ padding: 10, height: 'calc(100vh - 180px)', overflowY: 'auto' }}>
            <div style={{ padding: '6px 10px 10px' }}>
              <div className="t-label" style={{ color: '#64748B' }}>Copies ({D.students.length})</div>
            </div>
            {D.students.map(s => (
              <div key={s.id} onClick={() => { setSelectedId(s.id); setAiTyping(true); }} style={{ padding: 10, borderRadius: 10, cursor: 'pointer', background: selectedId === s.id ? '#F0FDF9' : 'transparent', border: '1px solid ' + (selectedId === s.id ? '#6ECFB5' : 'transparent'), display: 'flex', gap: 10, marginBottom: 4 }}>
                <Avatar name={s.name} size={32}/>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div className="flex items-center gap-2">
                    <div style={{ fontSize: 13, fontWeight: 600, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{s.name}</div>
                    {statusIcon(s.status)}
                  </div>
                  <div style={{ fontSize: 11, color: '#64748B' }}>{s.time} · {s.score}/20</div>
                </div>
              </div>
            ))}
          </div>

          {/* Right: correction */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
            {/* Header student */}
            <div className="card" style={{ padding: 18, display: 'flex', alignItems: 'center', gap: 16 }}>
              <Avatar name={current.name} size={48}/>
              <div style={{ flex: 1 }}>
                <div style={{ fontFamily: 'Poppins', fontWeight: 700, fontSize: 16 }}>{current.name}</div>
                <div className="t-small" style={{ color: '#64748B' }}>L1 Droit · Cohorte B · Temps : {current.time}</div>
              </div>
              <div style={{ textAlign: 'right' }}>
                <div className="t-label" style={{ color: '#64748B' }}>Score global</div>
                <div style={{ fontFamily: 'Poppins', fontWeight: 800, fontSize: 28, color: '#047857' }}>{score.toFixed(1)}<span style={{ fontSize: 16, color: '#94A3B8' }}>/20</span></div>
              </div>
              <div style={{ textAlign: 'right', borderLeft: '1px solid #E2E8F0', paddingLeft: 16 }}>
                <div className="t-label" style={{ color: '#64748B' }}>Progression</div>
                <div style={{ fontFamily: 'Poppins', fontWeight: 700, fontSize: 16 }}>5/12</div>
                <div style={{ width: 80, height: 4, background: '#F1F5F9', borderRadius: 4, overflow: 'hidden', marginTop: 4 }}>
                  <div style={{ width: '42%', height: '100%', background: '#6ECFB5' }}/>
                </div>
              </div>
            </div>

            {/* Question 5 — essay */}
            <div className="card" style={{ padding: 22 }}>
              <div className="flex items-center gap-2" style={{ marginBottom: 8 }}>
                <span className="badge badge-f2">Question ouverte</span>
                <span style={{ fontFamily: 'JetBrains Mono', fontSize: 12, color: '#94A3B8' }}>Q5 · 5 pts</span>
              </div>
              <div style={{ fontFamily: 'Poppins', fontWeight: 600, fontSize: 15, marginBottom: 14 }}>
                Analysez les mécanismes de rationalisation du parlementarisme sous la Vème République. Illustrez avec un exemple récent.
              </div>
              <div style={{ background: '#F8FAFC', border: '1px solid #E2E8F0', borderRadius: 12, padding: 16, marginBottom: 16 }}>
                <div className="t-label" style={{ color: '#64748B', marginBottom: 6 }}>Réponse de l’étudiante</div>
                <p className="t-body" style={{ fontSize: 14, margin: 0 }}>
                  La V<sup>ème</sup> République instaure un régime parlementaire rationalisé visant à renforcer l'exécutif face au Parlement.
                  Les principaux mécanismes sont l'article 49 alinéa 3 (engagement de responsabilité), l'article 40 (irrecevabilité financière),
                  l'article 41 (domaine de la loi) et l'article 44 alinéa 3 (vote bloqué). Par exemple, en mars 2023, la Première ministre Élisabeth Borne
                  a déclenché le 49.3 pour faire adopter la réforme des retraites sans vote de l'Assemblée, illustrant la force de ce mécanisme
                  dans un contexte de majorité relative. Le bicamérisme intervient aussi comme filtre, le Sénat ayant un rôle de modération.
                </p>
              </div>

              {/* AI Correction Card */}
              <div style={{ background: 'linear-gradient(135deg, #F5F3FF, #FAF5FF)', border: '1px solid #DDD6FE', borderRadius: 14, padding: 18, position: 'relative', overflow: 'hidden' }}>
                <div style={{ position: 'absolute', top: -30, right: -30, width: 120, height: 120, background: 'radial-gradient(circle, rgba(167,139,250,0.2), transparent)', borderRadius: 999 }}/>
                <div style={{ position: 'relative' }}>
                  <div className="flex items-center justify-between" style={{ marginBottom: 10 }}>
                    <div className="flex items-center gap-2">
                      <div style={{ width: 28, height: 28, borderRadius: 8, background: 'linear-gradient(135deg, #A78BFA, #8B5CF6)', color: 'white', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                        <Icon name="sparkles" size={14}/>
                      </div>
                      <div>
                        <div style={{ fontFamily: 'Poppins', fontWeight: 700, fontSize: 13 }}>Correction IA · Claude Haiku</div>
                        <div style={{ fontSize: 11, color: '#6D28D9' }}>Confiance : <b>87%</b> · Basée sur la grille de notation</div>
                      </div>
                    </div>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                      <div className="t-label" style={{ color: '#6D28D9' }}>Note proposée</div>
                      <div style={{ fontFamily: 'Poppins', fontSize: 20, fontWeight: 800, color: '#6D28D9' }}>4.0<span style={{ fontSize: 12, color: '#A78BFA' }}>/5</span></div>
                    </div>
                  </div>
                  <div style={{ fontFamily: 'Inter', fontSize: 13, lineHeight: 1.6, color: '#1F1038', whiteSpace: 'pre-line', minHeight: 120 }}>
                    {displayed}
                    {aiTyping && <span style={{ display: 'inline-block', width: 2, height: 14, background: '#8B5CF6', marginLeft: 2, verticalAlign: 'middle', animation: 'typingBlink 0.8s infinite' }}/>}
                  </div>
                  {!aiTyping && (
                    <div className="flex gap-2" style={{ marginTop: 14, paddingTop: 14, borderTop: '1px solid #DDD6FE' }}>
                      <button onClick={() => { setDecision('valid'); setScore(15.5); }} className="btn btn-sm" style={{ background: decision === 'valid' ? '#10B981' : 'white', color: decision === 'valid' ? 'white' : '#047857', border: '1px solid #10B981' }}>
                        <Icon name="check" size={14}/> Valider (4.0/5)
                      </button>
                      <button onClick={() => { setDecision('modify'); setScore(14.5); }} className="btn btn-sm" style={{ background: decision === 'modify' ? '#F5C842' : 'white', color: decision === 'modify' ? 'white' : '#B45309', border: '1px solid #F5C842' }}>
                        <Icon name="edit" size={14}/> Modifier
                      </button>
                      <button onClick={() => { setDecision('reject'); }} className="btn btn-sm" style={{ background: decision === 'reject' ? '#EF4444' : 'white', color: decision === 'reject' ? 'white' : '#B91C1C', border: '1px solid #EF4444' }}>
                        <Icon name="x" size={14}/> Rejeter
                      </button>
                      <button onClick={() => { setAiTyping(true); setDisplayed(''); }} className="btn btn-ghost btn-sm" style={{ marginLeft: 'auto' }}><Icon name="refresh" size={14}/> Régénérer</button>
                    </div>
                  )}
                  {decision === 'modify' && (
                    <div style={{ marginTop: 12, padding: 12, background: 'white', borderRadius: 10, border: '1px solid #F5C842' }}>
                      <div className="t-label" style={{ color: '#B45309', marginBottom: 6 }}>Votre note ajustée</div>
                      <div className="flex gap-2">
                        {[2.0, 2.5, 3.0, 3.5, 4.0, 4.5, 5.0].map(n => (
                          <button key={n} onClick={() => setScore(10 + n)} style={{ padding: '6px 12px', borderRadius: 999, border: '1px solid ' + (score === 10 + n ? '#F5C842' : '#E2E8F0'), background: score === 10 + n ? '#FEF9E7' : 'white', fontFamily: 'Poppins', fontWeight: 600, fontSize: 13, cursor: 'pointer' }}>{n}</button>
                        ))}
                      </div>
                    </div>
                  )}
                </div>
              </div>

              {/* Teacher comment */}
              <div style={{ marginTop: 14 }}>
                <div className="t-label" style={{ color: '#64748B', marginBottom: 6 }}>Commentaire enseignant (privé)</div>
                <textarea className="input" rows="2" placeholder="Ajoutez un commentaire visible par l’étudiant·e…" defaultValue="Bonne analyse, pensez à approfondir le rôle du Sénat la prochaine fois."/>
              </div>
            </div>

            {/* Sticky bar */}
            <div className="card" style={{ padding: 12, display: 'flex', alignItems: 'center', justifyContent: 'space-between', position: 'sticky', bottom: 16 }}>
              <button className="btn btn-secondary btn-sm"><Icon name="arrowLeft" size={14}/> Question précédente</button>
              <div style={{ fontFamily: 'JetBrains Mono', fontSize: 13, fontWeight: 700 }}>Q5 / 12</div>
              <div className="flex gap-2">
                <button className="btn btn-ghost btn-sm">Question suivante <Icon name="arrowRight" size={14}/></button>
                <a href="#/prof/results/ev-301" className="btn btn-primary-prof btn-sm">Finaliser la copie</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </ProfShell>
  );
};

// 1.6 — Résultats & reporting
const ProfResults = () => {
  const D = window.STUDYHUB_DATA;
  const [selectedStudent, setSelectedStudent] = React.useState(null);
  const distribution = [2, 3, 5, 8, 12, 18, 14, 9, 5, 2]; // 20 students across bins
  const maxV = Math.max(...distribution);
  const kpis = [
    { label: 'Moyenne générale', val: '13,8', sub: '/20 · +0,4 vs dernière promo', color: '#6ECFB5' },
    { label: 'Taux de réussite', val: '84%', sub: '≥ 10/20 · 35/42 étudiants', color: '#10B981' },
    { label: 'Copies corrigées', val: '42/42', sub: '100% · Session close', color: '#A78BFA' },
    { label: 'Temps moyen', val: '38 min', sub: 'Max : 1h · Durée allouée : 1h', color: '#F5C842' },
  ];

  return (
    <ProfShell active="results">
      <div style={{ padding: '24px 32px' }}>
        <div className="flex items-center gap-2 t-small" style={{ color: '#64748B', marginBottom: 6 }}>
          <a href="#/prof">Tableau de bord</a> <Icon name="chevronRight" size={12}/> Résultats
        </div>
        <div className="flex items-center justify-between" style={{ marginBottom: 16 }}>
          <div>
            <h1 className="t-h1">Microéconomie — Élasticité de la demande</h1>
            <div className="t-small" style={{ color: '#64748B' }}>L2 Éco · 42 copies · Corrigée le 10 avril 2026</div>
          </div>
          <div className="flex gap-2">
            <button className="btn btn-secondary btn-sm"><Icon name="download" size={14}/> Export PDF</button>
            <button className="btn btn-secondary btn-sm"><Icon name="download" size={14}/> Export CSV</button>
          </div>
        </div>

        {/* Filters */}
        <div className="card" style={{ padding: 14, marginBottom: 16, display: 'flex', gap: 10, alignItems: 'center', flexWrap: 'wrap' }}>
          <span className="t-label" style={{ color: '#64748B' }}>Filtres</span>
          <select className="input" style={{ width: 200, padding: '8px 10px', fontSize: 13 }}><option>Toutes les évaluations</option></select>
          <select className="input" style={{ width: 160, padding: '8px 10px', fontSize: 13 }}><option>Tous les campus</option></select>
          <select className="input" style={{ width: 160, padding: '8px 10px', fontSize: 13 }}><option>Tous les groupes</option></select>
          <select className="input" style={{ width: 140, padding: '8px 10px', fontSize: 13 }}><option>Ce semestre</option></select>
        </div>

        {/* KPIs */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16, marginBottom: 20 }}>
          {kpis.map((k, i) => (
            <div key={i} className="card" style={{ padding: 18, borderTop: `3px solid ${k.color}` }}>
              <div className="t-label" style={{ color: '#64748B', marginBottom: 8 }}>{k.label}</div>
              <div style={{ fontFamily: 'Poppins', fontSize: 32, fontWeight: 800, letterSpacing: '-0.02em', color: '#1A1A2E' }}>{k.val}</div>
              <div style={{ fontSize: 12, color: '#64748B', marginTop: 4 }}>{k.sub}</div>
            </div>
          ))}
        </div>

        {/* Chart + heatmap */}
        <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 16, marginBottom: 20 }}>
          <div className="card" style={{ padding: 20 }}>
            <div className="flex items-center justify-between" style={{ marginBottom: 14 }}>
              <h3 className="t-h3">Distribution des notes</h3>
              <div className="flex gap-2">
                <span className="badge badge-f1"><div style={{ width: 8, height: 8, borderRadius: 2, background: '#6ECFB5' }}/> L2 Éco</span>
                <span className="badge badge-gray"><div style={{ width: 8, height: 8, borderRadius: 2, background: '#94A3B8' }}/> Moyenne historique</span>
              </div>
            </div>
            <div style={{ height: 220, display: 'flex', alignItems: 'flex-end', gap: 8, padding: '0 12px' }}>
              {distribution.map((v, i) => (
                <div key={i} style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6 }}>
                  <div style={{ fontFamily: 'JetBrains Mono', fontSize: 10, fontWeight: 600, color: '#64748B' }}>{v}</div>
                  <div style={{ width: '100%', height: `${(v/maxV)*180}px`, background: i >= 5 ? 'linear-gradient(180deg, #6ECFB5, #4DB8A0)' : 'linear-gradient(180deg, #FECACA, #F87171)', borderRadius: '6px 6px 0 0', position: 'relative' }}>
                    <div style={{ position: 'absolute', left: '50%', bottom: 0, width: 2, height: '60%', background: 'rgba(148,163,184,0.5)' }}/>
                  </div>
                  <div style={{ fontFamily: 'JetBrains Mono', fontSize: 10, color: '#94A3B8' }}>{i*2}</div>
                </div>
              ))}
            </div>
            <div className="flex items-center justify-between t-small" style={{ color: '#64748B', marginTop: 8 }}>
              <span>Médiane : <b style={{ color: '#1A1A2E' }}>14,0</b></span>
              <span>Écart-type : <b style={{ color: '#1A1A2E' }}>3,2</b></span>
              <span>Min : <b>6,5</b></span>
              <span>Max : <b>19,5</b></span>
            </div>
          </div>

          <div className="card" style={{ padding: 20 }}>
            <h3 className="t-h3" style={{ marginBottom: 14 }}>Taux de réussite par question</h3>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
              {[
                { q: 'Q1', topic: 'Définition élasticité', pct: 92 },
                { q: 'Q2', topic: 'Élasticité-prix directe', pct: 78 },
                { q: 'Q3', topic: 'Bien Giffen (question ouverte)', pct: 45 },
                { q: 'Q4', topic: 'Calcul numérique', pct: 71 },
                { q: 'Q5', topic: 'Élasticité croisée', pct: 64 },
                { q: 'Q6', topic: 'Courbe de demande', pct: 88 },
                { q: 'Q7', topic: 'Cas pratique (rédaction)', pct: 56 },
              ].map((r, i) => {
                const color = r.pct >= 75 ? '#10B981' : r.pct >= 50 ? '#F5C842' : '#EF4444';
                return (
                  <div key={i} className="flex items-center gap-3">
                    <div style={{ fontFamily: 'JetBrains Mono', fontSize: 12, fontWeight: 700, color: '#64748B', width: 26 }}>{r.q}</div>
                    <div style={{ flex: 1, fontSize: 12 }}>{r.topic}</div>
                    <div style={{ width: 120, height: 8, background: '#F1F5F9', borderRadius: 4, overflow: 'hidden' }}>
                      <div style={{ height: '100%', width: `${r.pct}%`, background: color }}/>
                    </div>
                    <div style={{ width: 36, textAlign: 'right', fontFamily: 'JetBrains Mono', fontSize: 12, fontWeight: 700, color }}>{r.pct}%</div>
                  </div>
                );
              })}
            </div>
          </div>
        </div>

        {/* Table */}
        <div className="card" style={{ padding: 0, overflow: 'hidden' }}>
          <div className="flex items-center justify-between" style={{ padding: '14px 20px', borderBottom: '1px solid #E2E8F0' }}>
            <h3 className="t-h3">Tableau détaillé · Étudiants × Questions</h3>
            <button className="btn btn-ghost btn-sm"><Icon name="filter" size={14}/> Trier</button>
          </div>
          <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 13 }}>
            <thead>
              <tr style={{ background: '#F8FAFC', textAlign: 'left' }}>
                <th style={{ padding: '10px 20px', fontFamily: 'Poppins', fontSize: 11, color: '#64748B', textTransform: 'uppercase', letterSpacing: '0.08em' }}>Étudiant</th>
                {[1,2,3,4,5,6,7].map(q => <th key={q} style={{ padding: '10px 4px', fontFamily: 'JetBrains Mono', fontSize: 11, color: '#64748B', textAlign: 'center' }}>Q{q}</th>)}
                <th style={{ padding: '10px 20px', fontFamily: 'Poppins', fontSize: 11, color: '#64748B', textTransform: 'uppercase', letterSpacing: '0.08em', textAlign: 'right' }}>Note</th>
                <th/>
              </tr>
            </thead>
            <tbody>
              {D.students.slice(0, 8).map((s, i) => {
                const marks = [0.9, 0.7, 0.4, 0.85, 0.6, 1.0, 0.55].map(p => Math.random() > 0.3 ? p : Math.random() * 0.5);
                return (
                  <tr key={s.id} onClick={() => setSelectedStudent(s)} style={{ borderBottom: '1px solid #F1F5F9', cursor: 'pointer', transition: 'background 0.15s' }}
                      onMouseEnter={e => e.currentTarget.style.background = '#F8FAFC'}
                      onMouseLeave={e => e.currentTarget.style.background = 'transparent'}>
                    <td style={{ padding: '10px 20px' }}>
                      <div className="flex items-center gap-2">
                        <Avatar name={s.name} size={28}/>
                        <span style={{ fontWeight: 500 }}>{s.name}</span>
                      </div>
                    </td>
                    {marks.map((m, k) => (
                      <td key={k} style={{ padding: '4px 2px', textAlign: 'center' }}>
                        <div style={{ width: 28, height: 28, margin: '0 auto', borderRadius: 6, background: `rgba(${m >= 0.75 ? '16,185,129' : m >= 0.5 ? '245,200,66' : '239,68,68'}, ${0.3 + m * 0.5})`, display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'JetBrains Mono', fontSize: 10, fontWeight: 700, color: m >= 0.5 ? '#0F172A' : '#7F1D1D' }}>
                          {Math.round(m * 100)}
                        </div>
                      </td>
                    ))}
                    <td style={{ padding: '10px 20px', textAlign: 'right', fontFamily: 'Poppins', fontWeight: 700 }}>{s.score}/20</td>
                    <td style={{ padding: '10px 20px' }}><Icon name="chevronRight" size={14} style={{ color: '#CBD5E1' }}/></td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      </div>

      {/* Side panel student */}
      {selectedStudent && (
        <div style={{ position: 'fixed', inset: 0, background: 'rgba(15,23,41,0.35)', zIndex: 100 }} onClick={() => setSelectedStudent(null)}>
          <div className="slide-right" style={{ position: 'absolute', right: 0, top: 0, bottom: 0, width: 460, background: 'white', boxShadow: '-20px 0 60px rgba(0,0,0,0.2)', overflowY: 'auto' }} onClick={e => e.stopPropagation()}>
            <div style={{ padding: 24 }}>
              <div className="flex items-center justify-between" style={{ marginBottom: 20 }}>
                <div className="t-label" style={{ color: '#64748B' }}>Fiche étudiant</div>
                <button className="btn btn-ghost btn-sm" onClick={() => setSelectedStudent(null)} style={{ padding: 6 }}><Icon name="x" size={16}/></button>
              </div>
              <div className="flex items-center gap-3" style={{ marginBottom: 20 }}>
                <Avatar name={selectedStudent.name} size={56}/>
                <div>
                  <div style={{ fontFamily: 'Poppins', fontWeight: 700, fontSize: 18 }}>{selectedStudent.name}</div>
                  <div className="t-small" style={{ color: '#64748B' }}>L2 Éco · sor.{selectedStudent.name.toLowerCase().replace(/ /g, '.')}@sorbonne.fr</div>
                </div>
              </div>
              <div className="card" style={{ padding: 16, marginBottom: 14, background: 'linear-gradient(135deg, #F0FDF9, #E6FBF4)', border: '1px solid #A7EDD8' }}>
                <div className="flex items-center justify-between">
                  <div>
                    <div className="t-label" style={{ color: '#047857' }}>Note finale</div>
                    <div style={{ fontFamily: 'Poppins', fontWeight: 800, fontSize: 36, color: '#047857', lineHeight: 1 }}>{selectedStudent.score}<span style={{ fontSize: 18 }}>/20</span></div>
                  </div>
                  <div style={{ textAlign: 'right' }}>
                    <div className="t-label" style={{ color: '#64748B' }}>Rang</div>
                    <div style={{ fontFamily: 'Poppins', fontWeight: 700, fontSize: 22 }}>7<sup>e</sup><span style={{ fontSize: 14, color: '#64748B' }}>/42</span></div>
                  </div>
                </div>
              </div>
              <div className="t-label" style={{ color: '#64748B', marginBottom: 8 }}>Historique (4 dernières évaluations)</div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginBottom: 20 }}>
                {[
                  ['Microéco — Élasticité', 15.5, '10 avril'],
                  ['Algo — Récursivité', 14.0, '28 mars'],
                  ['Anglais B2 — Oral', 16.5, '15 mars'],
                  ['Micro — Concurrence', 13.0, '01 mars'],
                ].map(([t, sc, d], i) => (
                  <div key={i} className="flex items-center justify-between" style={{ padding: 10, borderRadius: 10, border: '1px solid #E2E8F0' }}>
                    <div>
                      <div style={{ fontSize: 13, fontWeight: 500 }}>{t}</div>
                      <div style={{ fontSize: 11, color: '#94A3B8' }}>{d}</div>
                    </div>
                    <div style={{ fontFamily: 'Poppins', fontWeight: 700, color: sc >= 14 ? '#047857' : '#B45309' }}>{sc}/20</div>
                  </div>
                ))}
              </div>
              <div className="t-label" style={{ color: '#64748B', marginBottom: 8 }}>Points forts · À travailler</div>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
                <div className="card" style={{ padding: 12, borderLeft: '3px solid #10B981', background: '#F0FDF9' }}>
                  <div className="t-label" style={{ color: '#047857' }}>Points forts</div>
                  <ul style={{ margin: '6px 0 0 14px', padding: 0, fontSize: 12, color: '#064E3B' }}>
                    <li>Calculs numériques</li>
                    <li>Définitions</li>
                    <li>Courbes & lecture de graphe</li>
                  </ul>
                </div>
                <div className="card" style={{ padding: 12, borderLeft: '3px solid #F5C842', background: '#FEF9E7' }}>
                  <div className="t-label" style={{ color: '#B45309' }}>À travailler</div>
                  <ul style={{ margin: '6px 0 0 14px', padding: 0, fontSize: 12, color: '#78350F' }}>
                    <li>Cas pratiques rédigés</li>
                    <li>Bien Giffen</li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
      )}
    </ProfShell>
  );
};

Object.assign(window, { WizardStep1, WizardStep2, ProfCorrection, ProfResults });