// ============================================================
// app-v2.jsx — KONCEPT V2: router one-page + trasy funkcjonalne
// ============================================================

const TWEAK_DEFAULTS_V2 = /*EDITMODE-BEGIN*/{
  "accent": "#2e7d5b",
  "radius": "techniczne (3 px)"
}/*EDITMODE-END*/;

// ścieżka → id sekcji na stronie one-page
const V2_ANCHORS = {
  "/koncepcja": "koncepcja",
  "/mapa": "mapa",
  "/gminy": "gminy",
  "/inwestorzy": "inwestorzy",
  "/kontakt": "kontakt",
  "/o-mnie": "o-mnie",
};

function useRouteV2() {
  const [route, setRoute] = React.useState(() => window.location.hash.slice(1) || "/");
  React.useEffect(() => {
    const fn = () => setRoute(window.location.hash.slice(1) || "/");
    window.addEventListener("hashchange", fn);
    return () => window.removeEventListener("hashchange", fn);
  }, []);
  return route;
}

function AppV2() {
  const route = useRouteV2();
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS_V2);

  React.useEffect(() => {
    const root = document.documentElement;
    root.style.setProperty("--accent", t.accent);
    root.style.setProperty("--accent-strong", "color-mix(in oklch, " + t.accent + " 80%, black)");
    root.style.setProperty("--accent-soft", "color-mix(in oklch, " + t.accent + " 10%, white)");
    root.style.setProperty("--r", t.radius && t.radius.indexOf("3") >= 0 ? "3px" : "10px");
    root.style.setProperty("--r-lg", t.radius && t.radius.indexOf("3") >= 0 ? "6px" : "14px");
  }, [t.accent, t.radius]);

  // przewiń do sekcji one-page
  React.useEffect(() => {
    const id = V2_ANCHORS[route];
    if (route === "/") { window.scrollTo({ top: 0, behavior: "auto" }); return; }
    if (!id) return;
    const timer = setTimeout(() => {
      const el = document.getElementById(id);
      if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 64, behavior: "auto" });
    }, 160);
    return () => clearTimeout(timer);
  }, [route]);

  const seg = route.split("/").filter(Boolean);
  let page = null, label = "Strona główna", fullBleed = false, onePage = false;

  if (route === "/" || V2_ANCHORS[route]) {
    page = <PageHomeV2 />;
    onePage = true;
    label = route === "/mapa" ? "Mapa i głosowanie" : route === "/gminy" ? "Dla gmin"
      : route === "/inwestorzy" ? "Dla inwestorów" : route === "/kontakt" ? "Kontakt"
      : route === "/koncepcja" ? "Koncepcja" : "Strona główna";
  }
  else if (seg[0] === "lokalizacja") { page = <PageLokalizacja key={seg[1]} slug={seg[1]} />; label = "Karta lokalizacji"; }
  else if (route === "/zglos") { page = <PageZglos key="zglos" />; label = "Zgłoś lokalizację"; }
  else if (route === "/moje") { page = <PageMoje />; label = "Moje głosy"; }
  else if (seg[0] === "admin") { page = <PageAdmin sub={seg[1]} />; label = "Panel administracyjny"; fullBleed = true; }
  else if (route === "/polityka-prywatnosci") { page = <PageLegal kind="polityka" />; label = "Polityka prywatności"; }
  else if (route === "/regulamin") { page = <PageLegal kind="regulamin" />; label = "Regulamin platformy"; }
  else { page = <PageHomeV2 />; onePage = true; }

  return (
    <div data-screen-label={label}>
      <NavV2 route={route} />
      {page}
      {!fullBleed && <Footer />}
      <ToastHost />
      <TweaksPanel>
        <TweakSection label="Wygląd" />
        <TweakColor label="Kolor akcentu" value={t.accent}
          options={["#2e7d5b", "#33619e", "#8a5a2e", "#444a52"]}
          onChange={(v) => setTweak("accent", v)} />
        <TweakRadio label="Narożniki" value={t.radius}
          options={["techniczne (3 px)", "miękkie (10 px)"]}
          onChange={(v) => setTweak("radius", v)} />
      </TweaksPanel>
    </div>
  );
}

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