/* 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 — A/R Defaults (legacy "ARDFT" screen, scan 5).
// Left: the dealership's default A/R posting config. Right: Setup Files —
// Account Types, Dunning Messages, Price Matrix, Letters, Tax Codes.
// Saves through DMSCore so every other A/R screen picks up the new config.

// Module-scope row + input (defined OUTSIDE the component so they are not
// recreated each keystroke — that recreation remounted the <input> and limited
// typing to one character at a time).
const ARDRow = ({ label, children, hint }) => (
  <div style={{ display: "grid", gridTemplateColumns: "190px 1fr", alignItems: "center", columnGap: 10, rowGap: 0, padding: "5px 0" }}>
    <span style={{ fontFamily: "var(--jb-mono)", fontSize: 12.5, color: "var(--jb-text-dim)" }}>{label}</span>
    <div style={{ display: "flex", alignItems: "center", gap: 8 }}>{children}{hint ? <span style={{ fontSize: 11, color: "var(--jb-text-muted)" }}>{hint}</span> : null}</div>
  </div>
);
const ARDInp = (props) => <input {...props} style={{ ...props.style }} />;
// Numeric input (audit A-06): keeps a TEXT draft while focused so a decimal
// point can be typed and the box can be cleared; parses and commits on blur
// (or Enter). `int` → whole numbers only.
const ARDNum = ({ value, onCommit, int, style }) => {
  const fmt = (v) => (v === undefined || v === null || v === "" ? "" : String(v));
  const [text, setText] = React.useState(() => fmt(value));
  const [focused, setFocused] = React.useState(false);
  React.useEffect(() => { if (!focused) setText(fmt(value)); }, [value, focused]);
  const parse = (s) => {
    const c = String(s || "").replace(int ? /[^0-9\-]/g : /[^0-9.\-]/g, "");
    const n = int ? parseInt(c, 10) : parseFloat(c);
    return isNaN(n) ? 0 : n;
  };
  return (
    <input value={text} inputMode={int ? "numeric" : "decimal"}
           {...(window.jbFocusProps || {})}
           onFocus={(e) => { setFocused(true); window.jbFocusSelect && window.jbFocusSelect(e); }}
           onChange={(e) => setText(e.target.value)}
           onBlur={() => { setFocused(false); const n = parse(text); setText(fmt(n)); onCommit(n); }}
           onKeyDown={(e) => { if (e.key === "Enter") { e.preventDefault(); e.currentTarget.blur(); } }}
           style={style} />
  );
};

const ARDefaults = ({ onClose, go }) => {
  const [, force] = React.useReducer(n => n + 1, 0);
  React.useEffect(() => DMS.subscribe(force), []);
  const saved = DMS.arDefaults();
  const [d, setD] = React.useState(saved);
  const [dirty, setDirty] = React.useState(false);
  const [file, setFile] = React.useState(null); // open setup-file dialog
  const set = (k, v) => { setD(s => ({ ...s, [k]: v })); setDirty(true); };

  const taxName = (DMS.arTaxCodes().find(t => t.code === d.defaultTaxCode) || {}).name || "";

  const Row = ARDRow;
  const Inp = ARDInp;

  const setupFiles = [
    { key: "types",   label: "Account Types",   desc: `${DMS.arAccountTypes().length} types` },
    { key: "dunning", label: "Dunning Messages",desc: `${DMS.arDunningMessages().length} messages` },
    { key: "matrix",  label: "Price Matrix",    desc: "5 markup tiers" },
    { key: "letters", label: "Letters",         desc: `${DMS.arLetterTemplates().length} templates` },
    { key: "tax",     label: "Tax Codes",       desc: `${DMS.arTaxCodes().length} codes` },
  ];

  return (
    <div className="k2b-window" style={arWindow}>
      <K2BTitlebar title="ARDFT — A/R Defaults" icon="store" onClose={onClose} />
      <div style={{ flex: 1, overflow: "auto", padding: "18px 22px" }}>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 240px", gap: 28, alignItems: "start" }}>
          {/* Defaults */}
          <div>
            <div className="k2b-section-head">Defaults</div>
            <Row label="A/R Account Number">
              <Inp value={d.arAccount} onChange={(e) => set("arAccount", e.target.value)} style={{ width: 70, fontFamily: "var(--jb-mono)" }} />
              <span style={{ fontFamily: "var(--jb-mono)", fontSize: 12.5, color: "var(--jb-text)" }}>{d.arAccountName}</span>
            </Row>
            <Row label="Finance Charge Acct">
              <Inp value={d.financeChargeAcct} onChange={(e) => set("financeChargeAcct", e.target.value)} style={{ width: 70, fontFamily: "var(--jb-mono)" }} />
              <span style={{ fontFamily: "var(--jb-mono)", fontSize: 12.5, color: "var(--jb-text-muted)" }}>{d.financeChargeAcctName}</span>
            </Row>
            <Row label="Finance Charge Journal">
              <Inp value={d.financeChargeJournal} onChange={(e) => set("financeChargeJournal", e.target.value)} style={{ width: 50, fontFamily: "var(--jb-mono)" }} />
              <span style={{ fontFamily: "var(--jb-mono)", fontSize: 12.5, color: "var(--jb-text-muted)" }}>{d.financeChargeJournalName}</span>
            </Row>
            <Row label="Monthly Finance Charge" hint="% of past-due balance">
              <ARDNum value={d.monthlyFinanceChargePct} onCommit={(n) => set("monthlyFinanceChargePct", n)} style={{ width: 70, textAlign: "right", fontFamily: "var(--jb-mono)" }} />
              <span style={{ color: "var(--jb-text-dim)" }}>%</span>
            </Row>
            <Row label="Grace Period" hint="days before charges apply">
              <ARDNum int value={d.graceDays} onCommit={(n) => set("graceDays", n)} style={{ width: 50, textAlign: "right", fontFamily: "var(--jb-mono)" }} />
              <span style={{ color: "var(--jb-text-dim)" }}>days</span>
            </Row>
            <Row label="Default Tax Code">
              <select value={d.defaultTaxCode} onChange={(e) => set("defaultTaxCode", e.target.value)}>
                {DMS.arTaxCodes().map(t => <option key={t.code} value={t.code}>{t.code}</option>)}
              </select>
              <span style={{ fontFamily: "var(--jb-mono)", fontSize: 12.5, color: "var(--jb-text-muted)" }}>{taxName}</span>
            </Row>
            <Row label="Deposit Journal">
              <Inp value={d.depositJournal} onChange={(e) => set("depositJournal", e.target.value)} style={{ width: 50, fontFamily: "var(--jb-mono)" }} />
              <span style={{ fontFamily: "var(--jb-mono)", fontSize: 12.5, color: "var(--jb-text-muted)" }}>{d.depositJournalName}</span>
            </Row>

            <div className="k2b-section-head" style={{ marginTop: 18 }}>Credit Card</div>
            <Row label="Charge Credit Card Fee">
              <select value={d.chargeCreditCardFee ? "Y" : "N"} onChange={(e) => set("chargeCreditCardFee", e.target.value === "Y")} style={{ width: 60 }}>
                <option>Y</option><option>N</option>
              </select>
            </Row>
            <Row label="Credit Card Fee" hint="% added on card payments">
              <ARDNum value={d.creditCardFeePct} onCommit={(n) => set("creditCardFeePct", n)} style={{ width: 70, textAlign: "right", fontFamily: "var(--jb-mono)" }} />
              <span style={{ color: "var(--jb-text-dim)" }}>%</span>
            </Row>
            <Row label="Credit Card Journal">
              <Inp value={d.creditCardJournal} onChange={(e) => set("creditCardJournal", e.target.value)} style={{ width: 50, fontFamily: "var(--jb-mono)" }} />
              <span style={{ fontFamily: "var(--jb-mono)", fontSize: 12.5, color: "var(--jb-text-muted)" }}>{d.creditCardJournalName}</span>
            </Row>
            <Row label="Credit Card Deposit Acct">
              <Inp value={d.creditCardDepositAcct} onChange={(e) => set("creditCardDepositAcct", e.target.value)} style={{ width: 70, fontFamily: "var(--jb-mono)" }} />
            </Row>
            <Row label="Credit Card Fee Acct">
              <Inp value={d.creditCardFeeAcct} onChange={(e) => set("creditCardFeeAcct", e.target.value)} style={{ width: 70, fontFamily: "var(--jb-mono)" }} />
            </Row>
          </div>

          {/* Setup Files */}
          <div>
            <div className="k2b-section-head">Setup Files</div>
            <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
              {setupFiles.map(s => (
                <button key={s.key} className="jb-menu-card" style={{ minHeight: 0, padding: "10px 12px" }} onClick={() => setFile(s.key)}>
                  <span className="jb-menu-card-body">
                    <span className="jb-menu-card-label" style={{ fontSize: 13 }}>{s.label}</span>
                    <span className="jb-menu-card-desc">{s.desc}</span>
                  </span>
                  <span className="jb-menu-card-arrow">›</span>
                </button>
              ))}
            </div>
          </div>
        </div>
      </div>

      <div style={{ borderTop: "1px solid var(--jb-border)", padding: "8px 16px", display: "flex", gap: 6, alignItems: "center" }}>
        <K2BButton small onClick={onClose}>ESC-Close</K2BButton>
        <K2BButton small style={{ background: dirty ? "var(--jb-yellow)" : undefined, fontWeight: 700 }}
          onClick={() => { _arToast(DMS.arUpdateDefaults(d)); setDirty(false); }}>F9-Save</K2BButton>
        {dirty ? <span style={{ fontSize: 11, color: "var(--jb-amber)" }}>Unsaved changes</span> : null}
        <div style={{ flex: 1 }} />
        <K2BButton small onClick={() => go && go("arproc")}>Processing →</K2BButton>
      </div>

      {file === "types"   && <ARTypesDialog onClose={() => setFile(null)} />}
      {file === "tax"     && <ARTaxDialog onClose={() => setFile(null)} />}
      {file === "dunning" && <ARDunningDialog onClose={() => setFile(null)} />}
      {file === "letters" && <ARLettersDialog onClose={() => setFile(null)} />}
      {file === "matrix"  && <ARMatrixDialog onClose={() => setFile(null)} />}
    </div>
  );
};

