/* 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 — Accounting Office.
// Ties together the receivables & payables the integration engine generates:
//   A/R Aging · A/P Aging · Bank Reconciliation · Month-End Close.
// Reads live from DMSCore; payments and reconciliation post to the GL.

const AcctOffice = ({ onClose, go }) => {
  const [, force] = React.useReducer(n => n + 1, 0);
  React.useEffect(() => DMS.subscribe(force), []);
  const [tab, setTab]   = React.useState(() => {
    const hint = (typeof window !== "undefined" && window.__aoTab) || "ar";
    if (typeof window !== "undefined") window.__aoTab = null;
    return hint;
  });
  const [modal, setModal] = React.useState(null);

  const money = (n) => "$" + Number(n || 0).toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 });
  const act = (r) => Promise.resolve(r).then(x => { window.k2bToast && window.k2bToast(x.msg, x.ok ? "ok" : "warn", 3200); return x; });   // RC33 (mpx): bills / payments are SERVER commands (promises)
  const daysSince = (iso) => iso ? Math.floor((Date.now() - new Date(iso)) / 86400000) : 0;
  const bucket = (d) => d <= 30 ? "0-30" : d <= 60 ? "31-60" : d <= 90 ? "61-90" : "90+";

  // ── Build A/R from the engine ──
  const deals = DMS.deals(), wr = DMS.warrantyReceivables(), fr = DMS.factoryReceivables();
  const stageOf = (d) => (DMS.dealStage ? DMS.dealStage(d) : (d.stage || "Posted"));
  const arRows = [
    // Contracts in transit = posted, unfunded, FINANCED deals. Cash deals were
    // paid at delivery — nothing in transit (ONE PATH).
    ...deals.filter(d => d.postedToGL && stageOf(d) !== "Funded" && (+d.amtFinanced || 0) > 0).map(d => ({
      type: "Contract in Transit", who: d.buyer, ref: d.id, acct: "205",
      age: daysSince(d.delivered || d.created), amount: d.amtFinanced || 0,
      stage: stageOf(d), dealId: d.id, lender: d.lender || "", deal: d,
      // Posting sets "Sent for Funding"; legacy posted deals without one read the same.
      funding: (d.fundingStatus || "Sent for Funding") + " · " + daysSince(d.sentForFundingAt || d.delivered || d.created) + "d",
    })),
    ...wr.filter(w => !w.paid && w.status !== "Debited" && !w.voided).map(w => ({   // RC33 fix round: what is still OPEN on the claim
      type: "Warranty Claim", who: w.ro, ref: w.claim, acct: "263",
      age: daysSince(w.submittedDate || w.closed), amount: Math.max(0, Math.round((+w.amount || 0) * 100) - Math.round((+w.received || 0) * 100) - Math.round((+w.debitedOpen || 0) * 100)) / 100,
    })),
    ...fr.filter(f => !f.received).map(f => ({
      type: "Factory Incentive", who: f.program, ref: f.deal, acct: "261",
      age: f.age || 0, amount: f.claimed,
    })),
  ];
  const arTotal = arRows.reduce((s, r) => s + r.amount, 0);

  // ── A/P from the engine ──
  const payables = DMS.payables();
  const apOpen = payables.filter(p => p.status === "Open");
  const apRows = apOpen.map(p => ({ ...p, age: daysSince(p.date) }));
  const apTotal = apRows.reduce((s, p) => s + p.amount, 0);

  // aging summaries
  const agingSummary = (rows) => {
    const b = { "0-30": 0, "31-60": 0, "61-90": 0, "90+": 0 };
    rows.forEach(r => b[bucket(r.age)] += r.amount);
    return b;
  };
  const arAging = agingSummary(arRows);
  const apAging = agingSummary(apRows);

  const br = DMS.bankRec();
  const checklist = DMS.monthEndChecklist();
  const meReady = checklist.every(c => c.done);

  const TABS = [
    { k: "ar",      label: `A/R Aging (${money(arTotal)})` },
    { k: "ap",      label: `A/P Aging (${money(apTotal)})` },
    { k: "bank",    label: "Bank Rec" },
    { k: "monthend",label: "Month-End Close" },
  ];

  return (
    <div className="k2b-window" style={{ width: "100%", maxWidth: 1180, height: "calc(100vh - 110px)",
                                          margin: "0 auto", display: "flex", flexDirection: "column",
                                          background: "var(--jb-surface, #F4F4F4)" }}>
      <K2BTitlebar title="Accounting Office" icon="store" onClose={onClose} />
      {/* RC20 (fops): office only — ROs / parts sales since RC16 with no journal entry, "Post it now" per item */}
      {window.FopsNotInBooks && <window.FopsNotInBooks />}

      <div style={{ display: "flex", gap: 4, padding: "10px 16px 0", borderBottom: "1px solid var(--jb-border, #C0C0C0)", flexWrap: "wrap" }}>
        {TABS.map(t => (
          <button key={t.k} className="k2b-button small" onClick={() => setTab(t.k)}
                  style={{ background: tab === t.k ? "var(--jb-navy, #1B66A8)" : undefined,
                           color: tab === t.k ? "#FFF" : undefined, fontWeight: tab === t.k ? 700 : 500 }}>
            {t.label}
          </button>
        ))}
      </div>

      <div style={{ flex: 1, overflow: "auto", padding: "12px 16px" }}>

        {/* ── A/R AGING ── */}
        {tab === "ar" && (
          <>
            <AgingBar buckets={arAging} money={money} total={arTotal} label="Receivables" />
            <table style={aoTable}>
              <thead><tr style={aoHead}>
                <th style={aTh}>Type</th><th style={aThL}>Customer / Source</th><th style={aThL}>Ref</th>
                <th style={aTh}>Acct</th><th style={aThR}>Age</th><th style={aTh}>Bucket</th><th style={aThR}>Amount</th><th style={aThC}>Stage / Action</th>
              </tr></thead>
              <tbody>
                {arRows.length === 0 && <tr><td colSpan={8} style={aoEmpty}>No open receivables. ✓</td></tr>}
                {arRows.sort((a, b) => b.age - a.age).map((r, i) => (
                  <tr key={i} style={{ borderBottom: "1px dotted #DDD" }}>
                    <td style={aTd}>{r.type}</td>
                    <td style={aTd}>{r.who}{r.lender ? <span style={{ color: "#888" }}> · {r.lender}</span> : null}</td>
                    <td style={aTdMono}>{r.ref}</td>
                    <td style={aTdMono}>{r.acct}</td>
                    <td style={aTdR}>{r.age}d</td>
                    <td style={aTd}><AgeTag b={bucket(r.age)} /></td>
                    <td style={aTdR}>{money(r.amount)}</td>
                    <td style={aTdC}>
                      {r.dealId ? (
                        <span style={{ display: "inline-flex", alignItems: "center", gap: 6, flexWrap: "wrap", justifyContent: "center" }}>
                          <span data-ao="funding" title={r.stage} style={{ fontSize: 10.5, fontWeight: 800, color: "#FFF", background: "var(--jb-navy, #11337A)", borderRadius: 999, padding: "1px 8px", whiteSpace: "nowrap" }}>{r.funding}</span>
                          {window.DealAdjustButton && <window.DealAdjustButton deal={r.deal} go={go} small />}
                          <button className="k2b-button small" style={{ background: "var(--jb-green-tint, #E6F7EC)", color: "var(--jb-green, #0E7A37)", fontWeight: 700 }}
                                  title="Lender funds received — clears CIT (one shared helper)"
                                  onClick={() => window.jbFundDeal ? window.jbFundDeal(r.dealId) : act({ ok: false, msg: "Ledger offline." })}>Mark Funded</button>
                        </span>
                      ) : ""}
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
            <div style={{ marginTop: 6, fontSize: 11, color: "#666" }}>
              A/R is built live from posted-unfunded financed contracts (205 — cash deals are paid at delivery and never in transit), open warranty claims (263), and factory receivables (261).
              Mark Funded here or in Funding; other items resolve from the Dashboard or the Service/Sales screens.
            </div>
          </>
        )}

        {/* ── A/P AGING ── */}
        {tab === "ap" && (
          <>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 8 }}>
              <AgingBar buckets={apAging} money={money} total={apTotal} label="Payables" />
            </div>
            <div style={{ marginBottom: 8 }}>
              <K2BButton small onClick={() => setModal({ type: "addAP" })} style={{ background: "var(--jb-yellow)", fontWeight: 700 }}>+ Enter Vendor Bill</K2BButton>
            </div>
            <table style={aoTable}>
              <thead><tr style={aoHead}>
                <th style={aThL}>Vendor</th><th style={aThL}>Invoice</th><th style={aTh}>Acct</th>
                <th style={aTh}>Date</th><th style={aThR}>Age</th><th style={aTh}>Bucket</th><th style={aThR}>Amount</th><th style={aThC}>Action</th>
              </tr></thead>
              <tbody>
                {apRows.length === 0 && <tr><td colSpan={8} style={aoEmpty}>No open payables. ✓</td></tr>}
                {apRows.sort((a, b) => b.age - a.age).map((p, i) => (
                  <tr key={i} style={{ borderBottom: "1px dotted #DDD" }}>
                    <td style={aTd}>{p.vendor}</td>
                    <td style={aTdMono}>{p.inv}</td>
                    <td style={aTdMono}>{p.acct}</td>
                    <td style={aTdMono}>{new Date(p.date).toLocaleDateString()}</td>
                    <td style={aTdR}>{p.age}d</td>
                    <td style={aTd}><AgeTag b={bucket(p.age)} /></td>
                    <td style={aTdR}>{money(p.amount)}</td>
                    <td style={aTdC}><button className="k2b-button small" style={{ background: "var(--jb-yellow)", fontWeight: 700 }} onClick={() => (() => {   // RC33 (mpx): a bill is paid by a CHECK the server writes (Check Writing prints it) or by ACH / card / wire with the real confirmation — never a made-up check number
                      const ref = window.prompt(`Pay ${p.vendor} — invoice ${p.inv}.\n\nLeave blank to write a CHECK (print it in Check Writing).\nPaid by ACH / card / wire: type the confirmation number.`, "");
                      if (ref === null) return;
                      act(String(ref).trim() ? DMS.payInvoice(p.inv, { method: "ach", ref: String(ref).trim() }) : DMS.payInvoice(p.inv, { method: "check" }));
                    })()}>Pay</button></td>
                  </tr>
                ))}
              </tbody>
            </table>
          </>
        )}

        {/* ── BANK REC ── */}
        {tab === "bank" && (
          <div style={{ maxWidth: 720 }}>
            <div style={{ fontSize: 15, fontWeight: 700, color: "var(--jb-navy)", marginBottom: 2 }}>{br.account}</div>
            <div style={{ fontSize: 12, color: "#666", marginBottom: 12 }}>Statement date {br.statementDate ? new Date(br.statementDate).toLocaleDateString() : ""}</div>

            {(() => {
              const oc = (br.outstandingChecks || []).reduce((s, c) => s + c.amount, 0);
              const dit = (br.depositsInTransit || []).reduce((s, d) => s + d.amount, 0);
              const adjBank = (br.bankBalance || 0) - oc + dit;
              const diff = +(adjBank - (br.bookBalance || 0)).toFixed(2);
              return (
                <>
                  <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
                    <div style={aoPanel}>
                      <div style={aoPanelHd}>Per Bank Statement</div>
                      <RecLine label="Bank balance" val={money(br.bankBalance)} />
                      <div style={{ fontSize: 11, fontWeight: 700, color: "var(--k2b-maroon)", margin: "8px 0 2px" }}>Less: Outstanding Checks</div>
                      {(br.outstandingChecks || []).map(c => <RecLine key={c.num} label={`#${c.num} ${c.payee}`} val={"(" + money(c.amount) + ")"} small />)}
                      <div style={{ fontSize: 11, fontWeight: 700, color: "var(--k2b-green)", margin: "8px 0 2px" }}>Plus: Deposits in Transit</div>
                      {(br.depositsInTransit || []).map(d => <RecLine key={d.ref} label={d.desc} val={money(d.amount)} small />)}
                      <div style={{ borderTop: "1px solid #808080", marginTop: 6, paddingTop: 4 }}>
                        <RecLine label="Adjusted bank balance" val={money(adjBank)} bold />
                      </div>
                    </div>
                    <div style={aoPanel}>
                      <div style={aoPanelHd}>Per Books</div>
                      <RecLine label="Book balance (202)" val={money(br.bookBalance)} />
                      <RecLine label="Bank fees" val={"(" + money(br.bankFees) + ")"} small />
                      <RecLine label="Interest earned" val={money(br.interestEarned)} small />
                      <div style={{ borderTop: "1px solid #808080", marginTop: 6, paddingTop: 4 }}>
                        <RecLine label="Adjusted book balance" val={money((br.bookBalance || 0) - (br.bankFees || 0) + (br.interestEarned || 0))} bold />
                      </div>
                      <div style={{ marginTop: 16, padding: "10px 12px", borderRadius: 6,
                                    background: Math.abs(diff) < 0.01 ? "var(--jb-green-tint, #E6F7EC)" : "var(--jb-amber-tint, #FBF3E0)",
                                    border: "1px solid " + (Math.abs(diff) < 0.01 ? "var(--jb-green, #16A34A)" : "var(--jb-amber, #D9920A)") }}>
                        <div style={{ fontSize: 12, fontWeight: 700, color: Math.abs(diff) < 0.01 ? "var(--jb-green)" : "#9A6700" }}>
                          {Math.abs(diff) < 0.01 ? "✓ In balance" : `⚠ Out of balance by ${money(Math.abs(diff))}`}
                        </div>
                      </div>
                    </div>
                  </div>
                  <div style={{ marginTop: 14, display: "flex", gap: 8, alignItems: "center" }}>
                    <K2BButton onClick={() => act(DMS.clearBankRec())}
                               style={{ background: br.cleared ? undefined : "var(--jb-yellow)", fontWeight: 700 }}
                               disabled={br.cleared}>
                      {br.cleared ? "✓ Reconciled" : "Clear Reconciliation"}
                    </K2BButton>
                    {br.cleared && <span style={{ fontSize: 12, color: "var(--jb-green)" }}>Reconciled {br.clearedDate ? new Date(br.clearedDate).toLocaleDateString() : ""}</span>}
                  </div>
                </>
              );
            })()}
          </div>
        )}

        {/* ── MONTH-END CLOSE ── */}
        {tab === "monthend" && (
          <div style={{ maxWidth: 720 }}>
            <div style={{ fontSize: 15, fontWeight: 700, color: "var(--jb-navy)", marginBottom: 2 }}>Month-End Close Checklist</div>
            <div style={{ fontSize: 12, color: "#666", marginBottom: 14 }}>
              Live readiness driven by the integration engine. Each item turns green when its underlying exceptions clear.
            </div>
            <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
              {checklist.map(c => (
                <div key={c.key} style={{ display: "flex", alignItems: "center", gap: 12, padding: "10px 14px",
                                          background: "#FFF", border: "1px solid var(--jb-border, #C0C0C0)", borderRadius: 6,
                                          borderLeft: "4px solid " + (c.done ? "var(--jb-green, #16A34A)" : "var(--jb-amber, #D9920A)") }}>
                  <span style={{ fontSize: 18 }}>{c.done ? "✅" : "⬜"}</span>
                  <div style={{ flex: 1 }}>
                    <div style={{ fontSize: 13, fontWeight: 600, color: "var(--jb-text)" }}>{c.label}</div>
                    <div style={{ fontSize: 11, color: c.done ? "var(--jb-green)" : "#9A6700" }}>{c.detail}</div>
                  </div>
                  {!c.done && c.key === "bank" && <K2BButton small onClick={() => setTab("bank")}>Go to Bank Rec</K2BButton>}
                  {!c.done && c.key !== "bank" && <K2BButton small onClick={() => go && go("home")}>Resolve on Dashboard</K2BButton>}
                </div>
              ))}
            </div>
            <div style={{ marginTop: 16, padding: "14px 18px", borderRadius: 8,
                          background: meReady ? "var(--jb-green-tint, #E6F7EC)" : "var(--jb-surface-2, #F0F0F0)",
                          border: "1px solid " + (meReady ? "var(--jb-green, #16A34A)" : "var(--jb-border, #C0C0C0)") }}>
              <div style={{ fontWeight: 700, fontSize: 14, color: meReady ? "var(--jb-green)" : "var(--jb-text-dim, #666)", marginBottom: 4 }}>
                {meReady ? "✓ Ready to close the period" : "Not ready to close"}
              </div>
              <div style={{ fontSize: 12, color: "#666", marginBottom: 10 }}>
                {meReady ? "All schedules reconcile and exceptions are clear. You may post the financial statement and submit to GM."
                         : `${checklist.filter(c => !c.done).length} item(s) outstanding. Resolve them before closing.`}
              </div>
              <K2BButton disabled={!meReady} style={{ background: meReady ? "var(--jb-yellow)" : undefined, fontWeight: 700 }}
                         onClick={() => { go && go("gmacct"); window.k2bToast && window.k2bToast("Opening GM Accounting to post & submit the statement.", "ok"); }}>
                Post Financial Statement & Submit to GM →
              </K2BButton>
            </div>
          </div>
        )}
      </div>

      <div style={{ borderTop: "1px solid var(--jb-border, #C0C0C0)", padding: "8px 16px", display: "flex", gap: 6, flexWrap: "wrap" }}>
        <K2BButton small onClick={onClose}>ESC-Close</K2BButton>
        <K2BButton small onClick={() => go && go("accounting")}>F2-GL Inquiry</K2BButton>
        <K2BButton small onClick={() => go && go("docentry")}>F3-Doc Entry</K2BButton>
        <K2BButton small onClick={() => go && go("gmacct")}>F4-GM Statement</K2BButton>
        <K2BButton small onClick={() => go && go("home")}>F5-Dashboard</K2BButton>
      </div>

      {modal && modal.type === "addAP" && <AddAPDialog onClose={() => setModal(null)} act={act} />}
    </div>
  );
};

