// Parcours 3 — Admin établissement

const AdminShell = ({ active, children }) => {
  const nav = [
    { id: 'dashboard', label: 'Vue d\'ensemble', icon: 'home', route: '#/admin' },
    { id: 'campus', label: 'Campus & groupes', icon: 'building', route: '#/admin/campus' },
    { id: 'teachers', label: 'Enseignants', icon: 'users', route: '#/admin/teachers' },
    { id: 'evals', label: 'Évaluations', icon: 'files', route: '#/admin' },
    { id: 'ai', label: 'Crédits IA', icon: 'sparkles', route: '#/admin' },
    { id: 'settings', label: 'Paramètres', icon: 'settings', route: '#/admin' },
  ];
  const D = window.STUDYHUB_DATA;
  return (
    <div style={{ display: 'flex', minHeight: '100vh', background: '#0F1729' }}>
      {/* Admin sidebar — dark */}
      <aside style={{ width: 240, background: '#1E2640', borderRight: '1px solid rgba(99,102,241,0.15)', display: 'flex', flexDirection: 'column', height: '100vh', position: 'sticky', top: 0, flexShrink: 0 }}>
        <div style={{ padding: '20px 20px 16px', display: 'flex', alignItems: 'center', gap: 10 }}>
          <Logo size="md" variant="admin"/>
        </div>
        <div style={{ padding: '4px 12px 12px' }}>
          <span className="badge" style={{ background: 'rgba(99,102,241,0.18)', color: '#A5B4FC', fontSize: 9 }}>
            <Icon name="shield" size={10}/> Admin établissement
          </span>
        </div>
        <nav style={{ padding: '8px 12px', flex: 1 }}>
          {nav.map(n => (
            <a key={n.id} href={n.route} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '10px 12px', borderRadius: 10, color: active === n.id ? '#A5B4FC' : '#64748B', fontFamily: 'Poppins', fontSize: 14, fontWeight: active === n.id ? 600 : 400, marginBottom: 2, background: active === n.id ? 'rgba(99,102,241,0.12)' : 'transparent', transition: 'all 0.15s', cursor: 'pointer' }}
               onMouseEnter={e => { if (active !== n.id) { e.currentTarget.style.background = 'rgba(255,255,255,0.04)'; e.currentTarget.style.color = '#94A3B8'; }}}
               onMouseLeave={e => { if (active !== n.id) { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.color = '#64748B'; }}}>
              <Icon name={n.icon} size={16}/> {n.label}
            </a>
          ))}
        </nav>
        <div style={{ padding: 12, borderTop: '1px solid rgba(255,255,255,0.06)', display: 'flex', alignItems: 'center', gap: 10 }}>
          <Avatar name={D.admin.name} size={36} variant="admin"/>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontSize: 13, fontWeight: 600, color: '#F1F5F9', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{D.admin.name}</div>
            <div style={{ fontSize: 11, color: '#64748B' }}>Admin · Sorbonne</div>
          </div>
          <a href="#/" title="Déconnexion" style={{ color: '#64748B' }}><Icon name="logout" size={16}/></a>
        </div>
      </aside>

      {/* Main content */}
      <div style={{ flex: 1, minWidth: 0, color: '#F1F5F9' }}>
        {/* Topbar */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 16, padding: '14px 28px', background: '#1E2640', borderBottom: '1px solid rgba(99,102,241,0.15)', position: 'sticky', top: 0, zIndex: 10 }}>
          <a href="#/" style={{ color: '#64748B' }}><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: '#64748B' }}/>
            <input style={{ width: '100%', padding: '8px 14px 8px 36px', background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(99,102,241,0.2)', borderRadius: 12, color: '#F1F5F9', fontSize: 14 }} placeholder="Rechercher campus, enseignant…"/>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <span className="badge" style={{ background: 'rgba(16,185,129,0.15)', color: '#6EE7B7' }}>
              <div style={{ width: 6, height: 6, borderRadius: 999, background: '#10B981' }}/> Système nominal
            </span>
            <button style={{ background: 'rgba(255,255,255,0.06)', border: '1px solid rgba(255,255,255,0.1)', borderRadius: 10, padding: '7px 10px', color: '#94A3B8', cursor: 'pointer', position: 'relative' }}>
              <Icon name="bell" size={18}/>
              <span style={{ position: 'absolute', top: 5, right: 5, width: 8, height: 8, borderRadius: 999, background: '#EF4444', border: '2px solid #1E2640' }}/>
            </button>
            <Avatar name={D.admin.name} size={32} variant="admin"/>
          </div>
        </div>
        <main className="fade-in">{children}</main>
      </div>
    </div>
  );
};

