// Parcours 2 — Étudiant : Login, Dashboard, Pré-examen, Examen, Soumission

const StudLogin = () => (
  <div style={{ minHeight: '100vh', background: 'linear-gradient(135deg, #FAF8FF 0%, #F5F0FF 50%, #FDF2F8 100%)', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 24, position: 'relative', overflow: 'hidden' }}>
    <div style={{ position: 'absolute', top: -100, left: -100, width: 400, height: 400, borderRadius: 999, background: 'radial-gradient(circle, rgba(139,124,246,0.2), transparent 70%)' }}/>
    <div style={{ position: 'absolute', bottom: -100, right: -100, width: 400, height: 400, borderRadius: 999, background: 'radial-gradient(circle, rgba(232,121,160,0.18), transparent 70%)' }}/>
    <div className="card" style={{ maxWidth: 440, width: '100%', padding: 40, position: 'relative', zIndex: 2, borderRadius: 24, boxShadow: '0 30px 80px rgba(139,124,246,0.15)' }}>
      <div style={{ textAlign: 'center', marginBottom: 24 }}>
        <Logo size="lg" variant="stud"/>
      </div>
      <img src="assets/studient.png" style={{ width: 180, margin: '0 auto 16px', display: 'block' }}/>
      <h1 className="t-h2" style={{ textAlign: 'center', marginBottom: 6 }}>Bienvenue ✨</h1>
      <p className="t-small" style={{ color: '#64748B', textAlign: 'center', marginBottom: 24 }}>Connecte-toi à ton espace étudiant pour accéder à tes évaluations.</p>
      <form onSubmit={e => { e.preventDefault(); location.hash = '#/etudiant'; }}>
        <div style={{ marginBottom: 14 }}>
          <label className="t-label" style={{ display: 'block', marginBottom: 6, color: '#64748B' }}>Identifiant établissement</label>
          <div style={{ position: 'relative' }}>
            <Icon name="user" size={16} style={{ position: 'absolute', left: 12, top: 12, color: '#94A3B8' }}/>
            <input className="input" defaultValue="SOR-24-1487" style={{ paddingLeft: 38 }}/>
          </div>
        </div>
        <div style={{ marginBottom: 20 }}>
          <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 }}/>
          </div>
        </div>
        <button type="submit" className="btn btn-primary-stud btn-lg" style={{ width: '100%' }}>Se connecter</button>
        <div style={{ textAlign: 'center', marginTop: 14 }}>
          <a href="#/prof/login" className="t-small" style={{ color: '#8B7CF6' }}>Je suis enseignant →</a>
        </div>
      </form>
    </div>
  </div>
);

