/* Task 2 — Overview */
const { useState: useStateOv } = React;

function KpiCard({ label, value, icon, tone, delta, deltaDir, onClick }) {
  const toneColor = { blue: "var(--co-blue)", amber: "var(--co-amber)", red: "var(--co-red)", green: "var(--co-green)", grey: "var(--co-grey)" }[tone];
  const toneBg = { blue: "var(--co-blue-bg)", amber: "var(--co-amber-bg)", red: "var(--co-red-bg)", green: "var(--co-green-bg)", grey: "var(--co-grey-bg)" }[tone];
  return React.createElement("button", { className: "co-kpi", onClick, style: { font: "inherit", textAlign: "left" } },
    React.createElement("div", { className: "co-kpi-top" },
      React.createElement("div", { className: "co-kpi-label" }, label),
      React.createElement("div", { className: "co-kpi-icon", style: { background: toneBg, color: toneColor } },
        React.createElement(window.Icon, { name: icon }))),
    React.createElement("div", { className: "co-kpi-value" }, value),
    delta && React.createElement("div", { className: "co-kpi-delta", style: { color: deltaDir === "down" ? "var(--co-text-3)" : toneColor } },
      deltaDir && React.createElement(window.Icon, { name: deltaDir === "down" ? "arrowdown" : "arrowup", size: 13 }), delta));
}

function Funnel({ steps }) {
  const max = steps[0].n;
  return React.createElement("div", { className: "co-funnel" },
    steps.map((s, i) => React.createElement(React.Fragment, { key: s.key },
      React.createElement("div", { className: "co-funnel-step" },
        React.createElement("div", { className: "lbl" }, s.label),
        React.createElement("div", { className: "num" }, s.n),
        React.createElement("div", { className: "drop" }, i === 0 ? "entering pipeline" : Math.round((s.n / max) * 100) + "% of new"),
        React.createElement("div", { style: { height: 4, borderRadius: 4, background: "var(--co-surface-3)", overflow: "hidden", marginTop: 4 } },
          React.createElement("div", { style: { height: "100%", width: (s.n / max * 100) + "%", background: "var(--co-primary)", borderRadius: 4 } }))),
      i < steps.length - 1 && React.createElement("div", { className: "co-funnel-arrow" }, React.createElement(window.Icon, { name: "chevright", size: 22 })))));
}

function TaskPipeline({ onNav }) {
  const O = window.CardOps.ORDERS;
  const acts = O.filter((o) => ["fee_paid", "activating"].includes(o.status)).length;
  const ships = O.filter((o) => o.deliver && o.status === "activated").length;
  const tile = (label, n, icon, tone, cta, go) => React.createElement("button", { className: "co-todo-tile", onClick: go, style: { font: "inherit", textAlign: "left" } },
    React.createElement("div", { className: "co-todo-top" },
      React.createElement("div", { className: "co-todo-label" }, label),
      React.createElement("div", { className: "co-todo-icon", style: { background: "var(--co-" + tone + "-bg)", color: "var(--co-" + tone + ")" } }, React.createElement(window.Icon, { name: icon, size: 18 }))),
    React.createElement("div", { className: "co-todo-num" }, n),
    React.createElement("div", { className: "co-todo-cta", style: { color: "var(--co-" + tone + ")" } }, cta, React.createElement(window.Icon, { name: "arrowright", size: 15 })));
  return React.createElement("div", { className: "co-todo" },
    React.createElement("div", { className: "co-todo-eyebrow" }, "Main queue · your tasks"),
    React.createElement("div", { className: "co-todo-grid" },
      tile("Cards to activate", acts, "activate", "green", "Activate now", () => onNav("activation")),
      React.createElement("div", { className: "co-todo-arrow" }, React.createElement(window.Icon, { name: "chevright", size: 24 })),
      tile("Cards to ship", ships, "truck", "blue", "Ship now", () => onNav("shipping"))));
}

function Overview({ onOpenOrder, onNav, loading, role }) {
  const m = window.CardOps.metrics;

  if (loading) {
    return React.createElement("div", { className: "co-page" },
      React.createElement("div", { className: "co-kpi-grid", style: { marginBottom: 24 } },
        Array.from({ length: 6 }).map((_, i) => React.createElement("div", { key: i, className: "co-kpi" },
          React.createElement(window.Skel, { w: 90, h: 12 }), React.createElement(window.Skel, { w: 70, h: 30, style: { marginTop: 8 } })))),
      React.createElement("div", { className: "co-card", style: { padding: 20, marginBottom: 16 } }, React.createElement(window.Skel, { h: 90 })),
      React.createElement("div", { className: "co-card" }, React.createElement(window.SkeletonRows, { rows: 5, cols: 3 })));
  }

  const isFF = role === "fulfillment";
  return React.createElement("div", { className: "co-page" },
    React.createElement("div", { className: "co-page-head" },
      React.createElement("div", null,
        React.createElement("h1", { className: "co-page-title" }, isFF ? "Your tasks" : "Overview"),
        React.createElement("p", { className: "co-page-sub" }, isFF ? "What needs doing right now" : "Premium card lifecycle at a glance · updated just now"))),

    React.createElement(TaskPipeline, { onNav }),

    !isFF && React.createElement("div", { className: "co-kpi-grid", style: { marginBottom: 22, gridTemplateColumns: "repeat(5, 1fr)" } },
      React.createElement(KpiCard, { label: "Shipped last 7 days", value: m.shipped7d, icon: "truck", tone: "blue", delta: "+5 vs prior", deltaDir: "up", onClick: () => onNav("shipping") }),
      React.createElement(KpiCard, { label: "Shipped last 30 days", value: m.shipped30d, icon: "truck", tone: "blue", delta: "+18 vs prior", deltaDir: "up", onClick: () => onNav("shipping") }),
      React.createElement(KpiCard, { key: "av", label: "Active premium virtual cards", value: m.activeVirtual.toLocaleString(), icon: "card", tone: "green", delta: "+42 this week", deltaDir: "up", onClick: () => onNav("orders") }),
      React.createElement(KpiCard, { key: "ap", label: "Active premium physical cards", value: m.activePhysical.toLocaleString(), icon: "card", tone: "green", delta: "+27 this week", deltaDir: "up", onClick: () => onNav("orders") }),
      React.createElement(KpiCard, { key: "ren", label: "Yearly payment due in 30d", value: m.renewals30, icon: "refresh", tone: "red", delta: "4 in <7d", onClick: () => onNav("orders", { status: "expiring" }) })),

    !isFF && React.createElement("div", { className: "co-card", style: { marginBottom: 16 } },
      React.createElement("div", { className: "co-card-head" },
        React.createElement("div", { className: "co-card-title" }, "Order pipeline · last 30 days"),
        React.createElement(window.Button, { variant: "ghost", size: "sm", onClick: () => onNav("orders") }, "View orders")),
      React.createElement("div", { className: "co-card-pad" }, React.createElement(Funnel, { steps: m.funnel }))));
}

window.Overview = Overview;