/* 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 — Banks / Lenders registry (Sales & F&I).
// Manages the dealership's lender book stored in window.jbLenders. Edits here
// drive the lender dropdowns in Desking and the Finance Worksheet.

const bk$ = (n) => "$" + (Number(n) || 0).toLocaleString("en-US", { maximumFractionDigits: 0 });
const BK_TYPE_COLOR = {
  "Captive": "var(--jb-blue)", "Prime Bank": "var(--jb-green)",
  "Credit Union": "var(--jb-amber)", "Subprime": "var(--jb-red)", "Buy-Here Pay-Here": "var(--jb-navy)",
};

// RC27 (dsk): the lender's DEFAULT FEE (acquisition / bank / flat fee, discount points) — kept on the SERVER for every station (the lender book
// itself is still this station's), suggested on the desk when the lender is picked on a finance / lease deal, editable per deal there.
const bkFeeText = (f) => !f ? "" : ((window.DealCalc && window.DealCalc.LENDER_FEE_KINDS[f.kind]) || f.kind) + " " + (f.kind === "points" ? f.points + " pts" : "$" + ((+f.amountCents || 0) / 100).toFixed(2)) + (f.passed ? " · passed to customer" : " · store pays");
const BkFeeDefault = ({ name }) => {
  const D = window.DMS;
  const [, force] = React.useReducer(n => n + 1, 0);
  React.useEffect(() => (D && D.subscribe) ? D.subscribe(force) : undefined, []);
  const cur = D && D.lenderFeeFor ? D.lenderFeeFor(name) : null;
  const seed = (c) => c ? { kind: c.kind, amount: c.amountCents ? (c.amountCents / 100).toFixed(2) : "", points: c.points != null ? String(c.points) : "", passed: !!c.passed } : { kind: "acquisition", amount: "", points: "", passed: false };
  const [f, setF] = React.useState(() => seed(cur));
  const curSig = JSON.stringify(cur || null);
  React.useEffect(() => { setF(seed(cur)); }, [curSig]);
  const [busy, setBusy] = React.useState(false);
  const may = !!(D && D.can && (D.can("fi") || D.can("acct")));
  const kinds = (window.DealCalc && window.DealCalc.LENDER_FEE_KINDS) || { acquisition: "Acquisition fee", bank: "Bank fee", flat: "Flat fee", points: "Discount points" };
  if (!String(name || "").trim()) return null;
  const save = async (remove) => {
    setBusy(true);
    const r = await D.saveLenderFee(remove ? { lender: name, remove: true } : { lender: name, kind: f.kind, amount: f.kind === "points" ? undefined : f.amount, points: f.kind === "points" ? f.points : undefined, passed: f.passed });
    setBusy(false);
    window.k2bToast && window.k2bToast(r.msg || (r.ok ? "Saved." : "Not saved."), r.ok ? "ok" : "warn", 5200);
  };
  return (
    <div data-bk="feedefault" style={{ marginTop: 12, border: "1px solid var(--jb-border)", borderRadius: 6, padding: "8px 10px", background: "var(--jb-surface-2)" }}>
      <div style={{ fontSize: 12, fontWeight: 700, color: "var(--jb-navy)" }}>Lender fee default — suggested on the desk when {name} is picked (every station)</div>
      <div style={{ fontSize: 11.5, color: "var(--jb-text-dim)", margin: "2px 0 6px" }}>{cur ? "Now: " + bkFeeText(cur) : "No default fee for this lender."} A fee the store pays comes out of the front gross (desk › Show gross › Profit); switched to "passed to customer" it goes on the customer's fee line instead.</div>
      <div style={{ display: "flex", gap: 10, alignItems: "center", flexWrap: "wrap" }}>
        <select value={f.kind} disabled={!may} data-bk="feekind" onChange={(e) => setF(x => ({ ...x, kind: e.target.value }))} style={{ fontSize: 13 }}>
          {Object.keys(kinds).map(k => <option key={k} value={k}>{kinds[k]}</option>)}</select>
        {f.kind === "points"
          ? <label style={{ fontSize: 12.5 }}>Points <input data-bk="feepoints" value={f.points} disabled={!may} onChange={(e) => setF(x => ({ ...x, points: e.target.value }))} style={{ width: 70, fontSize: 13 }} /> % of the amount financed</label>
          : <label style={{ fontSize: 12.5 }}>Amount $ <input data-bk="feeamount" value={f.amount} disabled={!may} onChange={(e) => setF(x => ({ ...x, amount: e.target.value }))} style={{ width: 90, fontSize: 13 }} /></label>}
        <label style={{ fontSize: 12.5, display: "inline-flex", gap: 4, alignItems: "center" }}><input type="checkbox" data-bk="feepassed" checked={f.passed} disabled={!may} onChange={(e) => setF(x => ({ ...x, passed: e.target.checked }))} />usually passed to the customer</label>
        {may && <button type="button" className="k2b-button small" onClick={() => save(false)} disabled={busy} data-bk="feesave">Save default fee</button>}
        {may && cur && <button type="button" className="k2b-button small" onClick={() => save(true)} disabled={busy} data-bk="feeremove">Remove</button>}
        {!may && <span style={{ fontSize: 11.5, color: "var(--jb-text-muted)" }}>F&amp;I and the office set lender fees.</span>}
      </div>
    </div>
  );
};

const Banks = ({ onClose, go }) => {
  const [, force] = React.useReducer(n => n + 1, 0);
  React.useEffect(() => window.jbLenders ? window.jbLenders.subscribe(force) : undefined, []);
  React.useEffect(() => { try { if (window.DMS && window.DMS.loadLenderFees) window.DMS.loadLenderFees(); } catch (e) {} return (window.DMS && window.DMS.subscribe) ? window.DMS.subscribe(force) : undefined; }, []);   // RC27 (dsk)
  const list = window.jbLenders ? window.jbLenders.list() : [];
  const TYPES = window.jbLenders ? window.jbLenders.TYPES : [];
  const [edit, setEdit] = React.useState(null);   // record being edited (or {} for new)
  const [filter, setFilter] = React.useState("All");

  const blank = { name: "", short: "", type: "Prime Bank", active: true, buyRate: 6.49, sellRateCap: 8.49,
    reserveSplit: "70/30", flat: 0, acqFee: 0, minFico: 640, maxAdvance: 125, maxTermMo: 75, phone: "", contact: "", notes: "",
    addr: "", city: "", state: "", zip: "", role: "", parent: "" };

  const filtered = filter === "All" ? list : list.filter(l => l.type === filter);
  const activeCount = list.filter(l => l.active).length;

  return (
    <div className="k2b-window" style={{ width: "100%", maxWidth: 1240, height: 780, margin: "0 auto", fontFamily: "var(--jb-font)" }}>
      <K2BTitlebar title="Banks / Lenders — Sales & F&I" onClose={onClose} onMin={() => {}} onMax={() => {}} />
      <div style={{ flex: 1, minHeight: 0, overflow: "auto", background: "var(--jb-bg)", padding: 18, display: "flex", flexDirection: "column", gap: 14 }}>

        {/* summary */}
        <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
          {[["Lenders on book", list.length, "var(--jb-navy)"], ["Active", activeCount, "var(--jb-green)"],
            ["Subprime", list.filter(l => l.type === "Subprime").length, "var(--jb-red)"],
            ["Best buy rate", (Math.min(...list.filter(l => l.active).map(l => l.buyRate)) || 0).toFixed(2) + "%", "var(--jb-blue)"]].map(([lab, val, c], i) => (
            <div key={i} style={{ flex: 1, minWidth: 150, background: "var(--jb-surface)", border: "1px solid var(--jb-border)", borderRadius: "var(--jb-r-lg)", padding: "12px 16px", boxShadow: "var(--jb-shadow-sm)" }}>
              <div style={{ fontSize: 11, letterSpacing: 1, textTransform: "uppercase", color: "var(--jb-text-muted)" }}>{lab}</div>
              <div style={{ fontFamily: "var(--jb-mono)", fontSize: 24, fontWeight: 800, color: c }}>{val}</div>
            </div>
          ))}
        </div>

        {/* toolbar */}
        <div style={{ display: "flex", alignItems: "center", gap: 8, flexWrap: "wrap" }}>
          <span style={{ fontSize: 12, color: "var(--jb-text-dim)" }}>Filter</span>
          {["All", ...TYPES].map(t => (
            <button key={t} className="k2b-button small" onClick={() => setFilter(t)}
              style={filter === t ? { background: "var(--jb-blue)", color: "#fff", borderColor: "var(--jb-blue)" } : {}}>{t}</button>
          ))}
          <div style={{ flex: 1 }} />
          <button className="k2b-button" style={{ background: "var(--jb-yellow)", fontWeight: 700 }} onClick={() => setEdit({ ...blank })}>+ Add Lender</button>
        </div>

        {/* table */}
        <div style={{ background: "var(--jb-surface)", border: "1px solid var(--jb-border)", borderRadius: "var(--jb-r-lg)", overflow: "hidden", boxShadow: "var(--jb-shadow-sm)" }}>
          <table style={{ width: "100%", borderCollapse: "collapse", fontSize: 12.5 }}>
            <thead><tr style={{ background: "var(--jb-surface-2)", color: "var(--jb-text-dim)", textAlign: "left" }}>
              {["Lender", "Type", "Buy Rate", "Sell Cap", "Reserve", "Max Adv.", "Max Term", "Min FICO", "Contact", "Lender fee", ""].map((h, i) => (
                <th key={i} style={{ padding: "8px 10px", fontWeight: 600, textAlign: i >= 2 && i <= 7 ? "right" : "left" }}>{h}</th>
              ))}
            </tr></thead>
            <tbody>
              {filtered.map((l, i) => (
                <tr key={l.id} onClick={() => setEdit({ ...l })}
                    style={{ background: i % 2 ? "var(--jb-surface-2)" : "#fff", cursor: "pointer", opacity: l.active ? 1 : 0.5 }}>
                  <td style={{ padding: "8px 10px" }}>
                    <div style={{ fontWeight: 700, color: "var(--jb-navy)" }}>{l.name}</div>
                    <div style={{ fontSize: 11, color: "var(--jb-text-muted)", fontFamily: "var(--jb-mono)" }}>{l.short}{l.phone ? " · " + l.phone : ""}{l.addr ? " · " + [l.addr, [l.city, l.state].filter(Boolean).join(", "), l.zip].filter(Boolean).join(", ") : ""}</div>
                  </td>
                  <td style={{ padding: "8px 10px" }}>
                    <span style={{ background: (BK_TYPE_COLOR[l.type] || "#888"), color: "#fff", borderRadius: 999, padding: "2px 9px", fontSize: 11, fontWeight: 600 }}>{l.type}</span>
                    {l.role && <div style={{ marginTop: 3 }}><span title={`Titling entity${l.parent ? " for " + l.parent : ""} — auto-selected on ${l.role === "lease-lessor" ? "LEASE" : "FINANCE"} deals`}
                      style={{ background: l.role === "lease-lessor" ? "var(--jb-navy)" : "var(--jb-green)", color: "#fff", borderRadius: 999, padding: "2px 9px", fontSize: 10, fontWeight: 600 }}>
                      {l.role === "lease-lessor" ? "Lease Lessor / Titled Owner" : "Retail Lienholder"}</span></div>}
                  </td>
                  <td style={{ padding: "8px 10px", textAlign: "right", fontFamily: "var(--jb-mono)" }}>{l.buyRate.toFixed(2)}%</td>
                  <td style={{ padding: "8px 10px", textAlign: "right", fontFamily: "var(--jb-mono)" }}>{l.sellRateCap.toFixed(2)}%</td>
                  <td style={{ padding: "8px 10px", textAlign: "right", fontFamily: "var(--jb-mono)" }}>{l.reserveSplit}{l.flat ? " · " + bk$(l.flat) : ""}</td>
                  <td style={{ padding: "8px 10px", textAlign: "right", fontFamily: "var(--jb-mono)" }}>{l.maxAdvance}%</td>
                  <td style={{ padding: "8px 10px", textAlign: "right", fontFamily: "var(--jb-mono)" }}>{l.maxTermMo}mo</td>
                  <td style={{ padding: "8px 10px", textAlign: "right", fontFamily: "var(--jb-mono)" }}>{l.minFico}</td>
                  <td style={{ padding: "8px 10px", color: "var(--jb-text-dim)" }}>{l.contact}</td>
                  <td style={{ padding: "8px 10px", fontSize: 11.5 }} data-bk-fee={l.name}>{window.DMS && window.DMS.lenderFeeFor ? bkFeeText(window.DMS.lenderFeeFor(l.name)) || "—" : "—"}</td>
                  <td style={{ padding: "8px 10px", textAlign: "right" }}>{!l.active && <span style={{ fontSize: 11, color: "var(--jb-text-muted)" }}>inactive</span>}</td>
                </tr>
              ))}
              {filtered.length === 0 && <tr><td colSpan={11} style={{ padding: 20, textAlign: "center", color: "var(--jb-text-muted)" }}>No lenders match this filter.</td></tr>}
            </tbody>
          </table>
        </div>
        <div style={{ fontSize: 11.5, color: "var(--jb-text-muted)" }}>Click any row to edit. Active lenders appear in the Desking and Finance Worksheet lender menus.</div>
        <div style={{ flex: 1 }} />
        <div style={{ display: "flex", gap: 8 }}>
          <button className="k2b-button" onClick={onClose}>Close</button>
          <button className="k2b-button" onClick={() => go && go("desking")}>Back to Desking</button>
          <button className="k2b-button" onClick={() => go && go("finance")}>Finance Worksheet</button>
        </div>
      </div>

      {edit && <BankEditor rec={edit} TYPES={TYPES} onClose={() => setEdit(null)}
        onSave={(r) => { window.jbLenders.upsert(r); setEdit(null); window.k2bToast && window.k2bToast(`${r.name} saved.`, "ok"); }}
        onDelete={edit.id ? () => { window.jbLenders.remove(edit.id); setEdit(null); window.k2bToast && window.k2bToast("Lender removed.", "warn"); } : null} />}
    </div>
  );
};

