/* admin.jsx — Admin back-office: login, shell, dashboard, orders */

function AdminApp() {
  const { admin } = useApp();
  if (!admin) return <AdminLogin />;
  return <AdminShell />;
}

/* ---------------- Login ---------------- */
function AdminLogin() {
  const { lang, t, nav, db, DB, setAdmin } = useApp();
  const [pin, setPin] = useState("");
  const [err, setErr] = useState(false);
  const [busy, setBusy] = useState(false);
  const submit = async (e) => {
    e.preventDefault();
    if (busy) return;
    setBusy(true);
    const ok = await DB.adminLogin(pin);
    setBusy(false);
    if (ok) setAdmin(true);
    else setErr(true);
  };
  return (
    <div className="admin-login-wrap">
      <div className="admin-login">
        <div className="brand" style={{ alignItems: "center", marginBottom: 6 }}>
          <span className="brand-name" style={{ fontSize: 26 }}>SIAM HERITAGE</span>
          <span className="brand-sub">{lang === "th" ? "ระบบผู้ดูแลร้าน" : "Shop Administration"}</span>
        </div>
        <h1 style={{ fontSize: 26, textAlign: "center", margin: "18px 0 6px" }}>{t("admin_login")}</h1>
        <p className="muted center" style={{ fontSize: 13, marginBottom: 22 }}>{lang === "th" ? "กรอกรหัสผ่านผู้ดูแล" : "Enter your admin password"}</p>
        <form onSubmit={submit}>
          <Field label={t("pin")}>
            <input type="password" value={pin} onChange={(e) => { setPin(e.target.value); setErr(false); }} className={err ? "bad" : ""} autoFocus style={{ textAlign: "center", letterSpacing: "0.4em", fontSize: 20 }} />
          </Field>
          {err && <p style={{ color: "var(--bad)", fontSize: 13, marginTop: 10 }}>{t("wrong_pin")}</p>}
          <Btn variant="gold" className="btn-lg btn-block" style={{ marginTop: 18 }} type="submit" disabled={busy}>{busy ? "…" : t("sign_in")}</Btn>
        </form>
        <button className="link-more" style={{ display: "block", width: "100%", textAlign: "center", marginTop: 18 }} onClick={() => nav("home")}>← {lang === "th" ? "กลับหน้าร้าน" : "Back to shop"}</button>
      </div>
    </div>
  );
}

/* ---------------- Shell ---------------- */
function AdminShell() {
  const { lang, t, nav, setAdmin, db } = useApp();
  const [tab, setTab] = useState("dashboard");
  const pending = db.orders.filter((o) => o.status === "awaiting_approval").length;

  const tabs = [
    { k: "dashboard", label: t("a_dashboard"), icon: "M4 13h7V4H4zM13 20h7V9h-7zM13 4v3h7V4zM4 20h7v-5H4z" },
    { k: "orders", label: t("a_orders"), icon: "M4 4h16v4H4zM4 10h16v10H4zM9 14h6", badge: pending },
    { k: "products", label: t("a_products"), icon: "M3 7l9-4 9 4-9 4zM3 7v10l9 4 9-4V7M3 7l9 4 9-4" },
    { k: "categories", label: t("a_categories"), icon: "M4 4h7v7H4zM13 4h7v7h-7zM4 13h7v7H4zM13 13h7v7h-7z" },
    { k: "settings", label: t("a_settings"), icon: "M12 9a3 3 0 100 6 3 3 0 000-6zM19 12a7 7 0 00-.1-1l2-1.6-2-3.4-2.4 1a7 7 0 00-1.7-1l-.4-2.5H9.6L9.2 5a7 7 0 00-1.7 1l-2.4-1-2 3.4 2 1.6a7 7 0 000 2l-2 1.6 2 3.4 2.4-1a7 7 0 001.7 1l.4 2.5h4.8l.4-2.5a7 7 0 001.7-1l2.4 1 2-3.4-2-1.6a7 7 0 00.1-1z" },
  ];

  return (
    <div className="admin">
      <aside className="admin-side">
        <div className="admin-brand" onClick={() => nav("home")}>
          <span className="brand-name" style={{ fontSize: 19 }}>SIAM HERITAGE</span>
          <span className="brand-sub">{lang === "th" ? "ผู้ดูแล" : "Admin"}</span>
        </div>
        <nav className="admin-nav">
          {tabs.map((tb) => (
            <button key={tb.k} className={`anav ${tab === tb.k ? "on" : ""}`} onClick={() => setTab(tb.k)}>
              <svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round"><path d={tb.icon}/></svg>
              <span>{tb.label}</span>
              {tb.badge > 0 && <span className="anav-badge">{tb.badge}</span>}
            </button>
          ))}
        </nav>
        <div className="admin-side-foot">
          <button className="anav" onClick={() => nav("home")}>
            <svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M3 11l9-8 9 8M5 10v10h14V10"/></svg>
            <span>{lang === "th" ? "ดูหน้าร้าน" : "View shop"}</span>
          </button>
          <button className="anav" onClick={() => setAdmin(false)}>
            <svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M16 17l5-5-5-5M21 12H9M9 3H5a2 2 0 00-2 2v14a2 2 0 002 2h4"/></svg>
            <span>{t("sign_out")}</span>
          </button>
        </div>
      </aside>
      <div className="admin-main">
        {tab === "dashboard" && <AdminDashboard go={setTab} />}
        {tab === "orders" && <AdminOrders />}
        {tab === "products" && <AdminProducts />}
        {tab === "categories" && <AdminCategories />}
        {tab === "settings" && <AdminSettings />}
      </div>
    </div>
  );
}

