// Main app — hash router + tweaks integration

const { useState: useStateA, useEffect: useEffectA } = React;

function parseHash() {
  const h = (window.location.hash || "#/").replace(/^#/, "");
  const parts = h.split("/").filter(Boolean);
  if (parts.length === 0) return { name: "home" };
  if (parts[0] === "collections") return { name: "collections" };
  if (parts[0] === "collection" && parts[1]) return { name: "collection", slug: parts[1] };
  if (parts[0] === "product" && parts[1]) return { name: "product", id: parts[1] };
  if (parts[0] === "the-artist") return { name: "artist" };
  if (parts[0] === "the-craft") return { name: "craft" };
  if (parts[0] === "showroom") return { name: "showroom" };
  if (parts[0] === "contact") return { name: "contact" };
  return { name: "home" };
}
function routeToHash(r) {
  switch (r.name) {
    case "home": return "#/";
    case "collections": return "#/collections";
    case "collection": return `#/collection/${r.slug}`;
    case "product": return `#/product/${r.id}`;
    case "artist": return "#/the-artist";
    case "craft": return "#/the-craft";
    case "showroom": return "#/showroom";
    case "contact": return "#/contact";
    default: return "#/";
  }
}

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "hero": "p14",
  "accent": "#7A2E3B",
  "type": "cormorant",
  "showLotusPattern": true
}/*EDITMODE-END*/;

function App() {
  const [route, setRoute] = useStateA(parseHash());
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);

  useEffectA(() => {
    const on = () => setRoute(parseHash());
    window.addEventListener("hashchange", on);
    return () => window.removeEventListener("hashchange", on);
  }, []);

  const go = (r) => {
    window.location.hash = routeToHash(r);
    setRoute(r);
    // Scroll to top on navigation
    setTimeout(() => window.scrollTo({ top: 0, behavior: "instant" in window ? "instant" : "auto" }), 0);
  };

  // Push accent to CSS var
  useEffectA(() => {
    document.documentElement.style.setProperty("--accent", tweaks.accent || "#7A2E3B");
    if (tweaks.type === "fraunces") {
      document.documentElement.style.setProperty("--serif", '"Fraunces", Georgia, serif');
    } else {
      document.documentElement.style.setProperty("--serif", '"Cormorant Garamond", "Fraunces", Georgia, serif');
    }
  }, [tweaks.accent, tweaks.type]);

  let page = null;
  if (route.name === "home") page = <HomePage go={go} tweaks={tweaks} />;
  else if (route.name === "collections") page = <CollectionsHubPage go={go} />;
  else if (route.name === "collection") page = <CollectionPage slug={route.slug} go={go} />;
  else if (route.name === "product") page = <ProductPage id={route.id} go={go} />;
  else if (route.name === "artist") page = <ArtistPage go={go} />;
  else if (route.name === "craft") page = <CraftPage go={go} />;
  else if (route.name === "showroom") page = <ShowroomPage go={go} />;
  else if (route.name === "contact") page = <ContactPage go={go} />;

  return (
    <div data-screen-label={`Marushika · ${route.name}`}>
      <Nav route={route} go={go} />
      <div key={route.name + (route.slug||"") + (route.id||"")} className="fade-up">
        {page}
      </div>
      <Footer go={go} />
      <WhatsAppFab />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Hero look" />
        <TweakSelect
          label="Hero piece"
          value={tweaks.hero}
          options={[
            { value: "p14", label: "Evening Gown · Aqua Wash" },
            { value: "p09", label: "Long Dress · Glacier Blue" },
            { value: "p10", label: "Top & Trouser · Glacier" },
            { value: "p06", label: "Top & Trouser · Cranberry" },
            { value: "p07", label: "Long Dress · Morning Light" },
            { value: "p11", label: "Short Dress · Sage Whisper" },
            { value: "p12", label: "Long Dress · Purple Sage" },
          ]}
          onChange={(v) => setTweak("hero", v)}
        />

        <TweakSection label="Accent · jewel" />
        <TweakColor
          label="Per-collection jewel"
          value={tweaks.accent}
          options={["#7A2E3B", "#4F7A6E", "#5C8C9E", "#8C6B98", "#A8814B"]}
          onChange={(v) => setTweak("accent", v)}
        />

        <TweakSection label="Typography" />
        <TweakRadio
          label="Display serif"
          value={tweaks.type}
          options={[
            { value: "cormorant", label: "Cormorant" },
            { value: "fraunces", label: "Fraunces" },
          ]}
          onChange={(v) => setTweak("type", v)}
        />
      </TweaksPanel>
    </div>
  );
}

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