// MostlyPrivacy — App shell, router, Tweaks panel and prototype jumper.
(function () {
const F = window.ForgeDesignSystem_e40d74;
const { Button, IconButton, Avatar, Badge, Tooltip } = F;
const { Icon, ICONS, PrivacyMark, Wordmark, LangSwitch } = window.MP;
const { useTweaks, TweaksPanel, TweakSection, TweakRadio, TweakColor, TweakToggle } = window;

const APP_NAV = [
  { id: "overview", label: "Overview", icon: ICONS.layout },
  { id: "sites", label: "Sites", icon: ICONS.sites, count: 4 },
  { id: "banner", label: "Cookie banner", icon: ICONS.cookie },
  { id: "scanner", label: "Cookie scanner", icon: ICONS.scan },
  { id: "documents", label: "Documents", icon: ICONS.doc, count: 11 },
];
const VIEW_LABEL = { wizard: "New document", documents: "Documents", scanner: "Cookie scanner", settings: "Settings", overview: "Overview", consentlog: "Consent log" };

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "teal",
  "dark": false,
  "density": "comfortable",
  "radius": "soft"
}/*EDITMODE-END*/;

const RADIUS_PX = { soft: "22px", medium: "16px", tight: "12px" };
const ACCENT_HEX = { teal: "#159a8c", indigo: "#7c69e0", green: "#2f9e6f", blue: "#5b8def" };
const HEX_ACCENT = Object.fromEntries(Object.entries(ACCENT_HEX).map(([k, v]) => [v, k]));

function AppShell({ route, nav, lang, setLang, dark, setDark }) {
  const view = route.appView;
  const cur = APP_NAV.find((n) => n.id === view);
  const fullBleed = view === "banner" || view === "wizard";
  const navActive = view === "wizard" ? "documents" : view === "consentlog" ? "sites" : view;
  const Body = view === "overview" ? window.MP.Overview
    : view === "sites" ? window.MP.Sites
    : view === "banner" ? window.MP.Builder
    : view === "scanner" ? window.MP.Scanner
    : view === "documents" ? window.MP.DocsHub
    : view === "wizard" ? window.MP.Wizard
    : view === "consentlog" ? window.MP.ConsentLog
    : window.MP.Settings;
  const crumbLabel = cur ? cur.label : (VIEW_LABEL[view] || "Overview");
  return (
    <div className="app-shell">
      <aside className="app-side">
        <div className="app-side__brand"><PrivacyMark s={26} /><Wordmark size={17} /></div>
        <div className="app-side__org">
          <span className="app-side__org-ic"><Icon d={ICONS.sites} size={15} /></span>
          <div><div className="app-side__org-name">Café Lumière</div><div className="app-side__org-sub">4 sites · Pro plan</div></div>
        </div>
        <nav className="app-nav">
          <div className="app-nav__label">Workspace</div>
          {APP_NAV.map((n) => (
            <button key={n.id} className={"app-nav__item" + (navActive === n.id ? " is-active" : "")} onClick={() => nav("app", n.id)}>
              <Icon d={n.icon} size={17} /><span>{n.label}</span>
              {n.count != null && <span className="app-nav__count">{n.count}</span>}
            </button>
          ))}
          <div className="app-nav__label">Account</div>
          <button className={"app-nav__item" + (view === "settings" ? " is-active" : "")} onClick={() => nav("app", "settings")}><Icon d={ICONS.cog} size={17} /><span>Settings</span></button>
        </nav>
        <div className="app-side__foot">
          <div className="app-user">
            <Avatar name="Élise Moreau" size="sm" />
            <div className="app-user__info"><div className="app-user__name">Élise Moreau</div><div className="app-user__email">elise@cafe-lumiere.fr</div></div>
          </div>
        </div>
      </aside>

      <div className="app-shell__main">
        <header className="app-topbar">
          <div className="app-crumbs"><span>MostlyPrivacy</span><span className="app-crumbs__sep">/</span>{view === "wizard" && <><span className="app-crumbs__link" onClick={() => nav("app", "documents")}>Documents</span><span className="app-crumbs__sep">/</span></>}<span className="app-crumbs__now">{crumbLabel}</span></div>
          <span className="app-topbar__spacer" />
          <button className="app-search"><Icon d={ICONS.search} size={15} /> Search…<span className="app-kbd">⌘K</span></button>
          <LangSwitch value={lang} onChange={setLang} />
          <Tooltip label={dark ? "Light mode" : "Dark mode"}><IconButton aria-label="Theme" onClick={() => setDark(!dark)}><Icon d={dark ? ICONS.sun : ICONS.moon} size={17} /></IconButton></Tooltip>
          <Button variant="ghost" size="sm" onClick={() => nav("landing")}>View site ↗</Button>
        </header>
        <main className="app-main" style={{ overflow: fullBleed ? "hidden" : "auto" }}>
          <Body nav={nav} lang={lang} setLang={setLang} initial={route.payload} />
        </main>
      </div>
    </div>
  );
}

function App() {
  const api = window.MPApi || { ready: false, onAuth: (cb) => { cb(null); return function () {}; } };
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [route, setRoute] = React.useState({ screen: "landing", appView: "overview" });
  const [lang, setLang] = React.useState("en");
  // undefined = auth state loading; null = signed out; object = signed in.
  const [user, setUser] = React.useState(api.ready ? undefined : null);

  const dark = !!t.dark;
  const setDark = (v) => setTweak("dark", v);

  // Track auth (live only). A magic-link return is auto-completed in api.js.
  React.useEffect(() => api.onAuth(setUser), []);

  const nav = React.useCallback((screen, appView, payload) => {
    setRoute((r) => ({ screen, appView: appView || r.appView, payload: payload != null ? payload : undefined }));
    const main = document.querySelector(".app-main, .mp-root");
    if (main && main.scrollTo) main.scrollTo(0, 0);
    window.scrollTo(0, 0);
  }, []);

  // apply visual tweaks to the document root
  React.useEffect(() => {
    const el = document.documentElement;
    el.setAttribute("data-accent", t.accent);
    el.setAttribute("data-theme", dark ? "dark" : "light");
    el.setAttribute("data-density", t.density);
    el.style.setProperty("--radius-card", RADIUS_PX[t.radius] || "22px");
  }, [t.accent, dark, t.density, t.radius]);

  // Live + signed-out → app screens require auth. Demo mode (!ready) stays open
  // so the marketing-embedded app is fully browsable with canned data.
  const needsAuth = api.ready && route.screen === "app" && user === null;
  const authLoading = api.ready && route.screen === "app" && user === undefined;

  const screen = authLoading
    ? <div style={{ minHeight: "100vh", display: "grid", placeItems: "center", color: "var(--fg-subtle)" }}>Loading…</div>
    : needsAuth
    ? <window.MP.Auth nav={nav} />
    : route.screen === "app"
    ? <AppShell route={route} nav={nav} lang={lang} setLang={setLang} dark={dark} setDark={setDark} user={user} signOut={() => api.signOut().then(() => nav("landing"))} />
    : route.screen === "pricing"
    ? <window.MP.Pricing lang={lang} setLang={setLang} nav={nav} />
    : route.screen === "auth"
    ? <window.MP.Auth nav={nav} />
    : <window.MP.Landing lang={lang} setLang={setLang} nav={nav} />;

  return (
    <>
      <div style={{ minHeight: "100vh" }}>{screen}</div>
      <TweaksPanel title="Tweaks">
        <TweakSection label="Theme" />
        <TweakColor label="Accent" value={ACCENT_HEX[t.accent] || ACCENT_HEX.teal}
          options={Object.values(ACCENT_HEX)}
          onChange={(hex) => setTweak("accent", HEX_ACCENT[hex] || "teal")} />
        <TweakToggle label="Dark mode (app)" value={t.dark} onChange={(v) => setTweak("dark", v)} />
        <TweakSection label="Layout" />
        <TweakRadio label="Density" value={t.density} options={["comfortable", "compact"]} onChange={(v) => setTweak("density", v)} />
        <TweakRadio label="Card rounding" value={t.radius} options={["soft", "medium", "tight"]} onChange={(v) => setTweak("radius", v)} />
      </TweaksPanel>
    </>
  );
}

ReactDOM.createRoot(document.getElementById("mp-app")).render(<App />);
})();