/* ============================================================
   COMMONS — app shell, router, page transitions
   ============================================================ */

function Footer({ go }) {
  return (
    <footer className="footer">
      <div className="shell footer-inner">
        <div className="footer-brand">
          <Logo onClick={() => go("discover")} />
          <p>A warm, well-made commons for the global Punjabi diaspora.</p>
          <div className="footer-loc"><Icon name="pin" size={14} /> Worldwide · change</div>
        </div>
        <div className="footer-cols">
          <div>
            <span className="kicker">Explore</span>
            <a onClick={() => go("discover")}>Events</a>
            <a onClick={() => go("community")}>Community</a>
            <a onClick={() => go("read")}>Stories</a>
          </div>
          <div>
            <span className="kicker">Create</span>
            <a onClick={() => go("discover")}>Host an event</a>
            <a onClick={() => go("community")}>Start a thread</a>
            <a onClick={() => go("read")}>Write a story</a>
          </div>
          <div>
            <span className="kicker">iPanjab</span>
            <a>About</a>
            <a>Guidelines</a>
            <a>Contact</a>
          </div>
        </div>
      </div>
      <div className="shell footer-bottom">
        <span>© 2026 iPanjab</span>
        <span>Made for the diaspora, by the diaspora.</span>
      </div>
    </footer>
  );
}

const TWEAK_DEFAULTS = {
  accent: "#E8482A",
  dark: false,
  radius: 14,
  headline: "editorial",
  motion: true,
};

function App() {
  const [route, setRoute] = useState(() => (location.hash.replace(/^#\/?/, "") || "discover"));
  const [favs, setFavs] = useState(() => new Set(EVENTS.filter(e => e.fav).map(e => e.id)));
  const [posts, setPosts] = useState(POSTS);
  const addPost = (p) => setPosts(prev => [p, ...prev]);
  const [trans, setTrans] = useState(false);
  const scrollerRef = useRef(null);
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  useEffect(() => {
    const root = document.documentElement;
    root.style.setProperty("--accent", t.accent);
    root.style.setProperty("--accent-deep", `color-mix(in oklch, ${t.accent} 76%, black)`);
    root.style.setProperty("--accent-soft", `color-mix(in oklch, ${t.accent} 15%, var(--card))`);
    root.setAttribute("data-theme", t.dark ? "dark" : "light");
    root.style.setProperty("--radius", t.radius + "px");
    root.style.setProperty("--radius-sm", Math.round(t.radius * 0.64) + "px");
    root.style.setProperty("--radius-lg", Math.round(t.radius * 1.6) + "px");
    root.style.setProperty("--serif", t.headline === "modern"
      ? '"Hanken Grotesk", system-ui, sans-serif'
      : '"Newsreader", Georgia, "Times New Roman", serif');
    root.classList.toggle("no-motion", !t.motion);
  }, [t.accent, t.dark, t.radius, t.headline, t.motion]);

  const go = (r) => {
    if (r === route) { window.scrollTo({ top: 0, behavior: "smooth" }); return; }
    setTrans(true);
    setTimeout(() => {
      setRoute(r);
      location.hash = "/" + r;
      window.scrollTo(0, 0);
      requestAnimationFrame(() => setTrans(false));
    }, 220);
  };

  useEffect(() => {
    const onHash = () => {
      const r = location.hash.replace(/^#\/?/, "") || "discover";
      setRoute(r);
    };
    window.addEventListener("hashchange", onHash);
    return () => window.removeEventListener("hashchange", onHash);
  }, []);

  const toggleFav = (id) => setFavs(prev => {
    const n = new Set(prev); n.has(id) ? n.delete(id) : n.add(id); return n;
  });

  const [top, sub] = route.split("/");
  let view;
  if (top === "discover" && sub) view = <EventDetail id={sub} go={go} favs={favs} toggleFav={toggleFav} />;
  else if (top === "discover") view = <Discover go={go} favs={favs} toggleFav={toggleFav} />;
  else if (top === "community" && sub) view = <PostThread id={sub} go={go} posts={posts} />;
  else if (top === "community") view = <Community go={go} posts={posts} />;
  else if (top === "compose") view = <NewPost go={go} addPost={addPost} />;
  else if (top === "read" && sub) view = <Reader id={sub} go={go} />;
  else if (top === "read") view = <Read go={go} />;
  else if (top === "profile") view = <Profile sub={sub} go={go} favs={favs} toggleFav={toggleFav} posts={posts} />;
  else if (top === "settings") view = <Settings go={go} tweaks={t} setTweak={setTweak} />;
  else if (top === "host") view = <HostEvent go={go} />;
  else view = <Discover go={go} favs={favs} toggleFav={toggleFav} />;

  return (
    <React.Fragment>
      <Nav route={route} go={go} />
      <main className={"stage" + (trans ? " leaving" : " entering")} key={route} ref={scrollerRef}>
        {view}
      </main>
      <Footer go={go} />
      <TweaksPanel title="Tweaks">
        <TweakSection label="Color" />
        <TweakColor label="Accent" value={t.accent}
          options={["#E8482A", "#2C4A6E", "#5E7355", "#6B3F5E", "#B98326"]}
          onChange={(v) => setTweak("accent", v)} />
        <TweakToggle label="Dark mode" value={t.dark} onChange={(v) => setTweak("dark", v)} />
        <TweakSection label="Shape & type" />
        <TweakSlider label="Corner radius" value={t.radius} min={2} max={24} unit="px"
          onChange={(v) => setTweak("radius", v)} />
        <TweakRadio label="Headlines" value={t.headline}
          options={["editorial", "modern"]}
          onChange={(v) => setTweak("headline", v)} />
        <TweakSection label="Motion" />
        <TweakToggle label="Animations" value={t.motion} onChange={(v) => setTweak("motion", v)} />
      </TweaksPanel>
    </React.Fragment>
  );
}

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