/* 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 — Trade-In Appraisal desk + book/market connector layer.
//
// window.TradeConnectors is the integration surface for vAuto, AccuTrade, KBB,
// Manheim MMR and Black Book. Each provider has an endpoint + apiKey slot.
//
//   ▸ TODAY (no server): quotes are produced by a deterministic local valuation
//     engine so the desk is fully usable. Every result is tagged simulated:true.
//   ▸ LIVE (with the JBREWS server tier): set apiKey + endpoint for a provider
//     and replace the body of `_liveQuote` with a fetch to your server proxy —
//     the rest of the desk (UI, deal push, GL) is already wired and unchanged.
//
// Browsers can't legally hold third-party API keys or call those private APIs
// directly (CORS + key custody), so live calls must route through your server.

window.TradeConnectors = (() => {
  const CFG_KEY = "jbrews-trade-connectors-v1";

  const DEFAULT = [
    { id: "vauto",     name: "vAuto Provision",   kind: "Market / Retail",     endpoint: "https://api.coxautoinc.com/vauto/v1/appraise", apiKey: "" },
    { id: "accutrade", name: "AccuTrade",         kind: "Instant Cash Offer",  endpoint: "https://api.coxautoinc.com/accutrade/v1/offer", apiKey: "" },
    { id: "kbb",       name: "Kelley Blue Book",  kind: "Consumer / Retail",   endpoint: "https://api.kbb.com/v2/values",                 apiKey: "" },
    { id: "mmr",       name: "Manheim MMR",       kind: "Auction / Wholesale", endpoint: "https://api.manheim.com/valuations/mmr",        apiKey: "" },
    { id: "blackbook", name: "Black Book",        kind: "Wholesale / Trade",   endpoint: "https://api.blackbookcom.com/v2/values",        apiKey: "" },
  ];

  const loadCfg = () => { try { const r = JSON.parse(localStorage.getItem(CFG_KEY) || "null"); if (r) return DEFAULT.map(p => ({ ...p, ...(r[p.id] || {}) })); } catch (e) {} return DEFAULT.map(p => ({ ...p })); };
  const saveCfg = (list) => { try { const m = {}; list.forEach(p => { m[p.id] = { apiKey: p.apiKey, endpoint: p.endpoint }; }); localStorage.setItem(CFG_KEY, JSON.stringify(m)); } catch (e) {} };

  // Deterministic pseudo-valuation so the desk works with no backend.
  const hash = (s) => { let h = 2166136261; for (let i = 0; i < String(s).length; i++) { h ^= String(s).charCodeAt(i); h = Math.imul(h, 16777619); } return (h >>> 0); };
  const segmentBase = (mk, mdl, type) => {
    const s = `${mk} ${mdl} ${type}`.toLowerCase();
    if (/(escalade|denali|navigator|suburban|tahoe lt|yukon)/.test(s)) return 62000;
    if (/(silverado|sierra|f-150|f150|ram|tundra|truck)/.test(s)) return 41000;
    if (/(tahoe|suburban|explorer|traverse|highlander|suv|equinox|blazer|trax)/.test(s)) return 33000;
    if (/(camaro|corvette|mustang|challenger)/.test(s)) return 39000;
    if (/(malibu|impala|civic|accord|altima|car|sedan|cruze|sonic)/.test(s)) return 25000;
    return 24000;
  };

  const _estimate = (v) => {
    const year = +v.year || new Date().getFullYear();
    const age = Math.max(0, new Date().getFullYear() - year);
    const miles = +String(v.mileage || "").replace(/[^0-9]/g, "") || (age * 12000);
    const base = segmentBase(v.make, v.model, v.type);
    // depreciation curve + mileage delta vs 12k/yr expectation
    let market = base * Math.pow(0.87, age);
    const expMiles = age * 12000;
    market += (expMiles - miles) * 0.06;
    // stable per-VIN jitter ±3%
    const j = ((hash(v.vin || (v.make + v.model + year)) % 600) - 300) / 10000;
    market *= (1 + j);
    // condition factor
    const cond = { Rough: 0.85, Average: 0.94, Clean: 1.0, Outstanding: 1.07 }[v.condition || "Clean"] || 1.0;
    market *= cond;
    market = Math.max(1200, Math.round(market / 25) * 25);
    return { market, miles, age };
  };

  // Per-provider character (so the side-by-side reads like the real tools).
  const PROVIDER_FACTOR = { vauto: 1.02, accutrade: 0.99, kbb: 1.0, mmr: 0.965, blackbook: 0.975 };

  const _simQuote = (provId, v) => {
    const { market, miles, age } = _estimate(v);
    const f = PROVIDER_FACTOR[provId] || 1;
    const m = Math.round((market * f) / 25) * 25;
    const out = {
      provider: provId, simulated: true, asOf: new Date().toISOString(),
      wholesale: Math.round(m * 0.88 / 25) * 25,
      trade:     Math.round(m * 0.90 / 25) * 25,
      clean:     m,
      retail:    Math.round(m * 1.18 / 25) * 25,
      miles, age,
    };
    if (provId === "vauto") { out.marketDaysSupply = 38 + (hash(v.vin + "ds") % 40); out.comps = 12 + (hash(v.vin + "c") % 30); out.priceRank = ["Great", "Good", "Fair"][hash(v.vin + "r") % 3]; }
    if (provId === "accutrade") { out.cashOffer = Math.round(m * 0.89 / 25) * 25; out.grade = (3.2 + (hash(v.vin + "g") % 18) / 10).toFixed(1) + " / 5"; out.validDays = 7; }
    if (provId === "mmr") { out.adjustedMMR = m; out.lastSales = 5 + (hash(v.vin + "ls") % 20); }
    return out;
  };

  // Live integration point — wire to your JBREWS server proxy here.
  const _liveQuote = async (prov, v) => {
    // Example (requires the JBREWS server tier holding the real key securely):
    // const r = await fetch('/jbrews/api/appraise/' + prov.id, { method:'POST',
    //   headers:{ 'Content-Type':'application/json' }, body: JSON.stringify(v) });
    // return await r.json();
    return null; // not configured → caller falls back to the estimate
  };

  const api = {
    providers: loadCfg(),
    refresh() { this.providers = loadCfg(); return this.providers; },
    configure(id, patch) { this.providers = this.providers.map(p => p.id === id ? { ...p, ...patch } : p); saveCfg(this.providers); return { ok: true }; },
    isLive(id) { const p = this.providers.find(x => x.id === id); return !!(p && p.apiKey && p.endpoint); },
    async quote(id, vehicle) {
      const prov = this.providers.find(p => p.id === id);
      if (prov && prov.apiKey && prov.endpoint) { try { const live = await _liveQuote(prov, vehicle); if (live) return { ...live, simulated: false, provider: id }; } catch (e) {} }
      return _simQuote(id, vehicle);
    },
    async quoteAll(vehicle, ids) {
      const list = (ids && ids.length ? ids : this.providers.map(p => p.id));
      const res = {};
      for (const id of list) res[id] = await this.quote(id, vehicle);
      return res;
    },
    // Blended recommended ACV from the wholesale/trade columns across providers.
    recommendedACV(quotes) {
      const vals = Object.values(quotes).flatMap(q => [q.wholesale, q.trade]).filter(n => n > 0);
      if (!vals.length) return 0;
      return Math.round((vals.reduce((s, n) => s + n, 0) / vals.length) / 25) * 25;
    },
  };
  return api;
})();

/* ── Trade Appraisal screen ─────────────────────────────────────────────── */
const _taMoney = (n) => { const v = +n; return isNaN(v) ? "—" : "$" + Math.round(v).toLocaleString("en-US"); };
const TA_PROV_LABEL = { vauto: "vAuto Provision", accutrade: "AccuTrade", kbb: "Kelley Blue Book", mmr: "Manheim MMR", blackbook: "Black Book" };

