/* global React, ReactDOM, Nav, LandingPage, PDP, CartDrawer, BackToTop, AccountRoot, CheckoutPage, AdminPanel, PRODUCT, kAuth, kDb, kProductReady */
const { useState, useEffect, useMemo, useCallback } = React;

// ============================================================
// Toast — bilingual, auto-dismisses after 3.5 s
// ============================================================
function Toast({ toasts, onDismiss }) {
  if (!toasts.length) return null;
  return (
    <div className="toast-stack" role="status" aria-live="polite">
      {toasts.map(t => (
        <div key={t.id} className={"toast" + (t.leaving ? " leaving" : "")}>
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <path d="M4 12l5 5L20 6"/>
          </svg>
          <span className="km-sans">{t.kh}</span>
          <span className="toast-en">· {t.en}</span>
          <button
            type="button"
            onClick={() => onDismiss(t.id)}
            aria-label="Dismiss notification"
            style={{
              background: "transparent", border: 0, cursor: "pointer", color: "inherit",
              padding: "4px 6px", marginLeft: 4, lineHeight: 1, fontSize: 16, opacity: 0.6
            }}
          >×</button>
        </div>
      ))}
    </div>
  );
}

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "light"
}/*EDITMODE-END*/;

function Tweaks({ theme, setTheme, visible }) {
  if (!visible) return null;
  return (
    <div className="tweaks" role="dialog" aria-label="Tweaks">
      <div className="tweaks-title">Tweaks</div>
      <div className="col gap-6">
        <span className="mono" style={{ fontSize: "var(--text-2xs)", letterSpacing: "0.1em", color: "var(--fg-muted)", textTransform: "uppercase" }}>
          Theme
        </span>
        <div className="seg">
          <button type="button" className={theme === "light" ? "is-on" : ""} onClick={() => setTheme("light")}>Light</button>
          <button type="button" className={theme === "dark" ? "is-on" : ""} onClick={() => setTheme("dark")}>Dark</button>
        </div>
      </div>
    </div>
  );
}

