/* 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 Reports (scan 4).
// A landing menu of the seven legacy reports + a viewer screen with a left
// rail so every report button lands on a real, working report.

const AR_REPORTS = [
  { key: "list",   label: "Customer List",     desc: "All A/R accounts & terms",        icon: "📋" },
  { key: "stmt",   label: "Statement Analysis",desc: "Per-account aging matrix",         icon: "▦" },
  { key: "tb",     label: "Trial Balance",     desc: "A/R balances tie to GL 220",       icon: "≡" },
  { key: "delinq", label: "Delinquency Report",desc: "Past-due accounts by age",         icon: "⚠" },
  { key: "deposit",label: "Deposit Report",    desc: "Cash receipts by day",             icon: "💵" },
  { key: "letters",label: "Send Letters",      desc: "Generate & log dunning letters",   icon: "✉" },
  { key: "audit",  label: "AR Audit",          desc: "A/R activity trail",               icon: "🔐" },
];

const ARReportsMenu = ({ go, onClose }) => (
  <MenuLanding
    title="A/R Reports"
    legacyName="AR Reports"
    subtitle="Aging, statements, deposits, collections and the A/R audit trail."
    go={go} onClose={onClose}
    groups={[{ wide: true, items: AR_REPORTS.map(r => ({
      label: r.label, desc: r.desc, icon: r.icon, target: "arreportview",
      pre: () => { window.__arReport = r.key; },
    })) }]}
  />
);

const ARReportView = ({ onClose, go }) => {
  const [, force] = React.useReducer(n => n + 1, 0);
  React.useEffect(() => DMS.subscribe(force), []);
  const [rep, setRep] = React.useState(() => {
    const h = (typeof window !== "undefined" && window.__arReport) || "list";
    if (typeof window !== "undefined") window.__arReport = null;
    return h;
  });

  const summary = DMS.arSummary();
  const customers = DMS.arCustomers();
  const meta = AR_REPORTS.find(r => r.key === rep) || AR_REPORTS[0];

  return (
    <div className="k2b-window" style={arWindow}>
      <K2BTitlebar title={`A/R Reports — ${meta.label}`} icon="store" onClose={onClose} />
      <div style={{ display: "flex", flex: 1, minHeight: 0 }}>
        {/* left rail */}
        <div style={{ width: 220, borderRight: "1px solid var(--jb-border)", overflow: "auto", padding: "8px 0" }}>
          {AR_REPORTS.map(r => {
            const active = r.key === rep;
            return (
              <div key={r.key} onClick={() => setRep(r.key)}
                   style={{ padding: "9px 14px", cursor: "pointer", display: "flex", gap: 9, alignItems: "center",
                            background: active ? "var(--jb-blue-tint)" : "transparent",
                            borderLeft: "3px solid " + (active ? "var(--jb-blue)" : "transparent") }}>
                <span style={{ fontSize: 14 }}>{r.icon}</span>
                <span style={{ fontSize: 12.5, fontWeight: active ? 700 : 500, color: active ? "var(--jb-blue)" : "var(--jb-text)" }}>{r.label}</span>
              </div>
            );
          })}
        </div>
        {/* content */}
        <div style={{ flex: 1, minWidth: 0, overflow: "auto", padding: "16px 20px" }}>
          <div style={{ fontSize: 17, fontWeight: 700, color: "var(--jb-text)", marginBottom: 2 }}>{meta.label}</div>
          <div style={{ fontSize: 12, color: "var(--jb-text-dim)", marginBottom: 14 }}>{window.K2BStore ? (window.K2BStore.pageId() || "") + " — " + window.K2BStore.branding().dba : ""} · {new Date().toLocaleDateString()}</div>

          {rep === "list"   && <ARRepList customers={customers} />}
          {rep === "stmt"   && <ARRepStatementAnalysis summary={summary} />}
          {rep === "tb"     && <ARRepTrialBalance summary={summary} />}
          {rep === "delinq" && <ARRepDelinquency summary={summary} />}
          {rep === "deposit"&& <ARRepDeposits />}
          {rep === "letters"&& <ARRepLetters />}
          {rep === "audit"  && <ARRepAudit />}
        </div>
      </div>
      <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={() => window.k2bToast && window.k2bToast(`${meta.label} queued to printer LP1.`, "ok")}>F9-Print</K2BButton>
        <K2BButton small onClick={() => window.k2bToast && window.k2bToast(`${meta.label} exported to ar_${rep}.csv`, "ok")}>F8-Export CSV</K2BButton>
        <K2BButton small onClick={() => go && go("aracct")}>F2-Accounts</K2BButton>
      </div>
    </div>
  );
};

