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

// ---------- Billing ----------
const PageBilling = () => (
  <div className="page">
    <div className="page-head">
      <div className="eyebrow">Acme Studios · Pro plan</div>
      <h1 className="page-title">Billing & usage</h1>
      <div className="page-sub">Token-metered + seat-based hybrid. Resets on the 1st.</div>
    </div>

    <div className="grid grid-4" style={{marginBottom:18}}>
      <div className="card stat"><div className="lbl">Plan</div><div className="val">Pro</div><div className="muted" style={{fontSize:11.5,marginTop:4}}>$199 / mo · 5 seats</div></div>
      <div className="card stat"><div className="lbl">This cycle</div><div className="val">$842</div><div className="delta">62% of $1,350 quota</div></div>
      <div className="card stat"><div className="lbl">Personas (mtd)</div><div className="val">412</div><div className="delta">+24%</div></div>
      <div className="card stat"><div className="lbl">Next invoice</div><div className="val">Aug 1</div><div className="muted" style={{fontSize:11.5,marginTop:4}}>auto-charge · Visa •• 4242</div></div>
    </div>

    <div className="grid grid-2" style={{gap:18,marginBottom:18}}>
      <div className="card card-pad">
        <h3 className="section-title" style={{marginBottom:10}}>Cost breakdown · this cycle</h3>
        {[
          ["Pipeline · Soul draft (opus)", 312, "$ via tokens"],
          ["Pipeline · Self+Mask (sonnet)", 142, ""],
          ["Pipeline · Surface (sonnet)", 88, ""],
          ["Audit (opus)", 124, ""],
          ["Suite & fingerprint", 78, ""],
          ["Chat runtime (sonnet)", 72, ""],
          ["Embeddings (voyage-3)", 18, ""],
          ["Moderation (incl.)", 8, ""],
        ].map(([lbl,v],i)=>(
          <div key={i} className="row between" style={{padding:"8px 0",borderTop:"1px solid var(--line)",fontSize:13}}>
            <span>{lbl}</span>
            <div style={{display:"flex",alignItems:"center",gap:10,minWidth:200}}>
              <div style={{flex:1,height:6,background:"var(--bg-3)",borderRadius:999,overflow:"hidden"}}>
                <div style={{width:(v/312*100)+"%",height:"100%",background:"var(--ember)"}}/>
              </div>
              <span className="mono" style={{width:60,textAlign:"right"}}>${v}</span>
            </div>
          </div>
        ))}
      </div>
      <div className="card card-pad">
        <h3 className="section-title" style={{marginBottom:10}}>Spend · 30 days</h3>
        <BarChart data={D6.usageByDay.map(d=>({val:d.cost}))} h={160} color="var(--gold)"/>
        <div className="divider"/>
        <h3 className="section-title" style={{marginBottom:10,fontSize:15}}>Quotas & limits</h3>
        <div className="col" style={{gap:10}}>
          {[
            ["Tokens · Pro pool", "62%", "var(--ember)"],
            ["Personas / month",  "32%", "var(--moss)"],
            ["Seats", "5 / 5", "var(--gold)"],
            ["Webhooks / sec", "8%", "var(--sky)"],
          ].map(([lbl,pct,c],i)=>(
            <div key={i}>
              <div className="row between" style={{fontSize:12.5,marginBottom:4}}><span>{lbl}</span><span className="mono muted">{pct}</span></div>
              <div style={{height:6,background:"var(--bg-3)",borderRadius:999,overflow:"hidden"}}>
                <div style={{width:typeof pct==="string" && pct.includes("/")? "100%": pct,height:"100%",background:c}}/>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>

    <div className="card" style={{padding:0,marginBottom:18}}>
      <div className="row between" style={{padding:"14px 18px",borderBottom:"1px solid var(--line)"}}>
        <h3 className="section-title">Invoices</h3>
        <button className="btn btn-sm">Download all (CSV)</button>
      </div>
      <table className="tbl">
        <thead><tr><th>Number</th><th>Period</th><th>Amount</th><th>Status</th><th>Issued</th><th></th></tr></thead>
        <tbody>
          {[
            ["INV-2026-08","Aug 2026","—","upcoming","draft"],
            ["INV-2026-07","Jul 2026","$1,350","paid","Jul 1"],
            ["INV-2026-06","Jun 2026","$1,350","paid","Jun 1"],
            ["INV-2026-05","May 2026","$1,420","paid · w/ overage","May 1"],
            ["INV-2026-04","Apr 2026","$1,350","paid","Apr 1"],
          ].map((r,i)=>(
            <tr key={i}>
              <td className="mono">{r[0]}</td><td>{r[1]}</td>
              <td className="mono">{r[2]}</td>
              <td>{r[3]==="paid"?<span className="tag moss"><span className="dot"/>paid</span>:r[3]==="upcoming"?<span className="tag"><span className="dot"/>upcoming</span>:<span className="tag gold"><span className="dot"/>{r[3]}</span>}</td>
              <td className="muted">{r[4]}</td>
              <td><button className="btn btn-sm">PDF</button></td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>

    <div className="grid grid-3" style={{gap:14}}>
      {[
        { name:"Free", price:"$0", caption:"Solo experiments", feats:["10 personas","Basic audit","Community support"], cta:"Downgrade", highlight:false},
        { name:"Pro", price:"$199 /mo", caption:"Indie teams", feats:["1,500 personas","Audit + Suite","API access","Webhooks"], cta:"Current plan", highlight:true},
        { name:"Team", price:"$899 /mo", caption:"5–25 seats", feats:["10k personas","SSO (SAML)","Custom roles","Marketplace earnings"], cta:"Upgrade", highlight:false},
        { name:"Enterprise", price:"Talk to us", caption:"Compliance + scale", feats:["Per-org keys","Data residency","DPA & SOC 2","Audit log export"], cta:"Contact sales", highlight:false},
      ].map((p,i)=>(
        <div key={i} className="card card-pad" style={{borderColor:p.highlight?"var(--ember)":"var(--line)",background:p.highlight?"linear-gradient(180deg, rgba(232,118,58,.06), transparent)":"var(--bg-1)"}}>
          <div className="eyebrow" style={{color:p.highlight?"var(--ember)":"var(--ink-4)"}}>{p.name}</div>
          <div style={{fontFamily:"var(--serif)",fontSize:30,marginTop:6}}>{p.price}</div>
          <div className="muted" style={{fontSize:12,marginTop:2}}>{p.caption}</div>
          <div className="divider"/>
          <div className="col" style={{gap:8,fontSize:13}}>
            {p.feats.map((f,j)=><div key={j} className="row" style={{gap:8}}>{I("check",13)} <span>{f}</span></div>)}
          </div>
          <button className={"btn "+(p.highlight?"primary":"")+(p.cta==="Current plan"?" ghost":"")} style={{marginTop:14,width:"100%",justifyContent:"center"}}>{p.cta}</button>
        </div>
      ))}
    </div>
  </div>
);

// ---------- Audit log ----------
const PageAudit = () => (
  <div className="page">
    <div className="page-head row between">
      <div>
        <div className="eyebrow">Immutable · 2-year retention</div>
        <h1 className="page-title">Audit log</h1>
        <div className="page-sub">Every state-mutating action is recorded with who, what, when, where. Hash-chained for tamper evidence.</div>
      </div>
      <div className="row" style={{gap:8}}>
        <button className="btn">{I("download",14)} Export (signed)</button>
        <button className="btn">Verify chain</button>
      </div>
    </div>
    <div className="row" style={{marginBottom:14,gap:8,flexWrap:"wrap"}}>
      <div className="search" style={{flex:1,maxWidth:360}}>{I("search",14)}<input placeholder="Filter by user, action, resource…"/></div>
      <button className="btn btn-sm">User: any</button>
      <button className="btn btn-sm">Action: any</button>
      <button className="btn btn-sm">Date: last 7 days</button>
    </div>
    <div className="card" style={{padding:0}}>
      <table className="tbl">
        <thead><tr><th>When</th><th>Actor</th><th>Action</th><th>Resource</th><th>IP</th><th>Hash</th></tr></thead>
        <tbody>
          {D6.auditEntries.map((a,i)=>(
            <tr key={i}>
              <td className="muted mono">{a.when}</td>
              <td className="mono">{a.who}</td>
              <td><span className="tag"><span className="dot"/>{a.action}</span></td>
              <td className="mono" style={{fontSize:12}}>{a.res}</td>
              <td className="mono muted">{a.ip}</td>
              <td className="mono muted" style={{fontSize:11}}>0x{(0xa09f3b71+i).toString(16)}…</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  </div>
);

// ---------- Moderation queue ----------
const PageModeration = () => (
  <div className="page">
    <div className="page-head row between">
      <div>
        <div className="eyebrow">3-layer pipeline · in/out/post</div>
        <h1 className="page-title">Moderation queue</h1>
        <div className="page-sub">Flagged personas and runs awaiting review. SLA: 48h for high, 24h for critical.</div>
      </div>
    </div>

    <div className="grid grid-4" style={{marginBottom:18}}>
      <div className="card stat"><div className="lbl">In queue</div><div className="val">4</div><div className="delta down">+1 today</div></div>
      <div className="card stat"><div className="lbl">Avg resolution</div><div className="val">14h</div><div className="delta">SLA 48h</div></div>
      <div className="card stat"><div className="lbl">Auto-blocked / day</div><div className="val">217</div><div className="delta">layer-1 catches</div></div>
      <div className="card stat"><div className="lbl">Human escalations</div><div className="val">12 / wk</div><div className="delta">stable</div></div>
    </div>

    <div className="card" style={{padding:0,marginBottom:18}}>
      <table className="tbl">
        <thead><tr><th>Subject</th><th>Reason</th><th>Severity</th><th>Flagged by</th><th>Age</th><th></th></tr></thead>
        <tbody>
          {D6.moderationQueue.map(m=>(
            <tr key={m.id}>
              <td><div style={{fontFamily:"var(--serif)",fontSize:14}}>{m.subj}</div><div className="muted mono" style={{fontSize:11}}>{m.id}</div></td>
              <td>{m.reason}</td>
              <td>{m.severity==="critical"?<span className="tag ruby"><span className="dot"/>critical</span>:m.severity==="high"?<span className="tag gold"><span className="dot"/>high</span>:<span className="tag"><span className="dot"/>{m.severity}</span>}</td>
              <td className="mono">layer-2 LLM</td>
              <td className="muted">{m.flagged}</td>
              <td><div className="row" style={{gap:6}}><button className="btn btn-sm">Review</button><button className="btn btn-sm danger">Block</button></div></td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>

    <div className="grid grid-2" style={{gap:18}}>
      <div className="card card-pad">
        <h3 className="section-title" style={{marginBottom:12}}>Pipeline layers</h3>
        <div className="col" style={{gap:14}}>
          {[
            ["Layer 1 · Input filter","Heuristic + small classifier. Blocks obvious dark-roleplay, minor scenarios, celebrity names. <50ms.","217 blocks/day","var(--moss)"],
            ["Layer 2 · LLM judge","Sonnet evaluates intent + persona context. Flags ambiguous cases for human.","12 flags/day","var(--gold)"],
            ["Layer 3 · Output guard","Streams output through PII detector + impersonation matcher. Pauses & regenerates on hit.","8 holds/day","var(--ember)"],
          ].map(([t,d,s,c],i)=>(
            <div key={i} style={{padding:"12px 14px",border:"1px solid var(--line)",borderRadius:8,boxShadow:"inset 3px 0 0 "+c}}>
              <div className="row between"><div style={{fontFamily:"var(--serif)",fontSize:15}}>{t}</div><span className="muted mono" style={{fontSize:11}}>{s}</span></div>
              <div className="muted" style={{fontSize:12.5,marginTop:4,lineHeight:1.5}}>{d}</div>
            </div>
          ))}
        </div>
      </div>
      <div className="card card-pad">
        <h3 className="section-title" style={{marginBottom:12}}>Celebrity & impersonation blocklist</h3>
        <div className="muted" style={{fontSize:13,marginBottom:10}}>Combined Wikidata (people · POBI ≥ 4) + per-org additions. Updated nightly.</div>
        <div className="row" style={{gap:6,flexWrap:"wrap"}}>
          {["Recep Tayyip Erdoğan","Atatürk","Elon Musk","Taylor Swift","Cem Yılmaz","Sezen Aksu","Hasan Ali Yücel","Nâzım Hikmet","Ezhel"].map(n => <span key={n} className="tag plum"><span className="dot"/>{n}</span>)}
          <span className="tag">+ 184k more</span>
        </div>
        <div className="divider"/>
        <h3 className="section-title" style={{marginBottom:8,fontSize:15}}>Org additions</h3>
        <div className="col" style={{gap:6,fontSize:12.5,fontFamily:"var(--mono)"}}>
          <div className="row between"><span>"Acme CEO" · pattern</span><button className="btn btn-sm danger">remove</button></div>
          <div className="row between"><span>"Eski müdür Hasan B."</span><button className="btn btn-sm danger">remove</button></div>
        </div>
        <button className="btn btn-sm" style={{marginTop:10}}>{I("plus",12)} Add entry</button>
      </div>
    </div>
  </div>
);

// ---------- Workspaces switcher modal ----------
const PageWorkspaces = ({ go }) => (
  <div className="page" style={{maxWidth:900}}>
    <div className="page-head">
      <div className="eyebrow">Switch workspace</div>
      <h1 className="page-title">Where are you working today?</h1>
    </div>
    <div className="grid grid-3">
      {[
        ["Acme Studios","Studio · Personas","152 personas","Pro","var(--ember)",true],
        ["Acme Studios","QA · Eval personas","32 personas","Pro","var(--moss)",false],
        ["Persona (internal)","Demo workspace","18 personas","Enterprise","var(--gold)",false],
        ["Boğaziçi Lab","Research","204 personas","Team","var(--plum)",false],
        ["Solo","Personal sketches","6 personas","Free","var(--sky)",false],
      ].map((w,i)=>(
        <div key={i} className="card card-pad" style={{cursor:"pointer",borderColor:w[5]?"var(--ember)":"var(--line)"}} onClick={()=>go("home")}>
          <div className="row" style={{gap:12,marginBottom:10}}>
            <div className="ws-avatar" style={{width:36,height:36,fontSize:15,background:w[4]}}>{w[0][0]}</div>
            <div>
              <div style={{fontFamily:"var(--serif)",fontSize:16}}>{w[1]}</div>
              <div className="muted" style={{fontSize:12}}>{w[0]}</div>
            </div>
          </div>
          <div className="row between"><span className="mono muted" style={{fontSize:11}}>{w[2]}</span><span className="tag"><span className="dot"/>{w[3]}</span></div>
        </div>
      ))}
    </div>
  </div>
);

// ---------- Auth ----------
const PageAuth = ({ mode, onDone }) => {
  const [step, setStep] = useState(mode==="signup"?"signup":"login");
  return (
    <div className="auth-wrap">
      <div className="auth-side">
        <div className="brand">
          <div className="brand-mark"/>
          <div className="brand-name">Persona<em>.</em></div>
        </div>
        <div>
          <div className="auth-hero">A character <em>tutarlılık</em> motoru. <span className="muted">Profil değil; içinde çatışma olan dijital insan.</span></div>
          <div className="muted" style={{marginTop:24,maxWidth:420,fontSize:14,lineHeight:1.6}}>
            "İyi bir karakter, baskı altında bozulmayandır. Persona, bu baskıyı simüle eder ve karakterini orada tutar."
          </div>
        </div>
        <div className="row" style={{gap:14,fontSize:11.5,color:"var(--ink-4)",fontFamily:"var(--mono)"}}>
          <span>SOC 2 Type II</span><span>·</span><span>GDPR · KVKK</span><span>·</span><span>ISO 27001 (in progress)</span>
        </div>
      </div>
      <div className="auth-form">
        {step==="login" && (<>
          <div className="eyebrow" style={{marginBottom:8}}>Welcome back</div>
          <h2 className="page-title" style={{fontSize:30,marginBottom:24}}>Sign in to Persona</h2>
          <button className="btn" style={{width:"100%",justifyContent:"center",marginBottom:10}}>{I("globe",14)} Continue with Google</button>
          <button className="btn" style={{width:"100%",justifyContent:"center",marginBottom:10}}>{I("shield",14)} Continue with SSO (SAML)</button>
          <div className="hr-text" style={{margin:"18px 0"}}>or</div>
          <div className="field" style={{marginBottom:10}}><label>Email</label><input className="input" defaultValue="zeki@persona.dev"/></div>
          <div className="field" style={{marginBottom:14}}><label>Password</label><input className="input" type="password" defaultValue="••••••••••"/></div>
          <button className="btn primary" style={{width:"100%",justifyContent:"center"}} onClick={()=>setStep("mfa")}>Continue →</button>
          <div className="row between" style={{marginTop:18,fontSize:12.5}}>
            <span className="muted">No account? <a style={{color:"var(--ember)",cursor:"pointer"}} onClick={()=>setStep("signup")}>Create one</a></span>
            <a className="muted" style={{cursor:"pointer"}}>Forgot password</a>
          </div>
        </>)}
        {step==="mfa" && (<>
          <div className="eyebrow" style={{marginBottom:8}}>Two-factor required</div>
          <h2 className="page-title" style={{fontSize:30,marginBottom:8}}>Enter the 6-digit code</h2>
          <div className="page-sub" style={{marginBottom:24}}>From your authenticator app. Configured 4 weeks ago.</div>
          <div className="row" style={{gap:8,marginBottom:18}}>
            {[2,9,3,8,4,1].map((n,i)=>(
              <input key={i} className="input" defaultValue={n} maxLength={1} style={{width:54,height:64,fontFamily:"var(--serif)",fontSize:30,textAlign:"center"}}/>
            ))}
          </div>
          <button className="btn primary" style={{width:"100%",justifyContent:"center"}} onClick={onDone}>Verify & sign in</button>
          <div className="muted" style={{fontSize:12.5,marginTop:14}}>Lost your device? <a style={{color:"var(--ember)",cursor:"pointer"}}>Use a recovery code</a></div>
        </>)}
        {step==="signup" && (<>
          <div className="eyebrow" style={{marginBottom:8}}>Get started</div>
          <h2 className="page-title" style={{fontSize:30,marginBottom:24}}>Create a Persona account</h2>
          <button className="btn" style={{width:"100%",justifyContent:"center",marginBottom:10}}>{I("globe",14)} Continue with Google</button>
          <div className="hr-text" style={{margin:"18px 0"}}>or</div>
          <div className="grid grid-2" style={{gap:10,marginBottom:10}}>
            <div className="field"><label>Full name</label><input className="input" defaultValue="Zeki Ünal"/></div>
            <div className="field"><label>Organization</label><input className="input" defaultValue="Acme Studios"/></div>
          </div>
          <div className="field" style={{marginBottom:10}}><label>Work email</label><input className="input" defaultValue="zeki@acme.co"/></div>
          <div className="field" style={{marginBottom:10}}><label>Password</label><input className="input" type="password" defaultValue="••••••••••"/></div>
          <div className="field" style={{marginBottom:14}}><label>Data residency <span className="muted">(can't be changed later)</span></label>
            <select className="select"><option>US (us-east-1)</option><option>EU (eu-west-1)</option></select>
          </div>
          <button className="btn primary" style={{width:"100%",justifyContent:"center"}} onClick={()=>setStep("mfa")}>Create account →</button>
          <div className="muted" style={{marginTop:14,fontSize:12}}>By creating an account you agree to the <a style={{color:"var(--ink-2)"}}>Terms</a>, <a style={{color:"var(--ink-2)"}}>Privacy</a>, and <a style={{color:"var(--ink-2)"}}>AUP</a>.</div>
        </>)}
      </div>
    </div>
  );
};

// ---------- Onboarding overlay ----------
const Onboarding = ({ onDone }) => {
  const [step, setStep] = useState(0);
  const steps = [
    { t:"Welcome to Persona.", d:"This is a tour. 90 seconds. You can skip.", c:"" },
    { t:"Step 1 — Brief", d:"Describe a person in your own words. Persona drafts the Soul layer first — the unspoken stuff.", c:"create" },
    { t:"Step 2 — Pipeline", d:"Six steps. You can watch each one stream. Audit is a separate Opus call that judges the whole persona.", c:"create" },
    { t:"Step 3 — Edit", d:"Lock layers you like. Cascade changes downward. Refine with one click.", c:"detail" },
    { t:"Step 4 — Chat", d:"Talk to your persona. We measure voice drift in real time. You'll see it on the right.", c:"chat" },
    { t:"You're set.", d:"Generate your first persona, or browse the marketplace.", c:"" },
  ];
  const s = steps[step];
  return (
    <div className="modal-mask">
      <div className="modal" style={{width:540}}>
        <div className="row between" style={{marginBottom:14}}>
          <div className="row" style={{gap:8}}>
            {steps.map((_,i)=>(
              <div key={i} style={{width:i===step?28:12,height:4,borderRadius:2,background:i<=step?"var(--ember)":"var(--bg-3)"}}/>
            ))}
          </div>
          <button className="muted" style={{fontSize:12,cursor:"pointer"}} onClick={onDone}>Skip tour</button>
        </div>
        <h2 style={{fontFamily:"var(--serif)",fontSize:26,margin:"6px 0 8px"}}>{s.t}</h2>
        <div className="muted" style={{fontSize:14,lineHeight:1.55,marginBottom:18}}>{s.d}</div>
        <div style={{height:180,borderRadius:8,background:"var(--bg-2)",border:"1px solid var(--line)",display:"grid",placeItems:"center",fontFamily:"var(--mono)",fontSize:11,color:"var(--ink-4)",letterSpacing:1,marginBottom:18}}>[ illustration · {s.c||"intro"} ]</div>
        <div className="row between">
          <button className="btn" disabled={step===0} onClick={()=>setStep(s=>s-1)}>← Back</button>
          <button className="btn primary" onClick={()=>{ if(step<steps.length-1) setStep(s=>s+1); else onDone(); }}>{step<steps.length-1?"Next →":"Start building"}</button>
        </div>
      </div>
    </div>
  );
};

window.PageBilling = PageBilling;
window.PageAudit = PageAudit;
window.PageModeration = PageModeration;
window.PageWorkspaces = PageWorkspaces;
window.PageAuth = PageAuth;
window.Onboarding = Onboarding;