/* Task 5 — Activation wizard (guided modal) */
const { useState: useStateWiz, useMemo: useMemoWiz, useEffect: useEffectWiz } = React;

const WIZ_STEPS = ["Order", "Assign card", "Capture", "Verify", "Activate", "Live", "Handling"];

function StepBar({ step, virtualOnly }) {
  const steps = WIZ_STEPS;
  return React.createElement("div", { className: "co-steps" },
    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 MockCard({ unit, product, blur }) {
  return React.createElement("div", { className: "co-cardart" + (product === "MINE" ? " mine" : ""), style: blur ? { filter: "blur(3px)" } : 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" }, product === "MINE" ? "MINE" : "THORWallet")),
    React.createElement("div", null,
      React.createElement("div", { className: "num" }, unit ? unit.full : "•••• •••• •••• ••••"),
      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"))));
}

function ActivationWizard({ role, preselect, aiForce, setAiForce, onClose, onComplete, addToast }) {
  const orders = useMemoWiz(() => window.CardOps.ORDERS.filter((o) => ["fee_paid", "activating"].includes(o.status)), []);
  const stock = useMemoWiz(() => window.CardOps.INVENTORY.filter((c) => c.status === "in_stock"), []);

  const [step, setStep] = useStateWiz(preselect ? 1 : 0);
  const [order, setOrder] = useStateWiz(preselect || null);
  const [cardInput, setCardInput] = useStateWiz("");
  const [unit, setUnit] = useStateWiz(null);
  const [cardErr, setCardErr] = useStateWiz("");
  const [captured, setCaptured] = useStateWiz(false);
  const [capturing, setCapturing] = useStateWiz(false);
  const [typed, setTyped] = useStateWiz("");
  const [ai, setAi] = useStateWiz(null); // {status, conf, read}
  const [aiRunning, setAiRunning] = useStateWiz(false);
  const [activating, setActivating] = useStateWiz(false);
  const [dispo, setDispo] = useStateWiz(null);
  const [vaultRef, setVaultRef] = useStateWiz("Safe A · shelf 3");
  const [vaultPhoto, setVaultPhoto] = useStateWiz(false);
  const [vaultCapturing, setVaultCapturing] = useStateWiz(false);
  const [vaultBatch, setVaultBatch] = useStateWiz(true);
  const captureVault = () => { setVaultCapturing(true); setTimeout(() => { setVaultCapturing(false); setVaultPhoto(true); }, 1300); };
  const virtualOnly = order && !order.deliver;

  const norm = (s) => s.replace(/\s+/g, "");

  const matchCard = () => {
    setCardErr("");
    const v = cardInput.replace(/\D/g, "");
    if (v.length !== 4) { setCardErr("Enter the 4 last digits of the card."); return; }
    const found = stock.find((c) => c.last4 === v);
    if (!found) { setCardErr("No in-stock card ends with those 4 digits. Check the card or scan again."); return; }
    setUnit(found);
    setTyped(v);
    setStep(2);
  };
  const scan = () => {
    const pick = stock[0];
    setCardInput(pick.last4);
    setCardErr("");
  };

  const capture = () => {
    setCapturing(true);
    setTimeout(() => { setCapturing(false); setCaptured(true); }, 1400);
  };

  const runAi = () => {
    setAiRunning(true); setAi(null);
    setTimeout(() => {
      let read, status, conf;
      if (aiForce === "pass") { read = typed; status = "pass"; conf = 98.6; }
      else if (aiForce === "fail") { read = typed.slice(0, 2) + typed[3] + typed[2]; status = "fail"; conf = 71.3; }
      else { // auto: compare typed vs the assigned unit's true last4
        read = unit.last4;
        status = typed === unit.last4 ? "pass" : "fail";
        conf = status === "pass" ? 97.8 : 64.2;
      }
      setAi({ read, status, conf });
      setAiRunning(false);
    }, 1500);
  };

  const activate = () => {
    setActivating(true);
    setTimeout(() => {
      setActivating(false);
      setStep(5);
    }, 1300);
  };

  const finish = () => {
    const choice = dispo || "vault";
    const who = (window.CardOps.USERS.find((u) => u.role === role) || {}).name || "you";
    const stamp = (title) => { order.timeline = order.timeline.concat([{ title, who, source: null, time: "Jun 22 · now" }]); };
    if (choice === "vault") { order.deliver = false; stamp("Physical card vaulted — proof photo attached"); }
    else { order.deliver = true; stamp("Physical card sent for shipment"); }
    onComplete && onComplete({ order, unit, typed, ai, dispo: choice });
    addToast && addToast(choice === "vault"
      ? { icon: "vault", title: "Stored in vault", body: order.holder + " · physical card stored in the safe — logged." }
      : { icon: "truck", title: "Sent for shipment", body: order.holder + " · " + order.ref + " — physical card queued in Shipping." });
    onClose();
  };

  // STEP CONTENT ----------------------------------------------------
  let body, footRight, footLeft, canNext;

  if (step === 0) {
    body = React.createElement("div", null,
      React.createElement("h3", { className: "co-wiz-step-title" }, "Select the paid premium order"),
      React.createElement("p", { className: "co-wiz-step-sub" }, "Only orders with the yearly fee paid and awaiting activation are shown."),
      orders.length === 0
        ? React.createElement(window.EmptyState, { icon: "inbox", title: "No orders awaiting activation" })
        : orders.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.type, " · ", window.CardOps.COUNTRIES[o.country])),
            React.createElement(window.Fee, { state: o.yearly, amount: o.yearlyAmt }))));
    canNext = !!order;
    footRight = React.createElement(window.Button, { variant: "primary", icon: "arrowright", disabled: !canNext, onClick: () => setStep(1) }, "Continue");
  }

  else if (step === 1) {
    body = React.createElement("div", null,
      React.createElement("h3", { className: "co-wiz-step-title" }, "Assign a card from stock"),
      React.createElement("p", { className: "co-wiz-step-sub" }, "Enter the card's last 4 digits. This assigns the matching stock unit and decrements inventory."),
      React.createElement("div", { style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: 22, alignItems: "start" } },
        React.createElement("div", { className: "co-field" },
          React.createElement("label", null, "Last 4 digits"),
          React.createElement("div", { style: { display: "flex", gap: 8 } },
            React.createElement("input", { className: "co-input big mono" + (cardErr ? " err" : ""), maxLength: 4, placeholder: "0000", value: cardInput, onChange: (e) => { setCardInput(e.target.value.replace(/\D/g, "").slice(0, 4)); setUnit(null); }, style: { textAlign: "center" } }),
            React.createElement("button", { className: "co-btn co-btn-secondary", onClick: scan, title: "Simulate scan" }, React.createElement(window.Icon, { name: "scan" }))),
          cardErr ? React.createElement("div", { className: "co-help co-field-err" }, cardErr) : React.createElement("div", { className: "co-help" }, stock.length + " cards in stock · scan auto-fills the next available unit"),
          unit && React.createElement("div", { className: "co-card", style: { marginTop: 14, padding: "12px 14px", background: "var(--co-green-bg)", border: "1px solid color-mix(in srgb, var(--co-green) 35%, transparent)" } },
            React.createElement("div", { style: { display: "flex", alignItems: "center", gap: 8, color: "var(--co-green)", fontWeight: 600, fontSize: 13 } },
              React.createElement(window.Icon, { name: "checkcircle", size: 16 }), "Stock unit ", unit.id.toUpperCase(), " · •••• ", unit.last4),
            React.createElement("div", { style: { fontSize: 12, color: "var(--co-text-2)", marginTop: 4 } }, "Inventory will decrement on assignment."))),
        React.createElement(MockCard, { unit: null, product: order && order.product })));
    footRight = React.createElement(window.Button, { variant: "primary", icon: "arrowright", onClick: matchCard }, "Assign & continue");
  }

  else if (step === 2) {
    body = React.createElement("div", null,
      React.createElement("h3", { className: "co-wiz-step-title" }, "Capture the physical card"),
      React.createElement("p", { className: "co-wiz-step-sub" }, "Glue the card to the order sheet, then take a clear photo. The number must be legible for the AI check."),
      React.createElement("div", { style: { maxWidth: 460, margin: "0 auto" } },
        !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 on order sheet")))
          : React.createElement("div", { className: "co-sheet" },
              React.createElement("div", { className: "co-sheet-pin", style: { left: 16 } }),
              React.createElement("div", { className: "co-sheet-pin", style: { right: 16 } }),
              React.createElement("div", { style: { fontSize: 10.5, letterSpacing: "0.16em", textTransform: "uppercase", color: "var(--co-text-3)", marginBottom: 10 } }, "Order sheet · ", order.ref),
              React.createElement(MockCard, { unit, product: order.product })),
        React.createElement("div", { style: { display: "flex", gap: 8, marginTop: 14, 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", icon: "rotate", onClick: () => setCaptured(false) }, "Retake"))));
    footRight = React.createElement(window.Button, { variant: "primary", icon: "arrowright", disabled: !captured, onClick: () => setStep(3) }, "Continue to verify");
  }

  else if (step === 3) {
    body = React.createElement("div", null,
      React.createElement("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "flex-start", gap: 12 } },
        React.createElement("div", null,
          React.createElement("h3", { className: "co-wiz-step-title" }, "Verify the photo"),
          React.createElement("p", { className: "co-wiz-step-sub" }, "An AI check reads the number from the photo and must match the last 4 you entered at assignment.")),
        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((mm) => React.createElement("button", { key: mm, className: aiForce === mm ? "active" : "", onClick: () => { setAiForce(mm); setAi(null); } }, mm[0].toUpperCase() + mm.slice(1)))))),
      React.createElement("div", { style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: 22, alignItems: "start", marginTop: 4 } },
        React.createElement("div", null,
          React.createElement("div", { className: "co-sheet" },
            React.createElement(MockCard, { unit, product: order.product, blur: aiRunning })),
          React.createElement("div", { style: { fontSize: 11.5, color: "var(--co-text-3)", marginTop: 8, textAlign: "center" } }, "Captured photo · ", order.ref)),
        React.createElement("div", { style: { display: "flex", flexDirection: "column", gap: 14 } },
          React.createElement("div", { className: "co-field" },
            React.createElement("label", null, "Last 4 entered at assignment"),
            React.createElement("div", { className: "co-input big mono", style: { textAlign: "center", display: "flex", alignItems: "center", justifyContent: "center", letterSpacing: "0.3em" } }, typed || "····")),
          !ai && React.createElement(window.Button, { variant: "primary", icon: "sparkles", disabled: aiRunning, onClick: runAi }, aiRunning ? "AI reading photo…" : "Run AI photo check"),
          ai && React.createElement("div", { className: "co-ai " + ai.status },
            React.createElement("div", { className: "co-ai-icon" }, React.createElement(window.Icon, { name: ai.status === "pass" ? "shieldcheck" : "xcircle", size: 22 })),
            React.createElement("div", { style: { flex: 1 } },
              React.createElement("div", { className: "co-ai-title" }, ai.status === "pass" ? "Match confirmed" : "Mismatch — activation blocked"),
              React.createElement("div", { style: { fontSize: 12.5, color: "var(--co-text-2)", marginTop: 3 } },
                "Entered ", React.createElement("b", { style: { fontFamily: "var(--co-mono)" } }, typed), " · photo read ", React.createElement("b", { style: { fontFamily: "var(--co-mono)" } }, ai.read)),
              React.createElement("div", { className: "co-conf" }, React.createElement("div", { className: "co-conf-fill", style: { width: ai.conf + "%", background: ai.status === "pass" ? "var(--co-green)" : "var(--co-red)" } })),
              React.createElement("div", { style: { fontSize: 11.5, color: "var(--co-text-3)", marginTop: 5 } }, "Confidence ", ai.conf, "%"),
              ai.status === "fail" && React.createElement("div", { style: { marginTop: 10 } },
                React.createElement(window.Button, { size: "sm", variant: "danger", icon: "camera", onClick: () => { setStep(2); setCaptured(false); setAi(null); } }, "Force retake")))))));
    footRight = React.createElement(window.Button, { variant: "primary", icon: "arrowright", disabled: !ai || ai.status !== "pass", onClick: () => setStep(4) }, "Confirm match");
  }

  else if (step === 4) {
    body = React.createElement("div", null,
      React.createElement("h3", { className: "co-wiz-step-title" }, "Confirm and activate"),
      React.createElement("p", { className: "co-wiz-step-sub" }, "This triggers the Unblock + activate call for both the virtual and physical card. It cannot be undone from here."),
      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.type],
          ["Assigned card", unit.id.toUpperCase() + " · •••• " + unit.last4],
          ["AI verification", React.createElement("span", { style: { color: "var(--co-green)", fontWeight: 600 } }, "Passed · " + (ai ? ai.conf : "") + "%")],
        ] })),
      React.createElement("div", { className: "co-banner amber", style: { marginTop: 16, marginBottom: 0 } },
        React.createElement(window.Icon, { name: "lock" }),
        React.createElement("div", null, "Activation is logged to the immutable audit trail against ", React.createElement("b", null, window.CardOps.USERS.find(u => u.role === role) ? window.CardOps.USERS.find(u => u.role === role).name : "you"), ".")));
    footRight = React.createElement(window.Button, { variant: "primary", icon: "checkcircle", disabled: activating, onClick: activate }, activating ? "Activating…" : "Confirm & activate");
  }

  else if (step === 5) {
    body = React.createElement("div", { className: "co-success" },
      React.createElement("div", { className: "co-success-badge" }, React.createElement(window.Icon, { name: "check" })),
      React.createElement("div", null,
        React.createElement("div", { style: { fontSize: 20, fontWeight: 800, letterSpacing: "-0.02em" } }, "Virtual + physical now live"),
        React.createElement("div", { style: { fontSize: 13.5, color: "var(--co-text-2)", marginTop: 6, maxWidth: 400 } },
          order.holder, "'s ", order.product, " card (", unit.id.toUpperCase(), " · •••• ", unit.last4, ") is activated. Next, choose what happens to the physical card.")));
    footRight = React.createElement(window.Button, { variant: "primary", icon: "arrowright", onClick: () => setStep(6) }, "Continue");
  }

  else if (step === 6) {
    const choice = dispo || "vault";
    const others = window.CardOps.ORDERS.filter((x) => !x.deliver && x.id !== order.id).length;
    body = React.createElement("div", null,
      React.createElement("h3", { className: "co-wiz-step-title" }, "Physical card handling"),
      React.createElement("p", { className: "co-wiz-step-sub" }, "Send the physical card for shipment now, or store it in the vault — most cards wait in the safe for a few days first."),
      React.createElement("div", { className: "co-dispo" },
        React.createElement("div", { className: "co-dispo-opt" + (choice === "ship" ? " sel" : ""), onClick: () => setDispo("ship") },
          React.createElement("div", { className: "ico" }, React.createElement(window.Icon, { name: "truck" })),
          React.createElement("div", { style: { fontWeight: 700, fontSize: 14 } }, "Send for shipment now"),
          React.createElement("div", { style: { fontSize: 12, color: "var(--co-text-3)" } }, "Queue the physical card in Shipping immediately.")),
        React.createElement("div", { className: "co-dispo-opt" + (choice === "vault" ? " sel" : ""), onClick: () => setDispo("vault") },
          React.createElement("div", { className: "ico" }, React.createElement(window.Icon, { name: "vault" })),
          React.createElement("div", { style: { fontWeight: 700, fontSize: 14 } }, "Store in vault"),
          React.createElement("div", { style: { fontSize: 12, color: "var(--co-text-3)" } }, "Hold in the safe with a proof photo — typical for a few days."))),
      choice === "vault" && React.createElement("div", { style: { marginTop: 18, maxWidth: 480, marginLeft: "auto", marginRight: "auto" } },
        React.createElement("div", { className: "co-section-title" }, "Proof of safe storage · required"),
        !vaultPhoto
          ? React.createElement("div", { className: "co-capture", style: { aspectRatio: "1.6" } },
              vaultCapturing && React.createElement("div", { className: "scan-line" }),
              React.createElement("div", { style: { textAlign: "center", color: "var(--co-text-3)" } },
                React.createElement(window.Icon, { name: "camera", size: 32 }),
                React.createElement("div", { style: { fontSize: 13, marginTop: 8 } }, vaultCapturing ? "Capturing…" : "Photo the card(s) inside the open safe")))
          : React.createElement("div", { className: "co-sheet" },
              React.createElement("div", { style: { display: "flex", alignItems: "center", gap: 7, fontSize: 10.5, letterSpacing: "0.16em", textTransform: "uppercase", color: "var(--co-text-3)", marginBottom: 10 } },
                React.createElement(window.Icon, { name: "vault", size: 14 }), "In the safe"),
              React.createElement(MockCard, { unit, product: order.product })),
        React.createElement("div", { style: { display: "flex", justifyContent: "center", marginTop: 12 } },
          !vaultPhoto
            ? React.createElement(window.Button, { variant: "primary", icon: "camera", disabled: vaultCapturing, onClick: captureVault }, vaultCapturing ? "Capturing…" : "Capture safe photo")
            : React.createElement(window.Button, { variant: "secondary", size: "sm", icon: "rotate", onClick: () => setVaultPhoto(false) }, "Retake"))));
    footRight = choice === "ship"
      ? React.createElement(window.Button, { variant: "primary", icon: "truck", onClick: finish }, "Send for shipment & finish")
      : React.createElement(window.Button, { variant: "primary", icon: "check", disabled: !vaultPhoto, onClick: finish }, "Log vault & finish");
  }

  // back button
  if (step > 0 && step < 5 && !preselect) footLeft = React.createElement(window.Button, { variant: "ghost", icon: "chevleft", onClick: () => setStep(step - 1) }, "Back");
  else if (step > 1 && step < 5) footLeft = React.createElement(window.Button, { variant: "ghost", icon: "chevleft", onClick: () => setStep(step - 1) }, "Back");

  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" }, "Card activation"),
        React.createElement("div", { style: { fontSize: 12, color: "var(--co-text-3)" } }, "Highest-risk action · guided & audited")),
      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(StepBar, { step, virtualOnly })),
    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)));
}

