// Main app — routing, state, Tweaks
// (useState/useEffect pulled from React directly — shared across all babel files)

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "blue",
  "heroVariant": "cinema",
  "cardStyle": "magazine",
  "density": "comfortable"
}/*EDITMODE-END*/;

function App() {
  const router = window.__bbRouter;

  // Single source of truth: URL path → { route, currentExp, currentPost }
  const [routeState, setRouteState] = React.useState(() => router.parseRoute(window.location.pathname));
  const { route, currentExp = null, currentPost = null } = routeState;

  const [lang, setLang] = React.useState(() => localStorage.getItem("bb-lang") || "en");
  const [tweaks, setTweaks] = React.useState(() => {
    try {
      const saved = localStorage.getItem("bb-tweaks");
      return saved ? { ...TWEAK_DEFAULTS, ...JSON.parse(saved) } : TWEAK_DEFAULTS;
    } catch { return TWEAK_DEFAULTS; }
  });
  const [tweaksOpen, setTweaksOpen] = React.useState(false);
  const [editMode, setEditMode] = React.useState(false);

  // Listen for browser back/forward
  React.useEffect(() => {
    const onPop = () => setRouteState(router.parseRoute(window.location.pathname));
    window.addEventListener("popstate", onPop);
    return () => window.removeEventListener("popstate", onPop);
  }, []);

  // Core navigate — writes URL + state atomically. Exposed globally so Link can use it.
  const navigate = React.useCallback((r, entity) => {
    const next = { route: r };
    if (r === "detail" || r === "booking") next.currentExp = entity || currentExp;
    else if (r === "journal-post") next.currentPost = entity || currentPost;

    const path = router.buildPath(r, r === "journal-post" ? next.currentPost : next.currentExp);
    if (window.location.pathname !== path) {
      window.history.pushState({}, "", path);
    }
    setRouteState(next);
    window.scrollTo(0, 0);
  }, [currentExp, currentPost]);

  React.useEffect(() => { window.__bbNavigate = navigate; }, [navigate]);

  // Language + tweaks persist. Route does NOT — URL is the source of truth.
  React.useEffect(() => { localStorage.setItem("bb-lang", lang); }, [lang]);
  React.useEffect(() => {
    localStorage.setItem("bb-tweaks", JSON.stringify(tweaks));
    document.body.dataset.palette = tweaks.palette;
    document.body.dataset.density = tweaks.density;
  }, [tweaks]);

  // Update <title> and <meta name="description"> on every route/lang change.
  React.useEffect(() => {
    document.title = router.titleFor(route, currentExp, currentPost, lang);
    document.documentElement.lang = lang;
    const desc = router.descFor(route, currentExp, currentPost, lang);
    let tag = document.querySelector('meta[name="description"]');
    if (!tag) {
      tag = document.createElement("meta");
      tag.setAttribute("name", "description");
      document.head.appendChild(tag);
    }
    tag.setAttribute("content", desc);
    // OG title + description for social previews
    const setOG = (prop, content) => {
      let el = document.querySelector(`meta[property="${prop}"]`);
      if (!el) { el = document.createElement("meta"); el.setAttribute("property", prop); document.head.appendChild(el); }
      el.setAttribute("content", content);
    };
    setOG("og:title", document.title);
    setOG("og:description", desc);
    if (route === "detail" && currentExp) setOG("og:image", window.location.origin + "/" + currentExp.heroImg);
    else if (route === "journal-post" && currentPost) setOG("og:image", window.location.origin + "/" + currentPost.img);
    // Canonical link
    let canonical = document.querySelector('link[rel="canonical"]');
    if (!canonical) { canonical = document.createElement("link"); canonical.setAttribute("rel", "canonical"); document.head.appendChild(canonical); }
    canonical.setAttribute("href", window.location.origin + window.location.pathname);
  }, [route, currentExp, currentPost, lang]);

  // Tweaks host protocol
  React.useEffect(() => {
    const onMsg = (e) => {
      if (!e.data || typeof e.data !== "object") return;
      if (e.data.type === "__activate_edit_mode") { setEditMode(true); setTweaksOpen(true); }
      if (e.data.type === "__deactivate_edit_mode") { setEditMode(false); setTweaksOpen(false); }
    };
    window.addEventListener("message", onMsg);
    window.parent.postMessage({ type: "__edit_mode_available" }, "*");
    return () => window.removeEventListener("message", onMsg);
  }, []);

  const setTweak = (key, value) => {
    const next = { ...tweaks, [key]: value };
    setTweaks(next);
    window.parent.postMessage({ type: "__edit_mode_set_keys", edits: next }, "*");
  };

  const t = window.COPY[lang];

  // Backward-compatible handlers used by existing children — all route through navigate()
  const setRoute = (r, target) => navigate(r, target);
  const openExperience = (exp) => navigate("detail", exp);
  const openPost = (post) => navigate("journal-post", post);
  const smartSetRoute = setRoute;

  let page;
  switch (route) {
    case "catalog": page = <CatalogPage lang={lang} t={t} openExperience={openExperience} cardStyle={tweaks.cardStyle} />; break;
    case "detail": page = <ExperienceDetail exp={currentExp} lang={lang} t={t} setRoute={smartSetRoute} />; break;
    case "checkout": page = <CheckoutPage lang={lang} setRoute={smartSetRoute} />; break;
    case "checkout-success": page = <CheckoutSuccessPage lang={lang} setRoute={smartSetRoute} />; break;
    case "about": page = <AboutPage lang={lang} />; break;
    case "contact": page = <ContactPage lang={lang} />; break;
    case "journal": page = <JournalPage lang={lang} openPost={openPost} />; break;
    case "journal-post": page = <JournalPost post={currentPost} lang={lang} setRoute={setRoute} openPost={openPost} />; break;
    default: page = <HomePage lang={lang} t={t} setRoute={smartSetRoute} openExperience={openExperience} heroVariant={tweaks.heroVariant} cardStyle={tweaks.cardStyle} />;
  }

  const CartDrawer = window.__bbCart?.Drawer;

  return (
    <div className="app" data-screen-label={`01 ${route}`}>
      <TopNav route={route} setRoute={setRoute} lang={lang} setLang={setLang} t={t} />
      {page}
      <Footer lang={lang} t={t} setRoute={setRoute} />

      {CartDrawer && <CartDrawer lang={lang} />}

      {editMode && (
        <TweaksPanel tweaks={tweaks} setTweak={setTweak} open={tweaksOpen} setOpen={setTweaksOpen} />
      )}
    </div>
  );
}

