// Mock interview log

function MocksView() {
  const { state, update } = useStore();
  const data = window.PLAN_DATA;
  const setMock = (id, patch) => {
    update(prev => ({ ...prev, mocks: { ...prev.mocks, [id]: { ...prev.mocks[id], ...patch } } }));
  };

  const scored = data.mocks.filter(m => state.mocks[m.id]?.score).length;
  const avgScore = (() => {
    const scores = data.mocks.map(m => parseFloat(state.mocks[m.id]?.score)).filter(s => !isNaN(s));
    if (!scores.length) return null;
    return (scores.reduce((a,b) => a+b, 0) / scores.length).toFixed(1);
  })();

  return (
    <div className="fade-in">
      <div className="section-h">
        <div>
          <div className="kicker">Mock interview log · 11 sessions</div>
          <h1 className="h-title">Reps under <em>pressure</em>.</h1>
        </div>
        <div style={{display:'flex',gap:'14px'}}>
          <Stat label="Logged" value={<CountUp to={scored} />} sub={`of ${data.mocks.length}`} />
          {avgScore && <Stat label="Avg Score" value={avgScore} sub="/ 10" accent />}
        </div>
      </div>

      {/* Score trend */}
      {(() => {
        const series = data.mocks
          .map(m => ({ id: m.id, date: m.date, score: parseFloat(state.mocks[m.id]?.score) }))
          .filter(x => !isNaN(x.score));
        if (series.length === 0) return null;
        const values = series.map(x => x.score);
        const ready = series.every(x => x.score >= 6);
        return (
          <div className="card" style={{marginBottom:'18px', display:'flex', alignItems:'center', gap:'24px'}}>
            <div>
              <div className="kicker">Score trend · readiness bar at 6.0</div>
              <div style={{fontFamily:'var(--serif)',fontSize:'22px',marginTop:'4px'}}>
                {ready ? <>Above the bar. <em>Launch.</em></> : <>Below bar on at least one mock — extend Phase 3 if it persists.</>}
              </div>
            </div>
            <div style={{marginLeft:'auto'}}>
              <Sparkline values={values} threshold={6} width={220} height={48} stroke={ready ? 'var(--accent)' : 'var(--warn)'} />
              <div className="mono muted" style={{fontSize:'10px', marginTop:'4px', textAlign:'right'}}>
                {series.map(s => s.id).join(' · ')}
              </div>
            </div>
          </div>
        );
      })()}

      <div className="col" style={{gap:'10px'}}>
        {data.mocks.map((m, i) => {
          const s = state.mocks[m.id] || {};
          const isHld = m.id.startsWith('HLD');
          return (
            <div key={m.id} className="card" style={{
              padding:'18px 22px',
              animation:`fadeUp 0.3s ${i*30}ms cubic-bezier(0.2,0.8,0.2,1) both`
            }}>
              <div style={{display:'grid',gridTemplateColumns:'80px 100px 1fr 200px 80px',gap:'14px',alignItems:'center',marginBottom: s.score || s.well || s.improve ? '14px' : 0}}>
                <span className="mono" style={{fontSize:'14px',color: isHld ? 'oklch(0.85 0.15 80)' : 'var(--accent)',fontWeight:600,letterSpacing:'0.04em'}}>
                  {m.id}
                </span>
                <span className="mono" style={{fontSize:'11px',color:'var(--ink-2)'}}>{m.date}</span>
                <span style={{fontSize:'14px',fontWeight:500}}>{m.type}</span>
                <span className="mono muted" style={{fontSize:'11px'}}>{m.platform}</span>
                <input
                  className="input"
                  placeholder="0–10"
                  value={s.score || ''}
                  onChange={e => setMock(m.id, { score: e.target.value })}
                  style={{padding:'6px 10px',fontSize:'13px',textAlign:'center',fontFamily:'var(--mono)'}}
                />
              </div>
              {(s.score || s.well || s.improve) && (
                <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:'12px',paddingTop:'12px',borderTop:'1px solid var(--line-soft)'}}>
                  <div>
                    <div className="mono" style={{fontSize:'10px',color:'oklch(0.84 0.14 165)',letterSpacing:'0.1em',marginBottom:'6px'}}>WHAT WENT WELL</div>
                    <textarea
                      className="textarea"
                      value={s.well || ''}
                      onChange={e => setMock(m.id, { well: e.target.value })}
                      style={{minHeight:'56px',fontSize:'12px'}}
                    />
                  </div>
                  <div>
                    <div className="mono" style={{fontSize:'10px',color:'oklch(0.85 0.16 25)',letterSpacing:'0.1em',marginBottom:'6px'}}>WHAT TO IMPROVE</div>
                    <textarea
                      className="textarea"
                      value={s.improve || ''}
                      onChange={e => setMock(m.id, { improve: e.target.value })}
                      style={{minHeight:'56px',fontSize:'12px'}}
                    />
                  </div>
                </div>
              )}
            </div>
          );
        })}
      </div>
    </div>
  );
}

window.MocksView = MocksView;