/* eslint-disable */
const { useState: uS, useEffect: uE } = React;

function App() {
  const [route, setRoute] = uS("home");
  const [persona, setPersona] = uS(null);
  const [showOnboarding, setShowOnboarding] = uS(false);
  const [showTweaks, setShowTweaks] = uS(false);
  const [tweaks, setTweaks] = uS({ accent:"#E8763A", serif:"Newsreader", density:"comfy", portraits:true, dev:true });
  const [runState, setRunState] = uS({ running:false, step:0, done:false });

  uE(()=>{
    const onMsg = (e) => {
      if (e.data?.type === "__activate_edit_mode") setShowTweaks(true);
      if (e.data?.type === "__deactivate_edit_mode") setShowTweaks(false);
    };
    window.addEventListener("message", onMsg);
    window.parent.postMessage({type:"__edit_mode_available"}, "*");
    return () => window.removeEventListener("message", onMsg);
  }, []);

  uE(()=>{
    document.documentElement.style.setProperty("--ember", tweaks.accent);
  }, [tweaks.accent]);

  const go = (r, p) => {
    if (p) setPersona(p);
    setRoute(r);
    window.scrollTo(0,0);
  };

  // Auth route
  if (route==="login" || route==="signup") {
    return <PageAuth mode={route} onDone={()=>{ setShowOnboarding(true); setRoute("home"); }}/>;
  }

  const crumbs = (() => {
    const m = {
      home:["Studio","Overview"], create:["Studio","Create persona"], library:["Studio","Library"],
      detail:["Studio","Library", persona?.name||"Persona"], chat:["Studio","Chat", persona?.name||"Persona"],
      lineage:["Studio","Lineage"], ensemble:["Studio","Ensemble"], compare:["Studio","Compare"], market:["Studio","Marketplace"],
      runs:["Quality","Generation runs"], audits:["Quality","Audits & tests"], moderation:["Quality","Moderation"],
      members:["Workspace","Members"], keys:["Workspace","API keys"], webhooks:["Workspace","Webhooks"],
      billing:["Workspace","Billing"], audit:["Workspace","Audit log"], config:["Workspace","Configuration"],
      docs:["Developer","API reference"],
      workspaces:["Switch workspace"]
    };
    return m[route] || ["Studio"];
  })();

  let content;
  switch (route) {
    case "home":       content = <PageOverview go={go}/>; break;
    case "create":     content = <PageCreate go={go} runState={runState} setRunState={setRunState}/>; break;
    case "library":    content = <PageLibrary go={go}/>; break;
    case "detail":     content = <PageDetail persona={persona} go={go}/>; break;
    case "chat":       content = <PageChat persona={persona} go={go}/>; break;
    case "lineage":    content = <PageLineage/>; break;
    case "ensemble":   content = <PageEnsemble go={go}/>; break;
    case "compare":    content = <PageCompare go={go}/>; break;
    case "market":     content = <PageMarket go={go}/>; break;
    case "runs":       content = <PageRuns/>; break;
    case "audits":     content = <PageAudits/>; break;
    case "moderation": content = <PageModeration/>; break;
    case "members":    content = <PageMembers/>; break;
    case "keys":       content = <PageKeys/>; break;
    case "webhooks":   content = <PageWebhooks/>; break;
    case "billing":    content = <PageBilling/>; break;
    case "audit":      content = <PageAudit/>; break;
    case "config":     content = <PageConfig/>; break;
    case "docs":       content = <PageDocs/>; break;
    case "workspaces": content = <PageWorkspaces go={go}/>; break;
    default:           content = <PageOverview go={go}/>;
  }

  return (
    <div className="app" data-screen-label={route}>
      <Sidebar route={route} setRoute={setRoute}/>
      <div style={{minWidth:0}}>
        <Topbar crumbs={crumbs}/>
        <div data-screen-label={route}>{content}</div>
      </div>
      {showOnboarding && <Onboarding onDone={()=>setShowOnboarding(false)}/>}
      {showTweaks && <TweaksPanel tweaks={tweaks} set={(p)=>setTweaks(t=>({...t,...p}))} onClose={()=>{ setShowTweaks(false); window.parent.postMessage({type:"__edit_mode_dismissed"},"*"); }}/>}

      {/* Floating route picker for demo navigation */}
      <div style={{position:"fixed",bottom:20,left:268,zIndex:40}}>
        <div className="card flat" style={{padding:"6px 10px",display:"flex",gap:6,alignItems:"center",fontSize:11,fontFamily:"var(--mono)"}}>
          <span className="muted" style={{marginRight:6}}>jump:</span>
          {[
            ["login","auth"],["home","home"],["create","create"],["library","lib"],
            ["detail","detail"],["chat","chat"],["lineage","lineage"],["market","market"],
            ["config","config"],["billing","bill"],["members","rbac"],["moderation","mod"],
            ["audit","audit"],["audits","tests"],["ensemble","ensemble"],["compare","compare"],["docs","docs"]
          ].map(([k,l])=>(
            <span key={k} onClick={()=>go(k, k==="detail"||k==="chat" ? D.personas[0] : null)} style={{padding:"3px 7px",borderRadius:4,cursor:"pointer",background:route===k?"var(--ember)":"var(--bg-3)",color:route===k?"#1a0d04":"var(--ink-3)"}}>{l}</span>
          ))}
        </div>
      </div>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App/>);