// ────────────────────────────────────────────
// Catalog page — full catalog, reuses Atlas
// ────────────────────────────────────────────
function CatalogPage({ lang, t, openExperience, cardStyle }) {
  return (
    <div className="catalog-page">
      <Atlas lang={lang} t={t} cardStyle={cardStyle} openExperience={openExperience} showHero={true} />
    </div>
  );
}

// ────────────────────────────────────────────
// Tweaks Panel
// ────────────────────────────────────────────
function TweaksPanel({ tweaks, setTweak, open, setOpen }) {
  return (
    <>
      <button className="tweaks-fab" onClick={() => setOpen(!open)}>
        {open ? "Close" : "Tweaks"} <span>{open ? "×" : "⚙︎"}</span>
      </button>
      {open && (
        <div className="tweaks-panel">
          <h3>Tweaks</h3>

          <div className="tweak-row">
            <label>Palette</label>
            <div className="tweak-swatches">
              {[
                { id: "blue", hex: "#2a8b9c" },
                { id: "jungle", hex: "#0d6b5e" },
                { id: "stormy", hex: "#7bb8c4" },
                { id: "earth", hex: "#c2410c" },
              ].map((p) => (
                <button key={p.id} className={`tweak-swatch ${tweaks.palette === p.id ? "on" : ""}`}
                  style={{ background: p.hex }} onClick={() => setTweak("palette", p.id)} />
              ))}
            </div>
          </div>

          <div className="tweak-row">
            <label>Hero layout</label>
            <div className="tweak-options">
              {["cinema", "split", "typographic"].map((v) => (
                <button key={v} className={`tweak-opt ${tweaks.heroVariant === v ? "on" : ""}`}
                  onClick={() => setTweak("heroVariant", v)}>{v}</button>
              ))}
            </div>
          </div>

          <div className="tweak-row">
            <label>Card style</label>
            <div className="tweak-options">
              {["magazine", "minimal"].map((v) => (
                <button key={v} className={`tweak-opt ${tweaks.cardStyle === v ? "on" : ""}`}
                  onClick={() => setTweak("cardStyle", v)}>{v}</button>
              ))}
            </div>
          </div>

          <div className="tweak-row">
            <label>Density</label>
            <div className="tweak-options">
              {["comfortable", "compact"].map((v) => (
                <button key={v} className={`tweak-opt ${tweaks.density === v ? "on" : ""}`}
                  onClick={() => setTweak("density", v)}>{v}</button>
              ))}
            </div>
          </div>
        </div>
      )}
    </>
  );
}

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