// admin.jsx — manager back-office: product table + Add/Edit Product (slide-over OR full page).
const { Icon: AIcon } = window;

const STATUS_OPTS = ["active", "draft"];

const CAT_ICON_OPTIONS = ["register", "printer", "scan", "cash", "monitor", "code", "boxes", "package", "box", "warehouse", "tag", "layers", "credit-card", "shield", "truck", "headset", "cart", "zap", "sparkles", "sliders"];

function makeCatId(nameEn, existingIds) {
  let base = (nameEn || "").toLowerCase().trim().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "");
  if (!base) base = "cat";
  let id = base, n = 2;
  while (existingIds.includes(id)) { id = base + "-" + n; n++; }
  return id;
}

function CategoryModal({ lang, t, onSave, onClose, existingIds }) {
  const [en, setEn] = React.useState("");
  const [ar, setAr] = React.useState("");
  const [icon, setIcon] = React.useState("tag");
  const [img, setImg] = React.useState(null);
  const [imgFile, setImgFile] = React.useState(null);
  const [over, setOver] = React.useState(false);
  const [err, setErr] = React.useState(false);
  const fileRef = React.useRef();

  function pickFile(file) {
    if (file && file.type.startsWith("image/")) { setImg(URL.createObjectURL(file)); setImgFile(file); }
  }
  function save() {
    if (!en.trim()) { setErr(true); return; }
    const id = makeCatId(en, existingIds);
    onSave({ id, icon, imgFile, en: en.trim(), ar: (ar.trim() || en.trim()) });
  }

  return (
    <>
      <div className="modalscrim is-open" onClick={onClose} />
      <div className="catmodal" role="dialog" aria-modal="true">
        <div className="catmodal__head">
          <div>
            <h2>{t.newCategory}</h2>
            <div className="sub">{lang === "en" ? "Create a category for your catalog." : "أنشئ فئة لكتالوجك."}</div>
          </div>
          <button className="iconbtn" onClick={onClose} aria-label="Close"><AIcon name="x" size={22} /></button>
        </div>
        <div className="catmodal__body">
          <div className="catmodal__preview">
            <span className="catmodal__previewic">{img ? <img src={img} alt="" style={{ width: 30, height: 30, objectFit: "contain" }} /> : <AIcon name={icon} size={26} />}</span>
            <span className="catmodal__previewname">{en.trim() || (lang === "en" ? "Category name" : "اسم الفئة")}</span>
          </div>
          <div className="formgrid">
            <Field label={t.catNameEn} req error={err && !en.trim() ? t.required : null}>
              <input className={"input" + (err && !en.trim() ? " is-error" : "")} value={en} onChange={(e) => { setEn(e.target.value); setErr(false); }} placeholder={lang === "en" ? "e.g. Label printers" : "e.g. Label printers"} autoFocus />
            </Field>
            <Field label={t.catNameAr}>
              <input className="input" value={ar} onChange={(e) => setAr(e.target.value)} placeholder="مثال: طابعات الملصقات" dir="rtl" />
            </Field>
          </div>
          <div className="field" style={{ marginTop: 16 }}>
            <label className="field__label">{t.catIconLabel}</label>
            {img ? (
              <div className="catupload__has">
                <span className="catupload__thumb"><img src={img} alt="" /></span>
                <div className="catupload__info">
                  <div className="catupload__t">{lang === "en" ? "Custom icon uploaded" : "تم رفع أيقونة مخصصة"}</div>
                  <button type="button" className="linkbtn" onClick={() => { setImg(null); setImgFile(null); }}><AIcon name="x" size={14} />{lang === "en" ? "Remove" : "إزالة"}</button>
                </div>
              </div>
            ) : (
              <>
                <div className={"catupload" + (over ? " is-over" : "")}
                  onClick={() => fileRef.current && fileRef.current.click()}
                  onDragOver={(e) => { e.preventDefault(); setOver(true); }}
                  onDragLeave={() => setOver(false)}
                  onDrop={(e) => { e.preventDefault(); setOver(false); pickFile(e.dataTransfer.files[0]); }}>
                  <span className="ic"><AIcon name="upload" size={20} /></span>
                  <span className="catupload__txt">{lang === "en" ? "Upload your own icon" : "ارفع أيقونتك الخاصة"} <span className="s">PNG, SVG</span></span>
                  <input ref={fileRef} type="file" accept="image/*" hidden onChange={(e) => pickFile(e.target.files[0])} />
                </div>
                <div className="catupload__or">{lang === "en" ? "or choose a built-in icon" : "أو اختر أيقونة جاهزة"}</div>
                <div className="iconpicker">
                  {CAT_ICON_OPTIONS.map((ic) => (
                    <button key={ic} type="button" className={"iconpicker__opt" + (icon === ic ? " is-sel" : "")} onClick={() => setIcon(ic)} aria-label={ic}>
                      <AIcon name={ic} size={22} />
                    </button>
                  ))}
                </div>
              </>
            )}
          </div>
        </div>
        <div className="catmodal__foot">
          <button className="btn btn--secondary" onClick={onClose}>{t.cancel}</button>
          <button className="btn btn--primary" onClick={save}><AIcon name="check" size={18} />{t.saveCategory}</button>
        </div>
      </div>
    </>
  );
}