// Sales features: trade VALUES are set by a sales manager or admin (owner decision). Salespeople send a
// trade on Trade-In Requests instead; anyone else who reaches this screen sees #ta-denied.
const taIsMgr = () => !!(window.DMS && ((DMS.isAdmin && DMS.isAdmin()) || (DMS.roleIs && DMS.roleIs("Sales Manager"))));
const TradeAppraisal = ({ onClose, go }) => {
  if (taIsMgr()) return <TaAppraisalDesk onClose={onClose} go={go} />;
  return (
    <div className="k2b-window" style={{ width: "100%", maxWidth: 760, margin: "0 auto", display: "flex", flexDirection: "column", background: "var(--jb-surface)" }}>
      <K2BTitlebar title="Trade-In Appraisal" icon="store" onClose={onClose} />
      <div id="ta-denied" style={{ padding: "36px 28px", textAlign: "center", fontSize: 14, color: "var(--jb-text-dim)", lineHeight: 1.6 }}>
        Trade values are set by a manager. Use Trade-In Requests to send a trade.
        <div style={{ marginTop: 14 }}>
          <button id="ta-go-trades" className="k2b-button" style={{ background: "var(--jb-yellow)", fontWeight: 700 }} onClick={() => go && go("trades")}>Open Trade-In Requests ▸</button>
        </div>
      </div>
    </div>
  );
};

