/* eslint-disable */
/* © 2026 K2B NETWORK SOLUTIONS LLC. All rights reserved.
   Proprietary and confidential. Unauthorized copying, distribution, or use of
   this file, via any medium, is strictly prohibited. Original work product. */
// JBREWS DMS — GWM Warranty Claims (Global Warranty Management).
// Prepare, submit, authorize, reconcile and debit warranty claims that arise
// from Warranty-pay repair orders. Wired to the ledger: closing a Warranty RO
// books the receivable to acct 263; paying a claim relieves 263 to cash; a full
// debit charges warranty expense (684). Codes come from window.GWM picklists.

const wcMoney = (n) => "$" + (Number(n) || 0).toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 });
// RC33 fix round: what is still OPEN on a claim (claimed − already received − charged back while unpaid), in cents — what 263 carries for it
const wcOpenC = (c) => Math.max(0, Math.round((+c.amount || 0) * 100) - Math.round((+c.received || 0) * 100) - Math.round((+c.debitedOpen || 0) * 100));
// a paid claim GM charged back: a credit on 263 the next GM statement takes (Record Payment on that statement's claim names it)
const wcWaitingChargebacks = (claims) => (claims || []).filter(x => x.status === "Debited" && (x.debitWasPaid || x.paid) && !x.chargebackSettled && !x.voided);
const wcDays = (iso) => iso ? Math.floor((Date.now() - new Date(iso)) / 86400000) : 0;
const WC_STATUS_TONE = {
  "Not Submitted": { bg: "#EDEFF3", fg: "#5A6472" }, "Submitted": { bg: "var(--jb-blue-tint,#E5EFFA)", fg: "var(--jb-blue,#1B66A8)" },
  "Authorized": { bg: "#E7F0FB", fg: "#1456A0" }, "Paid": { bg: "var(--jb-green-tint,#E6F7EC)", fg: "var(--jb-green,#16A34A)" },
  "Rejected": { bg: "#FBE9E7", fg: "#B23A2E" }, "Debited": { bg: "#F6E2C5", fg: "#9A6700" },
};

const WCBadge = ({ status }) => {
  const t = WC_STATUS_TONE[status] || WC_STATUS_TONE["Not Submitted"];
  return <span style={{ background: t.bg, color: t.fg, borderRadius: 999, padding: "2px 10px", fontSize: 11, fontWeight: 700, whiteSpace: "nowrap" }}>{status}</span>;
};

