// Parcours 1 — Enseignant

// Shared prof shell (sidebar + topbar)
const ProfShell = ({ active, children, onNavigate }) => {
  const nav = [
    { id: 'dashboard', label: 'Tableau de bord', icon: 'home', route: '#/prof' },
    { id: 'evals', label: 'Évaluations', icon: 'files', route: '#/prof/evaluations' },
    { id: 'groups', label: 'Groupes', icon: 'layers', route: '#/prof' },
    { id: 'students', label: 'Étudiants', icon: 'users', route: '#/prof' },
    { id: 'results', label: 'Résultats', icon: 'chart', route: '#/prof/results/ev-301' },
    { id: 'ai', label: 'Génération IA', icon: 'sparkles', route: '#/prof' },
    { id: 'settings', label: 'Paramètres', icon: 'settings', route: '#/prof' },
  ];
  const D = window.STUDYHUB_DATA;
  return (
    <div style={{ display: 'flex', minHeight: '100vh', background: '#F8F7FF' }}>
      <aside className="sidebar">
        <div className="sidebar-logo">
          <Logo size="md" variant="prof"/>
        </div>
        <div style={{ padding: '8px 16px 12px' }}>
          <a href="#/prof/wizard/1" className="btn btn-primary-prof btn-sm" style={{ width: '100%' }}>
            <Icon name="plus" size={14}/> Nouvelle évaluation
          </a>
        </div>
        <nav className="sidebar-nav">
          {nav.map(n => (
            <a key={n.id} href={n.route} className={'sidebar-item ' + (active === n.id ? 'active' : '')}>
              <Icon name={n.icon} size={16}/> {n.label}
            </a>
          ))}
        </nav>
        <div style={{ padding: 12, borderTop: '1px solid #E2E8F0', display: 'flex', alignItems: 'center', gap: 10 }}>
          <Avatar name={D.prof.name} size={36}/>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontSize: 13, fontWeight: 600, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{D.prof.name}</div>
            <div style={{ fontSize: 11, color: '#94A3B8' }}>{D.prof.role}</div>
          </div>
          <a href="#/" title="Se déconnecter" style={{ color: '#94A3B8' }}><Icon name="logout" size={16}/></a>
        </div>
      </aside>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div className="topbar">
          <a href="#/" style={{ color: '#94A3B8' }}><Icon name="chevronLeft" size={18}/></a>
          <div style={{ position: 'relative', flex: 1, maxWidth: 420 }}>
            <Icon name="search" size={14} style={{ position: 'absolute', left: 12, top: 11, color: '#94A3B8' }}/>
            <input className="input" placeholder="Rechercher étudiants, évaluations, groupes…" style={{ paddingLeft: 36 }}/>
          </div>
          <div className="flex items-center gap-3">
            <select className="input" style={{ width: 200, padding: '8px 10px', fontSize: 13 }}>
              <option>Tous les campus</option><option>Paris — Sorbonne</option><option>Lyon — La Doua</option>
            </select>
            <button className="btn btn-ghost btn-sm" style={{ position: 'relative', padding: 8 }}>
              <Icon name="bell" size={18}/>
              <span style={{ position: 'absolute', top: 4, right: 4, width: 8, height: 8, borderRadius: 999, background: '#EF4444', border: '2px solid white' }}/>
            </button>
            <Avatar name={D.prof.name} size={32}/>
          </div>
        </div>
        <main className="fade-in">{children}</main>
      </div>
    </div>
  );
};

