/* eslint-disable */
const D7 = window.PERSONA_DATA;

// ---------- Generation runs (history) ----------
const PageRuns = () => (
  <div className="page">
    <div className="page-head row between">
      <div><div className="eyebrow">Last 24h · 218 runs</div><h1 className="page-title">Generation runs</h1></div>
      <div className="row" style={{gap:8}}>
        <button className="btn">{I("filter",14)} Filters</button>
        <button className="btn">{I("download",14)} Export</button>
      </div>
    </div>
    <div className="grid grid-4" style={{marginBottom:18}}>
      <div className="card stat"><div className="lbl">Completed</div><div className="val">204</div><div className="delta">93.6%</div></div>
      <div className="card stat"><div className="lbl">Failed</div><div className="val">8</div><div className="delta down">3.7%</div></div>
      <div className="card stat"><div className="lbl">Audit-blocked</div><div className="val">6</div><div className="delta down">2.7%</div></div>
      <div className="card stat"><div className="lbl">p95 latency</div><div className="val">28.4s</div><div className="delta">target ≤30s</div></div>
    </div>
    <div className="card" style={{padding:0}}>
      <table className="tbl">
        <thead><tr><th>Run</th><th>Persona</th><th>Pipeline stages</th><th>Tokens</th><th>Cost</th><th>Latency</th><th>Status</th><th>When</th></tr></thead>
        <tbody>
          {[...D7.recentRuns, ...D7.recentRuns, ...D7.recentRuns].map((r,i)=>(
            <tr key={i}>
              <td className="mono">{r.id}_{i}</td>
              <td>{r.persona}</td>
              <td><div className="row" style={{gap:3}}>
                {[1,2,3,4,5,6].map(s=>(
                  <div key={s} style={{width:18,height:6,borderRadius:2,background:r.status==="completed"?"var(--moss)":s<=2?"var(--moss)":"var(--ruby)"}}/>
                ))}
              </div></td>
              <td className="mono">{r.tokens.toLocaleString()}</td>
              <td className="mono">${r.cost.toFixed(2)}</td>
              <td className="mono">{r.lat}s</td>
              <td>{r.status==="completed"?<span className="tag moss"><span className="dot"/>completed</span>:<span className="tag ruby"><span className="dot"/>{r.err||"failed"}</span>}</td>
              <td className="muted">{r.when}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  </div>
);

// ---------- Audits & Tests ----------
const PageAudits = () => (
  <div className="page">
    <div className="page-head">
      <div className="eyebrow">Quality engineering</div>
      <h1 className="page-title">Audits & test suites</h1>
      <div className="page-sub">LLM-as-judge audit on every generation. Provocation suite (24 prompts). Voice fingerprint drift over time.</div>
    </div>

    <div className="grid grid-3" style={{marginBottom:18}}>
      <div className="card stat"><div className="lbl">Audit pass rate (7d)</div><div className="val">96.4%</div><div className="delta">+0.8</div></div>
      <div className="card stat"><div className="lbl">Provocation pass</div><div className="val">87.1%</div><div className="delta">target ≥85%</div></div>
      <div className="card stat"><div className="lbl">Distinct. (median)</div><div className="val">0.52</div><div className="delta">target ≥0.45</div></div>
    </div>

    <div className="grid grid-2" style={{gap:18,marginBottom:18}}>
      <div className="card card-pad">
        <h3 className="section-title" style={{marginBottom:12}}>Persona Test Suite · catalog</h3>
        <div className="col" style={{gap:6}}>
          {[
            ["Stay-in-character","12 prompts","critical"],
            ["Jailbreak resistance","6 prompts","critical"],
            ["Memory recall","4 prompts","high"],
            ["Voice consistency","8 prompts","high"],
            ["Refusal correctness","8 prompts","critical"],
            ["Contradiction probing","6 prompts","high"],
            ["Distinctiveness vs siblings","auto","medium"],
            ["Multilingual stability","2 prompts","medium"],
          ].map(([n,c,sev],i)=>(
            <div key={i} className="row between" style={{padding:"10px 0",borderBottom:"1px solid var(--line)"}}>
              <div><div style={{fontFamily:"var(--serif)",fontSize:14}}>{n}</div><div className="muted mono" style={{fontSize:11}}>{c}</div></div>
              <span className={"tag "+(sev==="critical"?"ruby":sev==="high"?"gold":"")}><span className="dot"/>{sev}</span>
            </div>
          ))}
        </div>
      </div>
      <div className="card card-pad">
        <h3 className="section-title" style={{marginBottom:12}}>LLM judge rubric (audit)</h3>
        <div className="code">{`{
  "soul_self_coherence":   1-5,
  "self_mask_coherence":   1-5,
  "mask_surface_coherence":1-5,
  "internal_contradictions": 0..N,
  "celebrity_collision":   bool,
  "minor_reference":       bool,
  "pii_leak":              bool,
  "verdict":               "pass" | "warn" | "fail"
}`}</div>
        <div className="muted" style={{fontSize:12.5,marginTop:10,lineHeight:1.55}}>Run by an independent <span style={{color:"var(--ink)"}}>opus-4-1</span> call against the full persona JSON. Failures block save. Warns are flagged in the editor.</div>
      </div>
    </div>

    <div className="card card-pad">
      <h3 className="section-title" style={{marginBottom:14}}>Quality over time · 28d</h3>
      <div className="grid grid-3" style={{gap:18}}>
        <div>
          <div className="muted" style={{fontSize:12,marginBottom:6}}>Coherence</div>
          <Spark data={D7.usageByDay.map(d=>4 + Math.sin(d.day*0.4)*0.2 + Math.random()*0.2)} w={300} h={70} color="var(--moss)"/>
        </div>
        <div>
          <div className="muted" style={{fontSize:12,marginBottom:6}}>Suite pass rate</div>
          <Spark data={D7.usageByDay.map(d=>85 + Math.sin(d.day*0.3)*4 + Math.random()*3)} w={300} h={70} color="var(--ember)"/>
        </div>
        <div>
          <div className="muted" style={{fontSize:12,marginBottom:6}}>Distinctiveness</div>
          <Spark data={D7.usageByDay.map(d=>0.5 + Math.sin(d.day*0.5)*0.05 + Math.random()*0.04)} w={300} h={70} color="var(--gold)"/>
        </div>
      </div>
    </div>
  </div>
);

window.PageRuns = PageRuns;
window.PageAudits = PageAudits;

// ---------- Tweaks panel (in-design tweaks) ----------
const TweaksPanel = ({ tweaks, set, onClose }) => (
  <div className="tweaks">
    <div className="row between" style={{marginBottom:10}}>
      <div className="eyebrow">Tweaks</div>
      <button className="muted" style={{fontSize:14,cursor:"pointer"}} onClick={onClose}>×</button>
    </div>
    <div className="col" style={{gap:10}}>
      <div>
        <div className="muted" style={{fontSize:11,marginBottom:6}}>Brand accent</div>
        <div className="row" style={{gap:8}}>
          {[["#E8763A","ember"],["#D4AC4F","gold"],["#7E5B89","plum"],["#6B8A4A","moss"]].map(([c,n])=>(
            <div key={c} onClick={()=>set({accent:c})} style={{width:28,height:28,borderRadius:6,background:c,cursor:"pointer",border:tweaks.accent===c?"2px solid #fff":"2px solid transparent"}} title={n}/>
          ))}
        </div>
      </div>
      <div>
        <div className="muted" style={{fontSize:11,marginBottom:6}}>Type</div>
        <div className="pill-tabs" style={{width:"100%"}}>
          {["Newsreader","Source Serif 4","Iowan"].map(f =>
            <span key={f} className={"pt "+(tweaks.serif===f?"on":"")} style={{flex:1,textAlign:"center"}} onClick={()=>set({serif:f})}>{f.split(" ")[0]}</span>
          )}
        </div>
      </div>
      <div className="row between"><span style={{fontSize:13}}>Density</span>
        <div className="pill-tabs"><span className={"pt "+(tweaks.density==="cozy"?"on":"")} onClick={()=>set({density:"cozy"})}>Cozy</span><span className={"pt "+(tweaks.density==="comfy"?"on":"")} onClick={()=>set({density:"comfy"})}>Comfy</span></div>
      </div>
      <div className="row between"><span style={{fontSize:13}}>Show portraits</span>
        <div className={"toggle "+(tweaks.portraits?"on":"")} onClick={()=>set({portraits:!tweaks.portraits})}/>
      </div>
      <div className="row between"><span style={{fontSize:13}}>Dev-mode badges</span>
        <div className={"toggle "+(tweaks.dev?"on":"")} onClick={()=>set({dev:!tweaks.dev})}/>
      </div>
    </div>
  </div>
);

window.TweaksPanel = TweaksPanel;