const BankEditor = ({ rec, TYPES, onClose, onSave, onDelete }) => {
  const [r, setR] = React.useState({ ...rec });
  const set = (k, v) => setR(p => ({ ...p, [k]: v }));
  const valid = (r.name || "").trim().length > 0;
  return (
    <K2BModal title={rec.id ? "Edit Lender" : "Add Lender"} width={620} onClose={onClose}
      buttons={<>
        {onDelete && <K2BButton onClick={onDelete}>Delete</K2BButton>}
        <K2BButton onClick={onClose}>Cancel</K2BButton>
        <K2BButton primary onClick={() => valid ? onSave(r) : window.k2bToast && window.k2bToast("Lender name is required.", "warn")}>Save</K2BButton>
      </>}>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
        <BkFld label="Lender Name" k="name" r={r} set={set} />
        <BkFld label="Short Code" k="short" w={120} r={r} set={set} />
        <label style={{ display: "flex", flexDirection: "column", gap: 3 }}>
          <span style={{ fontSize: 11, color: "var(--jb-text-dim)", fontWeight: 600 }}>Type</span>
          <select value={r.type} onChange={(e) => set("type", e.target.value)} style={{ fontSize: 13 }}>{TYPES.map(t => <option key={t}>{t}</option>)}</select>
        </label>
        <label style={{ display: "flex", alignItems: "center", gap: 8, marginTop: 18 }}>
          <input type="checkbox" checked={r.active !== false} onChange={(e) => set("active", e.target.checked)} style={{ width: 16, height: 16 }} />
          <span style={{ fontSize: 13 }}>Active (shows in lender menus)</span>
        </label>
        <BkFld label="Buy Rate %" k="buyRate" type="num" r={r} set={set} />
        <BkFld label="Sell Rate Cap %" k="sellRateCap" type="num" r={r} set={set} />
        <BkFld label="Reserve Split (e.g. 70/30 or Flat)" k="reserveSplit" r={r} set={set} />
        <BkFld label="Flat Reserve $" k="flat" type="num" r={r} set={set} />
        <BkFld label="Max Advance %" k="maxAdvance" type="num" r={r} set={set} />
        <BkFld label="Max Term (months)" k="maxTermMo" type="num" r={r} set={set} />
        <BkFld label="Min FICO" k="minFico" type="num" r={r} set={set} />
        <BkFld label="Acquisition Fee $" k="acqFee" type="num" r={r} set={set} />
        <BkFld label="Phone" k="phone" r={r} set={set} />
        <BkFld label="Buyer / Contact" k="contact" r={r} set={set} />
        <label style={{ display: "flex", flexDirection: "column", gap: 3 }}>
          <span style={{ fontSize: 11, color: "var(--jb-text-dim)", fontWeight: 600 }}>Titling Role (lien/lessor entity)</span>
          <select value={r.role || ""} onChange={(e) => set("role", e.target.value)} style={{ fontSize: 13 }}>
            <option value="">— none (funding lender) —</option>
            <option value="retail-lienholder">Retail Lienholder (customer owns; lien to this entity)</option>
            <option value="lease-lessor">Lease Lessor / Titled Owner</option>
          </select>
        </label>
        <BkFld label='Parent Lender (links entity, e.g. "GM Financial")' k="parent" r={r} set={set} />
        <BkFld label="Street Address (titling)" k="addr" r={r} set={set} />
        <BkFld label="City" k="city" r={r} set={set} />
        <BkFld label="State" k="state" r={r} set={set} />
        <BkFld label="ZIP" k="zip" r={r} set={set} />
      </div>
      {r.role && <div style={{ marginTop: 8, fontSize: 11.5, color: "var(--jb-text-dim)", background: "var(--jb-surface-2)", border: "1px solid var(--jb-border)", borderRadius: 6, padding: "6px 10px" }}>
        Titling entity: auto-selected as the deal&#39;s {r.role === "lease-lessor" ? "lessor / titled owner on LEASE deals" : "lienholder on retail FINANCE deals"} whenever the funding lender is {r.parent || "its parent lender"}. Kept out of the Desking lender menu.
      </div>}
      <label style={{ display: "flex", flexDirection: "column", gap: 3, marginTop: 12 }}>
        <span style={{ fontSize: 11, color: "var(--jb-text-dim)", fontWeight: 600 }}>Notes</span>
        <textarea value={r.notes || ""} onChange={(e) => set("notes", e.target.value)} rows={2} style={{ fontSize: 13, resize: "vertical" }} />
      </label>
      {!r.role && <BkFeeDefault name={rec.name || r.name} />}
    </K2BModal>
  );
};

const BkFld = ({ label, k, type = "text", w, r, set }) => (
    <label style={{ display: "flex", flexDirection: "column", gap: 3 }}>
      <span style={{ fontSize: 11, color: "var(--jb-text-dim)", fontWeight: 600 }}>{label}</span>
      {type === "num"
        ? <input type="number" value={r[k]} onChange={(e) => set(k, e.target.value === "" ? "" : +e.target.value)} style={{ fontSize: 13, width: w }} />
        : <input value={r[k] || ""} onChange={(e) => set(k, e.target.value)} style={{ fontSize: 13, width: w }} />}
    </label>
);

Object.assign(window, { Banks });