/* global React, ReactDOM, HomePage, TreatmentsPage, PillarPage, DoctorsPage, DoctorProfilePage, AboutPage, LocationPage, BeforeAfterPage, ContactPage, Navbar, Footer, BookingFlow, CONTACT, COPY, useTweaks, TweaksPanel, TweakSection, TweakColor, TweakRadio, TweakSelect, TweakToggle */

const { useState, useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "porcelain",
  "accent": "#B8995A",
  "fontDisplay": "Cormorant Garamond",
  "monoMarquee": true,
  "navStyle": "centered",
  "language": "en"
}/*EDITMODE-END*/;

const PALETTES = {
  porcelain: { theme: "", lbl: "Porcelain" },
  rose:      { theme: "theme-rose", lbl: "Pâle rosée" },
  noir:      { theme: "theme-noir", lbl: "Nuit Lutétia" }
};

const FONT_OPTIONS = ["Cormorant Garamond", "Fraunces", "Libre Caslon Text", "Playfair Display"];

const App = () => {
  const [route, setRoute] = useState({ page: "home", slug: null });
  const [booking, setBooking] = useState(false);
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  const go = (page, slug = null) => {
    setRoute({ page, slug });
    window.scrollTo({ top: 0, behavior: "smooth" });
  };

  // Apply accent + palette
  useEffect(() => {
    const root = document.documentElement;
    root.style.setProperty("--champagne", t.accent);
    // derive darker tone
    root.style.setProperty("--champagne-deep", shade(t.accent, -22));
    root.style.setProperty("--font-display", `"${t.fontDisplay}", "Cormorant Garamond", "Times New Roman", serif`);
    // palette theme class
    document.body.className = PALETTES[t.palette]?.theme || "";
    // language direction
    document.documentElement.dir = COPY[t.language]?.dir || "ltr";
    document.documentElement.lang = t.language;
  }, [t.accent, t.fontDisplay, t.palette, t.language]);

  const setLang = (l) => setTweak("language", l);

  const openBooking = () => setBooking(true);
  const closeBooking = () => setBooking(false);

  let pageEl = null;
  if (route.page === "home") pageEl = <HomePage go={go} openBooking={openBooking} />;
  else if (route.page === "treatments") pageEl = <TreatmentsPage go={go} />;
  else if (route.page === "pillar") pageEl = <PillarPage slug={route.slug} go={go} openBooking={openBooking} />;
  else if (route.page === "doctors") pageEl = <DoctorsPage go={go} />;
  else if (route.page === "doctor") pageEl = <DoctorProfilePage slug={route.slug} go={go} openBooking={openBooking} />;
  else if (route.page === "about") pageEl = <AboutPage go={go} />;
  else if (route.page === "location") pageEl = <LocationPage openBooking={openBooking} />;
  else if (route.page === "before-after") pageEl = <BeforeAfterPage openBooking={openBooking} />;
  else if (route.page === "contact") pageEl = <ContactPage openBooking={openBooking} />;
  else pageEl = <HomePage go={go} openBooking={openBooking} />;

  // Screen label for design comments
  const screenLabel = {
    "home": "01 Home",
    "treatments": "02 Treatments",
    "pillar": "03 Pillar — " + (route.slug || ""),
    "doctors": "04 Our Doctors",
    "doctor": "05 Doctor — " + (route.slug || ""),
    "about": "06 About",
    "location": "07 Dubai Location",
    "before-after": "08 Before & After",
    "contact": "09 Contact"
  }[route.page] || "Page";

  return (
    <div data-screen-label={screenLabel}>
      <Navbar route={route} go={go} lang={t.language} setLang={setLang} openBooking={openBooking} />
      {pageEl}
      <Footer go={go} openBooking={openBooking} />

      {/* Mobile sticky CTA */}
      <div className="mobile-cta">
        <a href={"tel:" + CONTACT.phoneClinic.replace(/\s/g, "")}><button>Call</button></a>
        <button className="primary" onClick={openBooking}>Book a Consultation</button>
      </div>

      <BookingFlow open={booking} onClose={closeBooking} />

      <TweaksPanel title="Tweaks">
        <TweakSection title="Palette">
          <TweakRadio
            label="Atmosphere"
            value={t.palette}
            onChange={(v) => setTweak("palette", v)}
            options={[
              { value: "porcelain", label: "Porcelain" },
              { value: "rose", label: "Pâle rosée" },
              { value: "noir", label: "Nuit Lutétia" }
            ]}
          />
          <TweakColor
            label="Accent"
            value={t.accent}
            onChange={(v) => setTweak("accent", v)}
            options={["#B8995A", "#C9A24B", "#8E7138", "#A88560", "#5B6D7C"]}
          />
        </TweakSection>

        <TweakSection title="Typography">
          <TweakSelect
            label="Display font"
            value={t.fontDisplay}
            onChange={(v) => setTweak("fontDisplay", v)}
            options={FONT_OPTIONS.map(f => ({ value: f, label: f }))}
          />
        </TweakSection>

        <TweakSection title="Language">
          <TweakRadio
            label="Locale"
            value={t.language}
            onChange={(v) => setTweak("language", v)}
            options={[
              { value: "en", label: "EN" },
              { value: "fr", label: "FR" },
              { value: "ar", label: "AR" }
            ]}
          />
          <div style={{ fontSize: 11, color: "var(--ink-soft)", marginTop: 8, lineHeight: 1.5 }}>
            AR previews the RTL direction. Full string translation is a separate phase — copy here remains illustrative.
          </div>
        </TweakSection>

        <TweakSection title="Compliance">
          <div style={{ fontSize: 11, color: "var(--ink-soft)", lineHeight: 1.55 }}>
            All copy in this mockup avoids guaranteed-results and superlative claims, omits prices, and gates before/after content. DHA licence numbers shown are placeholders pending client verification.
          </div>
        </TweakSection>
      </TweaksPanel>
    </div>
  );
};

// utility: shade a hex color by percent (-100 to 100)
function shade(hex, p) {
  const c = hex.replace("#", "");
  const num = parseInt(c, 16);
  let r = (num >> 16) & 0xff, g = (num >> 8) & 0xff, b = num & 0xff;
  const t = p < 0 ? 0 : 255;
  const f = Math.abs(p) / 100;
  r = Math.round((t - r) * f) + r;
  g = Math.round((t - g) * f) + g;
  b = Math.round((t - b) * f) + b;
  return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
}

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