/* ============================================================
   AACSH — App router + tweaks
   ============================================================ */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "primaryHue": "aubergine",
  "typeScale": "serif-editorial",
  "showRiskBadges": true,
  "compactNav": false,
  "accentMark": "gold"
}/*EDITMODE-END*/;

function App() {
  const [path, setPath] = useState(() => window.location.hash.replace(/^#/, "") || "/");
  const [bookOpen, setBookOpen] = useState(false);
  const [bookPrefill, setBookPrefill] = useState({ dept: "", proc: "" });
  const tweaksRef = useRef(null);
  const [tweaks, setTweak] = useTweaks ? useTweaks(TWEAK_DEFAULTS) : [TWEAK_DEFAULTS, () => {}];

  const navigate = useCallback((to) => {
    window.location.hash = to;
    setPath(to);
    window.scrollTo({ top: 0, behavior: "instant" });
  }, []);

  useEffect(() => {
    const fn = () => {
      const p = window.location.hash.replace(/^#/, "") || "/";
      setPath(p);
    };
    window.addEventListener("hashchange", fn);
    return () => window.removeEventListener("hashchange", fn);
  }, []);

  const openBook = useCallback((dept, proc) => {
    setBookPrefill({ dept: dept || "", proc: proc || "" });
    setBookOpen(true);
  }, []);

  /* Apply tweaks via CSS vars */
  useEffect(() => {
    const root = document.documentElement;
    const hue = tweaks.primaryHue;
    if (hue === "aubergine") {
      root.style.setProperty("--plum", "#3D1B4D");
      root.style.setProperty("--plum-deep", "#2A1136");
      root.style.setProperty("--plum-soft", "#6E4382");
      root.style.setProperty("--mist", "#F4EFF6");
    } else if (hue === "clinical-blue") {
      root.style.setProperty("--plum", "#1E5A8A");
      root.style.setProperty("--plum-deep", "#13405F");
      root.style.setProperty("--plum-soft", "#5481AD");
      root.style.setProperty("--mist", "#EEF3F8");
    } else if (hue === "deep-teal") {
      root.style.setProperty("--plum", "#1F5E63");
      root.style.setProperty("--plum-deep", "#0E3C40");
      root.style.setProperty("--plum-soft", "#4A8487");
      root.style.setProperty("--mist", "#ECF3F2");
    } else if (hue === "midnight") {
      root.style.setProperty("--plum", "#1A2238");
      root.style.setProperty("--plum-deep", "#10162A");
      root.style.setProperty("--plum-soft", "#4A536B");
      root.style.setProperty("--mist", "#EEF0F4");
    }

    if (tweaks.accentMark === "gold") {
      root.style.setProperty("--gold", "#B08D57");
      root.style.setProperty("--gold-soft", "#D9C39A");
    } else if (tweaks.accentMark === "copper") {
      root.style.setProperty("--gold", "#A8634C");
      root.style.setProperty("--gold-soft", "#D9A993");
    } else if (tweaks.accentMark === "silver") {
      root.style.setProperty("--gold", "#8A8C90");
      root.style.setProperty("--gold-soft", "#C8CACE");
    }

    if (tweaks.typeScale === "serif-editorial") {
      root.style.setProperty("--font-serif", "'Fraunces', 'Iowan Old Style', Georgia, serif");
    } else if (tweaks.typeScale === "modern-sans") {
      root.style.setProperty("--font-serif", "'Inter', system-ui, sans-serif");
    } else if (tweaks.typeScale === "warm-serif") {
      root.style.setProperty("--font-serif", "'Cormorant Garamond', Georgia, serif");
    }
  }, [tweaks]);

  /* Route */
  let page;
  if (path === "/" || path === "") {
    page = <HomePage onNavigate={navigate} onBook={() => openBook()} />;
  } else if (path === "/departments") {
    page = <DepartmentsHubPage onNavigate={navigate} />;
  } else if (path.startsWith("/departments/")) {
    const slug = path.split("/")[2];
    page = <DepartmentPage slug={slug} onNavigate={navigate} onBook={(d, p) => openBook(d || slug, p)} />;
  } else if (path.startsWith("/procedures/")) {
    const parts = path.split("/");
    page = <ProcedurePage deptSlug={parts[2]} procSlug={parts[3]} onNavigate={navigate} onBook={openBook} />;
  } else if (path === "/doctors") {
    page = <DoctorsHubPage onNavigate={navigate} />;
  } else if (path.startsWith("/doctors/")) {
    const slug = path.split("/")[2];
    page = <DoctorProfilePage slug={slug} onNavigate={navigate} onBook={openBook} />;
  } else if (path === "/accreditation") {
    page = <AccreditationPage onNavigate={navigate} onBook={() => openBook()} />;
  } else if (path === "/before-after") {
    page = <BeforeAfterPage onBook={() => openBook()} />;
  } else if (path === "/medical-tourism") {
    page = <MedicalTourismPage onBook={() => openBook()} />;
  } else if (path === "/about") {
    page = <AboutPage onBook={() => openBook()} />;
  } else if (path === "/contact") {
    page = <ContactPage onBook={() => openBook()} />;
  } else {
    page = <NotFound onNavigate={navigate} />;
  }

  return (
    <>
      <TopNav onNavigate={navigate} currentPath={path} onBook={() => openBook()} />
      <main>{page}</main>
      <Footer onNavigate={navigate} onBook={() => openBook()} />

      <AppointmentModal
        open={bookOpen}
        onClose={() => setBookOpen(false)}
        prefillDept={bookPrefill.dept}
        prefillProcedure={bookPrefill.proc}
      />

      {/* Tweaks panel */}
      {window.TweaksPanel && (
        <TweaksPanel title="Tweaks">
          <TweakSection title="Palette">
            <TweakRadio
              label="Primary tone"
              value={tweaks.primaryHue}
              onChange={v => setTweak("primaryHue", v)}
              options={[
                { value: "aubergine", label: "Aubergine" },
                { value: "clinical-blue", label: "Clinical blue" },
              ]}
            />
            <TweakSelect
              label="More directions"
              value={tweaks.primaryHue}
              onChange={v => setTweak("primaryHue", v)}
              options={[
                { value: "aubergine", label: "Aubergine (logo-derived)" },
                { value: "clinical-blue", label: "Clinical blue" },
                { value: "deep-teal", label: "Deep teal" },
                { value: "midnight", label: "Midnight ink" },
              ]}
            />
            <TweakRadio
              label="Metallic accent"
              value={tweaks.accentMark}
              onChange={v => setTweak("accentMark", v)}
              options={[
                { value: "gold", label: "Gold" },
                { value: "copper", label: "Copper" },
                { value: "silver", label: "Silver" },
              ]}
            />
          </TweakSection>

          <TweakSection title="Typography">
            <TweakSelect
              label="Display family"
              value={tweaks.typeScale}
              onChange={v => setTweak("typeScale", v)}
              options={[
                { value: "serif-editorial", label: "Fraunces (editorial)" },
                { value: "warm-serif", label: "Cormorant (warmer)" },
                { value: "modern-sans", label: "Inter only (modern)" },
              ]}
            />
          </TweakSection>

          <TweakSection title="Compliance display">
            <TweakToggle
              label="Show risk badges on surgical procedures"
              value={tweaks.showRiskBadges}
              onChange={v => setTweak("showRiskBadges", v)}
            />
          </TweakSection>
        </TweaksPanel>
      )}
    </>
  );
}

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