/* 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 — Check Writing (vendor payments). Manage a VENDOR MASTER, set
// CHECK SEQUENCING (next #, bank account), write checks against open payables or
// any vendor/payee, and keep a check register. Every check posts to the GL
// (DR target acct / CR bank cash) so the ledger always ties out.
// (ldg, RC16) The SERVER writes and voids a check in one transaction (DMS.writeCheck / DMS.voidCheck → POST /api/checks/post
// and /void): the number, the check, its entry, the invoice and the bank rec commit together or not at all; printing is
// offered only after the server confirmed. Register rows are keyed by the check's id (bank + number) — two bank accounts
// may use the same numbers — and a reprint uses the print data stored with the check.
const ckId = (c) => (c && c.id != null && c.id !== "" ? String(c.id) : String(c && c.num));

const ckMoney = (n) => "$" + (Number(n) || 0).toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 });
const CkField = ({ label, children }) => <label style={{ display: "flex", flexDirection: "column", gap: 3 }}><span style={{ fontSize: 11, color: "var(--jb-text-dim)", fontWeight: 600 }}>{label}</span>{children}</label>;
const CK_TONE = { Outstanding: { bg: "var(--jb-blue-tint,#E5EFFA)", fg: "var(--jb-blue,#1B66A8)" }, Cleared: { bg: "var(--jb-green-tint,#E6F7EC)", fg: "#0E7A37" }, Void: { bg: "#FBE9E7", fg: "#B23A2E" } };
const ckInp = { width: "100%", boxSizing: "border-box", padding: "7px 9px", border: "1px solid #C8CCD2", borderRadius: 4, fontSize: 13 };
const ckAcctName = (a) => { const coa = (window.GM_COA || []); const h = coa.find(e => String(Array.isArray(e) ? e[0] : e.acct) === String(a)); return h ? (Array.isArray(h) ? h[1] : h.name) : ""; };
const CK_VENDOR_TYPES = ["Trade", "OEM / Parts", "Floorplan", "Advertising", "Utilities", "Sublet", "Tax / Gov", "Other"];
const CK_STARTER_VENDORS = [
  { name: "GM PARTS (PDC)", type: "OEM / Parts", terms: "Net 30", defaultAcct: "242", phone: "800-555-0100" },
  { name: "ACDELCO", type: "OEM / Parts", terms: "Net 30", defaultAcct: "242" },
  { name: "GM FINANCIAL — FLOORPLAN", type: "Floorplan", terms: "Due on Demand", defaultAcct: "310" },
  { name: "RIVERBEND ADVERTISING", type: "Advertising", terms: "Net 15", defaultAcct: "800" },
  { name: "AMEREN MISSOURI", type: "Utilities", terms: "Net 21", defaultAcct: "810" },
  { name: "MO DEPT OF REVENUE", type: "Tax / Gov", terms: "On Receipt", defaultAcct: "324A" },
];

const CheckWriting = ({ 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", 3600); return r; };
  const payables = (D && D.payables) ? D.payables().filter(p => p.status === "Open") : [];
  const checks = (D && D.checks) ? D.checks() : [];
  const vendors = (D && D.vendors) ? D.vendors() : [];
  const cfg = (D && D.checkConfig) ? D.checkConfig() : { nextNum: 48300, bankAcct: "202", bankName: "Operating" };
  const [tab, setTab] = React.useState("pay"); // pay | vendors
  const [modal, setModal] = React.useState(null);
  const [sel, setSel] = React.useState({});
  const [startPos, setStartPos] = React.useState(1);
  const canSetup = !!(D && ((D.isAdmin && D.isAdmin()) || (D.can && D.can("acct"))));
  const defBank = (cfg.accounts || []).find(a => a.id === cfg.defaultId) || (cfg.accounts || [])[0] || {};
  const selIds = Object.keys(sel).filter(k => sel[k]);
  const selChecks = checks.filter(c => selIds.includes(ckId(c)) && c.status !== "Void");
  const printList = (list) => {
    const again = list.filter(c => c.printCount);
    if (again.length && !window.confirm(`Check #${again.map(c => c.num).join(", #")} ${again.length === 1 ? "was" : "were"} already printed. A reprint uses the same check data and makes no new payment, but it is a second paper check with the same number — destroy the first copy. Print anyway?`)) return;
    const banks = new Set(list.map(c => c.bankId || cfg.defaultId));
    const stock = banks.size === 1 ? (((cfg.accounts || []).find(a => a.id === Array.from(banks)[0]) || defBank).stock || "top") : "top";
    window.k2bPrintChecks && window.k2bPrintChecks(list, { stock, startPos });
    setSel({});
  };

  const openAP = payables.reduce((s, p) => s + (+p.amount || 0), 0);
  const outstanding = checks.filter(c => c.status === "Outstanding").reduce((s, c) => s + c.amount, 0);
  const cashBal = (D && D.bankRec) ? (D.bankRec().bookBalance || 0) : 0;

  const TabBtn = ({ id, children }) => (
    <button className="k2b-button small" onClick={() => setTab(id)}
            style={tab === id ? { background: "var(--jb-navy, #1B66A8)", color: "#fff", fontWeight: 700 } : {}}>{children}</button>
  );

  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="Check Writing — Vendor Payments" icon="store" onClose={onClose} />

      <div style={{ display: "flex", gap: 12, padding: "12px 16px", borderBottom: "1px solid var(--jb-border)", flexWrap: "wrap", alignItems: "center" }}>
        {[["Open Payables", ckMoney(openAP), "var(--jb-navy)"], ["Outstanding Checks", ckMoney(outstanding), "var(--jb-blue)"],
          ["Book Cash (" + cfg.bankAcct + ")", ckMoney(cashBal), "var(--jb-green)"], ["Next Check # · " + (defBank.label || ""), cfg.nextNum, "var(--jb-navy)"]].map(([l, v, c], i) => (
          <div key={i} style={{ flex: 1, minWidth: 140, background: "#FFF", border: "1px solid var(--jb-border)", borderRadius: "var(--jb-r-lg)", padding: "10px 14px" }}>
            <div style={{ fontSize: 10.5, letterSpacing: 0.6, textTransform: "uppercase", color: "var(--jb-text-muted)" }}>{l}</div>
            <div style={{ fontFamily: "var(--jb-mono)", fontWeight: 800, fontSize: 20, color: c }}>{v}</div>
          </div>
        ))}
        <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
          <button className="k2b-button" style={{ background: "var(--jb-yellow)", fontWeight: 700 }} onClick={() => setModal({ type: "write" })}>✎ Write Check</button>
          <button className="k2b-button small" data-ck-setup="1" onClick={() => setModal({ type: "setup" })}>⚙ Check Setup{defBank.routing && defBank.account ? "" : " ⚠"}</button>
        </div>
      </div>

      {/* tab strip */}
      <div style={{ display: "flex", gap: 6, padding: "8px 16px", borderBottom: "1px solid var(--jb-border)", alignItems: "center" }}>
        <TabBtn id="pay">Pay &amp; Register</TabBtn>
        <TabBtn id="vendors">Vendors ({vendors.length})</TabBtn>
        <button className="k2b-button small" onClick={() => go && go("vendoraccts")}>🏪 Vendor Accounts (history, limits) →</button>
        <div style={{ flex: 1 }} />
        {tab === "vendors" && <button className="k2b-button small" style={{ background: "var(--jb-yellow)", fontWeight: 700 }} onClick={() => setModal({ type: "vendor" })}>+ Add Vendor</button>}
      </div>

      {tab === "pay" ? (
        <div style={{ flex: 1, display: "grid", gridTemplateColumns: "1fr 1fr", minHeight: 0 }}>
          {/* open payables */}
          <div style={{ borderRight: "1px solid var(--jb-border)", overflow: "auto" }}>
            <div style={{ padding: "9px 14px", fontWeight: 700, fontSize: 12, textTransform: "uppercase", letterSpacing: 0.3, color: "var(--jb-text-dim)", background: "var(--jb-surface-2)", borderBottom: "1px solid var(--jb-border)", position: "sticky", top: 0 }}>Open Payables — click to pay</div>
            {payables.length === 0 ? <div style={{ padding: 20, color: "#888", fontSize: 13 }}>No open payables. Use “Write Check” for any vendor.</div> : (
              <table style={{ width: "100%", borderCollapse: "collapse", fontSize: 12.5 }}>
                <tbody>
                  {payables.map((p, i) => (
                    <tr key={p.inv} style={{ background: i % 2 ? "var(--jb-surface-2)" : "#FFF" }}>
                      <td style={{ padding: "8px 12px" }}>
                        <div style={{ fontWeight: 700, color: "var(--jb-navy)" }}>{p.vendor}</div>
                        <div style={{ fontSize: 11, color: "#888", fontFamily: "var(--jb-mono)" }}>{p.inv} · acct {p.acct}{p.bodyRO ? " · " + p.bodyRO : ""}</div>
                      </td>
                      <td style={{ padding: "8px 12px", textAlign: "right", fontFamily: "var(--jb-mono)", fontWeight: 700 }}>{ckMoney(p.amount)}</td>
                      <td style={{ padding: "8px 12px", textAlign: "right" }}>
                        <button className="k2b-button small" style={{ background: "var(--jb-yellow)", fontWeight: 700 }} onClick={() => setModal({ type: "write", payable: p })}>Pay</button>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            )}
          </div>

          {/* check register */}
          <div style={{ overflow: "auto" }}>
            <div style={{ padding: "7px 14px", fontWeight: 700, fontSize: 12, color: "var(--jb-text-dim)", background: "var(--jb-surface-2)", borderBottom: "1px solid var(--jb-border)", position: "sticky", top: 0, display: "flex", gap: 8, alignItems: "center", flexWrap: "wrap" }}>
              <span style={{ textTransform: "uppercase", letterSpacing: 0.3 }}>Check Register</span><div style={{ flex: 1 }} />
              {defBank.stock === "3up" && <label style={{ fontWeight: 500, fontSize: 11.5 }}>Start at check <select value={startPos} onChange={(e) => setStartPos(+e.target.value)} style={{ fontSize: 11.5 }}><option value={1}>1 (top)</option><option value={2}>2 (middle)</option><option value={3}>3 (bottom)</option></select> on the first sheet</label>}
              <button className="k2b-button small" data-ck-print-sel="1" disabled={!selChecks.length} onClick={() => printList(selChecks)}>🖨 Print selected ({selChecks.length})</button>
              <button className="k2b-button small" onClick={() => { const n = {}; checks.filter(c => c.status === "Outstanding" && !c.printCount).forEach(c => { n[ckId(c)] = true; }); setSel(n); }}>Select unprinted</button>
            </div>
            {checks.length === 0 ? <div style={{ padding: 20, color: "#888", fontSize: 13 }}>No checks written yet.</div> : (
              <table style={{ width: "100%", borderCollapse: "collapse", fontSize: 12.5 }}>
                <thead><tr style={{ color: "var(--jb-text-muted)", textAlign: "left", fontSize: 11 }}><th style={{ padding: "5px 6px" }}></th><th style={{ padding: "5px 10px" }}>#</th><th style={{ padding: "5px 10px" }}>Payee</th><th style={{ padding: "5px 10px" }}>Acct</th><th style={{ padding: "5px 10px", textAlign: "right" }}>Amount</th><th style={{ padding: "5px 10px" }}>Status</th><th></th></tr></thead>
                <tbody>
                  {checks.map((c, i) => { const t = CK_TONE[c.status] || CK_TONE.Outstanding; return (
                    <tr key={ckId(c)} data-ck-row={ckId(c)} style={{ background: i % 2 ? "var(--jb-surface-2)" : "#FFF", opacity: c.status === "Void" ? 0.55 : 1 }}>
                      <td style={{ padding: "6px 6px" }}>{c.status !== "Void" && <input type="checkbox" data-ck-sel={c.num} data-ck-id={ckId(c)} checked={!!sel[ckId(c)]} onChange={(e) => setSel(x => ({ ...x, [ckId(c)]: e.target.checked }))} />}</td>
                      <td style={{ padding: "6px 10px", fontFamily: "var(--jb-mono)", fontWeight: 700, color: "var(--jb-navy)" }}>{c.num}{(cfg.accounts || []).length > 1 ? <div style={{ fontSize: 9.5, color: "#888", fontWeight: 400 }}>{((cfg.accounts || []).find(a => a.id === (c.bankId || cfg.defaultId)) || {}).label || c.bankId}</div> : null}{c.printCount ? <div style={{ fontSize: 9.5, color: "#888", fontWeight: 400 }}>printed{c.printCount > 1 ? " ×" + c.printCount + " (reprint)" : ""}</div> : null}</td>
                      <td style={{ padding: "6px 10px" }}>{c.payee}{c.memo ? <div style={{ fontSize: 10.5, color: "#999" }}>{c.memo}</div> : null}</td>
                      <td style={{ padding: "6px 10px", fontFamily: "var(--jb-mono)", color: "#888" }}>{c.acct}</td>
                      <td style={{ padding: "6px 10px", textAlign: "right", fontFamily: "var(--jb-mono)", fontWeight: 700 }}>{ckMoney(c.amount)}</td>
                      <td style={{ padding: "6px 10px" }}><span style={{ background: t.bg, color: t.fg, borderRadius: 999, padding: "1px 8px", fontSize: 10.5, fontWeight: 700 }}>{c.status}</span></td>
                      <td style={{ padding: "6px 10px", textAlign: "right", whiteSpace: "nowrap" }}>
                        {c.status !== "Void" && !c.imported && <button className="k2b-button small" data-ck-print={c.num} title={c.printCount ? "Reprint this check (same check data, no new payment)" : "Print this check"} onClick={() => printList([c])}>🖨{c.printCount ? " again" : ""}</button>}
                        {c.status !== "Void" && c.imported && <span title="Imported from the old DMS register — it was printed there; it cannot be printed from here" style={{ fontSize: 10.5, color: "#888" }}>old register</span>}
                        {c.status === "Outstanding" && <button className="k2b-button small" onClick={() => act(D.clearCheck(ckId(c)))}>Clear</button>}
                        {c.status === "Outstanding" && <button className="k2b-button small" data-ck-void={c.num} onClick={() => { const why = window.prompt("Void check #" + c.num + " to " + c.payee + "? The server reverses the GL posting and undoes what the check paid (it reopens the invoice; a refund to a customer is held for them again) and keeps the number as void — all at once.\n\nReason:", "Printed wrong / misaligned"); if (why !== null && String(why).trim()) Promise.resolve(D.voidCheck(ckId(c), why)).then(act); else if (why !== null) act({ ok: false, msg: "A reason is required to void a check." }); }}>Void</button>}
                        {/* RC28 (fx, finding 2): Reissue (= void & reissue; labelled "Reissue" so the register's "Void" button stays the only one named Void) — the replacement check (next number, same payee, amount and distribution) in the SAME step; what the first check paid stays paid */}
                        {c.status === "Outstanding" && <button className="k2b-button small" data-ck-reissue={c.num} title="Lost, damaged or misprinted: void this check and write the replacement in one step — what it paid (a refund, a bill) stays paid, now by the new check" onClick={() => { const why = window.prompt("Void check #" + c.num + " to " + c.payee + " AND write a replacement check for the same amount (the next number)? What the check paid stays paid — by the new check.\n\nReason:", "Check lost — reissued"); if (why !== null && String(why).trim()) Promise.resolve(D.voidCheck(ckId(c), why, { reissue: true })).then(act); else if (why !== null) act({ ok: false, msg: "A reason is required to void a check." }); }}>Reissue</button>}
                      </td>
                    </tr>
                  ); })}
                </tbody>
              </table>
            )}
          </div>
        </div>
      ) : (
        <VendorsPane vendors={vendors} act={act} onEdit={(v) => setModal({ type: "vendor", vendor: v })} onPay={(v) => setModal({ type: "write", vendor: v })} onSeed={() => { CK_STARTER_VENDORS.forEach(v => D.upsertVendor(v)); act({ ok: true, msg: "Added 6 common dealership vendors." }); }} />
      )}

      <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("acctoffice")}>Acct Office (A/P)</K2BButton>
        <K2BButton small onClick={() => go && go("accounting")}>General Ledger</K2BButton>
        <K2BButton small onClick={() => go && go("fixedopsgl")}>GL Posting</K2BButton>
      </div>

      {modal && modal.type === "write" && <WriteCheckModal payable={modal.payable} vendor={modal.vendor} vendors={vendors} cfg={cfg} act={act} onClose={() => setModal(null)} />}
      {modal && modal.type === "setup" && <CheckSetupModal cfg={cfg} checks={checks} act={act} canEdit={canSetup} onClose={() => setModal(null)} />}
      {modal && modal.type === "vendor" && <VendorModal rec={modal.vendor} act={act} onClose={() => setModal(null)} />}
    </div>
  );
};

