/* global React, ReactDOM, HomePage, ServicesPage, ProcessPage, LookbookPage, AtelierPage, AppointmentsPage, ContactPage, Navbar, Footer */
const { useState, useEffect, useCallback, useMemo } = React;

const ROUTES = ["home", "services", "process", "lookbook", "atelier", "appointments", "contact"];

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "locale": "en",
  "callConfirmed": false,
  "waConfirmed": false,
  "palette": "sand-sage-brass",
  "showFlags": true,
  "displayFont": "Cormorant Garamond"
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = window.useTweaks ? window.useTweaks(TWEAK_DEFAULTS) : [TWEAK_DEFAULTS, () => {}];

  const [route, setRoute] = useState(() => {
    const h = (window.location.hash || "").replace(/^#\/?/, "");
    return ROUTES.includes(h) ? h : "home";
  });
  const [toastMsg, setToastMsg] = useState(null);

  // hash routing
  useEffect(() => {
    const onHash = () => {
      const h = (window.location.hash || "").replace(/^#\/?/, "");
      setRoute(ROUTES.includes(h) ? h : "home");
      window.scrollTo({ top: 0, behavior: "instant" });
    };
    window.addEventListener("hashchange", onHash);
    return () => window.removeEventListener("hashchange", onHash);
  }, []);

  const nav = useCallback((to) => {
    window.location.hash = "#/" + to;
    setRoute(to);
    window.scrollTo({ top: 0, behavior: "smooth" });
  }, []);

  const toast = useCallback((m) => {
    setToastMsg(m);
    setTimeout(() => setToastMsg(null), 3600);
  }, []);

  // locale + direction
  const locale = t.locale || "en";
  useEffect(() => {
    document.documentElement.lang = locale;
    document.body.dir = locale === "ar" ? "rtl" : "ltr";
  }, [locale]);

  // Hide flags toggle
  useEffect(() => {
    document.body.classList.toggle("hide-flags", !t.showFlags);
  }, [t.showFlags]);

  // Display font tweak
  useEffect(() => {
    document.documentElement.style.setProperty("--font-display",
      `'${t.displayFont || "Cormorant Garamond"}', Georgia, serif`);
  }, [t.displayFont]);

  // Palette tweak
  useEffect(() => {
    const root = document.documentElement.style;
    if (t.palette === "ink-ivory") {
      root.setProperty("--bg", "#F5F2EC");
      root.setProperty("--surface", "#FFFDF8");
      root.setProperty("--text", "#1A1916");
      root.setProperty("--primary", "#7A8A82");
      root.setProperty("--secondary", "#8E6F3A");
      root.setProperty("--border", "#E6DFCE");
    } else if (t.palette === "midnight-sage") {
      root.setProperty("--bg", "#1B1F1C");
      root.setProperty("--surface", "#252A26");
      root.setProperty("--surface-2", "#1F2521");
      root.setProperty("--text", "#EFEAE0");
      root.setProperty("--muted", "#9B9486");
      root.setProperty("--primary", "#A8BCB1");
      root.setProperty("--secondary", "#C9A465");
      root.setProperty("--border", "#33392F");
      root.setProperty("--border-strong", "#454B40");
      root.setProperty("--ink", "#EFEAE0");
    } else {
      // sand-sage-brass (default)
      root.setProperty("--bg", "#F4EFE7");
      root.setProperty("--surface", "#FBF8F2");
      root.setProperty("--surface-2", "#EFE8DA");
      root.setProperty("--text", "#26241F");
      root.setProperty("--muted", "#6E665A");
      root.setProperty("--primary", "#8FA398");
      root.setProperty("--secondary", "#A8884E");
      root.setProperty("--border", "#E4DCCD");
      root.setProperty("--border-strong", "#C9BFAA");
      root.setProperty("--ink", "#1A1916");
    }
  }, [t.palette]);

  const PageComponent = useMemo(() => ({
    home: HomePage,
    services: ServicesPage,
    process: ProcessPage,
    lookbook: LookbookPage,
    atelier: AtelierPage,
    appointments: AppointmentsPage,
    contact: ContactPage,
  })[route] || HomePage, [route]);

  const pageProps = {
    onNav: nav,
    locale,
    callConfirmed: !!t.callConfirmed,
    waConfirmed: !!t.waConfirmed,
    toast,
  };

  return (
    <React.Fragment>
      <Navbar route={route} onNav={nav} locale={locale} onLocale={(l) => setTweak("locale", l)} />
      <PageComponent key={route} {...pageProps} />
      <Footer onNav={nav} locale={locale} callConfirmed={!!t.callConfirmed} />

      {toastMsg && (
        <div className="toast" role="status">
          <span className="ok">●</span>
          <span>{toastMsg}</span>
        </div>
      )}

      {window.TweaksPanel && (
        <window.TweaksPanel title="Tweaks">
          <window.TweakSection title="Brand">
            <window.TweakRadio
              label="Palette"
              value={t.palette}
              options={[
                { value: "sand-sage-brass", label: "Sand" },
                { value: "ink-ivory", label: "Ivory" },
                { value: "midnight-sage", label: "Night" },
              ]}
              onChange={(v) => setTweak("palette", v)}
            />
            <window.TweakSelect
              label="Display font"
              value={t.displayFont}
              options={[
                "Cormorant Garamond",
                "Fraunces",
                "Playfair Display",
                "Libre Caslon Text",
                "Tenor Sans",
              ]}
              onChange={(v) => setTweak("displayFont", v)}
            />
          </window.TweakSection>

          <window.TweakSection title="Locale">
            <window.TweakRadio
              label="Language"
              value={t.locale}
              options={[
                { value: "en", label: "EN" },
                { value: "ar", label: "AR (RTL)" },
              ]}
              onChange={(v) => setTweak("locale", v)}
            />
          </window.TweakSection>

          <window.TweakSection title="Live data flags">
            <window.TweakToggle
              label="Call line confirmed"
              value={t.callConfirmed}
              onChange={(v) => setTweak("callConfirmed", v)}
            />
            <window.TweakToggle
              label="WhatsApp confirmed"
              value={t.waConfirmed}
              onChange={(v) => setTweak("waConfirmed", v)}
            />
            <window.TweakToggle
              label="Show CLIENT-FILL flags"
              value={t.showFlags}
              onChange={(v) => setTweak("showFlags", v)}
            />
          </window.TweakSection>

          <window.TweakSection title="Jump to page">
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 6 }}>
              {ROUTES.map(r => (
                <button key={r}
                  onClick={() => nav(r)}
                  style={{
                    padding: "8px 10px",
                    fontSize: 11,
                    letterSpacing: "0.08em",
                    textTransform: "uppercase",
                    background: route === r ? "#1A1916" : "transparent",
                    color: route === r ? "#FBF8F2" : "#26241F",
                    border: "1px solid rgba(38,36,31,0.2)",
                    borderRadius: 2,
                    cursor: "pointer",
                  }}>
                  {r}
                </button>
              ))}
            </div>
          </window.TweakSection>
        </window.TweaksPanel>
      )}
    </React.Fragment>
  );
}

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