/* 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 — GM Morning Dashboard.
// The exception report the General Manager reviews every morning (spec §11).
// Reads live from DMSCore. Each exception is actionable — clicking the action
// runs the cascade (fund a deal, pay off floorplan, submit a warranty claim,
// receive a factory incentive) which posts to the GL and clears the item.

const Dashboard = ({ go }) => {
  const [, force] = React.useReducer(n => n + 1, 0);
  React.useEffect(() => DMS.subscribe(force), []);
  // RC35 (brd): a store with its GM franchise items turned off (SPEC 4.6 / D9) shows no GM warranty-claim / factory-incentive card or
  // tile (the server keeps the commands working); hidden only once the store is known, as the GM-only menu items (app.jsx)
  React.useEffect(() => (window.K2BStore && window.K2BStore.onChange ? window.K2BStore.onChange(force) : undefined), []);
  const gmItems = !(window.K2BStore && window.K2BStore.known() && !window.K2BStore.franchise());

  const x  = DMS.exceptions();
  const k  = DMS.kpis();
  const money = (n) => "$" + Math.round(n).toLocaleString();
  const today = new Date().toLocaleDateString("en-US", { weekday: "long", month: "long", day: "numeric", year: "numeric" });

  const act = async (fn, arg, opts) => {   // RC20 (fops): Close RO is a server command (a promise) — the toast shows the committed answer
    const r = await fn(arg, opts);
    window.k2bToast && window.k2bToast(r.msg, r.ok ? "ok" : "warn", 3200);
  };
  // ONE PATH: post / fund only through the shared helpers (one gate, they toast).
  const postDeal = (id) => window.jbPostDeal ? window.jbPostDeal(id) : (window.k2bToast && window.k2bToast("Ledger offline.", "warn"));
  const fundDeal = (id) => window.jbFundDeal ? window.jbFundDeal(id) : (window.k2bToast && window.k2bToast("Ledger offline.", "warn"));
  // Pipeline counts by stage (Desked · Cash · F&I · Posted · Funded).
  const stages = DMS.DEAL_STAGES || ["Desked", "Cash", "F&I", "Posted", "Funded"];
  const allDeals = (DMS.deals() || []).filter(d => d.status !== "Dead");
  const stageCount = stages.reduce((m, s) => { m[s] = allDeals.filter(d => (DMS.dealStage ? DMS.dealStage(d) : d.stage) === s).length; return m; }, {});
  const stageTone = { Desked: "amber", Cash: "green", "F&I": "navy", Posted: "navy", Funded: "green" };

  // count total open exceptions for the headline
  const totalExceptions =
    x.soldNotFunded.length + x.soldNotDelivered.length + x.notPosted.length +
    x.agedROs.length + (gmItems ? x.unsubmittedWarranty.length + x.agedWarranty.length + x.agedFactory.length : 0) +
    x.negativeParts.length + x.noBinParts.length +
    x.obsoleteParts.length + x.soReceivedNotInstalled.length + x.floorplanDue.length +
    x.internalROsOpen.length + x.agedInventory.length;

  return (
    <div style={{ padding: "20px 24px", minHeight: "100%", fontFamily: "var(--jb-font)", color: "var(--jb-text)" }}>
      <div style={{ maxWidth: 1240, margin: "0 auto" }}>

        {/* Header */}
        <div style={{ display: "flex", alignItems: "flex-end", justifyContent: "space-between", marginBottom: 18, flexWrap: "wrap", gap: 12 }}>
          <div>
            <div style={{ fontSize: 13, color: "var(--jb-text-dim)", letterSpacing: "0.04em", textTransform: "uppercase", fontWeight: 600 }}>
              Morning Report · {today}
            </div>
            <div style={{ fontSize: 28, fontWeight: 700, color: "var(--jb-navy)", letterSpacing: "-0.01em", marginTop: 2 }}>
              Good morning. Here's the store.
            </div>
          </div>
          <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
            <span style={{
              display: "inline-flex", alignItems: "center", gap: 8, padding: "8px 16px",
              borderRadius: "var(--jb-r-md)", fontWeight: 700, fontSize: 14,
              background: totalExceptions === 0 ? "var(--jb-green-tint)" : "var(--jb-amber-tint)",
              border: "1px solid " + (totalExceptions === 0 ? "var(--jb-green)" : "var(--jb-amber)"),
              color: totalExceptions === 0 ? "var(--jb-green)" : "#9A6700",
            }}>
              {totalExceptions === 0
                ? "✓ All clear — no open exceptions"
                : `⚠ ${totalExceptions} item${totalExceptions === 1 ? "" : "s"} need attention`}
            </span>
          </div>
        </div>

        {/* KPI strip */}
        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(150px, 1fr))", gap: 10, marginBottom: 22 }}>
          <DashKpi label="Units this month"   value={k.monthUnits} tone="navy" onClick={() => go("deal")} />
          <DashKpi label="Total gross MTD"    value={money(k.monthGross)} tone="green" onClick={() => go("deal")} />
          <DashKpi label="In stock"           value={k.inStock} sub={money(k.invValue)} onClick={() => go("inventory")} />
          <DashKpi label="Contracts in transit" value={money(k.citTotal)} tone={k.citTotal > 0 ? "amber" : "muted"} onClick={() => go("accounting")} />
          <DashKpi label="Floorplan to pay off" value={money(k.floorTotal)} tone={k.floorTotal > 0 ? "red" : "muted"} />
          {gmItems ? <DashKpi label="Warranty A/R open"  value={money(k.warrantyOpen)} tone={k.warrantyOpen > 0 ? "amber" : "muted"} onClick={() => go("service")} /> : null}
        </div>

        {/* Pipeline KPI row — one path: Desked → Cash / F&I → Posted → Funded */}
        <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 22, flexWrap: "wrap" }}>
          <span style={{ fontSize: 11, color: "var(--jb-text-dim)", textTransform: "uppercase", letterSpacing: "0.04em", fontWeight: 600, marginRight: 4 }}>Pipeline</span>
          {stages.map((s, i) => (
            <React.Fragment key={s}>
              {i > 0 && <span style={{ color: "var(--jb-text-muted)", fontSize: 12 }}>{s === "F&I" ? "/" : "→"}</span>}
              <div onClick={() => go("deal")} title={`${stageCount[s]} deal${stageCount[s] === 1 ? "" : "s"} at ${s} — open the Deal Pipeline`}
                   style={{ display: "flex", alignItems: "baseline", gap: 6, padding: "6px 12px", cursor: "pointer",
                            background: "var(--jb-surface)", border: "1px solid var(--jb-border)", borderRadius: "var(--jb-r-md)", boxShadow: "var(--jb-shadow-sm)", minWidth: 90 }}>
                <span style={{ fontSize: 18, fontWeight: 700, color: stageCount[s] ? ({ navy: "var(--jb-navy)", green: "var(--jb-green)", amber: "#9A6700" }[stageTone[s]]) : "var(--jb-text-muted)" }}>{stageCount[s]}</span>
                <span style={{ fontSize: 11.5, color: "var(--jb-text-dim)", fontWeight: 600 }}>{s === "Funded" ? "Funded ✓" : s}</span>
              </div>
            </React.Fragment>
          ))}
        </div>

        {/* Exception groups */}
        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(380px, 1fr))", gap: 14, alignItems: "start" }}>

          {/* Money out the door */}
          <DashGroup title="Money — cars gone, cash not in" accent="#C03546"
                 count={x.soldNotFunded.length + x.floorplanDue.length + x.notPosted.length}>
            {x.soldNotFunded.map(d => (
              <DashRow key={d.id} label={`${d.id} · ${d.buyer}`}
                   sub={`Delivered not funded · ${d.lender} · ${money(d.amtFinanced)}` + (d.fundingIssue ? ` — ${d.fundingIssue}` : "")}
                   tone="red"
                   action="Mark Funded" onAction={() => fundDeal(d.id)} />
            ))}
            {x.floorplanDue.map(f => (
              <DashRow key={f.stock} label={`Floorplan due · ${f.stock}`}
                   sub={`${f.lender} · ${money(f.amount)} · sold ${new Date(f.soldDate).toLocaleDateString()}`}
                   tone="red"
                   action="Pay Off" onAction={() => {   // RC33 (mpx): a SERVER command — paid by ACH / wire (the bank's confirmation) or by a check the server writes
                     const ref = window.prompt(`Pay off ${f.stock} — ${money(f.amount)} to ${f.lender || "the lender"}.\n\nPaid by ACH / wire: type the bank's confirmation number.\nLeave it blank to write a CHECK instead (print it in Check Writing).`, "");
                     if (ref === null) return;
                     act(DMS.payoffFloorplan, f.stock, String(ref).trim() ? { method: "ach", ref: String(ref).trim() } : { method: "check" });
                   }} />
            ))}
            {x.notPosted.map(d => (
              <DashRow key={d.id} label={`${d.id} not posted to GL`}
                   sub={`${d.buyer} · ${d.vehicle} · ${money(d.salePrice)}`}
                   tone="amber"
                   action="Post Deal" onAction={() => postDeal(d.id)} />
            ))}
            {x.soldNotFunded.length + x.floorplanDue.length + x.notPosted.length === 0 && <DashClear />}
          </DashGroup>

          {/* Deals pipeline */}
          <DashGroup title="Deals — pipeline & posting" accent="#1B66A8"
                 count={x.soldNotDelivered.length}>
            {x.soldNotDelivered.map(d => (
              <DashRow key={d.id} label={`${d.id} · ${d.buyer}`}
                   sub={`Sold not delivered · ${d.vehicle}` + (d.pending ? ` — ${d.pending}` : "")}
                   tone="navy"
                   action="Post Deal" onAction={() => postDeal(d.id)} />
            ))}
            {x.soldNotDelivered.length === 0 && <DashClear />}
          </DashGroup>

          {/* Service */}
          <DashGroup title="Service — open & aged ROs" accent="#8050B0"
                 count={x.agedROs.length + x.internalROsOpen.length}>
            {x.openROs.map(r => {
              const days = Math.floor((Date.now() - new Date(r.opened)) / 86400000);
              const aged = days >= 7;
              return (
                <DashRow key={r.id} label={`${r.id} · ${r.customer}`}
                     sub={`${r.payType} · ${r.tech} · open ${days}d` + (aged ? " — AGED" : "") + (r.payType === "Internal" ? " · recon eating used gross" : "")}
                     tone={aged ? "red" : r.payType === "Internal" ? "amber" : "muted"}
                     action="Close RO" onAction={() => act(DMS.closeRO, r.id)} />
              );
            })}
            {x.openROs.length === 0 && <DashClear />}
          </DashGroup>

          {/* Warranty (GM franchise items) */}
          {gmItems ? <DashGroup title="Warranty — claims & receivables" accent="#B26A00"
                 count={x.unsubmittedWarranty.length + x.agedWarranty.length}>
            {x.unsubmittedWarranty.map(w => (
              <DashRow key={w.claim} label={`${w.claim} not submitted`}
                   sub={`${w.ro} · ${money(w.amount)} — submit before payment`}
                   tone="amber"
                   action="Submit Claim" onAction={() => act(DMS.submitWarrantyClaim, w.claim)} />
            ))}
            {x.agedWarranty.map(w => (
              <DashRow key={w.claim} label={`${w.claim} aged unpaid`}
                   sub={`${w.ro} · ${money(w.amount)} · submitted, no payment 30+ days`}
                   tone="red" />
            ))}
            {x.unsubmittedWarranty.length + x.agedWarranty.length === 0 && <DashClear />}
          </DashGroup> : null}

          {/* Factory receivables (GM franchise items) */}
          {gmItems ? <DashGroup title="Factory — incentive receivables" accent="#16A34A"
                 count={x.openFactory.length}>
            {x.openFactory.map(f => (
              <DashRow key={f.deal + f.program} label={`${f.program}`}
                   sub={`${f.deal} · VIN ${String(f.vin).slice(-6)} · ${money(f.claimed)} · ${f.age}d old` + (f.age >= 30 ? " — AGED" : "")}
                   tone={f.age >= 30 ? "red" : "muted"}
                   action="Receive" onAction={() => {   // RC33 (mpx): a SERVER command — the amount GM paid (blank = the full claim)
                     const a = window.prompt(`Receive ${f.program} on ${f.deal} — ${money(f.claimed)} claimed.\n\nAmount GM paid (leave blank for the full claim):`, "");
                     if (a === null) return;
                     act(DMS.receiveFactoryIncentive, f.deal, String(a).trim() ? { amount: String(a).trim() } : {});
                   }} />
            ))}
            {x.openFactory.length === 0 && <DashClear />}
          </DashGroup> : null}

          {/* Parts */}
          <DashGroup title="Parts — inventory health" accent="#4A6FB3"
                 count={x.negativeParts.length + x.noBinParts.length + x.obsoleteParts.length + x.soReceivedNotInstalled.length}>
            {x.negativeParts.map(p => (
              <DashRow key={p.part} label={`Negative on-hand · ${p.part}`} sub={`${p.desc} · ${p.onHand} on hand`} tone="red" />
            ))}
            {x.soReceivedNotInstalled.map(p => (
              <DashRow key={p.part} label={`Special order waiting · ${p.part}`}
                   sub={`${p.desc} · ${p.specialOrder.customer} (${p.specialOrder.ro}) — received, not installed`} tone="amber" />
            ))}
            {x.noBinParts.map(p => (
              <DashRow key={p.part} label={`No bin location · ${p.part}`} sub={`${p.desc} · ${p.onHand} on hand`} tone="amber" />
            ))}
            {x.obsoleteParts.map(p => (
              <DashRow key={p.part} label={`Obsolete · ${p.part}`} sub={`${p.desc} · no sale 12+ mo · ${money(p.onHand * p.cost)} trapped`} tone="muted" />
            ))}
            {x.negativeParts.length + x.noBinParts.length + x.obsoleteParts.length + x.soReceivedNotInstalled.length === 0 && <DashClear />}
          </DashGroup>

          {/* Inventory aging */}
          <DashGroup title="Inventory — aged units" accent="#9A6700"
                 count={x.agedInventory.length}>
            {x.agedInventory.map(u => (
              <DashRow key={u.stock} label={`${u.stock} · ${u.age} days`}
                   sub={`${u.yr} ${u.mk} ${u.mdl} · ${money(u.cost)} · floored ${money(u.floorAmt)}`}
                   tone={u.age >= 120 ? "red" : "amber"}
                   action="View" onAction={() => go("inventory")} />
            ))}
            {x.agedInventory.length === 0 && <DashClear />}
          </DashGroup>

          {/* Payroll */}
          <DashGroup title="Payroll — commissions owed" accent="#0B7285"
                 count={x.unpaidCommissions.length}>
            {x.unpaidCommissions.map(c => (
              <DashRow key={c.deal} label={`${c.salesperson} · ${c.deal}`}
                   sub={`Front gross ${money(c.frontGross)} · commission ${money(c.commission)}`}
                   tone="muted"
                   action="Payroll" onAction={() => go("payroll")} />
            ))}
            {x.unpaidCommissions.length === 0 && <DashClear />}
          </DashGroup>

        </div>

        {/* Footer actions */}
        <div style={{ marginTop: 22, display: "flex", gap: 10, alignItems: "center", flexWrap: "wrap" }}>
          <K2BButton small onClick={() => go("getstarted")}>Getting Started guide ▸</K2BButton>
          <K2BButton small onClick={() => go("salesmenu")}>All Modules ▸</K2BButton>
          <div style={{ flex: 1 }} />
          {/* Audit C-05: admin-only, typed confirmation, and an honest label —
              this REPLACES the shared ledger for every station, not just this PC. */}
        </div>
      </div>
    </div>
  );
};