// 1.1 — Login enseignant
const ProfLogin = () => (
  <div style={{ display: 'grid', gridTemplateColumns: '1.05fr 1fr', minHeight: '100vh' }}>
    <div style={{ background: 'linear-gradient(135deg, #1E1B4B 0%, #4C1D95 50%, #5B21B6 100%)', position: 'relative', overflow: 'hidden', padding: 48, display: 'flex', flexDirection: 'column', justifyContent: 'space-between', color: 'white' }}>
      <div style={{ position: 'absolute', top: -80, right: -80, width: 300, height: 300, borderRadius: 999, background: 'radial-gradient(circle, rgba(167,139,250,0.35), transparent 70%)' }}/>
      <div style={{ position: 'absolute', bottom: -120, left: -80, width: 360, height: 360, borderRadius: 999, background: 'radial-gradient(circle, rgba(110,207,181,0.25), transparent 70%)' }}/>
      <div style={{ position: 'relative', zIndex: 2 }}>
        <Logo size="lg"/>
        <span className="badge" style={{ marginTop: 20, background: 'rgba(255,255,255,0.12)', color: 'white', backdropFilter: 'blur(10px)' }}>
          <Icon name="shield" size={11}/> Établissement pilote
        </span>
      </div>
      <div style={{ position: 'relative', zIndex: 2, textAlign: 'center' }}>
        <img src="assets/prof2.png" style={{ width: 280, margin: '0 auto 20px', filter: 'drop-shadow(0 20px 40px rgba(0,0,0,0.3))' }}/>
        <h2 className="t-h2" style={{ fontSize: 28, marginBottom: 12, maxWidth: 440, margin: '0 auto 12px' }}>Concevez, corrigez, analysez — sans quitter l’interface.</h2>
        <p style={{ color: '#C7D2FE', fontSize: 15, maxWidth: 380, margin: '0 auto', lineHeight: 1.6 }}>
          StudyHub centralise vos évaluations, vos copies et vos analytiques. L’IA assiste la correction des rédactions — vous gardez toujours le dernier mot.
        </p>
      </div>
      <div style={{ position: 'relative', zIndex: 2, fontSize: 12, color: '#A5B4FC' }}>© 2026 StudyHub · v1.0 pilote</div>
    </div>
    <div style={{ padding: 48, display: 'flex', flexDirection: 'column', justifyContent: 'center', background: 'white' }}>
      <div style={{ maxWidth: 400, margin: '0 auto', width: '100%' }}>
        <div className="t-label" style={{ color: '#6ECFB5', marginBottom: 10 }}>Espace enseignant</div>
        <h1 className="t-h1" style={{ marginBottom: 8 }}>Bon retour parmi nous.</h1>
        <p className="t-body" style={{ color: '#64748B', marginBottom: 32 }}>Connectez-vous pour accéder à vos évaluations et vos groupes.</p>
        <form onSubmit={e => { e.preventDefault(); location.hash = '#/prof'; }}>
          <div style={{ marginBottom: 16 }}>
            <label className="t-label" style={{ display: 'block', marginBottom: 6, color: '#64748B' }}>Email professionnel</label>
            <div style={{ position: 'relative' }}>
              <Icon name="mail" size={16} style={{ position: 'absolute', left: 12, top: 12, color: '#94A3B8' }}/>
              <input className="input" defaultValue="e.marceau@studyhub.fr" style={{ paddingLeft: 38 }}/>
            </div>
          </div>
          <div style={{ marginBottom: 12 }}>
            <label className="t-label" style={{ display: 'block', marginBottom: 6, color: '#64748B' }}>Mot de passe</label>
            <div style={{ position: 'relative' }}>
              <Icon name="lock" size={16} style={{ position: 'absolute', left: 12, top: 12, color: '#94A3B8' }}/>
              <input className="input" type="password" defaultValue="••••••••••" style={{ paddingLeft: 38, paddingRight: 40 }}/>
              <Icon name="eye" size={16} style={{ position: 'absolute', right: 12, top: 12, color: '#94A3B8', cursor: 'pointer' }}/>
            </div>
          </div>
          <label style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 24, cursor: 'pointer' }}>
            <div style={{ width: 36, height: 20, borderRadius: 999, background: '#6ECFB5', position: 'relative', transition: 'all 0.2s' }}>
              <div style={{ position: 'absolute', right: 2, top: 2, width: 16, height: 16, borderRadius: 999, background: 'white' }}/>
            </div>
            <span className="t-small" style={{ color: '#1A1A2E' }}>Activer la double authentification (2FA)</span>
          </label>
          <button type="submit" className="btn btn-primary-prof btn-lg" style={{ width: '100%', marginBottom: 16 }}>Se connecter</button>
          <div className="flex justify-between">
            <a href="#" className="t-small" style={{ color: '#6ECFB5', fontWeight: 500 }}>Mot de passe oublié ?</a>
            <a href="#/etudiant/login" className="t-small" style={{ color: '#64748B' }}>Je suis étudiant →</a>
          </div>
        </form>
      </div>
    </div>
  </div>
);

