/* global React, ReactDOM */

// ============================================================
// Tweaks
// ============================================================
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette":   "warm",
  "heroStyle": "soft",
  "showAnnouncement": true
}/*EDITMODE-END*/;

const PALETTES = {
  warm: {
    "--ivory":       "#F8F4EC",
    "--ivory-deep":  "#F1EBDD",
    "--cream-card":  "#FCFAF4",
    "--gold":        "#C9A24B",
    "--gold-deep":   "#A8853A",
    "--gold-soft":   "#E4CE9A",
    "--espresso":    "#3B2C24",
    "--espresso-soft":"#5A463A",
    "--charcoal":    "#211C19",
    "--blush":       "#E7C9C2",
  },
  cool: {
    "--ivory":       "#F4F6F1",
    "--ivory-deep":  "#E8ECE4",
    "--cream-card":  "#FAFBF7",
    "--gold":        "#B79B5C",
    "--gold-deep":   "#8E7434",
    "--gold-soft":   "#D7C28B",
    "--espresso":    "#2D3530",
    "--espresso-soft":"#4E5651",
    "--charcoal":    "#1A1F1C",
    "--blush":       "#C7D2C1",
  },
  midnight: {
    "--ivory":       "#0F0E10",
    "--ivory-deep":  "#1A171A",
    "--cream-card":  "#1A171A",
    "--gold":        "#D4A85A",
    "--gold-deep":   "#E4C684",
    "--gold-soft":   "#A8853A",
    "--espresso":    "#F4EDDF",
    "--espresso-soft":"rgba(244,237,223,0.65)",
    "--charcoal":    "#F8F4EC",
    "--blush":       "#C99A8E",
    "--line":        "rgba(244,237,223,0.10)",
    "--line-strong": "rgba(244,237,223,0.22)",
    "--white":       "#1A171A",
  },
  blush: {
    "--ivory":       "#FBF4F2",
    "--ivory-deep":  "#F4E6E2",
    "--cream-card":  "#FEF8F6",
    "--gold":        "#C9A24B",
    "--gold-deep":   "#A8853A",
    "--gold-soft":   "#E4CE9A",
    "--espresso":    "#4A2F2A",
    "--espresso-soft":"#6D4A43",
    "--charcoal":    "#2A1A17",
    "--blush":       "#E7C9C2",
  },
};

const PALETTE_LIST = [
  { name: "warm",     label: "Warm ivory",  swatches: ["#F8F4EC", "#C9A24B", "#3B2C24"] },
  { name: "cool",     label: "Cool sage",   swatches: ["#F4F6F1", "#B79B5C", "#2D3530"] },
  { name: "midnight", label: "Midnight",    swatches: ["#0F0E10", "#D4A85A", "#F4EDDF"] },
  { name: "blush",    label: "Blush rose",  swatches: ["#FBF4F2", "#C9A24B", "#4A2F2A"] },
];

const TweaksUI = () => {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  // Apply palette to :root
  React.useEffect(() => {
    const root = document.documentElement;
    const palette = PALETTES[t.palette] || PALETTES.warm;
    ["--line", "--line-strong", "--white"].forEach(k => root.style.removeProperty(k));
    Object.entries(palette).forEach(([k, v]) => root.style.setProperty(k, v));
  }, [t.palette]);

  React.useEffect(() => {
    document.documentElement.dataset.heroStyle = t.heroStyle;
    document.documentElement.dataset.announcement = t.showAnnouncement ? "on" : "off";
  }, [t.heroStyle, t.showAnnouncement]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Palette">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8 }}>
          {PALETTE_LIST.map(p => {
            const on = t.palette === p.name;
            return (
              <button key={p.name} type="button" onClick={() => setTweak("palette", p.name)}
                style={{
                  display: "flex",
                  flexDirection: "column",
                  gap: 8,
                  padding: 10,
                  borderRadius: 10,
                  background: on ? "rgba(201,162,75,0.18)" : "var(--cream-card, #fff)",
                  border: on ? "1.5px solid var(--gold, #C9A24B)" : "1px solid var(--line, rgba(0,0,0,0.1))",
                  cursor: "pointer",
                  textAlign: "left",
                  alignItems: "stretch",
                }}>
                <div style={{ display: "flex", height: 22, borderRadius: 4, overflow: "hidden" }}>
                  {p.swatches.map((c, i) => (
                    <span key={i} style={{ flex: 1, background: c }}/>
                  ))}
                </div>
                <span style={{ fontSize: 11, color: "var(--espresso, #3B2C24)", letterSpacing: "0.04em" }}>{p.label}</span>
              </button>
            );
          })}
        </div>
      </TweakSection>

      <TweakSection label="Hero shape">
        <TweakRadio
          label="Frame"
          value={t.heroStyle}
          options={["soft", "arch", "split"]}
          onChange={v => setTweak("heroStyle", v)}
        />
      </TweakSection>

      <TweakSection label="Chrome">
        <TweakToggle
          label="Announcement bar"
          value={t.showAnnouncement}
          onChange={v => setTweak("showAnnouncement", v)}
        />
      </TweakSection>

      <div style={{ marginTop: 12, padding: 12, background: "rgba(201,162,75,0.10)", borderRadius: 8, fontSize: 11, color: "var(--espresso-soft, #5A463A)", lineHeight: 1.5 }}>
        Try the 4-step booking flow at <strong>#/book</strong> — real form with validation and confetti on submit.
      </div>
    </TweaksPanel>
  );
};

// ============================================================
// Router root
// ============================================================
const App = () => {
  const route = useHashRoute();
  const path = route.path;
  const sub = route.sub;

  let page;
  if (path === "home" || path === "")              page = <HomePage/>;
  else if (path === "treatments" && !sub)          page = <TreatmentsPage/>;
  else if (path === "treatments" && sub)           page = <TreatmentDetailPage slug={sub}/>;
  else if (path === "about")                       page = <AboutPage/>;
  else if (path === "reviews")                     page = <ReviewsPage/>;
  else if (path === "pricing")                     page = <PricingPage/>;
  else if (path === "contact")                     page = <ContactPage/>;
  else if (path === "book") {
    // ?treatment=slug
    const search = window.location.hash.split("?")[1] || "";
    const params = new URLSearchParams(search);
    page = <BookPage initialTreatment={params.get("treatment") || ""}/>;
  }
  else page = <NotFound/>;

  return (
    <>
      <TopNav currentPath={path}/>
      <main>{page}</main>
      <Footer/>
      <WhatsAppFAB/>
      <TweaksUI/>
    </>
  );
};

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