const WarrantyClaims = ({ onClose, go }) => {
  const D = window.DMS;
  const [, force] = React.useReducer(n => n + 1, 0);
  React.useEffect(() => (D && D.subscribe) ? D.subscribe(force) : undefined, []);
  const act = (r) => Promise.resolve(r).then(x => { window.k2bToast && window.k2bToast(x.msg, x.ok ? "ok" : "warn", 3600); return x; });   // RC33 (mpx): payment / chargeback are SERVER commands (promises)

  const claims = (D && D.warrantyReceivables) ? D.warrantyReceivables() : [];
  const ros = (D && D.repairOrders) ? D.repairOrders() : [];
  const roOf = (claim) => ros.find(r => r.id === claim.ro) || {};
  const [view, setView] = React.useState("claims"); // claims | reconcile
  const [selId, setSelId] = React.useState(null);

  React.useEffect(() => {
    if (selId && claims.find(c => c.claim === selId)) return;
    if (claims[0]) setSelId(claims[0].claim);
  }, [claims.length]);
  const sel = claims.find(c => c.claim === selId) || null;

  // KPIs
  const openAmt = claims.filter(c => !c.paid && c.status !== "Debited" && !c.voided).reduce((s, c) => s + wcOpenC(c), 0) / 100;
  const unsub = claims.filter(c => !c.submitted && c.status !== "Paid" && c.status !== "Debited").length;
  const aged = claims.filter(c => c.submitted && !c.paid && c.status !== "Debited" && wcDays(c.submittedDate) >= 30).length;
  const debited = claims.filter(c => c.status === "Debited").length;

  return (
    <div className="k2b-window" style={{ width: "100%", maxWidth: 1300, height: "calc(100vh - 110px)", margin: "0 auto",
                                          display: "flex", flexDirection: "column", background: "var(--jb-surface, #F4F4F4)", fontFamily: "var(--jb-font)" }}>
      <K2BTitlebar title="GWM — Warranty Claims" icon="store" onClose={onClose} />

      {/* KPI strip */}
      <div style={{ display: "flex", gap: 10, padding: "10px 16px", borderBottom: "1px solid var(--jb-border)", flexWrap: "wrap" }}>
        <WcKpi label="Open Receivable (263)" value={wcMoney(openAmt)} />
        <WcKpi label="Unsubmitted" value={unsub} tone={unsub ? "amber" : "ok"} />
        <WcKpi label="Aged > 30d Unpaid" value={aged} tone={aged ? "red" : "ok"} />
        <WcKpi label="Debited / Chargeback" value={debited} tone={debited ? "red" : "ok"} />
        <div style={{ flex: 1 }} />
        <div style={{ display: "flex", gap: 4, alignSelf: "center" }}>
          <button className="k2b-button small" onClick={() => setView("claims")} style={view === "claims" ? wcActiveTab : {}}>Claims</button>
          <button className="k2b-button small" onClick={() => setView("reconcile")} style={view === "reconcile" ? wcActiveTab : {}}>Reconcile / Summary</button>
        </div>
      </div>

      {view === "reconcile" ? (
        <WcReconcile claims={claims} roOf={roOf} go={go} />
      ) : (
        <div style={{ flex: 1, display: "grid", gridTemplateColumns: "380px 1fr", minHeight: 0 }}>
          {/* queue */}
          <div style={{ borderRight: "1px solid var(--jb-border)", overflow: "auto", background: "#FFF" }}>
            {claims.length === 0 && (
              <div style={{ padding: 24, color: "#888", fontSize: 13, textAlign: "center" }}>
                No warranty claims yet. Close a <b>Warranty</b>-pay repair order to generate one.
                <div style={{ marginTop: 10 }}><button className="k2b-button small" onClick={() => go && go("service")}>Service ROs ▸</button></div>
              </div>
            )}
            {claims.map(c => {
              const ro = roOf(c); const on = c.claim === selId;
              return (
                <div key={c.claim} onClick={() => setSelId(c.claim)}
                     style={{ padding: "10px 14px", borderBottom: "1px solid var(--jb-border)", cursor: "pointer",
                              background: on ? "var(--jb-blue-tint, #E5EFFA)" : "transparent", borderLeft: on ? "3px solid var(--jb-blue)" : "3px solid transparent" }}>
                  <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
                    <span style={{ fontFamily: "var(--jb-mono)", fontWeight: 700, color: "var(--jb-navy)" }}>{c.claim}</span>
                    <div style={{ flex: 1 }} />
                    <WCBadge status={c.status || "Not Submitted"} />
                  </div>
                  <div style={{ fontSize: 12.5, color: "var(--jb-text)", marginTop: 3 }}>{ro.customer || "—"}</div>
                  <div style={{ fontSize: 11.5, color: "var(--jb-text-muted)" }}>{ro.vehicle || ""} · {c.ro}</div>
                  <div style={{ display: "flex", gap: 8, marginTop: 4, fontSize: 11.5 }}>
                    <span style={{ fontFamily: "var(--jb-mono)", fontWeight: 700 }}>{wcMoney(c.amount)}</span>
                    {c.submitted && !c.paid && c.status !== "Debited" && <span style={{ color: wcDays(c.submittedDate) >= 30 ? "var(--k2b-maroon)" : "#999" }}>· {wcDays(c.submittedDate)}d</span>}
                    {c.returnStatus && c.returnStatus !== "Not Required" && <span style={{ color: "var(--jb-amber, #9A6700)" }}>· 📦 {c.returnStatus}</span>}
                  </div>
                </div>
              );
            })}
          </div>

          {/* editor */}
          <div style={{ overflow: "auto" }}>
            {sel ? <WcEditor claim={sel} ro={roOf(sel)} act={act} go={go} /> : (
              <div style={{ padding: 40, color: "#999", textAlign: "center" }}>Select a claim.</div>
            )}
          </div>
        </div>
      )}

      <div style={{ borderTop: "1px solid var(--jb-border)", padding: "8px 16px", display: "flex", gap: 6, flexWrap: "wrap" }}>
        <K2BButton small onClick={onClose}>ESC-Close</K2BButton>
        <K2BButton small onClick={() => go && go("service")}>Service ROs</K2BButton>
        <K2BButton small onClick={() => go && go("acctoffice")}>Acct Office (A/R)</K2BButton>
        <K2BButton small onClick={() => go && go("partsdept")}>Parts Dept</K2BButton>
      </div>
    </div>
  );
};