/* ── Vendors pane ── */
const VendorsPane = ({ vendors, act, onEdit, onPay, onSeed }) => {
  const D = window.DMS;
  if (!vendors.length) return (
    <div style={{ flex: 1, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: 12, color: "#888" }}>
      <div style={{ fontSize: 13 }}>No vendors yet. Add your dealership's suppliers, lenders, and service providers here.</div>
      <button className="k2b-button" style={{ background: "var(--jb-yellow)", fontWeight: 700 }} onClick={onSeed}>+ Load 6 common vendors to start</button>
    </div>
  );
  return (
    <div style={{ flex: 1, overflow: "auto" }}>
      <table style={{ width: "100%", borderCollapse: "collapse", fontSize: 12.5 }}>
        <thead><tr style={{ background: "var(--jb-surface-2)", color: "var(--jb-text-dim)", textAlign: "left", position: "sticky", top: 0 }}>
          {["Vendor", "Type", "Terms", "Default GL", "Open Balance", ""].map((h, i) => <th key={i} style={{ padding: "8px 12px", fontWeight: 600, textAlign: i === 4 ? "right" : "left" }}>{h}</th>)}
        </tr></thead>
        <tbody>
          {vendors.map((v, i) => {
            const bal = D.vendorBalance ? D.vendorBalance(v.id) : 0;
            return (
              <tr key={v.id} style={{ background: i % 2 ? "var(--jb-surface-2)" : "#FFF", opacity: v.active === false ? 0.5 : 1 }}>
                <td style={{ padding: "8px 12px" }}>
                  <div style={{ fontWeight: 700, color: "var(--jb-navy)", cursor: "pointer" }} onClick={() => onEdit(v)}>{v.name}</div>
                  <div style={{ fontSize: 11, color: "#888" }}>{v.contact}{v.phone ? " · " + v.phone : ""}{v.acctNo ? " · acct " + v.acctNo : ""}</div>
                </td>
                <td style={{ padding: "8px 12px" }}><span style={{ background: "var(--jb-blue-tint, #E5EFFA)", color: "var(--jb-blue)", borderRadius: 999, padding: "2px 9px", fontSize: 11, fontWeight: 600 }}>{v.type}</span></td>
                <td style={{ padding: "8px 12px", color: "var(--jb-text-dim)" }}>{v.terms}</td>
                <td style={{ padding: "8px 12px", fontFamily: "var(--jb-mono)" }}>{v.defaultAcct} <span style={{ color: "#aaa" }}>{ckAcctName(v.defaultAcct)}</span></td>
                <td style={{ padding: "8px 12px", textAlign: "right", fontFamily: "var(--jb-mono)", fontWeight: 700, color: bal > 0 ? "var(--jb-navy)" : "#aaa" }}>{ckMoney(bal)}</td>
                <td style={{ padding: "8px 12px", textAlign: "right", whiteSpace: "nowrap" }}>
                  <button className="k2b-button small" onClick={() => onEdit(v)}>Edit</button>
                  <button className="k2b-button small" style={{ background: "var(--jb-yellow)", fontWeight: 700 }} onClick={() => onPay(v)}>Pay</button>
                </td>
              </tr>
            );
          })}
        </tbody>
      </table>
    </div>
  );
};

