// Root app — routing, theme, tweaks, cart

const { useState, useEffect, useCallback } = React;

function App() {
  const initialTweaks = window.__TWEAKS || { theme: "dark", hero_variant: 1, hero_heading: "Havet, rett hjem." };
  const [tweaks, setTweaksState] = useState(initialTweaks);
  const [tweaksVisible, setTweaksVisible] = useState(false);
  const [route, setRoute] = useState(() => {
    // Sjekk URL først: /abonnement → start på abonnement-siden
    try {
      const path = (typeof location !== "undefined" ? location.pathname : "") || "";
      if (/^\/?abonnement\/?$/i.test(path)) return "abonnement";
    } catch (e) {}
    return localStorage.getItem("nw_route") || "home";
  });
  const [pdpSlug, setPdpSlug] = useState(() => localStorage.getItem("nw_pdp_slug") || "laks-filet");
  // Track om dette er første render — da skal vi ikke scrolle til topp (beholder posisjon ved refresh)
  const isFirstRender = React.useRef(true);
  // Skipper pushState når route-endringen kom fra browser back/forward (popstate)
  const isFromPop = React.useRef(false);
  // Bumpes når produkt-overrides synkes fra admin, så sider re-rendrer med nye verdier
  const [productsVersion, setProductsVersion] = useState(0);

  // Browser back/forward support
  useEffect(() => {
    const onPop = () => {
      const state = history.state;
      if (state?.route) {
        isFromPop.current = true;
        setRoute(state.route);
        if (state.slug) setPdpSlug(state.slug);
      }
    };
    window.addEventListener("popstate", onPop);
    return () => window.removeEventListener("popstate", onPop);
  }, []);

  // Re-render når produkt-overrides oppdateres fra admin (cross-device sync)
  useEffect(() => {
    const onSync = () => setProductsVersion(v => v + 1);
    window.addEventListener("hv:products-synced", onSync);
    return () => window.removeEventListener("hv:products-synced", onSync);
  }, []);

  // Gjenopprett scroll-posisjon ved refresh (hvis brukeren refresherte samme rute)
  useEffect(() => {
    try {
      const saved = sessionStorage.getItem("nw_scroll");
      if (saved) {
        const { route: sr, slug: sslug, y } = JSON.parse(saved);
        if (sr === route && sslug === pdpSlug) {
          // Vent til siden har rendret sitt innhold, så scroll
          requestAnimationFrame(() => {
            requestAnimationFrame(() => window.scrollTo({ top: y, behavior: "instant" }));
          });
        }
      }
    } catch (e) {}
    // Lagre scroll-posisjon før siden låses/refreshes
    const saveScroll = () => {
      try { sessionStorage.setItem("nw_scroll", JSON.stringify({ route, slug: pdpSlug, y: window.scrollY })); } catch (e) {}
    };
    window.addEventListener("beforeunload", saveScroll);
    window.addEventListener("pagehide", saveScroll);
    return () => {
      window.removeEventListener("beforeunload", saveScroll);
      window.removeEventListener("pagehide", saveScroll);
    };
  }, [route, pdpSlug]);
  // Handlekurv lastes fra localStorage så den overlever refresh
  const [cart, setCart] = useState(() => {
    try {
      const raw = localStorage.getItem("nw_cart");
      const parsed = raw ? JSON.parse(raw) : [];
      return Array.isArray(parsed) ? parsed : [];
    } catch (e) { return []; }
  });
  const [cartOpen, setCartOpen] = useState(false);
  const [searchOpen, setSearchOpen] = useState(false);

  // Lagre handlekurv ved hver endring
  useEffect(() => {
    try { localStorage.setItem("nw_cart", JSON.stringify(cart)); } catch (e) {}
  }, [cart]);

  // Persist route + pdpSlug + push history entry
  useEffect(() => {
    localStorage.setItem("nw_route", route);
    localStorage.setItem("nw_pdp_slug", pdpSlug);
    if (isFromPop.current) {
      // Endring kom fra browser back/forward — IKKE push (ville duplisert entry og brutt forward)
      isFromPop.current = false;
    } else if (isFirstRender.current) {
      // Første render: erstatt nåværende history-entry så refresh-then-back ikke skyver brukeren ut
      history.replaceState({ route, slug: pdpSlug }, "", "");
    } else {
      history.pushState({ route, slug: pdpSlug }, "", "");
    }
    // Ved første render (refresh) → behold scroll-posisjon.
    // Ellers (bruker klikker til ny side) → scroll til topp.
    if (isFirstRender.current) {
      isFirstRender.current = false;
    } else {
      window.scrollTo({ top: 0 });
    }
  }, [route, pdpSlug]);

  // Apply theme to body
  useEffect(() => {
    document.body.classList.remove("theme-dark", "theme-light");
    document.body.classList.add("theme-" + tweaks.theme);
  }, [tweaks.theme]);

  const setTweaks = useCallback((edits) => {
    setTweaksState(prev => {
      const next = { ...prev, ...edits };
      try { window.parent.postMessage({ type: "__edit_mode_set_keys", edits }, "*"); } catch (e) {}
      return next;
    });
  }, []);

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

  const addToCart = (p, qty = 1) => {
    setCart(prev => {
      const existing = prev.find(x => x.slug === p.slug);
      if (existing) return prev.map(x => x.slug === p.slug ? { ...x, qty: x.qty + qty } : x);
      return [...prev, { slug: p.slug, name: p.name, cat: p.cat, price: p.price, unit: p.unit, img: p.img, qty }];
    });
    setCartOpen(true);
  };

  const goPDP = (slug) => { setPdpSlug(slug); setRoute("pdp"); };
  const go = (r) => () => setRoute(r);

  const [shopCat, setShopCat] = useState(null);
  const goShopCat = useCallback((cat) => {
    setShopCat(cat);
    setRoute("butikk");
  }, []);
  const clearShopCat = useCallback(() => setShopCat(null), []);

  const renderPage = () => {
    switch (route) {
      case "home":        return <Home tweaks={tweaks} goShop={go("butikk")} goShopCat={goShopCat} goPDP={goPDP} goAbout={go("om")} goSjømatkasse={go("sjømatkasse")} addToCart={addToCart}/>;
      case "butikk":      return <Shop goPDP={goPDP} addToCart={addToCart} initCat={shopCat} clearInitCat={clearShopCat}/>;
      case "pdp":         return <PDP slug={pdpSlug} goShop={go("butikk")} goPDP={goPDP} addToCart={addToCart}/>;
      case "sjømatkasse":  return <Sjømatkasse addToCart={addToCart}/>;
      case "om":          return <Om goShop={go("butikk")}/>;
      case "catering":    return <Catering/>;
      case "levering":    return <Levering/>;
      case "kontakt":     return <Kontakt/>;
      case "personvern":  return <Personvern/>;
      case "vilkår":      return <Vilkår/>;
      case "kasse":       return <Checkout cart={cart} setCart={setCart} goShop={go("butikk")} goHome={go("home")}/>;
      case "abonnement":  return <Abonnement goHome={go("home")} goShop={go("butikk")}/>;
      case "konto":       return <MinKonto goShop={go("butikk")} goHome={go("home")} goPDP={goPDP} addToCart={addToCart}/>;
      default:            return <Home tweaks={tweaks} goShop={go("butikk")} goShopCat={goShopCat} goPDP={goPDP} goAbout={go("om")} goSjømatkasse={go("sjømatkasse")} addToCart={addToCart}/>;
    }
  };

  const navRoute = route === "pdp" ? "butikk" : route;

  return (
    <>
      <Nav route={navRoute} setRoute={setRoute} cart={cart} setCartOpen={setCartOpen} theme={tweaks.theme} setSearchOpen={setSearchOpen}/>
      <main>{renderPage()}</main>
      <Footer setRoute={setRoute} goShopCat={goShopCat}/>
      <CartDrawer open={cartOpen} onClose={() => setCartOpen(false)} cart={cart} setCart={setCart} goCheckout={() => { setCartOpen(false); setRoute("kasse"); }}/>
      <SearchOverlay open={searchOpen} onClose={() => setSearchOpen(false)} goPDP={goPDP} setRoute={setRoute}/>
      <TweaksPanel visible={tweaksVisible} tweaks={tweaks} setTweaks={setTweaks}/>
    </>
  );
}

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