// App shell — router, top nav, mobile bottom nav
// Feed and Notifications removed. This is a folio + blog platform, not a social feed.

const { useState: useS, useEffect: useE } = React;

function useRoute() {
  const [path, setPath] = useS(() => window.location.hash.replace(/^#/, "") || "/");
  useE(() => {
    const on = () => setPath(window.location.hash.replace(/^#/, "") || "/");
    window.addEventListener("hashchange", on);
    return () => window.removeEventListener("hashchange", on);
  }, []);
  const go = (p) => { window.location.hash = p; };
  return [path, go];
}

function TopNav({ path, go }) {
  const [menuOpen, setMenuOpen] = useS(false);
  const me = window.byHandle("marin");
  const isLanding = path === "/" || path === "";

  return (
    <header className={`topnav${isLanding ? " topnav-landing" : ""}`}>
      <div className="topnav-inner">
        <div className="topnav-l" onClick={() => go("/")}>
          <span className="logo-mark"><LogoMark size={20} /></span>
          <span className="logo-word">Folio Index</span>
        </div>

        <nav className="topnav-c">
          <button className={path.startsWith("/explore") ? "on" : ""} onClick={() => go("/explore")}>Explore</button>
          <button className={path.startsWith("/dashboard") ? "on" : ""} onClick={() => go("/dashboard")}>Dashboard</button>
          <button className={path.startsWith("/u/") || path === "/edit" ? "on" : ""} onClick={() => go("/u/marin")}>My folio</button>
        </nav>

        <div className="topnav-r">
          <button className="topnav-search" onClick={() => go("/explore")}>
            {I.search}
            <span className="muted-l">Search…</span>
            <kbd className="mono">⌘K</kbd>
          </button>
          <div className="avatar-menu" onClick={() => setMenuOpen(!menuOpen)}>
            <Avatar person={me} size={32} />
            {menuOpen && (
              <div className="dropdown" onClick={(e) => e.stopPropagation()}>
                <div className="dropdown-h">
                  <Avatar person={me} size={36} />
                  <div>
                    <div style={{ fontSize: 13.5 }}>{me.name}</div>
                    <div className="mono muted-l">@{me.handle}</div>
                  </div>
                </div>
                <button onClick={() => { go("/u/marin"); setMenuOpen(false); }}>{I.user} View folio</button>
                <button onClick={() => { go("/edit"); setMenuOpen(false); }}>{I.edit} Edit folio</button>
                <button onClick={() => { go("/dashboard"); setMenuOpen(false); }}>{I.grid} Dashboard</button>
                <button onClick={() => { go("/settings"); setMenuOpen(false); }}>{I.settings} Settings</button>
                <div className="dropdown-sep" />
                <button onClick={() => { go("/"); setMenuOpen(false); }}>Sign out</button>
              </div>
            )}
          </div>
        </div>
      </div>
    </header>
  );
}

function BottomNav({ path, go }) {
  const items = [
    ["/", I.home, "Home"],
    ["/explore", I.compass, "Explore"],
    ["/dashboard", I.grid, "Dashboard"],
    ["/u/marin", I.user, "Me"],
  ];
  return (
    <nav className="bottomnav">
      {items.map(([p, ic, lbl]) => (
        <button key={p} className={path === p || (p !== "/" && path.startsWith(p)) ? "on" : ""} onClick={() => go(p)}>
          {ic}
          <span>{lbl}</span>
        </button>
      ))}
    </nav>
  );
}

function App() {
  const [path, go] = useRoute();
  const [t, setTweak] = useTweaks({
    accent: "#D85A3A",
    density: "comfortable",
    theme: "light",
    serif: "Fraunces",
  });

  useE(() => {
    document.documentElement.style.setProperty("--accent", t.accent);
    document.documentElement.dataset.theme = t.theme;
    document.documentElement.dataset.density = t.density;
    document.documentElement.style.setProperty("--serif", `'${t.serif}', 'Times New Roman', serif`);
  }, [t]);

  let view;
  if (path === "/" || path === "") view = <Landing go={go} />;
  else if (path === "/explore")    view = <Explore go={go} />;
  else if (path === "/dashboard")  view = <Dashboard go={go} />;
  else if (path === "/edit")       view = <Editor go={go} />;
  else if (path === "/settings")   view = <Settings go={go} />;
  else if (path === "/onboarding") view = <Onboarding go={go} />;
  else if (path.startsWith("/u/")) view = <Profile handle={path.slice(3)} go={go} />;
  else if (path.startsWith("/p/")) {
    const [, , h, id] = path.split("/");
    view = <ProjectPage handle={h} projectId={id} go={go} />;
  } else view = <Landing go={go} />;

  const hideChrome = path === "/onboarding";

  return (
    <div className="app">
      {!hideChrome && <TopNav path={path} go={go} />}
      <main className="main">{view}</main>
      {!hideChrome && <BottomNav path={path} go={go} />}

      <TweaksPanel title="Tweaks">
        <TweakSection title="Accent">
          <TweakColor
            options={["#D85A3A", "#2B6CB0", "#7C3AED", "#1F8A5B", "#B45309", "#0F766E", "#1B1B1B"]}
            value={t.accent}
            onChange={(v) => setTweak("accent", v)}
          />
        </TweakSection>
        <TweakSection title="Theme">
          <TweakRadio
            options={[{ value: "light", label: "Light" }, { value: "dark", label: "Dark" }]}
            value={t.theme}
            onChange={(v) => setTweak("theme", v)}
          />
        </TweakSection>
        <TweakSection title="Density">
          <TweakRadio
            options={[{ value: "comfortable", label: "Comfortable" }, { value: "compact", label: "Compact" }]}
            value={t.density}
            onChange={(v) => setTweak("density", v)}
          />
        </TweakSection>
        <TweakSection title="Display serif">
          <TweakSelect
            options={[
              { value: "Fraunces", label: "Fraunces" },
              { value: "EB Garamond", label: "EB Garamond" },
              { value: "Instrument Serif", label: "Instrument Serif" },
              { value: "Newsreader", label: "Newsreader" },
            ]}
            value={t.serif}
            onChange={(v) => setTweak("serif", v)}
          />
        </TweakSection>
        <TweakSection title="Jump to screen">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 6 }}>
            {[
              ["/", "Landing"],
              ["/explore", "Explore"],
              ["/u/marin", "Profile"],
              ["/p/marin/onsa", "Project"],
              ["/edit", "Editor"],
              ["/onboarding", "Onboarding"],
              ["/dashboard", "Dashboard"],
              ["/settings", "Settings"],
            ].map(([p, l]) => (
              <button key={p} className="tweak-jump" onClick={() => go(p)}>{l}</button>
            ))}
          </div>
        </TweakSection>
      </TweaksPanel>
    </div>
  );
}

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