const repTable = { width: "100%", borderCollapse: "collapse", fontSize: 12.5 };

/* 1 — Customer List */
const ARRepList = ({ customers }) => (
  <table style={repTable}>
    <thead><tr style={{ textAlign: "left", borderBottom: "1px solid var(--jb-border)" }}>
      <th style={arTh}>Acct</th><th style={arTh}>Name</th><th style={arTh}>Type</th><th style={arTh}>Terms</th>
      <th style={arTh}>Contact</th><th style={arTh}>Phone</th><th style={arThR}>Credit Limit</th><th style={arThR}>Balance</th></tr></thead>
    <tbody>
      {customers.map(c => (
        <tr key={c.acct} style={{ borderBottom: "1px dotted var(--jb-border)" }}>
          <td style={arTdMono}>{c.acct}</td><td style={{ ...arTd, fontWeight: 600 }}>{c.name}</td>
          <td style={arTd}>{AR_TYPE_NAME[c.type] || c.type}</td><td style={arTd}>{c.terms}</td>
          <td style={arTd}>{c.contact || "—"}</td><td style={arTdMono}>{c.phone}</td>
          <td style={arTdR}>{arMoney(c.creditLimit)}</td><td style={{ ...arTdR, fontWeight: 700 }}>{arMoney(DMS.arAge(c.acct).balance)}</td>
        </tr>
      ))}
    </tbody>
  </table>
);

/* 2 — Statement Analysis (aging matrix) */
const ARRepStatementAnalysis = ({ summary }) => (
  <table style={repTable}>
    <thead><tr style={{ textAlign: "left", borderBottom: "1px solid var(--jb-border)" }}>
      <th style={arTh}>Acct</th><th style={arTh}>Name</th>
      <th style={arThR}>Current</th><th style={arThR}>31–60</th><th style={arThR}>61–90</th><th style={arThR}>90+</th><th style={arThR}>Balance</th></tr></thead>
    <tbody>
      {summary.rows.map(r => (
        <tr key={r.acct} style={{ borderBottom: "1px dotted var(--jb-border)" }}>
          <td style={arTdMono}>{r.acct}</td><td style={{ ...arTd, fontWeight: 600 }}>{r.name}</td>
          <td style={arTdR}>{arMoney(r.buckets["0-30"])}</td>
          <td style={{ ...arTdR, color: r.buckets["31-60"] > 0 ? "var(--jb-amber)" : undefined }}>{arMoney(r.buckets["31-60"])}</td>
          <td style={{ ...arTdR, color: r.buckets["61-90"] > 0 ? "#C0651A" : undefined }}>{arMoney(r.buckets["61-90"])}</td>
          <td style={{ ...arTdR, color: r.buckets["90+"] > 0 ? "var(--jb-red)" : undefined }}>{arMoney(r.buckets["90+"])}</td>
          <td style={{ ...arTdR, fontWeight: 700 }}>{arMoney(r.balance)}</td>
        </tr>
      ))}
      <tr style={{ borderTop: "2px solid var(--jb-navy)", fontWeight: 700 }}>
        <td style={arTd} colSpan={2}>TOTALS</td>
        <td style={arTdR}>{arMoney(summary.totals["0-30"])}</td><td style={arTdR}>{arMoney(summary.totals["31-60"])}</td>
        <td style={arTdR}>{arMoney(summary.totals["61-90"])}</td><td style={arTdR}>{arMoney(summary.totals["90+"])}</td>
        <td style={arTdR}>{arMoney(summary.totals.balance)}</td>
      </tr>
    </tbody>
  </table>
);