/* ── Vendor add/edit modal ── */
const VendorModal = ({ rec, act, onClose }) => {
  const [f, setF] = React.useState(rec || { name: "", type: "Trade", terms: "Net 30", defaultAcct: "300", contact: "", phone: "", email: "", address: "", acctNo: "", active: true, notes: "" });
  const set = (k, v) => setF(s => ({ ...s, [k]: v }));
  const save = () => { const r = window.DMS.upsertVendor(f); act(r); if (r.ok) onClose(); };
  return (
    <K2BModal title={rec ? "Edit Vendor" : "Add Vendor"} width={580} onClose={onClose}
      buttons={<>
        {rec && <K2BButton onClick={() => { if (window.confirm("Remove vendor " + f.name + "?")) { act(window.DMS.removeVendor(rec.id)); onClose(); } }}>Delete</K2BButton>}
        <K2BButton onClick={onClose}>Cancel</K2BButton><K2BButton primary onClick={save}>Save</K2BButton>
      </>}>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
        <div style={{ gridColumn: "1 / -1" }}><CkField label="Vendor Name"><input value={f.name} onChange={(e) => set("name", e.target.value.toUpperCase())} style={ckInp} /></CkField></div>
        <CkField label="Type"><select value={f.type} onChange={(e) => set("type", e.target.value)} style={ckInp}>{CK_VENDOR_TYPES.map(t => <option key={t}>{t}</option>)}</select></CkField>
        <CkField label="Terms"><select value={f.terms} onChange={(e) => set("terms", e.target.value)} style={ckInp}>{["Net 15", "Net 30", "Net 45", "Net 60", "On Receipt", "Due on Demand"].map(t => <option key={t}>{t}</option>)}</select></CkField>
        <CkField label="Default GL Account"><input value={f.defaultAcct} onChange={(e) => set("defaultAcct", e.target.value)} style={{ ...ckInp, fontFamily: "var(--jb-mono)" }} /></CkField>
        <div style={{ display: "flex", flexDirection: "column", gap: 3 }}><span style={{ fontSize: 11, color: "var(--jb-text-dim)", fontWeight: 600 }}>Account name</span><div style={{ fontSize: 12.5, color: "#666", padding: "7px 0" }}>{ckAcctName(f.defaultAcct) || "—"}</div></div>
        <CkField label="Contact"><input value={f.contact} onChange={(e) => set("contact", e.target.value)} style={ckInp} /></CkField>
        <CkField label="Phone"><input value={f.phone} onChange={(e) => set("phone", e.target.value)} style={ckInp} /></CkField>
        <CkField label="Email"><input value={f.email} onChange={(e) => set("email", e.target.value)} style={ckInp} /></CkField>
        <CkField label="Vendor Account #"><input value={f.acctNo} onChange={(e) => set("acctNo", e.target.value)} style={ckInp} /></CkField>
        <div style={{ gridColumn: "1 / -1" }}><CkField label="Address"><input value={f.address} onChange={(e) => set("address", e.target.value)} style={ckInp} /></CkField></div>
      </div>
      <label style={{ display: "flex", alignItems: "center", gap: 8, marginTop: 12 }}>
        <input type="checkbox" checked={f.active !== false} onChange={(e) => set("active", e.target.checked)} style={{ width: 16, height: 16 }} />
        <span style={{ fontSize: 13 }}>Active</span>
      </label>
    </K2BModal>
  );
};

