/* ===========================================================================
   VESTIRÉ STUDIO — admin: gowns · gown editor · users · sales → window
   =========================================================================== */

const { useState, useEffect, useRef, useMemo } = React;

/* ---- GOWNS MANAGEMENT ---------------------------------------------------- */
function AGowns({ ctx }) {
  const [q, setQ] = useState("");
  const [cat, setCat] = useState("All");
  const list = ctx.gowns.filter((g) => (cat === "All" || g.category === cat) && (q === "" || g.name.toLowerCase().includes(q.toLowerCase())));
  return (
    <div className="anim-fade">
      <AdminPageHead kicker="Catalog" title="Gowns">
        <div className="row gap8 acenter" style={{ position: "relative" }}>
          <Icon name="search" size={15} style={{ position: "absolute", left: 12, color: "var(--muted)" }} />
          <input className="input" style={{ paddingLeft: 34, width: 200 }} placeholder="Search gowns…" value={q} onChange={(e) => setQ(e.target.value)} />
        </div>
        <Btn variant="accent" icon="plus" onClick={() => ctx.nav("gownEdit", { id: null })}>Add gown</Btn>
      </AdminPageHead>

      <div className="row gap8 wrap" style={{ marginBottom: 18 }}>
        {["All", ...VS.categories].map((c) => <button key={c} className={"chip" + (cat === c ? " chip--on" : "")} onClick={() => setCat(c)}>{c}</button>)}
      </div>

      <div className="card" style={{ overflow: "hidden" }}>
        <div style={{ overflowX: "auto" }}>
          <table className="vtable">
            <thead><tr><th>Gown</th><th>Category</th><th>Offered</th><th>Rent</th><th>Buy</th><th style={{ textAlign: "center" }}>Stock</th><th style={{ textAlign: "right" }}>Actions</th></tr></thead>
            <tbody>
              {list.map((g) => (
                <tr key={g.id}>
                  <td>
                    <div className="row gap12 acenter">
                      <img src={g.image} className="thumb" style={{ width: 40, height: 50 }} alt="" />
                      <div className="col"><span className="disp" style={{ fontSize: 18 }}>{g.name}</span><span className="muted" style={{ fontSize: 11.5 }}>{g.color} · {g.occasion}</span></div>
                    </div>
                  </td>
                  <td><span className="tag tag--line">{g.category}</span></td>
                  <td style={{ textTransform: "capitalize" }}>{g.transaction}</td>
                  <td>{g.priceRent ? VS.peso(g.priceRent) : "—"}</td>
                  <td>{g.priceBuy ? VS.peso(g.priceBuy) : "—"}</td>
                  <td>
                    <div className="row gap8 acenter" style={{ justifyContent: "center" }}>
                      <button className="qbtn" onClick={() => ctx.setStock(g.id, Math.max(0, g.stock - 1))}><Icon name="x" size={11} style={{ transform: "rotate(45deg)" }} /></button>
                      <span style={{ minWidth: 22, textAlign: "center", fontWeight: 700, color: g.stock <= 1 ? "var(--cancelled)" : "var(--ink)" }}>{g.stock}</span>
                      <button className="qbtn" onClick={() => ctx.setStock(g.id, g.stock + 1)}><Icon name="plus" size={11} /></button>
                    </div>
                  </td>
                  <td>
                    <div className="row gap8" style={{ justifyContent: "flex-end" }}>
                      <button className="iconbtn" title="Edit" onClick={() => ctx.nav("gownEdit", { id: g.id })}><Icon name="edit" size={15} /></button>
                      <button className="iconbtn iconbtn--danger" title="Delete" onClick={() => ctx.deleteGown(g.id)}><Icon name="trash" size={15} /></button>
                    </div>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}

/* ---- GOWN EDITOR --------------------------------------------------------- */
function AGownEdit({ ctx }) {
  const id = ctx.route.params && ctx.route.params.id;
  const existing = id ? ctx.gowns.find((g) => g.id === id) : null;
  const [f, setF] = useState(existing || {
    name: "", category: "Wedding", transaction: "Rental", priceRent: "", priceBuy: "",
    stock: 1, sizes: ["S", "M", "L"], color: "", occasion: "", image: (ctx.gowns[0] && ctx.gowns[0].image) || "img/g1.jpg", desc: ""
  });
  const set = (k) => (e) => setF((p) => ({ ...p, [k]: e.target.value }));
  const toggleSize = (s) => setF((p) => ({ ...p, sizes: p.sizes.includes(s) ? p.sizes.filter((x) => x !== s) : [...p.sizes, s] }));

  function save() {
    ctx.saveGown({ ...f, id: id || undefined, priceRent: +f.priceRent || 0, priceBuy: +f.priceBuy || 0, stock: +f.stock, gallery: existing ? existing.gallery : [f.image] });
    ctx.showToast(existing ? "Gown updated" : "Gown added to catalog");
    ctx.nav("gowns");
  }

  return (
    <div className="anim-fade">
      <span className="lnk" style={{ color: "var(--muted)", marginBottom: 14, display: "inline-flex" }} onClick={() => ctx.nav("gowns")}><Icon name="arrowL" size={14} />Gowns</span>
      <h1 className="disp" style={{ fontSize: 38, marginBottom: 24 }}>{existing ? "Edit gown" : "Add a gown"}</h1>
      <div style={{ display: "grid", gridTemplateColumns: "minmax(0,1.4fr) minmax(260px,1fr)", gap: 26, alignItems: "start" }} className="dash-grid">
        <div className="card pad28 col gap18">
          <Field label="Gown name"><input className="input" value={f.name} onChange={set("name")} placeholder="e.g. Ivory Cathedral" /></Field>
          <div className="form-grid">
            <Field label="Category"><select className="select" value={f.category} onChange={set("category")}>{VS.categories.map((c) => <option key={c}>{c}</option>)}</select></Field>
            <Field label="Offered as"><select className="select" value={f.transaction} onChange={set("transaction")}>{["Rental", "Purchase", "Both"].map((c) => <option key={c}>{c}</option>)}</select></Field>
            <Field label="Rental price"><input className="input" type="number" value={f.priceRent} onChange={set("priceRent")} placeholder="0" disabled={f.transaction === "Purchase"} /></Field>
            <Field label="Purchase price"><input className="input" type="number" value={f.priceBuy} onChange={set("priceBuy")} placeholder="0" disabled={f.transaction === "Rental"} /></Field>
            <Field label="Colour"><input className="input" value={f.color} onChange={set("color")} placeholder="Ivory" /></Field>
            <Field label="Occasion"><input className="input" value={f.occasion} onChange={set("occasion")} placeholder="Wedding" /></Field>
          </div>
          <Field label="Available sizes">
            <div className="row gap8 wrap">{["XS", "S", "M", "L", "XL"].map((s) => <button key={s} className={"sizechip" + (f.sizes.includes(s) ? " sizechip--on" : "")} onClick={() => toggleSize(s)}>{s}</button>)}</div>
          </Field>
          <Field label="Description"><textarea className="textarea" value={f.desc} onChange={set("desc")} placeholder="Describe the silhouette, fabric, details…" /></Field>
        </div>

        <div className="col gap18">
          <div className="card pad20 col gap14">
            <span className="label">Preview image</span>
            <img src={f.image} className="thumb" style={{ width: "100%", aspectRatio: "4/5" }} alt="" />
            <Field label="Choose from studio photos">
              <div className="row gap8 wrap">
                {ctx.gowns.map((g) => <img key={g.id} src={g.image} onClick={() => setF((p) => ({ ...p, image: g.image }))} className="thumb" style={{ width: 44, height: 54, cursor: "pointer", border: f.image === g.image ? "2px solid var(--accent)" : "2px solid transparent" }} alt="" />)}
              </div>
            </Field>
          </div>
          <div className="card pad20 col gap12">
            <Field label="Stock in atelier"><input className="input" type="number" value={f.stock} onChange={set("stock")} /></Field>
            <Btn variant="accent" block icon="check" onClick={save}>{existing ? "Save changes" : "Add gown"}</Btn>
            <Btn variant="ghost" block onClick={() => ctx.nav("gowns")}>Cancel</Btn>
          </div>
        </div>
      </div>
    </div>
  );
}

/* ---- USERS --------------------------------------------------------------- */
function AUsers({ ctx }) {
  const [q, setQ] = useState("");
  const [open, setOpen] = useState(null);
  const list = ctx.users.filter((u) => q === "" || u.fullname.toLowerCase().includes(q.toLowerCase()) || u.email.toLowerCase().includes(q.toLowerCase()));
  return (
    <div className="anim-fade">
      <AdminPageHead kicker="People" title="Customers">
        <div className="row gap8 acenter" style={{ position: "relative" }}>
          <Icon name="search" size={15} style={{ position: "absolute", left: 12, color: "var(--muted)" }} />
          <input className="input" style={{ paddingLeft: 34, width: 220 }} placeholder="Search customers…" value={q} onChange={(e) => setQ(e.target.value)} />
        </div>
      </AdminPageHead>

      <div className="card" style={{ overflow: "hidden" }}>
        <div style={{ overflowX: "auto" }}>
          <table className="vtable">
            <thead><tr><th>Customer</th><th>Contact</th><th>Location</th><th style={{ textAlign: "center" }}>Requests</th><th>Joined</th><th style={{ textAlign: "right" }}>Actions</th></tr></thead>
            <tbody>
              {list.map((u) => {
                const reqs = ctx.requests.filter((r) => r.userId === u.id);
                return (
                  <React.Fragment key={u.id}>
                    <tr>
                      <td><div className="row gap12 acenter"><span className="avatar">{initials(u.fullname)}</span><div className="col"><span style={{ fontWeight: 600 }}>{u.fullname}</span><span className="muted" style={{ fontSize: 11.5 }}>@{u.username}</span></div></div></td>
                      <td><div className="col"><span style={{ fontSize: 13 }}>{u.email}</span><span className="muted" style={{ fontSize: 12 }}>{u.phone}</span></div></td>
                      <td className="muted" style={{ fontSize: 13 }}>{u.address}</td>
                      <td style={{ textAlign: "center" }}><span className="tag" style={{ background: reqs.length ? "var(--accent-soft)" : "var(--surface-2)" }}>{reqs.length}</span></td>
                      <td className="muted">{fmtDate(u.createdAt)}</td>
                      <td><div className="row gap8" style={{ justifyContent: "flex-end" }}>
                        <button className="iconbtn" title="View requests" onClick={() => setOpen(open === u.id ? null : u.id)}><Icon name="eye" size={15} /></button>
                        <button className="iconbtn iconbtn--danger" title="Delete" onClick={() => ctx.deleteUser(u.id)}><Icon name="trash" size={15} /></button>
                      </div></td>
                    </tr>
                    {open === u.id && (
                      <tr><td colSpan="6" style={{ background: "var(--surface-2)", padding: 0 }}>
                        <div className="pad20 col gap10 anim-fade">
                          <span className="label">{u.fullname.split(" ")[0]}'s requests</span>
                          {reqs.length === 0 && <span className="muted" style={{ fontSize: 13 }}>No requests yet.</span>}
                          {reqs.map((r) => (
                            <div key={r.id} className="row gap12 acenter card pad14" style={{ background: "var(--surface)", cursor: "pointer" }} onClick={() => ctx.nav("requests", { focus: r.id })}>
                              <span style={{ fontWeight: 700, fontSize: 13 }}>{r.code}</span>
                              <div className="row gap6">{r.items.slice(0, 3).map((it, i) => <img key={i} src={it.image} className="thumb" style={{ width: 28, height: 34 }} alt="" />)}</div>
                              <span className="muted grow" style={{ fontSize: 12.5 }}>{fmtDate(r.createdAt)} · {r.type}</span>
                              <StatusPill status={r.status} />
                              <span style={{ fontWeight: 700 }}>{VS.peso(r.total)}</span>
                            </div>
                          ))}
                        </div>
                      </td></tr>
                    )}
                  </React.Fragment>
                );
              })}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}

/* ---- PRINTABLE SALES REPORT --------------------------------------------- */
function SalesReportDoc({ rows, range, totals, onClose }) {
  const now = new Date();
  const stamp = now.toLocaleDateString("en-US", { month: "long", day: "numeric", year: "numeric" }) + " · " + now.toLocaleTimeString("en-US", { hour: "numeric", minute: "2-digit" });
  const rangeLabel = range.start || range.end
    ? (range.start ? fmtDate(range.start) : "Beginning") + " — " + (range.end ? fmtDate(range.end) : "Today")
    : "All time";
  return (
    <div className="report-overlay" role="dialog" aria-label="Sales report preview">
      <div className="report-bar">
        <span className="muted" style={{ fontSize: 13 }}>Report preview · {rows.length} record{rows.length !== 1 ? "s" : ""}</span>
        <div className="row gap10">
          <Btn variant="ghost" size="sm" icon="x" onClick={onClose}>Close</Btn>
          <Btn variant="accent" size="sm" icon="box" onClick={() => window.print()}>Print / Save PDF</Btn>
        </div>
      </div>
      <div className="report-scroll">
        <div className="print-doc">
          {/* letterhead */}
          <div className="report-head">
            <div className="row between aend wrap" style={{ gap: 16 }}>
              <div className="row gap14 acenter">
                <div className="report-mark">V</div>
                <div className="col" style={{ lineHeight: 1.1 }}>
                  <span className="disp" style={{ fontSize: 30 }}>Vestiré&nbsp;Studio</span>
                  <span style={{ fontSize: 9.5, letterSpacing: ".34em", textTransform: "uppercase", color: "#8a7a5e", marginTop: 4 }}>Couture Rental &amp; Atelier · Davao</span>
                </div>
              </div>
              <div className="col aend" style={{ textAlign: "right", lineHeight: 1.5 }}>
                <span style={{ fontSize: 11, letterSpacing: ".22em", textTransform: "uppercase", color: "#a9824a", fontWeight: 700 }}>Sales Report</span>
                <span style={{ fontSize: 12, color: "#555", whiteSpace: "nowrap" }}>Generated {stamp}</span>
              </div>
            </div>
            <div className="report-rule" />
            <div className="row between wrap" style={{ gap: 16 }}>
              <div className="col"><span className="rl">Reporting period</span><span className="rv">{rangeLabel}</span></div>
              <div className="col"><span className="rl">Total sales</span><span className="rv">{totals.count} order{totals.count !== 1 ? "s" : ""}</span></div>
              <div className="col"><span className="rl">Total revenue</span><span className="rv" style={{ color: "#7d5d2f" }}>{VS.peso(totals.revenue.toFixed(2))}</span></div>
              <div className="col"><span className="rl">Completed</span><span className="rv">{VS.peso(totals.completed.toFixed(2))}</span></div>
            </div>
          </div>

          {/* table */}
          <table className="report-table">
            <thead>
              <tr>
                <th>Ref</th><th>Customer</th><th>Email</th><th>Address</th><th>Type</th>
                <th>Rental Start</th><th style={{ textAlign: "center" }}>Days</th>
                <th style={{ textAlign: "right" }}>Total</th><th>Payment</th><th>Status</th><th>Order Date</th>
              </tr>
            </thead>
            <tbody>
              {rows.length === 0 ? (
                <tr><td colSpan="11" style={{ textAlign: "center", padding: 24, color: "#888" }}>No records in this period.</td></tr>
              ) : rows.map((r) => (
                <tr key={r.id}>
                  <td style={{ fontWeight: 700, whiteSpace: "nowrap" }}>{r.code}</td>
                  <td style={{ whiteSpace: "nowrap" }}>{r.customer.name}</td>
                  <td>{r.customer.email}</td>
                  <td>{r.customer.address}</td>
                  <td style={{ textTransform: "capitalize" }}>{r.type}</td>
                  <td style={{ whiteSpace: "nowrap" }}>{r.rentalStart ? fmtDate(r.rentalStart) : "—"}</td>
                  <td style={{ textAlign: "center" }}>{r.rentalDays || "—"}</td>
                  <td style={{ textAlign: "right", whiteSpace: "nowrap" }}>{VS.peso(r.total.toFixed(2))}</td>
                  <td>{r.payment}</td>
                  <td><span className={"report-status rs-" + r.status.toLowerCase()}>{r.status}</span></td>
                  <td style={{ whiteSpace: "nowrap" }}>{fmtDate(r.createdAt)}</td>
                </tr>
              ))}
            </tbody>
            {rows.length > 0 && (
              <tfoot>
                <tr>
                  <td colSpan="7" style={{ textAlign: "right", fontWeight: 700 }}>Total revenue</td>
                  <td style={{ textAlign: "right", fontWeight: 700 }}>{VS.peso(totals.revenue.toFixed(2))}</td>
                  <td colSpan="3"></td>
                </tr>
              </tfoot>
            )}
          </table>

          <div className="report-foot">
            <span>Vestiré Studio · Door 2, Madapo Hills, Davao City · +63 912 345 6789 · hello@vestirestudio.com</span>
            <span>Confidential — internal sales report</span>
          </div>
        </div>
      </div>
    </div>
  );
}

/* ---- SALES --------------------------------------------------------------- */
const RANGE_PRESETS = [
  ["all", "All time"], ["30d", "Last 30 days"], ["month", "This month"], ["q", "This quarter"], ["ytd", "Year to date"]
];
function presetRange(key) {
  const today = new Date();
  const iso = (d) => d.toISOString().slice(0, 10);
  if (key === "30d") { const s = new Date(today); s.setDate(s.getDate() - 30); return { start: iso(s), end: iso(today) }; }
  if (key === "month") return { start: iso(new Date(today.getFullYear(), today.getMonth(), 1)), end: iso(today) };
  if (key === "q") { const q = Math.floor(today.getMonth() / 3) * 3; return { start: iso(new Date(today.getFullYear(), q, 1)), end: iso(today) }; }
  if (key === "ytd") return { start: iso(new Date(today.getFullYear(), 0, 1)), end: iso(today) };
  return { start: "", end: "" };
}
function ASales({ ctx }) {
  const [start, setStart] = useState("");
  const [end, setEnd] = useState("");
  const [preset, setPreset] = useState("all");
  const [report, setReport] = useState(false);

  const applyPreset = (key) => { setPreset(key); const r = presetRange(key); setStart(r.start); setEnd(r.end); };
  const inRange = (d) => (!start || d >= start) && (!end || d <= end);

  // scope ALL sales analytics to the selected period
  const scoped = useMemo(() => ctx.requests.filter((r) => inRange(r.createdAt)).sort((a, b) => b.createdAt.localeCompare(a.createdAt)), [ctx.requests, start, end]);
  const m = adminMetrics(scoped);
  const completed = scoped.filter((r) => r.status === "Completed");
  const reportTotals = {
    count: scoped.length,
    revenue: scoped.filter((r) => r.status !== "Cancelled").reduce((a, b) => a + b.total, 0),
    completed: completed.reduce((a, b) => a + b.total, 0)
  };
  const byType = { rental: 0, purchase: 0 };
  scoped.filter((r) => r.status !== "Cancelled").forEach((r) => { byType[r.type] += r.total; });
  const typeTotal = byType.rental + byType.purchase || 1;

  // top gowns by line-item count
  const counts = {};
  scoped.filter((r) => r.status !== "Cancelled").forEach((r) => r.items.forEach((it) => { counts[it.gownId] = (counts[it.gownId] || 0) + it.qty; }));
  const top = Object.entries(counts).map(([gid, n]) => ({ g: VS.gownById[gid], n })).filter((x) => x.g).sort((a, b) => b.n - a.n).slice(0, 5);
  const maxTop = Math.max(...top.map((x) => x.n), 1);

  // revenue by month (derived from scoped data)
  const MO = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
  const monthRev = {};
  scoped.filter((r) => r.status !== "Cancelled").forEach((r) => { const k = MO[+r.createdAt.slice(5, 7) - 1]; monthRev[k] = (monthRev[k] || 0) + r.total; });
  const months = Object.keys(monthRev).length ? MO.filter((x) => monthRev[x] != null) : ["Jun"];
  const byMonth = months.reduce((o, k) => (o[k] = monthRev[k] || 0, o), {});
  const maxM = Math.max(...Object.values(byMonth), 1);

  // category breakdown
  const catRev = {};
  scoped.filter((r) => r.status !== "Cancelled").forEach((r) => r.items.forEach((it) => { const c = VS.gownById[it.gownId] && VS.gownById[it.gownId].category; if (c) catRev[c] = (catRev[c] || 0) + it.subtotal; }));
  const catMax = Math.max(...Object.values(catRev), 1);

  function exportCSV() {
    const head = ["Ref", "Customer", "Email", "Address", "Type", "Rental Start", "Rental Days", "Total", "Payment", "Status", "Order Date"];
    const lines = scoped.map((r) => [r.code, r.customer.name, r.customer.email, r.customer.address, r.type, r.rentalStart || "", r.rentalDays || 0, r.total, r.payment, r.status, r.createdAt].map((c) => '"' + String(c).replace(/"/g, '""') + '"').join(","));
    const blob = new Blob([[head.join(","), ...lines].join("\n")], { type: "text/csv" });
    const a = document.createElement("a"); a.href = URL.createObjectURL(blob); a.download = "vestire-sales" + (start ? "-" + start : "") + ".csv"; a.click();
    ctx.showToast("Sales CSV exported", "box");
  }

  return (
    <div className="anim-fade">
      {report && <SalesReportDoc rows={scoped} range={{ start, end }} totals={reportTotals} onClose={() => setReport(false)} />}

      <AdminPageHead kicker="Reports" title="Sales">
        <Btn variant="ghost" icon="box" onClick={exportCSV}>Export CSV</Btn>
        <Btn variant="accent" icon="box" onClick={() => setReport(true)}>Print report</Btn>
      </AdminPageHead>

      {/* DATE-RANGE FILTER */}
      <div className="card pad20 col gap14" style={{ borderRadius: "var(--r-md)", marginBottom: 22 }}>
        <div className="row between wrap gap14 acenter">
          <div className="row gap8 wrap">
            {RANGE_PRESETS.map(([k, l]) => <button key={k} className={"chip" + (preset === k ? " chip--on" : "")} onClick={() => applyPreset(k)}>{l}</button>)}
          </div>
          <div className="row gap10 acenter wrap">
            <Field label="Start date"><input className="input" type="date" value={start} style={{ width: 160 }} onChange={(e) => { setStart(e.target.value); setPreset("custom"); }} /></Field>
            <Field label="End date"><input className="input" type="date" value={end} style={{ width: 160 }} onChange={(e) => { setEnd(e.target.value); setPreset("custom"); }} /></Field>
            {(start || end) && <button className="lnk" style={{ color: "var(--muted)", marginTop: 14 }} onClick={() => applyPreset("all")}><Icon name="x" size={14} />Clear</button>}
          </div>
        </div>
        <div className="row gap8 acenter" style={{ fontSize: 12.5, color: "var(--muted)" }}>
          <Icon name="calendar" size={14} />
          Showing <strong style={{ color: "var(--ink)" }}>{scoped.length}</strong> order{scoped.length !== 1 ? "s" : ""}
          {(start || end) ? <> · {start ? fmtDate(start) : "beginning"} to {end ? fmtDate(end) : "today"}</> : " · all time"}
        </div>
      </div>

      <div className="stat-grid" style={{ marginBottom: 22 }}>
        <Stat label="Completed revenue" value={VS.peso(m.revenue)} sub={completed.length + " completed requests"} icon="chart" accent />
        <Stat label="In pipeline" value={VS.peso(m.pipeline)} sub={(m.pending + m.processing) + " open requests"} icon="bag" />
        <Stat label="Avg. request value" value={VS.peso(Math.round((byType.rental + byType.purchase) / Math.max(1, m.total - m.cancelled)))} sub="excl. cancelled" icon="sparkle" />
        <Stat label="Cancellation rate" value={Math.round((m.cancelled / Math.max(1, m.total)) * 100) + "%"} sub={m.cancelled + " cancelled"} icon="x" />
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "minmax(0,1.5fr) minmax(0,1fr)", gap: 22, alignItems: "start" }} className="dash-grid">
        <div className="card pad24 col gap18">
          <h3 className="disp" style={{ fontSize: 22 }}>Revenue by month</h3>
          <div className="row gap14 aend" style={{ height: 180 }}>
            {months.map((mo) => (
              <div key={mo} className="col grow acenter gap8" style={{ justifyContent: "flex-end", height: "100%" }}>
                <span className="muted" style={{ fontSize: 11 }}>{byMonth[mo] ? "₱" + (byMonth[mo] / 1000).toFixed(0) + "k" : ""}</span>
                <div style={{ width: "100%", maxWidth: 46, height: Math.max(4, (byMonth[mo] / maxM) * 100) + "%", background: "var(--accent)", borderRadius: "8px 8px 4px 4px" }} />
                <span className="muted" style={{ fontSize: 12 }}>{mo}</span>
              </div>
            ))}
          </div>
        </div>

        <div className="card pad24 col gap16">
          <h3 className="disp" style={{ fontSize: 22 }}>Rental vs purchase</h3>
          <div className="col gap14">
            {[["rental", "Rental", "var(--processing)"], ["purchase", "Purchase", "var(--completed)"]].map(([k, lbl, col]) => (
              <div key={k} className="col gap6">
                <div className="row between"><span style={{ fontWeight: 600, fontSize: 13.5 }}>{lbl}</span><span style={{ fontWeight: 700 }}>{VS.peso(byType[k])}</span></div>
                <div className="prog"><i style={{ width: (byType[k] / typeTotal) * 100 + "%", background: col }} /></div>
                <span className="muted" style={{ fontSize: 11.5 }}>{Math.round((byType[k] / typeTotal) * 100)}% of revenue</span>
              </div>
            ))}
          </div>
        </div>

        <div className="card pad24 col gap16">
          <h3 className="disp" style={{ fontSize: 22 }}>Top gowns</h3>
          <div className="col gap14">
            {top.map(({ g, n }) => (
              <div key={g.id} className="row gap12 acenter">
                <img src={g.image} className="thumb" style={{ width: 40, height: 50 }} alt="" />
                <div className="grow col gap5">
                  <div className="row between"><span style={{ fontWeight: 600, fontSize: 13.5 }}>{g.name}</span><span className="muted" style={{ fontSize: 12 }}>{n} request{n !== 1 ? "s" : ""}</span></div>
                  <div className="prog"><i style={{ width: (n / maxTop) * 100 + "%" }} /></div>
                </div>
              </div>
            ))}
            {top.length === 0 && <span className="muted" style={{ fontSize: 13 }}>No sales in this period.</span>}
          </div>
        </div>

        <div className="card pad24 col gap16">
          <h3 className="disp" style={{ fontSize: 22 }}>Revenue by category</h3>
          <div className="col gap12">
            {Object.entries(catRev).sort((a, b) => b[1] - a[1]).map(([c, v]) => (
              <div key={c} className="col gap5">
                <div className="row between"><span style={{ fontWeight: 600, fontSize: 13.5 }}>{c}</span><span className="muted" style={{ fontSize: 12 }}>{VS.peso(v)}</span></div>
                <div className="prog"><i style={{ width: (v / catMax) * 100 + "%", background: "var(--accent-2)" }} /></div>
              </div>
            ))}
            {Object.keys(catRev).length === 0 && <span className="muted" style={{ fontSize: 13 }}>No sales in this period.</span>}
          </div>
        </div>
      </div>

      {/* ORDER-LEVEL RECORDS */}
      <div className="card" style={{ overflow: "hidden", marginTop: 22 }}>
        <div className="row between acenter wrap gap10" style={{ padding: "18px 22px" }}>
          <div className="col gap3">
            <h3 className="disp" style={{ fontSize: 22 }}>Sales records</h3>
            <span className="muted" style={{ fontSize: 12.5 }}>{scoped.length} order{scoped.length !== 1 ? "s" : ""} · revenue {VS.peso(reportTotals.revenue.toFixed(2))}</span>
          </div>
          <Btn variant="soft" size="sm" icon="box" onClick={() => setReport(true)}>Open print report</Btn>
        </div>
        <div style={{ overflowX: "auto" }}>
          <table className="vtable">
            <thead><tr><th>Ref</th><th>Customer</th><th>Type</th><th>Rental</th><th style={{ textAlign: "right" }}>Total</th><th>Payment</th><th>Status</th><th>Order date</th></tr></thead>
            <tbody>
              {scoped.map((r) => (
                <tr key={r.id} style={{ cursor: "pointer" }} onClick={() => ctx.nav("requests", { focus: r.id })}>
                  <td style={{ fontWeight: 700, letterSpacing: ".03em" }}>{r.code}</td>
                  <td><div className="col"><span style={{ fontWeight: 600, fontSize: 13.5 }}>{r.customer.name}</span><span className="muted" style={{ fontSize: 11.5 }}>{r.customer.email}</span></div></td>
                  <td style={{ textTransform: "capitalize" }}>{r.type}</td>
                  <td className="muted" style={{ fontSize: 13 }}>{r.rentalStart ? fmtDate(r.rentalStart) + " · " + r.rentalDays + "d" : "—"}</td>
                  <td style={{ textAlign: "right", fontWeight: 700 }}>{VS.peso(r.total)}</td>
                  <td>{r.payment}</td>
                  <td><StatusPill status={r.status} /></td>
                  <td className="muted">{fmtDate(r.createdAt)}</td>
                </tr>
              ))}
              {scoped.length === 0 && <tr><td colSpan="8" style={{ textAlign: "center", padding: 26, color: "var(--muted)" }}>No orders in this period.</td></tr>}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { AGowns, AGownEdit, AUsers, ASales });