const WcEditor = ({ claim: c, ro, act, go }) => {
  const G = window.GWM || {};
  const D = window.DMS;
  const closed = c.status === "Paid" || c.status === "Debited";
  const upd = (patch) => D.gwmUpdateClaim(c.claim, patch);
  const sel = { fontSize: 13, padding: "5px 7px", border: "1px solid #C8CCD2", background: closed ? "#F0F0F0" : "#FFFEF4", borderRadius: 4, fontFamily: "var(--jb-font)" };
  const codeOpts = (list) => [<option key="" value="">— select —</option>, ...(list || []).map(o => <option key={o.code} value={o.code}>{o.code} · {o.label}</option>)];

  return (
    <div style={{ padding: "16px 20px", display: "flex", flexDirection: "column", gap: 16 }}>
      {/* header */}
      <div style={{ display: "flex", alignItems: "flex-start", gap: 12, flexWrap: "wrap" }}>
        <div style={{ flex: 1, minWidth: 240 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
            <span style={{ fontFamily: "var(--jb-mono)", fontWeight: 800, fontSize: 22, color: "var(--jb-navy)" }}>{c.claim}</span>
            <WCBadge status={c.status || "Not Submitted"} />
            {c.txnType && <span style={{ fontSize: 11.5, color: "var(--jb-text-muted)", fontFamily: "var(--jb-mono)" }}>{c.txnType}</span>}
          </div>
          <div style={{ fontSize: 15, fontWeight: 700, marginTop: 4 }}>{ro.customer || "—"}</div>
          <div style={{ fontSize: 12.5, color: "var(--jb-text-dim)" }}>{ro.vehicle || ""}{ro.vin ? " · VIN " + ro.vin : ""} · {c.ro}</div>
        </div>
        <div style={{ textAlign: "right" }}>
          <div style={{ fontSize: 10.5, letterSpacing: 0.5, textTransform: "uppercase", color: "var(--jb-text-muted)" }}>Claim Amount</div>
          <div style={{ fontFamily: "var(--jb-mono)", fontWeight: 800, fontSize: 26, color: "var(--jb-navy)" }}>{wcMoney(c.amount)}</div>
          {c.paid && <div style={{ fontSize: 11.5, color: "var(--jb-green)" }}>paid {wcDays(c.paidDate)}d ago</div>}
          {!c.paid && c.status !== "Debited" && wcOpenC(c) !== Math.round((+c.amount || 0) * 100) && <div style={{ fontSize: 11.5, color: "#9A6700" }}>{wcMoney(wcOpenC(c) / 100)} still open{+c.debitedOpen ? ` · ${wcMoney(c.debitedOpen)} charged back` : ""}{+c.received ? ` · ${wcMoney(c.received)} received` : ""}</div>}
        </div>
      </div>

      {/* coding */}
      <div style={{ background: "#FFF", border: "1px solid var(--jb-border)", borderRadius: "var(--jb-r)", padding: "14px 16px" }}>
        <div style={{ fontSize: 12, fontWeight: 700, textTransform: "uppercase", letterSpacing: 0.3, color: "var(--jb-text-dim)", marginBottom: 10 }}>Claim Coding</div>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
          <WcFld label="Transaction Type">
            <select value={c.txnType || "ZREG"} disabled={closed} onChange={(e) => upd({ txnType: e.target.value })} style={sel}>{(G.TXN_TYPES || []).map(o => <option key={o.code} value={o.code}>{o.label}</option>)}</select>
          </WcFld>
          <WcFld label="Labor Operation">
            <input value={c.laborOp || ""} disabled={closed} onChange={(e) => upd({ laborOp: e.target.value.toUpperCase() })} placeholder="e.g. J6587" style={{ ...sel, fontFamily: "var(--jb-mono)" }} />
          </WcFld>
          <WcFld label="Complaint Code"><select value={c.complaintCode || ""} disabled={closed} onChange={(e) => upd({ complaintCode: e.target.value })} style={sel}>{codeOpts(G.COMPLAINT)}</select></WcFld>
          <WcFld label="Cause Code"><select value={c.causeCode || ""} disabled={closed} onChange={(e) => upd({ causeCode: e.target.value })} style={sel}>{codeOpts(G.CAUSE)}</select></WcFld>
          <WcFld label="Causal Part #"><input value={c.causalPart || ""} disabled={closed} onChange={(e) => upd({ causalPart: e.target.value.toUpperCase() })} placeholder="part number that caused the failure" style={{ ...sel, fontFamily: "var(--jb-mono)" }} /></WcFld>
          <WcFld label="Authorization Code"><select value={c.authCode || ""} disabled={closed} onChange={(e) => upd({ authCode: e.target.value })} style={sel}><option value="">— none —</option>{(G.AUTH || []).map(o => <option key={o.code} value={o.code}>{o.code} · {o.label}</option>)}</select></WcFld>
        </div>
        {(!c.complaintCode || !c.causeCode) && !closed && (
          <div style={{ marginTop: 10, fontSize: 12, color: "var(--k2b-maroon)" }}>⚠ Complaint and Cause codes are required before the claim can be submitted.</div>
        )}
      </div>

      {/* lifecycle actions */}
      <div style={{ background: "#FFF", border: "1px solid var(--jb-border)", borderRadius: "var(--jb-r)", padding: "14px 16px" }}>
        <div style={{ fontSize: 12, fontWeight: 700, textTransform: "uppercase", letterSpacing: 0.3, color: "var(--jb-text-dim)", marginBottom: 10 }}>Claim Lifecycle</div>
        <WcLifecycle claim={c} />
        <div style={{ display: "flex", gap: 8, flexWrap: "wrap", marginTop: 12 }}>
          {!c.submitted && c.status !== "Paid" && (
            <button className="k2b-button" style={{ background: "var(--jb-blue)", color: "#FFF", border: 0, fontWeight: 700 }}
                    onClick={() => act(D.submitWarrantyClaim(c.claim))}>Submit to GWM →</button>
          )}
          {c.submitted && c.status === "Submitted" && (
            <button className="k2b-button" onClick={() => act(D.authorizeWarrantyClaim(c.claim, c.authCode || "G"))}>Mark Authorized</button>
          )}
          {(c.status === "Submitted" || c.status === "Authorized") && (
            <button className="k2b-button" style={{ background: "var(--jb-green, #16A34A)", color: "#FFF", border: 0, fontWeight: 700 }}
                    onClick={() => {   // RC33 (mpx): what GM paid (blank = the full claim); a short pay needs the reason
                      const openC = wcOpenC(c);
                      const a = window.prompt(`Record GM's payment of claim ${c.claim} — ${wcMoney(openC / 100)} open${openC !== Math.round((+c.amount || 0) * 100) ? " (" + wcMoney(c.amount) + " claimed)" : ""}.\n\nAmount that reached the bank (leave blank for the full claim):`, "");
                      if (a === null) return;
                      const paid = String(a).trim();
                      const paidC = paid ? Math.round(parseFloat(paid.replace(/[$,]/g, "")) * 100) : openC;
                      // RC33 fix round (W1): GM may take a chargeback of a claim it had already paid off this statement — name it, so 684 is not charged twice
                      let cbs = [], cbC = 0;
                      const waiting = wcWaitingChargebacks(D && D.warrantyReceivables ? D.warrantyReceivables() : []).filter(x => x.claim !== c.claim);
                      if (paid && paidC < openC && waiting.length) {
                        const pick = window.prompt(`GM paid ${wcMoney(paidC / 100)} of ${wcMoney(openC / 100)}. Did GM take a chargeback off this statement? Enter its claim number(s), or leave blank:\n\n` + waiting.slice(0, 8).map(x => `${x.claim} — ${wcMoney(x.debitAmount)}`).join("\n"), "");
                        if (pick === null) return;
                        cbs = String(pick).split(/[,;\s]+/).map(x => x.trim()).filter(Boolean);
                        cbC = cbs.reduce((t, k) => { const x = waiting.find(w => w.claim === k); return t + (x ? Math.round((+x.debitAmount || 0) * 100) : 0); }, 0);
                      }
                      let why = "";
                      if (paid && paidC + cbC < openC) { why = window.prompt("GM paid less than the claim — why? (labor time adjusted, parts price …)", "") || ""; if (!why.trim()) return; }
                      act(D.payWarrantyClaim(c.claim, { amount: paid || undefined, diffReason: why.trim() || undefined, chargebacks: cbs.length ? cbs : undefined }));
                    }}>Record Payment (clear 263)</button>
          )}
          {c.submitted && c.status !== "Paid" && c.status !== "Debited" && (
            <WcRejectButton onReject={(code) => act(D.rejectWarrantyClaim(c.claim, code))} />
          )}
          {c.status !== "Debited" && (
            <WcDebitButton onDebit={(code) => act(D.debitWarrantyClaim(c.claim, code))} />
          )}
        </div>
        {c.rejectCode && c.status === "Rejected" && <div style={{ marginTop: 8, fontSize: 12, color: "var(--k2b-maroon)" }}>Rejected — code {c.rejectCode}: {(G.REJECT.find(x => x.code === c.rejectCode) || {}).label}. Correct the coding and resubmit.</div>}
        {c.debitCode && c.status === "Debited" && <div style={{ marginTop: 8, fontSize: 12, color: "#9A6700" }}>Full debit — code {c.debitCode}: {(G.DEBIT.find(x => x.code === c.debitCode) || {}).label}. Charged to warranty expense (684).{(c.debitWasPaid || c.paid) ? (c.chargebackSettled ? ` Taken off GM's payment of ${c.chargebackSettled.claim || ""} (${c.chargebackSettled.je || ""}).` : " GM had paid it — 263 holds the credit until the next GM statement takes it (name it in Record Payment).") : ""}</div>}
        {Array.isArray(c.debits) && c.debits.length > 0 && c.status !== "Debited" && <div style={{ marginTop: 8, fontSize: 12, color: "#9A6700" }}>Partly charged back {wcMoney(c.debitedOpen)} — {wcMoney(wcOpenC(c) / 100)} still open for GM to pay.</div>}
      </div>

      {/* part return (WPC) */}
      <div style={{ background: "#FFF", border: "1px solid var(--jb-border)", borderRadius: "var(--jb-r)", padding: "14px 16px" }}>
        <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 10 }}>
          <span style={{ fontSize: 12, fontWeight: 700, textTransform: "uppercase", letterSpacing: 0.3, color: "var(--jb-text-dim)" }}>Warranty Part Return (WPC)</span>
          <div style={{ flex: 1 }} />
          <button className="k2b-button small" onClick={() => go && go("partreturns")}>Open Returns Board ▸</button>
        </div>
        <div style={{ display: "flex", alignItems: "center", gap: 10, flexWrap: "wrap" }}>
          <span style={{ fontSize: 12.5, color: "var(--jb-text-dim)" }}>Status:</span>
          <select value={c.returnStatus || "Not Required"} onChange={(e) => act(D.setWarrantyReturnStatus(c.claim, e.target.value))} style={sel}>
            {(G.RETURN_STATUS || []).map(s => <option key={s}>{s}</option>)}
          </select>
          {c.causalPart && <span style={{ fontSize: 12, color: "var(--jb-text-muted)", fontFamily: "var(--jb-mono)" }}>causal part {c.causalPart}</span>}
          <div style={{ flex: 1 }} />
          <button className="k2b-button small" onClick={() => window.k2bPrintWarrantyTag && window.k2bPrintWarrantyTag(c, ro)}>🖨 Print Return Tag</button>
        </div>
      </div>
    </div>
  );
};

