// app.jsx — root: routing, cart/state, language + theme, tweaks. Mounts the app.
const {
  TopBar, AnnouncementBar, Footer, Storefront, ProductDetail,
  CartDrawer, Checkout, OrderSuccess, AdminApp, LoginPage, SupportPage, STRINGS, PRODUCTS, Icon: RootIcon,
  useTweaks, TweaksPanel, TweakSection, TweakToggle, TweakRadio,
} = window;

const AUTH_KEY = "megatech_auth_v1";
function loadAuth() {
  try { return JSON.parse(localStorage.getItem(AUTH_KEY) || "null"); } catch (e) { return null; }
}

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "dark": false,
  "cardStyle": "standard",
  "heroVariant": "split",
  "adminLayout": "modal"
}/*EDITMODE-END*/;

function Toasts({ toasts }) {
  return (
    <div className="toaststack">
      {toasts.map((tt) => (
        <div className="toast" key={tt.id}>
          <span className="ic"><RootIcon name="check-circle" size={20} /></span>
          <span className="t">{tt.msg}</span>
        </div>
      ))}
    </div>
  );
}

function App() {
  const [tw, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [lang, setLang] = React.useState("ar");
  const [view, setView] = React.useState("storefront"); // storefront | detail | checkout | success | admin
  const [pid, setPid] = React.useState(null);
  const [cart, setCart] = React.useState([]);
  const [cartOpen, setCartOpen] = React.useState(false);
  const [favs, setFavs] = React.useState([]);
  const [query, setQuery] = React.useState("");
  const [activeCat, setActiveCat] = React.useState("all");
  const [sort, setSort] = React.useState("featured");
  const [adminProducts, setAdminProducts] = React.useState(() => PRODUCTS.map((p) => ({ ...p, status: "active" })));
  const [categories, setCategories] = React.useState(() => window.CATEGORIES.slice());
  const [settings, setSettings] = React.useState({});
  const [orderNo, setOrderNo] = React.useState("");
  const [toasts, setToasts] = React.useState([]);
  const [auth, setAuth] = React.useState(loadAuth);
  const [authMode, setAuthMode] = React.useState("signin"); // signin | create
  const [authIntent, setAuthIntent] = React.useState(null); // 'admin' when gated
  const [prevView, setPrevView] = React.useState("storefront");
  const catalogRef = React.useRef(null);
  const t = STRINGS[lang];

  React.useEffect(() => {
    try {
      if (auth) localStorage.setItem(AUTH_KEY, JSON.stringify(auth));
      else localStorage.removeItem(AUTH_KEY);
    } catch (e) {}
  }, [auth]);

  // Load the catalog from the backend on mount. Falls back to the bundled
  // sample data (already in state) if the API is unreachable.
  React.useEffect(() => {
    (async () => {
      try {
        const [prods, cats, sett] = await Promise.all([
          window.api.listProducts(),
          window.api.listCategories(),
          window.api.getSettings().catch(() => ({})),
        ]);
        // Use the server's data as the source of truth — even when empty — so the admin only
        // edits products that actually exist in the database (avoids 404s on phantom sample rows).
        window.CATEGORIES = cats || [];
        setCategories(cats || []);
        setAdminProducts(prods || []);
        if (sett) setSettings(sett);
      } catch (e) {
        // Backend unreachable → keep the bundled sample data already in state.
        toast(lang === "en" ? "Backend offline — showing sample data" : "الخادم غير متصل — عرض بيانات تجريبية");
      }
    })();
  }, []);

  // Record one page-view for analytics (fire-and-forget, once per load).
  React.useEffect(() => {
    try { window.api.track(window.location.pathname); } catch (e) {}
  }, []);

  React.useEffect(() => {
    document.documentElement.lang = lang;
    document.documentElement.dir = t.dir;
  }, [lang]);
  React.useEffect(() => {
    document.documentElement.dataset.theme = tw.dark ? "dark" : "light";
  }, [tw.dark]);

  function toast(msg) {
    const id = Date.now() + Math.random();
    setToasts((ts) => [...ts, { id, msg }]);
    setTimeout(() => setToasts((ts) => ts.filter((x) => x.id !== id)), 2600);
  }

  function addToCart(product, qty = 1) {
    setCart((prev) => {
      const ex = prev.find((it) => it.product.id === product.id);
      if (ex) return prev.map((it) => it.product.id === product.id ? { ...it, qty: Math.min(product.stock || 99, it.qty + qty) } : it);
      return [...prev, { product, qty }];
    });
    toast(t.added + " · " + product.name[lang]);
  }
  const setQtyItem = (id, v) => setCart((prev) => prev.map((it) => it.product.id === id ? { ...it, qty: v } : it));
  const removeItem = (id) => setCart((prev) => prev.filter((it) => it.product.id !== id));
  const cartCount = cart.reduce((s, it) => s + it.qty, 0);

  const toggleFav = (id) => setFavs((f) => f.includes(id) ? f.filter((x) => x !== id) : [...f, id]);

  async function addCategory(cat) {
    let img = null;
    if (cat.imgFile) {
      try { img = (await window.api.uploadFile(cat.imgFile)).url; }
      catch (e) { toast(e.message); return; }
    }
    let saved;
    try { saved = await window.api.addCategory({ ...cat, img }); }
    catch (e) { toast(e.message); return; }
    const next = [...categories, saved];
    window.CATEGORIES = next;
    setCategories(next);
    return saved;
  }
  async function deleteCategory(id) {
    try { await window.api.deleteCategory(id); }
    catch (e) { toast(e.message); return; }
    const next = categories.filter((c) => c.id !== id);
    window.CATEGORIES = next;
    setCategories(next);
    return true;
  }

  function openProduct(id) { setPid(id); setView("detail"); window.scrollTo(0, 0); }
  function goCheckout() { setCartOpen(false); setView("checkout"); window.scrollTo(0, 0); }
  function onPlaced(no) { setOrderNo(no); setCart([]); setView("success"); window.scrollTo(0, 0); }
  function backToStore() { setView("storefront"); window.scrollTo(0, 0); }

  function scrollToCatalog(catId) {
    if (view !== "storefront") { setView("storefront"); }
    if (catId) setActiveCat(catId);
    const tryScroll = (n) => {
      const el = catalogRef.current;
      if (el) { window.scrollTo({ top: Math.max(0, el.offsetTop - 80), behavior: "smooth" }); }
      else if (n < 20) { requestAnimationFrame(() => tryScroll(n + 1)); }
    };
    requestAnimationFrame(() => tryScroll(0));
  }
  function onQuery(v) {
    setQuery(v);
    if (view !== "storefront" && view !== "admin") setView("storefront");
  }
  function onNav(target) {
    setView(target);
    window.scrollTo(0, 0);
  }
  function setViewMode(m) {
    setView(m);
    window.scrollTo(0, 0);
  }

  function goLogin(intent) {
    setPrevView(view === "login" ? prevView : view);
    setAuthIntent(intent || null);
    setAuthMode("signin");
    setView("login");
    window.scrollTo(0, 0);
  }
  function onAuthed(profile) {
    setAuth(profile);
    toast(t.signedInToast + " \u00b7 " + (profile.name[lang] || profile.name.en));
    if (authIntent === "admin" || profile.role === "admin") setView("admin");
    else setView(prevView === "login" || prevView === "admin" ? "storefront" : prevView);
    setAuthIntent(null);
    window.scrollTo(0, 0);
  }
  function signOut() {
    setAuth(null);
    toast(t.signedOutToast);
    setView("storefront");
    window.scrollTo(0, 0);
  }
  function openAdmin() {
    if (auth && auth.role === "admin") { setView("admin"); window.scrollTo(0, 0); }
    else goLogin("admin");
  }

  const detailSource = adminProducts;

  return (
    <>
      {view !== "admin" && view !== "login" && (
        <TopBar t={t} lang={lang} onToggleLang={() => setLang(lang === "en" ? "ar" : "en")}
          view={view} onSetView={setViewMode} cartCount={cartCount}
          onOpenCart={() => setCartOpen(true)} onLogo={backToStore} query={query} onQuery={onQuery}
          auth={auth} onSignIn={() => goLogin(null)} onSignOut={signOut} onAdmin={openAdmin} onNav={onNav} onProducts={() => scrollToCatalog("all")} onSolutions={() => scrollToCatalog("software")}
          onAction={(label) => toast(label + " \u00b7 " + (lang === "en" ? "coming soon in this prototype" : "\u0642\u0631\u064a\u0628\u0627\u064b \u0641\u064a \u0647\u0630\u0627 \u0627\u0644\u0646\u0645\u0648\u0630\u062c")) } />
      )}

      {view === "login" && (
        <LoginPage lang={lang} t={t} mode={authMode} onModeChange={setAuthMode}
          onAuthed={onAuthed} onBackToStore={backToStore} intent={authIntent} toast={toast}
          onToggleLang={() => setLang(lang === "en" ? "ar" : "en")} />
      )}

      {view === "storefront" && (
        <Storefront t={t} lang={lang} heroVariant={tw.heroVariant} cardStyle={tw.cardStyle}
          activeCat={activeCat} setActiveCat={setActiveCat} sort={sort} setSort={setSort} query={query}
          onAdd={(p) => addToCart(p, 1)} onView={openProduct} favs={favs} onFav={toggleFav}
          catalogRef={catalogRef} onBrowse={scrollToCatalog} products={adminProducts} categories={categories} heroImageUrl={settings.heroImageUrl} onSales={() => onNav("support")} />
      )}
      {view === "detail" && (
        <ProductDetail productId={pid} lang={lang} t={t} onBack={backToStore}
          onAdd={addToCart} onView={openProduct} favs={favs} onFav={toggleFav}
          onOpenCart={() => setCartOpen(true)} products={detailSource} />
      )}
      {view === "checkout" && (
        <Checkout items={cart} lang={lang} t={t} onBack={() => { setView("storefront"); setCartOpen(true); }} onPlaced={onPlaced} />
      )}
      {view === "success" && <OrderSuccess orderNo={orderNo} lang={lang} t={t} onBack={backToStore} />}

      {view === "support" && <SupportPage lang={lang} t={t} onBackToStore={backToStore} />}

      {view === "admin" && auth && auth.role === "admin" && (
        <AdminApp lang={lang} t={t} onToggleLang={() => setLang(lang === "en" ? "ar" : "en")}
          onExitAdmin={backToStore} products={adminProducts} setProducts={setAdminProducts}
          categories={categories} onAddCategory={addCategory} onDeleteCategory={deleteCategory}
          adminLayout={tw.adminLayout} toast={toast} auth={auth} onSignOut={signOut}
          settings={settings} onSettingsChange={setSettings} />
      )}

      {(view === "storefront" || view === "detail" || view === "support") && <Footer t={t} lang={lang} />}

      {view !== "admin" && view !== "login" && (
        <CartDrawer open={cartOpen} onClose={() => setCartOpen(false)} items={cart} lang={lang} t={t}
          onQty={setQtyItem} onRemove={removeItem} onCheckout={goCheckout} onBrowse={scrollToCatalog} />
      )}

      <Toasts toasts={toasts} />

      <TweaksPanel title="Tweaks">
        <TweakSection label={lang === "en" ? "Theme" : "السمة"} />
        <TweakToggle label={lang === "en" ? "Dark mode" : "الوضع الداكن"} value={tw.dark} onChange={(v) => setTweak("dark", v)} />
        <TweakSection label={lang === "en" ? "Product card" : "بطاقة المنتج"} />
        <TweakRadio label={lang === "en" ? "Card style" : "النمط"} value={tw.cardStyle}
          options={[{ value: "standard", label: "Standard" }, { value: "minimal", label: "Minimal" }, { value: "spec", label: "Spec" }]}
          onChange={(v) => setTweak("cardStyle", v)} />
        <TweakSection label={lang === "en" ? "Storefront" : "المتجر"} />
        <TweakRadio label={lang === "en" ? "Hero layout" : "تصميم الواجهة"} value={tw.heroVariant}
          options={[{ value: "split", label: "Split" }, { value: "bold", label: "Bold" }, { value: "center", label: "Center" }]}
          onChange={(v) => setTweak("heroVariant", v)} />
        <TweakSection label={lang === "en" ? "Admin" : "الإدارة"} />
        <TweakRadio label={lang === "en" ? "Add-product form" : "نموذج الإضافة"} value={tw.adminLayout}
          options={[{ value: "modal", label: t.layoutModal }, { value: "page", label: t.layoutPage }]}
          onChange={(v) => setTweak("adminLayout", v)} />
      </TweaksPanel>
    </>
  );
}

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