function AdminProductForm({ variant, lang, t, initial, onSave, onClose, categories, onAddCategory }) {
  const CATEGORIES = categories || window.CATEGORIES;
  const [f, setF] = React.useState(initial);
  const [img, setImg] = React.useState(initial.img || null);
  const [imgFile, setImgFile] = React.useState(null);
  const [over, setOver] = React.useState(false);
  const [errors, setErrors] = React.useState({});
  const [catModal, setCatModal] = React.useState(false);
  const fileRef = React.useRef();
  const set = (k) => (e) => setF({ ...f, [k]: e.target.value });

  function pickFile(file) {
    if (file && file.type.startsWith("image/")) { setImg(URL.createObjectURL(file)); setImgFile(file); }
  }
  function validate() {
    const e = {};
    if (!f.name.trim()) e.name = t.required;
    if (!f.cat) e.cat = t.required;
    if (!f.price || Number(f.price) <= 0) e.price = t.required;
    if (f.stock === "" || Number(f.stock) < 0) e.stock = t.required;
    setErrors(e);
    return Object.keys(e).length === 0;
  }
  function save() {
    if (!validate()) return;
    onSave({ ...f, img, imgFile, price: Number(f.price), stock: Number(f.stock), compareAt: f.compareAt ? Number(f.compareAt) : null });
  }
  async function handleAddCat(cat) {
    const saved = await onAddCategory(cat);
    if (saved) setF((prev) => ({ ...prev, cat: saved.id }));
    setCatModal(false);
  }

  const fields = (
    <>
      <div className="field" style={{ marginBottom: 20 }}>
        <label className="field__label">{t.productImage}</label>
        {img ? (
          <div className="dropzone__preview">
            <img src={img} alt="" />
            <button className="dropzone__clear" onClick={() => { setImg(null); setImgFile(null); }} aria-label="Remove"><AIcon name="x" size={18} /></button>
          </div>
        ) : (
          <div className={"dropzone" + (over ? " is-over" : "")}
            onClick={() => fileRef.current && fileRef.current.click()}
            onDragOver={(e) => { e.preventDefault(); setOver(true); }}
            onDragLeave={() => setOver(false)}
            onDrop={(e) => { e.preventDefault(); setOver(false); pickFile(e.dataTransfer.files[0]); }}>
            <div className="ic"><AIcon name="upload" size={24} /></div>
            <div className="t">{t.uploadHint}</div>
            <div className="s">PNG, JPG, WebP · {lang === "en" ? "up to 5MB" : "حتى 5 ميجا"}</div>
            <input ref={fileRef} type="file" accept="image/*" hidden onChange={(e) => pickFile(e.target.files[0])} />
          </div>
        )}
      </div>

      <div className="formgrid">
        <div className="col-2">
          <Field label={t.productName} req error={errors.name}>
            <input className={"input" + (errors.name ? " is-error" : "")} value={f.name} onChange={set("name")} placeholder={lang === "en" ? "e.g. MegaTech T2 Terminal" : "مثال: محطة ميجاتك T2"} />
          </Field>
        </div>
        <Field label={t.category} req error={errors.cat}>
          <div className="selectfield-wrap">
            <select className="selectfield" value={f.cat} onChange={set("cat")}>
              <option value="">{lang === "en" ? "Select category…" : "اختر الفئة…"}</option>
              {CATEGORIES.map((c) => <option key={c.id} value={c.id}>{c[lang]}</option>)}
            </select>
            <span className="caret"><AIcon name="chevron-down" size={16} /></span>
          </div>
          {onAddCategory && (
            <button type="button" className="linkbtn" style={{ color: "var(--brand-primary)", marginTop: 6 }} onClick={() => setCatModal(true)}>
              <AIcon name="plus" size={14} />{t.addNewCategory}
            </button>
          )}
        </Field>
        <Field label={t.skuLabel}>
          <input className="input" value={f.sku} onChange={set("sku")} placeholder="MT-XXX-00" />
        </Field>
        <Field label={t.priceEGP} req error={errors.price}>
          <input className={"input num-tabular" + (errors.price ? " is-error" : "")} value={f.price} onChange={set("price")} inputMode="numeric" placeholder="0" />
        </Field>
        <Field label={t.compareAt}>
          <input className="input num-tabular" value={f.compareAt} onChange={set("compareAt")} inputMode="numeric" placeholder="0" />
        </Field>
        <Field label={t.stockLevel} req error={errors.stock}>
          <input className={"input num-tabular" + (errors.stock ? " is-error" : "")} value={f.stock} onChange={set("stock")} inputMode="numeric" placeholder="0" />
        </Field>
        <Field label={t.statusLabel}>
          <div className="selectfield-wrap">
            <select className="selectfield" value={f.status} onChange={set("status")}>
              {STATUS_OPTS.map((s) => <option key={s} value={s}>{t[s]}</option>)}
            </select>
            <span className="caret"><AIcon name="chevron-down" size={16} /></span>
          </div>
        </Field>
        <div className="col-2">
          <Field label={t.taglineLabel}>
            <input className="input" value={f.tagline} onChange={set("tagline")} placeholder={lang === "en" ? "One short line shown on the card" : "سطر قصير يظهر على البطاقة"} />
          </Field>
        </div>
        <div className="col-2">
          <Field label={t.descLabel}>
            <div className="richbox">
              <div className="richbox__bar">
                <button title={t.richBold} style={{ fontWeight: 700 }}>B</button>
                <button title="Italic" style={{ fontStyle: "italic" }}>I</button>
                <button title={t.richList}><AIcon name="list" size={16} /></button>
                <button title="Link"><AIcon name="arrow-up-right" size={16} /></button>
              </div>
              <textarea className="textarea" value={f.desc} onChange={set("desc")} rows={4} placeholder={lang === "en" ? "Describe the product, its key features and what's in the box…" : "صف المنتج وأهم مميزاته ومحتويات العبوة…"} />
            </div>
          </Field>
        </div>
      </div>
    </>
  );

  if (variant === "page") {
    return (
      <>
      <div style={{ maxWidth: 880 }}>
        <button className="linkbtn" style={{ color: "var(--brand-primary)", marginBottom: 16 }} onClick={onClose}>
          <AIcon name="arrow-left" size={16} className="flip-x" />{t.adminProducts}
        </button>
        <div className="panel">
          <h3>{initial._editing ? t.editProduct : t.newProduct}</h3>
          <div className="panel__sub">{t.formIntro}</div>
          {fields}
          <div style={{ display: "flex", gap: 12, justifyContent: "flex-end", marginTop: 24, paddingTop: 20, borderTop: "1px solid var(--border)" }}>
            <button className="btn btn--secondary" onClick={onClose}>{t.cancel}</button>
            <button className="btn btn--primary" onClick={save}><AIcon name="check" size={18} />{t.saveProduct}</button>
          </div>
        </div>
      </div>
      {catModal && <CategoryModal lang={lang} t={t} existingIds={CATEGORIES.map((c) => c.id)} onSave={handleAddCat} onClose={() => setCatModal(false)} />}
      </>
    );
  }

  return (
    <>
      <div className="modalscrim is-open" onClick={onClose} />
      <aside className="slideover is-open">
        <div className="slideover__head">
          <div style={{ flex: 1 }}>
            <h2>{initial._editing ? t.editProduct : t.newProduct}</h2>
            <div className="sub">{t.formIntro}</div>
          </div>
          <button className="iconbtn" onClick={onClose} aria-label="Close"><AIcon name="x" size={22} /></button>
        </div>
        <div className="slideover__body">{fields}</div>
        <div className="slideover__foot">
          <button className="btn btn--secondary" onClick={onClose}>{t.cancel}</button>
          <button className="btn btn--primary" onClick={save}><AIcon name="check" size={18} />{t.saveProduct}</button>
        </div>
      </aside>
      {catModal && <CategoryModal lang={lang} t={t} existingIds={CATEGORIES.map((c) => c.id)} onSave={handleAddCat} onClose={() => setCatModal(false)} />}
    </>
  );
}