// 1.2 — Dashboard enseignant
const ProfDashboardHome = () => {
  const D = window.STUDYHUB_DATA;
  const stats = [
    { label: 'Évaluations actives', val: '12', spark: [3, 5, 4, 6, 8, 7, 9, 12], color: '#6ECFB5', delta: '+3 cette semaine' },
    { label: 'Copies à corriger', val: '47', spark: [20, 32, 28, 40, 35, 42, 38, 47], color: '#F5C842', delta: '+12 vs hier' },
    { label: 'Moyenne groupes', val: '13,8', spark: [12, 13, 13.5, 12.8, 13.2, 14, 13.5, 13.8], color: '#A78BFA', delta: '/20' },
    { label: 'Étudiants actifs', val: '214', spark: [180, 190, 195, 200, 205, 210, 212, 214], color: '#60A5FA', delta: '94% présence' },
  ];
  const toCorrect = [
    { id: 1, student: 'Chloé Lefèvre', eval: 'Droit constitutionnel — Vème Rép.', ai: true, time: 'il y a 12 min' },
    { id: 2, student: 'Marouane El Ayoubi', eval: 'Droit constitutionnel — Vème Rép.', ai: true, time: 'il y a 34 min' },
    { id: 3, student: 'Yanis Benzema', eval: 'Algorithmique — Complexité', ai: false, time: 'il y a 2h' },
    { id: 4, student: 'Inès Ferreira', eval: 'Anglais B2 — Business', ai: true, time: 'il y a 3h' },
  ];
  const statusChip = (s) => {
    const map = {
      'en-cours': { label: 'En cours', cls: 'badge-green' },
      'brouillon': { label: 'Brouillon', cls: 'badge-gray' },
      'a-corriger': { label: 'À corriger', cls: 'badge-amber' },
      'terminee': { label: 'Terminée', cls: 'badge-f5' },
    };
    const m = map[s];
    return <span className={'badge ' + m.cls}>{m.label}</span>;
  };

  return (
    <ProfShell active="dashboard">
      <div style={{ padding: '28px 32px' }}>
        <div className="flex items-center justify-between" style={{ marginBottom: 8 }}>
          <div>
            <div className="t-small" style={{ color: '#64748B' }}>Bonjour Élodie, mercredi 22 avril</div>
            <h1 className="t-h1">Tableau de bord</h1>
          </div>
          <div className="flex gap-2">
            <button className="btn btn-secondary btn-sm"><Icon name="download" size={14}/> Exporter</button>
            <a href="#/prof/wizard/1" className="btn btn-primary-prof btn-sm"><Icon name="plus" size={14}/> Nouvelle évaluation</a>
          </div>
        </div>

        {/* Stat cards */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16, marginTop: 20, marginBottom: 24 }}>
          {stats.map((s, i) => (
            <div key={i} className="card card-hover" style={{ padding: 18, borderTop: `3px solid ${s.color}` }}>
              <div className="flex items-center justify-between" style={{ marginBottom: 8 }}>
                <div className="t-label" style={{ color: '#64748B' }}>{s.label}</div>
                <Sparkline data={s.spark} color={s.color} width={60} height={20}/>
              </div>
              <div style={{ fontFamily: 'Poppins', fontSize: 32, fontWeight: 800, letterSpacing: '-0.02em', lineHeight: 1 }}>{s.val}</div>
              <div className="t-small" style={{ color: s.color, marginTop: 6, fontWeight: 500 }}>{s.delta}</div>
            </div>
          ))}
        </div>

        {/* Eval + to-correct grid */}
        <div style={{ display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: 20 }}>
          <div>
            <div className="flex items-center justify-between" style={{ marginBottom: 14 }}>
              <h3 className="t-h3">Évaluations récentes</h3>
              <a href="#" className="t-small" style={{ color: '#6ECFB5' }}>Voir tout →</a>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
              {D.evaluations.map(ev => {
                const fam = D.famMap[ev.fam];
                return (
                  <div key={ev.id} className="card card-hover" style={{ padding: 18, display: 'flex', alignItems: 'center', gap: 16 }}>
                    <div style={{ width: 48, height: 48, borderRadius: 12, background: 'linear-gradient(135deg, #F0FDF9, #E6FBF4)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                      <Icon name="file" size={20} style={{ color: '#6ECFB5' }}/>
                    </div>
                    <div style={{ flex: 1, minWidth: 0 }}>
                      <div className="flex items-center gap-2" style={{ marginBottom: 4 }}>
                        <span className={'badge ' + fam.cls}>{fam.label}</span>
                        {statusChip(ev.status)}
                      </div>
                      <div style={{ fontFamily: 'Poppins', fontWeight: 600, fontSize: 15, marginBottom: 2 }}>{ev.title}</div>
                      <div className="t-small" style={{ color: '#64748B' }}>
                        {ev.group} · {ev.students} étudiants · {ev.duration} · Échéance {ev.due}
                      </div>
                    </div>
                    <div style={{ textAlign: 'right', minWidth: 100 }}>
                      {ev.status === 'en-cours' && <>
                        <div style={{ fontFamily: 'Poppins', fontWeight: 700, fontSize: 14 }}>{ev.done}/{ev.total}</div>
                        <div style={{ height: 4, background: '#F1F5F9', borderRadius: 4, overflow: 'hidden', marginTop: 4 }}>
                          <div style={{ height: '100%', width: `${(ev.done/ev.total)*100}%`, background: '#6ECFB5' }}/>
                        </div>
                      </>}
                      {ev.status === 'a-corriger' && <a href="#/prof/correction/ev-309" className="btn btn-sm" style={{ background: '#FEF3C7', color: '#B45309' }}>Corriger</a>}
                      {ev.status === 'brouillon' && <a href="#/prof/wizard/1" className="btn btn-secondary btn-sm">Reprendre</a>}
                      {ev.status === 'terminee' && <a href="#/prof/results/ev-301" className="btn btn-secondary btn-sm">Résultats</a>}
                    </div>
                  </div>
                );
              })}
            </div>
          </div>

          <div>
            <div className="flex items-center justify-between" style={{ marginBottom: 14 }}>
              <h3 className="t-h3">À corriger <span style={{ color: '#EF4444', marginLeft: 4 }}>(4)</span></h3>
            </div>
            <div className="card" style={{ padding: 8, marginBottom: 16 }}>
              {toCorrect.map((t, i) => (
                <a key={t.id} href="#/prof/correction/ev-309" style={{ display: 'flex', gap: 12, padding: 12, borderRadius: 10, alignItems: 'center', borderBottom: i < toCorrect.length - 1 ? '1px solid #F1F5F9' : 'none', transition: 'all 0.15s' }}
                   onMouseEnter={e => e.currentTarget.style.background = '#F8FAFC'}
                   onMouseLeave={e => e.currentTarget.style.background = 'transparent'}>
                  <Avatar name={t.student} size={36}/>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontWeight: 600, fontSize: 13, marginBottom: 2 }}>{t.student}</div>
                    <div style={{ fontSize: 12, color: '#64748B', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{t.eval}</div>
                    <div className="flex gap-2" style={{ marginTop: 4 }}>
                      {t.ai && <span className="badge badge-ai"><Icon name="sparkles" size={10}/> IA suggérée</span>}
                      <span style={{ fontSize: 11, color: '#94A3B8' }}>{t.time}</span>
                    </div>
                  </div>
                  <Icon name="chevronRight" size={16} style={{ color: '#CBD5E1' }}/>
                </a>
              ))}
            </div>

            {/* AI widget */}
            <div style={{ background: 'linear-gradient(135deg, #A78BFA15, #8B5CF608)', border: '1px solid #DDD6FE', borderRadius: 16, padding: 20, position: 'relative', overflow: 'hidden' }}>
              <div style={{ position: 'absolute', top: -10, right: -10, width: 80, height: 80, background: 'radial-gradient(circle, rgba(167,139,250,0.25), transparent)', borderRadius: 999 }}/>
              <div style={{ display: 'flex', gap: 12, alignItems: 'flex-start', position: 'relative' }}>
                <div style={{ width: 36, height: 36, borderRadius: 10, background: 'linear-gradient(135deg, #A78BFA, #8B5CF6)', color: 'white', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                  <Icon name="sparkles" size={18}/>
                </div>
                <div>
                  <div style={{ fontFamily: 'Poppins', fontWeight: 700, fontSize: 14, marginBottom: 4 }}>Générer une évaluation avec l’IA</div>
                  <div className="t-small" style={{ color: '#6D28D9', marginBottom: 12 }}>Téléversez un cours PDF, l’IA en extrait les concepts clés et propose 8 à 15 questions.</div>
                  <button className="btn btn-ai btn-sm"><Icon name="upload" size={14}/> Importer un PDF</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </ProfShell>
  );
};

window.ProfLogin = ProfLogin;
window.ProfDashboardHome = ProfDashboardHome;
window.ProfShell = ProfShell;