/* global React, ReactDOM */
const { useState, useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "brandName": "Centrum Odwołań Prawniczych",
  "greenShade": "bottle",
  "typo": "serif",
  "darkHero": false
}/*EDITMODE-END*/;

const SHADES = {
  bottle:   { p: "#2d5a44", d: "#1a3d2f", deep: "#0f2820", l: "#3d7a5f", soft: "#eff4f0", soft2: "#dde8e1" },
  emerald:  { p: "#2d6a4f", d: "#1b4332", deep: "#0f2e22", l: "#52b788", soft: "#edf6f1", soft2: "#d8eee0" },
  olive:    { p: "#5a8a3a", d: "#2d4220", deep: "#1c2912", l: "#74a64f", soft: "#f3f6ec", soft2: "#e8efde" },
  sage:     { p: "#4a7c59", d: "#345a3f", deep: "#1f3826", l: "#7a9d83", soft: "#eef3ee", soft2: "#d3e0d4" },
  dark:     { p: "#0b3d2e", d: "#06251c", deep: "#031711", l: "#1f6048", soft: "#e6ede9", soft2: "#c7d6cf" },
};

const PAGE_URLS = {
  home: "index.html",
  procedura: "procedura-odwolania.html",
  wyroznia: "co-nas-wyroznia.html",
  kontakt: "kontakt.html",
  polityka: "polityka-prywatnosci.html",
};

const App = () => {
  const [tweaks, setTweaks] = useTweaks(TWEAK_DEFAULTS);
  const initialPage = (typeof window !== "undefined" && window.__INITIAL_PAGE__) || "home";
  const [page, _setPage] = useState(initialPage);
  const setPage = (p) => {
    _setPage(p);
    // Navigate to the static URL so each page has its own indexable HTML.
    if (typeof window !== "undefined" && PAGE_URLS[p] && p !== initialPage) {
      window.location.href = PAGE_URLS[p];
    }
  };

  // Apply theme tokens
  useEffect(() => {
    const sh = SHADES[tweaks.greenShade] || SHADES.olive;
    const r = document.documentElement;
    r.style.setProperty("--green-600", sh.p);
    r.style.setProperty("--green-800", sh.d);
    r.style.setProperty("--green-900", sh.deep);
    r.style.setProperty("--green-500", sh.l);
    r.style.setProperty("--green-50", sh.soft);
    r.style.setProperty("--green-100", sh.soft2);
    r.style.setProperty("--accent", sh.p);
    r.style.setProperty("--accent-deep", sh.d);
    r.style.setProperty("--accent-soft", sh.soft);
    document.body.dataset.typo = tweaks.typo;
  }, [tweaks.greenShade, tweaks.typo]);

  // Scroll to top on page change
  useEffect(() => { window.scrollTo({ top: 0, behavior: "instant" }); }, [page]);

  let pageContent;
  switch (page) {
    case "procedura": pageContent = <ProceduraPage setPage={setPage} />; break;
    case "wyroznia":  pageContent = <WyrozniaPage setPage={setPage} />; break;
    case "kontakt":   pageContent = <KontaktPage setPage={setPage} />; break;
    case "polityka":  pageContent = <PolitykaPage setPage={setPage} />; break;
    default:          pageContent = <HomePage setPage={setPage} brandName={tweaks.brandName} />;
  }

  return (
    <>
      <Header page={page} setPage={setPage} brandName={tweaks.brandName} />
      {pageContent}
      <Footer setPage={setPage} brandName={tweaks.brandName} />

      <TweaksPanel title="Tweaks" defaultPosition={{ right: 24, bottom: 24 }}>
        <TweakSection title="Marka">
          <TweakRadio
            label="Nazwa"
            value={tweaks.brandName}
            onChange={(v) => setTweaks({ brandName: v })}
            options={[
              { value: "Centrum Odwołań Prawniczych", label: "Centrum Odwołań" },
              { value: "Twoje Odwołanie", label: "Twoje Odwołanie" },
            ]}
          />
        </TweakSection>
        <TweakSection title="Kolor wiodący">
          <TweakSelect
            label="Odcień zieleni"
            value={tweaks.greenShade}
            onChange={(v) => setTweaks({ greenShade: v })}
            options={[
              { value: "bottle",  label: "Butelkowa (z dokumentu)" },
              { value: "emerald", label: "Szmaragd" },
              { value: "olive",   label: "Oliwka" },
              { value: "sage",    label: "Szałwia" },
              { value: "dark",    label: "Ciemna zieleń" },
            ]}
          />
        </TweakSection>
        <TweakSection title="Typografia">
          <TweakRadio
            label="Nagłówki"
            value={tweaks.typo}
            onChange={(v) => setTweaks({ typo: v })}
            options={[
              { value: "serif", label: "Serif (klasyka)" },
              { value: "sans",  label: "Sans (modern)" },
            ]}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
};

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