// 3.1 — Dashboard admin multi-campus
const AdminDashboard = () => {
  const D = window.STUDYHUB_DATA;
  const kpis = [
    { label: 'Étudiants inscrits', val: '8 640', delta: '+124 ce mois', color: '#6366F1', icon: 'users' },
    { label: 'Enseignants actifs', val: '403', delta: '97% activation', color: '#8B5CF6', icon: 'users' },
    { label: 'Évaluations du mois', val: '1 248', delta: '+18% vs N-1', color: '#F59E0B', icon: 'files' },
    { label: 'Crédits IA utilisés', val: '72%', delta: '28% restants', color: '#10B981', icon: 'sparkles' },
  ];
  const barMax = Math.max(...D.campuses.map(c => c.students));

  return (
    <AdminShell active="dashboard">
      <div style={{ padding: '28px 32px' }}>
        <div style={{ marginBottom: 8 }}>
          <div style={{ fontFamily: 'Inter', fontSize: 13, color: '#64748B' }}>Bonjour Jean-Philippe · Mercredi 24 avril 2026</div>
          <h1 className="t-h1" style={{ color: '#F1F5F9' }}>Vue d'ensemble</h1>
        </div>

        {/* KPIs */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16, marginTop: 20, marginBottom: 24 }}>
          {kpis.map((k, i) => (
            <div key={i} style={{ background: '#1E2640', border: '1px solid rgba(99,102,241,0.15)', borderRadius: 16, padding: 20, borderTop: `3px solid ${k.color}` }}>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 10 }}>
                <div className="t-label" style={{ color: '#64748B' }}>{k.label}</div>
                <div style={{ width: 32, height: 32, borderRadius: 10, background: `${k.color}20`, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                  <Icon name={k.icon} size={16} style={{ color: k.color }}/>
                </div>
              </div>
              <div style={{ fontFamily: 'Poppins', fontSize: 30, fontWeight: 800, letterSpacing: '-0.02em', color: '#F1F5F9', lineHeight: 1 }}>{k.val}</div>
              <div style={{ fontSize: 12, color: k.color, marginTop: 6, fontWeight: 500 }}>{k.delta}</div>
            </div>
          ))}
        </div>

        {/* Chart + campus list */}
        <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 20, marginBottom: 20 }}>
          {/* Bar chart */}
          <div style={{ background: '#1E2640', border: '1px solid rgba(99,102,241,0.15)', borderRadius: 16, padding: 22 }}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 20 }}>
              <h3 className="t-h3" style={{ color: '#F1F5F9' }}>Activité par campus</h3>
              <select style={{ background: '#252D47', border: '1px solid rgba(99,102,241,0.2)', borderRadius: 8, color: '#94A3B8', padding: '6px 10px', fontSize: 13 }}>
                <option>Ce mois</option><option>Ce semestre</option>
              </select>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
              {D.campuses.map(c => (
                <div key={c.id} style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                  <div style={{ width: 140, fontSize: 12, color: '#94A3B8', fontWeight: 500, flexShrink: 0 }}>{c.name.split('—')[0].trim()}</div>
                  <div style={{ flex: 1, height: 8, background: 'rgba(255,255,255,0.05)', borderRadius: 4, overflow: 'hidden' }}>
                    <div style={{ height: '100%', width: `${(c.students / barMax) * 100}%`, background: 'linear-gradient(90deg, #6366F1, #8B5CF6)', borderRadius: 4 }}/>
                  </div>
                  <div style={{ fontFamily: 'JetBrains Mono', fontSize: 12, color: '#A5B4FC', width: 50, textAlign: 'right' }}>{c.students.toLocaleString('fr-FR')}</div>
                </div>
              ))}
            </div>
          </div>

          {/* Activity feed */}
          <div style={{ background: '#1E2640', border: '1px solid rgba(99,102,241,0.15)', borderRadius: 16, padding: 22 }}>
            <h3 className="t-h3" style={{ color: '#F1F5F9', marginBottom: 16 }}>Activité récente</h3>
            {[
              { action: 'Nouvel enseignant activé', detail: 'Marie-Claire Dupont — Lyon', time: 'il y a 5 min', color: '#10B981', icon: 'check' },
              { action: 'Évaluation lancée', detail: 'Algo Récursivité — L2 Info Sorbonne', time: 'il y a 12 min', color: '#6366F1', icon: 'files' },
              { action: 'Crédits IA — seuil 75%', detail: 'Paris Sorbonne · Rechargement conseillé', time: 'il y a 1h', color: '#F59E0B', icon: 'sparkles' },
              { action: '14 copies corrigées automatiquement', detail: 'Microéco Élasticité — L2 Éco', time: 'il y a 2h', color: '#8B5CF6', icon: 'checkCircle' },
              { action: 'Import CSV — 28 étudiants', detail: 'Bordeaux Talence — L3 Droit', time: 'hier', color: '#A78BFA', icon: 'upload' },
            ].map((item, i) => (
              <div key={i} style={{ display: 'flex', gap: 12, padding: '10px 0', borderBottom: i < 4 ? '1px solid rgba(255,255,255,0.04)' : 'none', alignItems: 'flex-start' }}>
                <div style={{ width: 32, height: 32, borderRadius: 10, background: `${item.color}20`, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                  <Icon name={item.icon} size={14} style={{ color: item.color }}/>
                </div>
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 13, fontWeight: 600, color: '#E2E8F0' }}>{item.action}</div>
                  <div style={{ fontSize: 12, color: '#64748B' }}>{item.detail}</div>
                </div>
                <div style={{ fontSize: 11, color: '#475569', flexShrink: 0 }}>{item.time}</div>
              </div>
            ))}
          </div>
        </div>

        {/* Campus table */}
        <div style={{ background: '#1E2640', border: '1px solid rgba(99,102,241,0.15)', borderRadius: 16, overflow: 'hidden' }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '16px 20px', borderBottom: '1px solid rgba(99,102,241,0.1)' }}>
            <h3 className="t-h3" style={{ color: '#F1F5F9' }}>Campus</h3>
            <div style={{ display: 'flex', gap: 8 }}>
              <a href="#/admin/campus" className="btn btn-sm" style={{ background: 'rgba(99,102,241,0.12)', color: '#A5B4FC', border: '1px solid rgba(99,102,241,0.2)' }}>
                <Icon name="building" size={13}/> Gérer
              </a>
              <a href="#/admin/teachers" className="btn btn-primary-admin btn-sm">
                <Icon name="users" size={13}/> Inviter enseignants
              </a>
            </div>
          </div>
          <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 13 }}>
            <thead>
              <tr style={{ background: 'rgba(255,255,255,0.02)' }}>
                {['Campus', 'Étudiants', 'Enseignants', 'Évaluations', 'Statut'].map(h => (
                  <th key={h} style={{ padding: '10px 20px', fontFamily: 'Poppins', fontSize: 11, color: '#64748B', textTransform: 'uppercase', letterSpacing: '0.08em', textAlign: 'left' }}>{h}</th>
                ))}
              </tr>
            </thead>
            <tbody>
              {D.campuses.map((c, i) => (
                <tr key={c.id} style={{ borderTop: '1px solid rgba(255,255,255,0.04)', cursor: 'pointer', transition: 'background 0.15s' }}
                    onMouseEnter={e => e.currentTarget.style.background = 'rgba(99,102,241,0.05)'}
                    onMouseLeave={e => e.currentTarget.style.background = 'transparent'}>
                  <td style={{ padding: '12px 20px' }}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                      <div style={{ width: 34, height: 34, borderRadius: 10, background: `hsl(${220 + i * 30}, 60%, 30%)`, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                        <Icon name="mapPin" size={14} style={{ color: '#A5B4FC' }}/>
                      </div>
                      <div>
                        <div style={{ fontWeight: 600, color: '#E2E8F0' }}>{c.name}</div>
                      </div>
                    </div>
                  </td>
                  <td style={{ padding: '12px 20px', fontFamily: 'JetBrains Mono', color: '#A5B4FC', fontWeight: 600 }}>{c.students.toLocaleString('fr-FR')}</td>
                  <td style={{ padding: '12px 20px', fontFamily: 'JetBrains Mono', color: '#94A3B8' }}>{c.teachers}</td>
                  <td style={{ padding: '12px 20px', fontFamily: 'JetBrains Mono', color: '#94A3B8' }}>{c.evals}</td>
                  <td style={{ padding: '12px 20px' }}>
                    <span className="badge" style={{ background: 'rgba(16,185,129,0.15)', color: '#6EE7B7' }}>Actif</span>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </AdminShell>
  );
};

// 3.2 — Gestion Campus & Groupes
const AdminCampus = () => {
  const D = window.STUDYHUB_DATA;
  const [expandedCampus, setExpandedCampus] = React.useState('c1');
  const groups = {
    c1: ['L1 Droit · Cohorte A (32)', 'L1 Droit · Cohorte B (30)', 'L2 Info · Groupe A (28)', 'L2 Info · Groupe B (26)', 'L2 Éco (42)', 'M1 Management (22)'],
    c2: ['L1 Sciences · A (38)', 'L2 Chimie (24)', 'M2 Physique (18)'],
    c3: ['L3 Droit (28)', 'L1 Lettres (40)'],
    c4: ['L2 Math (35)', 'M1 Informatique (20)'],
    c5: ['L1 Biologie (30)', 'Master Océano (15)'],
  };

  return (
    <AdminShell active="campus">
      <div style={{ padding: '28px 32px' }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 24 }}>
          <div>
            <h1 className="t-h1" style={{ color: '#F1F5F9' }}>Campus & Groupes</h1>
            <div style={{ fontSize: 13, color: '#64748B', marginTop: 4 }}>Arborescence Établissement → Campus → Groupes</div>
          </div>
          <div style={{ display: 'flex', gap: 10 }}>
            <button className="btn btn-sm" style={{ background: 'rgba(255,255,255,0.06)', color: '#94A3B8', border: '1px solid rgba(255,255,255,0.1)' }}>
              <Icon name="upload" size={13}/> Import CSV
            </button>
            <button className="btn btn-primary-admin btn-sm">
              <Icon name="plus" size={13}/> Nouveau campus
            </button>
          </div>
        </div>

        {/* Arborescence */}
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20 }}>
          <div>
            <div style={{ display: 'flex', gap: 2, marginBottom: 12 }}>
              {['Arborescence', 'Tableau'].map((v, i) => (
                <button key={v} style={{ padding: '6px 16px', borderRadius: 8, background: i === 0 ? '#6366F1' : 'rgba(255,255,255,0.06)', color: i === 0 ? 'white' : '#64748B', border: 'none', fontFamily: 'Poppins', fontWeight: 600, fontSize: 13, cursor: 'pointer' }}>{v}</button>
              ))}
            </div>
            {D.campuses.map(c => (
              <div key={c.id} style={{ marginBottom: 8 }}>
                <div onClick={() => setExpandedCampus(expandedCampus === c.id ? null : c.id)}
                  style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '12px 16px', background: '#1E2640', border: `1px solid ${expandedCampus === c.id ? 'rgba(99,102,241,0.4)' : 'rgba(99,102,241,0.12)'}`, borderRadius: 12, cursor: 'pointer', transition: 'all 0.2s' }}>
                  <Icon name={expandedCampus === c.id ? 'chevronDown' : 'chevronRight'} size={14} style={{ color: '#64748B' }}/>
                  <Icon name="building" size={16} style={{ color: '#6366F1' }}/>
                  <div style={{ flex: 1 }}>
                    <div style={{ fontFamily: 'Poppins', fontWeight: 600, color: '#E2E8F0', fontSize: 14 }}>{c.name}</div>
                    <div style={{ fontSize: 11, color: '#64748B' }}>{c.teachers} enseignants · {c.students} étudiants</div>
                  </div>
                  <div style={{ display: 'flex', gap: 6 }}>
                    <button style={{ padding: 6, borderRadius: 8, background: 'rgba(255,255,255,0.06)', color: '#64748B', cursor: 'pointer', border: 'none' }}><Icon name="edit" size={13}/></button>
                    <button style={{ padding: 6, borderRadius: 8, background: 'rgba(239,68,68,0.1)', color: '#F87171', cursor: 'pointer', border: 'none' }}><Icon name="trash" size={13}/></button>
                  </div>
                </div>
                {expandedCampus === c.id && (
                  <div style={{ marginLeft: 24, marginTop: 4, display: 'flex', flexDirection: 'column', gap: 4 }}>
                    {(groups[c.id] || []).map((g, j) => (
                      <div key={j} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '8px 14px', background: 'rgba(99,102,241,0.05)', border: '1px solid rgba(99,102,241,0.08)', borderRadius: 10 }}>
                        <div style={{ width: 4, height: 4, borderRadius: 999, background: '#6366F1' }}/>
                        <div style={{ flex: 1, fontSize: 13, color: '#94A3B8' }}>{g}</div>
                        <button style={{ fontSize: 11, padding: '3px 10px', borderRadius: 999, background: 'rgba(99,102,241,0.12)', color: '#A5B4FC', border: 'none', cursor: 'pointer' }}>Gérer</button>
                      </div>
                    ))}
                    <button style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '7px 14px', background: 'transparent', border: '1px dashed rgba(99,102,241,0.25)', borderRadius: 10, color: '#6366F1', fontSize: 12, cursor: 'pointer', fontFamily: 'Poppins', fontWeight: 500 }}>
                      <Icon name="plus" size={12}/> Ajouter un groupe
                    </button>
                  </div>
                )}
              </div>
            ))}
          </div>

          {/* Stats panel */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
            <div style={{ background: '#1E2640', border: '1px solid rgba(99,102,241,0.15)', borderRadius: 16, padding: 22 }}>
              <h3 className="t-h3" style={{ color: '#F1F5F9', marginBottom: 16 }}>Résumé global</h3>
              {[
                { label: 'Total campus', val: '5' },
                { label: 'Total groupes', val: '19' },
                { label: 'Total étudiants', val: '8 640' },
                { label: 'Avg étudiants/campus', val: '1 728' },
              ].map((s, i) => (
                <div key={i} style={{ display: 'flex', justifyContent: 'space-between', padding: '10px 0', borderBottom: i < 3 ? '1px solid rgba(255,255,255,0.04)' : 'none' }}>
                  <div style={{ fontSize: 13, color: '#94A3B8' }}>{s.label}</div>
                  <div style={{ fontFamily: 'JetBrains Mono', fontWeight: 700, color: '#A5B4FC', fontSize: 14 }}>{s.val}</div>
                </div>
              ))}
            </div>
            <div style={{ background: '#1E2640', border: '1px solid rgba(99,102,241,0.15)', borderRadius: 16, padding: 22 }}>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 12 }}>
                <h3 className="t-h3" style={{ color: '#F1F5F9' }}>Import rapide</h3>
              </div>
              <div style={{ border: '2px dashed rgba(99,102,241,0.25)', borderRadius: 12, padding: 28, textAlign: 'center' }}>
                <Icon name="upload" size={28} style={{ color: '#6366F1', margin: '0 auto 10px' }}/>
                <div style={{ fontFamily: 'Poppins', fontWeight: 600, color: '#E2E8F0', marginBottom: 6 }}>Importer des étudiants</div>
                <div style={{ fontSize: 12, color: '#64748B', marginBottom: 14 }}>CSV avec colonnes : nom, prénom, email, groupe</div>
                <button className="btn btn-sm" style={{ background: 'rgba(99,102,241,0.15)', color: '#A5B4FC', border: '1px solid rgba(99,102,241,0.3)' }}>
                  <Icon name="upload" size={13}/> Choisir un fichier
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </AdminShell>
  );
};