const AddAPDialog = ({ onClose, act }) => {
  const [f, setF] = React.useState({ vendor: "", inv: "", amount: "", acct: "0699" });
  const set = (k, v) => setF(s => ({ ...s, [k]: v }));
  return (
    <K2BModal title="Enter Vendor Bill" onClose={onClose}
              buttons={<>
                <K2BButton onClick={onClose}>Cancel</K2BButton>
                <K2BButton style={{ background: "var(--jb-yellow)", fontWeight: 700 }}
                           onClick={async () => { if (!f.vendor || !f.amount || !f.inv) return act({ ok: false, msg: "Vendor, invoice # and amount are required." }); const r = await act(DMS.addPayable(f)); if (r && r.ok) onClose(); }}>Enter Bill</K2BButton>
              </>}>
      <div style={{ display: "grid", gridTemplateColumns: "100px 1fr", rowGap: 8, columnGap: 8, alignItems: "center", fontSize: 13 }}>
        <span>Vendor:</span><input value={f.vendor} onChange={(e) => set("vendor", e.target.value)} style={aoInp} />
        <span>Invoice #:</span><input value={f.inv} onChange={(e) => set("inv", e.target.value)} style={aoInp} />
        <span>Amount:</span><input value={f.amount} onChange={(e) => set("amount", e.target.value.replace(/[^0-9.]/g, ""))} style={{ ...aoInp, width: 120 }} />
        <span>Expense Acct:</span><input value={f.acct} onChange={(e) => set("acct", e.target.value)} style={{ ...aoInp, width: 100 }} />
      </div>
    </K2BModal>
  );
};