/* 3 — Trial Balance (ties to GL 220) */
const ARRepTrialBalance = ({ summary }) => {
  const d = DMS.arDefaults();
  return (
    <>
      <table style={repTable}>
        <thead><tr style={{ textAlign: "left", borderBottom: "1px solid var(--jb-border)" }}>
          <th style={arTh}>Acct</th><th style={arTh}>Customer</th><th style={arTh}>Type</th><th style={arThR}>Balance</th></tr></thead>
        <tbody>
          {summary.rows.filter(r => Math.abs(r.balance) > 0.005).map(r => (
            <tr key={r.acct} style={{ borderBottom: "1px dotted var(--jb-border)" }}>
              <td style={arTdMono}>{r.acct}</td><td style={{ ...arTd, fontWeight: 600 }}>{r.name}</td>
              <td style={arTd}>{AR_TYPE_NAME[r.type] || r.type}</td><td style={{ ...arTdR, fontWeight: 700 }}>{arMoney(r.balance)}</td>
            </tr>
          ))}
          <tr style={{ borderTop: "2px solid var(--jb-navy)", fontWeight: 700 }}>
            <td style={arTd} colSpan={3}>A/R sub-ledger total</td><td style={arTdR}>{arMoney(summary.totals.balance)}</td>
          </tr>
        </tbody>
      </table>
      <div style={{ marginTop: 12, padding: "10px 14px", background: "var(--jb-green-tint)", border: "1px solid var(--jb-green)", borderRadius: 6, fontSize: 12, color: "#176A38" }}>
        ✓ Sub-ledger total ties to General Ledger account <b>{d.arAccount} — {d.arAccountName}</b>. Reconcile via GL › Schedules.
      </div>
    </>
  );
};

/* 4 — Delinquency */
const ARRepDelinquency = ({ summary }) => {
  const rows = summary.rows.filter(r => r.pastDue > 0.005).sort((a, b) => b.oldest - a.oldest);
  return rows.length === 0
    ? <div style={{ color: "var(--jb-green)", fontWeight: 600 }}>✓ No delinquent accounts. All balances current.</div>
    : (
      <table style={repTable}>
        <thead><tr style={{ textAlign: "left", borderBottom: "1px solid var(--jb-border)" }}>
          <th style={arTh}>Acct</th><th style={arTh}>Name</th><th style={arThR}>Oldest</th>
          <th style={arThR}>31–60</th><th style={arThR}>61–90</th><th style={arThR}>90+</th><th style={arThR}>Past Due</th></tr></thead>
        <tbody>
          {rows.map(r => (
            <tr key={r.acct} style={{ borderBottom: "1px dotted var(--jb-border)" }}>
              <td style={arTdMono}>{r.acct}</td><td style={{ ...arTd, fontWeight: 600 }}>{r.name}</td>
              <td style={{ ...arTdR, color: r.oldest > 90 ? "var(--jb-red)" : r.oldest > 60 ? "#C0651A" : "var(--jb-amber)", fontWeight: 700 }}>{r.oldest}d</td>
              <td style={arTdR}>{arMoney(r.buckets["31-60"])}</td><td style={arTdR}>{arMoney(r.buckets["61-90"])}</td>
              <td style={arTdR}>{arMoney(r.buckets["90+"])}</td><td style={{ ...arTdR, fontWeight: 700 }}>{arMoney(r.pastDue)}</td>
            </tr>
          ))}
        </tbody>
      </table>
    );
};