// Visual lifecycle pipeline
const WcLifecycle = ({ claim: c }) => {
  const steps = ["Not Submitted", "Submitted", "Authorized", "Paid"];
  const idx = c.status === "Paid" ? 3 : c.status === "Authorized" ? 2 : c.submitted ? 1 : 0;
  const broke = c.status === "Rejected" || c.status === "Debited";
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
      {steps.map((s, i) => (
        <React.Fragment key={s}>
          <div style={{ display: "flex", alignItems: "center", gap: 6, opacity: i <= idx && !broke ? 1 : 0.4 }}>
            <span style={{ width: 20, height: 20, borderRadius: 999, fontSize: 11, fontWeight: 700, display: "inline-flex", alignItems: "center", justifyContent: "center",
                           background: i <= idx && !broke ? "var(--jb-green, #16A34A)" : "#D7DBE0", color: i <= idx && !broke ? "#FFF" : "#888" }}>{i <= idx && !broke ? "✓" : i + 1}</span>
            <span style={{ fontSize: 12, fontWeight: i === idx && !broke ? 700 : 400 }}>{s}</span>
          </div>
          {i < steps.length - 1 && <span style={{ color: "#C7CDD4" }}>→</span>}
        </React.Fragment>
      ))}
      {broke && <span style={{ marginLeft: 10, fontWeight: 700, color: c.status === "Debited" ? "#9A6700" : "var(--k2b-maroon)" }}>· {c.status}</span>}
    </div>
  );
};