const StudDashboard = ({ mobile = false }) => {
  const D = window.STUDYHUB_DATA;
  const evals = [
    { id: 'ev-312', title: 'Algorithmique — Complexité & récursivité', module: 'INF201', duration: '45 min', due: 'Aujourd’hui 18h00', urgency: 'red', status: 'todo', hoursLeft: 3 },
    { id: 'ev-315', title: 'Droit constitutionnel — Séparation des pouvoirs', module: 'DRO104', duration: '1h', due: 'Demain 14h00', urgency: 'amber', status: 'todo', hoursLeft: 28 },
    { id: 'ev-318', title: 'Anglais B2 — Reading comprehension', module: 'LAN202', duration: '30 min', due: '28 avril 16h', urgency: 'none', status: 'todo', hoursLeft: 96 },
    { id: 'ev-301', title: 'Microéconomie — Élasticité', module: 'ECO201', duration: '1h', due: 'Terminée le 10 avril', urgency: 'done', status: 'done', score: 15.5 },
  ];

  const Card = ({ ev }) => {
    const urgency = {
      red: { bg: '#FEE2E2', color: '#B91C1C', label: 'Urgent — moins de 24h', icon: '🔥' },
      amber: { bg: '#FEF3C7', color: '#B45309', label: 'À faire sous 48h', icon: '⏳' },
      none: { bg: '#EDE9FE', color: '#6D28D9', label: 'À faire', icon: '📝' },
      done: { bg: '#F0FDF9', color: '#047857', label: 'Terminée', icon: '✓' },
    }[ev.urgency];
    return (
      <div className="card card-hover" style={{ padding: 20, borderRadius: 20, display: 'flex', flexDirection: 'column', gap: 12, borderTop: `3px solid ${urgency.color}` }}>
        <div className="flex items-center justify-between">
          <span className="badge" style={{ background: urgency.bg, color: urgency.color }}>{urgency.icon} {urgency.label}</span>
          <span style={{ fontFamily: 'JetBrains Mono', fontSize: 11, color: '#94A3B8' }}>{ev.module}</span>
        </div>
        <div style={{ fontFamily: 'Poppins', fontWeight: 700, fontSize: mobile ? 15 : 17, lineHeight: 1.3 }}>{ev.title}</div>
        <div className="flex items-center gap-3 t-small" style={{ color: '#64748B' }}>
          <span><Icon name="clock" size={12} style={{ display: 'inline', verticalAlign: 'middle', marginRight: 4 }}/>{ev.duration}</span>
          <span><Icon name="calendar" size={12} style={{ display: 'inline', verticalAlign: 'middle', marginRight: 4 }}/>{ev.due}</span>
        </div>
        {ev.status === 'todo' ? (
          <a href={`#/etudiant/pre-examen/${ev.id}`} className="btn btn-primary-stud" style={{ alignSelf: 'stretch' }}>Commencer <Icon name="arrowRight" size={14}/></a>
        ) : (
          <div className="flex items-center justify-between" style={{ padding: 10, borderRadius: 12, background: '#F0FDF9' }}>
            <span className="t-small" style={{ color: '#047857' }}>Ta note</span>
            <span style={{ fontFamily: 'Poppins', fontWeight: 800, fontSize: 20, color: '#047857' }}>{ev.score}/20</span>
          </div>
        )}
      </div>
    );
  };

  const content = (
    <div style={{ padding: mobile ? '20px 16px' : '32px', maxWidth: mobile ? '100%' : 1000, margin: '0 auto' }}>
      <div className="flex items-center justify-between" style={{ marginBottom: 16 }}>
        <div>
          <div className="t-small" style={{ color: '#64748B' }}>Bonjour</div>
          <h1 className="t-h1" style={{ fontSize: mobile ? 22 : 32 }}>Lucas 👋</h1>
        </div>
        {!mobile && <Avatar name={D.student.name} size={44} variant="stud"/>}
      </div>
      <div style={{ padding: 14, borderRadius: 16, background: 'linear-gradient(135deg, #F5F0FF, #FDF2F8)', border: '1px solid #EDE9FE', marginBottom: 20, display: 'flex', gap: 12, alignItems: 'center' }}>
        <div style={{ fontSize: 24 }}>⚡</div>
        <div style={{ flex: 1 }}>
          <div style={{ fontFamily: 'Poppins', fontWeight: 600, fontSize: 14 }}>2 évaluations à passer cette semaine</div>
          <div className="t-small" style={{ color: '#6D28D9' }}>La plus urgente expire dans <b>3 heures</b></div>
        </div>
      </div>
      <div className="t-label" style={{ color: '#94A3B8', marginBottom: 12 }}>Mes évaluations</div>
      <div style={{ display: 'grid', gridTemplateColumns: mobile ? '1fr' : '1fr 1fr', gap: 14 }}>
        {evals.map(ev => <Card key={ev.id} ev={ev}/>)}
      </div>
    </div>
  );

  if (mobile) {
    return <div style={{ minHeight: '100%', background: '#FAF8FF' }}>{content}</div>;
  }
  return <div style={{ minHeight: '100vh', background: '#FAF8FF' }}>{content}</div>;
};

