/* 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. */
// K2B DMS — GL Posting Map (full, editable).
// Every transaction in every department, fully mapped to the chart of accounts:
//   Vehicle Sales & F&I · Inventory & Floorplan · Service · Parts · Core Bank ·
//   Accounting. Each editable line's account number can be changed inline — it
//   writes through DMS.setAcctMap so EVERY future posting uses the new account
//   (one source of truth, shared with Settings → GL Flow).

const pmAcctName = (acct) => {
  const a = String(acct);
  const coa = window.GM_COA || [];
  const hit = coa.find(e => String(Array.isArray(e) ? e[0] : (e && (e.acct || e.num))) === a);
  if (hit) return Array.isArray(hit) ? (hit[1] || "") : (hit.name || hit.desc || "");
  const fb = { "300": "Accounts payable — trade", "325": "Payroll taxes withheld", "246": "Core inventory", "999": "Labor applied / clearing" };
  return fb[a] || "";
};

const PM_DEPT_ICON = {
  "Vehicle Sales & F&I": "🚗", "Inventory & Floorplan": "🏷", "Service": "🔧",
  "Parts": "📦", "Core Bank": "🔋", "Accounting": "📒",
};

// An account cell — editable input when in edit mode AND the line is
// account-mapped. HOISTED to module scope (was previously defined inside
// GLPostingMap, which gave it a new function identity every render and
// remounted the <input> on each keystroke — the "single character at a time"
// bug). Props carry the per-render closures it needs.
const PMAcctCell = ({ line, editing, draft, setDraft }) => {
  if (editing && line.editable) {
    const val = line.key in draft ? draft[line.key] : line.acct;
    return (
      <span style={{ display: "inline-flex", flexDirection: "column" }}>
        <input value={val}
               onChange={(e) => setDraft(d => ({ ...d, [line.key]: e.target.value }))}
               style={{ width: 70, padding: "2px 5px", border: "1px solid #C8CCD2",
                        fontFamily: "var(--jb-mono, monospace)", fontSize: 12.5, fontWeight: 700,
                        color: "var(--jb-navy)", textAlign: "center",
                        background: (line.key in draft && draft[line.key] !== line.acct) ? "#FFFBEA" : "#FFF" }} />
      </span>
    );
  }
  return (
    <span style={{ fontWeight: 700, color: line.editable ? "var(--jb-navy)" : "#777" }}
          title={line.editable ? "Editable mapping" : "Fixed account"}>{line.acct}</span>
  );
};

