// Examine — Browse / Study mode + Analytics + Case viewer
function Browse({ state, setState }) {
  const [setFilter, setSetFilter] = useState('all');
  const [topicFilter, setTopicFilter] = useState('all');
  const [revealAll, setRevealAll] = useState(false);
  const [revealed, setRevealed] = useState({});

  const allQ = useMemo(() => {
    const out = [];
    window.EXAM_DATA.sets.forEach((set, si) => {
      set.questions.forEach((q, qi) => out.push({ ...q, setId: set.id, setIdx: si, qIdx: qi, setTitle: set.title }));
    });
    return out;
  }, []);

  const filtered = allQ.filter(q =>
    (setFilter === 'all' || q.setId === setFilter) &&
    (topicFilter === 'all' || q.t === topicFilter)
  );

  return (
    <div className="fade-in">
      <div className="page-head">
        <div>
          <div className="eyebrow">Browse · Study Mode</div>
          <h2>All {allQ.length} questions, by set and topic</h2>
          <p>Filter by topic to drill weak areas. Click a question to reveal the answer and explanation.</p>
        </div>
        <button className="btn btn-ghost" onClick={() => setRevealAll(!revealAll)}>
          <Icon name="eye" size={16}/> {revealAll ? 'Hide all answers' : 'Reveal all'}
        </button>
      </div>

      <div className="filters">
        <button className={`filter-chip ${setFilter==='all'?'active':''}`} onClick={() => setSetFilter('all')}>All sets</button>
        {window.EXAM_DATA.sets.map((s, i) => (
          <button key={s.id} className={`filter-chip ${setFilter===s.id?'active':''}`} onClick={() => setSetFilter(s.id)}>Set {i+1}</button>
        ))}
      </div>
      <div className="filters" style={{marginBottom:'2rem'}}>
        <button className={`filter-chip ${topicFilter==='all'?'active':''}`} onClick={() => setTopicFilter('all')}>All topics</button>
        {Object.entries(window.EXAM_DATA.topics).map(([k, t]) => (
          <button key={k} className={`filter-chip ${topicFilter===k?'active':''}`} onClick={() => setTopicFilter(k)} style={{'--c': t.color}}>
            <span className="dot" style={{background: t.color}}></span>{t.label}
          </button>
        ))}
      </div>

      <div style={{fontSize:'0.85rem', color:'var(--ink-3)', marginBottom:'1rem'}}>
        Showing {filtered.length} question{filtered.length !== 1 ? 's' : ''}
      </div>

      <div className="browse-list">
        {filtered.map((q, i) => {
          const key = `${q.setId}-${q.qIdx}`;
          const show = revealAll || revealed[key];
          return (
            <div key={key} className="browse-card" onClick={() => setRevealed(r => ({...r, [key]: !r[key]}))}>
              <span className="ix">S{q.setIdx+1}·Q{String(q.qIdx+1).padStart(2,'0')}</span>
              <div>
                <div className="stem">{q.q}</div>
                <div style={{display:'flex', gap:'0.5rem', flexWrap:'wrap', marginTop:'0.4rem', alignItems:'center'}}>
                  <TopicTag topic={q.t} />
                  <span className="topic-tag" style={{color:'var(--ink-3)'}}>{q.setTitle.split('—')[0].trim()}</span>
                </div>
                {show && (
                  <div style={{marginTop:'0.7rem'}}>
                    {q.c.map((c, ci) => (
                      <div key={ci} style={{
                        padding:'0.45rem 0.75rem', marginBottom:'0.3rem', borderRadius:'6px',
                        background: ci === q.a ? 'var(--moss-soft)' : 'transparent',
                        color: ci === q.a ? 'var(--good)' : 'var(--ink-3)',
                        fontSize:'0.9rem',
                        fontWeight: ci === q.a ? 600 : 400
                      }}>
                        <strong>{String.fromCharCode(65+ci)}.</strong> {c} {ci === q.a && <Icon name="check" size={14} />}
                      </div>
                    ))}
                    <div className="answer" style={{fontFamily:'var(--serif)', fontStyle:'italic'}}>{q.e}</div>
                  </div>
                )}
              </div>
              <Icon name="chevron" size={16} />
            </div>
          );
        })}
      </div>
    </div>
  );
}