const TaAppraisalDesk = ({ onClose, go }) => {
  const [, force] = React.useReducer(n => n + 1, 0);
  React.useEffect(() => DMS.subscribe(force), []);

  const [veh, setVeh] = React.useState({ vin: "", year: "", make: "", model: "", trim: "", type: "", mileage: "", condition: "Clean", color: "", options: "" });
  // Fields a person typed (or that arrived from another screen): a VIN decode never replaces them.
  const taTyped = React.useRef(new Set());
  const set = (k, v) => { taTyped.current.add(k); setVeh(s => ({ ...s, [k]: v })); };
  // Typing / pasting a 17-character VIN fills the still-blank year / make / model / trim / body type / color from our server
  // (MarketCheck -> NHTSA -> the VIN itself; window.DMS.vin). Undo puts the filled values back.
  const vinFill = (typeof VlUseVinFill === "function") ? VlUseVinFill({
    vin: veh.vin, keys: { year: "year", make: "make", model: "model", trim: "trim", type: "body", color: "exteriorColor" },
    read: () => veh, write: (p) => setVeh(s => ({ ...s, ...p })), typed: () => taTyped.current, shape: { year: (n) => String(n) },
  }) : null;
  const [quotes, setQuotes] = React.useState(null);
  const [busy, setBusy] = React.useState(false);
  const [acv, setAcv] = React.useState("");
  const [allowance, setAllowance] = React.useState("");
  const [payoff, setPayoff] = React.useState("");
  const [dealId, setDealId] = React.useState("");
  const [showCfg, setShowCfg] = React.useState(false);
  // CRM hand-off: `jb_appraisal_lead` = { leadId, custNum, name, year, make,
  // model, vin, miles, payoff } written by the CRM's "Trade Appraisal ▸"
  // (read-once, removed here). While linked, Save writes the ACV / allowance /
  // payoff back onto that lead (and its deal, if it's already been desked).
  const [lead, setLead] = React.useState(null);
  const [savedToLead, setSavedToLead] = React.useState(false);
  React.useEffect(() => {
    let ptr = null;
    try { const raw = localStorage.getItem("jb_appraisal_lead"); if (raw) { ptr = JSON.parse(raw); localStorage.removeItem("jb_appraisal_lead"); } } catch (e) {}
    if (!ptr && window.jbAppraisalLead) ptr = window.jbAppraisalLead;
    try { delete window.jbAppraisalLead; } catch (e) {}
    if (!ptr || (!ptr.leadId && !ptr.vin)) return;
    if (ptr.leadId) setLead(ptr);                 // VIN Decode's "Send to Appraisal" hands over a vehicle without a lead: just the vehicle
    const pre = { year: String(ptr.year || ""), make: String(ptr.make || ""), model: String(ptr.model || ""), trim: String(ptr.trim || ""), vin: String(ptr.vin || "").toUpperCase(), mileage: String(ptr.miles || ""), color: String(ptr.color || "") };
    Object.keys(pre).forEach(k => { if (pre[k]) taTyped.current.add(k); else delete pre[k]; });
    setVeh(s => ({ ...s, ...pre }));
    if (+ptr.payoff > 0) setPayoff(String(+ptr.payoff));
    // the lead's existing deal (if desked) is the natural "attach to" target
    if (DMS.crmLeads) { const l = (DMS.crmLeads() || []).find(x => x.id === ptr.leadId); if (l && l.dealId) setDealId(l.dealId); }
  }, []);
  // Write the saved appraisal back onto the linked CRM lead (+ its deal).
  const writeBackToLead = (apprId) => {
    if (!lead || !lead.leadId || !DMS.crmLeads || !DMS.crmSetLeads) return false;
    const list = (DMS.crmLeads() || []).slice();
    const i = list.findIndex(x => x.id === lead.leadId);
    if (i < 0) { window.k2bToast && window.k2bToast("Lead " + lead.leadId + " is no longer in the CRM — appraisal saved, not linked.", "warn"); return false; }
    const l = { ...list[i] };
    const yr = String(veh.year || "").trim().toUpperCase(), mk = String(veh.make || "").trim().toUpperCase(), mdl = String(veh.model || "").trim().toUpperCase();
    const desc = [yr, mk, mdl].filter(Boolean).join(" ");
    const nAcv = +acv || 0, nAllow = +allowance || 0, nPay = +payoff || 0;
    const now = new Date().toISOString();
    Object.assign(l, { tradeYr: yr, tradeMk: mk, tradeMdl: mdl, tradeVin: String(veh.vin || "").toUpperCase(), tradeMiles: String(veh.mileage || "").replace(/[^0-9]/g, ""),
                       tradeAllow: nAllow, tradeAcv: nAcv, tradePayoff: nPay ? String(nPay) : (l.tradePayoff || ""), tradeApprId: apprId,
                       tradeIn: desc, tradeVehicle: desc, lastTouch: now });
    // no ACV in lead text: the lead is the salesperson's (the ACV stays in tradeAcv, which the server hides from Sales)
    l.activities = [{ kind: "note", body: `Appraised - allowance ${_taMoney(nAllow)} - payoff ${_taMoney(nPay)} (${apprId})`, at: now }, ...(l.activities || [])];
    list[i] = l;
    DMS.crmSetLeads(list);
    if (l.dealId && DMS.updateDeal) {
      DMS.updateDeal(l.dealId, { tradeDesc: desc, tradeAllow: nAllow, tradeACV: nAcv, tradeAcv: nAcv, tradePayoff: nPay, tradeVin: l.tradeVin, tradeMiles: +l.tradeMiles || 0, tradeApprId: apprId });
    }
    setSavedToLead(true);
    window.k2bToast && window.k2bToast(`Saved to lead ${lead.name || lead.leadId} — Desk It will carry this trade.`, "ok", 4200);
    return true;
  };

  const deals = (DMS.deals() || []).filter(d => d.buyer);
  const recent = DMS.appraisals();

  // Decode button: the real decoder (our server), again - the VIN box also decodes by itself once 17 characters are in.
  const decodeVin = () => {
    if (!vinFill) { window.k2bToast && window.k2bToast("VIN look-up is not loaded. Reload the page.", "warn"); return; }
    if (!(window.jbVin && window.jbVin.isVin(veh.vin))) { window.k2bToast && window.k2bToast("Enter a full 17-character VIN to decode (no I, O or Q).", "warn"); return; }
    vinFill.again();
  };

  const pull = async () => {
    if (!veh.make && !veh.model) { window.k2bToast && window.k2bToast("Enter at least make & model (or decode a VIN).", "warn"); return; }
    setBusy(true);
    const q = await window.TradeConnectors.quoteAll(veh);
    setQuotes(q);
    const rec = window.TradeConnectors.recommendedACV(q);
    setAcv(String(rec));
    setAllowance(String(Math.round(rec * 1.08 / 25) * 25)); // typical over-allow vs ACV
    setBusy(false);
  };

  const saveAppraisal = () => {
    const r = DMS.addAppraisal({ ...veh, acv: +acv || 0, allowance: +allowance || 0, payoff: +payoff || 0,
      quotes: quotes || {}, recommended: +acv || 0,
      leadId: lead ? lead.leadId : "", custNum: lead ? lead.custNum || "" : "", leadName: lead ? lead.name || "" : "" });
    window.k2bToast && window.k2bToast(r.msg, "ok");
    if (r && r.ok && lead) writeBackToLead(r.id);
    return r;
  };
  const applyToDeal = () => {
    if (!dealId) { window.k2bToast && window.k2bToast("Choose a deal to attach this trade to.", "warn"); return; }
    saveAppraisal();
    const r = DMS.applyTradeToDeal(dealId, { allowance: +allowance || 0, acv: +acv || 0, payoff: +payoff || 0,
      vehicle: [veh.year, veh.make, veh.model].filter(Boolean).join(" "), vin: veh.vin });
    window.k2bToast && window.k2bToast(r.msg, r.ok ? "ok" : "warn");
    if (r.ok && go) go("deal");
  };

  const provIds = window.TradeConnectors.providers.map(p => p.id);

  const fld = { width: "100%", boxSizing: "border-box", padding: "6px 8px", fontSize: 13 };
  const lab = { fontSize: 10.5, fontWeight: 700, textTransform: "uppercase", letterSpacing: "0.04em", color: "var(--jb-text-muted)", marginBottom: 3, display: "block" };

  return (
    <div className="k2b-window" style={{ width: "100%", maxWidth: 1180, height: "calc(100vh - 110px)", margin: "0 auto", display: "flex", flexDirection: "column", background: "var(--jb-surface)" }}>
      <K2BTitlebar title="Trade-In Appraisal" icon="store" onClose={onClose} />

      {lead && (
        <div style={{ display: "flex", alignItems: "center", gap: 10, flexWrap: "wrap", padding: "8px 20px", fontSize: 12.5,
                      background: "var(--jb-blue-tint, #E5EFFA)", borderBottom: "1px solid var(--jb-blue, #1B66A8)", color: "var(--jb-navy)" }}>
          <span>
            Appraising for lead <b>{lead.name || lead.leadId}</b>{lead.custNum ? <span style={{ fontFamily: "var(--jb-mono)" }}> ({lead.custNum})</span> : null}
            {" — "}saving writes the ACV / allowance / payoff back to the CRM lead{savedToLead ? <b style={{ color: "var(--jb-green, #16A34A)" }}> · saved ✓</b> : null}.
          </span>
          <div style={{ flex: 1 }} />
          {savedToLead && <button className="k2b-button" style={{ background: "var(--jb-yellow)", fontWeight: 700 }} onClick={() => go && go("crm")}>Back to CRM ▸</button>}
          <button className="k2b-button small" onClick={() => { setLead(null); setSavedToLead(false); window.k2bToast && window.k2bToast("Lead link cleared — this appraisal will save on its own.", "info"); }}>Cancel link</button>
        </div>
      )}

      <div style={{ flex: 1, overflow: "auto", padding: "16px 20px", display: "grid", gridTemplateColumns: "320px 1fr", gap: 18, alignItems: "start" }}>
        {/* Left — vehicle entry */}
        <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
          <div style={{ fontSize: 15, fontWeight: 700, color: "var(--jb-text)" }}>Trade Vehicle</div>
          <div>
            <span style={lab}>VIN</span>
            <div style={{ display: "flex", gap: 6 }}>
              <input id="ta-vin" data-ta="vin" style={{ ...fld, fontFamily: "var(--jb-mono)" }} value={veh.vin} onChange={(e) => set("vin", e.target.value.toUpperCase().replace(/[\s-]+/g, ""))} placeholder="1G1ZD5ST…" title="Type or paste the 17-character VIN - it decodes as you type" />
              <button id="ta-decode" className="k2b-button" onClick={decodeVin}>Decode</button>
            </div>
            {vinFill && typeof VlVinNote === "function" && <VlVinNote fill={vinFill} id="ta-vin-note" />}
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 2fr", gap: 8 }}>
            <div><span style={lab}>Year</span><input data-ta="year" style={fld} value={veh.year} onChange={(e) => set("year", e.target.value)} /></div>
            <div><span style={lab}>Make</span><input data-ta="make" style={fld} value={veh.make} onChange={(e) => set("make", e.target.value)} /></div>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "2fr 1fr", gap: 8 }}>
            <div><span style={lab}>Model</span><input data-ta="model" style={fld} value={veh.model} onChange={(e) => set("model", e.target.value)} /></div>
            <div><span style={lab}>Trim</span><input data-ta="trim" style={fld} value={veh.trim || ""} onChange={(e) => set("trim", e.target.value)} /></div>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8 }}>
            <div><span style={lab}>Body type</span><input data-ta="type" style={fld} value={veh.type || ""} onChange={(e) => set("type", e.target.value)} placeholder="SUV, Pickup, Sedan…" /></div>
            <div><span style={lab}>Color</span><input data-ta="color" style={fld} value={veh.color || ""} onChange={(e) => set("color", e.target.value)} /></div>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8 }}>
            <div><span style={lab}>Mileage</span><input style={fld} value={veh.mileage} onChange={(e) => set("mileage", e.target.value)} placeholder="e.g. 48200" /></div>
            <div><span style={lab}>Condition</span>
              <select style={fld} value={veh.condition} onChange={(e) => set("condition", e.target.value)}>
                {["Rough", "Average", "Clean", "Outstanding"].map(c => <option key={c}>{c}</option>)}
              </select>
            </div>
          </div>
          <div><span style={lab}>Options / Notes</span><input style={fld} value={veh.options} onChange={(e) => set("options", e.target.value)} placeholder="leather, tow pkg, 2 keys…" /></div>
          <button className="k2b-button" style={{ background: "var(--jb-yellow)", fontWeight: 700, padding: "9px 14px", marginTop: 4 }} onClick={pull} disabled={busy}>
            {busy ? "Pulling valuations…" : "⟳ Pull Valuations"}
          </button>
          <button className="k2b-button" style={{ fontSize: 11 }} onClick={() => setShowCfg(true)}>⚙ Connector Settings</button>
        </div>

        {/* Right — results */}
        <div style={{ minWidth: 0 }}>
          {!quotes ? (
            <div style={{ border: "1px dashed var(--jb-border-strong)", borderRadius: 10, padding: "40px 24px", textAlign: "center", color: "var(--jb-text-muted)" }}>
              <div style={{ fontSize: 30, marginBottom: 8 }}>📊</div>
              <div style={{ fontSize: 14, fontWeight: 600, color: "var(--jb-text-dim)" }}>Enter a trade vehicle and pull valuations.</div>
              <div style={{ fontSize: 12, marginTop: 4 }}>Pulls vAuto, AccuTrade, KBB, Manheim MMR &amp; Black Book side by side.</div>
            </div>
          ) : (
            <>
              {/* Provider comparison */}
              <div style={{ overflowX: "auto", border: "1px solid var(--jb-border)", borderRadius: 10 }}>
                <table style={{ width: "100%", borderCollapse: "collapse", fontSize: 12.5, minWidth: 560 }}>
                  <thead>
                    <tr style={{ background: "var(--jb-navy)", color: "#FFF" }}>
                      <th style={{ ...taTh, textAlign: "left" }}>Provider</th>
                      <th style={taTh}>Wholesale</th><th style={taTh}>Trade-In</th><th style={taTh}>Clean</th><th style={taTh}>Retail</th>
                    </tr>
                  </thead>
                  <tbody>
                    {provIds.map(id => { const q = quotes[id]; if (!q) return null; return (
                      <tr key={id} style={{ borderBottom: "1px solid var(--jb-border)" }}>
                        <td style={{ ...taTd, textAlign: "left" }}>
                          <div style={{ fontWeight: 700, color: "var(--jb-text)" }}>{TA_PROV_LABEL[id]}</div>
                          <div style={{ fontSize: 10, color: q.simulated ? "var(--jb-amber)" : "var(--jb-green)" }}>{q.simulated ? "● simulated" : "● live"}</div>
                        </td>
                        <td style={taTd}>{_taMoney(q.wholesale)}</td>
                        <td style={{ ...taTd, fontWeight: 700, color: "var(--jb-blue)" }}>{_taMoney(q.trade)}</td>
                        <td style={taTd}>{_taMoney(q.clean)}</td>
                        <td style={taTd}>{_taMoney(q.retail)}</td>
                      </tr>
                    ); })}
                  </tbody>
                </table>
              </div>

              {/* Provider-specific highlights */}
              <div style={{ display: "flex", gap: 10, flexWrap: "wrap", marginTop: 10 }}>
                {quotes.vauto && <TAChip label="vAuto Market Days' Supply" value={`${quotes.vauto.marketDaysSupply} days · ${quotes.vauto.priceRank}`} />}
                {quotes.accutrade && <TAChip label="AccuTrade Cash Offer" value={`${_taMoney(quotes.accutrade.cashOffer)} · grade ${quotes.accutrade.grade}`} />}
                {quotes.mmr && <TAChip label="Manheim MMR (adj.)" value={`${_taMoney(quotes.mmr.adjustedMMR)} · ${quotes.mmr.lastSales} sales`} />}
              </div>

              {/* Desk the numbers */}
              <div style={{ marginTop: 16, background: "var(--jb-surface-2)", border: "1px solid var(--jb-border)", borderRadius: 10, padding: "14px 16px" }}>
                <div style={{ fontSize: 13, fontWeight: 700, color: "var(--jb-navy)", marginBottom: 10 }}>Desk the Trade</div>
                <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 12 }}>
                  <div><span style={lab}>Recommended ACV</span><input style={{ ...fld, fontFamily: "var(--jb-mono)" }} value={acv} onChange={(e) => setAcv(e.target.value.replace(/[^0-9.]/g, ""))} /></div>
                  <div><span style={lab}>Trade Allowance</span><input style={{ ...fld, fontFamily: "var(--jb-mono)" }} value={allowance} onChange={(e) => setAllowance(e.target.value.replace(/[^0-9.]/g, ""))} /></div>
                  <div><span style={lab}>Payoff</span><input style={{ ...fld, fontFamily: "var(--jb-mono)" }} value={payoff} onChange={(e) => setPayoff(e.target.value.replace(/[^0-9.]/g, ""))} /></div>
                </div>
                <div style={{ display: "flex", gap: 16, marginTop: 10, fontSize: 12, color: "var(--jb-text-dim)" }}>
                  <span>Over-allowance vs ACV: <b style={{ color: (+allowance - +acv) > 0 ? "var(--jb-red)" : "var(--jb-green)" }}>{_taMoney((+allowance || 0) - (+acv || 0))}</b></span>
                  <span>Customer equity: <b>{_taMoney((+allowance || 0) - (+payoff || 0))}</b></span>
                </div>
                <div style={{ display: "flex", gap: 8, marginTop: 14, alignItems: "center", flexWrap: "wrap" }}>
                  <select style={{ ...fld, width: "auto", minWidth: 260 }} value={dealId} onChange={(e) => setDealId(e.target.value)}>
                    <option value="">Attach to deal…</option>
                    {deals.map(d => <option key={d.id} value={d.id}>{d.id} — {d.buyer}</option>)}
                  </select>
                  <button className="k2b-button" style={lead ? { background: "var(--jb-yellow)", fontWeight: 700 } : undefined} onClick={saveAppraisal}>
                    {lead ? "Save Appraisal → Lead" : "Save Appraisal"}
                  </button>
                  <button className="k2b-button" style={{ background: "var(--jb-yellow)", fontWeight: 700 }} onClick={applyToDeal}>Apply to Deal →</button>
                  {lead && savedToLead && <button className="k2b-button" onClick={() => go && go("crm")}>Back to CRM ▸</button>}
                </div>
              </div>
            </>
          )}

          {recent.length > 0 && (
            <div style={{ marginTop: 18 }}>
              <div style={{ fontSize: 11, fontWeight: 700, textTransform: "uppercase", letterSpacing: "0.05em", color: "var(--jb-text-muted)", marginBottom: 6 }}>Recent Appraisals</div>
              <table style={{ width: "100%", borderCollapse: "collapse", fontSize: 12 }}>
                <tbody>
                  {recent.slice(0, 6).map(a => (
                    <tr key={a.id} style={{ borderBottom: "1px dotted var(--jb-border)" }}>
                      <td style={{ padding: "5px 6px", fontFamily: "var(--jb-mono)", color: "var(--jb-blue)" }}>{a.id}</td>
                      <td style={{ padding: "5px 6px" }}>{[a.year, a.make, a.model].filter(Boolean).join(" ")}{a.leadName ? <span style={{ color: "var(--jb-text-muted)", fontSize: 11, marginLeft: 6 }}>· lead {a.leadName}</span> : null}</td>
                      <td style={{ padding: "5px 6px", color: "var(--jb-text-muted)" }}>{a.mileage ? a.mileage + " mi" : ""}</td>
                      <td style={{ padding: "5px 6px", textAlign: "right", fontFamily: "var(--jb-mono)", fontWeight: 700 }}>ACV {_taMoney(a.acv)}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          )}
        </div>
      </div>

      <div style={{ borderTop: "1px solid var(--jb-border)", padding: "8px 16px", display: "flex", gap: 6, alignItems: "center", flexWrap: "wrap" }}>
        <K2BButton small onClick={onClose}>ESC-Close</K2BButton>
        <K2BButton small onClick={() => go && go("desking")}>F2-Desking</K2BButton>
        <K2BButton small onClick={() => go && go("deal")}>F3-Deals</K2BButton>
        <K2BButton small onClick={() => go && go("crm")}>CRM — Leads</K2BButton>
        <div style={{ flex: 1 }} />
        <span style={{ fontSize: 10.5, color: "var(--jb-text-muted)" }}>Valuations are estimates until provider API keys are connected via the server tier.</span>
      </div>

      {showCfg && <TradeConnectorSettings onClose={() => setShowCfg(false)} />}
    </div>
  );
};

const TAChip = ({ label, value }) => (
  <div style={{ background: "#FFF", border: "1px solid var(--jb-border)", borderRadius: 8, padding: "8px 12px", minWidth: 150 }}>
    <div style={{ fontSize: 10, color: "var(--jb-text-muted)", textTransform: "uppercase", letterSpacing: "0.04em" }}>{label}</div>
    <div style={{ fontSize: 13, fontWeight: 700, color: "var(--jb-navy)" }}>{value}</div>
  </div>
);

const taTh = { padding: "8px 10px", textAlign: "right", fontSize: 11, fontWeight: 700, textTransform: "uppercase", letterSpacing: "0.03em" };
const taTd = { padding: "8px 10px", textAlign: "right", fontFamily: "var(--jb-mono)", color: "var(--jb-text)" };

const TradeConnectorSettings = ({ onClose }) => {
  const [rows, setRows] = React.useState(window.TradeConnectors.providers.map(p => ({ ...p })));
  const upd = (id, k, v) => setRows(rs => rs.map(r => r.id === id ? { ...r, [k]: v } : r));
  const save = () => { rows.forEach(r => window.TradeConnectors.configure(r.id, { apiKey: r.apiKey, endpoint: r.endpoint })); window.k2bToast && window.k2bToast("Connector settings saved.", "ok"); onClose(); };
  return (
    <K2BModal title="Appraisal Connectors — vAuto · AccuTrade · KBB · MMR · Black Book" width={720} onClose={onClose}
      buttons={<><K2BButton onClick={onClose}>Cancel</K2BButton><K2BButton style={{ background: "var(--jb-yellow)", fontWeight: 700 }} onClick={save}>Save</K2BButton></>}>
      <div style={{ fontSize: 12, color: "var(--jb-text-dim)", marginBottom: 12, lineHeight: 1.5 }}>
        Enter each provider's API key to enable live valuations. Until a key is set — and routed through the K2B server proxy that holds it securely — the desk uses a deterministic local estimate (marked <b style={{ color: "var(--jb-amber)" }}>simulated</b>). Browsers can't safely hold these keys directly, so live calls go through your server.
      </div>
      <table style={{ width: "100%", borderCollapse: "collapse", fontSize: 12 }}>
        <thead><tr style={{ textAlign: "left", color: "var(--jb-text-dim)", borderBottom: "1px solid var(--jb-border)" }}>
          <th style={{ padding: "6px 8px" }}>Provider</th><th style={{ padding: "6px 8px" }}>Type</th><th style={{ padding: "6px 8px" }}>API Key</th><th style={{ padding: "6px 8px" }}>Status</th></tr></thead>
        <tbody>
          {rows.map(r => (
            <tr key={r.id} style={{ borderBottom: "1px dotted var(--jb-border)" }}>
              <td style={{ padding: "6px 8px", fontWeight: 700 }}>{r.name}</td>
              <td style={{ padding: "6px 8px", color: "var(--jb-text-muted)" }}>{r.kind}</td>
              <td style={{ padding: "6px 8px" }}><input value={r.apiKey} onChange={(e) => upd(r.id, "apiKey", e.target.value)} placeholder="paste key…" style={{ width: "100%", fontFamily: "var(--jb-mono)", fontSize: 11 }} /></td>
              <td style={{ padding: "6px 8px" }}>{r.apiKey ? <span style={{ color: "var(--jb-green)", fontWeight: 700 }}>Key set</span> : <span style={{ color: "var(--jb-amber)", fontWeight: 700 }}>Simulated</span>}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </K2BModal>
  );
};

Object.assign(window, { TradeAppraisal, TaAppraisalDesk, TradeConnectorSettings, TAChip, taIsMgr });