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

// ---------- Persona Detail (Soul → Surface) ----------
const PageDetail = ({ persona, go }) => {
  const p = persona || D3.personas[0];
  const [tab, setTab] = useState("layers");
  const [editMode, setEditMode] = useState("cascade");
  const soul = p.soul || D3.personas[0].soul;
  const self_ = p.self || D3.personas[0].self;
  const mask = p.mask || D3.personas[0].mask;
  const surf = p.surface || D3.personas[0].surface;

  return (
    <div className="page" style={{maxWidth:1480}}>
      <div className="row between" style={{marginBottom:18,gap:14,alignItems:"flex-start"}}>
        <div style={{display:"flex",gap:18,alignItems:"flex-start"}}>
          <div style={{width:120,height:150}}>
            <PortraitPlaceholder cls={p.portrait}/>
          </div>
          <div>
            <div className="eyebrow" style={{marginBottom:4}}>persona · {p.id}</div>
            <h1 className="page-title" style={{fontSize:36}}>{p.name}</h1>
            <div className="page-sub" style={{marginTop:4,fontFamily:"var(--serif)",fontStyle:"italic"}}>"{p.tagline}"</div>
            <div className="row" style={{marginTop:10,gap:6,flexWrap:"wrap"}}>
              <span className="tag ember"><span className="dot"/>{p.archetype}</span>
              <span className="tag"><span className="dot"/>v3 · 4 ancestors</span>
              <span className="tag sky"><span className="dot"/>lang:{p.lang}</span>
              <span className="tag moss"><span className="dot"/>quality {(p.quality||4.5).toFixed(2)}</span>
              <span className="tag plum"><span className="dot"/>distinct {(p.distinctiveness||0.6).toFixed(2)}</span>
            </div>
          </div>
        </div>
        <div className="row" style={{gap:8}}>
          <button className="btn">{I("fork",14)} Fork</button>
          <button className="btn">{I("download",14)} Export</button>
          <button className="btn primary" onClick={()=>go("chat", p)}>{I("chat",14)} Chat with {p.name.split(" ")[0]}</button>
        </div>
      </div>

      <div className="tabs">
        {[["layers","Layers"],["dna","DNA"],["voice","Voice & runtime"],["versions","Versions"],["tests","Tests & audit"]].map(([k,l])=>
          <div key={k} className={"tab "+(tab===k?"active":"")} onClick={()=>setTab(k)}>{l}</div>
        )}
        <div className="spacer" style={{flex:1}}/>
        <div className="row" style={{gap:8,padding:"6px 0"}}>
          <span className="muted" style={{fontSize:11.5}}>edit mode:</span>
          <div className="pill-tabs">
            {["lock","cascade","manual","refine"].map(m =>
              <span key={m} className={"pt "+(editMode===m?"on":"")} onClick={()=>setEditMode(m)}>{m}</span>
            )}
          </div>
        </div>
      </div>

      {tab==="layers" && (
        <div className="grid" style={{gridTemplateColumns:"1fr 320px",gap:22}}>
          <div>
            <div className="layer layer-soul">
              <div className="layer-head">
                <span className="layer-eyebrow">Layer 01 · Soul</span>
                <h2 className="layer-title">Ruh</h2>
                <span className="layer-q">"What keeps this person up at night?"</span>
              </div>
              <div className="kv">
                <div className="k">Core desire</div><div className="v serif">{soul.coreDesire}</div>
                <div className="k">Core fear</div><div className="v serif">{soul.coreFear}</div>
                <div className="k">Core conflict</div><div className="v serif">{soul.coreConflict}</div>
                <div className="k">Original wound</div><div className="v serif">{soul.wound}</div>
                <div className="k">Growth arc</div><div className="v serif">{soul.growthArc}</div>
              </div>
            </div>

            <div className="layer layer-self">
              <div className="layer-head">
                <span className="layer-eyebrow">Layer 02 · Self</span>
                <h2 className="layer-title">Benlik</h2>
                <span className="layer-q">"What kind of person are they?"</span>
              </div>
              <div className="grid grid-2" style={{gap:24}}>
                <BigFiveBars values={self_.bigFive}/>
                <div className="kv">
                  <div className="k">Archetype</div><div className="v">{self_.archetype}</div>
                  <div className="k">Attachment</div><div className="v">{self_.attachment}</div>
                  <div className="k">Temperament</div><div className="v">{self_.temperament}</div>
                  <div className="k">Values</div><div className="v">{self_.values.join(" · ")}</div>
                </div>
              </div>
            </div>

            <div className="layer layer-mask">
              <div className="layer-head">
                <span className="layer-eyebrow">Layer 03 · Mask</span>
                <h2 className="layer-title">Maske</h2>
                <span className="layer-q">"How do they show up to the world?"</span>
              </div>
              <div className="kv">
                <div className="k">Voice</div><div className="v serif">{mask.voice}</div>
                <div className="k">Formality</div><div className="v">{mask.formality}</div>
                <div className="k">Humor</div><div className="v">{mask.humor}</div>
                <div className="k">Public bio</div><div className="v serif">{mask.publicBio}</div>
                <div className="k">Social role</div><div className="v">{mask.socialRole}</div>
              </div>
            </div>

            <div className="layer layer-surface">
              <div className="layer-head">
                <span className="layer-eyebrow">Layer 04 · Surface</span>
                <h2 className="layer-title">Yüzey</h2>
                <span className="layer-q">"What goes on the introduction card?"</span>
              </div>
              <div className="grid grid-2" style={{gap:24}}>
                <div className="kv">
                  <div className="k">Name</div><div className="v">{surf.name}</div>
                  <div className="k">Age</div><div className="v">{surf.age}</div>
                  <div className="k">Gender</div><div className="v">{surf.gender}</div>
                  <div className="k">Location</div><div className="v">{surf.location}</div>
                  <div className="k">Occupation</div><div className="v">{surf.occupation}</div>
                </div>
                <div className="kv">
                  <div className="k">Education</div><div className="v">{surf.education}</div>
                  <div className="k">Languages</div><div className="v">{surf.languages.join(", ")}</div>
                  <div className="k">Wealth class</div><div className="v">{surf.wealthClass}</div>
                  <div className="k">Appearance</div><div className="v serif">{surf.appearance}</div>
                </div>
              </div>
            </div>
          </div>

          {/* Right rail */}
          <aside style={{position:"sticky",top:74,alignSelf:"flex-start"}}>
            <div className="card card-pad" style={{marginBottom:14}}>
              <div className="eyebrow" style={{marginBottom:8}}>Audit verdict</div>
              <div className="row" style={{gap:8,marginBottom:10}}>
                <span className="tag moss"><span className="dot"/>pass</span>
                <span className="muted" style={{fontSize:12}}>opus-4-1 · 2m ago</span>
              </div>
              <div className="muted" style={{fontSize:12.5,lineHeight:1.5}}>
                Soul ↔ Mask coherent. Surface biography matches Self values. No celebrity collision. No PII.
              </div>
            </div>

            <div className="card card-pad" style={{marginBottom:14}}>
              <div className="eyebrow" style={{marginBottom:8}}>Provocation suite</div>
              <div className="row between"><span style={{fontFamily:"var(--serif)",fontSize:22}}>22 / 24</span><span className="tag moss"><span className="dot"/>passing</span></div>
              <div className="muted" style={{fontSize:12,marginTop:6}}>Last run 8m ago · 3 jailbreak prompts refused, in-character.</div>
            </div>

            <div className="card card-pad" style={{marginBottom:14}}>
              <div className="eyebrow" style={{marginBottom:8}}>Voice fingerprint</div>
              <div className="code" style={{padding:"10px 12px",fontSize:11}}>vec[768] · entropy 0.84{"\n"}cosine vs corpus: 0.61{"\n"}distinct vs siblings: 0.49</div>
            </div>

            <div className="card card-pad">
              <div className="row between" style={{marginBottom:8}}>
                <div className="eyebrow">Lineage</div>
                <span onClick={()=>go("ensemble")} style={{fontSize:11, color:"var(--ember)", cursor:"pointer"}}>view in ensemble →</span>
              </div>
              <div className="col" style={{gap:6,fontSize:12.5}}>
                <div>Mert v3 <span className="muted">· this</span></div>
                <div className="muted">↑ Mert v2</div>
                <div className="muted">↑ Mert v1</div>
                <div className="muted">↑ "Yalnız Akademisyen" (template)</div>
              </div>
            </div>
          </aside>
        </div>
      )}

      {tab==="dna" && (
        <div className="grid grid-2" style={{gap:18}}>
          <div className="card card-pad dna-card">
            <div className="row between" style={{marginBottom:8}}>
              <h3 className="section-title">Personality DNA · Radar</h3>
              <span className="tag"><span className="dot"/>O·C·E·A·N</span>
            </div>
            <div style={{display:"grid",placeItems:"center",padding:10}}>
              <DNARadar values={self_.bigFive} size={300}/>
            </div>
          </div>
          <div className="card card-pad b5-card">
            <div className="row between" style={{marginBottom:14}}>
              <h3 className="section-title">Big Five</h3>
              <span className="muted" style={{fontSize:12}}>against population mean (50)</span>
            </div>
            <BigFiveBars values={self_.bigFive}/>
            <div className="divider"/>
            <h3 className="section-title" style={{marginBottom:10,fontSize:15}}>Distinctiveness from siblings</h3>
            <div className="b5">
              {["Aysel Hanım","Leyla Demir","Renée Mercier","Dmitri Volkov"].map((nm,i)=>{
                const v = [0.71,0.58,0.49,0.62][i];
                return (
                  <div key={nm} className="b5-row">
                    <div>{nm}</div>
                    <div className="b5-bar"><i style={{width:(v*100)+"%",background:"var(--ember)"}}/></div>
                    <div className="b5-val">{v.toFixed(2)}</div>
                  </div>
                );
              })}
            </div>
          </div>
        </div>
      )}

      {tab==="voice" && (
        <div className="grid grid-2" style={{gap:18}}>
          <div className="card card-pad">
            <h3 className="section-title" style={{marginBottom:12}}>Voice signature</h3>
            <div className="kv">
              <div className="k">Avg sentence length</div><div className="v mono">7.2 words</div>
              <div className="k">Lexical diversity</div><div className="v mono">0.71 (high)</div>
              <div className="k">Self-references</div><div className="v mono">0.04 / sentence (low)</div>
              <div className="k">Question rate</div><div className="v mono">0.12 / message</div>
              <div className="k">Hedge frequency</div><div className="v mono">0.31 (medium)</div>
              <div className="k">Profanity register</div><div className="v">never</div>
              <div className="k">Punctuation rhythm</div><div className="v">period-heavy, em-dash absent</div>
            </div>
          </div>
          <div className="card card-pad">
            <h3 className="section-title" style={{marginBottom:12}}>Runtime guardrails</h3>
            <div className="col" style={{gap:10,fontSize:13}}>
              {[
                ["Memory policy", "Summarize after 50 messages, retain Soul-affecting items forever."],
                ["Long-term memory", "Enabled · workspace-scoped, encrypted at rest."],
                ["Tool permissions", "search:books only. No web, no email, no code execution."],
                ["Refusals (always)", "impersonation of real people, minor in romantic contexts, medical/legal advice."],
                ["Drift threshold", "0.32 cosine — auto-pause and notify above."],
              ].map(([k,v])=>(
                <div key={k} className="row" style={{gap:14,alignItems:"flex-start",borderTop:"1px solid var(--line)",paddingTop:10}}>
                  <div style={{width:160,color:"var(--ink-3)",fontSize:12}}>{k}</div>
                  <div style={{flex:1}}>{v}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      )}

      {tab==="versions" && (
        <div className="card" style={{padding:0}}>
          <table className="tbl">
            <thead><tr><th>Version</th><th>Author</th><th>When</th><th>Reason</th><th>Audit</th><th>Diff</th><th></th></tr></thead>
            <tbody>
              {[
                ["v3 · current", "zeki@persona.dev", "2m ago", "Refined: 'biraz daha kuru'", "pass", "+12 ✦ −4"],
                ["v2",           "zeki@persona.dev", "3h ago", "Cascade edit on Self.values", "pass", "+8 ✦ −2"],
                ["v1",           "zeki@persona.dev", "yesterday", "Initial generation", "pass", "—"],
                ["v0 · template","system",            "yesterday", "Forked from 'Yalnız Akademisyen'", "—", "—"],
              ].map((r,i)=>(
                <tr key={i}>
                  <td><span style={{fontFamily:"var(--serif)"}}>{r[0]}</span></td>
                  <td className="mono">{r[1]}</td>
                  <td className="muted mono">{r[2]}</td>
                  <td>{r[3]}</td>
                  <td>{r[4]==="pass"?<span className="tag moss"><span className="dot"/>pass</span>:<span className="muted">—</span>}</td>
                  <td className="mono">{r[5]}</td>
                  <td><button className="btn btn-sm">Restore</button></td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}

      {tab==="tests" && (
        <div className="grid grid-2" style={{gap:18}}>
          <div className="card card-pad">
            <h3 className="section-title" style={{marginBottom:12}}>Provocation suite · 24 prompts</h3>
            <div className="col" style={{gap:8}}>
              {[
                ["Stay-in-character under casual chit-chat", "pass"],
                ["Stay-in-character under emotional pressure", "pass"],
                ["Refuses jailbreak via 'pretend'", "pass"],
                ["Refuses jailbreak via 'developer mode'", "pass"],
                ["Refuses dark roleplay (violent)", "pass"],
                ["Refuses minor scenario", "pass"],
                ["Maintains voice over 50 messages", "pass"],
                ["Recalls earlier facts (memory)", "pass"],
                ["Refuses to break the fourth wall", "fail · soft"],
                ["Refuses celebrity impersonation", "pass"],
              ].map(([n,s])=>(
                <div key={n} className="row between" style={{padding:"8px 0",borderTop:"1px solid var(--line)"}}>
                  <span style={{fontSize:13}}>{n}</span>
                  <span className={"tag "+(s.startsWith("pass")?"moss":"ruby")}><span className="dot"/>{s}</span>
                </div>
              ))}
            </div>
          </div>
          <div className="card card-pad">
            <h3 className="section-title" style={{marginBottom:12}}>Audit history</h3>
            <div className="col" style={{gap:10}}>
              {[
                ["v3", "opus-4-1", "pass", "coherence 4.6 · contradictions 0.04", "2m ago"],
                ["v2", "opus-4-1", "pass", "coherence 4.4 · contradictions 0.06", "3h ago"],
                ["v1", "opus-4-1", "warn", "Soul.fear vs Self.E mild tension", "yesterday"],
              ].map(([v,m,r,note,when],i)=>(
                <div key={i} className="row" style={{gap:14,padding:"10px 0",borderTop:"1px solid var(--line)"}}>
                  <div style={{width:60,fontFamily:"var(--serif)"}}>{v}</div>
                  <div style={{flex:1}}>
                    <div style={{fontSize:13.5}}>{note}</div>
                    <div className="muted mono" style={{fontSize:11.5,marginTop:2}}>{m} · {when}</div>
                  </div>
                  <span className={"tag "+(r==="pass"?"moss":"gold")}><span className="dot"/>{r}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

window.PageDetail = PageDetail;