const WcRejectButton = ({ onReject }) => {
  const [open, setOpen] = React.useState(false);
  const G = window.GWM || {};
  return (
    <div style={{ position: "relative" }}>
      <button className="k2b-button" onClick={() => setOpen(o => !o)}>Mark Rejected ▾</button>
      {open && (
        <>
          <div onMouseDown={(e) => { e.currentTarget.__k2bDown = true; }}
               onClick={(e) => { const d = e.currentTarget.__k2bDown; e.currentTarget.__k2bDown = false; if (d) setOpen(false); }}
               style={{ position: "fixed", inset: 0, zIndex: 40 }} />
          <div style={{ position: "absolute", top: "calc(100% + 4px)", left: 0, zIndex: 41, background: "#FFF", border: "1px solid var(--jb-border)", borderRadius: 6, boxShadow: "var(--jb-shadow-lg)", minWidth: 320, maxHeight: 260, overflow: "auto" }}>
            {(G.REJECT || []).map(o => (
              <button key={o.code} onClick={() => { setOpen(false); onReject(o.code); }}
                      style={{ display: "block", width: "100%", textAlign: "left", padding: "7px 12px", border: 0, borderBottom: "1px solid var(--jb-border)", background: "transparent", cursor: "pointer", fontSize: 12.5 }}>
                <b style={{ fontFamily: "var(--jb-mono)" }}>{o.code}</b> · {o.label}
              </button>
            ))}
          </div>
        </>
      )}
    </div>
  );
};
const WcDebitButton = ({ onDebit }) => {
  const [open, setOpen] = React.useState(false);
  const G = window.GWM || {};
  return (
    <div style={{ position: "relative" }}>
      <button className="k2b-button" style={{ borderColor: "#C9A23A" }} onClick={() => setOpen(o => !o)}>Full Debit ▾</button>
      {open && (
        <>
          <div onMouseDown={(e) => { e.currentTarget.__k2bDown = true; }}
               onClick={(e) => { const d = e.currentTarget.__k2bDown; e.currentTarget.__k2bDown = false; if (d) setOpen(false); }}
               style={{ position: "fixed", inset: 0, zIndex: 40 }} />
          <div style={{ position: "absolute", top: "calc(100% + 4px)", left: 0, zIndex: 41, background: "#FFF", border: "1px solid var(--jb-border)", borderRadius: 6, boxShadow: "var(--jb-shadow-lg)", minWidth: 320, maxHeight: 260, overflow: "auto" }}>
            {(G.DEBIT || []).map(o => (
              <button key={o.code} onClick={() => { setOpen(false); onDebit(o.code); }}
                      style={{ display: "block", width: "100%", textAlign: "left", padding: "7px 12px", border: 0, borderBottom: "1px solid var(--jb-border)", background: "transparent", cursor: "pointer", fontSize: 12.5 }}>
                <b style={{ fontFamily: "var(--jb-mono)" }}>{o.code}</b> · {o.label}
              </button>
            ))}
          </div>
        </>
      )}
    </div>
  );
};