/* 5 — Deposit Report */
const ARRepDeposits = () => {
  const deps = DMS.arDeposits();
  if (deps.length === 0) return <div style={{ color: "var(--jb-text-muted)" }}>No cash receipts recorded.</div>;
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
      {deps.map(day => (
        <div key={day.day}>
          <div style={{ display: "flex", justifyContent: "space-between", borderBottom: "1px solid var(--jb-border)", paddingBottom: 4, marginBottom: 6 }}>
            <span style={{ fontWeight: 700, color: "var(--jb-navy)" }}>Deposit — {day.day}</span>
            <span style={{ fontWeight: 700, fontFamily: "var(--jb-mono)" }}>{arMoney(day.total)}</span>
          </div>
          <table style={repTable}>
            <tbody>
              {day.items.map((it, i) => (
                <tr key={i} style={{ borderBottom: "1px dotted var(--jb-border)" }}>
                  <td style={arTdMono}>{it.acct}</td><td style={arTd}>{it.name}</td>
                  <td style={arTdMono}>{it.ref}</td><td style={arTd}>{it.desc}</td>
                  <td style={{ ...arTdR, color: "var(--jb-green)", fontWeight: 700 }}>{arMoney(it.amount)}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      ))}
    </div>
  );
};

/* 6 — Send Letters */
const ARRepLetters = () => {
  const [, force] = React.useReducer(n => n + 1, 0);
  const letters = DMS.arLetters();
  const summary = DMS.arSummary();
  const eligible = summary.rows.filter(r => r.pastDue > 0.005).length;
  return (
    <>
      <div style={{ display: "flex", gap: 8, marginBottom: 14, flexWrap: "wrap" }}>
        <K2BButton small style={{ background: "var(--jb-yellow)", fontWeight: 700 }} onClick={() => { _arToast(DMS.arSendLetters("31-60")); force(); }}>Generate 31+ Day Letters</K2BButton>
        <K2BButton small onClick={() => { _arToast(DMS.arSendLetters("61-90")); force(); }}>Generate 61+ Day Letters</K2BButton>
        <K2BButton small onClick={() => { _arToast(DMS.arSendLetters("90+")); force(); }}>Final Demand (90+)</K2BButton>
        <span style={{ alignSelf: "center", fontSize: 12, color: "var(--jb-text-dim)" }}>{eligible} account(s) currently past due</span>
      </div>
      <div style={{ fontWeight: 700, fontSize: 12, color: "var(--jb-text-dim)", marginBottom: 6 }}>Letter History</div>
      {letters.length === 0 ? <div style={{ color: "var(--jb-text-muted)", fontSize: 12 }}>No letters generated yet.</div> : (
        <table style={repTable}>
          <thead><tr style={{ textAlign: "left", borderBottom: "1px solid var(--jb-border)" }}>
            <th style={arTh}>Sent</th><th style={arTh}>Acct</th><th style={arTh}>Name</th><th style={arTh}>Template</th><th style={arTh}>Bucket</th><th style={arThR}>Balance</th></tr></thead>
          <tbody>
            {letters.map((l, i) => (
              <tr key={i} style={{ borderBottom: "1px dotted var(--jb-border)" }}>
                <td style={arTdMono}>{new Date(l.sent).toLocaleDateString()}</td><td style={arTdMono}>{l.acct}</td>
                <td style={arTd}>{l.name}</td><td style={arTd}>{l.template} — {l.templateName}</td>
                <td style={arTd}>{l.bucket}</td><td style={{ ...arTdR, fontWeight: 700 }}>{arMoney(l.balance)}</td>
              </tr>
            ))}
          </tbody>
        </table>
      )}
    </>
  );
};

/* 7 — AR Audit */
const ARRepAudit = () => {
  const audit = DMS.audit().filter(e => /A\/R|AR /i.test(e.action || "") || /220|finance charge/i.test(e.detail || ""));
  return audit.length === 0
    ? <div style={{ color: "var(--jb-text-muted)" }}>No A/R activity recorded yet. Post a charge or payment to populate the trail.</div>
    : (
      <table style={repTable}>
        <thead><tr style={{ textAlign: "left", borderBottom: "1px solid var(--jb-border)" }}>
          <th style={arTh}>Timestamp</th><th style={arTh}>User</th><th style={arTh}>Action</th><th style={arTh}>Detail</th></tr></thead>
        <tbody>
          {audit.map((e, i) => (
            <tr key={i} style={{ borderBottom: "1px dotted var(--jb-border)" }}>
              <td style={arTdMono}>{new Date(e.ts).toLocaleString()}</td><td style={arTdMono}>{e.user}</td>
              <td style={{ ...arTd, fontWeight: 600 }}>{e.action}</td><td style={arTd}>{e.detail}</td>
            </tr>
          ))}
        </tbody>
      </table>
    );
};

Object.assign(window, { ARReportsMenu, ARReportView, AR_REPORTS });