function StockCell({ stock, t }) {
  let color = "var(--success)", label = stock;
  if (stock <= 0) { color = "var(--danger)"; }
  else if (stock <= 12) { color = "var(--warning)"; }
  return <span className="stockpill"><span className="dot" style={{ background: color }} /><span className="num-tabular" style={{ color: "var(--fg1)" }}>{stock}</span></span>;
}

// Admin → Dashboard tab: visitor numbers + geo breakdown from /api/stats.
function DashboardPanel({ lang, t }) {
  const [stats, setStats] = React.useState(null);
  const [err, setErr] = React.useState("");

  React.useEffect(() => {
    window.api.getStats().then(setStats).catch((e) => setErr(e.message));
  }, []);

  const fmtDate = (s) => { try { return new Date(s).toLocaleString(lang === "ar" ? "ar-EG" : "en-GB"); } catch (e) { return s; } };

  if (err) return <div className="panel"><h3>{lang === "en" ? "Visitors" : "الزوار"}</h3><div className="panel__sub">{err}</div></div>;
  if (!stats) return <div className="panel"><div className="panel__sub">{lang === "en" ? "Loading…" : "جارٍ التحميل…"}</div></div>;

  return (
    <>
      <div className="statrow">
        <div className="statcard"><div className="l"><AIcon name="chart" size={18} />{lang === "en" ? "Total visits" : "إجمالي الزيارات"}</div><div className="v num-tabular">{stats.total}</div></div>
        <div className="statcard"><div className="l"><AIcon name="user" size={18} />{lang === "en" ? "Unique visitors" : "زوار فريدون"}</div><div className="v num-tabular">{stats.unique}</div></div>
        <div className="statcard"><div className="l"><AIcon name="zap" size={18} />{lang === "en" ? "Today" : "اليوم"}</div><div className="v num-tabular">{stats.today}</div></div>
        <div className="statcard"><div className="l"><AIcon name="package" size={18} />{lang === "en" ? "Last 7 days" : "آخر 7 أيام"}</div><div className="v num-tabular">{stats.last7}</div></div>
      </div>

      <div className="tablewrap" style={{ marginTop: 20 }}>
        <div className="tabletop"><h3 style={{ margin: 0 }}>{lang === "en" ? "Visitors by country" : "الزوار حسب الدولة"}</h3></div>
        <div style={{ overflowX: "auto" }}>
          <table className="ptable">
            <thead><tr><th>{lang === "en" ? "Country" : "الدولة"}</th><th>{lang === "en" ? "Visits" : "الزيارات"}</th></tr></thead>
            <tbody>
              {stats.byCountry.length === 0 ? (
                <tr><td colSpan={2} style={{ color: "var(--fg3)" }}>{lang === "en" ? "No data yet" : "لا توجد بيانات بعد"}</td></tr>
              ) : stats.byCountry.map((c) => (
                <tr key={c.country}><td>{c.country}</td><td className="num-tabular">{c.count}</td></tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>

      <div className="tablewrap" style={{ marginTop: 20 }}>
        <div className="tabletop"><h3 style={{ margin: 0 }}>{lang === "en" ? "Recent visits" : "أحدث الزيارات"}</h3></div>
        <div style={{ overflowX: "auto" }}>
          <table className="ptable">
            <thead><tr><th>{lang === "en" ? "When" : "الوقت"}</th><th>{lang === "en" ? "Country" : "الدولة"}</th><th>{lang === "en" ? "City" : "المدينة"}</th><th>{lang === "en" ? "Page" : "الصفحة"}</th></tr></thead>
            <tbody>
              {stats.recent.map((v, i) => (
                <tr key={i}><td className="num-tabular">{fmtDate(v.createdAt)}</td><td>{v.country || "—"}</td><td>{v.city || "—"}</td><td className="num-tabular">{v.path || "/"}</td></tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </>
  );
}

// Admin → Settings tab: upload/manage the storefront hero image (persisted server-side).
function SettingsPanel({ lang, t, settings, onSettingsChange, toast }) {
  const [img, setImg] = React.useState((settings && settings.heroImageUrl) || null);
  const [imgFile, setImgFile] = React.useState(null);
  const [over, setOver] = React.useState(false);
  const [saving, setSaving] = React.useState(false);
  const fileRef = React.useRef();

  function pickFile(file) {
    if (file && file.type.startsWith("image/")) { setImg(URL.createObjectURL(file)); setImgFile(file); }
  }
  async function save() {
    setSaving(true);
    try {
      let url = (img && img.indexOf("blob:") === 0) ? null : img;
      if (imgFile) url = (await window.api.uploadFile(imgFile)).url;
      const updated = await window.api.updateSettings({ heroImageUrl: url || "" });
      if (onSettingsChange) onSettingsChange(updated);
      setImg(url || null);
      setImgFile(null);
      toast(lang === "en" ? "Hero image saved" : "تم حفظ صورة الواجهة");
    } catch (e) { toast(e.message); }
    setSaving(false);
  }

  return (
    <div className="panel" style={{ maxWidth: 720 }}>
      <h3>{lang === "en" ? "Storefront hero image" : "صورة واجهة المتجر"}</h3>
      <div className="panel__sub">{lang === "en" ? "Large image at the top of the storefront. Recommended around 1200×800px." : "صورة كبيرة أعلى المتجر. يُفضّل نحو 1200×800 بكسل."}</div>
      <div className="field" style={{ marginTop: 16 }}>
        {img ? (
          <div className="dropzone__preview">
            <img src={img} alt="" />
            <button className="dropzone__clear" onClick={() => { setImg(null); setImgFile(null); }} aria-label="Remove"><AIcon name="x" size={18} /></button>
          </div>
        ) : (
          <div className={"dropzone" + (over ? " is-over" : "")}
            onClick={() => fileRef.current && fileRef.current.click()}
            onDragOver={(e) => { e.preventDefault(); setOver(true); }}
            onDragLeave={() => setOver(false)}
            onDrop={(e) => { e.preventDefault(); setOver(false); pickFile(e.dataTransfer.files[0]); }}>
            <div className="ic"><AIcon name="upload" size={24} /></div>
            <div className="t">{lang === "en" ? "Upload a hero image" : "ارفع صورة الواجهة"}</div>
            <div className="s">PNG, JPG, WebP · {lang === "en" ? "up to 5MB" : "حتى 5 ميجا"}</div>
            <input ref={fileRef} type="file" accept="image/*" hidden onChange={(e) => pickFile(e.target.files[0])} />
          </div>
        )}
      </div>
      <div style={{ display: "flex", justifyContent: "flex-end", marginTop: 20, paddingTop: 16, borderTop: "1px solid var(--border)" }}>
        <button className="btn btn--primary" onClick={save} disabled={saving}>
          <AIcon name="check" size={18} />{saving ? (lang === "en" ? "Saving…" : "جارٍ الحفظ…") : (lang === "en" ? "Save" : "حفظ")}
        </button>
      </div>
    </div>
  );
}

function AdminApp({ lang, t, onToggleLang, onExitAdmin, products, setProducts, adminLayout, toast, auth, onSignOut, categories, onAddCategory, onDeleteCategory, settings, onSettingsChange }) {
  const { fmtMoney, catName, Badge, CatMedallion, Logo } = window;
  const CATEGORIES = categories || window.CATEGORIES;
  const [tab, setTab] = React.useState("products");
  const [search, setSearch] = React.useState("");
  const [catFilter, setCatFilter] = React.useState("all");
  const [form, setForm] = React.useState(null); // {initial} or null
  const [catModal, setCatModal] = React.useState(false);

  const blank = { name: "", sku: "", cat: "", price: "", compareAt: "", stock: "", status: "active", tagline: "", desc: "", img: null };

  const filtered = products.filter((p) =>
    (catFilter === "all" || p.cat === catFilter) &&
    (p.name[lang] + (p.sku || "")).toLowerCase().includes(search.toLowerCase()));

  const stats = {
    total: products.length,
    active: products.filter((p) => p.status !== "draft").length,
    low: products.filter((p) => p.stock > 0 && p.stock <= 12).length,
    out: products.filter((p) => p.stock <= 0).length,
  };

  function openNew() { setForm({ initial: { ...blank } }); }
  function openEdit(p) {
    setForm({ initial: { _editing: true, id: p.id, name: p.name[lang], sku: p.sku, cat: p.cat, price: p.price, compareAt: p.compareAt || "", stock: p.stock, status: p.status || "active", tagline: p.tagline ? p.tagline[lang] : "", desc: p.desc ? p.desc[lang] : "", img: p.img || null } });
  }
  async function handleSave(data) {
    // Upload a newly chosen image first; keep an existing URL otherwise.
    let imgUrl = (data.img && data.img.indexOf("blob:") === 0) ? null : (data.img || null);
    if (data.imgFile) {
      try { imgUrl = (await window.api.uploadFile(data.imgFile)).url; }
      catch (e) { toast(e.message); return; }
    }

    let productObj;
    if (data._editing) {
      const existing = products.find((p) => p.id === data.id) || {};
      productObj = {
        ...existing,
        id: data.id, sku: data.sku, cat: data.cat, price: data.price, compareAt: data.compareAt,
        stock: data.stock, status: data.status, img: imgUrl,
        name: { en: data.name, ar: data.name }, tagline: { en: data.tagline, ar: data.tagline },
        desc: { en: data.desc || (existing.desc ? existing.desc.en : ""), ar: data.desc || (existing.desc ? existing.desc.ar : "") },
      };
    } else {
      productObj = {
        sku: data.sku || "MT-NEW", cat: data.cat, price: data.price, compareAt: data.compareAt,
        stock: data.stock, status: data.status, img: imgUrl, rating: 5, reviews: 0,
        name: { en: data.name, ar: data.name }, tagline: { en: data.tagline, ar: data.tagline },
        specs: [], desc: { en: data.desc || "", ar: data.desc || "" },
      };
    }

    let saved;
    try { saved = await window.api.saveProduct(productObj); }
    catch (e) { toast(e.message); return; }

    if (data._editing) setProducts(products.map((p) => p.id === saved.id ? saved : p));
    else setProducts([saved, ...products]);
    setForm(null);
    toast(t.saved);
  }
  async function handleDelete(id) {
    try { await window.api.deleteProduct(id); }
    catch (e) { toast(e.message); return; }
    setProducts(products.filter((p) => p.id !== id));
    toast(lang === "en" ? "Product removed" : "تم حذف المنتج");
  }
  async function handleAddCategory(cat) {
    const saved = await onAddCategory(cat);
    if (saved) { setCatModal(false); toast(t.catSaved); }
  }
  async function handleDeleteCategory(id) {
    if (products.some((p) => p.cat === id)) { toast(t.catInUse); return; }
    const ok = await onDeleteCategory(id);
    if (ok) {
      if (catFilter === id) setCatFilter("all");
      toast(t.catDeleted);
    }
  }
  function catCount(id) { return products.filter((p) => p.cat === id).length; }

  const navItems = [
    { id: "dashboard", ic: "chart", label: t.dashboard },
    { id: "products", ic: "package", label: t.adminProducts },
    { id: "categories", ic: "layers", label: t.categoriesTab },
    { id: "orders", ic: "cart", label: t.orders },
    { id: "inventory", ic: "warehouse", label: t.inventory },
    { id: "customers", ic: "user", label: t.customers },
    { id: "settings", ic: "sliders", label: t.settings },
  ];

  const showPageForm = form && adminLayout === "page";

  return (
    <div className="admin">
      <aside className="adminside">
        <div className="adminside__brand">
          <span className="logo"><img src="assets/logo-megatech.png" alt="MegaTech" /></span>
          <span className="lbl">{t.admin}</span>
        </div>
        <nav className="adminnav">
          {navItems.map((n) => (
            <button key={n.id} className={"adminnav__item" + (tab === n.id ? " is-active" : "")} onClick={() => setTab(n.id)}>
              <AIcon name={n.ic} size={20} />{n.label}
            </button>
          ))}
        </nav>
        <div className="adminside__foot">
          {auth && (
            <div className="adminside__user">
              <span className="avatar avatar--admin">{(auth.name[lang] || auth.name.en).trim().split(/\s+/).map((w) => w[0]).slice(0, 2).join("")}</span>
              <div className="adminside__userid">
                <div className="nm">{auth.name[lang] || auth.name.en}</div>
                <div className="em num-tabular">{auth.email}</div>
              </div>
            </div>
          )}
          <button className="adminnav__item" onClick={onExitAdmin}><AIcon name="arrow-left" size={20} className="flip-x" />{t.backToStore}</button>
          {onSignOut && <button className="adminnav__item" onClick={onSignOut}><AIcon name="log-out" size={20} />{t.signOut}</button>}
        </div>
      </aside>

      <div className="adminmain">
        <div className="admintop">
          <div style={{ flex: 1 }}>
            <h1>{showPageForm ? (form.initial._editing ? t.editProduct : t.newProduct) : tab === "categories" ? t.categoriesTitle : t.adminTitle}</h1>
            {!showPageForm && <div className="sub">{tab === "categories" ? t.categoriesSub : t.adminSub}</div>}
          </div>
          <button className="langtoggle" onClick={onToggleLang}><AIcon name="globe" size={17} />{lang === "en" ? "العربية" : "EN"}</button>
          {!showPageForm && tab === "products" && (
            <button className="btn btn--primary" onClick={openNew}><AIcon name="plus" size={18} />{t.addProduct}</button>
          )}
          {tab === "categories" && (
            <button className="btn btn--primary" onClick={() => setCatModal(true)}><AIcon name="plus" size={18} />{t.addCategory}</button>
          )}
        </div>

        <div className="adminbody">
          {showPageForm ? (
            <AdminProductForm variant="page" lang={lang} t={t} initial={form.initial} onSave={handleSave} onClose={() => setForm(null)} categories={categories} onAddCategory={onAddCategory} />
          ) : tab === "categories" ? (
            <div className="catgrid">
              {CATEGORIES.length === 0 ? (
                <div className="emptycart" style={{ gridColumn: "1 / -1", minHeight: 300, background: "var(--bg-raised)", border: "1px solid var(--border)", borderRadius: "var(--r-xl)" }}>
                  <div className="ic"><AIcon name="layers" size={30} /></div>
                  <h4>{t.noCategories}</h4>
                  <button className="btn btn--primary" onClick={() => setCatModal(true)}><AIcon name="plus" size={18} />{t.addCategory}</button>
                </div>
              ) : CATEGORIES.map((c) => {
                const cnt = catCount(c.id);
                return (
                  <div className="catadmin" key={c.id}>
                    <span className="catadmin__ic"><window.CatGlyph cat={c} size={26} /></span>
                    <div className="catadmin__main">
                      <div className="catadmin__name">{c[lang]}</div>
                      <div className="catadmin__meta"><span className="num-tabular">{cnt}</span> {cnt === 1 ? t.catProductCount : t.catProductsCount}</div>
                    </div>
                    <button className="iconbtn" onClick={() => handleDeleteCategory(c.id)} aria-label="Delete" title={cnt > 0 ? t.catInUse : ""} disabled={cnt > 0}><AIcon name="trash" size={18} /></button>
                  </div>
                );
              })}
            </div>
          ) : tab === "dashboard" ? (
            <DashboardPanel lang={lang} t={t} />
          ) : tab === "settings" ? (
            <SettingsPanel lang={lang} t={t} settings={settings} onSettingsChange={onSettingsChange} toast={toast} />
          ) : tab !== "products" ? (
            <div className="emptycart" style={{ minHeight: 360, background: "var(--bg-raised)", border: "1px solid var(--border)", borderRadius: "var(--r-xl)" }}>
              <div className="ic"><AIcon name={navItems.find((n) => n.id === tab).ic} size={30} /></div>
              <h4>{navItems.find((n) => n.id === tab).label}</h4>
              <p>{lang === "en" ? "This section is part of the back-office. The product catalog is the focus of this prototype." : "هذا القسم جزء من الإدارة. كتالوج المنتجات هو محور هذا النموذج."}</p>
              <button className="btn btn--secondary" onClick={() => setTab("products")}>{t.adminProducts}</button>
            </div>
          ) : (
            <>
              <div className="statrow">
                <div className="statcard"><div className="l"><AIcon name="package" size={18} />{lang === "en" ? "Total products" : "إجمالي المنتجات"}</div><div className="v num-tabular">{stats.total}</div></div>
                <div className="statcard"><div className="l"><AIcon name="check-circle" size={18} />{t.active}</div><div className="v num-tabular">{stats.active}</div></div>
                <div className="statcard"><div className="l"><AIcon name="info" size={18} />{lang === "en" ? "Low stock" : "كمية محدودة"}</div><div className="v num-tabular warn">{stats.low}</div></div>
                <div className="statcard"><div className="l"><AIcon name="x" size={18} />{lang === "en" ? "Out of stock" : "غير متوفر"}</div><div className="v num-tabular bad">{stats.out}</div></div>
              </div>

              <div className="tablewrap">
                <div className="tabletop">
                  <div className="searchbar" style={{ maxWidth: 320, height: 40 }}>
                    <AIcon name="search" size={18} />
                    <input value={search} onChange={(e) => setSearch(e.target.value)} placeholder={t.searchProducts} />
                  </div>
                  <div className="selectwrap">
                    <select value={catFilter} onChange={(e) => setCatFilter(e.target.value)} style={{ height: 40 }}>
                      <option value="all">{t.allCats}</option>
                      {CATEGORIES.map((c) => <option key={c.id} value={c.id}>{c[lang]}</option>)}
                    </select>
                    <span className="caret"><AIcon name="chevron-down" size={16} /></span>
                  </div>
                  <span className="toolbar__count num-tabular" style={{ marginInlineStart: "auto" }}>{filtered.length} {filtered.length === 1 ? t.resultsOne : t.resultsMany}</span>
                </div>
                <div style={{ overflowX: "auto" }}>
                  <table className="ptable">
                    <thead>
                      <tr>
                        <th>{t.thName}</th><th>{t.thCat}</th><th>{t.thPrice}</th><th>{t.thStock}</th><th>{t.thStatus}</th><th></th>
                      </tr>
                    </thead>
                    <tbody>
                      {filtered.map((p) => (
                        <tr key={p.id}>
                          <td>
                            <div className="prodcell">
                              <span className="thumb">{p.img ? <img src={p.img} alt="" style={{ width: "100%", height: "100%", objectFit: "cover", borderRadius: "var(--r-sm)" }} /> : <CatMedallion catId={p.cat} size={22} />}</span>
                              <div><div className="nm">{p.name[lang]}</div><div className="sk">{p.sku}</div></div>
                            </div>
                          </td>
                          <td style={{ color: "var(--fg2)" }}>{catName(p.cat, lang)}</td>
                          <td className="num-tabular" style={{ fontWeight: 600 }}>{fmtMoney(p.price, lang)}</td>
                          <td><StockCell stock={p.stock} t={t} /></td>
                          <td><Badge badge={{ en: t[p.status || "active"], ar: t[p.status || "active"], tone: (p.status === "draft" ? "neutral" : "success") }} lang={lang} /></td>
                          <td>
                            <div className="rowact">
                              <button className="iconbtn" onClick={() => openEdit(p)} aria-label="Edit"><AIcon name="edit" size={18} /></button>
                              <button className="iconbtn" onClick={() => handleDelete(p.id)} aria-label="Delete"><AIcon name="trash" size={18} /></button>
                            </div>
                          </td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>
              </div>
            </>
          )}
        </div>
      </div>

      {form && adminLayout === "modal" && (
        <AdminProductForm variant="modal" lang={lang} t={t} initial={form.initial} onSave={handleSave} onClose={() => setForm(null)} categories={categories} onAddCategory={onAddCategory} />
      )}

      {catModal && tab === "categories" && (
        <CategoryModal lang={lang} t={t} existingIds={CATEGORIES.map((c) => c.id)} onSave={handleAddCategory} onClose={() => setCatModal(false)} />
      )}
    </div>
  );
}

const { Field } = window;
Object.assign(window, { AdminApp, AdminProductForm });