// Petzone — main app shell
const { useState: useStateA, useEffect: useEffectA, useMemo: useMemoA } = React;

const PALETTES = {
  teal: {
    "--teal": "#2BB9C0",
    "--teal-deep": "#146A6F",
    "--teal-soft": "#E8F7F8",
    "--coral": "#F08A5D",
    "--ink": "#14272C",
    "--slate": "#5F7178",
    "--cream": "#FAF6F0",
  },
  sage: {
    "--teal": "#5BA17F",
    "--teal-deep": "#2E5E45",
    "--teal-soft": "#EAF3EC",
    "--coral": "#D97757",
    "--ink": "#1E2A24",
    "--slate": "#5B6A63",
    "--cream": "#F6F2EB",
  },
  ocean: {
    "--teal": "#3A7BD5",
    "--teal-deep": "#1C4E8C",
    "--teal-soft": "#E8F0FA",
    "--coral": "#F7A35C",
    "--ink": "#16242B",
    "--slate": "#5C6B72",
    "--cream": "#F7F5EF",
  },
  warm: {
    "--teal": "#C97B5C",
    "--teal-deep": "#7C3D24",
    "--teal-soft": "#FBEFE7",
    "--coral": "#2BB9C0",
    "--ink": "#2A1D17",
    "--slate": "#6E5C53",
    "--cream": "#FAF4EC",
  },
};

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "teal",
  "density": "comfortable",
  "heroVariant": "care",
  "rtl": false,
  "showBookSheetDemo": false
}/*EDITMODE-END*/;

const App = () => {
  // ---- routing (custom hash) ----
  const [page, setPage] = useStateA(() => (window.location.hash.replace("#","") || "home"));
  useEffectA(() => {
    const onHash = () => setPage(window.location.hash.replace("#","") || "home");
    window.addEventListener("hashchange", onHash);
    return () => window.removeEventListener("hashchange", onHash);
  }, []);
  const go = (p) => {
    window.location.hash = p;
    window.scrollTo({ top: 0, behavior: "instant" });
  };

  // ---- booking sheet ----
  const [book, setBook] = useStateA({ open: false, service: null });
  const openBook = (service) => setBook({ open: true, service: typeof service === "string" ? service : null });
  const closeBook = () => setBook({ open: false, service: null });

  // ---- tweaks ----
  const [tweaks, setTweaks] = window.useTweaks(TWEAK_DEFAULTS);

  // apply palette
  useEffectA(() => {
    const p = PALETTES[tweaks.palette] || PALETTES.teal;
    Object.entries(p).forEach(([k, v]) => document.documentElement.style.setProperty(k, v));
    document.documentElement.dir = tweaks.rtl ? "rtl" : "ltr";
  }, [tweaks.palette, tweaks.rtl]);

  // demo: auto-open book sheet
  useEffectA(() => {
    if (tweaks.showBookSheetDemo) setBook({ open: true, service: null });
  }, [tweaks.showBookSheetDemo]);

  // density
  useEffectA(() => {
    document.documentElement.style.setProperty("--density-scale", tweaks.density === "compact" ? "0.92" : tweaks.density === "spacious" ? "1.08" : "1");
  }, [tweaks.density]);

  const renderPage = () => {
    if (page.startsWith("service/")) return <ServiceDetailPage slug={page.split("/")[1]} go={go} openBook={openBook}/>;
    if (page.startsWith("vet/")) return <VetDetailPage slug={page.split("/")[1]} go={go} openBook={openBook}/>;
    if (page === "services") return <ServicesPage go={go} openBook={openBook}/>;
    if (page === "vets") return <VetsPage go={go} openBook={openBook}/>;
    if (page === "about") return <AboutPage go={go} openBook={openBook}/>;
    if (page === "contact") return <ContactPage go={go} openBook={openBook}/>;
    return <HomePage go={go} openBook={openBook} heroVariant={tweaks.heroVariant} density={tweaks.density}/>;
  };

  const { TweaksPanel, TweakSection, TweakRadio, TweakToggle, TweakSelect } = window;

  return (
    <div className="min-h-screen bg-[var(--paper)] pb-20 lg:pb-0">
      <Nav page={page} go={go} openBook={openBook}/>
      <main key={page}>{renderPage()}</main>
      <Footer go={go} openBook={openBook}/>
      <MobileBar openBook={openBook}/>
      <BookSheet open={book.open} onClose={closeBook} prefill={{ service: book.service }}/>

      <TweaksPanel title="Tweaks" defaultOpen={false}>
        <TweakSection title="Palette">
          <TweakRadio label="Accent" tweakKey="palette" options={[
            { value: "teal", label: "Teal" },
            { value: "sage", label: "Sage" },
            { value: "ocean", label: "Ocean" },
            { value: "warm", label: "Warm" },
          ]}/>
        </TweakSection>
        <TweakSection title="Layout">
          <TweakRadio label="Density" tweakKey="density" options={[
            { value: "compact", label: "Compact" },
            { value: "comfortable", label: "Comfortable" },
            { value: "spacious", label: "Spacious" },
          ]}/>
          <TweakToggle label="RTL (Arabic preview)" tweakKey="rtl"/>
        </TweakSection>
        <TweakSection title="Home hero">
          <TweakSelect label="Image variant" tweakKey="heroVariant" options={[
            { value: "care", label: "Vet with kitten (care)" },
            { value: "interior", label: "Clinic interior" },
            { value: "safe", label: "In safe hands" },
            { value: "cat", label: "We care" },
          ]}/>
        </TweakSection>
        <TweakSection title="Demo">
          <TweakToggle label="Open booking sheet" tweakKey="showBookSheetDemo"/>
        </TweakSection>
      </TweaksPanel>
    </div>
  );
};

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