// Reconcile / Transaction Summary
const WcReconcile = ({ claims, roOf, go }) => {
  const byStatus = {};
  (window.GWM ? window.GWM.CLAIM_STATUS : []).forEach(s => { byStatus[s] = claims.filter(c => (c.status || "Not Submitted") === s); });
  const sum = (arr) => arr.reduce((s, c) => s + (+c.amount || 0), 0);
  return (
    <div style={{ flex: 1, overflow: "auto", padding: 18 }}>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(190px, 1fr))", gap: 12, marginBottom: 18 }}>
        {Object.keys(byStatus).map(s => (
          <div key={s} style={{ background: "#FFF", border: "1px solid var(--jb-border)", borderRadius: "var(--jb-r-lg)", padding: "12px 14px" }}>
            <WCBadge status={s} />
            <div style={{ fontFamily: "var(--jb-mono)", fontWeight: 800, fontSize: 22, marginTop: 6, color: "var(--jb-navy)" }}>{byStatus[s].length}</div>
            <div style={{ fontSize: 12, color: "var(--jb-text-dim)" }}>{wcMoney(sum(byStatus[s]))}</div>
          </div>
        ))}
      </div>
      <div style={{ background: "#FFF", border: "1px solid var(--jb-border)", borderRadius: "var(--jb-r-lg)", overflow: "hidden" }}>
        <table style={{ width: "100%", borderCollapse: "collapse", fontSize: 12.5 }}>
          <thead><tr style={{ background: "var(--jb-surface-2)", color: "var(--jb-text-dim)", textAlign: "left" }}>
            {["Claim", "RO", "Customer", "Txn", "Complaint", "Cause", "Status", "Return", "Amount"].map((h, i) => <th key={i} style={{ padding: "8px 10px", fontWeight: 600, textAlign: i === 8 ? "right" : "left" }}>{h}</th>)}
          </tr></thead>
          <tbody>
            {claims.map((c, i) => { const ro = roOf(c); return (
              <tr key={c.claim} style={{ background: i % 2 ? "var(--jb-surface-2)" : "#FFF" }}>
                <td style={{ padding: "7px 10px", fontFamily: "var(--jb-mono)", fontWeight: 700, color: "var(--jb-navy)" }}>{c.claim}</td>
                <td style={{ padding: "7px 10px", fontFamily: "var(--jb-mono)" }}>{c.ro}</td>
                <td style={{ padding: "7px 10px" }}>{ro.customer || "—"}</td>
                <td style={{ padding: "7px 10px", fontFamily: "var(--jb-mono)" }}>{c.txnType || "—"}</td>
                <td style={{ padding: "7px 10px", fontFamily: "var(--jb-mono)" }}>{c.complaintCode || "—"}</td>
                <td style={{ padding: "7px 10px", fontFamily: "var(--jb-mono)" }}>{c.causeCode || "—"}</td>
                <td style={{ padding: "7px 10px" }}><WCBadge status={c.status || "Not Submitted"} /></td>
                <td style={{ padding: "7px 10px", color: "var(--jb-text-dim)" }}>{c.returnStatus && c.returnStatus !== "Not Required" ? c.returnStatus : "—"}</td>
                <td style={{ padding: "7px 10px", textAlign: "right", fontFamily: "var(--jb-mono)", fontWeight: 700 }}>{wcMoney(c.amount)}</td>
              </tr>
            ); })}
            {claims.length === 0 && <tr><td colSpan={9} style={{ padding: 20, textAlign: "center", color: "#999" }}>No claims.</td></tr>}
          </tbody>
        </table>
      </div>
    </div>
  );
};

const WcKpi = ({ label, value, tone }) => {
  const fg = tone === "red" ? "#C03546" : tone === "amber" ? "#9A6700" : tone === "ok" ? "var(--jb-green, #16A34A)" : "var(--jb-navy)";
  return (
    <div style={{ background: "#FFF", border: "1px solid var(--jb-border)", borderRadius: "var(--jb-r-lg)", padding: "8px 14px", minWidth: 150 }}>
      <div style={{ fontSize: 10.5, letterSpacing: 0.6, textTransform: "uppercase", color: "var(--jb-text-muted)" }}>{label}</div>
      <div style={{ fontFamily: "var(--jb-mono)", fontWeight: 800, fontSize: 20, color: fg }}>{value}</div>
    </div>
  );
};
const wcActiveTab = { background: "var(--jb-navy, #1B66A8)", color: "#FFF", fontWeight: 700 };

const WcFld = ({ label, children }) => (
    <label style={{ display: "flex", flexDirection: "column", gap: 3 }}>
      <span style={{ fontSize: 10.5, letterSpacing: 0.4, textTransform: "uppercase", color: "var(--jb-text-muted)", fontWeight: 700 }}>{label}</span>
      {children}
    </label>
);

Object.assign(window, { WarrantyClaims });