const DashKpi = ({ label, value, sub, tone = "muted", onClick }) => {
  const colors = {
    navy: "var(--jb-navy)", green: "var(--jb-green)", amber: "#9A6700", red: "#C03546", muted: "var(--jb-text)",
  };
  return (
    <div onClick={onClick}
         style={{
           background: "var(--jb-surface)", border: "1px solid var(--jb-border)",
           borderRadius: "var(--jb-r-md)", padding: "12px 14px", cursor: onClick ? "pointer" : "default",
           boxShadow: "var(--jb-shadow-sm)",
         }}>
      <div style={{ fontSize: 11, color: "var(--jb-text-dim)", textTransform: "uppercase", letterSpacing: "0.04em", fontWeight: 600 }}>{label}</div>
      <div style={{ fontSize: 22, fontWeight: 700, color: colors[tone], marginTop: 3, lineHeight: 1 }}>{value}</div>
      {sub && <div style={{ fontSize: 11, color: "var(--jb-text-muted)", marginTop: 3 }}>{sub}</div>}
    </div>
  );
};

const DashGroup = ({ title, accent, count, children }) => (
  <div style={{ background: "var(--jb-surface)", border: "1px solid var(--jb-border)",
                borderRadius: "var(--jb-r-lg)", boxShadow: "var(--jb-shadow-sm)", overflow: "hidden" }}>
    <div style={{ display: "flex", alignItems: "center", gap: 8, padding: "10px 14px",
                  borderBottom: "1px solid var(--jb-border)", borderLeft: "3px solid " + accent }}>
      <span style={{ fontWeight: 700, fontSize: 14, color: "var(--jb-navy)", flex: 1 }}>{title}</span>
      <span style={{
        minWidth: 22, height: 22, padding: "0 7px", borderRadius: 11,
        background: count > 0 ? accent : "var(--jb-surface-2)",
        color: count > 0 ? "#FFF" : "var(--jb-text-muted)",
        display: "inline-flex", alignItems: "center", justifyContent: "center",
        fontSize: 12, fontWeight: 700,
      }}>{count}</span>
    </div>
    <div style={{ padding: "8px 10px", display: "flex", flexDirection: "column", gap: 6 }}>
      {children}
    </div>
  </div>
);

const DashRow = ({ label, sub, tone = "muted", action, onAction }) => {
  const dot = { red: "#C03546", amber: "#D9920A", navy: "#1B66A8", green: "#16A34A", muted: "#9AA3B8" }[tone];
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 10, padding: "6px 8px",
                  background: "var(--jb-surface-2)", borderRadius: "var(--jb-r-sm)" }}>
      <span style={{ width: 8, height: 8, borderRadius: "50%", background: dot, flexShrink: 0 }} />
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ fontSize: 12.5, fontWeight: 600, color: "var(--jb-text)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{label}</div>
        <div style={{ fontSize: 11, color: "var(--jb-text-dim)", lineHeight: 1.35 }}>{sub}</div>
      </div>
      {action && (
        <button className="k2b-button small" onClick={onAction}
                style={{ flexShrink: 0, background: "var(--jb-yellow)", fontWeight: 700 }}>
          {action}
        </button>
      )}
    </div>
  );
};

const DashClear = () => (
  <div style={{ fontSize: 12, color: "var(--jb-green)", padding: "4px 8px", display: "flex", alignItems: "center", gap: 6 }}>
    <span>✓</span> Nothing to action.
  </div>
);

Object.assign(window, { Dashboard });