// Top navigation — transparent bar over hero (fixed), transitions to solid on scroll.

const Nav = ({ activePage = "home", navSolid = false, lang, setLang, density, setDensity, theme, setTheme, accent, setAccent, tweaksOpen, setTweaksOpen, loggedIn = true, searchState, setSearchState, onSearch }) => {
  const [menuOpen, setMenuOpen] = React.useState(false);
  const isHome = activePage === "home";
  const variantClass = isHome
    ? ("nav--over-hero" + (navSolid ? " nav--scrolled" : ""))
    : "nav--solid";

  React.useEffect(() => {
    if (!menuOpen) return;
    const onKey = (e) => { if (e.key === "Escape") setMenuOpen(false); };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [menuOpen]);

  // Prevent body scroll when menu open
  React.useEffect(() => {
    document.body.style.overflow = menuOpen ? "hidden" : "";
    return () => { document.body.style.overflow = ""; };
  }, [menuOpen]);

  return (
    <>
      <header className={"nav " + variantClass}>
        <div className="container nav-inner">
          <a href="index.html" className="logo" aria-label="Sweden Longstay">
            <img
              src={isHome && !navSolid ? "sketch/assets/logo.svg" : "sketch/assets/logo-dark.svg"}
              alt="Sweden Longstay"
              height="53"
            />
          </a>
          {navSolid && searchState && (
            <SearchBarSticky embedded state={searchState} setState={setSearchState} onSearch={onSearch} lang={lang} visible />
          )}
          <div className="nav-right">
            <a href="login.html" className="nav-login-btn">Logga in</a>
            <button
              className={"hamburger " + (menuOpen ? "is-open" : "")}
              aria-label="Öppna meny"
              aria-expanded={menuOpen}
              onClick={() => setMenuOpen(v => !v)}
            >
              <span></span><span></span><span></span>
            </button>
          </div>
        </div>
      </header>

      <div className={"nav-menu-scrim " + (menuOpen ? "open" : "")} onClick={() => setMenuOpen(false)} />
      <aside className={"nav-menu " + (menuOpen ? "open" : "")} aria-hidden={!menuOpen}>
        <div className="nav-menu-head">
          <a href="index.html" className="logo" onClick={() => setMenuOpen(false)}>
            <img src="sketch/assets/logo.svg" alt="Sweden Longstay" height="40"
              style={{ filter: "brightness(0)" }} />
          </a>
          <button className="nav-menu-close" onClick={() => setMenuOpen(false)} aria-label="Stäng meny">
            <Icon name="close" size={18} />
          </button>
        </div>

        <div className="nav-menu-body">
          <nav className="nav-menu-links">
            <a href="destinationer.html">Destinationer <Icon name="chev-right" size={16}/></a>
            <a href="erbjudanden.html">Erbjudanden <Icon name="chev-right" size={16}/></a>
            <a href="foretag.html">Företag <Icon name="chev-right" size={16}/></a>
            <a href="fastighetsagare.html">Fastighetsägare <Icon name="chev-right" size={16}/></a>
            <a href="om-oss.html">Om oss <Icon name="chev-right" size={16}/></a>
            <a href="blogg.html">Blogg <Icon name="chev-right" size={16}/></a>
            <a href="hjalp.html">Hjälp <Icon name="chev-right" size={16}/></a>
            <a href="kontakt.html">Kontakt <Icon name="chev-right" size={16}/></a>
          </nav>
          <a href="boka.html" className="nav-menu-cta">Boka boende</a>
        </div>

        <div className="nav-menu-foot">
          <div className="nav-menu-contact">
            <a href="tel:+46103303044">+46 (0)10 330 30 44</a>
            <a href="mailto:info@swedenlongstay.se">info@swedenlongstay.se</a>
          </div>
          <div className="lang-toggle" title="Language">
            <button className={lang === "sv" ? "on" : ""} onClick={() => setLang("sv")}>SV</button>
            <button className={lang === "en" ? "on" : ""} onClick={() => setLang("en")}>EN</button>
          </div>
        </div>
      </aside>
    </>
  );
};

const TweaksPanel = ({ open, density, setDensity, theme, setTheme, accent, setAccent }) => {
  return (
    <aside className={"tweaks " + (open ? "open" : "")} role="dialog" aria-label="Tweaks">
      <h5>Tweaks</h5>
      <div className="row">
        <label>Density</label>
        <div className="seg">
          <button className={density === "comfy" ? "on" : ""} onClick={() => setDensity("comfy")}>Comfy</button>
          <button className={density === "compact" ? "on" : ""} onClick={() => setDensity("compact")}>Compact</button>
        </div>
      </div>
      <div className="row">
        <label>Theme</label>
        <div className="seg">
          <button className={theme === "light" ? "on" : ""} onClick={() => setTheme("light")}>Light</button>
          <button className={theme === "dark" ? "on" : ""} onClick={() => setTheme("dark")}>Dark</button>
        </div>
      </div>
      <div className="row">
        <label>Accent</label>
        <div className="swatches">
          <button className={"sw " + (accent === "dark" ? "on" : "")} style={{ background: "#090900" }} onClick={() => setAccent("dark")} aria-label="Dark"></button>
          <button className={"sw " + (accent === "blue" ? "on" : "")} style={{ background: "#4C66A0" }} onClick={() => setAccent("blue")} aria-label="Blue"></button>
          <button className={"sw " + (accent === "blue-light" ? "on" : "")} style={{ background: "#7288BD" }} onClick={() => setAccent("blue-light")} aria-label="Light blue"></button>
        </div>
      </div>
    </aside>
  );
};

// Hook — reads/writes tweaks, handles host postMessage protocol.
const useTweaks = () => {
  const defaults = window.__TWEAK_DEFAULTS || { density: "comfy", theme: "light", accent: "blue", lang: "en" };
  const [density, _setDensity] = React.useState(defaults.density);
  const [theme, _setTheme] = React.useState(defaults.theme);
  const [accent, _setAccent] = React.useState(defaults.accent);
  const [lang, _setLang] = React.useState(defaults.lang);
  const [open, setOpen] = React.useState(false);

  React.useEffect(() => {
    document.documentElement.setAttribute("data-density", density);
    document.documentElement.setAttribute("data-theme", theme);
    document.documentElement.setAttribute("data-accent", accent);
    const map = { dark: "#090900", blue: "#4C66A0", "blue-light": "#7288BD" };
    document.documentElement.style.setProperty("--accent", map[accent]);
  }, [density, theme, accent]);

  const post = (edits) => {
    try { window.parent.postMessage({ type: "__edit_mode_set_keys", edits }, "*"); } catch (e) {}
  };
  const setDensity = (v) => { _setDensity(v); post({ density: v }); };
  const setTheme = (v) => { _setTheme(v); post({ theme: v }); };
  const setAccent = (v) => { _setAccent(v); post({ accent: v }); };
  const setLang = (v) => { _setLang(v); post({ lang: v }); };

  React.useEffect(() => {
    const onMsg = (e) => {
      if (!e.data) return;
      if (e.data.type === "__activate_edit_mode") setOpen(true);
      if (e.data.type === "__deactivate_edit_mode") setOpen(false);
    };
    window.addEventListener("message", onMsg);
    try { window.parent.postMessage({ type: "__edit_mode_available" }, "*"); } catch (e) {}
    return () => window.removeEventListener("message", onMsg);
  }, []);

  return { density, setDensity, theme, setTheme, accent, setAccent, lang, setLang, open, setOpen };
};

Object.assign(window, { Nav, TweaksPanel, useTweaks });