/* Account Types */
const ARTypesDialog = ({ onClose }) => {
  const [rows, setRows] = React.useState(DMS.arAccountTypes().map(r => ({ ...r })));
  const upd = (i, k, v) => setRows(rs => rs.map((r, j) => j === i ? { ...r, [k]: v } : r));
  return (
    <K2BModal title="Setup — Account Types" width={560} onClose={onClose}
      buttons={<><K2BButton onClick={onClose}>Cancel</K2BButton>
        <K2BButton style={{ background: "var(--jb-yellow)", fontWeight: 700 }} onClick={() => { _arToast(DMS.arSetTable("arAccountTypes", rows)); onClose(); }}>Save</K2BButton></>}>
      <table style={{ width: "100%", borderCollapse: "collapse", fontSize: 12.5 }}>
        <thead><tr style={{ textAlign: "left", color: "var(--jb-text-dim)" }}><th style={arTh}>Code</th><th style={arTh}>Name</th><th style={arTh}>Terms</th><th style={arThR}>Grace</th><th style={arThC}>FC Exempt</th></tr></thead>
        <tbody>
          {rows.map((r, i) => (
            <tr key={i}>
              <td style={arTdMono}>{r.code}</td>
              <td style={arTd}><input value={r.name} onChange={(e) => upd(i, "name", e.target.value)} style={{ width: "100%" }} /></td>
              <td style={arTd}><input value={r.terms} onChange={(e) => upd(i, "terms", e.target.value)} style={{ width: "100%" }} /></td>
              <td style={arTdR}><ARDNum int value={r.graceDays} onCommit={(n) => upd(i, "graceDays", n)} style={{ width: 50, textAlign: "right" }} /></td>
              <td style={arTdC}><input type="checkbox" checked={r.fcExempt} onChange={(e) => upd(i, "fcExempt", e.target.checked)} /></td>
            </tr>
          ))}
        </tbody>
      </table>
    </K2BModal>
  );
};

