// Main App: routing, cart state
// All page components are exported on window from views-shop.jsx and views-info.jsx

const { useState: useStateA, useEffect: useEffectA, useCallback: useCallbackA, useRef: useRefA, useMemo: useMemoA } = React;

function App() {
  // Routing state
  const [route, setRoute] = useStateA({ page: "home" });
  const routeHistoryRef = useRefA([]);

  const navigate = useCallbackA((r) => {
    routeHistoryRef.current.push(route);
    setRoute(r);
    window.scrollTo({ top: 0, behavior: "smooth" });
  }, [route]);

  // Products — loaded from the API (Supabase-backed)
  const [products, setProducts] = useStateA([]);
  const [productsLoaded, setProductsLoaded] = useStateA(false);
  const loadProducts = useCallbackA(() => {
    fetch("/api/products")
      .then((r) => (r.ok ? r.json() : []))
      .then((data) => setProducts(Array.isArray(data) ? data : []))
      .catch(() => {})
      .finally(() => setProductsLoaded(true));
  }, []);
  useEffectA(() => { loadProducts(); }, [loadProducts]);

  // Cart state — full items persisted to localStorage
  const [cart, setCart] = useStateA(() => {
    try {
      const saved = localStorage.getItem("dom-cart");
      if (saved) {
        const arr = JSON.parse(saved);
        if (Array.isArray(arr)) return arr.filter((c) => c && c.product);
      }
    } catch (e) {}
    return [];
  });

  useEffectA(() => {
    try {
      localStorage.setItem("dom-cart", JSON.stringify(cart));
    } catch (e) {}
  }, [cart]);

  // Drop cart items that are no longer available (sold or deleted).
  useEffectA(() => {
    if (!productsLoaded) return;
    setCart((c) => {
      const filtered = c.filter((item) => {
        const p = products.find((x) => x.id === item.product.id);
        return p && p.status === "live";
      });
      return filtered.length === c.length ? c : filtered;
    });
  }, [products, productsLoaded]);

  const addToCart = useCallbackA((product, qty = 1) => {
    setCart(c => {
      const existing = c.find(i => i.product.id === product.id);
      if (existing) return c.map(i => i.product.id === product.id ? { ...i, qty: i.qty + qty } : i);
      return [...c, { product, qty }];
    });
  }, []);
  const updateQty = useCallbackA((id, qty) => {
    if (qty <= 0) return setCart(c => c.filter(i => i.product.id !== id));
    setCart(c => c.map(i => i.product.id === id ? { ...i, qty } : i));
  }, []);
  const removeFromCart = useCallbackA((id) => setCart(c => c.filter(i => i.product.id !== id)), []);
  const clearCart = useCallbackA(() => setCart([]), []);

  // Events state (persisted to localStorage so admin edits stick across reloads)
  const [events, setEvents] = useStateA(() => {
    const removed = new Set(["ev-3", "ev-4"]);
    try {
      const saved = localStorage.getItem("dom-events");
      if (saved) return JSON.parse(saved).filter((e) => !removed.has(e.id));
    } catch (e) {}
    return (window.INITIAL_EVENTS || []).filter((e) => !removed.has(e.id));
  });
  useEffectA(() => {
    try { localStorage.setItem("dom-events", JSON.stringify(events)); } catch (e) {}
  }, [events]);
  const saveEvent = useCallbackA((ev) => {
    setEvents(list => {
      if (ev.id && list.find(x => x.id === ev.id)) {
        return list.map(x => x.id === ev.id ? ev : x);
      }
      return [...list, { ...ev, id: ev.id || "ev-" + Math.floor(Math.random() * 100000) }];
    });
  }, []);
  const deleteEvent = useCallbackA((id) => setEvents(list => list.filter(x => x.id !== id)), []);

  const cartCount = cart.reduce((s, i) => s + i.qty, 0);
  const hideNavOnTop = route.page === "home";
  const isAdmin = route.page === "admin";

  // Admin session — JWT issued and verified by /api/auth
  const [admin, setAdmin] = useStateA(null);
  const [authReady, setAuthReady] = useStateA(false);

  useEffectA(() => {
    const token = sessionStorage.getItem("dom-admin-token");
    if (!token) { setAuthReady(true); return; }
    fetch("/api/auth", { headers: { Authorization: "Bearer " + token } })
      .then((r) => (r.ok ? r.json() : Promise.reject()))
      .then((d) => setAdmin(d.admin))
      .catch(() => sessionStorage.removeItem("dom-admin-token"))
      .finally(() => setAuthReady(true));
  }, []);

  const handleLogin = (token, a) => {
    sessionStorage.setItem("dom-admin-token", token);
    setAdmin(a);
  };
  const handleSignOut = () => {
    sessionStorage.removeItem("dom-admin-token");
    setAdmin(null);
    navigate({ page: "home" });
  };

  // Build current page
  let page = null;
  switch (route.page) {
    case "home":     page = <window.HomePage navigate={navigate} addToCart={addToCart} events={events} products={products} />; break;
    case "shop":     page = <window.ShopPage navigate={navigate} route={route} products={products} productsLoaded={productsLoaded} />; break;
    case "product":  page = <window.ProductPage navigate={navigate} route={route} addToCart={addToCart} products={products} />; break;
    case "cart":     page = <window.CartPage navigate={navigate} cart={cart} updateQty={updateQty} removeFromCart={removeFromCart} />; break;
    case "checkout": page = <window.CheckoutPage navigate={navigate} cart={cart} clearCart={clearCart} reloadProducts={loadProducts} />; break;
    case "confirmation": page = <window.ConfirmationPage navigate={navigate} route={route} />; break;
    case "about":    page = <window.AboutPage navigate={navigate} />; break;
    case "contact":  page = <window.ContactPage route={route} />; break;
    case "consult":  page = <window.ConsultPage />; break;
    case "selling":  page = <window.SellingPage navigate={navigate} />; break;
    case "selling":  page = <window.SellingPage navigate={navigate} />; break;
    case "admin":
      if (!authReady) page = <div className="admin-login"><div style={{ padding: 80, color: "var(--ink-muted)" }}>Loading…</div></div>;
      else if (!admin) page = <window.AdminLogin onLogin={handleLogin} navigate={navigate} />;
      else page = <window.AdminDashboard admin={admin} navigate={navigate} onSignOut={handleSignOut} events={events} saveEvent={saveEvent} deleteEvent={deleteEvent} products={products} reloadProducts={loadProducts} />;
      break;
    default: page = <window.HomePage navigate={navigate} addToCart={addToCart} events={events} products={products} />;
  }

  return (
    <>
      {!isAdmin && (
        <window.NavBar
          route={route}
          navigate={navigate}
          cartCount={cartCount}
          hideOnTop={hideNavOnTop}
        />
      )}
      <div>{page}</div>
      {!isAdmin && route.page !== "checkout" && route.page !== "cart" && (
        <window.Footer navigate={navigate} />
      )}
    </>
  );
}

// Wait until all components are loaded, then mount
function mount() {
  if (!window.HomePage || !window.NavBar) {
    return requestAnimationFrame(mount);
  }
  const root = ReactDOM.createRoot(document.getElementById("root"));
  root.render(<App />);
}
mount();