// Online exam with camera monitoring + anti-cheat

const ExamPage = ({ onNav }) => {
  const [stage, setStage] = React.useState('intake'); // intake | exam | submit | result
  const [cameraOn, setCameraOn] = React.useState(false);
  const [idx, setIdx] = React.useState(0);
  const [answers, setAnswers] = React.useState({});
  const [timeLeft, setTimeLeft] = React.useState(3540); // 59 min
  const [tabSwitches, setTabSwitches] = React.useState(0);
  const [showWarning, setShowWarning] = React.useState(false);
  const examUI = window.__TWEAKS__.examUI || 'focus';

  React.useEffect(() => {
    if (stage !== 'exam') return;
    const t = setInterval(() => setTimeLeft(s => Math.max(0, s - 1)), 1000);
    return () => clearInterval(t);
  }, [stage]);

  React.useEffect(() => {
    if (stage !== 'exam') return;
    const onBlur = () => { setTabSwitches(n => n + 1); setShowWarning(true); setTimeout(() => setShowWarning(false), 4000); };
    window.addEventListener('blur', onBlur);
    return () => window.removeEventListener('blur', onBlur);
  }, [stage]);

  const fmt = (s) => `${Math.floor(s/3600).toString().padStart(2,'0')}:${Math.floor((s%3600)/60).toString().padStart(2,'0')}:${(s%60).toString().padStart(2,'0')}`;

  if (stage === 'intake') {
    return (
      <>
        <Topbar title="Kiểm tra trước khi vào phòng thi" breadcrumb={['Cơ sở dữ liệu', 'Bài thi kết thúc môn']} />
        <div className="page" style={{ maxWidth: 1200 }}>
          <div className="card" style={{ padding: 32 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 20 }}>
              <div style={{ width: 44, height: 44, borderRadius: 10, background: 'var(--accent-soft)', color: 'var(--accent-ink)', display: 'grid', placeItems: 'center' }}><Icon name="shield" size={22} /></div>
              <div>
                <div className="serif" style={{ fontSize: 26 }}>Thi kết thúc môn — Cơ sở dữ liệu</div>
                <div style={{ fontSize: 13, color: 'var(--muted)' }}>IT202 · 40 câu trắc nghiệm · 60 phút · Điểm đạt ≥ 5.0</div>
              </div>
            </div>

            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24, marginBottom: 24 }}>
              <div>
                <div style={{ fontFamily: 'var(--serif)', fontSize: 18, marginBottom: 10 }}>Quy định phòng thi</div>
                <ul style={{ margin: 0, paddingLeft: 18, fontSize: 13, lineHeight: 1.8, color: 'var(--ink-2)' }}>
                  <li>Câu hỏi được lấy ngẫu nhiên từ ngân hàng câu hỏi của môn</li>
                  <li>Bạn chỉ được làm bài <strong>một lần trong mỗi lần thi</strong>, không thể quay lại sau khi nộp</li>
                  <li>Thời gian làm bài là <strong>60 phút</strong>, hệ thống sẽ tự động nộp bài khi hết giờ</li>
                  <li>Bật camera trong suốt thời gian làm bài để phục vụ giám sát</li>
                  <li>Không được chuyển tab, mở cửa sổ khác hoặc rời khỏi khung hình</li>
                  <li>Sau 3 cảnh báo, bài thi sẽ bị đình chỉ và đánh dấu vi phạm</li>
                </ul>
              </div>
              <div>
                <div style={{ fontFamily: 'var(--serif)', fontSize: 18, marginBottom: 10 }}>Kiểm tra thiết bị</div>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                  {[
                    { k: 'camera', t: 'Camera (webcam)', s: cameraOn ? 'ok' : 'pending', d: cameraOn ? 'Đã kết nối' : 'Chưa bật', ic: 'camera' },
                    { k: 'mic', t: 'Microphone', s: 'ok', d: 'Hoạt động bình thường', ic: 'mic' },
                    { k: 'net', t: 'Kết nối mạng', s: 'ok', d: 'Ổn định · 38 Mbps', ic: 'sparkle' },
                    { k: 'id', t: 'Xác thực danh tính', s: 'pending', d: 'Sẽ chụp ảnh khi bắt đầu', ic: 'user' },
                  ].map(c => (
                    <div key={c.k} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: 12, border: '1px solid var(--line)', borderRadius: 8 }}>
                      <Icon name={c.ic} size={16} />
                      <div style={{ flex: 1 }}>
                        <div style={{ fontSize: 13, fontWeight: 500 }}>{c.t}</div>
                        <div style={{ fontSize: 11.5, color: 'var(--muted)' }}>{c.d}</div>
                      </div>
                      <span className={`chip ${c.s === 'ok' ? 'chip-green' : 'chip-gold'}`}>{c.s === 'ok' ? '✓' : '●'}</span>
                    </div>
                  ))}
                </div>

                <div style={{ marginTop: 14, padding: 14, border: '1px solid var(--line)', borderRadius: 8, background: '#0a0a0a', aspectRatio: '4/3', position: 'relative', overflow: 'hidden' }}>
                  {cameraOn ? (
                    <>
                      <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(circle at 50% 60%, rgba(200,90,60,0.15), #0a0a0a)', display: 'grid', placeItems: 'center', color: '#f4f2ee' }}>
                        <div style={{ width: 72, height: 72, borderRadius: 999, background: 'rgba(255,255,255,0.15)', display: 'grid', placeItems: 'center' }}><Icon name="user" size={32} /></div>
                      </div>
                      <div style={{ position: 'absolute', top: 8, left: 8, display: 'flex', alignItems: 'center', gap: 6, fontSize: 10.5, color: '#fff', fontFamily: 'var(--mono)' }}>
                        <span className="hdot pulse" style={{ background: '#ef4444' }}/> REC · {STUDENT.name.toUpperCase()}
                      </div>
                    </>
                  ) : (
                    <div style={{ position: 'absolute', inset: 0, display: 'grid', placeItems: 'center', color: '#888' }}>
                      <div style={{ textAlign: 'center' }}>
                        <Icon name="camera" size={30} />
                        <div style={{ fontSize: 12, marginTop: 8 }}>Camera chưa bật</div>
                      </div>
                    </div>
                  )}
                </div>
                <button className={`btn ${cameraOn ? 'btn-ghost' : 'btn-primary'} btn-sm`} style={{ width: '100%', marginTop: 10, justifyContent: 'center' }} onClick={() => setCameraOn(!cameraOn)}>
                  <Icon name="camera" size={13} /> {cameraOn ? 'Tắt camera' : 'Bật camera để kiểm tra'}
                </button>
              </div>
            </div>

            <div style={{ padding: 14, background: 'var(--gold-soft)', borderRadius: 10, marginBottom: 18, fontSize: 12.5, color: '#7a5a07', display: 'flex', gap: 10, alignItems: 'flex-start' }}>
              <Icon name="alert" size={16} style={{ flexShrink: 0, marginTop: 1 }} />
              <div>
                <strong>Lưu ý:</strong> Khi nhấn "Bắt đầu làm bài", hệ thống sẽ chuyển sang chế độ toàn màn hình và ghi hình liên tục. Mọi lần chuyển tab sẽ được ghi nhận. Hãy đảm bảo phòng thi đủ sáng và chỉ có bạn trong khung hình.
              </div>
            </div>

            <div style={{ display: 'flex', gap: 10, justifyContent: 'space-between', alignItems: 'center' }}>
              <button className="btn btn-ghost" onClick={() => onNav('subject')}><Icon name="arrowLeft" size={13} /> Huỷ</button>
              <div style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
                <label style={{ fontSize: 12, display: 'flex', alignItems: 'center', gap: 8, color: 'var(--muted)' }}>
                  <input type="checkbox" defaultChecked /> Tôi đã đọc và đồng ý với quy định
                </label>
                <button className="btn btn-accent btn-lg" disabled={!cameraOn} onClick={() => setStage('exam')} style={{ opacity: cameraOn ? 1 : 0.5 }}>
                  <Icon name="shield" size={14} /> Bắt đầu làm bài
                </button>
              </div>
            </div>
          </div>
        </div>
      </>
    );
  }

  if (stage === 'result') {
    return (
      <>
        <Topbar title="Kết quả bài thi" breadcrumb={['Cơ sở dữ liệu', 'Bài thi kết thúc môn']} />
        <div className="page" style={{ maxWidth: 1100 }}>
          <div className="card" style={{ padding: 40, textAlign: 'center' }}>
            <div style={{ width: 80, height: 80, borderRadius: 999, background: 'var(--green-soft)', color: 'var(--green)', display: 'grid', placeItems: 'center', margin: '0 auto 20px' }}>
              <Icon name="checkCircle" size={40} stroke={1.6} />
            </div>
            <div className="serif" style={{ fontSize: 16, color: 'var(--muted)', marginBottom: 6 }}>Chúc mừng!</div>
            <div className="serif" style={{ fontSize: 42, marginBottom: 4 }}>Bạn đã đỗ môn này</div>
            <div style={{ fontSize: 13, color: 'var(--muted)', marginBottom: 24 }}>Cơ sở dữ liệu · IT202 · 3 tín chỉ</div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0, maxWidth: 620, margin: '0 auto 28px', border: '1px solid var(--line)', borderRadius: 12, overflow: 'hidden' }}>
              {[
                { l: 'Điểm số', v: '8.25', u: '/10', c: 'var(--accent)' },
                { l: 'Đúng', v: '33', u: '/40 câu' },
                { l: 'Thời gian', v: '42', u: 'phút' },
                { l: 'Xếp loại', v: 'A-', u: '' },
              ].map((s, i) => (
                <div key={i} style={{ padding: 18, borderLeft: i > 0 ? '1px solid var(--line)' : 'none' }}>
                  <div style={{ fontSize: 11, color: 'var(--muted)', textTransform: 'uppercase', letterSpacing: '0.08em', fontWeight: 600 }}>{s.l}</div>
                  <div className="serif" style={{ fontSize: 32, color: s.c || 'var(--ink)', marginTop: 6 }}>{s.v}<span style={{ fontSize: 13, color: 'var(--muted)', marginLeft: 4 }}>{s.u}</span></div>
                </div>
              ))}
            </div>
            <div style={{ display: 'flex', gap: 10, justifyContent: 'center' }}>
              <button className="btn btn-ghost">Xem chi tiết đáp án</button>
              <button className="btn btn-ghost"><Icon name="download" size={13} /> Tải chứng nhận</button>
              <button className="btn btn-primary" onClick={() => onNav('dashboard')}>Về trang chính <Icon name="arrowRight" size={13} /></button>
            </div>
          </div>
        </div>
      </>
    );
  }

  // EXAM stage — custom full-bleed layout
  const question = EXAM_QUESTIONS[idx % EXAM_QUESTIONS.length];
  const answered = Object.keys(answers).length;

  if (examUI === 'minimal') {
    return <ExamMinimal question={question} idx={idx} setIdx={setIdx} answers={answers} setAnswers={setAnswers} timeLeft={timeLeft} fmt={fmt} onSubmit={() => setStage('result')} showWarning={showWarning} tabSwitches={tabSwitches} />;
  }
  if (examUI === 'proctor') {
    return <ExamProctor question={question} idx={idx} setIdx={setIdx} answers={answers} setAnswers={setAnswers} timeLeft={timeLeft} fmt={fmt} onSubmit={() => setStage('result')} showWarning={showWarning} tabSwitches={tabSwitches} />;
  }
  return <ExamFocus question={question} idx={idx} setIdx={setIdx} answers={answers} setAnswers={setAnswers} timeLeft={timeLeft} fmt={fmt} onSubmit={() => setStage('result')} showWarning={showWarning} tabSwitches={tabSwitches} />;
};

