/* 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 — Warranty Part Returns board (WPC).
// Tracks causal parts through the GM Warranty Parts Center return lifecycle:
// Return Requested → Tagged/Held → Shipped → Received → Inspected → (Pass |
// Debit). A claim flagged "Inspected — Debit" can be charged back from here.
// Reads/writes the same warrantyReceivables records as GWM Warranty Claims.

const PR_COLUMNS = [
  { key: "Return Requested", tone: "#5A6472" },
  { key: "Tagged / Held",    tone: "#9A6700" },
  { key: "Shipped to WPC",   tone: "#1456A0" },
  { key: "Received at WPC",  tone: "#1B66A8" },
  { key: "Inspected — Pass", tone: "#16A34A" },
  { key: "Inspected — Debit",tone: "#B23A2E" },
];
const PR_NEXT = {
  "Return Requested": "Tagged / Held", "Tagged / Held": "Shipped to WPC",
  "Shipped to WPC": "Received at WPC", "Received at WPC": "Inspected — Pass",
};
const prMoney = (n) => "$" + (Number(n) || 0).toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 });

const PartReturns = ({ 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): the chargeback is a SERVER command (a promise)

  const claims = (D && D.warrantyReceivables) ? D.warrantyReceivables() : [];
  const ros = (D && D.repairOrders) ? D.repairOrders() : [];
  const roOf = (c) => ros.find(r => r.id === c.ro) || {};
  // Only claims that are in some return state (exclude "Not Required"/blank)
  const inReturn = claims.filter(c => c.returnStatus && c.returnStatus !== "Not Required");
  const byCol = {};
  PR_COLUMNS.forEach(col => { byCol[col.key] = inReturn.filter(c => c.returnStatus === col.key); });
  const pendingDebit = inReturn.filter(c => c.returnStatus === "Inspected — Debit" && c.status !== "Debited");

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

      <div style={{ display: "flex", gap: 10, alignItems: "center", padding: "10px 16px", borderBottom: "1px solid var(--jb-border)", flexWrap: "wrap" }}>
        <span style={{ fontSize: 12.5, color: "var(--jb-text-dim)" }}>
          <b style={{ color: "var(--jb-navy)" }}>{inReturn.length}</b> part{inReturn.length !== 1 ? "s" : ""} in the return pipeline ·
          <b style={{ color: pendingDebit.length ? "var(--k2b-maroon)" : "var(--jb-green)" }}> {pendingDebit.length}</b> flagged for debit
        </span>
        <div style={{ flex: 1 }} />
        <button className="k2b-button small" onClick={() => go && go("warranty")}>Warranty Claims ▸</button>
      </div>

      <div style={{ flex: 1, overflow: "auto", padding: 14 }}>
        <div style={{ display: "grid", gridTemplateColumns: `repeat(${PR_COLUMNS.length}, minmax(190px, 1fr))`, gap: 10, minHeight: 0 }}>
          {PR_COLUMNS.map(col => (
            <div key={col.key} style={{ background: "#FFF", border: "1px solid var(--jb-border)", borderRadius: "var(--jb-r)", display: "flex", flexDirection: "column", minHeight: 120 }}>
              <div style={{ padding: "8px 10px", borderBottom: "1px solid var(--jb-border)", display: "flex", alignItems: "center", gap: 6 }}>
                <span style={{ width: 8, height: 8, borderRadius: 999, background: col.tone }} />
                <span style={{ fontSize: 11.5, fontWeight: 700, color: "var(--jb-text)" }}>{col.key}</span>
                <div style={{ flex: 1 }} />
                <span style={{ fontSize: 11, color: "var(--jb-text-muted)", fontFamily: "var(--jb-mono)" }}>{byCol[col.key].length}</span>
              </div>
              <div style={{ padding: 8, display: "flex", flexDirection: "column", gap: 8, flex: 1 }}>
                {byCol[col.key].map(c => {
                  const ro = roOf(c);
                  const next = PR_NEXT[c.returnStatus];
                  return (
                    <div key={c.claim} style={{ border: "1px solid var(--jb-border)", borderRadius: "var(--jb-r-sm)", padding: "8px 9px", background: "var(--jb-surface, #FAFBFC)" }}>
                      <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
                        <span style={{ fontFamily: "var(--jb-mono)", fontWeight: 700, fontSize: 12, color: "var(--jb-navy)" }}>{c.claim}</span>
                        <div style={{ flex: 1 }} />
                        <span style={{ fontSize: 11, fontFamily: "var(--jb-mono)", color: "var(--jb-text-muted)" }}>{prMoney(c.amount)}</span>
                      </div>
                      <div style={{ fontSize: 11.5, color: "var(--jb-text-dim)", marginTop: 2 }}>{ro.customer || "—"}</div>
                      {c.causalPart && <div style={{ fontSize: 11, color: "var(--jb-text-muted)", fontFamily: "var(--jb-mono)" }}>part {c.causalPart}</div>}
                      <div style={{ display: "flex", gap: 4, marginTop: 6, flexWrap: "wrap" }}>
                        {next && <button className="k2b-button small" onClick={() => act(D.setWarrantyReturnStatus(c.claim, next))}>→ {next.replace("Inspected — ", "")}</button>}
                        {c.returnStatus === "Received at WPC" && <button className="k2b-button small" style={{ borderColor: "#C9A23A" }} onClick={() => act(D.setWarrantyReturnStatus(c.claim, "Inspected — Debit"))}>Debit</button>}
                        {c.returnStatus === "Inspected — Debit" && c.status !== "Debited" && (
                          <button className="k2b-button small" style={{ background: "var(--k2b-maroon)", color: "#FFF" }} onClick={() => act(D.debitWarrantyClaim(c.claim, "74"))}>Charge Back</button>
                        )}
                        <button className="k2b-button small" onClick={() => window.k2bPrintWarrantyTag && window.k2bPrintWarrantyTag(c, ro)}>🏷</button>
                      </div>
                    </div>
                  );
                })}
                {byCol[col.key].length === 0 && <div style={{ fontSize: 11.5, color: "#B8BEC6", textAlign: "center", padding: "12px 0" }}>—</div>}
              </div>
            </div>
          ))}
        </div>

        {inReturn.length === 0 && (
          <div style={{ marginTop: 24, textAlign: "center", color: "#888", fontSize: 13 }}>
            No parts in the return pipeline. On a warranty claim, set the part-return status to <b>Return Requested</b> to start tracking it here.
            <div style={{ marginTop: 10 }}><button className="k2b-button small" onClick={() => go && go("warranty")}>Go to Warranty Claims ▸</button></div>
          </div>
        )}
      </div>

      <div style={{ borderTop: "1px solid var(--jb-border)", padding: "8px 16px", display: "flex", gap: 6 }}>
        <K2BButton small onClick={onClose}>ESC-Close</K2BButton>
        <K2BButton small onClick={() => go && go("warranty")}>Warranty Claims</K2BButton>
        <K2BButton small onClick={() => go && go("partsdept")}>Parts Dept</K2BButton>
      </div>
    </div>
  );
};

Object.assign(window, { PartReturns });