/* Faderhead – Production site app (no prototype frames)
   Renders pages directly in the browser, with pushState routing.
   Mobile nav handled here; each page handles its own desktop nav. */

/* global React, ReactDOM, NavCtx, SigHomeContent, SigMusicLanding,
   SigAlbum, SigShows, SigBlog, SigPost, SigDeepDive, SigContact,
   SigImpressum, SigDatenschutz, SigShopLegal, SigMobileNav */

const { useState, useEffect } = React;

/* ── Route helpers ──────────────────────────────────────────────── */
function pathToRoute(pathname) {
  const parts = pathname.replace(/^\//, "").split("/").filter(Boolean);
  if (parts.length === 0) return { name: "home" };
  switch (parts[0]) {
    case "music":       return parts[1] ? { name: "album", id: parts[1] } : { name: "music" };
    case "shows":       return { name: "shows" };
    case "blog":        return parts[1] ? { name: "post", id: parts[1] } : { name: "blog" };
    case "about":       return { name: "deep-dive" };
    case "contact":     return { name: "contact" };
    case "impressum":   return { name: "impressum" };
    case "datenschutz": return { name: "datenschutz" };
    case "shop":        return { name: "shop-legal" };
    default:            return { name: "home" };
  }
}

function routeToPath(route) {
  switch (route.name) {
    case "home":        return "/";
    case "music":       return "/music";
    case "album":       return "/music/" + (route.id || "");
    case "shows":       return "/shows";
    case "blog":        return "/blog";
    case "post":        return "/blog/" + (route.id || "");
    case "deep-dive":   return "/about";
    case "contact":     return "/contact";
    case "impressum":   return "/impressum";
    case "datenschutz": return "/datenschutz";
    case "shop-legal":  return "/shop";
    default:            return "/";
  }
}

/* ── Responsive hook ────────────────────────────────────────────── */
function useCompact() {
  const [compact, setCompact] = useState(window.innerWidth < 768);
  useEffect(() => {
    const fn = () => setCompact(window.innerWidth < 768);
    window.addEventListener("resize", fn);
    return () => window.removeEventListener("resize", fn);
  }, []);
  return compact;
}

/* ── Page renderer ──────────────────────────────────────────────── */
function RoutePage({ route, compact }) {
  switch (route.name) {
    case "home":        return <SigHomeContent compact={compact} tickerOn={false} />;
    case "music":       return <SigMusicLanding compact={compact} />;
    case "album":       return <SigAlbum compact={compact} albumId={route.id || "into-the-metadrome"} />;
    case "shows":       return <SigShows compact={compact} />;
    case "blog":        return <SigBlog compact={compact} />;
    case "post":        return <SigPost compact={compact} postId={route.id} />;
    case "deep-dive":   return <SigDeepDive compact={compact} />;
    case "contact":     return <SigContact compact={compact} />;
    case "impressum":   return <SigImpressum compact={compact} />;
    case "datenschutz": return <SigDatenschutz compact={compact} />;
    case "shop-legal":  return <SigShopLegal compact={compact} />;
    default:            return <SigHomeContent compact={compact} />;
  }
}

/* ── App root ───────────────────────────────────────────────────── */
function SiteApp() {
  const [route, setRoute] = useState(() => pathToRoute(window.location.pathname));
  const [menuOpen, setMenuOpen] = useState(false);
  const compact = useCompact();

  useEffect(() => {
    const onPop = () => {
      setRoute(pathToRoute(window.location.pathname));
      setMenuOpen(false);
    };
    window.addEventListener("popstate", onPop);
    return () => window.removeEventListener("popstate", onPop);
  }, []);

  const go = (r) => {
    const path = routeToPath(r);
    if (window.location.pathname !== path) history.pushState({}, "", path);
    setRoute(r);
    setMenuOpen(false);
    // When returning to music, SigMusicLanding's useEffect restores scroll;
    // skip the reset so the position isn't clobbered.
    if (r.name !== "music" || !sessionStorage.getItem("fh-music-scroll")) {
      window.scrollTo(0, 0);
    }
  };

  return (
    <NavCtx.Provider value={{ route, go }}>
      <div className={compact ? "sig-mobile" : ""} style={{ minHeight: "100vh", background: "var(--bg)" }}>
        {compact && (
          <SigMobileNav route={route} go={go} open={menuOpen} setOpen={setMenuOpen} />
        )}
        <div className={`sig-page${compact ? "" : ""}`}>
          <div className="sig-page-inner">
            <RoutePage route={route} compact={compact} />
          </div>
        </div>
      </div>
    </NavCtx.Provider>
  );
}

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