// Variant 1: FOCUS — split with sidebar + camera top-right
const ExamFocus = ({ question, idx, setIdx, answers, setAnswers, timeLeft, fmt, onSubmit, showWarning, tabSwitches }) => {
  const answered = Object.keys(answers).length;
  return (
    <div style={{ minHeight: '100vh', background: '#0f0e0c', color: '#f4f2ee', display: 'grid', gridTemplateColumns: '280px 1fr 280px' }}>
      <aside style={{ background: '#17150f', borderRight: '1px solid #2a2620', padding: 22, display: 'flex', flexDirection: 'column' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 20 }}>
          <div style={{ width: 32, height: 32, borderRadius: 8, background: 'var(--accent)', color: '#fff', display: 'grid', placeItems: 'center', fontFamily: 'var(--serif)', fontStyle: 'italic' }}>C</div>
          <div>
            <div style={{ fontFamily: 'var(--serif)', fontSize: 15 }}>Phòng thi</div>
            <div style={{ fontSize: 10, color: '#8a847a', fontFamily: 'var(--mono)', letterSpacing: '0.08em' }}>IT202 · SECURE</div>
          </div>
        </div>
        <div style={{ padding: 14, background: '#1e1b14', borderRadius: 10, marginBottom: 16 }}>
          <div style={{ fontSize: 10.5, color: '#8a847a', textTransform: 'uppercase', letterSpacing: '0.1em', marginBottom: 8 }}>Thời gian còn lại</div>
          <div className="serif mono" style={{ fontSize: 34, color: timeLeft < 300 ? '#ef4444' : '#f4f2ee', letterSpacing: '-0.02em' }}>{fmt(timeLeft)}</div>
          <div style={{ fontSize: 11, color: '#8a847a', marginTop: 6 }}>Đã làm: {answered}/40 câu</div>
          <div style={{ height: 4, background: '#2a2620', borderRadius: 999, marginTop: 8, overflow: 'hidden' }}>
            <div style={{ height: '100%', background: 'var(--accent)', width: `${(answered/40)*100}%` }}/>
          </div>
        </div>

        <div style={{ fontSize: 10.5, color: '#8a847a', textTransform: 'uppercase', letterSpacing: '0.1em', marginBottom: 10 }}>Lưới câu hỏi</div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 5, marginBottom: 'auto' }}>
          {Array.from({ length: 40 }, (_, i) => {
            const isAns = answers[i] !== undefined;
            const isCur = i === idx;
            return (
              <button key={i} onClick={() => setIdx(i)} style={{
                aspectRatio: 1, borderRadius: 6,
                background: isCur ? 'var(--accent)' : isAns ? '#2a4a2a' : '#1e1b14',
                color: isCur ? '#fff' : isAns ? '#8dc48d' : '#8a847a',
                fontSize: 11, fontFamily: 'var(--mono)', fontWeight: 600, border: isCur ? '1px solid var(--accent)' : '1px solid #2a2620'
              }}>{i+1}</button>
            );
          })}
        </div>
        <button className="btn" style={{ marginTop: 16, background: 'var(--accent)', color: '#fff', justifyContent: 'center' }} onClick={onSubmit}>
          <Icon name="send" size={13} /> Nộp bài thi
        </button>
      </aside>

      <main style={{ padding: '48px 60px', overflowY: 'auto', maxHeight: '100vh' }}>
        {showWarning && (
          <div className="fadein" style={{ position: 'fixed', top: 20, left: '50%', transform: 'translateX(-50%)', background: '#ef4444', color: '#fff', padding: '12px 20px', borderRadius: 10, display: 'flex', alignItems: 'center', gap: 10, zIndex: 100, boxShadow: '0 12px 40px rgba(239,68,68,0.4)' }}>
            <Icon name="alert" size={16} /> <strong>Cảnh báo vi phạm:</strong> Phát hiện bạn chuyển tab/cửa sổ. Lần {tabSwitches}/3.
          </div>
        )}
        <div style={{ maxWidth: 720, margin: '0 auto' }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 20 }}>
            <div>
              <div style={{ fontSize: 11, color: '#8a847a', fontFamily: 'var(--mono)', letterSpacing: '0.1em', textTransform: 'uppercase' }}>Câu {idx + 1} / 40 · 0.25 điểm</div>
              <div style={{ fontSize: 11, color: '#6a6458', marginTop: 4 }}>Chủ đề: {['Mô hình quan hệ', 'SQL', 'Chuẩn hoá', 'Transaction', 'SQL'][idx % 5]}</div>
            </div>
            <button style={{ color: '#8a847a', fontSize: 12, display: 'flex', alignItems: 'center', gap: 6, background: 'transparent', border: '1px solid #2a2620', padding: '6px 12px', borderRadius: 6 }}>
              <Icon name="flag" size={12} /> Đánh dấu để xem lại
            </button>
          </div>
          <div className="serif" style={{ fontSize: 28, lineHeight: 1.35, marginBottom: 28 }}>{question.q}</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            {question.opts.map((o, i) => {
              const selected = answers[idx] === i;
              return (
                <div key={i} onClick={() => setAnswers({...answers, [idx]: i})} style={{
                  padding: '16px 20px',
                  border: selected ? '1.5px solid var(--accent)' : '1px solid #2a2620',
                  background: selected ? 'rgba(200,90,60,0.12)' : '#17150f',
                  borderRadius: 10, cursor: 'pointer', display: 'flex', gap: 14, alignItems: 'flex-start', transition: 'all 0.15s'
                }}>
                  <div style={{ width: 28, height: 28, borderRadius: 999, border: selected ? 'none' : '1.5px solid #3a362e', background: selected ? 'var(--accent)' : 'transparent', color: selected ? '#fff' : '#8a847a', display: 'grid', placeItems: 'center', fontSize: 12, fontFamily: 'var(--mono)', fontWeight: 600, flexShrink: 0 }}>
                    {String.fromCharCode(65 + i)}
                  </div>
                  <div style={{ fontSize: 15, lineHeight: 1.5, paddingTop: 3 }}>{o}</div>
                </div>
              );
            })}
          </div>
          <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 36, paddingTop: 24, borderTop: '1px solid #2a2620' }}>
            <button className="btn btn-ghost" style={{ background: 'transparent', borderColor: '#2a2620', color: '#c8c2b5' }} onClick={() => setIdx(Math.max(0, idx - 1))} disabled={idx === 0}><Icon name="arrowLeft" size={13} /> Câu trước</button>
            <button className="btn" style={{ background: '#f4f2ee', color: '#0f0e0c' }} onClick={() => setIdx(Math.min(39, idx + 1))}>Câu tiếp <Icon name="arrowRight" size={13} /></button>
          </div>
        </div>
      </main>

      <aside style={{ background: '#17150f', borderLeft: '1px solid #2a2620', padding: 22, display: 'flex', flexDirection: 'column', gap: 14 }}>
        <div>
          <div style={{ fontSize: 10.5, color: '#8a847a', textTransform: 'uppercase', letterSpacing: '0.1em', marginBottom: 8 }}>Giám sát camera</div>
          <div style={{ aspectRatio: '4/3', background: '#0a0a0a', borderRadius: 10, position: 'relative', overflow: 'hidden' }}>
            <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(circle at 50% 60%, rgba(200,90,60,0.1), #0a0a0a)', display: 'grid', placeItems: 'center' }}>
              <Icon name="user" size={42} style={{ color: '#44403a' }} />
            </div>
            <div style={{ position: 'absolute', top: 8, left: 8, display: 'flex', alignItems: 'center', gap: 5, fontSize: 10, color: '#fff', fontFamily: 'var(--mono)' }}>
              <span className="hdot pulse" style={{ background: '#ef4444' }}/> REC
            </div>
            <div style={{ position: 'absolute', bottom: 8, left: 8, right: 8, fontSize: 9.5, color: 'rgba(255,255,255,0.5)', fontFamily: 'var(--mono)' }}>
              {STUDENT.id} · {new Date().toLocaleTimeString('vi-VN')}
            </div>
          </div>
        </div>
        <div>
          <div style={{ fontSize: 10.5, color: '#8a847a', textTransform: 'uppercase', letterSpacing: '0.1em', marginBottom: 10 }}>Trạng thái giám sát</div>
          {[
            { ic: 'eye', t: 'Nhận diện khuôn mặt', s: 'Bình thường', ok: true },
            { ic: 'camera', t: 'Ảnh chụp ngẫu nhiên', s: '3 ảnh đã chụp', ok: true },
            { ic: 'alert', t: 'Chuyển tab/cửa sổ', s: `${tabSwitches} lần`, ok: tabSwitches < 2, warn: tabSwitches > 0 },
            { ic: 'sparkle', t: 'Kết nối mạng', s: 'Ổn định', ok: true },
          ].map((s, i) => (
            <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '8px 0', borderBottom: i < 3 ? '1px solid #2a2620' : 'none' }}>
              <Icon name={s.ic} size={13} style={{ color: s.ok ? '#8dc48d' : '#f59e0b' }} />
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 12, fontWeight: 500 }}>{s.t}</div>
                <div style={{ fontSize: 10.5, color: '#8a847a' }}>{s.s}</div>
              </div>
              <span className="hdot" style={{ background: s.ok ? '#4ade80' : '#f59e0b' }}/>
            </div>
          ))}
        </div>
        <div style={{ padding: 12, background: '#1e1b14', borderRadius: 10, fontSize: 11, color: '#8a847a', lineHeight: 1.55 }}>
          <Icon name="shield" size={12} style={{ color: 'var(--accent)', marginRight: 4 }} />
          Mọi hành vi bất thường được ghi log và gửi về giáo viên giám thị.
        </div>
      </aside>
    </div>
  );
};

