/* global React, ReactDOM, window, Header, HomePage, TrunksPage, RoundsPage, ShoeCabinetPage, EnsemblesPage, EnsembleDetailPage, BagsPage, CustomPage, AboutPage, ContactPage, PrivacyPage, BuyersPage, Footer, AuthProvider, LoginPage, RegisterPage, ForgotPasswordPage, ResetPasswordPage, AccountPage, useTweaks, TweaksPanel, TweakRadio, TweakColor, TweakSection */
const { useState, useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent":   "#6B4A2B",
  "cream":    "#F2ECE0",
  "ink":      "#1A1815",
  "displayFont": "Cormorant Garamond",
  "bodyFont":    "Manrope"
}/*EDITMODE-END*/;

const VALID_ROUTES = [
  "home", "trunks", "rounds", "shoecabinet", "ensembles", "ensemble", "bags",
  "about", "contact", "privacy", "buyers",
  "login", "register", "forgot", "reset", "account",
];
const VALID_BAG_FILTERS = ["all", "gentlemen", "princesses"];

function parseHash() {
  const raw = (window.location.hash || "").replace(/^#\/?/, "");
  const [rawRoute, ...rest] = raw.split("/");
  const rawParam = rest.join("/"); // токен сброса может содержать спецсимволы - join обратно
  const route = VALID_ROUTES.includes(rawRoute) ? rawRoute : "home";
  const bagFilter = VALID_BAG_FILTERS.includes(rawParam) ? rawParam : "all";
  const ensembleId = route === "ensemble" ? (rawParam || "") : "";
  const resetToken = route === "reset" ? (rawParam || "") : "";
  return { route, bagFilter, ensembleId, resetToken };
}

const EDIT_MODE = new URLSearchParams(window.location.search).get("edit") === "1";

function App() {
  const initial = parseHash();
  const [route, setRoute] = useState(initial.route);
  const [bagFilter, setBagFilter] = useState(initial.bagFilter);
  const [ensembleId, setEnsembleId] = useState(initial.ensembleId);
  const [resetToken, setResetToken] = useState(initial.resetToken);
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  // Apply CSS variables from tweaks
  useEffect(() => {
    const r = document.documentElement;
    r.style.setProperty("--accent", t.accent);
    r.style.setProperty("--cream",  t.cream);
    r.style.setProperty("--ink",    t.ink);
    r.style.setProperty("--bone",   shade(t.cream, -0.05));
    document.body.style.background = t.cream;
    document.body.style.color = t.ink;
  }, [t.accent, t.cream, t.ink]);

  // Sync browser back/forward and external hash changes into state
  useEffect(() => {
    const onHashChange = () => {
      const { route: r, bagFilter: f, ensembleId: eid, resetToken: rt } = parseHash();
      setRoute(r);
      setBagFilter(f);
      setEnsembleId(eid);
      setResetToken(rt);
    };
    window.addEventListener("hashchange", onHashChange);
    return () => window.removeEventListener("hashchange", onHashChange);
  }, []);

  const goTo = (r, param) => {
    const routeChanged = r !== route;
    setRoute(r);

    let hash = `#${r}`;
    if (r === "bags") {
      const nextFilter = param !== undefined ? param : bagFilter;
      setBagFilter(nextFilter);
      if (nextFilter && nextFilter !== "all") hash = `#${r}/${nextFilter}`;
    } else if (r === "ensemble") {
      const nextId = param !== undefined ? param : ensembleId;
      setEnsembleId(nextId);
      if (nextId) hash = `#${r}/${nextId}`;
    } else if (r === "reset") {
      const nextToken = param !== undefined ? param : resetToken;
      setResetToken(nextToken);
      if (nextToken) hash = `#${r}/${nextToken}`;
    }

    if (window.location.hash !== hash) {
      history.pushState(null, "", hash);
    }
    if (routeChanged) window.scrollTo({ top: 0, behavior: "instant" });
  };

  return (
    <div data-screen-label={"Route · " + route} style={{
      fontFamily: `'${t.bodyFont}', system-ui, sans-serif`,
      minHeight: "100vh",
    }}>
      <style>{`
        :root { --display: '${t.displayFont}', serif; --body: '${t.bodyFont}', sans-serif; }
        body { margin: 0; }
        * { box-sizing: border-box; }
        ::selection { background: var(--ink); color: var(--cream); }
        html { scroll-behavior: smooth; }
      `}</style>

      <Header route={route} setRoute={goTo} bagFilter={bagFilter} />

      <main style={{ paddingTop: 0 }}>
        {route === "home"        && <HomePage        setRoute={goTo} />}
        {route === "trunks"      && <TrunksPage      setRoute={goTo} />}
        {route === "rounds"      && <RoundsPage      setRoute={goTo} />}
        {route === "shoecabinet" && <ShoeCabinetPage setRoute={goTo} />}
        {route === "ensembles"   && <EnsemblesPage   setRoute={goTo} />}
        {route === "ensemble"    && <EnsembleDetailPage id={ensembleId} setRoute={goTo} />}
        {route === "bags"        && <BagsPage        filter={bagFilter} setRoute={goTo} />}
        {route === "about"       && <AboutPage       setRoute={goTo} />}
        {route === "contact"     && <ContactPage />}
        {route === "privacy"     && <PrivacyPage      setRoute={goTo} />}
        {route === "buyers"      && <BuyersPage       setRoute={goTo} />}
        {route === "login"       && <LoginPage       setRoute={goTo} />}
        {route === "register"    && <RegisterPage    setRoute={goTo} />}
        {route === "forgot"      && <ForgotPasswordPage setRoute={goTo} />}
        {route === "reset"       && <ResetPasswordPage token={resetToken} setRoute={goTo} />}
        {route === "account"     && <AccountPage     setRoute={goTo} />}
      </main>

      <Footer setRoute={goTo} />

      {EDIT_MODE && <TweaksPanel title="Tweaks">
        <TweakSection label="Цвет">
          <TweakColor
            label="Тон акцента"
            value={t.accent}
            onChange={v => setTweak("accent", v)}
            options={["#6B4A2B", "#5A1F22", "#2C3A2E", "#1F2A3D", "#2F3034"]}
          />
          <TweakColor
            label="Фон / молочный"
            value={t.cream}
            onChange={v => setTweak("cream", v)}
            options={["#F2ECE0", "#F8F3EA", "#EEE8DC", "#E9E1D2", "#FFFFFF"]}
          />
          <TweakColor
            label="Чернила"
            value={t.ink}
            onChange={v => setTweak("ink", v)}
            options={["#1A1815", "#0E0E10", "#2F3034", "#3B2A1A"]}
          />
        </TweakSection>

        <TweakSection label="Типографика">
          <TweakRadio
            label="Заголовки"
            value={t.displayFont}
            onChange={v => setTweak("displayFont", v)}
            options={[
              { label: "Cormorant", value: "Cormorant Garamond" },
              { label: "Italiana",  value: "Italiana" },
              { label: "Marcellus", value: "Marcellus" },
            ]}
          />
          <TweakRadio
            label="Текст"
            value={t.bodyFont}
            onChange={v => setTweak("bodyFont", v)}
            options={[
              { label: "Manrope",  value: "Manrope" },
              { label: "DM Sans",  value: "DM Sans" },
              { label: "Tenor",    value: "Tenor Sans" },
            ]}
          />
        </TweakSection>
      </TweaksPanel>}
    </div>
  );
}

// quick color shade util (works on hex)
function shade(hex, amt) {
  const h = hex.replace("#", "");
  const r = parseInt(h.slice(0, 2), 16);
  const g = parseInt(h.slice(2, 4), 16);
  const b = parseInt(h.slice(4, 6), 16);
  const t = amt < 0 ? 0 : 255;
  const p = Math.abs(amt);
  const mix = c => Math.round((t - c) * p + c);
  return "#" + [mix(r), mix(g), mix(b)].map(c => c.toString(16).padStart(2, "0")).join("");
}

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