// Examine — Part 2 Case Viewer with progressive reveals
function CaseViewer({ state, setState }) {
  const [activeSetId, setActiveSetId] = useState(window.EXAM_DATA.sets[0].id);
  const [openSection, setOpenSection] = useState('intro');
  const [stepReveal, setStepReveal] = useState(0); // how many steps revealed

  const set = window.EXAM_DATA.sets.find(s => s.id === activeSetId);
  const c = set.part2;

  // Reset reveals on set change
  useEffect(() => { setStepReveal(0); setOpenSection('intro'); }, [activeSetId]);

  const sections = [
    { id: 'intro', title: 'Briefing', step: '01' },
    { id: 'params', title: 'Project Parameters', step: '02' },
    { id: 'traps', title: 'Trap Items — What to Include / Exclude', step: '03' },
    { id: 'calc', title: 'Cash Flow Construction & NPV', step: '04' },
    { id: 'sens', title: 'Sensitivity & Scenario Analysis', step: '05' },
    { id: 'memo', title: 'CFO Recommendation Memo', step: '06' }
  ];

  const toggle = (id) => setOpenSection(openSection === id ? null : id);

  return (
    <div className="fade-in">
      <div className="page-head">
        <div>
          <div className="eyebrow">Part 2 · Case Studies</div>
          <h2>End-to-end capital budgeting analyses</h2>
          <p>Step through how the case is built — params, opportunity-cost vs sunk-cost screen, OCF construction, NPV/IRR, sensitivity, and the CFO recommendation.</p>
        </div>
      </div>

      <div className="filters" style={{marginBottom:'1.6rem'}}>
        {window.EXAM_DATA.sets.map((s, i) => (
          <button key={s.id} className={`filter-chip ${activeSetId===s.id?'active':''}`} onClick={() => setActiveSetId(s.id)}>
            Set {i+1} · {s.caseTitle.split('—')[0].trim()}
          </button>
        ))}
      </div>

      <div className="case-shell">
        <div>
          <div style={{padding:'1.4rem 1.6rem', background:'linear-gradient(135deg, var(--paper-2), var(--paper-3))', borderRadius:'var(--r-lg)', border:'1px solid var(--rule)', marginBottom:'1rem'}}>
            <div className="eyebrow" style={{fontSize:'0.72rem', letterSpacing:'0.16em', textTransform:'uppercase', color:'var(--clay-deep)', fontWeight:600}}>Case Study</div>
            <h3 style={{marginTop:'0.4rem', fontSize:'1.5rem'}}>{c.title}</h3>
            <p style={{margin:'0.6rem 0 0', fontFamily:'var(--serif)', fontSize:'1rem', color:'var(--ink-2)', fontStyle:'italic'}}>{c.intro}</p>
          </div>

          {sections.slice(1).map((sec, idx) => (
            <div key={sec.id} className={`case-section ${openSection===sec.id?'open':''}`}>
              <header onClick={() => toggle(sec.id)}>
                <div style={{display:'flex', alignItems:'center'}}>
                  <span className="step">{sec.step}</span>
                  <h3>{sec.title}</h3>
                </div>
                <Icon name="chevron" size={18} />
              </header>
              <div className="body">
                {sec.id === 'params' && (
                  <div className="params-grid">
                    {c.params.map(([k, v], i) => (
                      <div key={i} className="row"><span className="k">{k}</span><span className="v">{v}</span></div>
                    ))}
                  </div>
                )}
                {sec.id === 'traps' && (
                  <div>
                    <p style={{fontFamily:'var(--serif)', fontStyle:'italic', color:'var(--ink-3)', marginBottom:'1rem'}}>Before computing cash flows, screen each candidate item: is it incremental to the decision, or already irrelevant?</p>
                    {c.traps.map((t, i) => (
                      <div key={i} className={`trap-card ${t.treatment === 'EXCLUDE' ? 'exclude' : 'include'}`}>
                        <div className="ic"><Icon name={t.treatment === 'EXCLUDE' ? 'x' : 'check'} size={16} /></div>
                        <div>
                          <div className="nm">{t.item}</div>
                          <div className="why">{t.why}</div>
                        </div>
                        <div className="verdict">{t.treatment}</div>
                      </div>
                    ))}
                  </div>
                )}
                {sec.id === 'calc' && (
                  <div>
                    <div style={{display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:'1rem'}}>
                      <p style={{fontFamily:'var(--serif)', fontStyle:'italic', color:'var(--ink-3)', margin:0}}>Click to reveal step by step, or jump to the result.</p>
                      <div style={{display:'flex', gap:'0.4rem'}}>
                        <button className="btn btn-ghost" style={{padding:'0.45rem 0.8rem', fontSize:'0.82rem'}} onClick={() => setStepReveal(Math.max(0, stepReveal - 1))}>− Step</button>
                        <button className="btn btn-ghost" style={{padding:'0.45rem 0.8rem', fontSize:'0.82rem'}} onClick={() => setStepReveal(Math.min(c.steps.length, stepReveal + 1))}>+ Step</button>
                        <button className="btn btn-clay" style={{padding:'0.45rem 0.8rem', fontSize:'0.82rem'}} onClick={() => setStepReveal(stepReveal === c.steps.length ? 0 : c.steps.length)}>{stepReveal === c.steps.length ? 'Hide all' : 'Reveal all'}</button>
                      </div>
                    </div>
                    <div className="steps-list">
                      {c.steps.slice(0, stepReveal).map((s, i) => (
                        <div key={i} className={`step-row ${s.highlight?'highlight':''}`}>
                          <span className="ix">{String(i+1).padStart(2,'0')}</span>
                          <span className="lbl">{s.label}{s.detail && <span className="detail">{s.detail}</span>}</span>
                          <span className="v">{s.value}</span>
                        </div>
                      ))}
                      {stepReveal === 0 && <div className="empty">Use + Step or Reveal all to walk through the build.</div>}
                    </div>
                  </div>
                )}
                {sec.id === 'sens' && (
                  <table className="sens-table">
                    <thead>
                      <tr><th>Scenario</th><th>NPV impact</th><th>Decision</th></tr>
                    </thead>
                    <tbody>
                      {c.sensitivity.map((r, i) => {
                        const flip = /flip/i.test(r.decision);
                        const reject = /reject/i.test(r.decision);
                        const cls = flip ? 'flip' : reject ? 'reject' : 'accept';
                        return (
                          <tr key={i}>
                            <td>{r.scenario}</td>
                            <td className="npv">{r.npv}</td>
                            <td><span className={`pill ${cls}`}>{r.decision}</span></td>
                          </tr>
                        );
                      })}
                    </tbody>
                  </table>
                )}
                {sec.id === 'memo' && (
                  <div className="memo-card">
                    <div className="meta">CFO Memorandum · Recommendation</div>
                    {c.memo}
                  </div>
                )}
              </div>
            </div>
          ))}
        </div>

        <aside>
          <div className="panel" style={{position:'sticky', top:'80px', padding:'1.2rem 1.3rem'}}>
            <h4 style={{fontFamily:'var(--sans)', fontSize:'0.78rem', textTransform:'uppercase', letterSpacing:'0.1em', color:'var(--ink-3)', marginBottom:'0.9rem', fontWeight:600}}>Navigate</h4>
            {sections.map(s => (
              <button key={s.id} onClick={() => { setOpenSection(s.id); document.querySelector(`.case-section.open`)?.scrollIntoView?.({block:'start'}); }} style={{
                display:'flex', width:'100%', justifyContent:'space-between', alignItems:'center',
                background: openSection===s.id?'var(--paper-3)':'transparent',
                border:'0', padding:'0.55rem 0.7rem', textAlign:'left',
                borderRadius:'6px', marginBottom:'2px', cursor:'pointer',
                color: openSection===s.id?'var(--ink)':'var(--ink-2)',
                fontSize:'0.88rem'
              }}>
                <span><span style={{fontFamily:'var(--mono)', fontSize:'0.74rem', color:'var(--ink-3)', marginRight:'0.5rem'}}>{s.step}</span>{s.title}</span>
              </button>
            ))}
            <div style={{marginTop:'1rem', paddingTop:'1rem', borderTop:'1px solid var(--rule)', fontSize:'0.78rem', color:'var(--ink-3)'}}>
              <div style={{display:'flex', justifyContent:'space-between', marginBottom:'0.4rem'}}><span>WACC</span><span style={{fontFamily:'var(--mono)', color:'var(--ink)'}}>{c.params.find(p => /WACC/i.test(p[0]))?.[1]}</span></div>
              <div style={{display:'flex', justifyContent:'space-between'}}><span>Tax</span><span style={{fontFamily:'var(--mono)', color:'var(--ink)'}}>{c.params.find(p => /Tax/i.test(p[0]))?.[1]}</span></div>
            </div>
          </div>
        </aside>
      </div>
    </div>
  );
}

window.CaseViewer = CaseViewer;