// ───────────────────────────────────────────────────────────────────────────
// PLACEHOLDER / SCAFFOLDING — intentionally unstyled.
// This is a raw verification table for the SAE data layer (window.AtlasData.SAE,
// populated by sae-loader.js). It exists so we can confirm the metrics are wired
// correctly before visual design. Claude Design: feel free to restyle or replace
// this entirely. The interesting data for visualization is each layer's
// `training_curve` (per-checkpoint EV / L0 / dead% arrays) — see SAE_CONTRACT.md.
// ───────────────────────────────────────────────────────────────────────────

function SAEDebugPanel() {
  const [st, setSt] = React.useState(window.SAELoader ? window.SAELoader.state : { status: 'idle' });
  const [, tick] = React.useReducer(x => x + 1, 0);

  React.useEffect(() => {
    if (!window.SAELoader) return;
    const unsub = window.SAELoader.subscribe(setSt);
    const onReady = () => tick();
    window.addEventListener('sae-data-ready', onReady);
    return () => { unsub && unsub(); window.removeEventListener('sae-data-ready', onReady); };
  }, []);

  const sae = (window.AtlasData && window.AtlasData.SAE) || null;
  const layers = sae ? sae.layers : [];
  const fmt = (v, d = 3) => (typeof v === 'number' ? v.toFixed(d) : '—');
  const repoShort = r => (r ? r.split('/').pop().replace('gemma-4-e2b-', '') : '—');

  return (
    <div data-screen-label="sae-debug" style={{ fontFamily: 'var(--mono, monospace)', fontSize: 12 }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 6 }}>
        <div>
          <div className="bf-eyebrow">SAE training metrics</div>
          <div className="bf-sub">
            placeholder scaffolding · {st.status}
            {st.status === 'loading' ? ` · ${Math.round((st.progress || 0) * 100)}%` : ''}
            {sae ? ` · ${sae.meta.loaded}/${sae.meta.expected} layers` : ''}
          </div>
        </div>
        <span style={{ opacity: 0.6, fontStyle: 'italic' }}>raw data check — restyle me</span>
      </div>

      {st.status === 'error' && (
        <div style={{ color: '#a33', padding: 8 }}>SAE load failed: {st.error}</div>
      )}

      {layers.length > 0 ? (
        <table style={{ borderCollapse: 'collapse', width: '100%' }}>
          <thead>
            <tr style={{ textAlign: 'right', opacity: 0.7 }}>
              <th style={{ textAlign: 'left', padding: '3px 8px' }}>layer</th>
              <th style={{ textAlign: 'left', padding: '3px 8px' }}>source</th>
              <th style={{ padding: '3px 8px' }}>EV</th>
              <th style={{ padding: '3px 8px' }}>mean L0</th>
              <th style={{ padding: '3px 8px' }}>dead %</th>
              <th style={{ padding: '3px 8px' }}>recon</th>
              <th style={{ padding: '3px 8px' }}>steps</th>
              <th style={{ padding: '3px 8px' }}>ckpts</th>
            </tr>
          </thead>
          <tbody>
            {layers.map(L => (
              <tr key={L.layer} style={{ borderTop: '1px solid rgba(0,0,0,0.08)', textAlign: 'right' }}
                  title={L.note || ''}>
                <td style={{ textAlign: 'left', padding: '3px 8px' }}>L{L.layer}</td>
                <td style={{ textAlign: 'left', padding: '3px 8px' }}>
                  {repoShort(L.repo)}{L.note ? ' *' : ''}
                </td>
                <td style={{ padding: '3px 8px' }}>{fmt(L.ev)}</td>
                <td style={{ padding: '3px 8px' }}>{fmt(L.mean_l0, 1)}</td>
                <td style={{ padding: '3px 8px' }}>{fmt(L.dead_pct, 1)}</td>
                <td style={{ padding: '3px 8px' }}>{fmt(L.recon_loss, 5)}</td>
                <td style={{ padding: '3px 8px' }}>{L.n_steps ?? '—'}</td>
                <td style={{ padding: '3px 8px' }}>{(L.training_curve && L.training_curve.ev.length) || 0}</td>
              </tr>
            ))}
          </tbody>
        </table>
      ) : (
        st.status !== 'error' && <div style={{ opacity: 0.6, padding: 8 }}>loading SAE metrics…</div>
      )}

      {layers.some(L => L.note) && (
        <div style={{ opacity: 0.6, marginTop: 6, fontSize: 11 }}>
          * source switched for this layer — hover the row for why.
        </div>
      )}
    </div>
  );
}

window.SAEDebugPanel = SAEDebugPanel;