/* app.jsx — root: tweaks, global state, router, shell */

const FONT_STACKS = {
  "Hanken Grotesk": "'Hanken Grotesk', ui-sans-serif, system-ui, sans-serif",
  "Space Grotesk": "'Space Grotesk', ui-sans-serif, system-ui, sans-serif",
  "Instrument Sans": "'Instrument Sans', ui-sans-serif, system-ui, sans-serif",
};

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "dark": false,
  "radius": 10,
  "font": "Hanken Grotesk",
  "density": "comfortable"
}/*EDITMODE-END*/;

const VIEWS = {
  bots: window.BotsView,
  knowledge: window.OnboardingView,
  playground: window.PlaygroundView,
  deploy: window.DeployView,
  conversations: window.ConversationsView,
  finetune: window.FineTuneView,
  pricing: window.PricingView,
};
const PUBLIC_VIEWS = new Set(["pricing"]);

function FeatureLockedView({ view }) {
  const { busy, error, signIn } = useFirebaseAuth();
  const featureName = window.PAGE_TITLES?.[view] || "Model OS";

  return (
    <div className="page">
      <PageHead
        eyebrow="Account required"
        title={featureName}
        sub="Sign in with Google to use this workspace feature."
      />
      <div className="card card-pad" style={{ maxWidth: 560 }}>
        <div className="row" style={{ gap: 13, alignItems: "flex-start" }}>
          <div className="avatar" style={{ width: 38, height: 38 }}>
            {I("lock", { style: { width: 18, height: 18 } })}
          </div>
          <div className="stack" style={{ gap: 10, minWidth: 0 }}>
            <div>
              <div className="h3">Connect Google to continue</div>
              <div className="caption" style={{ maxWidth: 430, marginTop: 5 }}>
                Your bots, PDFs, conversations, deployments, and fine-tune runs are saved to your Google account workspace.
              </div>
            </div>
            <button className="btn btn-primary" onClick={signIn} disabled={busy} style={{ alignSelf: "flex-start" }}>
              {I("lock", { style: { width: 15, height: 15 } })}
              {busy ? "Connecting..." : "Sign in with Google"}
            </button>
            {error && <div className="auth-error inline" role="alert">{error}</div>}
          </div>
        </div>
      </div>
    </div>
  );
}

function WorkspaceApp({ user }) {
  const load = React.useCallback((key, fallback) => window.ModelOSUserStorage.load(user.uid, key, fallback), [user.uid]);
  const save = React.useCallback((key, value) => window.ModelOSUserStorage.save(user.uid, key, value), [user.uid]);
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  const [view, setView] = React.useState(() => {
    const saved = load("view", "bots");
    return saved === "evaluation" ? "finetune" : saved;
  });
  const [model, setModel] = React.useState(() => load("model", window.DEMO.MODELS[1]));
  const [deployed, setDeployed] = React.useState(() => load("deployed", false));
  const [ftUnlocked, setFtUnlocked] = React.useState(() => load("ftUnlocked", false));
  const [ftReady, setFtReady] = React.useState(() => load("ftReady", false));
  const [activeAgent, setActiveAgent] = React.useState(() => load("activeAgent", window.ModelOSIntegrations?.load?.().activeAgent || null));
  const [navOpen, setNavOpen] = React.useState(false);

  // persist
  React.useEffect(() => save("view", view), [view, save]);
  React.useEffect(() => save("model", model), [model, save]);
  React.useEffect(() => save("deployed", deployed), [deployed, save]);
  React.useEffect(() => save("ftUnlocked", ftUnlocked), [ftUnlocked, save]);
  React.useEffect(() => save("ftReady", ftReady), [ftReady, save]);
  React.useEffect(() => save("activeAgent", activeAgent), [activeAgent, save]);

  // apply tweaks to root
  React.useEffect(() => {
    const r = document.documentElement;
    r.setAttribute("data-theme", t.dark ? "dark" : "light");
    r.setAttribute("data-density", t.density);
    r.style.setProperty("--r-base", t.radius + "px");
    r.style.setProperty("--font-sans", FONT_STACKS[t.font] || FONT_STACKS["Hanken Grotesk"]);
  }, [t]);

  // scroll to top on view change
  const canvasRef = React.useRef(null);
  React.useEffect(() => { if (canvasRef.current) canvasRef.current.scrollTop = 0; }, [view]);

  const ctx = { view, setView, model, setModel, deployed, setDeployed, ftUnlocked, setFtUnlocked, ftReady, setFtReady, activeAgent, setActiveAgent };
  const Active = VIEWS[view] || VIEWS.finetune || VIEWS.knowledge;
  const locked = user?.isDemo && !PUBLIC_VIEWS.has(view);

  return (
    <div className="app">
      <Sidebar view={view} setView={setView} open={navOpen} setOpen={setNavOpen} activeModel={model} />
      {navOpen && <div onClick={() => setNavOpen(false)} style={{ position: "fixed", inset: 0, background: "var(--overlay)", zIndex: 55 }} className="nav-scrim" />}
      <div className="main">
        <Topbar view={view} setView={setView} setOpen={setNavOpen} />
        <div ref={canvasRef} className="canvas">
          {locked ? <FeatureLockedView key={`locked-${view}`} view={view} /> : <Active key={view} ctx={ctx} />}
        </div>
      </div>

      <TweaksPanel title="Tweaks">
        <TweakSection label="Appearance" />
        <TweakToggle label="Dark mode" value={t.dark} onChange={(v) => setTweak("dark", v)} />
        <TweakSelect label="Typeface" value={t.font} options={Object.keys(FONT_STACKS)} onChange={(v) => setTweak("font", v)} />
        <TweakSlider label="Corner radius" value={t.radius} min={2} max={18} unit="px" onChange={(v) => setTweak("radius", v)} />
        <TweakRadio label="Density" value={t.density} options={["comfortable", "compact"]} onChange={(v) => setTweak("density", v)} />
        <TweakSection label="Jump to flow" />
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 6 }}>
          {window.NAV.filter(n => n.id).map(n => (
            <button key={n.id} className={cx("twk-btn", view !== n.id && "secondary")} style={{ height: 28, justifyContent: "flex-start" }} onClick={() => setView(n.id)}>{n.label}</button>
          ))}
        </div>
      </TweaksPanel>

      <style>{`.nav-scrim{display:none}@media(max-width:920px){.nav-scrim{display:block}}`}</style>
    </div>
  );
}

function App() {
  const { user, loading } = useFirebaseAuth();
  if (loading) return <main className="app" style={{ minHeight: "100vh", display: "grid", placeItems: "center" }}><span className="auth-spinner" /></main>;
  return <WorkspaceApp key={user.uid} user={user} />;
}

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