/* Shipping — tab landing view + guided wizard + branded confirmation email */
const { useState: useStateShip, useMemo: useMemoShip } = React;

const CARRIERS = [
  { id: "dhl", name: "DHL Express", eta: "1–2 days" },
  { id: "swisspost", name: "Swiss Post", eta: "2–4 days" },
  { id: "postnl", name: "PostNL", eta: "2–5 days" },
  { id: "royalmail", name: "Royal Mail", eta: "2–4 days" },
];

const PRODUCT_BRAND = {
  THORWallet: { icon: "cardops/assets/thorwallet-appicon.png", name: "THORWallet", btnBg: "linear-gradient(135deg,#00CCFF,#33FF99)", btnInk: "#06241c", header: "#0E1A2B", accent: "#1FD39B" },
  MINE:       { icon: "cardops/assets/mine-appicon.png",       name: "MINE",       btnBg: "#E27259", btnInk: "#fff", header: "#2A2418", accent: "#C94B30" },
};

function shippable() {
  return window.CardOps.ORDERS.filter((o) => o.deliver && o.status === "activated");
}
function reshipable() {
  return window.CardOps.ORDERS.filter((o) => o.type === "Physical" && ["returned", "undeliverable"].includes(o.status));
}

/* ── Confirmation email mockup ───────────────────────────── */
function ShipEmail({ order, carrier, tracking }) {
  const b = PRODUCT_BRAND[order.product];
  const first = order.holderFull.split(" ")[0];
  const car = CARRIERS.find((c) => c.id === carrier);
  return React.createElement("div", { style: { background: "#EEF1F4", borderRadius: 14, padding: 18, border: "1px solid var(--co-border)" } },
    React.createElement("div", { style: { fontSize: 11, color: "var(--co-text-3)", marginBottom: 10, display: "flex", justifyContent: "space-between" } },
      React.createElement("span", null, "To: ", React.createElement("b", { style: { color: "var(--co-text-2)" } }, order.email)),
      React.createElement("span", null, "from ", b.name.toLowerCase(), "@card.", b.name === "MINE" ? "money" : "org")),
    React.createElement("div", { style: { background: "#fff", borderRadius: 10, overflow: "hidden", boxShadow: "0 8px 24px rgba(20,38,66,0.12)", maxWidth: 460, margin: "0 auto" } },
      // brand header
      React.createElement("div", { style: { background: b.header, padding: "22px 26px", display: "flex", alignItems: "center", gap: 12 } },
        React.createElement("img", { src: b.icon, alt: b.name, style: { width: 38, height: 38, borderRadius: 9 } }),
        React.createElement("div", { style: { color: "#fff", fontWeight: 800, fontSize: 17, letterSpacing: "-0.01em" } }, b.name)),
      // body
      React.createElement("div", { style: { padding: "26px 26px 28px", color: "#1a2433" } },
        React.createElement("div", { style: { fontSize: 12, fontWeight: 700, letterSpacing: "0.16em", textTransform: "uppercase", color: b.accent, marginBottom: 12 } }, "Your card is on its way"),
        React.createElement("div", { style: { fontSize: 17, fontWeight: 700, marginBottom: 12 } }, "Hi ", first, ","),
        React.createElement("p", { style: { fontSize: 14, lineHeight: 1.65, margin: "0 0 14px", color: "#42505f" } },
          "Good news - your ", React.createElement("b", { style: { color: "#1a2433" } }, b.name, " premium card"),
          " (physical) has shipped and is heading to you now."),
        React.createElement("p", { style: { fontSize: 14, lineHeight: 1.65, margin: "0 0 18px", color: "#42505f" } },
          "We can't wait for you to put it to use - enjoy every swipe, wherever you are."),
        tracking ? React.createElement("div", { style: { background: "#F4F6FA", borderRadius: 10, padding: "14px 16px", marginBottom: 18 } },
          React.createElement("div", { style: { fontSize: 11.5, color: "#7a8699", marginBottom: 4 } }, car ? car.name : "Carrier", " · estimated ", car ? car.eta : ""),
          React.createElement("div", { style: { fontSize: 15, fontWeight: 700, fontFamily: "var(--co-mono)", letterSpacing: "0.04em" } }, tracking),
          React.createElement("a", { href: "#", onClick: (e) => e.preventDefault(), style: { display: "inline-block", marginTop: 12, background: b.btnBg, color: b.btnInk, fontWeight: 700, fontSize: 13.5, padding: "10px 18px", borderRadius: 9, textDecoration: "none" } }, "Track shipment")) : null,
        React.createElement("p", { style: { fontSize: 14, lineHeight: 1.6, margin: "0 0 4px", color: "#42505f" } }, "- The ", b.name, " Team")),
      React.createElement("div", { style: { borderTop: "1px solid #eef1f4", padding: "14px 26px", fontSize: 11, color: "#9aa6b5" } },
        b.name, " · Swiss-issued Mastercard. You're receiving this because you ordered a ", b.name, " card.")));
}