const AgingBar = ({ buckets, money, total, label }) => (
  <div style={{ display: "flex", gap: 8, marginBottom: 10, flexWrap: "wrap" }}>
    {["0-30", "31-60", "61-90", "90+"].map(b => {
      const tone = b === "0-30" ? "var(--jb-green, #16A34A)" : b === "31-60" ? "#B26A00" : "#C03546";
      return (
        <div key={b} style={{ flex: 1, minWidth: 110, background: "#FFF", border: "1px solid var(--jb-border, #C0C0C0)", borderRadius: 6, padding: "8px 12px", borderTop: "3px solid " + tone }}>
          <div style={{ fontSize: 10, color: "#666", textTransform: "uppercase", letterSpacing: "0.04em", fontWeight: 600 }}>{b} days</div>
          <div style={{ fontSize: 16, fontWeight: 700, color: "var(--jb-navy)" }}>{money(buckets[b])}</div>
        </div>
      );
    })}
    <div style={{ flex: 1, minWidth: 110, background: "var(--jb-navy, #11337A)", borderRadius: 6, padding: "8px 12px" }}>
      <div style={{ fontSize: 10, color: "#C8D0E4", textTransform: "uppercase", letterSpacing: "0.04em", fontWeight: 600 }}>Total {label}</div>
      <div style={{ fontSize: 16, fontWeight: 700, color: "#FFF" }}>{money(total)}</div>
    </div>
  </div>
);