/* ---------------- Dashboard ---------------- */
function AdminDashboard({ go }) {
  const { lang, t, db, DB } = useApp();
  const orders = db.orders;
  const pending = orders.filter((o) => o.status === "awaiting_approval");
  const revenue = orders.filter((o) => ["paid", "shipped", "completed"].includes(o.status)).reduce((s, o) => s + o.total, 0);
  const activeListings = db.products.filter((p) => p.qty > 0).length;
  const recent = orders.slice(0, 6);

  const stats = [
    { label: t("a_new_orders"), value: pending.length, sub: lang === "th" ? "รอตรวจสอบสลิป" : "awaiting approval", tone: "warn" },
    { label: t("a_revenue"), value: DB.THB(revenue), sub: lang === "th" ? "จากคำสั่งซื้อที่ยืนยัน" : "confirmed orders", tone: "good" },
    { label: t("a_listings"), value: activeListings, sub: lang === "th" ? "พร้อมจำหน่าย" : "in stock", tone: "info" },
    { label: lang === "th" ? "คำสั่งซื้อทั้งหมด" : "Total orders", value: orders.length, sub: lang === "th" ? "ตลอดเวลา" : "all time", tone: "muted" },
  ];

  return (
    <div className="admin-page">
      <header className="admin-head">
        <div><h1 style={{ fontSize: 30 }}>{t("a_dashboard")}</h1><p className="muted" style={{ fontSize: 14 }}>{lang === "th" ? "ภาพรวมร้านวันนี้" : "Your shop at a glance"}</p></div>
      </header>

      <div className="stat-grid">
        {stats.map((s, i) => (
          <div className="stat" key={i}>
            <div className="stat-label">{s.label}</div>
            <div className="stat-value">{s.value}</div>
            <div className={`stat-sub tone-${s.tone}`}>{s.sub}</div>
          </div>
        ))}
      </div>

      {pending.length > 0 && (
        <div className="attn-banner" onClick={() => go("orders")}>
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M12 9v4m0 4h.01M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z"/></svg>
          {lang === "th" ? `มี ${pending.length} รายการรอตรวจสอบการชำระเงิน` : `${pending.length} payment${pending.length > 1 ? "s" : ""} awaiting your approval`}
          <span style={{ marginLeft: "auto", fontSize: 13 }}>{lang === "th" ? "ดูเลย →" : "Review →"}</span>
        </div>
      )}

      <h2 style={{ fontSize: 20, margin: "32px 0 14px" }}>{lang === "th" ? "คำสั่งซื้อล่าสุด" : "Recent orders"}</h2>
      {recent.length === 0 ? <p className="muted">{lang === "th" ? "ยังไม่มีคำสั่งซื้อ" : "No orders yet. Place one from the shop to see it here."}</p> : (
        <div className="admin-table">
          <div className="atr ath"><span>{t("order_no")}</span><span>{lang === "th" ? "ลูกค้า" : "Customer"}</span><span>{t("total")}</span><span>{lang === "th" ? "สถานะ" : "Status"}</span></div>
          {recent.map((o) => (
            <div className="atr" key={o.id}>
              <span className="tnum" style={{ fontWeight: 600 }}>{o.number}</span>
              <span className="muted">{o.customer.name}</span>
              <span className="tnum">{DB.THB(o.total)}</span>
              <span><StatusBadge status={o.status} lang={lang} /></span>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

/* ---------------- Orders ---------------- */
function AdminOrders() {
  const { lang, t, db, DB, showToast } = useApp();
  const [filter, setFilter] = useState("all");
  const [view, setView] = useState(null); // order id being viewed

  const filters = [
    { k: "all", label: lang === "th" ? "ทั้งหมด" : "All" },
    { k: "awaiting_approval", label: t("st_awaiting_approval") },
    { k: "paid", label: t("st_paid") },
    { k: "shipped", label: t("st_shipped") },
    { k: "completed", label: t("st_completed") },
  ];
  const orders = filter === "all" ? db.orders : db.orders.filter((o) => o.status === filter);
  const viewing = view ? DB.getOrder(view) : null;

  return (
    <div className="admin-page">
      <header className="admin-head"><div><h1 style={{ fontSize: 30 }}>{t("a_orders")}</h1><p className="muted" style={{ fontSize: 14 }}>{lang === "th" ? "ตรวจสอบการชำระเงินและจัดส่ง" : "Verify payments and manage fulfilment"}</p></div></header>

      <div className="filter-row" style={{ marginBottom: 20 }}>
        {filters.map((f) => {
          const n = f.k === "all" ? db.orders.length : db.orders.filter((o) => o.status === f.k).length;
          return <button key={f.k} className={`fil ${filter === f.k ? "on" : ""}`} onClick={() => setFilter(f.k)}>{f.label} {n > 0 && <span className="fil-n">{n}</span>}</button>;
        })}
      </div>

      {orders.length === 0 ? <p className="muted">{lang === "th" ? "ไม่มีคำสั่งซื้อในหมวดนี้" : "No orders in this view."}</p> : (
        <div className="ord-list">
          {orders.map((o) => <AdminOrderRow key={o.id} order={o} onView={() => setView(o.id)} />)}
        </div>
      )}

      {viewing && <OrderDrawer order={viewing} onClose={() => setView(null)} />}
    </div>
  );
}

function AdminOrderRow({ order, onView }) {
  const { lang, t, DB, showToast } = useApp();
  const approve = (e) => { e.stopPropagation(); DB.setOrderStatus(order.id, "paid"); showToast(lang === "th" ? "อนุมัติการชำระแล้ว" : "Payment approved"); };
  const dt = new Date(order.createdAt).toLocaleDateString(lang === "th" ? "th-TH" : "en-GB", { day: "numeric", month: "short" });
  return (
    <div className="ord-row" onClick={onView}>
      <div className="ord-row-main">
        <div>
          <div className="tnum" style={{ fontWeight: 600, fontSize: 15 }}>{order.number}</div>
          <div className="muted" style={{ fontSize: 12.5 }}>{order.customer.name} · {dt}</div>
        </div>
      </div>
      <div className="muted" style={{ fontSize: 13 }}>{order.items.reduce((n, i) => n + i.qty, 0)} {lang === "th" ? "ชิ้น" : "items"}</div>
      <div className="price tnum" style={{ fontSize: 16 }}>{DB.THB(order.total)}</div>
      <StatusBadge status={order.status} lang={lang} />
      <div className="ord-row-act">
        {order.status === "awaiting_approval" && <Btn variant="gold" className="btn-sm" onClick={approve}>{t("approve")}</Btn>}
        {order.slip && order.status === "awaiting_approval" && <span className="slip-flag">{lang === "th" ? "มีสลิป" : "slip"}</span>}
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--ink-soft)" strokeWidth="1.6"><path d="m9 18 6-6-6-6"/></svg>
      </div>
    </div>
  );
}

Object.assign(window, { AdminApp, AdminLogin, AdminShell, AdminDashboard, AdminOrders, AdminOrderRow });