const GLPostingMap = ({ onClose, go }) => {
  const [, force] = React.useReducer(n => n + 1, 0);
  React.useEffect(() => (window.DMS && window.DMS.subscribe) ? window.DMS.subscribe(force) : undefined, []);
  const D = window.DMS;
  const map = D && D.getPostingMap ? D.getPostingMap() : [];
  const [editing, setEditing] = React.useState(false);
  const [draft, setDraft] = React.useState({});       // acctKey -> new number
  const [filter, setFilter] = React.useState("ALL");

  const dirty = Object.keys(draft).length > 0;
  const save = () => {
    const r = D.setAcctMap(draft);
    setDraft({});
    window.k2bToast && window.k2bToast(r.msg, r.ok ? "ok" : "warn", 3600);
    return r;
  };
  // RC35 (brd): a store switch asks first (SPEC 4.4)
  if (window.useK2BUnsaved) window.useK2BUnsaved("posting-map", { label: "GL Posting Map", isDirty: () => dirty, save: () => { const r = save(); return !!(r && r.ok !== false); }, discard: () => setDraft({}) });
  const reset = () => {
    if (!window.confirm("Reset every GL account mapping back to the standard GM chart?")) return;
    const r = D.resetAcctMap();
    setDraft({});
    window.k2bToast && window.k2bToast(r.msg, "ok", 3200);
  };

  const depts = filter === "ALL" ? map : map.filter(d => d.dept === filter);

  const sideColor = (s) => s.startsWith("DR") ? "var(--jb-navy, #11337A)" : "var(--k2b-maroon, #8a1c1c)";

  const filterBtn = (k, label) => (
    <button key={k} className="k2b-button small" onClick={() => setFilter(k)}
            style={{ fontWeight: filter === k ? 700 : 400, background: filter === k ? "var(--jb-yellow)" : undefined }}>{label}</button>
  );

  return (
    <div className="k2b-window" style={{ width: "100%", maxWidth: 1240, height: "calc(100vh - 110px)",
                                          margin: "0 auto", display: "flex", flexDirection: "column",
                                          background: "var(--jb-surface, #F4F4F4)" }}>
      <K2BTitlebar title="GL Posting Map — all departments" icon="store" onClose={onClose} />

      <div style={{ display: "flex", gap: 6, alignItems: "center", padding: "10px 16px",
                    borderBottom: "1px solid var(--jb-border)", flexWrap: "wrap" }}>
        {filterBtn("ALL", "All")}
        {map.map(d => filterBtn(d.dept, d.dept.replace(" & ", " / ")))}
        <span style={{ flex: 1 }} />
        {editing ? (
          <>
            <button className="k2b-button" onClick={save} disabled={!dirty}
                    style={{ fontWeight: 700, background: dirty ? "var(--jb-yellow)" : undefined }}>Save Mappings</button>
            <button className="k2b-button" onClick={reset}>Reset to GM</button>
            <button className="k2b-button" onClick={() => { setDraft({}); setEditing(false); }}>Done</button>
            {dirty && <span style={{ fontSize: 12, color: "var(--k2b-maroon)", fontWeight: 700 }}>● unsaved</span>}
          </>
        ) : (
          <button className="k2b-button" onClick={() => setEditing(true)} style={{ fontWeight: 700 }}>✎ Edit Mappings</button>
        )}
      </div>

      <div style={{ display: "flex", gap: 6, alignItems: "center", padding: "6px 16px",
                    fontSize: 11.5, color: "var(--jb-text-dim)", borderBottom: "1px solid var(--jb-border)" }}>
        <b style={{ color: "var(--jb-navy)" }}>DR</b> debit · <b style={{ color: "var(--k2b-maroon)" }}>CR</b> credit ·
        bold blue accounts are <b>editable</b> here (change one and every future posting follows) · grey accounts are fixed (A/P, taxes, clearing).
        {go && <><span style={{ flex: 1 }} /><button className="k2b-button small" onClick={() => go("fixedopsgl")}>Live postings ▸</button></>}
      </div>

      <div style={{ flex: 1, overflow: "auto", padding: "12px 16px" }}>
        {depts.map(d => (
          <div key={d.dept} style={{ marginBottom: 20 }}>
            <div style={{ fontSize: 14, fontWeight: 700, color: "var(--jb-navy)", marginBottom: 8,
                          display: "flex", alignItems: "center", gap: 8 }}>
              <span style={{ fontSize: 18 }}>{PM_DEPT_ICON[d.dept] || "▦"}</span>{d.dept}
            </div>
            <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(360px, 1fr))", gap: 12 }}>
              {d.txns.map(t => (
                <div key={t.doc} style={{ background: "#FFF", border: "1px solid var(--jb-border)", padding: "10px 14px" }}>
                  <div style={{ display: "flex", alignItems: "baseline", gap: 8, marginBottom: 2 }}>
                    <span style={{ fontSize: 12.5, fontWeight: 700, color: "var(--jb-navy)" }}>{t.doc}</span>
                    <span style={{ flex: 1 }} />
                    <span style={{ fontSize: 10.5, fontFamily: "var(--jb-mono)", color: "#999" }}>jrn {t.jrn} · {t.prefix}</span>
                  </div>
                  <div style={{ fontSize: 10.5, color: "var(--jb-text-muted, #98A0AC)", marginBottom: 6 }}>{t.trigger}</div>
                  <table style={{ width: "100%", borderCollapse: "collapse", fontSize: 12, fontFamily: "var(--jb-mono)" }}>
                    <tbody>
                      {t.lines.map((l, i) => (
                        <tr key={i} style={{ borderBottom: "1px dotted #E4E4E4" }}>
                          <td style={{ padding: "2px 6px", width: 48, fontWeight: 700, color: sideColor(l.side) }}>{l.side}</td>
                          <td style={{ padding: "2px 6px", width: 84 }}><PMAcctCell line={l} editing={editing} draft={draft} setDraft={setDraft} /></td>
                          <td style={{ padding: "2px 6px", color: "#555", whiteSpace: "normal" }}>
                            {pmAcctName(l.key in draft ? draft[l.key] : l.acct) || l.memo}
                            {pmAcctName(l.acct) && <span style={{ color: "#AAA" }}> · {l.memo}</span>}
                          </td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>
              ))}
            </div>
          </div>
        ))}
        <div style={{ fontSize: 11, color: "var(--jb-text-dim)", marginTop: 6, lineHeight: 1.6 }}>
          This map is the single source of truth for how the DMS posts. The same editable accounts drive
          <b> Settings → GL Flow</b>; live posted entries appear in <b>Fixed Ops → GL Posting</b> and <b>General Ledger</b>.
          Conditional lines (trade, tax, F&I products) post only when present on the document.
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { GLPostingMap });