/* © 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. */
/* eslint-disable */
// JBREWS DMS — RouteOne (F&I credit-application gateway).
// The dealership-facing RouteOne workspace: editable connection settings up
// front, every submission tracked with its reference #, lender decisions
// recorded per deal, and one-click submit for any working deal. The live wire
// to RouteOne's network runs through the server tier (INTEGRATIONS_SPEC.md);
// everything here is functional now and switches to live with zero UI changes.

const r1Money = (n) => "$" + (Number(n) || 0).toLocaleString("en-US", { maximumFractionDigits: 0 });
const R1_TONE = {
  Submitted: { bg: "var(--jb-blue-tint,#E5EFFA)", fg: "var(--jb-blue,#1B66A8)" },
  Approved: { bg: "var(--jb-green-tint,#E6F7EC)", fg: "#0E7A37" },
  Conditioned: { bg: "#FBF3E0", fg: "#9A6700" },
  Declined: { bg: "#FBE9E7", fg: "#B23A2E" },
};
const R1Badge = ({ s }) => { const t = R1_TONE[s] || R1_TONE.Submitted; return <span style={{ background: t.bg, color: t.fg, borderRadius: 999, padding: "2px 10px", fontSize: 11, fontWeight: 700 }}>{s}</span>; };

const RouteOne = ({ onClose, go }) => {
  const D = window.DMS;
  const [, force] = React.useReducer(n => n + 1, 0);
  React.useEffect(() => (D && D.subscribe) ? D.subscribe(force) : undefined, []);
  const act = (r) => { window.k2bToast && window.k2bToast(r.msg, r.ok ? "ok" : "warn", 4200); return r; };

  const deals = (D && D.deals) ? D.deals() : [];
  const submitted = deals.filter(d => d.routeOne);
  const eligible = deals.filter(d => !d.routeOne && d.buyer);
  const [cfg, setCfg] = React.useState(() => (D && D.routeOneConfig) ? D.routeOneConfig() : {});
  const [cfgOpen, setCfgOpen] = React.useState(false);
  // Deal in focus for the "Open RouteOne ▸" launch (the F&I hand-off pointer).
  const focusDealId = (() => { try { return localStorage.getItem("jb_fw_deal") || ""; } catch (e) { return ""; } })();
  const focusDeal = focusDealId ? deals.find(d => d.id === focusDealId) : null;
  const [pickOpen, setPickOpen] = React.useState(false);
  const connected = !!(cfg.dealerId && cfg.user);
  const set = (k, v) => setCfg(c => ({ ...c, [k]: v }));
  const saveCfg = () => { D.setRouteOneConfig(cfg); act({ ok: true, msg: "RouteOne settings saved — Send to RouteOne is live on the Finance Worksheet and Credit App too." }); setCfgOpen(false); force(); };
  const inp = { width: "100%", boxSizing: "border-box", padding: "7px 9px", border: "1px solid #C8CCD2", borderRadius: 4, fontSize: 13 };

  return (
    <div className="k2b-window" style={{ width: "100%", maxWidth: 1240, height: "calc(100vh - 110px)", margin: "0 auto",
                                          display: "flex", flexDirection: "column", background: "var(--jb-surface, #F4F4F4)", fontFamily: "var(--jb-font)" }}>
      <K2BTitlebar title="RouteOne — Credit Application Gateway" onClose={onClose} />

      {/* connection banner + editable settings */}
      <div style={{ background: "#12100E", padding: "12px 16px" }}>
        <div style={{ display: "flex", alignItems: "center", gap: 10, flexWrap: "wrap" }}>
          <span style={{ background: "#E4572E", color: "#fff", fontWeight: 900, fontSize: 15, padding: "3px 9px", borderRadius: 4, letterSpacing: 0.5 }}>RouteOne</span>
          {/* Connected App launch — your own RouteOne login in a named tab the DMS reuses */}
          {window.AppLaunchButton && (
            <AppLaunchButton app="routeone" ctx={{ dealId: focusDealId }}
                             label={focusDeal ? `Open RouteOne ▸ ${focusDeal.buyer || focusDealId}` : "Open RouteOne ▸"}
                             title={focusDeal ? "Opens RouteOne in its signed-in tab for deal " + focusDealId : "Opens RouteOne in its signed-in tab (sign in once)"} />
          )}
          <span style={{ color: "rgba(255,255,255,0.7)", fontSize: 11.5 }}>
            {window.K2BApps && window.K2BApps.isConnected("routeone") ? "● signed in — opens in your RouteOne tab" : "sign in once in the tab that opens; the DMS reuses it"}
          </span>
          <div style={{ flex: 1 }} />
          <span style={{ color: connected ? "#7CE6A1" : "rgba(255,255,255,0.6)", fontSize: 11.5, fontWeight: 600 }}>
            {connected ? `server submit: Dealer ${cfg.dealerId}` : "server submit: not set up (optional)"}
          </span>
          <button className="k2b-button small" onClick={() => setCfgOpen(o => !o)}>{cfgOpen ? "Hide Advanced ▴" : "Advanced — server submit ▾"}</button>
        </div>
        {cfgOpen && (
          <div style={{ marginTop: 12, background: "#FFF", borderRadius: 8, padding: 14 }}>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr 1fr", gap: 12 }}>
              <label style={{ display: "flex", flexDirection: "column", gap: 4 }}>
                <span style={{ fontSize: 11.5, fontWeight: 600, color: "#555" }}>RouteOne Dealer ID</span>
                <input value={cfg.dealerId || ""} onChange={(e) => set("dealerId", e.target.value.toUpperCase())} placeholder="XX123" style={{ ...inp, fontFamily: "var(--jb-mono, monospace)" }} />
              </label>
              <label style={{ display: "flex", flexDirection: "column", gap: 4 }}>
                <span style={{ fontSize: 11.5, fontWeight: 600, color: "#555" }}>Username</span>
                <input value={cfg.user || ""} onChange={(e) => set("user", e.target.value)} style={inp} />
              </label>
              <label style={{ display: "flex", flexDirection: "column", gap: 4 }}>
                <span style={{ fontSize: 11.5, fontWeight: 600, color: "#555" }}>Password</span>
                <span style={{ fontSize: 11.5, color: "var(--jb-text-muted)", padding: "7px 0" }}>Stored securely on the server — an admin enters it in Settings → Integrations (API).</span>
              </label>
              <label style={{ display: "flex", flexDirection: "column", gap: 4 }}>
                <span style={{ fontSize: 11.5, fontWeight: 600, color: "#555" }}>Server Endpoint <span style={{ color: "#999", fontWeight: 400 }}>(from your server tier)</span></span>
                <input value={cfg.endpoint || ""} onChange={(e) => set("endpoint", e.target.value)} placeholder="/api/integrations/routeone" style={{ ...inp, fontFamily: "var(--jb-mono, monospace)" }} />
              </label>
            </div>
            <div style={{ display: "flex", gap: 8, alignItems: "center", marginTop: 10 }}>
              <button className="k2b-button" style={{ background: "var(--jb-yellow)", fontWeight: 700 }} onClick={saveCfg}>Save Settings</button>
              <span style={{ fontSize: 11.5, color: "#888" }}>Optional — only for server-side deal submission (INTEGRATIONS_SPEC.md). Day-to-day, just use <b>Open RouteOne ▸</b> with your own login.</span>
            </div>
          </div>
        )}
      </div>

      {/* KPIs + submit */}
      <div style={{ display: "flex", gap: 10, padding: "10px 16px", borderBottom: "1px solid var(--jb-border)", flexWrap: "wrap", alignItems: "center" }}>
        {[["Submitted", submitted.length], ["Approved", submitted.filter(d => d.routeOne.status === "Approved").length],
          ["Pending Decision", submitted.filter(d => d.routeOne.status === "Submitted").length],
          ["Declined", submitted.filter(d => d.routeOne.status === "Declined").length]].map(([lab, val], i) => (
          <div key={i} style={{ background: "#FFF", border: "1px solid var(--jb-border)", borderRadius: "var(--jb-r-lg)", padding: "8px 14px", minWidth: 120 }}>
            <div style={{ fontSize: 10.5, letterSpacing: 0.6, textTransform: "uppercase", color: "var(--jb-text-muted)" }}>{lab}</div>
            <div style={{ fontFamily: "var(--jb-mono)", fontWeight: 800, fontSize: 20, color: "var(--jb-navy)" }}>{val}</div>
          </div>
        ))}
        <div style={{ flex: 1 }} />
        <button className="k2b-button" style={{ background: "#E4572E", color: "#fff", fontWeight: 700 }}
                onClick={() => connected ? setPickOpen(true) : act({ ok: false, msg: "Server submit needs your RouteOne Dealer ID and username — Advanced above. Or just Open RouteOne ▸ and work the deal there." })}>
          ⇪ Submit Deal to RouteOne…
        </button>
      </div>

      {/* submissions */}
      <div style={{ flex: 1, overflow: "auto" }}>
        {submitted.length === 0 ? (
          <div style={{ padding: 40, textAlign: "center", color: "#888", fontSize: 13 }}>
            No submissions yet. {connected ? "Use “⇪ Submit Deal to RouteOne…” above, or the Send to RouteOne buttons on the Finance Worksheet / Credit App." : "Use Open RouteOne ▸ above to work deals in your own RouteOne login; server submit tracking is optional (Advanced)."}
          </div>
        ) : (
          <table style={{ width: "100%", borderCollapse: "collapse", fontSize: 12.5 }}>
            <thead><tr style={{ background: "var(--jb-surface-2)", color: "var(--jb-text-dim)", textAlign: "left", position: "sticky", top: 0 }}>
              {["Reference", "Deal", "Buyer", "Lender", "Amt Financed", "Sent", "Status", "Decision / Note", ""].map((h, i) => <th key={i} style={{ padding: "8px 12px", fontWeight: 600, textAlign: i === 4 ? "right" : "left" }}>{h}</th>)}
            </tr></thead>
            <tbody>
              {submitted.map((d, i) => {
                const ro = d.routeOne;
                return (
                  <tr key={d.id} style={{ background: i % 2 ? "var(--jb-surface-2)" : "#FFF" }}>
                    <td style={{ padding: "8px 12px", fontFamily: "var(--jb-mono)", fontWeight: 700, color: "#E4572E" }}>{ro.ref}</td>
                    <td style={{ padding: "8px 12px", fontFamily: "var(--jb-mono)" }}>{d.id}</td>
                    <td style={{ padding: "8px 12px", fontWeight: 600 }}>{d.buyer}</td>
                    <td style={{ padding: "8px 12px" }}>{ro.lender || d.lender || "—"}</td>
                    <td style={{ padding: "8px 12px", textAlign: "right", fontFamily: "var(--jb-mono)" }}>{r1Money(ro.amount || d.amtFinanced)}</td>
                    <td style={{ padding: "8px 12px", color: "var(--jb-text-dim)" }}>{ro.sentAt ? new Date(ro.sentAt).toLocaleDateString() : "—"}</td>
                    <td style={{ padding: "8px 12px" }}><R1Badge s={ro.status} /></td>
                    <td style={{ padding: "8px 12px" }}>
                      {ro.status === "Submitted" ? (
                        <span style={{ display: "inline-flex", gap: 4 }}>
                          {["Approved", "Conditioned", "Declined"].map(dec => (
                            <button key={dec} className="k2b-button small" onClick={() => {
                              const note = dec === "Conditioned" ? (window.prompt("Condition / stip (e.g. proof of income):") || "") : "";
                              act(D.setRouteOneDecision(d.id, dec, note));
                            }}>{dec}</button>
                          ))}
                        </span>
                      ) : <span style={{ fontSize: 11.5, color: "var(--jb-text-dim)" }}>{ro.note || (ro.decidedAt ? new Date(ro.decidedAt).toLocaleString() : "")}</span>}
                    </td>
                    <td style={{ padding: "8px 12px", textAlign: "right", whiteSpace: "nowrap" }}>
                      {window.AppLaunchButton && <AppLaunchButton app="routeone" ctx={{ dealId: d.id }} small label="RouteOne ▸" style={{ marginRight: 4 }} />}
                      <button className="k2b-button small" onClick={() => go && go("financews")}>Open in F&I ▸</button>
                    </td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        )}
      </div>

      <div style={{ borderTop: "1px solid var(--jb-border)", padding: "8px 16px", display: "flex", gap: 6, flexWrap: "wrap" }}>
        <K2BButton small onClick={onClose}>ESC-Close</K2BButton>
        <K2BButton small onClick={() => go && go("financews")}>Finance Worksheet</K2BButton>
        <K2BButton small onClick={() => go && go("creditapp")}>Credit App</K2BButton>
        <K2BButton small onClick={() => go && go("banks")}>Banks / Lenders</K2BButton>
      </div>

      {pickOpen && (
        <K2BModal title="Submit Deal to RouteOne" width={560} onClose={() => setPickOpen(false)}
          buttons={<K2BButton onClick={() => setPickOpen(false)}>Cancel</K2BButton>}>
          {eligible.length === 0 ? (
            <div style={{ color: "#888", fontSize: 13 }}>Every deal with a buyer has already been submitted. Create or work a deal first (Deals / Desking).</div>
          ) : (
            <div style={{ display: "flex", flexDirection: "column", gap: 6, maxHeight: 360, overflow: "auto" }}>
              {eligible.map(d => (
                <button key={d.id} className="k2b-button" style={{ textAlign: "left", display: "flex", gap: 10, alignItems: "center" }}
                        onClick={() => { const r = act(D.sendToRouteOne(d.id)); if (r.ok) setPickOpen(false); }}>
                  <span style={{ fontFamily: "var(--jb-mono)", fontWeight: 700, color: "var(--jb-navy)" }}>{d.id}</span>
                  <span style={{ flex: 1 }}>{d.buyer} · {d.vehicle || "—"}</span>
                  <span style={{ fontFamily: "var(--jb-mono)" }}>{r1Money(d.amtFinanced || d.salePrice)}</span>
                </button>
              ))}
            </div>
          )}
        </K2BModal>
      )}
    </div>
  );
};

Object.assign(window, { RouteOne });