/* 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 — Cash Command Center.
// Live operating-cash forecast from the ledger: today's bank cash, expected
// inflows (CIT, warranty, factory, A/R) vs. committed outflows (payoffs, A/P,
// floorplan, commissions), a 7/14/30-day net position, a "safe to spend" meter,
// and a "Why did cash change?" breakdown of recent bank movement by source.

const ccMoney = (n) => "$" + (Number(n) || 0).toLocaleString("en-US", { minimumFractionDigits: 0, maximumFractionDigits: 0 });
const ccMoney2 = (n) => (n < 0 ? "-$" : "$") + Math.abs(Number(n) || 0).toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 });

const CashCommand = ({ onClose, go }) => {
  const D = window.DMS;
  const [, force] = React.useReducer(n => n + 1, 0);
  React.useEffect(() => (D && D.subscribe) ? D.subscribe(force) : undefined, []);
  const [moveDays, setMoveDays] = React.useState(1);
  if (!D || !D.cashCommand) return null;
  const cc = D.cashCommand();
  const mv = D.cashMovement(moveDays);

  const toneColor = { green: "#0E7A37", yellow: "#9A6700", red: "#B23A2E" }[cc.tone] || "#0E7A37";
  const toneBg = { green: "linear-gradient(160deg,#0E7A37,#0B5C2A)", yellow: "linear-gradient(160deg,#B8860B,#8A6400)", red: "linear-gradient(160deg,#B23A2E,#8A1C1C)" }[cc.tone];
  const toneWord = { green: "SAFE TO SPEND", yellow: "SPEND TIGHT", red: "DO NOT SPEND" }[cc.tone];

  const Bar = ({ label, value, color }) => (
    <div style={{ display: "flex", alignItems: "center", gap: 10, padding: "5px 0" }}>
      <span style={{ flex: 1, fontSize: 13 }}>{label}</span>
      <span style={{ fontFamily: "var(--jb-mono)", fontWeight: 700, fontSize: 13.5, color }}>{ccMoney(value)}</span>
    </div>
  );

  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="Cash Command Center" icon="store" onClose={onClose} />

      <div style={{ flex: 1, overflow: "auto", padding: 18, display: "grid", gridTemplateColumns: "1.3fr 1fr", gap: 16, alignItems: "start" }}>

        {/* LEFT — position + flows */}
        <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
          {/* safe-to-spend hero */}
          <div style={{ background: toneBg, borderRadius: "var(--jb-r-lg)", padding: "18px 20px", color: "#fff", boxShadow: "var(--jb-shadow-sm)" }}>
            <div style={{ display: "flex", alignItems: "flex-start" }}>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 11, letterSpacing: 1.5, textTransform: "uppercase", opacity: 0.85 }}>{toneWord}</div>
                <div style={{ fontFamily: "var(--jb-mono)", fontWeight: 800, fontSize: 40, lineHeight: 1.05 }}>{ccMoney(cc.safeToSpend)}</div>
                <div style={{ fontSize: 12.5, opacity: 0.9, marginTop: 4 }}>Bank cash today {ccMoney(cc.today)} − this week's committed outflows.</div>
              </div>
              <div style={{ width: 64, height: 64, borderRadius: 999, border: "5px solid rgba(255,255,255,0.5)", display: "flex", alignItems: "center", justifyContent: "center", fontSize: 28 }}>
                {cc.tone === "green" ? "✓" : cc.tone === "yellow" ? "!" : "✕"}
              </div>
            </div>
          </div>

          {/* 7/14/30 position */}
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 10 }}>
            {[["7-day", cc.net7], ["14-day", cc.net14], ["30-day", cc.net30]].map(([lab, v]) => (
              <div key={lab} style={{ background: "#FFF", border: "1px solid var(--jb-border)", borderRadius: "var(--jb-r-lg)", padding: "12px 14px" }}>
                <div style={{ fontSize: 10.5, letterSpacing: 0.6, textTransform: "uppercase", color: "var(--jb-text-muted)" }}>Net {lab} position</div>
                <div style={{ fontFamily: "var(--jb-mono)", fontWeight: 800, fontSize: 21, color: v >= 0 ? "#0E7A37" : "#B23A2E" }}>{ccMoney(v)}</div>
              </div>
            ))}
          </div>

          {/* inflows / outflows */}
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
            <div style={{ background: "#FFF", border: "1px solid var(--jb-border)", borderRadius: "var(--jb-r-lg)", padding: "12px 16px" }}>
              <div style={{ fontSize: 12, fontWeight: 700, textTransform: "uppercase", letterSpacing: 0.3, color: "#0E7A37", marginBottom: 4 }}>Expected In</div>
              {cc.inflows.length ? cc.inflows.map((x, i) => <Bar key={i} label={x.label + (x.detail ? " · " + x.detail : "")} value={x.amount} color="#0E7A37" />) : <div style={{ fontSize: 12.5, color: "#999", padding: "6px 0" }}>None pending.</div>}
              <div style={{ borderTop: "1px solid var(--jb-border)", marginTop: 6, paddingTop: 6, display: "flex", justifyContent: "space-between", fontWeight: 800, fontFamily: "var(--jb-mono)" }}><span style={{ fontFamily: "var(--jb-font)", fontSize: 12.5 }}>Total in</span><span style={{ color: "#0E7A37" }}>{ccMoney(cc.totalIn)}</span></div>
            </div>
            <div style={{ background: "#FFF", border: "1px solid var(--jb-border)", borderRadius: "var(--jb-r-lg)", padding: "12px 16px" }}>
              <div style={{ fontSize: 12, fontWeight: 700, textTransform: "uppercase", letterSpacing: 0.3, color: "#B23A2E", marginBottom: 4 }}>Committed Out</div>
              {cc.outflows.length ? cc.outflows.map((x, i) => <Bar key={i} label={x.label} value={x.amount} color="#B23A2E" />) : <div style={{ fontSize: 12.5, color: "#999", padding: "6px 0" }}>None due.</div>}
              <div style={{ borderTop: "1px solid var(--jb-border)", marginTop: 6, paddingTop: 6, display: "flex", justifyContent: "space-between", fontWeight: 800, fontFamily: "var(--jb-mono)" }}><span style={{ fontFamily: "var(--jb-font)", fontSize: 12.5 }}>Total out</span><span style={{ color: "#B23A2E" }}>{ccMoney(cc.totalOut)}</span></div>
            </div>
          </div>

          <div style={{ fontSize: 11.5, color: "var(--jb-text-muted)", lineHeight: 1.6 }}>
            Forecast reads live ledger state — delivered-not-funded deals (CIT), submitted warranty claims, open payables, trade payoffs, floorplan, and unpaid commissions. As you fund deals, pay vendors, and post checks, this updates instantly.
          </div>
        </div>

        {/* RIGHT — why cash changed */}
        <div style={{ background: "#FFF", border: "1px solid var(--jb-border)", borderRadius: "var(--jb-r-lg)", padding: "14px 16px", position: "sticky", top: 0 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 8 }}>
            <span style={{ fontSize: 13, fontWeight: 700 }}>Why did cash change?</span>
            <div style={{ flex: 1 }} />
            <select value={moveDays} onChange={(e) => setMoveDays(+e.target.value)} style={{ fontSize: 12 }}>
              <option value={1}>Today</option><option value={7}>7 days</option><option value={30}>30 days</option>
            </select>
          </div>
          <div style={{ textAlign: "center", padding: "8px 0", borderBottom: "1px solid var(--jb-border)", marginBottom: 8 }}>
            <div style={{ fontSize: 10.5, letterSpacing: 0.6, textTransform: "uppercase", color: "var(--jb-text-muted)" }}>Net bank movement</div>
            <div style={{ fontFamily: "var(--jb-mono)", fontWeight: 800, fontSize: 24, color: mv.net >= 0 ? "#0E7A37" : "#B23A2E" }}>{ccMoney2(mv.net)}</div>
          </div>
          {mv.rows.length === 0 ? (
            <div style={{ fontSize: 12.5, color: "#999", textAlign: "center", padding: "16px 0" }}>No cash movement in this window.</div>
          ) : mv.rows.map((r, i) => (
            <div key={i} style={{ display: "flex", alignItems: "center", gap: 10, padding: "6px 0", borderBottom: "1px solid #F0F0F0" }}>
              <span style={{ width: 8, height: 8, borderRadius: 999, background: r.amount >= 0 ? "#0E7A37" : "#B23A2E" }} />
              <span style={{ flex: 1, fontSize: 12.5 }}>{r.src}</span>
              <span style={{ fontFamily: "var(--jb-mono)", fontWeight: 700, fontSize: 13, color: r.amount >= 0 ? "#0E7A37" : "#B23A2E" }}>{ccMoney2(r.amount)}</span>
            </div>
          ))}
          <div style={{ display: "flex", flexDirection: "column", gap: 6, marginTop: 14 }}>
            <button className="k2b-button small" onClick={() => go && go("checkwriting")}>Check Writing ▸</button>
            <button className="k2b-button small" onClick={() => go && go("acctoffice")}>A/P · A/R ▸</button>
            <button className="k2b-button small" onClick={() => go && go("accounting")}>General Ledger ▸</button>
          </div>
        </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={() => go && go("dashboard")}>Dashboard</K2BButton>
        <K2BButton small onClick={() => go && go("pnl")}>P&amp;L</K2BButton>
      </div>
    </div>
  );
};

Object.assign(window, { CashCommand });