// Variant 2: MINIMAL — clean light theme
const ExamMinimal = ({ question, idx, setIdx, answers, setAnswers, timeLeft, fmt, onSubmit, showWarning, tabSwitches }) => {
  const answered = Object.keys(answers).length;
  return (
    <div style={{ minHeight: '100vh', background: 'var(--bg)', color: 'var(--ink)' }}>
      <div style={{ position: 'sticky', top: 0, background: 'var(--bg)', borderBottom: '1px solid var(--line)', padding: '14px 32px', display: 'flex', alignItems: 'center', gap: 20, zIndex: 10 }}>
        <div style={{ fontFamily: 'var(--serif)', fontSize: 18 }}>Cơ sở dữ liệu · Thi kết thúc môn</div>
        <div style={{ flex: 1 }}/>
        <div style={{ fontSize: 12, color: 'var(--muted)' }}>Đã làm: <span className="mono" style={{ fontWeight: 600, color: 'var(--ink)' }}>{answered}/40</span></div>
        <div className="mono" style={{ fontSize: 18, fontWeight: 600, color: timeLeft < 300 ? 'var(--rose)' : 'var(--ink)' }}>{fmt(timeLeft)}</div>
        <div style={{ position: 'relative' }}>
          <div style={{ width: 86, height: 64, borderRadius: 8, background: '#0a0a0a', position: 'relative', overflow: 'hidden' }}>
            <div style={{ position: 'absolute', inset: 0, display: 'grid', placeItems: 'center', color: '#444' }}><Icon name="user" size={22} /></div>
            <div style={{ position: 'absolute', top: 4, left: 4, width: 5, height: 5, borderRadius: 999, background: '#ef4444' }} className="pulse"/>
          </div>
        </div>
        <button className="btn btn-accent btn-sm" onClick={onSubmit}>Nộp bài</button>
      </div>
      {showWarning && (
        <div className="fadein" style={{ position: 'fixed', top: 80, left: '50%', transform: 'translateX(-50%)', background: 'var(--rose)', color: '#fff', padding: '10px 18px', borderRadius: 8, zIndex: 100, display: 'flex', alignItems: 'center', gap: 8 }}>
          <Icon name="alert" size={14} /> Cảnh báo: phát hiện chuyển tab ({tabSwitches}/3)
        </div>
      )}
      <div style={{ maxWidth: 720, margin: '0 auto', padding: '60px 32px' }}>
        <div style={{ fontSize: 11, color: 'var(--muted)', fontFamily: 'var(--mono)', letterSpacing: '0.1em', textTransform: 'uppercase', marginBottom: 16 }}>Câu {idx + 1} / 40</div>
        <div className="serif" style={{ fontSize: 30, lineHeight: 1.3, marginBottom: 32 }}>{question.q}</div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
          {question.opts.map((o, i) => (
            <div key={i} className={`opt-row ${answers[idx] === i ? 'selected' : ''}`} onClick={() => setAnswers({...answers, [idx]: i})} style={{ padding: 18 }}>
              <div className="opt-radio">{String.fromCharCode(65 + i)}</div>
              <div style={{ fontSize: 15, lineHeight: 1.5 }}>{o}</div>
            </div>
          ))}
        </div>
        <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 36 }}>
          <button className="btn btn-ghost" onClick={() => setIdx(Math.max(0, idx - 1))} disabled={idx === 0}><Icon name="arrowLeft" size={13} /> Câu trước</button>
          <div style={{ display: 'flex', gap: 8 }}>
            {Array.from({ length: 10 }, (_, i) => {
              const n = Math.floor(idx / 10) * 10 + i;
              const isAns = answers[n] !== undefined;
              return <button key={i} onClick={() => setIdx(n)} className="mono" style={{ width: 28, height: 28, borderRadius: 6, border: '1px solid var(--line-2)', background: n === idx ? 'var(--ink)' : isAns ? 'var(--bg-2)' : 'transparent', color: n === idx ? '#fff' : 'var(--ink)', fontSize: 11, fontWeight: 600 }}>{n+1}</button>;
            })}
          </div>
          <button className="btn btn-primary" onClick={() => setIdx(Math.min(39, idx + 1))}>Câu tiếp <Icon name="arrowRight" size={13} /></button>
        </div>
      </div>
    </div>
  );
};

