/* 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 — Deal Compliance & Risk Score.
// Scans each deal for required documents/steps, assigns risk points to anything
// missing, and HARD-STOPS a deal that scores over the threshold from closing.
// Reads/writes DMS.dealCompliance / DMS.setDealCompliance. Hooked into the deal
// post path (Finance WS) so a high-risk jacket cannot be booked.

const cmpTone = (level) => level === "clear" ? { bg: "#E6F7EC", fg: "#0E7A37", label: "CLEAR" }
  : level === "caution" ? { bg: "#FBF3E0", fg: "#9A6700", label: "CAUTION" }
  : { bg: "#FBE9E7", fg: "#B23A2E", label: "BLOCKED" };

const DealCompliance = ({ 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) => { window.k2bToast && window.k2bToast(r.msg, r.ok ? "ok" : "warn", 3000); return r; };
  const deals = (D && D.deals) ? D.deals().filter(d => d.status !== "Working" || d.salePrice > 0) : [];
  const [selId, setSelId] = React.useState(null);
  React.useEffect(() => { if (selId && deals.find(d => d.id === selId)) return; if (deals[0]) setSelId(deals[0].id); }, [deals.length]);
  const sel = deals.find(d => d.id === selId) || null;
  const comp = sel ? D.dealCompliance(sel.id) : null;

  const blocked = deals.filter(d => D.dealCompliance(d.id).level === "blocked").length;

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

      <div style={{ display: "flex", gap: 10, padding: "10px 16px", borderBottom: "1px solid var(--jb-border)", flexWrap: "wrap", alignItems: "center" }}>
        <span style={{ fontSize: 12.5, color: "var(--jb-text-dim)" }}>
          <b style={{ color: "var(--jb-navy)" }}>{deals.length}</b> deals scanned ·
          <b style={{ color: blocked ? "var(--k2b-maroon)" : "var(--jb-green)" }}> {blocked}</b> blocked from closing
        </span>
        <div style={{ flex: 1 }} />
        <span style={{ fontSize: 11.5, color: "var(--jb-text-muted)" }}>Score over {D.COMPLIANCE_THRESHOLD} blocks the deal from posting.</span>
      </div>

      <div style={{ flex: 1, display: "grid", gridTemplateColumns: "320px 1fr", minHeight: 0 }}>
        {/* deal list */}
        <div style={{ borderRight: "1px solid var(--jb-border)", overflow: "auto", background: "#FFF" }}>
          {deals.length === 0 && <div style={{ padding: 24, color: "#888", fontSize: 13, textAlign: "center" }}>No deals to review. Start one in Deals.</div>}
          {deals.map(d => {
            const c = D.dealCompliance(d.id); const t = cmpTone(c.level); const on = d.id === selId;
            return (
              <div key={d.id} onClick={() => setSelId(d.id)} 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)" }}>{d.id}</span>
                  <div style={{ flex: 1 }} />
                  <span style={{ background: t.bg, color: t.fg, borderRadius: 999, padding: "2px 9px", fontSize: 10.5, fontWeight: 700 }}>{c.score} pts</span>
                </div>
                <div style={{ fontSize: 12.5, marginTop: 3 }}>{d.buyer}</div>
                <div style={{ fontSize: 11.5, color: "var(--jb-text-muted)" }}>{d.vehicle} · {d.status}</div>
              </div>
            );
          })}
        </div>

        {/* detail */}
        <div style={{ overflow: "auto" }}>
          {sel && comp ? (
            <div style={{ padding: "16px 20px" }}>
              <div style={{ display: "flex", alignItems: "center", gap: 12, flexWrap: "wrap", marginBottom: 14 }}>
                <div style={{ flex: 1, minWidth: 200 }}>
                  <div style={{ fontFamily: "var(--jb-mono)", fontWeight: 800, fontSize: 20, color: "var(--jb-navy)" }}>{sel.id}</div>
                  <div style={{ fontSize: 14, fontWeight: 700 }}>{sel.buyer}</div>
                  <div style={{ fontSize: 12.5, color: "var(--jb-text-dim)" }}>{sel.vehicle} · {sel.type} · {sel.status}</div>
                </div>
                <div style={{ textAlign: "center", background: cmpTone(comp.level).bg, border: "1px solid " + cmpTone(comp.level).fg, borderRadius: 10, padding: "10px 18px", minWidth: 130 }}>
                  <div style={{ fontSize: 10.5, letterSpacing: 0.6, textTransform: "uppercase", color: cmpTone(comp.level).fg }}>Risk Score</div>
                  <div style={{ fontFamily: "var(--jb-mono)", fontWeight: 800, fontSize: 34, color: cmpTone(comp.level).fg, lineHeight: 1 }}>{comp.score}</div>
                  <div style={{ fontSize: 11, fontWeight: 700, color: cmpTone(comp.level).fg }}>{cmpTone(comp.level).label}</div>
                </div>
              </div>

              {comp.level === "blocked" && (
                <div style={{ background: "#FBE9E7", border: "1px solid #B23A2E", borderRadius: 8, padding: "8px 12px", fontSize: 12.5, color: "#B23A2E", marginBottom: 14 }}>
                  ⛔ This deal exceeds the risk threshold ({comp.threshold}). It cannot be posted until the score drops to {comp.threshold} or below.
                </div>
              )}

              {/* checklist */}
              <div style={{ background: "#FFF", border: "1px solid var(--jb-border)", borderRadius: "var(--jb-r)", overflow: "hidden" }}>
                <div style={{ display: "grid", gridTemplateColumns: "1fr 70px 110px", gap: 0, background: "var(--jb-surface-2)", padding: "7px 14px", fontSize: 10.5, fontWeight: 700, textTransform: "uppercase", letterSpacing: 0.4, color: "var(--jb-text-muted)" }}>
                  <span>Requirement</span><span style={{ textAlign: "center" }}>Risk</span><span style={{ textAlign: "center" }}>Status</span>
                </div>
                {comp.items.map(it => (
                  <div key={it.key} style={{ display: "grid", gridTemplateColumns: "1fr 70px 110px", alignItems: "center", padding: "8px 14px", borderTop: "1px solid var(--jb-border)", background: it.ok ? "#fff" : "#FFFBF6" }}>
                    <span style={{ fontSize: 13 }}>
                      {it.label}
                      {it.auto && <span style={{ fontSize: 10, color: "#9aa", marginLeft: 6, fontWeight: 600 }}>AUTO</span>}
                      {it.note ? <span style={{ display: "block", fontSize: 11, color: "var(--k2b-maroon)" }}>{it.note}</span> : null}
                    </span>
                    <span style={{ textAlign: "center", fontFamily: "var(--jb-mono)", fontSize: 12, color: it.ok ? "#bbb" : "var(--k2b-maroon)", fontWeight: 700 }}>{it.ok ? "—" : "+" + it.pts}</span>
                    <span style={{ textAlign: "center" }}>
                      {it.auto ? (
                        <span style={{ fontSize: 11.5, fontWeight: 700, color: it.ok ? "var(--jb-green)" : "var(--k2b-maroon)" }}>{it.ok ? "✓ OK" : "✕ RISK"}</span>
                      ) : (
                        <button onClick={() => act(D.setDealCompliance(sel.id, { [it.key]: !it.ok }))}
                                style={{ cursor: "pointer", border: "1px solid " + (it.ok ? "var(--jb-green, #16A34A)" : "#C8862A"),
                                         background: it.ok ? "var(--jb-green, #16A34A)" : "#FBF3E0", color: it.ok ? "#fff" : "#9A6700",
                                         borderRadius: 4, fontSize: 11.5, fontWeight: 700, padding: "3px 12px", minWidth: 64 }}>
                          {it.ok ? "✓ Done" : "Mark"}
                        </button>
                      )}
                    </span>
                  </div>
                ))}
              </div>

              <div style={{ display: "flex", gap: 8, marginTop: 14, flexWrap: "wrap" }}>
                <button className="k2b-button" onClick={() => { comp.items.filter(i => !i.auto).forEach(i => D.setDealCompliance(sel.id, { [i.key]: true })); act({ ok: true, msg: "All manual items marked complete." }); }}>✓ Mark all complete</button>
                <button className="k2b-button" onClick={() => { try { localStorage.setItem("jb_deal_focus", sel.id); } catch (e) {} go && go("deal"); }}>Open Deal ▸</button>
                <button className="k2b-button" onClick={() => go && go("finance")}>Finance WS ▸</button>
              </div>
            </div>
          ) : <div style={{ padding: 40, color: "#999", textAlign: "center" }}>Select a deal.</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("deal")}>Deals</K2BButton>
        <K2BButton small onClick={() => go && go("finance")}>Finance WS</K2BButton>
      </div>
    </div>
  );
};

Object.assign(window, { DealCompliance });