/* ── Shipping wizard ─────────────────────────────────────── */
const SHIP_STEPS = ["Order", "Destination", "Verify", "Carrier", "Ship", "Notify"];

function ShipStepBar({ step }) {
  return React.createElement("div", { className: "co-steps" },
    SHIP_STEPS.map((label, i) => React.createElement(React.Fragment, { key: label },
      i > 0 && React.createElement("div", { className: "co-step-line" + (i <= step ? " done" : "") }),
      React.createElement("div", { className: "co-step" + (i === step ? " active" : (i < step ? " done" : "")) },
        React.createElement("div", { className: "co-step-dot" }, i < step ? React.createElement(window.Icon, { name: "check", size: 14 }) : (i + 1)),
        React.createElement("div", { className: "co-step-label" }, label)))));
}

function ShippingWizard({ role, preselect, onClose, onShipped, addToast }) {
  const queue = useMemoShip(() => shippable(), []);
  const [step, setStep] = useStateShip(preselect ? 1 : 0);
  const [order, setOrder] = useStateShip(preselect || null);
  const [revealed, setRevealed] = useStateShip(false);
  const [addrOk, setAddrOk] = useStateShip(false);
  const [carrier, setCarrier] = useStateShip("dhl");
  const [service, setService] = useStateShip("tracked");
  const [tracking, setTracking] = useStateShip("");
  const [shipping, setShipping] = useStateShip(false);
  const [emailSent, setEmailSent] = useStateShip(false);
  const [captured, setCaptured] = useStateShip(false);
  const [capturing, setCapturing] = useStateShip(false);
  const [aiV, setAiV] = useStateShip(null);
  const [aiRunningV, setAiRunningV] = useStateShip(false);
  const [aiForceV, setAiForceV] = useStateShip("auto");

  const capture = () => { setCapturing(true); setTimeout(() => { setCapturing(false); setCaptured(true); }, 1300); };
  const runAiV = () => {
    setAiRunningV(true); setAiV(null);
    setTimeout(() => {
      let read, status, conf;
      if (aiForceV === "fail") { read = order.last4.slice(0, 2) + order.last4[3] + order.last4[2]; status = "fail"; conf = 67.4; }
      else { read = order.last4; status = "pass"; conf = 98.3; }
      setAiV({ read, status, conf }); setAiRunningV(false);
    }, 1500);
  };

  const car = CARRIERS.find((c) => c.id === carrier);

  const doShip = () => {
    setShipping(true);
    setTimeout(() => {
      // mutate shared data so queues/funnel reflect the shipment
      order.status = "shipped";
      order.timeline = order.timeline.concat([{ title: "Marked shipped" + (tracking ? " — " + (car ? car.name : "") + " " + tracking : ""), who: (window.CardOps.USERS.find((u) => u.role === role) || {}).name || "you", source: null, time: "Jun 22 · now" }]);
      setShipping(false);
      setStep(5);
    }, 1100);
  };

  const finish = () => { onShipped && onShipped(); onClose(); };
  const sendEmail = () => {
    setEmailSent(true);
    addToast && addToast({ icon: "mail", title: "Confirmation email sent", body: order.holderFull.split(" ")[0] + " was emailed at " + order.email + "." });
  };

  let body, footRight, footLeft;

  if (step === 0) {
    body = React.createElement("div", null,
      React.createElement("h3", { className: "co-wiz-step-title" }, "Select an activated card to ship"),
      React.createElement("p", { className: "co-wiz-step-sub" }, "Physical cards that have cleared activation. Returned and undeliverable cards appear here for re-shipping."),
      queue.length === 0
        ? React.createElement(window.EmptyState, { icon: "truck", title: "Nothing to ship", sub: "No activated physical cards are waiting." })
        : queue.map((o) => React.createElement("div", { key: o.id, className: "co-pick" + (order && order.id === o.id ? " sel" : ""), onClick: () => setOrder(o) },
            React.createElement("div", { className: "co-pick-radio" }),
            React.createElement(window.Tag, { product: o.product }),
            React.createElement("div", { style: { flex: 1, minWidth: 0 } },
              React.createElement("div", { style: { fontWeight: 600, fontSize: 13.5 } }, o.holder, "  ",
                React.createElement("span", { style: { fontFamily: "var(--co-mono)", fontWeight: 400, color: "var(--co-text-3)", fontSize: 12 } }, o.ref)),
              React.createElement("div", { style: { fontSize: 11.5, color: "var(--co-text-3)" } }, "•••• ", o.last4, " · ", window.CardOps.COUNTRIES[o.country])),
            o.status === "activated" ? React.createElement(window.StatusPill, { status: "activated" }) : React.createElement(window.StatusPill, { status: o.status }))));
    footRight = React.createElement(window.Button, { variant: "primary", icon: "arrowright", disabled: !order, onClick: () => setStep(1) }, "Continue");
  }

  else if (step === 1) {
    const addr = revealed ? order.address.full : order.address.masked;
    body = React.createElement("div", null,
      React.createElement("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "flex-start" } },
        React.createElement("div", null,
          React.createElement("h3", { className: "co-wiz-step-title" }, "Confirm the destination"),
          React.createElement("p", { className: "co-wiz-step-sub" }, "Verify the address before you ship. This is the safeguard against undeliverable and returned cards.")),
        React.createElement("button", { className: "co-btn co-btn-ghost co-btn-sm", onClick: () => setRevealed(!revealed) },
          React.createElement(window.Icon, { name: revealed ? "eyeoff" : "eye", size: 15 }), revealed ? "Hide" : "Reveal")),
      React.createElement("div", { className: "co-card", style: { padding: "16px 18px", background: "var(--co-surface-2)", display: "flex", gap: 12, alignItems: "flex-start", marginBottom: 16 } },
        React.createElement(window.Icon, { name: "map", size: 18, style: { color: "var(--co-text-3)", marginTop: 2 } }),
        React.createElement("div", { style: { fontSize: 13.5, lineHeight: 1.7, fontFamily: "var(--co-mono)" } },
          revealed ? order.holderFull : order.holder, React.createElement("br"),
          addr.line, React.createElement("br"), addr.zip, " ", order.address.full.city, ", ", order.address.full.cc)),
      React.createElement("label", { style: { display: "flex", alignItems: "center", gap: 10, cursor: "pointer", fontSize: 13.5, fontWeight: 600 } },
        React.createElement("input", { type: "checkbox", checked: addrOk, onChange: (e) => setAddrOk(e.target.checked), style: { accentColor: "var(--co-primary)", width: 17, height: 17 } }),
        "Address confirmed correct"));
    footLeft = React.createElement(window.Button, { variant: "ghost", icon: "chevleft", onClick: () => setStep(0) }, "Back");
    footRight = React.createElement(window.Button, { variant: "primary", icon: "arrowright", disabled: !addrOk, onClick: () => setStep(2) }, "Continue");
  }

  else if (step === 2) {
    body = React.createElement("div", null,
      React.createElement("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "flex-start" } },
        React.createElement("div", null,
          React.createElement("h3", { className: "co-wiz-step-title" }, "Verify the right card is in the envelope"),
          React.createElement("p", { className: "co-wiz-step-sub" }, "Photograph the packed card. An AI check reads the number and must match the card on record for this order.")),
        React.createElement("div", { className: "co-demo-toggle" },
          React.createElement("span", { style: { fontSize: 11, color: "var(--co-text-3)", fontWeight: 600 } }, "Demo:"),
          React.createElement("div", { className: "co-seg" },
            ["auto", "pass", "fail"].map((m) => React.createElement("button", { key: m, className: aiForceV === m ? "active" : "", onClick: () => { setAiForceV(m); setAiV(null); } }, m[0].toUpperCase() + m.slice(1)))))),
      React.createElement("div", { style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: 22, alignItems: "start", marginTop: 4 } },
        React.createElement("div", null,
          !captured
            ? React.createElement("div", { className: "co-capture" },
                capturing && React.createElement("div", { className: "scan-line" }),
                React.createElement("div", { style: { textAlign: "center", color: "var(--co-text-3)" } },
                  React.createElement(window.Icon, { name: "camera", size: 34 }),
                  React.createElement("div", { style: { fontSize: 13, marginTop: 8 } }, capturing ? "Capturing…" : "Camera ready · card in envelope")))
            : React.createElement("div", { className: "co-sheet" },
                React.createElement("div", { style: { fontSize: 10.5, letterSpacing: "0.16em", textTransform: "uppercase", color: "var(--co-text-3)", marginBottom: 10 } }, "Packed card · ", order.ref),
                React.createElement("div", { className: "co-cardart" + (order.product === "MINE" ? " mine" : ""), style: aiRunningV ? { filter: "blur(2px)" } : null },
                  React.createElement("div", { className: "grad" }),
                  React.createElement("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "flex-start" } },
                    React.createElement("div", { className: "chip" }),
                    React.createElement("div", { className: "brand" }, order.product === "MINE" ? "MINE" : "THORWallet")),
                  React.createElement("div", null,
                    React.createElement("div", { className: "num" }, "•••• •••• •••• " + order.last4),
                    React.createElement("div", { style: { display: "flex", justifyContent: "space-between", marginTop: 10, fontSize: 11, opacity: 0.8, fontFamily: "var(--co-mono)" } },
                      React.createElement("span", null, "VALID THRU 06/29"),
                      React.createElement("span", null, "DEBIT · MASTERCARD"))))),
          React.createElement("div", { style: { display: "flex", gap: 8, marginTop: 12, justifyContent: "center" } },
            !captured
              ? React.createElement(window.Button, { variant: "primary", icon: "camera", disabled: capturing, onClick: capture }, capturing ? "Capturing…" : "Capture photo")
              : React.createElement(window.Button, { variant: "secondary", size: "sm", icon: "rotate", onClick: () => { setCaptured(false); setAiV(null); } }, "Retake"))),
        React.createElement("div", { style: { display: "flex", flexDirection: "column", gap: 14 } },
          React.createElement("div", { className: "co-card", style: { padding: "14px 16px", background: "var(--co-surface-2)" } },
            React.createElement("div", { style: { fontSize: 11, fontWeight: 700, letterSpacing: "0.04em", textTransform: "uppercase", color: "var(--co-text-3)", marginBottom: 6 } }, "On record for this order"),
            React.createElement("div", { style: { display: "flex", alignItems: "center", gap: 8 } },
              React.createElement(window.Tag, { product: order.product }),
              React.createElement("span", { style: { fontFamily: "var(--co-mono)", fontWeight: 700, fontSize: 15 } }, "•••• " + order.last4))),
          !aiV && React.createElement(window.Button, { variant: "primary", icon: "sparkles", disabled: !captured || aiRunningV, onClick: runAiV }, aiRunningV ? "AI reading photo…" : "Run AI card check"),
          aiV && React.createElement("div", { className: "co-ai " + aiV.status },
            React.createElement("div", { className: "co-ai-icon" }, React.createElement(window.Icon, { name: aiV.status === "pass" ? "shieldcheck" : "xcircle", size: 22 })),
            React.createElement("div", { style: { flex: 1 } },
              React.createElement("div", { className: "co-ai-title" }, aiV.status === "pass" ? "Correct card confirmed" : "Wrong card - shipping blocked"),
              React.createElement("div", { style: { fontSize: 12.5, color: "var(--co-text-2)", marginTop: 3 } },
                "Photo read ", React.createElement("b", { style: { fontFamily: "var(--co-mono)" } }, aiV.read), " · on record ", React.createElement("b", { style: { fontFamily: "var(--co-mono)" } }, order.last4)),
              React.createElement("div", { className: "co-conf" }, React.createElement("div", { className: "co-conf-fill", style: { width: aiV.conf + "%", background: aiV.status === "pass" ? "var(--co-green)" : "var(--co-red)" } })),
              React.createElement("div", { style: { fontSize: 11.5, color: "var(--co-text-3)", marginTop: 5 } }, "Confidence ", aiV.conf, "%"),
              aiV.status === "fail" && React.createElement("div", { style: { marginTop: 10 } },
                React.createElement(window.Button, { size: "sm", variant: "danger", icon: "camera", onClick: () => { setCaptured(false); setAiV(null); } }, "Re-pack & retake")))))));
    footLeft = React.createElement(window.Button, { variant: "ghost", icon: "chevleft", onClick: () => setStep(1) }, "Back");
    footRight = React.createElement(window.Button, { variant: "primary", icon: "arrowright", disabled: !aiV || aiV.status !== "pass", onClick: () => setStep(3) }, "Confirm match");
  }

  else if (step === 3) {
    body = React.createElement("div", null,
      React.createElement("h3", { className: "co-wiz-step-title" }, "Pack & assign carrier"),
      React.createElement("p", { className: "co-wiz-step-sub" }, "Confirm the card unit, choose a carrier, and add a tracking number if you have one."),
      React.createElement("div", { className: "co-card", style: { padding: "12px 14px", marginBottom: 16, background: "var(--co-green-bg)", border: "1px solid color-mix(in srgb, var(--co-green) 35%, transparent)", display: "flex", alignItems: "center", gap: 9 } },
        React.createElement(window.Icon, { name: "checkcircle", size: 16, style: { color: "var(--co-green)" } }),
        React.createElement("span", { style: { fontSize: 13 } }, "Packing card ", React.createElement("b", { style: { fontFamily: "var(--co-mono)" } }, "•••• " + order.last4), " — assigned at activation.")),
      React.createElement("div", { style: { fontSize: 12.5, fontWeight: 600, color: "var(--co-text-2)", marginBottom: 8 } }, "Carrier"),
      React.createElement("div", { style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: 9, marginBottom: 18 } },
        CARRIERS.map((c) => React.createElement("div", { key: c.id, className: "co-pick" + (carrier === c.id ? " sel" : ""), style: { marginBottom: 0 }, onClick: () => setCarrier(c.id) },
          React.createElement("div", { className: "co-pick-radio" }),
          React.createElement(window.Icon, { name: "truck", size: 16, style: { color: "var(--co-text-3)" } }),
          React.createElement("div", { style: { flex: 1 } },
            React.createElement("div", { style: { fontWeight: 600, fontSize: 13 } }, c.name),
            React.createElement("div", { style: { fontSize: 11, color: "var(--co-text-3)" } }, "Est. ", c.eta))))),
      React.createElement("div", { className: "co-field" },
        React.createElement("label", null, "Tracking number ", React.createElement("span", { style: { color: "var(--co-text-3)", fontWeight: 400 } }, "· optional")),
        React.createElement("input", { className: "co-input mono", placeholder: "e.g. JD0014600007891234", value: tracking, onChange: (e) => setTracking(e.target.value) }),
        React.createElement("div", { className: "co-help" }, "Leave blank if you don't have one yet — it just won't appear in the email.")));
    footLeft = React.createElement(window.Button, { variant: "ghost", icon: "chevleft", onClick: () => setStep(2) }, "Back");
    footRight = React.createElement(window.Button, { variant: "primary", icon: "arrowright", onClick: () => setStep(4) }, "Continue");
  }

  else if (step === 4) {
    body = React.createElement("div", null,
      React.createElement("h3", { className: "co-wiz-step-title" }, "Confirm & ship"),
      React.createElement("p", { className: "co-wiz-step-sub" }, "This marks the card shipped, moves the stock unit to ‘shipped’, and logs it to the audit trail."),
      React.createElement("div", { className: "co-card", style: { padding: 18, background: "var(--co-surface-2)" } },
        React.createElement(window.DL, { items: [
          ["Cardholder", order.holder],
          ["Order", order.ref + " · " + order.product + " " + order.type],
          ["Card", "•••• " + order.last4],
          ["Carrier", (car ? car.name : "") + " · " + (service === "express" ? "Express" : "Tracked")],
          ["Tracking", tracking ? React.createElement("span", { style: { fontFamily: "var(--co-mono)" } }, tracking) : React.createElement("span", { style: { color: "var(--co-text-3)" } }, "none — added later")],
        ] })));
    footLeft = React.createElement(window.Button, { variant: "ghost", icon: "chevleft", onClick: () => setStep(3) }, "Back");
    footRight = React.createElement(window.Button, { variant: "primary", icon: "truck", disabled: shipping, onClick: doShip }, shipping ? "Shipping…" : "Confirm & ship");
  }

  else if (step === 5) {
    body = React.createElement("div", null,
      React.createElement("div", { className: "co-success", style: { paddingTop: 8, paddingBottom: 14 } },
        React.createElement("div", { className: "co-success-badge" }, React.createElement(window.Icon, { name: "truck" })),
        React.createElement("div", null,
          React.createElement("div", { style: { fontSize: 19, fontWeight: 800, letterSpacing: "-0.02em" } }, "Card shipped"),
          React.createElement("div", { style: { fontSize: 13, color: "var(--co-text-2)", marginTop: 5 } },
            order.holder, "'s ", order.product, " card is on its way", tracking ? " · " + tracking : "", "."))),
      React.createElement("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 10 } },
        React.createElement("div", { className: "co-section-title", style: { margin: 0 } }, "Confirmation email"),
        React.createElement("span", { style: { fontSize: 11.5, color: emailSent ? "var(--co-green)" : "var(--co-text-3)", fontWeight: 600, display: "inline-flex", alignItems: "center", gap: 5 } },
          emailSent && React.createElement(window.Icon, { name: "check", size: 14 }), emailSent ? "Sent" : "Ready to send")),
      React.createElement(ShipEmail, { order, carrier, tracking }));
    footLeft = React.createElement(window.Button, { variant: "ghost", onClick: finish }, "Skip");
    footRight = emailSent
      ? React.createElement(window.Button, { variant: "primary", icon: "check", onClick: finish }, "Done")
      : React.createElement(window.Button, { variant: "primary", icon: "send", onClick: sendEmail }, "Send confirmation email");
  }

  return React.createElement(window.Modal, { onClose, width: 900, fsTablet: true },
    React.createElement("div", { className: "co-wiz-head" },
      React.createElement("div", null,
        React.createElement("div", { className: "co-wiz-title" }, "Ship card"),
        React.createElement("div", { style: { fontSize: 12, color: "var(--co-text-3)" } }, "Activated · physical fulfilment")),
      React.createElement("button", { className: "co-icon-btn", onClick: onClose }, React.createElement(window.Icon, { name: "x" }))),
    React.createElement("div", { style: { padding: "16px 24px", borderBottom: "1px solid var(--co-border)" } },
      React.createElement(ShipStepBar, { step })),
    React.createElement("div", { className: "co-wiz-body" }, body),
    React.createElement("div", { className: "co-wiz-foot" },
      React.createElement("div", null, footLeft),
      React.createElement("div", { style: { display: "flex", gap: 9 } }, footRight)));
}