/* ── Check setup: company lines, bank accounts (routing / account / stock / next #), MICR font ── */
const ckMask = (v) => { const x = String(v || ""); return x.length > 4 ? "•".repeat(Math.min(6, x.length - 4)) + x.slice(-4) : x; };
const CkBankForm = ({ rec, canEdit, act, onSaved, onCancel }) => {
  const D = window.DMS;
  const [f, setF] = React.useState(() => ({ label: "Operating", glAcct: "202", bankName: "", bankLine2: "", fractional: "", routing: "", account: "", nextNum: 1, stock: "top", micrFormat: "business", sigLine: true, sigLines: 1, sigOver: "", offsetX: 0, offsetY: 0, micrOffsetY: 0, voidAfterDays: 90, ...(rec || {}) }));
  const set = (k, v) => setF(x => ({ ...x, [k]: v }));
  const rOk = !f.routing || (D.abaValid && D.abaValid(f.routing));
  const [saving, setSaving] = React.useState(false);
  // The next check # is kept on the server (shared by every station): a changed number moves the server counter first
  // and is refused when the server is unreachable or the number is already in use.
  const save = async () => {
    if (saving) return; setSaving(true);
    try { const r = D.saveCheckAccountShared ? await D.saveCheckAccountShared(f) : D.saveCheckAccount(f); act(r); if (r.ok) onSaved && onSaved(r.id); }
    finally { setSaving(false); }
  };
  const inp = (k, label, extra) => <CkField label={label}><input data-ck-f={k} disabled={!canEdit} value={f[k] == null ? "" : f[k]} onChange={(e) => set(k, (extra && extra.clean) ? extra.clean(e.target.value) : e.target.value)} style={{ ...ckInp, ...((extra && extra.style) || {}) }} placeholder={(extra && extra.ph) || ""} /></CkField>;
  return (
    <div style={{ border: "1px solid var(--jb-border)", borderRadius: 8, padding: 12, background: "#FFF" }}>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 10 }}>
        {inp("label", "Account name (shows in K2B)", { ph: "Operating" })}
        {inp("glAcct", "GL cash account", { style: { fontFamily: "var(--jb-mono)" }, ph: "202" })}
        {inp("nextNum", "Next check # (shared — kept on the server)", { clean: (v) => v.replace(/\D/g, ""), style: { fontFamily: "var(--jb-mono)", fontWeight: 700 } })}
        {inp("bankName", "Bank name (prints on check)", { ph: "Your bank's name" })}
        {inp("bankLine2", "Bank city / state (prints)", { ph: "City, ST 00000" })}
        {inp("fractional", "Fractional routing # (optional)", { ph: "80-123/815" })}
        <CkField label={"Routing number (9 digits)" + (f.routing && !rOk ? " — NOT VALID" : f.routing && rOk ? " ✓" : "")}>
          <input data-ck-f="routing" disabled={!canEdit} value={f.routing} onChange={(e) => set("routing", e.target.value.replace(/\D/g, "").slice(0, 9))} style={{ ...ckInp, fontFamily: "var(--jb-mono)", borderColor: f.routing && !rOk ? "#B23A2E" : "#C8CCD2" }} /></CkField>
        {inp("account", "Account number", { clean: (v) => v.replace(/[^0-9-]/g, "").slice(0, 17), style: { fontFamily: "var(--jb-mono)" } })}
        <CkField label="Bank line format"><select disabled={!canEdit} value={f.micrFormat} onChange={(e) => set("micrFormat", e.target.value)} style={ckInp}><option value="business">Business (check # on the left)</option><option value="personal">Personal (check # after account)</option></select></CkField>
        <CkField label="Check stock"><select data-ck-f="stock" disabled={!canEdit} value={f.stock} onChange={(e) => { set("stock", e.target.value); if (e.target.value === "3up") set("sigLine", false); }} style={ckInp}><option value="top">Check on top + 2 stubs (1 per page)</option><option value="3up">3 checks per page</option></select></CkField>
        <CkField label="Print signature line"><select disabled={!canEdit} value={f.sigLine ? String(f.sigLines || 1) : "0"} onChange={(e) => { set("sigLine", e.target.value !== "0"); set("sigLines", +e.target.value || 1); }} style={ckInp}><option value="0">No — stock has one printed</option><option value="1">One line</option><option value="2">Two lines (two signers)</option></select></CkField>
        {inp("voidAfterDays", "Void after (days, 0 = none)", { clean: (v) => v.replace(/\D/g, "").slice(0, 3) })}
        {inp("offsetX", "Nudge right (+) / left (−), inches", { clean: (v) => v.replace(/[^0-9.-]/g, "").slice(0, 6) })}
        {inp("offsetY", "Nudge down (+) / up (−), inches", { clean: (v) => v.replace(/[^0-9.-]/g, "").slice(0, 6) })}
        {inp("micrOffsetY", "Bank line only: down (+) / up (−)", { clean: (v) => v.replace(/[^0-9.-]/g, "").slice(0, 6) })}
      </div>
      {canEdit && <div style={{ display: "flex", gap: 8, marginTop: 10 }}>
        <button className="k2b-button small" onClick={() => window.k2bPrintChecks && window.k2bPrintChecks([], { alignment: true, bankId: f.id, stock: f.stock })}>Print alignment test</button>
        <div style={{ flex: 1 }} />
        {onCancel && <button className="k2b-button small" onClick={onCancel}>Cancel</button>}
        <button className="k2b-button small" data-ck-save-bank="1" disabled={!rOk || saving} style={{ background: "var(--jb-navy, #1B66A8)", color: "#fff", fontWeight: 700 }} onClick={save}>{saving ? "Saving…" : "Save bank account"}</button>
      </div>}
    </div>
  );
};

