/* ============================================================
   AfricaMart Admin — Overview module
   ============================================================ */
function OverviewModule({ nav, toast }) {
  const { KPICard, Card, CardHeader, Badge, Btn, SectionHeader, AlertBanner } = window.ModernTilesDesignSystem_50dd07;
  const K = window.ADM.KPIS, ADM = window.ADM, money = ADM.money;
  const wk = [...ADM.WEEKS].reverse();

  return React.createElement("div", null,
    React.createElement(SectionHeader, { title: "Overview", subtitle: "Marketplace health · " + new Date().toLocaleDateString("en-US", { weekday: "long", month: "long", day: "numeric", year: "numeric" }) },
      React.createElement(Btn, { variant: "muted", size: "md", onClick: () => toast("Report exported to CSV") }, React.createElement(AdmIcon, { name: "download", size: 14 }), "Export"),
      React.createElement(Btn, { variant: "primary", size: "md", onClick: () => nav("analytics") }, React.createElement(AdmIcon, { name: "bar-chart", size: 14 }), "Full analytics")),

    // KPI row
    React.createElement("div", { style: { display: "grid", gridTemplateColumns: "repeat(4,minmax(0,1fr))", gap: 14, marginBottom: 14 } },
      React.createElement(KPICard, { label: "GMV this month", value: "$" + K.gmvMonth + "M", delta: K.gmvDelta + "%", deltaPos: true, accent: true }),
      React.createElement(KPICard, { label: "Active buyers", value: K.activeBuyers.toLocaleString(), delta: K.buyersDelta + "%", deltaPos: true }),
      React.createElement(KPICard, { label: "Active suppliers", value: K.activeSuppliers.toLocaleString(), delta: K.suppliersDelta + "%", deltaPos: true }),
      React.createElement(KPICard, { label: "Open RFQs", value: K.openRfqs, delta: K.rfqDelta + "%", deltaPos: true })),

    React.createElement("div", { style: { display: "grid", gridTemplateColumns: "repeat(4,minmax(0,1fr))", gap: 14, marginBottom: 18 } },
      React.createElement(MiniStat, { label: "Take rate", value: K.takeRate + "%", icon: "dollar-sign", hue: "#1A6B45" }),
      React.createElement(MiniStat, { label: "Dispute rate", value: K.disputeRate + "%", icon: "scale", hue: "#A05C08" }),
      React.createElement(MiniStat, { label: "Avg. order value", value: money(K.avgOrder, true), icon: "shopping-cart", hue: "#447892" }),
      React.createElement(MiniStat, { label: "Payouts pending", value: money(K.payoutsPending, true), icon: "credit-card", hue: "#C5622C" })),

    // Charts row
    React.createElement("div", { style: { display: "grid", gridTemplateColumns: "1.6fr 1fr", gap: 14, marginBottom: 18 } },
      React.createElement(Card, null,
        React.createElement(CardHeader, { title: "Gross merchandise value", action: React.createElement(Badge, { status: "success", label: "+14.2% vs last month" }) }),
        React.createElement("div", { style: { padding: "16px 18px 6px" } },
          React.createElement(LineChart, { data: [...ADM.GMV_SERIES], labels: wk, color: "#C5622C", fill: "rgba(197,98,44,.12)", height: 168 }),
          React.createElement("div", { style: { display: "flex", justifyContent: "space-between", fontSize: 11, color: "#A09288", padding: "0 4px" } },
            React.createElement("span", null, "12 weeks ago"),
            React.createElement("span", { style: { fontWeight: 600, color: "#1A1614" } }, "This week: $2.31M")))),
      React.createElement(Card, null,
        React.createElement(CardHeader, { title: "GMV by category" }),
        React.createElement("div", { style: { padding: "18px", display: "flex", alignItems: "center", gap: 16 } },
          React.createElement(Donut, { segments: ADM.GMV_BY_CAT.map(c => ({ value: c.value, hue: c.hue })), center: { value: "$16.5M", label: "Quarter" } }),
          React.createElement("div", { style: { flex: 1, display: "flex", flexDirection: "column", gap: 7 } },
            ADM.GMV_BY_CAT.map(c => React.createElement("div", { key: c.cat, style: { display: "flex", alignItems: "center", gap: 8, fontSize: 12 } },
              React.createElement("span", { style: { width: 9, height: 9, borderRadius: 2, background: c.hue, flexShrink: 0 } }),
              React.createElement("span", { style: { flex: 1, color: "#524940" } }, c.cat),
              React.createElement("span", { style: { fontWeight: 600, color: "#1A1614", fontFamily: "'JetBrains Mono',monospace", fontSize: 11.5 } }, "$" + c.value + "M"))))))),

    // Alerts + activity
    React.createElement("div", { style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 } },
      React.createElement("div", { style: { display: "flex", flexDirection: "column", gap: 12 } },
        React.createElement("div", { style: { fontFamily: "'Outfit',sans-serif", fontSize: 15, fontWeight: 600, color: "#1A1614" } }, "Needs attention"),
        React.createElement(AlertBanner, { type: "danger", title: "Fraud signal on order AM-48130", message: "Repeated non-delivery claims from buyer Kano Mills. Account flagged high-risk — review recommended." }),
        React.createElement(AlertBanner, { type: "warning", title: "2 listings flagged by buyers", message: "Cement clearance lot and PET preforms reported for spec/cert mismatch. Pending moderation." }),
        React.createElement(AlertBanner, { type: "info", title: "3 accounts awaiting KYC", message: "Cairo Build Co., Abidjan Trading and Accra Machine Tools have submitted documents for verification." }),
        React.createElement("div", { style: { display: "flex", gap: 8 } },
          React.createElement(Btn, { variant: "outline", size: "sm", onClick: () => nav("disputes") }, "Review disputes"),
          React.createElement(Btn, { variant: "outline", size: "sm", onClick: () => nav("verification") }, "Verification queue"))),
      React.createElement(Card, null,
        React.createElement(CardHeader, { title: "Live activity", action: React.createElement(Btn, { variant: "ghost", size: "sm", onClick: () => nav("activity") }, "View all") }),
        React.createElement("div", { style: { padding: "6px 18px 14px" } },
          window.ADM.ACTIVITY.slice(0, 7).map(a => React.createElement(ActivityRow, { key: a.id, a }))))));
}