/* Tax Codes */
const ARTaxDialog = ({ onClose }) => {
  const [rows, setRows] = React.useState(DMS.arTaxCodes().map(r => ({ ...r })));
  const upd = (i, k, v) => setRows(rs => rs.map((r, j) => j === i ? { ...r, [k]: v } : r));
  const add = () => setRows(rs => [...rs, { code: "", name: "", rate: 0, desc: "" }]);
  return (
    <K2BModal title="Setup — Tax Codes" width={560} onClose={onClose}
      buttons={<><K2BButton onClick={add}>+ Add</K2BButton><K2BButton onClick={onClose}>Cancel</K2BButton>
        <K2BButton style={{ background: "var(--jb-yellow)", fontWeight: 700 }} onClick={() => { _arToast(DMS.arSetTable("arTaxCodes", rows.filter(r => r.code))); onClose(); }}>Save</K2BButton></>}>
      <table style={{ width: "100%", borderCollapse: "collapse", fontSize: 12.5 }}>
        <thead><tr style={{ textAlign: "left", color: "var(--jb-text-dim)" }}><th style={arTh}>Code</th><th style={arTh}>Name</th><th style={arThR}>Rate %</th><th style={arTh}>Description</th></tr></thead>
        <tbody>
          {rows.map((r, i) => (
            <tr key={i}>
              <td style={arTd}><input value={r.code} onChange={(e) => upd(i, "code", e.target.value)} style={{ width: 70 }} /></td>
              <td style={arTd}><input value={r.name} onChange={(e) => upd(i, "name", e.target.value)} style={{ width: 90 }} /></td>
              <td style={arTdR}><ARDNum value={r.rate} onCommit={(n) => upd(i, "rate", n)} style={{ width: 70, textAlign: "right" }} /></td>
              <td style={arTd}><input value={r.desc} onChange={(e) => upd(i, "desc", e.target.value)} style={{ width: "100%" }} /></td>
            </tr>
          ))}
        </tbody>
      </table>
    </K2BModal>
  );
};