const CheckSetupModal = ({ cfg, checks, act, canEdit, onClose }) => {
  const D = window.DMS;
  const [, force] = React.useReducer(n => n + 1, 0);
  const live = D.checkConfig ? D.checkConfig() : cfg;
  const [edit, setEdit] = React.useState(null);   // account id | "new" | null
  const dealer = window.K2BPrint ? window.K2BPrint.checkCompany({}) : {};   // RC35 (brd): the store's check header (Owner Panel > Stores), else its print name + address
  const [co, setCo] = React.useState(() => ({ name: dealer.name || "", addr1: dealer.addr1 || "", addr2: dealer.addr2 || "", phone: dealer.phone || "", ...(live.company || {}) }));
  const fs = window.ckpFontStatus ? window.ckpFontStatus() : { ok: false };
  const highest = (id) => checks.filter(c => (c.bankId || live.defaultId) === id).reduce((m, c) => Math.max(m, parseInt(c.num, 10) || 0), 0);
  const upload = (file) => {
    if (!file) return;
    if (file.size > 300 * 1024) { act({ ok: false, msg: "That font file is over 300 KB — use the .ttf/.otf MICR font file." }); return; }
    const rd = new FileReader();
    rd.onload = () => { act(D.setCheckConfig({ micrFont: rd.result, micrFontName: file.name })); force(); };
    rd.readAsDataURL(file);
  };
  return (
    <K2BModal title="Check Setup — Bank Accounts & Check Stock" width={900} onClose={onClose}
      buttons={<><K2BButton onClick={onClose}>Close</K2BButton></>}>
      {!canEdit && <div style={{ background: "#FDF4E3", border: "1px solid #E8C98A", borderRadius: 6, padding: "8px 12px", marginBottom: 10, fontSize: 12.5 }}>Only an administrator or the office can change bank accounts. Account numbers are shown masked.</div>}
      <div style={{ fontWeight: 800, color: "var(--jb-navy)", marginBottom: 6 }}>Bank accounts</div>
      <table style={{ width: "100%", borderCollapse: "collapse", fontSize: 12.5, marginBottom: 10 }}>
        <thead><tr style={{ textAlign: "left", color: "var(--jb-text-muted)", fontSize: 11 }}><th style={{ padding: 4 }}>Account</th><th>GL</th><th>Bank</th><th>Routing</th><th>Account #</th><th>Stock</th><th>Next #</th><th></th></tr></thead>
        <tbody>{(live.accounts || []).map(a => (
          <tr key={a.id} style={{ borderTop: "1px solid #EEE" }}>
            <td style={{ padding: 4 }}><b>{a.label}</b>{a.id === live.defaultId ? <span style={{ marginLeft: 6, fontSize: 10.5, color: "#0E7A37", fontWeight: 700 }}>DEFAULT</span> : null}</td>
            <td style={{ fontFamily: "var(--jb-mono)" }}>{a.glAcct}</td><td>{a.bankName || <span style={{ color: "#B23A2E" }}>not set</span>}</td>
            <td style={{ fontFamily: "var(--jb-mono)" }}>{a.routing || <span style={{ color: "#B23A2E" }}>not set</span>}</td>
            <td style={{ fontFamily: "var(--jb-mono)" }}>{a.account ? (canEdit ? a.account : ckMask(a.account)) : <span style={{ color: "#B23A2E" }}>not set</span>}</td>
            <td>{a.stock === "3up" ? "3 per page" : "Check on top"}</td>
            <td style={{ fontFamily: "var(--jb-mono)", fontWeight: 700 }}>{a.nextNum}{highest(a.id) >= a.nextNum ? <div style={{ color: "#B23A2E", fontSize: 10.5 }}>≤ #{highest(a.id)} used</div> : null}</td>
            <td style={{ textAlign: "right", whiteSpace: "nowrap" }}>
              {canEdit && <button className="k2b-button small" data-ck-edit-bank={a.id} onClick={() => setEdit(a.id)}>Edit</button>}
              {canEdit && a.id !== live.defaultId && <button className="k2b-button small" onClick={() => { act(D.setCheckConfig({ defaultId: a.id })); force(); }}>Make default</button>}
              {canEdit && (live.accounts || []).length > 1 && <button className="k2b-button small" onClick={() => { if (window.confirm("Remove " + a.label + "?")) { act(D.removeCheckAccount(a.id)); force(); } }}>Remove</button>}
            </td>
          </tr>))}</tbody>
      </table>
      {edit && <CkBankForm key={edit} rec={edit === "new" ? null : (live.accounts || []).find(a => a.id === edit)} canEdit={canEdit} act={act} onSaved={() => { setEdit(null); force(); }} onCancel={() => setEdit(null)} />}
      {!edit && canEdit && <button className="k2b-button small" onClick={() => setEdit("new")}>+ Add bank account</button>}

      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16, marginTop: 16 }}>
        <div>
          <div style={{ fontWeight: 800, color: "var(--jb-navy)", marginBottom: 6 }}>Company name on the check</div>
          <div style={{ display: "grid", gap: 6 }}>
            {["name", "addr1", "addr2", "phone"].map(k => <input key={k} disabled={!canEdit} value={co[k] || ""} placeholder={k} onChange={(e) => setCo(x => ({ ...x, [k]: e.target.value }))} style={ckInp} />)}
            {canEdit && <button className="k2b-button small" style={{ justifySelf: "start" }} onClick={() => { act(D.setCheckConfig({ company: co })); force(); }}>Save company lines</button>}
          </div>
        </div>
        <div>
          <div style={{ fontWeight: 800, color: "var(--jb-navy)", marginBottom: 6 }}>MICR font (bank line)</div>
          <div data-ck-font={fs.ok ? "ok" : "missing"} style={{ fontSize: 12.5, padding: "8px 10px", borderRadius: 6, background: fs.ok ? "#E6F7EC" : "#FDECEA", color: fs.ok ? "#0E7A37" : "#8A2A20" }}>
            {fs.ok ? <>✓ Using <b>{fs.name}</b> ({fs.source}).</> : <>✕ No MICR font on this PC. Checks will print a <b>test</b> bank line that banks will not accept.</>}
          </div>
          <div style={{ fontSize: 11.5, color: "#666", marginTop: 6, lineHeight: 1.5 }}>
            Install an E-13B MICR font on the printing PC (for example the free GnuMICR, or the font that came with your check software), or upload the .ttf/.otf here once and every station uses it.
            For bank-grade checks, print with a MICR toner cartridge.
          </div>
          {canEdit && <input type="file" accept=".ttf,.otf,.woff,.woff2" style={{ marginTop: 6, fontSize: 12 }} onChange={(e) => upload(e.target.files && e.target.files[0])} />}
          {canEdit && live.micrFont && <button className="k2b-button small" style={{ marginTop: 6 }} onClick={() => { act(D.setCheckConfig({ micrFont: null })); force(); }}>Remove uploaded font</button>}
        </div>
      </div>
    </K2BModal>
  );
};