function MiniStat({ label, value, icon, hue }) {
  return React.createElement("div", { style: { background: "#fff", borderRadius: 12, border: "1px solid #E4DED6", boxShadow: "0 1px 4px rgba(26,22,20,.05)", padding: "14px 16px", display: "flex", alignItems: "center", gap: 12 } },
    React.createElement("div", { style: { width: 36, height: 36, borderRadius: 9, background: hue + "1a", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 } },
      React.createElement(AdmIcon, { name: icon, size: 17, color: hue, strokeWidth: 1.9 })),
    React.createElement("div", null,
      React.createElement("div", { style: { fontFamily: "'Outfit',sans-serif", fontSize: 19, fontWeight: 700, color: "#1A1614", lineHeight: 1 } }, value),
      React.createElement("div", { style: { fontSize: 11, color: "#857870", marginTop: 3 } }, label)));
}

const ACTIVITY_ICON = { alert: ["alert-triangle", "#B91C1C"], rfq: ["file-text", "#447892"], moderation: ["check-circle", "#1A6B45"], order: ["shopping-cart", "#447892"], control: ["ban", "#A05C08"], payment: ["credit-card", "#1A6B45"], dispute: ["scale", "#B91C1C"], verification: ["user-check", "#1A6B45"], catalog: ["package", "#6B6158"] };
function ActivityRow({ a }) {
  const [ic, color] = ACTIVITY_ICON[a.type] || ["activity", "#6B6158"];
  return React.createElement("div", { style: { display: "flex", gap: 11, padding: "9px 0", borderBottom: "1px solid #F7F4F0", alignItems: "flex-start" } },
    React.createElement("div", { style: { width: 28, height: 28, borderRadius: 7, background: color + "14", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0, marginTop: 1 } },
      React.createElement(AdmIcon, { name: ic, size: 14, color, strokeWidth: 1.9 })),
    React.createElement("div", { style: { flex: 1, minWidth: 0 } },
      React.createElement("div", { style: { fontSize: 12.5, color: "#2A2420", lineHeight: 1.4 } }, a.action),
      React.createElement("div", { style: { fontSize: 11, color: "#A09288", marginTop: 2 } }, a.actor + " · " + a.time)));
}

Object.assign(window, { OverviewModule, MiniStat, ActivityRow });