/* ── Shipping landing view ───────────────────────────────── */
function ShippingView({ role, onStartShipping, loading }) {
  const queue = shippable();
  const tiles = [
    { label: "Awaiting shipment", value: queue.length, tone: "amber", icon: "package" },
    { label: "Shipped last 7 days", value: 23, tone: "blue", icon: "truck" },
    { label: "Virtual + physical active", value: queue.length, tone: "green", icon: "checkcircle" },
  ];
  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" }, "Shipping"),
        React.createElement("p", { className: "co-page-sub" }, queue.length, " activated cards awaiting shipment")),
      React.createElement(window.GatedButton, { perm: "mark_shipped", role, variant: "primary", icon: "truck", onClick: () => onStartShipping(null) }, "Ship card")),

    React.createElement("div", { style: { display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 14, marginBottom: 18 } },
      tiles.map((t) => React.createElement("div", { key: t.label, className: "co-kpi", style: { cursor: "default", minHeight: 96 } },
        React.createElement("div", { className: "co-kpi-top" },
          React.createElement("div", { className: "co-kpi-label" }, t.label),
          React.createElement("div", { className: "co-kpi-icon", style: { background: "var(--co-" + t.tone + "-bg)", color: "var(--co-" + t.tone + ")" } }, React.createElement(window.Icon, { name: t.icon }))),
        React.createElement("div", { className: "co-kpi-value" }, t.value)))),

    React.createElement("div", { className: "co-card" },
      React.createElement("div", { className: "co-card-head" },
        React.createElement("div", { className: "co-card-title" }, "Awaiting shipment"),
        React.createElement("div", { style: { fontSize: 12, color: "var(--co-text-3)" } }, "Activated physical cards · oldest first")),
      loading
        ? React.createElement(window.SkeletonRows, { rows: 4, cols: 4 })
        : queue.length === 0
          ? React.createElement(window.EmptyState, { icon: "truck", title: "Queue clear", sub: "No activated cards are waiting to ship." })
          : queue.sort((a, b) => b.days - a.days).map((o) => React.createElement("div", { key: o.id, className: "co-att-row" },
              React.createElement(window.Tag, { product: o.product }),
              React.createElement("div", { className: "co-att-main" },
                React.createElement("div", { className: "co-att-title" }, o.holder, "  ",
                  React.createElement("span", { style: { fontFamily: "var(--co-mono)", fontWeight: 400, color: "var(--co-text-3)", fontSize: 12 } }, o.ref)),
                React.createElement("div", { className: "co-att-meta" }, "•••• ", o.last4, " · ", window.CardOps.COUNTRIES[o.country])),
              o.status === "activated"
                ? React.createElement("div", { style: { display: "flex", gap: 6 } },
                    React.createElement("span", { className: "co-pill green" }, React.createElement("span", { className: "dot" }), "Virtual and physical card active"),
                    React.createElement("span", { className: "co-pill green" }, React.createElement("span", { className: "dot" }), "Shipping paid"))
                : React.createElement(window.StatusPill, { status: o.status }),
              React.createElement(window.GatedButton, { perm: "mark_shipped", role, variant: "primary", size: "sm", icon: "truck", onClick: () => onStartShipping(o) }, "Ship")))));
}

Object.assign(window, { ShippingView, ShippingWizard });