// Examine — Common UI primitives
const { useState, useEffect, useRef, useMemo, useCallback } = React;

// Icons (inline SVG)
function Icon({ name, size = 18 }) {
  const paths = {
    home: 'M3 9.5L12 3l9 6.5V20a1 1 0 0 1-1 1h-5v-7h-6v7H4a1 1 0 0 1-1-1V9.5z',
    book: 'M4 4h7a3 3 0 0 1 3 3v13M20 4h-7a3 3 0 0 0-3 3v13M4 4v15h7M20 4v15h-7',
    chart: 'M4 20V10M10 20V4M16 20v-7M22 20H2',
    play: 'M5 3l14 9-14 9V3z',
    case: 'M3 7h18v13H3zM8 7V5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2',
    moon: 'M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z',
    sun: 'M12 3v2M12 19v2M5 12H3M21 12h-2M5.6 5.6l1.4 1.4M17 17l1.4 1.4M5.6 18.4L7 17M17 7l1.4-1.4M12 8a4 4 0 1 1 0 8 4 4 0 0 1 0-8z',
    settings: 'M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM19.4 15a1.7 1.7 0 0 0 .4 1.9l.1.1a2 2 0 1 1-2.9 2.9l-.1-.1a1.7 1.7 0 0 0-1.9-.4 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1-1.5 1.7 1.7 0 0 0-1.9.4l-.1.1a2 2 0 1 1-2.9-2.9l.1-.1a1.7 1.7 0 0 0 .4-1.9 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1 1.7 1.7 0 0 0-.4-1.9l-.1-.1a2 2 0 1 1 2.9-2.9l.1.1a1.7 1.7 0 0 0 1.9.4 1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.9-.4l.1-.1a2 2 0 1 1 2.9 2.9l-.1.1a1.7 1.7 0 0 0-.4 1.9 1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1z',
    arrow: 'M5 12h14M13 6l6 6-6 6',
    arrowL: 'M19 12H5M11 6l-6 6 6 6',
    check: 'M5 12l4 4L19 7',
    x: 'M6 6l12 12M18 6L6 18',
    flag: 'M4 21V4h13l-2 5 2 5H4',
    chevron: 'M6 9l6 6 6-6',
    bookmark: 'M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z',
    refresh: 'M3 12a9 9 0 0 1 15.5-6.3L21 8M21 3v5h-5M21 12a9 9 0 0 1-15.5 6.3L3 16M3 21v-5h5',
    eye: 'M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12zM12 9a3 3 0 1 1 0 6 3 3 0 0 1 0-6z',
    target: 'M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20zM12 18a6 6 0 1 0 0-12 6 6 0 0 0 0 12zM12 14a2 2 0 1 0 0-4 2 2 0 0 0 0 4z'
  };
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
      <path d={paths[name] || ''} />
    </svg>
  );
}

function ScoreRing({ pct, size = 200, label = "Correct" }) {
  const stroke = 14;
  const r = (size - stroke) / 2;
  const c = 2 * Math.PI * r;
  const offset = c * (1 - pct);
  const color = pct >= 0.85 ? 'var(--good)' : pct >= 0.65 ? 'var(--clay)' : 'var(--bad)';
  return (
    <div className="score-ring" style={{ width: size, height: size }}>
      <svg viewBox={`0 0 ${size} ${size}`}>
        <circle cx={size/2} cy={size/2} r={r} stroke="var(--paper-3)" strokeWidth={stroke} fill="none" />
        <circle cx={size/2} cy={size/2} r={r} stroke={color} strokeWidth={stroke} fill="none"
          strokeDasharray={c} strokeDashoffset={offset} strokeLinecap="round"
          style={{ transition: 'stroke-dashoffset 1s ease' }} />
      </svg>
      <div className="val">
        <div>
          <div className="pct">{Math.round(pct * 100)}<span style={{fontSize:'1.2rem', color:'var(--ink-3)'}}>%</span></div>
          <div className="lbl">{label}</div>
        </div>
      </div>
    </div>
  );
}

function TopicDot({ topic }) {
  const t = window.EXAM_DATA.topics[topic];
  return <span className="t-dot" style={{ background: t?.color || 'var(--clay)' }}></span>;
}

function TopicTag({ topic }) {
  const t = window.EXAM_DATA.topics[topic];
  return (
    <span className="topic-tag">
      <TopicDot topic={topic} />
      {t?.label || topic}
    </span>
  );
}

function ModeBanner({ mode, onMode, instantFeedback, onInstant, role, timer }) {
  return (
    <div className="mode-banner">
      <div style={{display:'flex', alignItems:'center', gap:'1rem'}}>
        <span className="label">Mode</span>
        <div className="switch">
          <button className={mode==='practice'?'on':''} onClick={() => onMode('practice')}>Practice</button>
          <button className={mode==='exam'?'on':''} onClick={() => onMode('exam')}>Exam</button>
        </div>
        {mode === 'practice' && (
          <span style={{fontSize:'0.82rem', color:'var(--ink-3)'}}>
            Instant feedback after each answer
          </span>
        )}
        {mode === 'exam' && (
          <span style={{fontSize:'0.82rem', color:'var(--ink-3)'}}>
            Score revealed only at the end
          </span>
        )}
      </div>
      {timer && <span className={`timer ${timer.warn?'warn':''}`}>{timer.label}</span>}
    </div>
  );
}

Object.assign(window, { Icon, ScoreRing, TopicDot, TopicTag, ModeBanner });