/* 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 — F&I Products & Service Contracts catalog (Sales & F&I).
// Manages window.jbProducts: service contracts, GAP, maintenance, tire & wheel,
// appearance, key/theft and other ancillary products. Edits here drive the
// product checklist in the Desking tool.

const fp$ = (n) => "$" + (Number(n) || 0).toLocaleString("en-US", { minimumFractionDigits: 0, maximumFractionDigits: 0 });
const FP_CAT_COLOR = {
  "Service Contract": "var(--jb-blue)", "GAP": "var(--jb-green)", "Maintenance": "var(--jb-amber)",
  "Tire & Wheel": "var(--jb-navy)", "Appearance Protection": "#7C3AED", "Key / Theft": "var(--jb-red)", "Other": "#64748B",
};

const FiProducts = ({ onClose, go }) => {
  const [, force] = React.useReducer(n => n + 1, 0);
  React.useEffect(() => window.jbProducts ? window.jbProducts.subscribe(force) : undefined, []);
  const list = window.jbProducts ? window.jbProducts.list() : [];
  const CATS = window.jbProducts ? window.jbProducts.CATEGORIES : [];
  const [edit, setEdit] = React.useState(null);

  const blank = { category: "Service Contract", name: "", provider: "", code: "", retail: 0, cost: 0, taxable: false, termMo: 0, active: true, notes: "" };
  const totalRetail = list.filter(p => p.active).reduce((s, p) => s + p.retail, 0);
  const avgMargin = (() => { const a = list.filter(p => p.active); return a.length ? a.reduce((s, p) => s + (p.retail - p.cost), 0) / a.length : 0; })();
  const usedCats = CATS.filter(c => list.some(p => p.category === c));

  return (
    <div className="k2b-window" style={{ width: "100%", maxWidth: 1240, height: 780, margin: "0 auto", fontFamily: "var(--jb-font)" }}>
      <K2BTitlebar title="F&I Products & Service Contracts" 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" }}>
          {[["Products", list.length, "var(--jb-navy)"], ["Active", list.filter(p => p.active).length, "var(--jb-green)"],
            ["Service Contracts", list.filter(p => p.category === "Service Contract").length, "var(--jb-blue)"],
            ["Avg. Margin", fp$(avgMargin), "var(--jb-amber)"]].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>

        <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
          <div style={{ fontSize: 12.5, color: "var(--jb-text-dim)" }}>Active menu retail total: <b style={{ color: "var(--jb-text)", fontFamily: "var(--jb-mono)" }}>{fp$(totalRetail)}</b></div>
          <div style={{ flex: 1 }} />
          <button className="k2b-button" style={{ background: "var(--jb-yellow)", fontWeight: 700 }} onClick={() => setEdit({ ...blank })}>+ Add Product</button>
        </div>

        {usedCats.map(cat => (
          <div key={cat} style={{ background: "var(--jb-surface)", border: "1px solid var(--jb-border)", borderRadius: "var(--jb-r-lg)", overflow: "hidden", boxShadow: "var(--jb-shadow-sm)" }}>
            <div style={{ display: "flex", alignItems: "center", gap: 8, padding: "7px 14px", borderBottom: "1px solid var(--jb-border)", background: "var(--jb-surface-2)" }}>
              <span style={{ width: 6, height: 16, borderRadius: 3, background: FP_CAT_COLOR[cat] || "#888" }} />
              <span style={{ fontWeight: 700, fontSize: 12.5, textTransform: "uppercase", letterSpacing: 0.3 }}>{cat}</span>
            </div>
            <table style={{ width: "100%", borderCollapse: "collapse", fontSize: 12.5 }}>
              <thead><tr style={{ color: "var(--jb-text-muted)", textAlign: "left" }}>
                {["Product", "Provider", "Code", "Retail", "Cost", "Margin", "Tax", "Term", ""].map((h, i) => (
                  <th key={i} style={{ padding: "6px 12px", fontWeight: 600, fontSize: 11, textAlign: i >= 3 && i <= 5 ? "right" : "left" }}>{h}</th>
                ))}
              </tr></thead>
              <tbody>
                {list.filter(p => p.category === cat).map((p, i) => (
                  <tr key={p.id} onClick={() => setEdit({ ...p })} style={{ borderTop: "1px solid var(--jb-border)", cursor: "pointer", opacity: p.active ? 1 : 0.5 }}>
                    <td style={{ padding: "7px 12px", fontWeight: 600, color: "var(--jb-navy)" }}>{p.name}</td>
                    <td style={{ padding: "7px 12px", color: "var(--jb-text-dim)" }}>{p.provider}</td>
                    <td style={{ padding: "7px 12px", fontFamily: "var(--jb-mono)", color: "var(--jb-text-muted)" }}>{p.code}</td>
                    <td style={{ padding: "7px 12px", textAlign: "right", fontFamily: "var(--jb-mono)" }}>{fp$(p.retail)}</td>
                    <td style={{ padding: "7px 12px", textAlign: "right", fontFamily: "var(--jb-mono)", color: "var(--jb-text-muted)" }}>{fp$(p.cost)}</td>
                    <td style={{ padding: "7px 12px", textAlign: "right", fontFamily: "var(--jb-mono)", color: "var(--jb-green)", fontWeight: 700 }}>{fp$(p.retail - p.cost)}</td>
                    <td style={{ padding: "7px 12px" }}>{p.taxable ? <span style={{ fontSize: 11, color: "var(--jb-amber)" }}>taxable</span> : <span style={{ fontSize: 11, color: "var(--jb-text-muted)" }}>—</span>}</td>
                    <td style={{ padding: "7px 12px", fontFamily: "var(--jb-mono)", color: "var(--jb-text-dim)" }}>{p.termMo ? p.termMo + "mo" : "—"}</td>
                    <td style={{ padding: "7px 12px", textAlign: "right" }}>{!p.active && <span style={{ fontSize: 11, color: "var(--jb-text-muted)" }}>inactive</span>}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        ))}
        {list.length === 0 && <div style={{ padding: 24, textAlign: "center", color: "var(--jb-text-muted)" }}>No products yet — click “+ Add Product”.</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("desking")}>Back to Desking</button>
        </div>
      </div>

      {edit && <ProductEditor rec={edit} CATS={CATS} onClose={() => setEdit(null)}
        onSave={(r) => { window.jbProducts.upsert(r); setEdit(null); window.k2bToast && window.k2bToast(`${r.name || "Product"} saved.`, "ok"); }}
        onDelete={edit.id ? () => { window.jbProducts.remove(edit.id); setEdit(null); window.k2bToast && window.k2bToast("Product removed.", "warn"); } : null} />}
    </div>
  );
};

const ProductEditor = ({ rec, CATS, onClose, onSave, onDelete }) => {
  const [r, setR] = React.useState({ ...rec });
  const set = (k, v) => setR(p => ({ ...p, [k]: v }));
  const margin = (+r.retail || 0) - (+r.cost || 0);
  const valid = (r.name || "").trim().length > 0;
  return (
    <K2BModal title={rec.id ? "Edit Product" : "Add Product"} width={600} onClose={onClose}
      buttons={<>
        {onDelete && <K2BButton onClick={onDelete}>Delete</K2BButton>}
        <K2BButton onClick={onClose}>Cancel</K2BButton>
        <K2BButton primary onClick={() => valid ? onSave(r) : window.k2bToast && window.k2bToast("Product name is required.", "warn")}>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 }}>Product 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 }}>Category</span>
          <select value={r.category} onChange={(e) => set("category", e.target.value)} style={{ fontSize: 13 }}>{CATS.map(c => <option key={c}>{c}</option>)}</select>
        </label>
        <FpFld label="Provider / Administrator" k="provider" r={r} set={set} />
        <FpFld label="Plan Code" k="code" r={r} set={set} />
        <FpFld label="Term (months)" k="termMo" type="num" r={r} set={set} />
        <FpFld label="Retail $" k="retail" type="num" r={r} set={set} />
        <FpFld label="Dealer Cost $" k="cost" type="num" r={r} set={set} />
        <div style={{ display: "flex", flexDirection: "column", gap: 3 }}>
          <span style={{ fontSize: 11, color: "var(--jb-text-dim)", fontWeight: 600 }}>Margin</span>
          <div style={{ fontFamily: "var(--jb-mono)", fontWeight: 700, fontSize: 16, color: margin >= 0 ? "var(--jb-green)" : "var(--jb-red)" }}>{fp$(margin)}</div>
        </div>
        <label style={{ display: "flex", alignItems: "center", gap: 8, marginTop: 18 }}>
          <input type="checkbox" checked={!!r.taxable} onChange={(e) => set("taxable", e.target.checked)} style={{ width: 16, height: 16 }} />
          <span style={{ fontSize: 13 }}>Taxable</span>
        </label>
      </div>
      <label style={{ display: "flex", alignItems: "center", gap: 8, marginTop: 12 }}>
        <input type="checkbox" checked={r.active !== false} onChange={(e) => set("active", e.target.checked)} style={{ width: 16, height: 16 }} />
        <span style={{ fontSize: 13 }}>Active (offered in the Desking product menu)</span>
      </label>
      <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 FpFld = ({ label, k, type = "text", 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 }} />
        : <input value={r[k] || ""} onChange={(e) => set(k, e.target.value)} style={{ fontSize: 13 }} />}
    </label>
);

Object.assign(window, { FiProducts });