/* 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 — Fixed Operations shared kit.
// Modern, search-first building blocks shared by the redesigned Service RO
// workspace and Parts Counter. The headline piece is <JBGLImpact>, which
// renders the exact journal entry an action posted — so the user can SEE the
// general-ledger accounts move against each other in real time.

// ── Money / format ──────────────────────────────────────────────────────
const jbm = (n) => "$" + Number(n || 0).toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 });
const jbm0 = (n) => "$" + Number(n || 0).toLocaleString("en-US", { maximumFractionDigits: 0 });

// ── Chart-of-accounts name lookup (the accounts the fixed-ops cascade touches)
const GL_ACCT_NAMES = {
  "201": "Cash on Hand",
  "202": "Bank — Operating",
  "220": "A/R — Service & Parts",
  "240": "Used Car Inventory",
  "241": "Used Truck Inventory",
  "242": "Parts Inventory",
  "263": "Warranty Receivable",
  "300": "Accounts Payable — Trade",
  "324A": "Sales Tax Payable",
  "460A": "Customer Labor Sales",
  "462": "Warranty Labor Sales",
  "463": "Internal Labor Sales",
  "467": "Parts Sales — Repair Order",
  "482": "Counter Parts Sales",
  "483": "Wholesale Parts Sales",
  "660A": "Cost of Labor Sales",
  "667": "Cost of Parts — Repair Order",
  "682": "Cost of Counter Parts",
  "683": "Cost of Wholesale Parts",
  "688": "Parts Inventory Adjustment",
  "999": "Labor Applied / Clearing",
};
const glName = (acct) => GL_ACCT_NAMES[acct] || "GL Account";

// Account "family" → drives the running-total chip color.
const glKind = (acct) => {
  const a = String(acct);
  if (["201", "202", "220", "242", "263", "240", "241"].includes(a)) return "asset";
  if (["300", "324A"].includes(a)) return "liab";
  if (["460A", "462", "463", "467", "482", "483"].includes(a)) return "income";
  if (["660A", "667", "682", "683", "688", "999"].includes(a)) return "cost";
  return "other";
};

// Current GL balance of an account, summed from every posted journal entry.
const jbGLBalance = (acct) => {
  if (!window.DMS) return 0;
  const jes = window.DMS.journalEntries() || [];
  let bal = 0;
  jes.forEach(je => (je.lines || []).forEach(l => {
    if (String(l.acct) === String(acct)) bal += (+l.dr || 0) - (+l.cr || 0);
  }));
  return +bal.toFixed(2);
};

// ── KPI pill ──────────────────────────────────────────────────────────────
const JBKpi = ({ label, value, sub, tone, icon }) => {
  const tones = {
    red:   { br: "var(--jb-red)",   fg: "var(--jb-red)" },
    amber: { br: "#E2A93B",         fg: "var(--jb-amber)" },
    ok:    { br: "var(--jb-green)", fg: "var(--jb-green)" },
    blue:  { br: "var(--jb-blue)",  fg: "var(--jb-blue)" },
  };
  const c = tones[tone] || { br: "var(--jb-border)", fg: "var(--jb-navy)" };
  return (
    <div style={{ background: "var(--jb-surface)", border: "1px solid var(--jb-border)",
                  borderTop: "3px solid " + c.br, borderRadius: "var(--jb-r)", padding: "9px 14px",
                  minWidth: 120, boxShadow: "var(--jb-shadow-sm)", flex: "1 1 0" }}>
      <div style={{ fontSize: 10.5, color: "var(--jb-text-muted)", textTransform: "uppercase",
                    letterSpacing: "0.05em", fontWeight: 700, display: "flex", alignItems: "center", gap: 5 }}>
        {icon && <span style={{ opacity: 0.7 }}>{icon}</span>}{label}
      </div>
      <div style={{ fontSize: 21, fontWeight: 800, color: c.fg, lineHeight: 1.15, marginTop: 2,
                    fontFamily: "var(--jb-font)", letterSpacing: "-0.01em" }}>{value}</div>
      {sub && <div style={{ fontSize: 11, color: "var(--jb-text-dim)", marginTop: 1 }}>{sub}</div>}
    </div>
  );
};

// ── Search field (rounded, icon, clearable) ────────────────────────────────
// RC32 (lane ros, the owner's 10/26 report: Inventory showed "0 of 104 units" with the Search box holding his sign-in id): every search /
// filter box tells the browser and password managers it is NOT a login field — autoComplete off, a non-login name, no autofill hints.
const JB_NO_AUTOFILL = { autoComplete: "off", "data-lpignore": "true", "data-1p-ignore": "true", "data-form-type": "other", "data-k2b-search": "1" };
const JBSearch = ({ value, onChange, placeholder, autoFocus, right, name }) => (
  <div style={{ display: "flex", alignItems: "center", gap: 8, flex: 1,
                background: "var(--jb-surface)", border: "1px solid var(--jb-border-strong)",
                borderRadius: 999, padding: "0 6px 0 14px", boxShadow: "var(--jb-shadow-sm)" }}>
    <span style={{ color: "var(--jb-text-muted)", fontSize: 15 }}>⌕</span>
    <input value={value} autoFocus={autoFocus} onChange={(e) => onChange(e.target.value)}
           placeholder={placeholder} {...JB_NO_AUTOFILL} name={name || "k2b-find"} spellCheck={false}
           style={{ flex: 1, minWidth: 0, width: "100%", border: "none", outline: "none", background: "transparent",
                    padding: "10px 0", fontSize: 14, color: "var(--jb-text)", boxShadow: "none" }} />
    {value ? (
      <button onClick={() => onChange("")} title="Clear"
              style={{ border: "none", background: "var(--jb-surface-2)", color: "var(--jb-text-dim)",
                       width: 24, height: 24, borderRadius: "50%", cursor: "pointer", fontSize: 13 }}>×</button>
    ) : null}
    {right}
  </div>
);

// An empty list CAUSED BY a search: say so and offer one click to clear it (never a bare empty table).
//   <JBSearchEmpty q={q} noun="units" onClear={() => setQ("")} />  →  No units match '257' · [Clear search]
const JBSearchEmpty = ({ q, noun, onClear, style }) => (
  <div data-search-empty="1" style={{ padding: "22px 14px", textAlign: "center", color: "var(--jb-text-dim)", fontSize: 13.5, display: "flex", gap: 8, alignItems: "center", justifyContent: "center", flexWrap: "wrap", ...(style || {}) }}>
    <span>No {noun || "records"} match <b style={{ color: "var(--jb-text)" }}>'{String(q == null ? "" : q)}'</b></span>
    <span aria-hidden="true">·</span>
    <button type="button" data-search-clear="1" onClick={onClear}
            style={{ border: "1px solid var(--jb-border-strong)", background: "var(--jb-surface)", color: "var(--jb-blue)", fontWeight: 700, borderRadius: 999, padding: "5px 14px", minHeight: 32, cursor: "pointer", fontSize: 13, fontFamily: "var(--jb-font)" }}>Clear search</button>
  </div>
);

// ── Filter chip ─────────────────────────────────────────────────────────
const JBChip = ({ active, onClick, children, count, tone }) => {
  const aBg = tone === "red" ? "var(--jb-red)" : tone === "amber" ? "var(--jb-amber)" : "var(--jb-navy)";
  return (
    <button onClick={onClick}
            style={{ display: "inline-flex", alignItems: "center", gap: 6,
                     padding: "6px 13px", borderRadius: 999, cursor: "pointer",
                     fontSize: 12.5, fontWeight: 600, fontFamily: "var(--jb-font)",
                     border: "1px solid " + (active ? aBg : "var(--jb-border-strong)"),
                     background: active ? aBg : "var(--jb-surface)",
                     color: active ? "#FFF" : "var(--jb-text-dim)",
                     boxShadow: active ? "none" : "var(--jb-shadow-sm)", transition: "all .12s" }}>
      {children}
      {count != null && (
        <span style={{ fontSize: 11, fontWeight: 700, padding: "0 6px", borderRadius: 999,
                       background: active ? "rgba(255,255,255,0.22)" : "var(--jb-surface-2)",
                       color: active ? "#FFF" : "var(--jb-text-muted)" }}>{count}</span>
      )}
    </button>
  );
};

// ── Status badge ──────────────────────────────────────────────────────────
const JB_STATUS = {
  Open:     { bg: "var(--jb-blue-tint)",  fg: "var(--jb-blue)",  dot: "var(--jb-blue)" },
  Closed:   { bg: "var(--jb-green-tint)", fg: "#15803D",         dot: "var(--jb-green)" },
  Warranty: { bg: "var(--jb-amber-tint)", fg: "var(--jb-amber)", dot: "var(--jb-amber)" },
  Internal: { bg: "#EFE9FB",              fg: "#6D40B0",         dot: "#8050B0" },
  Customer: { bg: "var(--jb-blue-tint)",  fg: "var(--jb-blue)",  dot: "var(--jb-blue)" },
  Aged:     { bg: "var(--jb-red-tint)",   fg: "var(--jb-red)",   dot: "var(--jb-red)" },
};
const JBBadge = ({ kind, children }) => {
  const c = JB_STATUS[kind] || { bg: "var(--jb-surface-2)", fg: "var(--jb-text-dim)", dot: "var(--jb-text-muted)" };
  return (
    <span style={{ display: "inline-flex", alignItems: "center", gap: 5, padding: "2px 9px",
                   borderRadius: 999, background: c.bg, color: c.fg, fontSize: 11, fontWeight: 700,
                   fontFamily: "var(--jb-font)" }}>
      <span style={{ width: 6, height: 6, borderRadius: "50%", background: c.dot }} />
      {children}
    </span>
  );
};

// ── Assist card (role-aware recommendation, in the spirit of modern DMS AI) ─
const JBAssist = ({ tone = "blue", icon = "✨", title, body, action, onAction }) => {
  const tones = {
    blue:  { bd: "#CBE0F4", bg: "linear-gradient(180deg,#F2F8FE,#EAF2FC)", fg: "var(--jb-blue)" },
    amber: { bd: "#F0DBA8", bg: "linear-gradient(180deg,#FFF8E9,#FFF3D9)", fg: "var(--jb-amber)" },
    green: { bd: "#BFE6C7", bg: "linear-gradient(180deg,#F0FBF1,#E4F6E6)", fg: "#15803D" },
    red:   { bd: "#F2C9CE", bg: "linear-gradient(180deg,#FDF1F2,#FCE6E8)", fg: "var(--jb-red)" },
  };
  const c = tones[tone] || tones.blue;
  return (
    <div style={{ border: "1px solid " + c.bd, background: c.bg, borderRadius: "var(--jb-r)",
                  padding: "10px 12px", display: "flex", gap: 10, alignItems: "flex-start" }}>
      <span style={{ fontSize: 15, lineHeight: 1.3 }}>{icon}</span>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ fontSize: 12.5, fontWeight: 700, color: "var(--jb-text)" }}>{title}</div>
        {body && <div style={{ fontSize: 11.5, color: "var(--jb-text-dim)", lineHeight: 1.45, marginTop: 2 }}>{body}</div>}
        {action && (
          <button onClick={onAction}
                  style={{ marginTop: 7, border: "1px solid " + c.bd, background: "var(--jb-surface)",
                           color: c.fg, fontWeight: 700, fontSize: 11.5, padding: "4px 11px",
                           borderRadius: 999, cursor: "pointer", fontFamily: "var(--jb-font)" }}>
            {action}
          </button>
        )}
      </div>
    </div>
  );
};

// ── Section header ──────────────────────────────────────────────────────
const JBPanelHead = ({ children, right }) => (
  <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between",
                padding: "11px 14px", borderBottom: "1px solid var(--jb-border)" }}>
    <span style={{ fontSize: 12, fontWeight: 700, textTransform: "uppercase", letterSpacing: "0.05em",
                   color: "var(--jb-text-dim)" }}>{children}</span>
    {right}
  </div>
);

// ════════════════════════════════════════════════════════════════════════
//  GL IMPACT — the centerpiece. Renders the journal entry an action posted,
//  shows the running balance each touched account now reads, and proves the
//  entry balances (debits = credits). This is "accounts affecting each other"
//  made visible.
// ════════════════════════════════════════════════════════════════════════
const JBGLImpact = ({ entry, effects, compact }) => {
  if (!entry) return null;
  const lines = entry.lines || [];
  const totDr = lines.reduce((s, l) => s + (+l.dr || 0), 0);
  const totCr = lines.reduce((s, l) => s + (+l.cr || 0), 0);
  const balanced = Math.abs(totDr - totCr) < 0.01;
  const kindColor = { asset: "var(--jb-blue)", liab: "var(--jb-amber)", income: "var(--jb-green)", cost: "var(--jb-red)", other: "var(--jb-text-muted)" };

  return (
    <div style={{ border: "1px solid var(--jb-border)", borderRadius: "var(--jb-r)", overflow: "hidden",
                  background: "var(--jb-surface)" }}>
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between",
                    padding: "9px 13px", background: "var(--jb-navy)", color: "#FFF" }}>
        <div style={{ display: "flex", alignItems: "center", gap: 9 }}>
          <span style={{ fontSize: 14 }}>📒</span>
          <div>
            <div style={{ fontSize: 12.5, fontWeight: 700 }}>Posted to General Ledger</div>
            <div style={{ fontSize: 10.5, color: "#B9C4DD", fontFamily: "var(--jb-mono)" }}>
              {entry.id} · Journal {entry.jrn} · {entry.date}
            </div>
          </div>
        </div>
        <span style={{ fontSize: 11, fontWeight: 700, padding: "3px 9px", borderRadius: 999,
                       background: balanced ? "rgba(34,197,94,0.22)" : "rgba(239,68,68,0.25)",
                       color: balanced ? "#86EFAC" : "#FCA5A5" }}>
          {balanced ? "✓ In balance" : "⚠ Out of balance"}
        </span>
      </div>

      {/* Column header */}
      <div style={{ display: "grid", gridTemplateColumns: "1fr 92px 92px",
                    padding: "6px 13px", borderBottom: "1px solid var(--jb-border)",
                    fontSize: 10, fontWeight: 700, textTransform: "uppercase", letterSpacing: "0.04em",
                    color: "var(--jb-text-muted)", background: "var(--jb-surface-2)" }}>
        <span>Account</span>
        <span style={{ textAlign: "right" }}>Debit</span>
        <span style={{ textAlign: "right" }}>Credit</span>
      </div>

      {/* Lines */}
      {lines.map((l, i) => {
        const newBal = jbGLBalance(l.acct);
        return (
          <div key={i} style={{ display: "grid", gridTemplateColumns: "1fr 92px 92px",
                                padding: "8px 13px", borderBottom: "1px solid var(--jb-border)",
                                fontSize: 12, alignItems: "center" }}>
            <div style={{ minWidth: 0 }}>
              <div style={{ display: "flex", alignItems: "center", gap: 7 }}>
                <span style={{ width: 7, height: 7, borderRadius: 2, background: kindColor[glKind(l.acct)], flexShrink: 0 }} />
                <span style={{ fontFamily: "var(--jb-mono)", fontWeight: 700, color: "var(--jb-navy)" }}>{l.acct}</span>
                <span style={{ color: "var(--jb-text)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{glName(l.acct)}</span>
              </div>
              {!compact && (
                <div style={{ fontSize: 10.5, color: "var(--jb-text-muted)", fontFamily: "var(--jb-mono)", marginLeft: 14 }}>
                  balance now {jbm(newBal)}
                </div>
              )}
            </div>
            <div style={{ textAlign: "right", fontFamily: "var(--jb-mono)", fontWeight: l.dr ? 700 : 400,
                          color: l.dr ? "var(--jb-text)" : "var(--jb-border-strong)" }}>
              {l.dr ? jbm(l.dr) : "—"}
            </div>
            <div style={{ textAlign: "right", fontFamily: "var(--jb-mono)", fontWeight: l.cr ? 700 : 400,
                          color: l.cr ? "var(--jb-text)" : "var(--jb-border-strong)" }}>
              {l.cr ? jbm(l.cr) : "—"}
            </div>
          </div>
        );
      })}

      {/* Totals */}
      <div style={{ display: "grid", gridTemplateColumns: "1fr 92px 92px",
                    padding: "8px 13px", fontSize: 12, fontWeight: 800, background: "var(--jb-surface-2)" }}>
        <span style={{ color: "var(--jb-text-dim)", textTransform: "uppercase", fontSize: 10.5, letterSpacing: "0.04em", alignSelf: "center" }}>Totals</span>
        <span style={{ textAlign: "right", fontFamily: "var(--jb-mono)", color: "var(--jb-navy)" }}>{jbm(totDr)}</span>
        <span style={{ textAlign: "right", fontFamily: "var(--jb-mono)", color: "var(--jb-navy)" }}>{jbm(totCr)}</span>
      </div>

      {/* Downstream effects (inventory relieved, AR/warranty created, hours flagged…) */}
      {effects && effects.length > 0 && (
        <div style={{ borderTop: "1px solid var(--jb-border)", padding: "10px 13px",
                      background: "var(--jb-surface)" }}>
          <div style={{ fontSize: 10, fontWeight: 700, textTransform: "uppercase", letterSpacing: "0.05em",
                        color: "var(--jb-text-muted)", marginBottom: 6 }}>Also updated across the dealership</div>
          <div style={{ display: "flex", flexDirection: "column", gap: 5 }}>
            {effects.map((e, i) => (
              <div key={i} style={{ display: "flex", gap: 8, fontSize: 11.5, color: "var(--jb-text-dim)", alignItems: "flex-start" }}>
                <span style={{ color: "var(--jb-green)", fontWeight: 800 }}>✓</span>
                <span><b style={{ color: "var(--jb-text)" }}>{e.label}</b>{e.detail ? " — " + e.detail : ""}</span>
              </div>
            ))}
          </div>
        </div>
      )}
    </div>
  );
};

// Pull the most-recent journal entry posted by a given source (Service/Parts).
const jbLatestJE = (src) => {
  if (!window.DMS) return null;
  const jes = window.DMS.journalEntries() || [];
  return jes.find(j => !src || j.src === src) || jes[0] || null;
};

Object.assign(window, {
  jbm, jbm0, GL_ACCT_NAMES, glName, glKind, jbGLBalance,
  JBKpi, JBSearch, JBSearchEmpty, JB_NO_AUTOFILL, JBChip, JBBadge, JBAssist, JBPanelHead, JBGLImpact, jbLatestJE,
});