/* Dunning Messages */
const ARDunningDialog = ({ onClose }) => {
  const [rows, setRows] = React.useState(DMS.arDunningMessages().map(r => ({ ...r })));
  const upd = (i, v) => setRows(rs => rs.map((r, j) => j === i ? { ...r, message: v } : r));
  return (
    <K2BModal title="Setup — Dunning Messages" width={560} onClose={onClose}
      buttons={<><K2BButton onClick={onClose}>Cancel</K2BButton>
        <K2BButton style={{ background: "var(--jb-yellow)", fontWeight: 700 }} onClick={() => { _arToast(DMS.arSetTable("arDunningMessages", rows)); onClose(); }}>Save</K2BButton></>}>
      <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
        {rows.map((r, i) => (
          <div key={i}>
            <div style={{ fontSize: 11, fontWeight: 700, color: "var(--jb-text-dim)", marginBottom: 3 }}>Oldest item {r.bucket} days</div>
            <textarea value={r.message} onChange={(e) => upd(i, e.target.value)} rows={2} style={{ width: "100%", boxSizing: "border-box", resize: "vertical" }} />
          </div>
        ))}
      </div>
    </K2BModal>
  );
};

/* Letters */
const ARLettersDialog = ({ onClose }) => {
  const [rows, setRows] = React.useState(DMS.arLetterTemplates().map(r => ({ ...r })));
  const upd = (i, k, v) => setRows(rs => rs.map((r, j) => j === i ? { ...r, [k]: v } : r));
  return (
    <K2BModal title="Setup — Collection Letters" width={520} onClose={onClose}
      buttons={<><K2BButton onClick={onClose}>Cancel</K2BButton>
        <K2BButton style={{ background: "var(--jb-yellow)", fontWeight: 700 }} onClick={() => { _arToast(DMS.arSetTable("arLetterTemplates", rows)); onClose(); }}>Save</K2BButton></>}>
      <table style={{ width: "100%", borderCollapse: "collapse", fontSize: 12.5 }}>
        <thead><tr style={{ textAlign: "left", color: "var(--jb-text-dim)" }}><th style={arTh}>Code</th><th style={arTh}>Name</th><th style={arTh}>Triggers at bucket</th></tr></thead>
        <tbody>
          {rows.map((r, i) => (
            <tr key={i}>
              <td style={arTdMono}>{r.code}</td>
              <td style={arTd}><input value={r.name} onChange={(e) => upd(i, "name", e.target.value)} style={{ width: "100%" }} /></td>
              <td style={arTd}>
                <select value={r.bucket} onChange={(e) => upd(i, "bucket", e.target.value)}>
                  {["31-60", "61-90", "90+"].map(b => <option key={b}>{b}</option>)}
                </select>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
      <div style={arHint}>Letters are generated from A/R › Processing or Reports › Send Letters and logged to the letter history.</div>
    </K2BModal>
  );
};

/* Price Matrix (parts markup tiers, referenced from the legacy AR setup) */
const ARMatrixDialog = ({ onClose }) => {
  const tiers = [
    { lo: "$0.00", hi: "$5.00", markup: "200%" },
    { lo: "$5.01", hi: "$25.00", markup: "150%" },
    { lo: "$25.01", hi: "$100.00", markup: "100%" },
    { lo: "$100.01", hi: "$500.00", markup: "60%" },
    { lo: "$500.01", hi: "and up", markup: "40%" },
  ];
  return (
    <K2BModal title="Setup — Price Matrix" width={460} onClose={onClose}
      buttons={<K2BButton style={{ background: "var(--jb-yellow)", fontWeight: 700 }} onClick={onClose}>Close</K2BButton>}>
      <div style={{ fontSize: 12, color: "var(--jb-text-dim)", marginBottom: 10 }}>Cost-based markup tiers used when charging parts to an A/R account.</div>
      <table style={{ width: "100%", borderCollapse: "collapse", fontSize: 12.5 }}>
        <thead><tr style={{ textAlign: "left", color: "var(--jb-text-dim)" }}><th style={arTh}>Cost From</th><th style={arTh}>Cost To</th><th style={arThR}>Markup</th></tr></thead>
        <tbody>
          {tiers.map((t, i) => (
            <tr key={i} style={{ borderBottom: "1px dotted var(--jb-border)" }}>
              <td style={arTdMono}>{t.lo}</td><td style={arTdMono}>{t.hi}</td><td style={{ ...arTdR, fontWeight: 700 }}>{t.markup}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </K2BModal>
  );
};

Object.assign(window, { ARDefaults });