// Modern Vet — main app / router

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

const useHashRoute = () => {
  const [hash, setHash] = useStateA(window.location.hash || "#/");
  useEffectA(() => {
    const onChange = () => { setHash(window.location.hash || "#/"); window.scrollTo({ top: 0, behavior: "instant" }); };
    window.addEventListener("hashchange", onChange);
    return () => window.removeEventListener("hashchange", onChange);
  }, []);
  return hash;
};

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#E5B595",
  "showEmergencyStrip": true
}/*EDITMODE-END*/;

function App() {
  const hash = useHashRoute();
  const [bookOpen, setBookOpen] = useStateA(false);
  const [branch, setBranch] = useStateA("al-wasl");
  const [bookService, setBookService] = useStateA(null);
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);

  // Apply accent tweak
  useEffectA(() => {
    const root = document.documentElement;
    const accentDarkMap = {
      "#E5B595": "#C8916B", // peach
      "#A6BCA6": "#6F8E6F", // sage
      "#7BAEB3": "#3E8088", // teal
      "#D8B26A": "#A8862F", // gold
    };
    root.style.setProperty("--peach", tweaks.accent);
    root.style.setProperty("--peach-dark", accentDarkMap[tweaks.accent] || "#C8916B");
  }, [tweaks.accent]);

  // Parse route
  const parts = hash.replace(/^#\/?/, "").split("/").filter(Boolean);
  let page = null;
  const openBook = (svc) => { if (svc) setBookService(svc); setBookOpen(true); };

  if (parts.length === 0) {
    page = <HomePage onBook={() => openBook()} branch={branch} setBranch={setBranch} />;
  } else if (parts[0] === "services" && parts[1]) {
    page = <ServiceDetailPage slug={parts[1]} onBook={() => openBook()} setBookService={setBookService} />;
  } else if (parts[0] === "services") {
    page = <ServicesPage onBook={() => openBook()} />;
  } else if (parts[0] === "branches" && parts[1]) {
    page = <BranchDetailPage slug={parts[1]} onBook={() => openBook()} setBookBranch={setBranch} />;
  } else if (parts[0] === "branches") {
    page = <BranchesPage />;
  } else if (parts[0] === "vets" && parts[1]) {
    page = <VetDetailPage slug={parts[1]} onBook={() => openBook()} />;
  } else if (parts[0] === "vets") {
    page = <VetsPage />;
  } else if (parts[0] === "prices") {
    page = <PricesPage onBook={() => openBook()} />;
  } else if (parts[0] === "emergency") {
    page = <EmergencyPage />;
  } else if (parts[0] === "about") {
    page = <AboutPage />;
  } else if (parts[0] === "contact") {
    page = <ContactPage onBook={() => openBook()} />;
  } else {
    page = <HomePage onBook={() => openBook()} branch={branch} setBranch={setBranch} />;
  }

  return (
    <>
      {tweaks.showEmergencyStrip && <EmergencyStrip />}
      <Nav onBook={() => openBook()} currentHash={hash} branch={branch} onBranchChange={setBranch} />
      <div className="app-shell">{page}</div>
      <Footer />
      <MobileBar onBook={() => openBook()} />
      <a href="https://wa.me/971506304573" target="_blank" rel="noopener" className="wa-fab" aria-label="WhatsApp"><Icon name="whatsapp"/></a>
      <BookModal open={bookOpen} onClose={() => setBookOpen(false)} branch={branch} defaultService={bookService} />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Accent colour">
          <TweakColor label="Accent" value={tweaks.accent}
            options={["#E5B595", "#A6BCA6", "#7BAEB3", "#D8B26A"]}
            onChange={v => setTweak("accent", v)} />
        </TweakSection>
        <TweakSection label="Layout">
          <TweakToggle label="Top emergency strip" value={tweaks.showEmergencyStrip} onChange={v => setTweak("showEmergencyStrip", v)} />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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