/* Copyright © 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 Menu Presentation (customer-facing).
// Clean 3-4 column option menu: each column shows payment, term, and an
// itemized list of included protection products with one-line descriptions.
// Figures pull from the desked deal (buyersOrder / financeWorksheet drafts);
// products come from the F&I Products registry (jbProducts).

const FIM_DESC = [
  [/vsc|service contract|warrant/i, "Covers major mechanical & electrical repairs after factory warranty."],
  [/gap/i, "Pays the difference between insurance payout and loan balance if totaled."],
  [/tire|wheel/i, "Repairs or replaces tires & wheels damaged by road hazards."],
  [/maint/i, "Prepaid factory-scheduled maintenance — oil, rotations, inspections."],
  [/etch|theft/i, "VIN etching & theft deterrent with replacement benefit."],
  [/appear|paint|fabric|env/i, "Protects paint, fabric & trim against stains and environmental damage."],
  [/key/i, "Replaces lost or damaged keys and remotes."],
];
const fimDesc = (p) => { const hit = FIM_DESC.find(([re]) => re.test((p.name || "") + " " + (p.code || ""))); return p.desc || (hit ? hit[1] : "Ask your F&I manager for full coverage details."); };
const fimPrice = (p) => +((p.retail != null ? p.retail : p.price != null ? p.price : p.msrp) || 0);
const fim$ = (n) => "$" + (Number(n) || 0).toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 });
const fimPmt = (principal, apr, term) => { const r = (+apr || 0) / 1200, n = +term || 72; return r ? principal * r / (1 - Math.pow(1 + r, -n)) : principal / n; };

const FiMenu = ({ onClose, go }) => {
  const [, force] = React.useReducer(n => n + 1, 0);
  const bo = window.loadJbForm ? window.loadJbForm("buyersOrder") : {};
  const fw = window.loadJbForm ? window.loadJbForm("financeWorksheet") : {};
  const num = (v) => parseFloat(String(v ?? "").replace(/[^0-9.\-]/g, "")) || 0;
  // Base amount financed WITHOUT products (menu adds each column's own).
  const base = num(bo.salePrice) + num(bo.docFee) + num(bo.salesTax) + num(bo.license)
             - num(bo.tradeAllow) + num(bo.tradePayoff) - num(bo.cashDown) - num(bo.rebate);
  // K2B-005: the worksheet's APR as entered — an explicit 0.00 stays 0%. A blank one takes the SAME default as the
  // Finance Deal (RC18: window.fwDefaultApr — the dealership's Default APR % when set, else 6.49; was a separate 6.99 here).
  const [apr, setApr] = React.useState(/\d/.test(String(fw.apr ?? "")) ? num(fw.apr) : (window.fwDefaultApr ? window.fwDefaultApr() : 6.49));
  const [term, setTerm] = React.useState(parseInt(fw.term) || 72);

  const products = (window.jbProducts ? window.jbProducts.list() : []).filter(p => p.active !== false && fimPrice(p) > 0);
  const find = (re) => products.filter(p => re.test((p.name || "") + " " + (p.code || "")));
  const vsc = find(/vsc|service contract|warrant/i), gap = find(/gap/i), tw = find(/tire|wheel/i);
  const rest = products.filter(p => !vsc.includes(p) && !gap.includes(p) && !tw.includes(p));
  const COLUMNS = [
    { name: "PLATINUM", tone: "#11337A", items: [...vsc, ...gap, ...tw, ...rest], tag: "Total protection" },
    { name: "GOLD", tone: "#8a6d1f", items: [...vsc, ...gap, ...tw], tag: "Most popular" },
    { name: "SILVER", tone: "#5A6472", items: [...vsc.slice(0, 1), ...gap.slice(0, 1)], tag: "Core coverage" },
    { name: "BASE", tone: "#8a8f98", items: [], tag: "No added protection" },
  ];

  const printMenu = () => {
    const cols = COLUMNS.map(c => {
      const tot = c.items.reduce((s, p) => s + fimPrice(p), 0);
      const pm = fimPmt(base + tot, apr, term);
      return `<td style="vertical-align:top;width:25%;border:1px solid #808080;padding:8px;">
        <div style="font-weight:700;text-align:center;">${c.name}</div>
        <div style="text-align:center;font-family:'Courier New',monospace;font-size:14pt;font-weight:700;">${fim$(pm)}/mo</div>
        <div style="text-align:center;font-size:8pt;color:#555;">${term} mo @ ${(+apr).toFixed(2)}%</div>
        <hr/>${c.items.map(p => `<div style="font-size:8.5pt;margin-bottom:4px;"><b>${_pEsc ? _pEsc(p.name) : p.name}</b> · ${fim$(fimPrice(p))}<br/><span style="color:#555;">${fimDesc(p)}</span></div>`).join("") || `<div style="font-size:8.5pt;color:#777;">Vehicle only — no protection products.</div>`}
      </td>`;
    }).join("");
    window.k2bPrint && window.k2bPrint(`
      ${window.dealerHeadHtml ? window.dealerHeadHtml() : ""}
      <div class="doc-title">PROTECTION OPTIONS</div>
      <div class="doc-sub">${_pEsc ? _pEsc((bo.firstName || "") + " " + (bo.lastName || "")) : ""} · ${_pEsc ? _pEsc(bo.yrMkMdl || "") : ""}</div>
      <table style="width:100%;border-collapse:collapse;margin-top:8px;"><tr>${cols}</tr></table>
      <div class="sig-row"><div class="sig-box">Customer — I have been offered each option above · Date</div><div class="sig-box">F&amp;I Manager · Date</div></div>`,
      { title: "F&I Menu", formKey: "fiMenu" });
  };

  const card = { background: "#FFF", border: "1px solid var(--jb-border)", borderRadius: "var(--jb-r-lg)", overflow: "hidden", display: "flex", flexDirection: "column" };
  return (
    <div className="k2b-window" style={{ width: "100%", maxWidth: 1280, height: "calc(100vh - 110px)", margin: "0 auto", display: "flex", flexDirection: "column", background: "var(--jb-bg, #EEF0F3)", fontFamily: "var(--jb-font)" }}>
      <K2BTitlebar title="F&I Menu — Customer Presentation" onClose={onClose} />
      <div style={{ display: "flex", alignItems: "center", gap: 12, padding: "8px 16px", background: "var(--jb-surface)", borderBottom: "1px solid var(--jb-border)", flexWrap: "wrap" }}>
        <span style={{ fontSize: 12.5, color: "var(--jb-text-dim)" }}>{(bo.firstName || bo.lastName) ? `${bo.firstName || ""} ${bo.lastName || ""} · ` : ""}{bo.yrMkMdl || "No desked vehicle"} · Base to finance <b style={{ fontFamily: "var(--jb-mono)" }}>{fim$(base)}</b></span>
        <div style={{ flex: 1 }} />
        <label style={{ fontSize: 12, color: "var(--jb-text-dim)", display: "flex", alignItems: "center", gap: 5 }}>APR %
          <input value={apr} onChange={(e) => setApr(e.target.value.replace(/[^0-9.]/g, ""))} style={{ width: 62, fontSize: 13, fontFamily: "var(--jb-mono)", padding: "4px 6px" }} /></label>
        <label style={{ fontSize: 12, color: "var(--jb-text-dim)", display: "flex", alignItems: "center", gap: 5 }}>Term
          <select value={term} onChange={(e) => setTerm(+e.target.value)} style={{ fontSize: 13, padding: "4px 6px" }}>{[36, 48, 60, 66, 72, 75, 84].map(t => <option key={t}>{t}</option>)}</select></label>
        <button className="k2b-button" style={{ background: "var(--jb-yellow)", fontWeight: 700 }} onClick={printMenu}>🖨 Print Menu</button>
        <button className="k2b-button" onClick={() => go && go("fiproducts")}>⚙ Products</button>
      </div>
      <div style={{ flex: 1, overflow: "auto", padding: 16, display: "grid", gridTemplateColumns: "repeat(4, minmax(220px, 1fr))", gap: 14, alignItems: "stretch" }}>
        {COLUMNS.map(c => {
          const tot = c.items.reduce((s, p) => s + fimPrice(p), 0);
          const pm = fimPmt(base + tot, apr, term);
          const basePm = fimPmt(base, apr, term);
          return (
            <div key={c.name} style={card}>
              <div style={{ background: c.tone, color: "#FFF", padding: "12px 14px", textAlign: "center" }}>
                <div style={{ fontSize: 12, letterSpacing: 2, fontWeight: 800 }}>{c.name}</div>
                <div style={{ fontFamily: "var(--jb-mono)", fontSize: 27, fontWeight: 800, marginTop: 2 }}>{fim$(pm)}<span style={{ fontSize: 12, fontWeight: 500, opacity: 0.75 }}>/mo</span></div>
                <div style={{ fontSize: 11, opacity: 0.8 }}>{term} months @ {(+apr || 0).toFixed(2)}% · {c.tag}</div>
                {c.items.length > 0 && <div style={{ fontSize: 10.5, opacity: 0.7 }}>+{fim$(pm - basePm)} /mo over Base</div>}
              </div>
              <div style={{ flex: 1, padding: "10px 14px", display: "flex", flexDirection: "column", gap: 9 }}>
                {c.items.map(p => (
                  <div key={p.id || p.name}>
                    <div style={{ display: "flex", gap: 6, alignItems: "baseline" }}>
                      <span style={{ fontSize: 12.5, fontWeight: 700, color: "var(--jb-text)" }}>✓ {p.name}</span>
                      <span style={{ marginLeft: "auto", fontFamily: "var(--jb-mono)", fontSize: 11.5, color: "var(--jb-text-dim)" }}>{fim$(fimPrice(p))}</span>
                    </div>
                    <div style={{ fontSize: 11, color: "var(--jb-text-muted)", lineHeight: 1.35 }}>{fimDesc(p)}</div>
                  </div>
                ))}
                {!c.items.length && <div style={{ fontSize: 12, color: "var(--jb-text-muted)", textAlign: "center", padding: "18px 0" }}>Vehicle only —<br />no protection products.</div>}
              </div>
              <div style={{ padding: "8px 14px", borderTop: "1px solid var(--jb-border)", display: "flex", fontSize: 11.5, color: "var(--jb-text-dim)" }}>
                <span>Products total</span><span style={{ marginLeft: "auto", fontFamily: "var(--jb-mono)", fontWeight: 700 }}>{fim$(tot)}</span>
              </div>
            </div>
          );
        })}
      </div>
      <div style={{ borderTop: "1px solid var(--jb-border)", padding: "8px 16px", display: "flex", gap: 6, background: "var(--jb-surface)" }}>
        <K2BButton small onClick={onClose}>ESC-Close</K2BButton>
        <K2BButton small onClick={() => go && go("desking")}>Desking</K2BButton>
        <K2BButton small onClick={() => go && go("finance")}>Finance Worksheet</K2BButton>
        <span style={{ marginLeft: "auto", fontSize: 11, color: "var(--jb-text-muted)", alignSelf: "center" }}>Payments include each column's products financed at the shown APR/term. Product pricing edits: F&amp;I Products.</span>
      </div>
    </div>
  );
};

Object.assign(window, { FiMenu });