/* 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 Fleet (Sales & F&I).
// Fleet customer book: types (Small Business, Dealer Fleet, Large Fleet,
// Government, Rental), GM Fleet Account Number (FAN), incentive eligibility,
// and YTD purchasing. FAN compliance is surfaced because non-small-business
// fleet sales require a FAN on file to claim National Fleet incentives.
// Backed by window.jbFleet.

const flMoney = (n) => "$" + (Number(n) || 0).toLocaleString("en-US", { maximumFractionDigits: 0 });
const FL_TYPE_COLOR = {
  "Small Business": "#5A6472", "Dealer Fleet": "var(--jb-blue,#1B66A8)", "Large Fleet": "var(--jb-navy,#11337A)",
  "Government": "#1456A0", "Rental": "#9A6700",
};

const Fleet = ({ onClose, go }) => {
  const [, force] = React.useReducer(n => n + 1, 0);
  React.useEffect(() => window.jbFleet ? window.jbFleet.subscribe(force) : undefined, []);
  const list = window.jbFleet ? window.jbFleet.list() : [];
  const TYPES = window.jbFleet ? window.jbFleet.TYPES : [];
  const INCS = window.jbFleet ? window.jbFleet.INCENTIVES : [];
  const [edit, setEdit] = React.useState(null);
  const [filter, setFilter] = React.useState("All");

  const blank = { name: "", type: "Dealer Fleet", fan: "", contact: "", phone: "", email: "", arAcct: "", incentives: [], ytdUnits: 0, ytdSpend: 0, fanRequired: true, active: true, notes: "" };
  const filtered = filter === "All" ? list : list.filter(f => f.type === filter);
  const nonCompliant = list.filter(f => !window.jbFleet.fanCompliant(f));
  const ytdUnits = list.reduce((s, f) => s + f.ytdUnits, 0);
  const ytdSpend = list.reduce((s, f) => s + f.ytdSpend, 0);

  return (
    <div className="k2b-window" style={{ width: "100%", maxWidth: 1280, height: 800, margin: "0 auto", fontFamily: "var(--jb-font)" }}>
      <K2BTitlebar title="GM Fleet — Accounts & Incentives" onClose={onClose} onMin={() => {}} onMax={() => {}} />
      <div style={{ flex: 1, minHeight: 0, overflow: "auto", background: "var(--jb-bg)", padding: 18, display: "flex", flexDirection: "column", gap: 14 }}>

        <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
          {[["Fleet Accounts", list.length, "var(--jb-navy)"], ["YTD Units", ytdUnits, "var(--jb-blue)"],
            ["YTD Fleet Spend", flMoney(ytdSpend), "var(--jb-green)"],
            ["Missing FAN", nonCompliant.length, nonCompliant.length ? "var(--jb-red)" : "var(--jb-green)"]].map(([lab, val, c], i) => (
            <div key={i} style={{ flex: 1, minWidth: 150, background: "var(--jb-surface)", border: "1px solid var(--jb-border)", borderRadius: "var(--jb-r-lg)", padding: "12px 16px", boxShadow: "var(--jb-shadow-sm)" }}>
              <div style={{ fontSize: 11, letterSpacing: 1, textTransform: "uppercase", color: "var(--jb-text-muted)" }}>{lab}</div>
              <div style={{ fontFamily: "var(--jb-mono)", fontSize: 24, fontWeight: 800, color: c }}>{val}</div>
            </div>
          ))}
        </div>

        {nonCompliant.length > 0 && (
          <div style={{ background: "var(--jb-red-tint, #FBE9E7)", border: "1px solid var(--jb-red, #C03546)", borderRadius: "var(--jb-r)", padding: "8px 12px", fontSize: 12.5, color: "var(--k2b-maroon)" }}>
            ⚠ {nonCompliant.length} fleet account{nonCompliant.length !== 1 ? "s" : ""} require a <b>Fleet Account Number (FAN)</b> to claim National Fleet incentives: {nonCompliant.map(f => f.name).join(", ")}.
          </div>
        )}

        <div style={{ display: "flex", alignItems: "center", gap: 8, flexWrap: "wrap" }}>
          <span style={{ fontSize: 12, color: "var(--jb-text-dim)" }}>Filter</span>
          {["All", ...TYPES].map(t => (
            <button key={t} className="k2b-button small" onClick={() => setFilter(t)} style={filter === t ? { background: "var(--jb-blue)", color: "#fff", borderColor: "var(--jb-blue)" } : {}}>{t}</button>
          ))}
          <div style={{ flex: 1 }} />
          <button className="k2b-button" style={{ background: "var(--jb-yellow)", fontWeight: 700 }} onClick={() => setEdit({ ...blank })}>+ Add Fleet Account</button>
        </div>

        <div style={{ background: "var(--jb-surface)", border: "1px solid var(--jb-border)", borderRadius: "var(--jb-r-lg)", overflow: "hidden", boxShadow: "var(--jb-shadow-sm)" }}>
          <table style={{ width: "100%", borderCollapse: "collapse", fontSize: 12.5 }}>
            <thead><tr style={{ background: "var(--jb-surface-2)", color: "var(--jb-text-dim)", textAlign: "left" }}>
              {["Account", "Type", "FAN", "Incentives", "YTD Units", "YTD Spend", "A/R", ""].map((h, i) => (
                <th key={i} style={{ padding: "8px 10px", fontWeight: 600, textAlign: i === 4 || i === 5 ? "right" : "left" }}>{h}</th>
              ))}
            </tr></thead>
            <tbody>
              {filtered.map((f, i) => {
                const compliant = window.jbFleet.fanCompliant(f);
                return (
                  <tr key={f.id} onClick={() => setEdit({ ...f })} style={{ background: i % 2 ? "var(--jb-surface-2)" : "#fff", cursor: "pointer", opacity: f.active ? 1 : 0.5 }}>
                    <td style={{ padding: "8px 10px" }}>
                      <div style={{ fontWeight: 700, color: "var(--jb-navy)" }}>{f.name}</div>
                      <div style={{ fontSize: 11, color: "var(--jb-text-muted)" }}>{f.contact}{f.phone ? " · " + f.phone : ""}</div>
                    </td>
                    <td style={{ padding: "8px 10px" }}><span style={{ background: FL_TYPE_COLOR[f.type] || "#888", color: "#fff", borderRadius: 999, padding: "2px 9px", fontSize: 11, fontWeight: 600 }}>{f.type}</span></td>
                    <td style={{ padding: "8px 10px", fontFamily: "var(--jb-mono)" }}>
                      {f.fan ? <span style={{ fontWeight: 700, color: "var(--jb-navy)" }}>{f.fan}</span>
                             : <span style={{ color: compliant ? "var(--jb-text-muted)" : "var(--jb-red)", fontWeight: compliant ? 400 : 700 }}>{compliant ? "n/a" : "⚠ required"}</span>}
                    </td>
                    <td style={{ padding: "8px 10px" }}>
                      <span style={{ display: "inline-flex", gap: 3, flexWrap: "wrap" }}>
                        {f.incentives.map(code => <span key={code} style={{ background: "var(--jb-blue-tint, #E5EFFA)", color: "var(--jb-blue)", borderRadius: 4, padding: "1px 6px", fontSize: 10.5, fontWeight: 700 }}>{code}</span>)}
                      </span>
                    </td>
                    <td style={{ padding: "8px 10px", textAlign: "right", fontFamily: "var(--jb-mono)" }}>{f.ytdUnits}</td>
                    <td style={{ padding: "8px 10px", textAlign: "right", fontFamily: "var(--jb-mono)" }}>{flMoney(f.ytdSpend)}</td>
                    <td style={{ padding: "8px 10px", fontFamily: "var(--jb-mono)", color: "var(--jb-text-dim)" }}>{f.arAcct || "—"}</td>
                    <td style={{ padding: "8px 10px", textAlign: "right", color: "#bbb" }}>edit ›</td>
                  </tr>
                );
              })}
              {filtered.length === 0 && <tr><td colSpan={8} style={{ padding: 20, textAlign: "center", color: "var(--jb-text-muted)" }}>No fleet accounts in this view.</td></tr>}
            </tbody>
          </table>
        </div>
        <div style={{ fontSize: 11.5, color: "var(--jb-text-muted)" }}>
          Small Business customers don't qualify for a FAN. Dealer/Large Fleet, Government and Rental accounts need a FAN on file to claim National Fleet incentives at delivery.
        </div>

        <div style={{ flex: 1 }} />
        <div style={{ display: "flex", gap: 8 }}>
          <button className="k2b-button" onClick={onClose}>Close</button>
          <button className="k2b-button" onClick={() => go && go("deal")}>Deals</button>
          <button className="k2b-button" onClick={() => go && go("acctoffice")}>Fleet A/R</button>
          <button className="k2b-button" onClick={() => go && go("fcso")}>Fulfillment Orders</button>
        </div>
      </div>

      {edit && <FleetEditor rec={edit} TYPES={TYPES} INCS={INCS} onClose={() => setEdit(null)}
        onSave={(r) => { window.jbFleet.upsert(r); setEdit(null); window.k2bToast && window.k2bToast(`${r.name} saved.`, "ok"); }}
        onDelete={edit.id ? () => { window.jbFleet.remove(edit.id); setEdit(null); window.k2bToast && window.k2bToast("Fleet account removed.", "warn"); } : null} />}
    </div>
  );
};

const FleetEditor = ({ rec, TYPES, INCS, onClose, onSave, onDelete }) => {
  const [r, setR] = React.useState({ ...rec });
  const set = (k, v) => setR(p => ({ ...p, [k]: v }));
  const toggleInc = (code) => setR(p => { const a = p.incentives || []; return { ...p, incentives: a.includes(code) ? a.filter(x => x !== code) : [...a, code] }; });
  const fanRequired = r.type !== "Small Business";
  const valid = (r.name || "").trim().length > 0;
  const save = () => valid ? onSave({ ...r, fanRequired }) : window.k2bToast && window.k2bToast("Account name is required.", "warn");
  return (
    <K2BModal title={rec.id ? "Edit Fleet Account" : "Add Fleet Account"} width={640} onClose={onClose}
      buttons={<>
        {onDelete && <K2BButton onClick={onDelete}>Delete</K2BButton>}
        <K2BButton onClick={onClose}>Cancel</K2BButton>
        <K2BButton primary onClick={save}>Save</K2BButton>
      </>}>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
        <label style={{ display: "flex", flexDirection: "column", gap: 3, gridColumn: "1 / -1" }}>
          <span style={{ fontSize: 11, color: "var(--jb-text-dim)", fontWeight: 600 }}>Account Name</span>
          <input value={r.name || ""} onChange={(e) => set("name", e.target.value)} style={{ fontSize: 13 }} />
        </label>
        <label style={{ display: "flex", flexDirection: "column", gap: 3 }}>
          <span style={{ fontSize: 11, color: "var(--jb-text-dim)", fontWeight: 600 }}>Fleet Type</span>
          <select value={r.type} onChange={(e) => set("type", e.target.value)} style={{ fontSize: 13 }}>{TYPES.map(t => <option key={t}>{t}</option>)}</select>
        </label>
        <label style={{ display: "flex", flexDirection: "column", gap: 3 }}>
          <span style={{ fontSize: 11, color: fanRequired ? "var(--jb-text-dim)" : "var(--jb-text-muted)", fontWeight: 600 }}>
            Fleet Account # (FAN) {fanRequired ? <span style={{ color: "var(--jb-red)" }}>· required</span> : <span>· not applicable</span>}
          </span>
          <input value={r.fan || ""} onChange={(e) => set("fan", e.target.value.toUpperCase())} disabled={!fanRequired}
                 placeholder={fanRequired ? "GF-000000" : "Small Business — no FAN"} style={{ fontSize: 13, fontFamily: "var(--jb-mono)", background: fanRequired ? "#FFFEF4" : "#F0F0F0" }} />
        </label>
        <FlFld label="Contact" k="contact" r={r} set={set} />
        <FlFld label="Phone" k="phone" r={r} set={set} />
        <FlFld label="Email" k="email" r={r} set={set} />
        <FlFld label="Linked A/R Account #" k="arAcct" w={140} r={r} set={set} />
        <FlFld label="YTD Units" k="ytdUnits" type="num" r={r} set={set} />
        <FlFld label="YTD Spend $" k="ytdSpend" type="num" r={r} set={set} />
      </div>
      <div style={{ marginTop: 14 }}>
        <div style={{ fontSize: 11, color: "var(--jb-text-dim)", fontWeight: 600, marginBottom: 5 }}>Incentive Eligibility</div>
        <div style={{ display: "flex", gap: 6, flexWrap: "wrap" }}>
          {INCS.map(o => {
            const on = (r.incentives || []).includes(o.code);
            return (
              <button key={o.code} onClick={() => toggleInc(o.code)} title={o.label}
                style={{ fontSize: 11.5, padding: "4px 10px", borderRadius: 999, cursor: "pointer",
                         border: "1px solid " + (on ? "var(--jb-blue)" : "var(--jb-border)"), background: on ? "var(--jb-blue)" : "#fff",
                         color: on ? "#fff" : "var(--jb-text-dim)", fontWeight: 600 }}>{o.code} · {o.label}</button>
            );
          })}
        </div>
      </div>
      <div style={{ display: "flex", gap: 20, marginTop: 14, alignItems: "center" }}>
        <label style={{ display: "flex", alignItems: "center", gap: 8 }}>
          <input type="checkbox" checked={r.active !== false} onChange={(e) => set("active", e.target.checked)} style={{ width: 16, height: 16 }} />
          <span style={{ fontSize: 13 }}>Active</span>
        </label>
        <button className="k2b-button small" onClick={() => window.k2bPrintFleetProfile && window.k2bPrintFleetProfile(r)}>🖨 Print Fleet Profile</button>
      </div>
      <label style={{ display: "flex", flexDirection: "column", gap: 3, marginTop: 12 }}>
        <span style={{ fontSize: 11, color: "var(--jb-text-dim)", fontWeight: 600 }}>Notes</span>
        <textarea value={r.notes || ""} onChange={(e) => set("notes", e.target.value)} rows={2} style={{ fontSize: 13, resize: "vertical" }} />
      </label>
    </K2BModal>
  );
};

const FlFld = ({ label, k, type = "text", w, r, set }) => (
    <label style={{ display: "flex", flexDirection: "column", gap: 3 }}>
      <span style={{ fontSize: 11, color: "var(--jb-text-dim)", fontWeight: 600 }}>{label}</span>
      {type === "num"
        ? <input type="number" value={r[k]} onChange={(e) => set(k, e.target.value === "" ? "" : +e.target.value)} style={{ fontSize: 13, width: w }} />
        : <input value={r[k] || ""} onChange={(e) => set(k, type === "fan" ? e.target.value.toUpperCase() : e.target.value)} style={{ fontSize: 13, width: w }} />}
    </label>
);

Object.assign(window, { Fleet });