// 3.3 — Onboarding enseignants
const AdminTeachers = () => {
  const D = window.STUDYHUB_DATA;
  const [showInviteModal, setShowInviteModal] = React.useState(false);
  const statusBadge = (s) => {
    if (s === 'active') return <span className="badge" style={{ background: 'rgba(16,185,129,0.15)', color: '#6EE7B7' }}>Actif</span>;
    if (s === 'pending') return <span className="badge" style={{ background: 'rgba(245,158,11,0.15)', color: '#FBBF24' }}>En attente</span>;
    return <span className="badge" style={{ background: 'rgba(99,102,241,0.15)', color: '#A5B4FC' }}>Invité</span>;
  };
  return (
    <AdminShell active="teachers">
      <div style={{ padding: '28px 32px' }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 24 }}>
          <div>
            <h1 className="t-h1" style={{ color: '#F1F5F9' }}>Enseignants</h1>
            <div style={{ fontSize: 13, color: '#64748B', marginTop: 4 }}>Gestion des invitations, rôles et activations</div>
          </div>
          <div style={{ display: 'flex', gap: 10 }}>
            <button className="btn btn-sm" style={{ background: 'rgba(255,255,255,0.06)', color: '#94A3B8', border: '1px solid rgba(255,255,255,0.1)' }}>
              <Icon name="upload" size={13}/> Import bulk CSV
            </button>
            <button onClick={() => setShowInviteModal(true)} className="btn btn-primary-admin btn-sm">
              <Icon name="plus" size={13}/> Inviter un enseignant
            </button>
          </div>
        </div>

        {/* Stats row */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16, marginBottom: 20 }}>
          {[
            { label: 'Actifs', val: '398', color: '#10B981' },
            { label: 'En attente d\'activation', val: '3', color: '#F59E0B' },
            { label: 'Invitations envoyées', val: '2', color: '#6366F1' },
          ].map((s, i) => (
            <div key={i} style={{ background: '#1E2640', border: '1px solid rgba(99,102,241,0.15)', borderRadius: 14, padding: 18, borderTop: `3px solid ${s.color}` }}>
              <div className="t-label" style={{ color: '#64748B', marginBottom: 6 }}>{s.label}</div>
              <div style={{ fontFamily: 'Poppins', fontWeight: 800, fontSize: 32, color: '#F1F5F9' }}>{s.val}</div>
            </div>
          ))}
        </div>

        {/* Table */}
        <div style={{ background: '#1E2640', border: '1px solid rgba(99,102,241,0.15)', borderRadius: 16, overflow: 'hidden' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '14px 20px', borderBottom: '1px solid rgba(99,102,241,0.1)' }}>
            <div style={{ position: 'relative', flex: 1, maxWidth: 300 }}>
              <Icon name="search" size={13} style={{ position: 'absolute', left: 10, top: 9, color: '#64748B' }}/>
              <input style={{ width: '100%', padding: '7px 12px 7px 30px', background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(99,102,241,0.2)', borderRadius: 10, color: '#94A3B8', fontSize: 13 }} placeholder="Rechercher…"/>
            </div>
            <select style={{ background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(99,102,241,0.2)', borderRadius: 10, color: '#94A3B8', padding: '7px 12px', fontSize: 13 }}>
              <option>Tous les campus</option>
              {D.campuses.map(c => <option key={c.id}>{c.name}</option>)}
            </select>
            <select style={{ background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(99,102,241,0.2)', borderRadius: 10, color: '#94A3B8', padding: '7px 12px', fontSize: 13 }}>
              <option>Tous les rôles</option><option>Référent</option><option>Enseignant</option>
            </select>
          </div>
          <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 13 }}>
            <thead>
              <tr style={{ background: 'rgba(255,255,255,0.02)' }}>
                {['Enseignant', 'Email', 'Campus', 'Rôle', 'Statut', 'Dernière activité', 'Actions'].map(h => (
                  <th key={h} style={{ padding: '10px 20px', fontFamily: 'Poppins', fontSize: 11, color: '#64748B', textTransform: 'uppercase', letterSpacing: '0.08em', textAlign: 'left' }}>{h}</th>
                ))}
              </tr>
            </thead>
            <tbody>
              {D.teachers.map((t, i) => (
                <tr key={i} style={{ borderTop: '1px solid rgba(255,255,255,0.04)', transition: 'background 0.15s' }}
                    onMouseEnter={e => e.currentTarget.style.background = 'rgba(99,102,241,0.05)'}
                    onMouseLeave={e => e.currentTarget.style.background = 'transparent'}>
                  <td style={{ padding: '12px 20px' }}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                      <Avatar name={t.name} size={34} variant="admin"/>
                      <span style={{ fontWeight: 600, color: '#E2E8F0' }}>{t.name}</span>
                    </div>
                  </td>
                  <td style={{ padding: '12px 20px', color: '#64748B', fontFamily: 'JetBrains Mono', fontSize: 12 }}>{t.email}</td>
                  <td style={{ padding: '12px 20px', color: '#94A3B8' }}>{t.campus}</td>
                  <td style={{ padding: '12px 20px' }}>
                    <span className="badge" style={{ background: t.role === 'Référent' ? 'rgba(139,92,246,0.15)' : 'rgba(99,102,241,0.15)', color: t.role === 'Référent' ? '#C4B5FD' : '#A5B4FC' }}>{t.role}</span>
                  </td>
                  <td style={{ padding: '12px 20px' }}>{statusBadge(t.status)}</td>
                  <td style={{ padding: '12px 20px', color: '#64748B', fontSize: 12 }}>{t.last}</td>
                  <td style={{ padding: '12px 20px' }}>
                    <div style={{ display: 'flex', gap: 6 }}>
                      <button style={{ padding: '5px 12px', borderRadius: 999, background: 'rgba(99,102,241,0.12)', color: '#A5B4FC', border: 'none', fontSize: 11, fontFamily: 'Poppins', fontWeight: 600, cursor: 'pointer' }}>Éditer</button>
                      {t.status === 'invited' && <button style={{ padding: '5px 12px', borderRadius: 999, background: 'rgba(245,158,11,0.12)', color: '#FBBF24', border: 'none', fontSize: 11, fontFamily: 'Poppins', fontWeight: 600, cursor: 'pointer' }}>Relancer</button>}
                    </div>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>

      {/* Invite modal */}
      {showInviteModal && (
        <div style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.6)', zIndex: 1000, display: 'flex', alignItems: 'center', justifyContent: 'center', backdropFilter: 'blur(4px)' }} onClick={() => setShowInviteModal(false)}>
          <div className="fade-in" style={{ background: '#1E2640', border: '1px solid rgba(99,102,241,0.3)', borderRadius: 20, padding: 32, maxWidth: 480, width: '90%', boxShadow: '0 40px 80px rgba(0,0,0,0.5)' }} onClick={e => e.stopPropagation()}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 20 }}>
              <h2 className="t-h2" style={{ color: '#F1F5F9' }}>Inviter un enseignant</h2>
              <button onClick={() => setShowInviteModal(false)} style={{ background: 'none', border: 'none', color: '#64748B', cursor: 'pointer' }}><Icon name="x" size={20}/></button>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
              <div>
                <div className="t-label" style={{ color: '#64748B', marginBottom: 6 }}>Email professionnel</div>
                <input style={{ width: '100%', padding: '10px 14px', background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(99,102,241,0.2)', borderRadius: 12, color: '#F1F5F9', fontSize: 14 }} placeholder="prenom.nom@universite.fr"/>
              </div>
              <div>
                <div className="t-label" style={{ color: '#64748B', marginBottom: 6 }}>Campus</div>
                <select style={{ width: '100%', padding: '10px 14px', background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(99,102,241,0.2)', borderRadius: 12, color: '#94A3B8', fontSize: 14 }}>
                  {D.campuses.map(c => <option key={c.id}>{c.name}</option>)}
                </select>
              </div>
              <div>
                <div className="t-label" style={{ color: '#64748B', marginBottom: 6 }}>Rôle</div>
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
                  {['Enseignant', 'Référent pédagogique'].map((r, i) => (
                    <label key={r} style={{ display: 'flex', gap: 10, padding: 14, borderRadius: 12, border: `1px solid ${i === 0 ? 'rgba(99,102,241,0.4)' : 'rgba(255,255,255,0.1)'}`, background: i === 0 ? 'rgba(99,102,241,0.12)' : 'transparent', cursor: 'pointer' }}>
                      <div style={{ width: 18, height: 18, borderRadius: 999, border: `2px solid ${i === 0 ? '#6366F1' : '#475569'}`, background: i === 0 ? '#6366F1' : 'transparent', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                        {i === 0 && <div style={{ width: 7, height: 7, borderRadius: 999, background: 'white' }}/>}
                      </div>
                      <span style={{ fontSize: 13, color: '#E2E8F0', fontWeight: 500 }}>{r}</span>
                    </label>
                  ))}
                </div>
              </div>
              <button onClick={() => setShowInviteModal(false)} className="btn btn-primary-admin" style={{ width: '100%', marginTop: 8 }}>
                <Icon name="send" size={14}/> Envoyer l'invitation
              </button>
            </div>
          </div>
        </div>
      )}
    </AdminShell>
  );
};

Object.assign(window, { AdminDashboard, AdminCampus, AdminTeachers });