function Analytics({ state }) {
  const topicAgg = window.Stats.topicAccuracy(state);
  const overall = window.Stats.overallStats(state);
  const recent = (state.history || []).slice(-50).reverse();

  // Build heatmap: last N answers chronologically
  const heatCells = [];
  Object.values(state.sessions || {}).forEach(s => {
    if (!s.finishedAt) return;
    const set = window.EXAM_DATA.sets.find(x => x.id === s.setId);
    if (!set) return;
    set.questions.forEach((q, i) => {
      const a = s.answers[i];
      const status = a === undefined ? 'skipped' : (a === q.a ? 'correct' : 'wrong');
      heatCells.push({ status, t: s.finishedAt });
    });
  });
  heatCells.sort((a, b) => a.t - b.t);
  const cells = heatCells.slice(-150);
  while (cells.length < 150) cells.push({ status: 'pending' });

  // Find weakest topic
  const sortedTopics = Object.entries(topicAgg).map(([t, v]) => ({ t, ...v, pct: v.correct/v.total })).sort((a,b) => a.pct - b.pct);
  const weakest = sortedTopics[0];
  const strongest = sortedTopics[sortedTopics.length - 1];

  return (
    <div className="fade-in">
      <div className="page-head">
        <div>
          <div className="eyebrow">Performance</div>
          <h2>Your Analytics</h2>
          <p>Aggregated across every session. Use this to decide what to drill next.</p>
        </div>
      </div>

      <div className="results-summary" style={{marginBottom:'2rem'}}>
        <div className="summary-tile"><div className="num">{overall.attempts}</div><div className="lbl">Attempts</div></div>
        <div className="summary-tile"><div className="num">{overall.answered}</div><div className="lbl">Questions</div></div>
        <div className="summary-tile"><div className="num" style={{color:'var(--good)'}}>{overall.correct}</div><div className="lbl">Correct</div></div>
        <div className="summary-tile"><div className="num">{Math.round(overall.accuracy*100)}<span style={{fontSize:'1rem', color:'var(--ink-3)'}}>%</span></div><div className="lbl">Accuracy</div></div>
      </div>

      <div className="analytics-grid">
        <div className="panel">
          <h3>Topic mastery</h3>
          <p className="panel-sub">Accuracy across all 9 topics covered.</p>
          {Object.keys(topicAgg).length === 0 ? <div className="empty" style={{padding:'1.5rem'}}>Take a session first to see topic stats.</div> :
            Object.entries(window.EXAM_DATA.topics).map(([k, t]) => {
              const v = topicAgg[k] || { correct: 0, total: 0 };
              const pct = v.total ? v.correct/v.total : 0;
              return (
                <div key={k} className="topic-row">
                  <div className="lbl"><TopicDot topic={k} />{t.label}</div>
                  <div className="bar"><div style={{ width: `${pct*100}%`, background: t.color }}></div></div>
                  <div className="pct">{v.total ? `${v.correct}/${v.total}` : '—'}</div>
                </div>
              );
            })}
        </div>

        <div className="panel">
          <h3>Recommendations</h3>
          <p className="panel-sub">Based on your performance.</p>
          {weakest && weakest.total > 0 ? (
            <div style={{padding:'1rem 1.2rem', background:'var(--clay-soft)', borderRadius:'var(--r-md)', borderLeft:'3px solid var(--clay)', marginBottom:'1rem', color:'var(--ink-2)'}}>
              <div style={{fontSize:'0.74rem', textTransform:'uppercase', letterSpacing:'0.1em', fontWeight:700, color:'var(--clay-deep)'}}>Drill next</div>
              <div style={{fontFamily:'var(--serif)', fontSize:'1.1rem', marginTop:'0.4rem', color:'var(--ink)'}}>{window.EXAM_DATA.topics[weakest.t]?.label}</div>
              <div style={{fontSize:'0.85rem', marginTop:'0.3rem'}}>Currently at {Math.round(weakest.pct*100)}% — your weakest topic. Filter Browse mode by this topic to focus.</div>
            </div>
          ) : <div className="empty" style={{padding:'1rem'}}>No data yet.</div>}
          {strongest && strongest.total > 0 && strongest.t !== weakest?.t && (
            <div style={{padding:'1rem 1.2rem', background:'var(--moss-soft)', borderRadius:'var(--r-md)', borderLeft:'3px solid var(--good)', color:'var(--ink-2)'}}>
              <div style={{fontSize:'0.74rem', textTransform:'uppercase', letterSpacing:'0.1em', fontWeight:700, color:'var(--good)'}}>Strongest</div>
              <div style={{fontFamily:'var(--serif)', fontSize:'1.1rem', marginTop:'0.4rem', color:'var(--ink)'}}>{window.EXAM_DATA.topics[strongest.t]?.label}</div>
              <div style={{fontSize:'0.85rem', marginTop:'0.3rem'}}>{Math.round(strongest.pct*100)}% accuracy. Solid command.</div>
            </div>
          )}
        </div>

        <div className="panel" style={{gridColumn:'1 / -1'}}>
          <h3>Activity heatmap</h3>
          <p className="panel-sub">Last 150 answers, oldest → newest. Green = correct, red = wrong, gray = skipped.</p>
          <div className="heatmap">
            {cells.map((c, i) => (
              <div key={i} className={`heat-cell ${c.status}`} title={c.status}></div>
            ))}
          </div>
        </div>

        <div className="panel" style={{gridColumn:'1 / -1'}}>
          <h3>Session history</h3>
          {recent.length === 0 ? <div className="empty" style={{padding:'1.5rem'}}>No sessions completed yet.</div> :
            <div style={{maxHeight:'320px', overflowY:'auto'}}>
              {recent.map((h, i) => {
                const set = window.EXAM_DATA.sets.find(s => s.id === h.setId);
                const pct = h.score / h.total;
                return (
                  <div key={i} style={{display:'grid', gridTemplateColumns:'auto 1fr auto auto', gap:'1rem', padding:'0.7rem 0', borderBottom:'1px solid var(--rule-soft)', alignItems:'center'}}>
                    <span style={{fontFamily:'var(--mono)', fontSize:'0.78rem', color:'var(--ink-3)'}}>{new Date(h.finishedAt).toLocaleDateString()}</span>
                    <span style={{fontFamily:'var(--serif)'}}>{set?.title}</span>
                    <span className="tag">{h.mode}</span>
                    <span style={{fontFamily:'var(--mono)', fontWeight:600, color: pct>=0.7?'var(--good)':pct>=0.5?'var(--clay-deep)':'var(--bad)'}}>{h.score}/{h.total}</span>
                  </div>
                );
              })}
            </div>}
        </div>
      </div>
    </div>
  );
}

window.Browse = Browse;
window.Analytics = Analytics;