const AgeTag = ({ b }) => {
  const tone = b === "0-30" ? { bg: "var(--jb-green-tint, #E6F7EC)", fg: "var(--jb-green, #16A34A)" }
             : b === "31-60" ? { bg: "var(--jb-amber-tint, #FBF3E0)", fg: "#9A6700" }
             : { bg: "#FBE4E6", fg: "#C03546" };
  return <span style={{ fontSize: 10, fontWeight: 700, padding: "1px 7px", borderRadius: 9, background: tone.bg, color: tone.fg }}>{b}</span>;
};

const RecLine = ({ label, val, small, bold }) => (
  <div style={{ display: "flex", justifyContent: "space-between", padding: small ? "1px 0" : "3px 0",
                fontSize: small ? 11 : 13, fontWeight: bold ? 700 : 400, color: "var(--jb-navy, #11337A)" }}>
    <span style={{ color: small ? "#666" : undefined }}>{label}</span>
    <span style={{ fontFamily: "'Courier Prime', monospace" }}>{val}</span>
  </div>
);

const aoInp = { background: "var(--k2b-yellow, #FFFFE1)", border: "1px solid #808080", padding: "3px 6px", fontFamily: "var(--font-ui)", fontSize: 13, width: "100%", boxSizing: "border-box" };
const aoTable = { width: "100%", borderCollapse: "collapse", fontFamily: "'Courier Prime', monospace", fontSize: 12 };
const aoHead = { background: "#C0C0C0", color: "var(--k2b-maroon, #8a1c1c)", borderBottom: "1px solid #808080", position: "sticky", top: 0 };
const aTh = { padding: "3px 6px", textAlign: "left", whiteSpace: "nowrap" };
const aThL = { ...aTh };
const aThR = { ...aTh, textAlign: "right" };
const aThC = { ...aTh, textAlign: "center" };
const aTd = { padding: "3px 6px", color: "var(--k2b-navy, #11337A)" };
const aTdMono = { ...aTd, fontWeight: 700, color: "var(--k2b-blue-data-dk, #11337A)" };
const aTdR = { ...aTd, textAlign: "right" };
const aTdC = { ...aTd, textAlign: "center" };
const aoEmpty = { padding: 14, textAlign: "center", color: "var(--k2b-green, #16A34A)" };
const aoPanel = { background: "#FFF", border: "1px solid var(--jb-border, #C0C0C0)", borderRadius: 6, padding: "12px 14px" };
const aoPanelHd = { fontSize: 12, fontWeight: 700, color: "var(--k2b-maroon, #8a1c1c)", textTransform: "uppercase", letterSpacing: "0.04em", marginBottom: 8, borderBottom: "1px solid #DDD", paddingBottom: 4 };

Object.assign(window, { AcctOffice });