window.ActivationWizard = ActivationWizard;

/* Activation landing view — queue of orders awaiting activation */
function ActivationView({ role, onStartActivation, aiForce, setAiForce, loading }) {
  const queue = window.CardOps.ORDERS.filter((o) => ["fee_paid", "activating"].includes(o.status));
  const m = window.CardOps.metrics;
  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" }, "Activation"),
        React.createElement("p", { className: "co-page-sub" }, queue.length, " orders awaiting activation · activation rate ", m.activationRate, "%")),
      React.createElement(window.GatedButton, { perm: "start_activation", role, variant: "primary", icon: "activate", onClick: () => onStartActivation(null) }, "Start activation")),

    React.createElement("div", { className: "co-card" },
      React.createElement("div", { className: "co-card-head" },
        React.createElement("div", { className: "co-card-title" }, "Awaiting activation"),
        React.createElement("div", { style: { fontSize: 12, color: "var(--co-text-3)" } }, "Fee paid · oldest first")),
      loading
        ? React.createElement(window.SkeletonRows, { rows: 5, cols: 4 })
        : queue.length === 0
          ? React.createElement(window.EmptyState, { icon: "checkcircle", title: "Queue clear", sub: "No paid orders are waiting for activation." })
          : 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.type, " · ", window.CardOps.COUNTRIES[o.country], " · ", o.days, "d waiting")),
              React.createElement("span", { className: "co-pill blue" }, React.createElement("span", { className: "dot" }), "Fee paid"),
              React.createElement(window.GatedButton, { perm: "start_activation", role, variant: "primary", size: "sm", icon: "activate", onClick: () => onStartActivation(o) }, "Activate")))));
}

window.ActivationView = ActivationView;