/* ── Write check modal (vendor-linked) ── */
const WriteCheckModal = ({ payable, vendor, vendors, cfg, act, onClose }) => {
  const init = () => {
    const bankId = cfg.defaultId || "";
    const vAddr = (id) => { const v = (vendors || []).find(x => x.id === id); return v ? (v.address || "") : ""; };
    // RC33 (mpx): a bill the server entered (Enter Bill) is on the books — its expense is booked and A/P 300 credited, so its check debits 300
    if (payable) return { bankId, payee: payable.vendor, vendorId: payable.vendorId || "", payeeAddr: vAddr(payable.vendorId), amount: String(payable.amount), acct: payable.billJe ? "300" : payable.acct, memo: "Pay invoice " + payable.inv, inv: payable.inv };
    if (vendor) return { bankId, payee: vendor.name, vendorId: vendor.id, payeeAddr: vendor.address || "", amount: "", acct: vendor.defaultAcct || "300", memo: "", inv: "" };
    return { bankId, payee: "", vendorId: "", payeeAddr: "", amount: "", acct: "300", memo: "", inv: "" };
  };
  const [f, setF] = React.useState(init);
  const set = (k, v) => setF(s => ({ ...s, [k]: v }));
  const pickVendor = (id) => {
    const v = (vendors || []).find(x => x.id === id);
    if (!v) { set("vendorId", ""); return; }
    setF(s => ({ ...s, vendorId: v.id, payee: v.name, payeeAddr: v.address || s.payeeAddr, acct: v.defaultAcct || s.acct }));
  };
  const amt = parseFloat(String(f.amount).replace(/[^0-9.]/g, "")) || 0;
  const banks = cfg.accounts || [];
  const bank = banks.find(b => b.id === f.bankId) || banks[0] || { glAcct: cfg.bankAcct || "202", nextNum: cfg.nextNum, label: cfg.bankName };
  const bankAcct = bank.glAcct || "202";
  // The number shown is a PREVIEW (the server's next number when it answers, else this station's copy). The real number
  // is reserved on the server when you post; if it differs from the preview you are told before anything prints.
  const [serverNext, setServerNext] = React.useState(null);
  React.useEffect(() => {
    let on = true; setServerNext(null);
    if (window.DMS.peekServerCheckNum) window.DMS.peekServerCheckNum(bank.id).then(r => { if (on && r.ok) setServerNext(r.num); });
    return () => { on = false; };
  }, [bank.id]);
  const nextNum = serverNext || (window.DMS.peekNextCheckNum ? window.DMS.peekNextCheckNum(bank.id) : cfg.nextNum);
  const [busy, setBusy] = React.useState(false);
  // (ldg round 2) paying less than the open amount of a bill is a PARTIAL payment the person says so on purpose (the server refuses
  // a smaller check otherwise, and always a bigger one); the bill stays open for the rest
  const [partial, setPartial] = React.useState(false);
  const billOpen = payable ? +(+(payable.amount || 0) - (+payable.paidAmount || 0)).toFixed(2) : 0;
  const submit = async () => {
    if (busy) return;
    const D = window.DMS;
    const draft = { ...f, amount: amt, partial: !!(payable && partial && amt < billOpen) };
    const pre = D.checkDraftProblem ? D.checkDraftProblem(draft) : null;
    if (pre) { act({ ok: false, msg: pre }); return; }
    setBusy(true);
    try {
      const res = await D.reserveCheckNum(bank.id);   // the check number comes from the server — never this station's guess
      if (!res.ok) { act(res); return; }
      if (String(res.num) !== String(nextNum) && !window.confirm(`Another station used check #${nextNum} while this screen was open. The server reserved #${res.num} for this check. Post it as #${res.num}?`)) { D.releaseCheckNum(res.bankId, res.num); return; }
      // ONE server transaction: number, check, entry, invoice, bank rec — printing is offered only after it committed
      const r = await D.writeCheck({ ...draft, num: res.num, cid: res.cid });
      act(r);
      if (!r.ok) { if (!r.unknown) D.releaseCheckNum(res.bankId, res.num); return; }
      onClose(); if (window.confirm("Check #" + r.num + " posted on the server. Print it now?")) window.k2bPrintChecks && window.k2bPrintChecks([r.check], { stock: bank.stock });
    } finally { setBusy(false); }
  };
  return (
    <K2BModal title={payable ? "Pay Vendor — Write Check" : "Write Check"} width={580} onClose={onClose}
      buttons={<><K2BButton onClick={onClose}>Cancel</K2BButton><K2BButton primary onClick={submit} disabled={busy}>{busy ? "Posting on the server…" : `Post Check #${nextNum} (DR ${f.acct} / CR ${bankAcct})`}</K2BButton></>}>
      <div style={{ border: "2px solid #1B3A6B", borderRadius: 8, padding: "14px 16px", background: "linear-gradient(135deg,#F4F7FB,#EAF0F8)", marginBottom: 14, fontFamily: "var(--jb-mono, monospace)" }}>
        <div style={{ display: "flex", justifyContent: "space-between", fontSize: 11, color: "#555" }}><span style={{ fontWeight: 700 }}>{(window.K2BPrint ? window.K2BPrint.checkCompany(window.DMS && window.DMS.checkConfig ? window.DMS.checkConfig() : {}).name : "")} — {bank.label} ({bankAcct})</span><span>CK #{nextNum} · {new Date().toLocaleDateString()}</span></div>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginTop: 10 }}>
          <div><div style={{ fontSize: 10, color: "#888" }}>PAY TO THE ORDER OF</div><div style={{ fontSize: 16, fontWeight: 700, borderBottom: "1px solid #99A", minWidth: 240 }}>{f.payee || "\u00a0"}</div></div>
          <div style={{ border: "1px solid #1B3A6B", borderRadius: 4, padding: "4px 12px", fontWeight: 800, fontSize: 18, background: "#fff" }}>{ckMoney(amt)}</div>
        </div>
        <div style={{ fontSize: 11.5, marginTop: 8, color: "#333" }}>{amt > 0 && window.ckpWords ? window.ckpWords(amt) + " Dollars" : "\u00a0"}</div>
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
        {vendors && vendors.length > 0 && (
          <div style={{ gridColumn: "1 / -1" }}>
            <CkField label="Vendor (from master — sets payee & default account)">
              <select value={f.vendorId} onChange={(e) => pickVendor(e.target.value)} style={ckInp}>
                <option value="">— manual payee —</option>
                {vendors.filter(v => v.active !== false).map(v => <option key={v.id} value={v.id}>{v.name} · {v.terms} · acct {v.defaultAcct}</option>)}
              </select>
            </CkField>
          </div>
        )}
        {banks.length > 1 && <div style={{ gridColumn: "1 / -1" }}><CkField label="Bank account"><select data-ck-bank="1" value={f.bankId} onChange={(e) => set("bankId", e.target.value)} style={ckInp}>{banks.map(b => <option key={b.id} value={b.id}>{b.label} · GL {b.glAcct} · next #{b.nextNum}</option>)}</select></CkField></div>}
        <CkField label="Payee"><input data-ck-payee="1" value={f.payee} onChange={(e) => set("payee", e.target.value)} style={ckInp} /></CkField>
        <CkField label="Amount $"><input data-ck-amount="1" value={f.amount} onChange={(e) => set("amount", e.target.value.replace(/[^0-9.]/g, ""))} style={ckInp} />
          {payable && amt > 0 && amt < billOpen && <label style={{ display: "block", fontSize: 11.5, color: "#9A6700", marginTop: 4 }}><input type="checkbox" data-ck-partial="1" checked={partial} onChange={(e) => setPartial(e.target.checked)} /> Partial payment — invoice {payable.inv} stays open for ${(billOpen - amt).toFixed(2)}</label>}
          {payable && amt > billOpen && <div style={{ fontSize: 11.5, color: "#B00020", marginTop: 4 }}>More than the ${billOpen.toFixed(2)} open on invoice {payable.inv} — the server will refuse it.</div>}</CkField>
        <CkField label="Debit Account"><input value={f.acct} onChange={(e) => set("acct", e.target.value)} style={{ ...ckInp, fontFamily: "var(--jb-mono)" }} /></CkField>
        <div style={{ display: "flex", flexDirection: "column", gap: 3 }}><span style={{ fontSize: 11, color: "var(--jb-text-dim)", fontWeight: 600 }}>Account name</span><div style={{ fontSize: 12.5, color: "#666", padding: "7px 0" }}>{ckAcctName(f.acct) || "—"}</div></div>
        <CkField label="Memo"><input value={f.memo} onChange={(e) => set("memo", e.target.value)} style={ckInp} /></CkField>
        <CkField label="Link Invoice # (optional)"><input value={f.inv} onChange={(e) => set("inv", e.target.value)} style={{ ...ckInp, fontFamily: "var(--jb-mono)" }} /></CkField>
        <div style={{ gridColumn: "1 / -1" }}><CkField label="Payee mailing address (prints under the payee for a window envelope)"><textarea value={f.payeeAddr} onChange={(e) => set("payeeAddr", e.target.value)} rows={2} style={{ ...ckInp, resize: "vertical" }} placeholder={"123 Main St\nCity, ST 00000"} /></CkField></div>
      </div>
      <div style={{ fontSize: 11.5, color: "#888", marginTop: 10 }}>The server posts the check, its journal entry (<b>DR {f.acct}</b> {ckAcctName(f.acct)} · <b>CR {bankAcct}</b> bank cash), the paid invoice and the bank-rec row together — all of it or none of it — and only then offers printing. Check #{nextNum} is a preview: the number is reserved on the server when you post, so two stations never print the same one — if another station takes it first you are told the new number before anything prints.</div>
    </K2BModal>
  );
};

Object.assign(window, { CheckWriting, WriteCheckModal });