// Main app — auth state + router + tweaks
const { useState, useEffect } = React;

const App = () => {
  const [user, setUser] = useState(null);
  const [route, setRoute] = useState("dashboard");
  const [toast, setToast] = useState(null);
  const showToast = (msg) => setToast(msg);

  // Tweaks
  const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
    "accent": "#FF5A4E",
    "density": "cozy",
    "tone": "Match marketing site"
  }/*EDITMODE-END*/;
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);

  useEffect(() => {
    document.documentElement.style.setProperty("--accent", tweaks.accent);
    document.documentElement.dataset.density = tweaks.density;
  }, [tweaks]);

  if (!user) return <>
    <LoginScreen onLogin={setUser}/>
    <TweaksPanel title="Tweaks">
      <TweakSection title="Brand">
        <TweakColor label="Accent" value={tweaks.accent} onChange={v => setTweak("accent", v)} />
      </TweakSection>
    </TweaksPanel>
  </>;

  return (
    <>
      <PortalShell user={user} route={route} setRoute={setRoute} onLogout={()=>setUser(null)}>
        {route === "dashboard" && <Dashboard user={user} setRoute={setRoute}/>}
        {route === "library"   && <AssetLibrary showToast={showToast}/>}
        {route === "audit"     && <AuditFlow showToast={showToast}/>}
        {route === "api"       && <ApiSection showToast={showToast}/>}
        {route === "settings"  && (
          <div style={{ padding: 36, color: "var(--muted)" }}>
            <h1 className="h-section">Settings</h1>
            <p>Workspace, members, billing, audit logs — placeholder.</p>
          </div>
        )}
      </PortalShell>
      {toast && <Toast msg={toast} onDone={()=>setToast(null)}/>}
      <TweaksPanel title="Tweaks">
        <TweakSection title="Brand">
          <TweakColor label="Accent color" value={tweaks.accent} onChange={v => setTweak("accent", v)} />
          <TweakRadio label="Tone" value={tweaks.tone} onChange={v => setTweak("tone", v)}
            options={[{value:"Match marketing site",label:"Match site"},{value:"Clinical",label:"Clinical"},{value:"Editorial",label:"Editorial"}]}/>
        </TweakSection>
        <TweakSection title="Layout">
          <TweakRadio label="Density" value={tweaks.density} onChange={v => setTweak("density", v)}
            options={[{value:"comfy",label:"Comfy"},{value:"cozy",label:"Cozy"},{value:"compact",label:"Compact"}]}/>
        </TweakSection>
        <TweakSection title="Jump to">
          <TweakButton onClick={()=>setRoute("dashboard")}>Dashboard</TweakButton>
          <TweakButton onClick={()=>setRoute("library")}>Asset Library</TweakButton>
          <TweakButton onClick={()=>setRoute("audit")}>Audit</TweakButton>
          <TweakButton onClick={()=>setRoute("api")}>API</TweakButton>
        </TweakSection>
      </TweaksPanel>
    </>
  );
};

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