/* ============================================================
   3DAX — Admin dashboard shell + overview
   ============================================================ */
function Admin({ user, onExit, onLogout }){
  const [tab, setTab] = useState("overview");
  const m = useStoreData(() => Store.metrics());
  const orders = useStoreData(() => Store.orders());
  const products = useStoreData(() => Store.products());

  const tabs = [
    ["overview", "Resumen", "▦"],
    ["listings", "Listings", "◳"],
    ["orders", "Pedidos", "✦"],
    ["reviews", "Reseñas", "★"],
    ["ads", "Anuncios", "✨"],
  ];
  const pending = orders.filter((o) => o.status === "pending").length;

  return (
    <div className="adm">
      <aside className="adm__side">
        <div className="adm__brand"><span className="brand__mark">3<span>D</span>AX</span><span className="adm__badge">admin</span></div>
        <nav className="adm__nav">
          {tabs.map(([id, label, ic]) => (
            <button key={id} className={"adm__navbtn" + (tab === id ? " on" : "")} onClick={() => setTab(id)}>
              <span className="adm__ic">{ic}</span>{label}
              {id === "orders" && pending > 0 && <span className="adm__pill">{pending}</span>}
            </button>
          ))}
        </nav>
        <div className="adm__sidefoot">
          <button className="adm__exit" onClick={onExit}>← Ver la tienda</button>
          <button className="adm__exit" onClick={onLogout}>Cerrar sesión</button>
        </div>
      </aside>

      <main className="adm__main">
        <header className="adm__top">
          <div>
            <div className="adm__hello">Hola, {user.name.split(" ")[0]} 👋</div>
            <h1 className="display adm__h1">{tabs.find((t) => t[0] === tab)[1]}</h1>
          </div>
          {tab === "listings" && <AdminNewBtn />}
        </header>

        {tab === "overview" && <AdminOverview m={m} orders={orders} products={products} onGo={setTab} />}
        {tab === "listings" && <AdminListings products={products} />}
        {tab === "orders" && <AdminOrders orders={orders} />}
        {tab === "reviews" && <AdminReviews />}
        {tab === "ads" && <AdminAds products={products} />}
      </main>
    </div>
  );
}

/* a "+ nuevo" button that opens the editor (listens via custom event) */
function AdminNewBtn(){
  const [busy, setBusy] = React.useState(false);
  const [msg, setMsg] = React.useState(null);
  const canImport = window.Store && Store.importCatalog && window.DATA && window.DATA.CATALOG_ALL;
  const sync = async () => {
    setBusy(true); setMsg(null);
    const r = await Store.importCatalog();
    setBusy(false);
    setMsg(r.ok ? (r.added>0 ? "✓ "+r.added+" importados" : "Ya estaba todo ✓") : "Error: "+r.error);
    if(r.ok && r.added>0) setTimeout(()=>setMsg(null), 4000);
  };
  return (
    <div style={{ display:"flex", gap:10, alignItems:"center" }}>
      {msg && <span style={{ fontFamily:"var(--mono)", fontSize:12, color:"var(--gold-deep)" }}>{msg}</span>}
      {canImport && <button className="btn btn-ghost" onClick={sync} disabled={busy} title="Importa a Firebase los listings del catálogo que falten">
        {busy ? "Importando…" : "⇅ Sincronizar catálogo"}</button>}
      <button className="btn btn-primary" onClick={() => window.dispatchEvent(new CustomEvent("adm:new"))}>+ Nuevo listing</button>
    </div>
  );
}

function AdminOverview({ m, orders, products, onGo }){
  const recent = orders.slice(0, 5);
  const lowStock = products.filter((p) => p.available && p.stock <= 3).slice(0, 5);
  const cards = [
    { k: "Ingresos", v: eur(m.revenue), sub: m.orders + " pedidos", accent: "var(--rust)" },
    { k: "Pendientes", v: m.pending, sub: "por completar", accent: "var(--pink)" },
    { k: "Completados", v: m.completed, sub: "enviados", accent: "var(--gold)" },
    { k: "Unidades", v: m.units, sub: "vendidas", accent: "var(--rust)" },
  ];
  return (
    <div className="adm__view">
      <div className="adm__cards">
        {cards.map((c, i) => (
          <div className="adm__card" key={i}>
            <span className="adm__card-k">{c.k}</span>
            <span className="adm__card-v display" style={{ color: c.accent }}>{c.v}</span>
            <span className="adm__card-sub">{c.sub}</span>
          </div>
        ))}
      </div>

      <div className="adm__cols">
        <div className="adm__panel">
          <div className="adm__panel-h"><h3>Pedidos recientes</h3><button onClick={() => onGo("orders")}>Ver todos →</button></div>
          {recent.map((o) => (
            <div className="adm__row" key={o.id}>
              <div><strong>{o.code}</strong><span className="adm__muted"> · {o.name}</span></div>
              <div className="adm__rowr">
                <span className={"adm__tag " + (o.status === "completed" ? "is-done" : "is-pending")}>{o.status === "completed" ? "Enviado" : "Pendiente"}</span>
                <span>{eur(o.total)}</span>
              </div>
            </div>
          ))}
        </div>

        <div className="adm__panel">
          <div className="adm__panel-h"><h3>Stock bajo</h3><button onClick={() => onGo("listings")}>Gestionar →</button></div>
          {lowStock.length === 0 ? <div className="adm__muted" style={{ padding:"10px 0" }}>Todo con stock sano ✓</div> :
            lowStock.map((p) => (
              <div className="adm__row" key={p.id}>
                <div>{p.name}</div>
                <span className={"adm__tag " + (p.stock === 0 ? "is-pending" : "")}>{p.stock} uds</span>
              </div>
            ))}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { Admin, AdminNewBtn, AdminOverview });