function App() {
  const [route, setRoute]         = useState(() => localStorage.getItem("kshop.route") || "home");
  const [pdpSize, setPdpSize]     = useState(() => localStorage.getItem("kshop.pdpSize") || "");
  const [theme, setTheme]         = useState(() => {
    const saved = localStorage.getItem("kshop.theme");
    if (saved) return saved;
    return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
  });
  const [cartOpen, setCartOpen]   = useState(false);
  const [tweaksVisible, setTweaksVisible] = useState(false);
  const [toasts, setToasts]       = useState([]);
  const [items, setItems]         = useState(() => {
    try { return JSON.parse(localStorage.getItem("kshop.cart") || "[]"); } catch { return []; }
  });
  const [user, setUser]           = useState(null);
  const [authLoading, setAuthLoading] = useState(true);
  const [productKey, setProductKey]   = useState(0);
  const [isAdmin, setIsAdmin]         = useState(false);

  // Persist
  useEffect(() => { localStorage.setItem("kshop.route", route); }, [route]);
  useEffect(() => { localStorage.setItem("kshop.pdpSize", pdpSize); }, [pdpSize]);
  useEffect(() => { localStorage.setItem("kshop.cart", JSON.stringify(items)); }, [items]);
  useEffect(() => {
    localStorage.setItem("kshop.theme", theme);
    // Add transition class so colours animate; remove after transition completes
    const html = document.documentElement;
    html.classList.add("theme-transitioning");
    html.setAttribute("data-theme", theme);
    const tid = setTimeout(() => html.classList.remove("theme-transitioning"), 260);
    return () => clearTimeout(tid);
  }, [theme]);

  // Follow OS dark/light preference (only when user hasn't manually overridden)
  useEffect(() => {
    const mq = window.matchMedia("(prefers-color-scheme: dark)");
    const handler = (e) => {
      if (!localStorage.getItem("kshop.theme")) {
        setTheme(e.matches ? "dark" : "light");
      }
    };
    mq.addEventListener("change", handler);
    return () => mq.removeEventListener("change", handler);
  }, []);

  // Scroll top on route change
  useEffect(() => { window.scrollTo({ top: 0 }); }, [route, pdpSize]);

  // Firebase auth listener
  useEffect(() => {
    const unsub = kAuth.onAuthStateChanged((u) => { setUser(u); setAuthLoading(false); });
    return unsub;
  }, []);

  // Admin capability check — no email in source
  useEffect(() => {
    if (!user) { setIsAdmin(false); return; }
    kDb.collection("admins").doc(user.uid).get()
      .then(() => setIsAdmin(true))
      .catch(() => setIsAdmin(false));
  }, [user]);

  // Re-render product pages after Firestore config loads
  useEffect(() => {
    (window.kProductReady || Promise.resolve()).then(() => {
      setProductKey(k => k + 1);
      if (window._loaderDone) window._loaderDone();
    });
  }, []);

  // Toast helper — bilingual, auto-dismisses after 3.5 s
  const dismissToast = useCallback((id) => {
    setToasts(prev => prev.map(t => t.id === id ? { ...t, leaving: true } : t));
    setTimeout(() => setToasts(prev => prev.filter(t => t.id !== id)), 220);
  }, []);

  const addToast = useCallback((kh, en) => {
    const id = Date.now();
    setToasts(prev => [...prev, { id, kh, en, leaving: false }]);
    setTimeout(() => dismissToast(id), 3300);
  }, [dismissToast]);

  // openPDP: productId ignored (one product), sizeId pre-selects variant
  const openPDP = useCallback((_productId, sizeId) => { setPdpSize(sizeId || ""); setRoute("pdp"); }, []);

  const addToCart = useCallback((line) => {
    setItems(prev => {
      const idx = prev.findIndex(x => x.productId === line.productId && x.sizeId === line.sizeId);
      if (idx >= 0) {
        const next = [...prev];
        next[idx] = { ...next[idx], qty: next[idx].qty + line.qty };
        return next;
      }
      return [...prev, line];
    });
    // Bilingual toast confirmation
    const size = PRODUCT.sizes.find(s => s.id === line.sizeId);
    addToast(
      `បានបន្ថែម ${size?.labelKh || ""} ទៅកន្ត្រក`,
      `${size?.label || "Item"} added to cart`
    );
    setCartOpen(true);
  }, [addToast]);

  const cartCount = useMemo(() => items.reduce((a, it) => a + it.qty, 0), [items]);

  // Tweaks protocol (Anthropic design viewer)
  useEffect(() => {
    const handle = (e) => {
      if (!e.data || typeof e.data !== "object") return;
      if (e.data.type === "__activate_edit_mode")   setTweaksVisible(true);
      if (e.data.type === "__deactivate_edit_mode")  setTweaksVisible(false);
    };
    window.addEventListener("message", handle);
    window.parent.postMessage({ type: "__edit_mode_available" }, "*");
    return () => window.removeEventListener("message", handle);
  }, []);

  useEffect(() => {
    window.parent.postMessage({ type: "__edit_mode_set_keys", edits: { theme } }, "*");
  }, [theme]);

  // Route → nav highlight
  const navRoute =
    route === "home"     ? "home"    :
    route === "pdp"      ? "shop"    :
    route === "shop"     ? "shop"    :
    route === "how"      ? "how"     :
    route === "learn"    ? "learn"   :
    route === "account"  ? "account" :
    route === "checkout" ? "shop"    :
    route === "admin"    ? "admin"   : "home";

  const onNavChange = (r) => {
    if (r === "home")    setRoute("home");
    if (r === "shop")    { setRoute("shop");  setTimeout(() => document.getElementById("shop")?.scrollIntoView({ behavior: "smooth", block: "start" }), 60); }
    if (r === "how")     { setRoute("how");   setTimeout(() => document.getElementById("science")?.scrollIntoView({ behavior: "smooth", block: "start" }), 60); }
    if (r === "learn")   { setRoute("learn"); setTimeout(() => document.getElementById("learn")?.scrollIntoView({ behavior: "smooth", block: "start" }), 60); }
    if (r === "account") setRoute("account");
    if (r === "admin")   setRoute("admin");
  };

  return (
    <div id="top" data-screen-label={"Page: " + route}>
      <Nav
        route={navRoute}
        setRoute={onNavChange}
        cartCount={cartCount}
        cartOpen={cartOpen}
        openCart={() => setCartOpen(true)}
        theme={theme}
        setTheme={setTheme}
        isAdmin={isAdmin}
      />
      <span id="main-content" tabIndex={-1} className="skip-target" />
      {["home", "shop", "how", "learn"].includes(route) && <LandingPage key={productKey} onAddToCart={addToCart} isAdmin={isAdmin} />}
      {route === "pdp"      && <main><PDP key={productKey} initialSize={pdpSize} onBack={() => setRoute("home")} onAddToCart={addToCart} isAdmin={isAdmin} /></main>}
      {route === "account"  && <AccountRoot user={user} authLoading={authLoading} isAdmin={isAdmin} />}
      {route === "checkout" && (
        <CheckoutPage
          items={items}
          user={user}
          onBack={() => { setRoute("home"); setCartOpen(true); }}
          onSuccess={() => setItems([])}
          setRoute={setRoute}
        />
      )}
      {route === "admin" && <AdminPanel user={user} setRoute={setRoute} />}
      <CartDrawer
        open={cartOpen}
        onClose={() => setCartOpen(false)}
        items={items}
        setItems={setItems}
        onCheckout={() => { setCartOpen(false); setRoute("checkout"); }}
      />
      <Tweaks theme={theme} setTheme={setTheme} visible={tweaksVisible} />
      <Toast toasts={toasts} onDismiss={dismissToast} />
      <BackToTop />
    </div>
  );
}

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