// Variant 3: PROCTOR — full giám thị with big camera
const ExamProctor = ({ question, idx, setIdx, answers, setAnswers, timeLeft, fmt, onSubmit, showWarning, tabSwitches }) => {
  const answered = Object.keys(answers).length;
  return (
    <div style={{ minHeight: '100vh', background: '#faf8f4', display: 'grid', gridTemplateColumns: '1fr 340px' }}>
      <div style={{ padding: '32px 48px' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 28, padding: 20, background: 'var(--card)', borderRadius: 12, border: '1px solid var(--line)' }}>
          <div>
            <div className="mono" style={{ fontSize: 11, color: 'var(--muted)', letterSpacing: '0.1em', textTransform: 'uppercase' }}>IT202 · Thi kết thúc môn</div>
            <div className="serif" style={{ fontSize: 22 }}>Cơ sở dữ liệu</div>
          </div>
          <div style={{ display: 'flex', gap: 32 }}>
            <div style={{ textAlign: 'right' }}>
              <div style={{ fontSize: 10.5, color: 'var(--muted)', textTransform: 'uppercase', letterSpacing: '0.08em' }}>Câu hỏi</div>
              <div className="serif mono" style={{ fontSize: 28 }}>{idx + 1}<span style={{ fontSize: 14, color: 'var(--muted)' }}> / 40</span></div>
            </div>
            <div style={{ textAlign: 'right' }}>
              <div style={{ fontSize: 10.5, color: 'var(--muted)', textTransform: 'uppercase', letterSpacing: '0.08em' }}>Thời gian</div>
              <div className="serif mono" style={{ fontSize: 28, color: timeLeft < 300 ? 'var(--rose)' : 'var(--ink)' }}>{fmt(timeLeft)}</div>
            </div>
          </div>
        </div>
        <div className="card" style={{ padding: 36 }}>
          <div className="serif" style={{ fontSize: 28, lineHeight: 1.3, marginBottom: 24 }}>{question.q}</div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
            {question.opts.map((o, i) => (
              <div key={i} className={`opt-row ${answers[idx] === i ? 'selected' : ''}`} onClick={() => setAnswers({...answers, [idx]: i})} style={{ padding: 18 }}>
                <div className="opt-radio">{String.fromCharCode(65 + i)}</div>
                <div style={{ fontSize: 14, lineHeight: 1.5 }}>{o}</div>
              </div>
            ))}
          </div>
        </div>
        <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 24 }}>
          <button className="btn btn-ghost" onClick={() => setIdx(Math.max(0, idx - 1))}><Icon name="arrowLeft" size={13} /> Câu trước</button>
          <button className="btn btn-accent" onClick={() => setIdx(Math.min(39, idx + 1))}>Câu tiếp theo <Icon name="arrowRight" size={13} /></button>
        </div>
      </div>
      <aside style={{ background: 'var(--card)', borderLeft: '1px solid var(--line)', padding: 20, display: 'flex', flexDirection: 'column', gap: 14 }}>
        <div style={{ aspectRatio: '4/3', background: '#0a0a0a', borderRadius: 10, position: 'relative', overflow: 'hidden' }}>
          <div style={{ position: 'absolute', inset: 0, display: 'grid', placeItems: 'center' }}><Icon name="user" size={48} style={{ color: '#333' }} /></div>
          <div style={{ position: 'absolute', top: 10, left: 10, display: 'flex', alignItems: 'center', gap: 6, fontSize: 10.5, color: '#fff', fontFamily: 'var(--mono)' }}><span className="hdot pulse" style={{ background: '#ef4444' }}/> REC</div>
          <div style={{ position: 'absolute', bottom: 10, left: 10, color: 'rgba(255,255,255,0.6)', fontSize: 10, fontFamily: 'var(--mono)' }}>{STUDENT.name.toUpperCase()} · {STUDENT.id}</div>
        </div>
        <div>
          <div style={{ fontSize: 11, color: 'var(--muted)', textTransform: 'uppercase', letterSpacing: '0.08em', marginBottom: 10, fontWeight: 600 }}>Bảng câu hỏi</div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(8, 1fr)', gap: 4 }}>
            {Array.from({ length: 40 }, (_, i) => {
              const isAns = answers[i] !== undefined;
              return <button key={i} onClick={() => setIdx(i)} className="mono" style={{ aspectRatio: 1, borderRadius: 5, background: i === idx ? 'var(--accent)' : isAns ? 'var(--green-soft)' : 'var(--bg-2)', color: i === idx ? '#fff' : isAns ? 'var(--green)' : 'var(--ink-2)', fontSize: 10, fontWeight: 600, border: 'none' }}>{i+1}</button>;
            })}
          </div>
        </div>
        <div style={{ padding: 12, background: 'var(--bg-2)', borderRadius: 8, fontSize: 11.5, color: 'var(--ink-2)' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 4 }}><span>Đã làm</span><span className="mono" style={{ fontWeight: 600 }}>{answered}/40</span></div>
          <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 4 }}><span>Vi phạm</span><span className="mono" style={{ fontWeight: 600, color: tabSwitches > 0 ? 'var(--rose)' : 'var(--green)' }}>{tabSwitches}/3</span></div>
          <div style={{ display: 'flex', justifyContent: 'space-between' }}><span>Ảnh chụp</span><span className="mono" style={{ fontWeight: 600 }}>3 ảnh</span></div>
        </div>
        <button className="btn btn-primary" style={{ justifyContent: 'center' }} onClick={onSubmit}><Icon name="send" size={13} /> Nộp bài thi</button>
      </aside>
      {showWarning && (
        <div className="fadein" style={{ position: 'fixed', top: 20, left: '50%', transform: 'translateX(-50%)', background: 'var(--rose)', color: '#fff', padding: '12px 20px', borderRadius: 10, zIndex: 100, display: 'flex', gap: 10 }}>
          <Icon name="alert" size={14} /> Cảnh báo: phát hiện chuyển tab ({tabSwitches}/3)
        </div>
      )}
    </div>
  );
};

Object.assign(window, { ExamPage });