const StudPreExam = ({ mobile = false }) => {
  const [checked, setChecked] = React.useState([false, false, false]);
  const [countdown, setCountdown] = React.useState(null);
  const allChecked = checked.every(Boolean);

  React.useEffect(() => {
    if (countdown === null) return;
    if (countdown === 0) { location.hash = '#/etudiant/examen/ev-312'; return; }
    const t = setTimeout(() => setCountdown(countdown - 1), 1000);
    return () => clearTimeout(t);
  }, [countdown]);

  const content = (
    <div style={{ minHeight: mobile ? '100%' : '100vh', background: 'linear-gradient(135deg, #0F1729 0%, #1E1B4B 50%, #4C1D95 100%)', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: mobile ? 16 : 40, position: 'relative', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', top: -100, right: -100, width: 400, height: 400, borderRadius: 999, background: 'radial-gradient(circle, rgba(139,124,246,0.25), transparent 70%)' }}/>

      {countdown !== null && countdown > 0 ? (
        <div style={{ textAlign: 'center', color: 'white', zIndex: 2 }}>
          <div style={{ fontFamily: 'JetBrains Mono', fontSize: mobile ? 120 : 200, fontWeight: 700, lineHeight: 1, background: 'linear-gradient(135deg, #A78BFA, #E879A0)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent' }}>{countdown}</div>
          <div style={{ fontFamily: 'Poppins', fontSize: 18, color: '#C7D2FE', marginTop: 12 }}>Préparation du plein écran…</div>
        </div>
      ) : (
        <div className="card" style={{ maxWidth: 560, width: '100%', padding: mobile ? 24 : 36, borderRadius: 24, position: 'relative', zIndex: 2, boxShadow: '0 40px 100px rgba(0,0,0,0.4)' }}>
          <div style={{ textAlign: 'center', marginBottom: 20 }}>
            <div style={{ width: 64, height: 64, margin: '0 auto 14px', borderRadius: 18, background: 'linear-gradient(135deg, #8B7CF6, #7C3AED)', display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: '0 10px 30px rgba(139,124,246,0.4)' }}>
              <Icon name="file" size={28} style={{ color: 'white' }}/>
            </div>
            <div className="t-label" style={{ color: '#8B7CF6', marginBottom: 6 }}>Évaluation · INF201</div>
            <h1 className="t-h2">Algorithmique — Complexité & récursivité</h1>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: mobile ? '1fr 1fr' : 'repeat(3, 1fr)', gap: 10, marginBottom: 20 }}>
            <div style={{ padding: 12, borderRadius: 12, background: '#F5F0FF', textAlign: 'center' }}>
              <Icon name="clock" size={18} style={{ color: '#8B7CF6', margin: '0 auto 6px' }}/>
              <div className="t-label" style={{ color: '#64748B' }}>Durée</div>
              <div style={{ fontFamily: 'Poppins', fontWeight: 700, fontSize: 16 }}>45 min</div>
            </div>
            <div style={{ padding: 12, borderRadius: 12, background: '#F5F0FF', textAlign: 'center' }}>
              <Icon name="files" size={18} style={{ color: '#8B7CF6', margin: '0 auto 6px' }}/>
              <div className="t-label" style={{ color: '#64748B' }}>Exercices</div>
              <div style={{ fontFamily: 'Poppins', fontWeight: 700, fontSize: 16 }}>8</div>
            </div>
            <div style={{ padding: 12, borderRadius: 12, background: '#F5F0FF', textAlign: 'center', gridColumn: mobile ? 'span 2' : 'auto' }}>
              <Icon name="trophy" size={18} style={{ color: '#8B7CF6', margin: '0 auto 6px' }}/>
              <div className="t-label" style={{ color: '#64748B' }}>Points</div>
              <div style={{ fontFamily: 'Poppins', fontWeight: 700, fontSize: 16 }}>20</div>
            </div>
          </div>
          <div className="t-label" style={{ color: '#64748B', marginBottom: 10 }}>Avant de commencer, confirme :</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginBottom: 20 }}>
            {[
              'Je comprends que le chronomètre démarre dès le clic sur "Démarrer" et qu’il ne peut pas être mis en pause.',
              'Je m’engage à rester sur la page de l’évaluation, sans changer d’onglet ni sortir du plein écran.',
              'Je passe cette évaluation seul·e, sans aide extérieure ni outil non autorisé.',
            ].map((txt, i) => (
              <label key={i} onClick={() => { const n = [...checked]; n[i] = !n[i]; setChecked(n); }} style={{ display: 'flex', gap: 10, padding: 12, borderRadius: 12, border: '1px solid ' + (checked[i] ? '#8B7CF6' : '#E2E8F0'), background: checked[i] ? '#F5F0FF' : 'white', cursor: 'pointer', transition: 'all 0.2s', alignItems: 'flex-start' }}>
                <div style={{ width: 20, height: 20, borderRadius: 6, background: checked[i] ? '#8B7CF6' : 'white', border: '2px solid ' + (checked[i] ? '#8B7CF6' : '#CBD5E1'), display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, marginTop: 1 }}>
                  {checked[i] && <Icon name="check" size={12} style={{ color: 'white' }}/>}
                </div>
                <span style={{ fontSize: 13, lineHeight: 1.5 }}>{txt}</span>
              </label>
            ))}
          </div>
          <button onClick={() => allChecked && setCountdown(3)} disabled={!allChecked} className="btn btn-primary-stud btn-lg" style={{ width: '100%', opacity: allChecked ? 1 : 0.4, cursor: allChecked ? 'pointer' : 'not-allowed' }}>
            <Icon name="play" size={16}/> Démarrer l’évaluation
          </button>
          <div style={{ textAlign: 'center', marginTop: 12 }}>
            <a href={mobile ? '#/etudiant/m/dashboard' : '#/etudiant'} className="t-small" style={{ color: '#64748B' }}>← Retour au tableau de bord</a>
          </div>
        </div>
      )}
    </div>
  );
  return content;
};

Object.assign(window, { StudLogin, StudDashboard, StudPreExam });