/* 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 — WE-OWES (due bills) — RC27 (lane dsk; owner decision 3 of 2026-10-19).
//   A deal's "we owe" lines (desk › Show gross › 💲 Profit) print a DUE BILL with the deal documents and, when the deal POSTS,
//   go on this list (the server's — routes/we-owes.js). Sales & F&I and Service see it; Service opens an INTERNAL RO from a
//   we-owe (the RO links back) and closing that RO marks it DONE with the actual cost next to the estimate. The money
//   (estimate / actual) only shows for the roles that see deal cost — the server never sends it to the others.
//   Every change is a server command (one Idempotency-Key each — a double click or a retry never does it twice).

const wo$ = (c) => (c === null || c === undefined) ? "—" : (c < 0 ? "−$" : "$") + (Math.abs(+c || 0) / 100).toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 });
const WO_STATUS = { open: ["Open", "var(--jb-red)"], scheduled: ["Scheduled", "var(--jb-amber, #A66B00)"], done: ["Done", "var(--jb-green)"], voided: ["Voided", "var(--jb-text-muted)"] };

const WeOwes = ({ onClose, go }) => {
  const D = window.DMS;
  const [, force] = React.useReducer(n => n + 1, 0);
  React.useEffect(() => (D && D.subscribe) ? D.subscribe(force) : undefined, []);
  const [filter, setFilter] = React.useState(() => { try { return localStorage.getItem("jb_weowes_filter") || "open"; } catch (e) { return "open"; } });
  const [act, setAct] = React.useState(null);         // { id, kind: "schedule" | "done" | "void", version }
  const [form, setForm] = React.useState({});
  const [busy, setBusy] = React.useState(false);
  const [q, setQ] = React.useState("");
  const load = (st) => D && D.loadWeOwes && D.loadWeOwes(st || filter);
  React.useEffect(() => { load(filter); try { localStorage.setItem("jb_weowes_filter", filter); } catch (e) {} }, [filter]);
  const cache = D && D.weOwesCached ? D.weOwesCached() : { list: [], may: null };
  const may = cache.may || {};
  const qq = q.trim().toLowerCase();
  const list = (cache.list || []).filter(w => !qq || [w.item, w.customer, w.dealId, w.stock, w.vin, w.roId, w.salesperson].some(v => String(v || "").toLowerCase().includes(qq)) || (window.DMS && window.DMS.custQueryHit ? window.DMS.custQueryHit(qq, w.custNum) : false));   // RC31 (fx31, F6)
  const toast = (m, k) => window.k2bToast && window.k2bToast(m, k || "ok", 5200);
  const run = async (fn) => { setBusy(true); try { const r = await fn(); toast(r.msg || (r.ok ? "Done." : "Not done."), r.ok ? "ok" : "warn"); if (r.ok) { setAct(null); setForm({}); } return r; } finally { setBusy(false); } };
  const openRo = (w) => run(async () => {
    const r = await D.weOweOpenRo(w.id, { version: w.version });
    if (r.ok && r.roId) { try { localStorage.setItem("jb_ro_focus", r.roId); } catch (e) {} window.jbROFocus = r.roId; }
    return r;
  });
  const goRo = (roId) => { try { localStorage.setItem("jb_ro_focus", roId); } catch (e) {} window.jbROFocus = roId; go && go("service"); };
  const printBill = (w) => {
    const d = D && D.deals ? (D.deals() || []).find(x => x && x.id === w.dealId) : null;
    window.k2bPrintDueBill && window.k2bPrintDueBill(Object.assign({ id: w.dealId, buyer: w.customer, vehicle: w.vehicle, stock: w.stock, vin: w.vin }, d ? { buyer: d.buyer, street: d.street, city: d.city, state: d.state, zip: d.zip || d.postal, phone: d.phone } : {}, { weOwes: [w] }));
  };
  const confirm = () => {
    const w = (cache.list || []).find(x => x.id === act.id); if (!w) return;
    if (act.kind === "schedule") return run(() => D.weOweSetStatus(w.id, "scheduled", { scheduledFor: form.date || "", note: form.note || "", version: w.version }));
    if (act.kind === "open") return run(() => D.weOweSetStatus(w.id, "open", { note: form.note || "", version: w.version }));
    if (act.kind === "done") return run(() => D.weOweSetStatus(w.id, "done", { note: form.note || "", actual: may.seeCost ? form.actual : undefined, version: w.version }));
    if (act.kind === "void") return run(() => D.weOweVoid(w.id, form.reason || "", { version: w.version }));
  };
  const th = { padding: "7px 9px", fontWeight: 600, textAlign: "left", whiteSpace: "nowrap" };
  const td = { padding: "7px 9px", verticalAlign: "top" };
  return (
    <div className="k2b-window" data-screen="weowes" style={{ width: "100%", maxWidth: 1320, height: 780, margin: "0 auto", fontFamily: "var(--jb-font)" }}>
      <K2BTitlebar title="We-Owes — Due Bills (Sales & F&I · Service)" onClose={onClose} onMin={() => {}} onMax={() => {}} />
      <div style={{ flex: 1, minHeight: 0, overflow: "auto", background: "var(--jb-bg)", padding: 16, display: "flex", flexDirection: "column", gap: 12 }}>
        <div style={{ display: "flex", gap: 8, alignItems: "center", flexWrap: "wrap" }}>
          {[["open", "Open"], ["done", "Done"], ["voided", "Voided"], ["all", "All"]].map(([k, lab]) => (
            <button key={k} type="button" className="k2b-button small" data-wo-filter={k} onClick={() => setFilter(k)}
                    style={filter === k ? { background: "var(--jb-blue)", color: "#fff", borderColor: "var(--jb-blue)" } : {}}>{lab}</button>))}
          <input autoComplete="off" data-lpignore="true" data-1p-ignore="true" data-form-type="other" name="k2b-find-weowes-1" value={q} onChange={(e) => setQ(e.target.value)} placeholder="Find: customer, item, deal, stock #, VIN, RO" aria-label="Find a we-owe" style={{ flex: "1 1 220px", maxWidth: 360, fontSize: 13, height: 28, padding: "0 8px" }} />
          <div style={{ flex: 1 }} />
          {may.seeCost && cache.openEstimateCents != null && filter === "open" ? <span data-wo="openest" style={{ fontSize: 12.5, color: "var(--jb-text-dim)" }}>Set aside for the open ones: <b style={{ fontFamily: "var(--jb-mono)" }}>{wo$(cache.openEstimateCents)}</b></span> : null}
          <button type="button" className="k2b-button small" onClick={() => load(filter)} title="Load the list again from the server">⟳ Refresh</button>
        </div>
        {cache.msg ? <div className="k2b-note" style={{ color: "var(--jb-red)", fontSize: 13 }}>{cache.msg}</div> : null}
        <div style={{ background: "var(--jb-surface)", border: "1px solid var(--jb-border)", borderRadius: "var(--jb-r-lg)", overflow: "hidden" }}>
          <table style={{ width: "100%", borderCollapse: "collapse", fontSize: 12.5 }} data-wo="table">
            <thead><tr style={{ background: "var(--jb-surface-2)", color: "var(--jb-text-dim)" }}>
              <th style={th}>Item owed</th><th style={th}>Customer · deal</th><th style={th}>Vehicle</th><th style={th}>Status</th><th style={th}>Repair order</th>
              {may.seeCost ? <><th style={{ ...th, textAlign: "right" }}>Estimate</th><th style={{ ...th, textAlign: "right" }}>Actual</th><th style={{ ...th, textAlign: "right" }}>Difference</th></> : null}
              <th style={th}></th>
            </tr></thead>
            <tbody>
              {list.map((w, i) => { const st = WO_STATUS[w.status] || [w.status, "#555"]; const live = w.status === "open" || w.status === "scheduled";
                return (
                  <React.Fragment key={w.id}>
                    <tr data-wo-row={w.id} data-wo-status={w.status} style={{ background: i % 2 ? "var(--jb-surface-2)" : "#fff" }}>
                      <td style={td}><b>{w.item}</b><div style={{ fontSize: 11, color: "var(--jb-text-muted)", fontFamily: "var(--jb-mono)" }}>{w.id}</div>{w.note ? <div style={{ fontSize: 11.5, color: "var(--jb-text-dim)" }}>{w.note}</div> : null}</td>
                      <td style={td}>{w.customer}<div style={{ fontSize: 11, color: "var(--jb-text-muted)" }}>{w.dealId}{w.salesperson ? " · " + w.salesperson : ""}</div></td>
                      <td style={td}>{w.vehicle}<div style={{ fontSize: 11, color: "var(--jb-text-muted)", fontFamily: "var(--jb-mono)" }}>Stk {w.stock}{w.vin ? " · " + w.vin : ""}</div></td>
                      <td style={td}><span data-wo="status" style={{ color: st[1], fontWeight: 700 }}>{st[0]}</span>{w.scheduledFor ? <div style={{ fontSize: 11 }}>for {w.scheduledFor}</div> : null}{w.status === "voided" && w.voidReason ? <div style={{ fontSize: 11, color: "var(--jb-text-muted)" }}>{w.voidReason}</div> : null}</td>
                      <td style={td}>{w.roId ? <button type="button" className="k2b-button small" data-wo-act="goro" onClick={() => goRo(w.roId)} title="Open the repair order">{w.roId} ▸</button> : "—"}</td>
                      {may.seeCost ? <>
                        <td style={{ ...td, textAlign: "right", fontFamily: "var(--jb-mono)" }} data-wo="est">{wo$(w.estimateCents)}</td>
                        <td style={{ ...td, textAlign: "right", fontFamily: "var(--jb-mono)" }} data-wo="act">{wo$(w.actualCents)}</td>
                        <td style={{ ...td, textAlign: "right", fontFamily: "var(--jb-mono)", color: w.diffCents > 0 ? "var(--jb-red)" : w.diffCents < 0 ? "var(--jb-green)" : undefined }} data-wo="diff">{w.diffCents === null || w.diffCents === undefined ? "—" : (w.diffCents > 0 ? "+" : "") + wo$(w.diffCents)}</td>
                      </> : null}
                      <td style={{ ...td, whiteSpace: "nowrap", textAlign: "right" }}>
                        <button type="button" className="k2b-button small" data-wo-act="print" onClick={() => printBill(w)} title="Print the customer's due bill (no amounts)">🖨 Due bill</button>
                        {live && may.work && !w.roId ? <button type="button" className="k2b-button small" data-wo-act="openro" disabled={busy} onClick={() => openRo(w)} title="Open an internal repair order for this we-owe">🔧 Open internal RO</button> : null}
                        {live && may.work ? <button type="button" className="k2b-button small" data-wo-act="schedule" disabled={busy} onClick={() => { setAct({ id: w.id, kind: w.status === "scheduled" ? "open" : "schedule" }); setForm({}); }}>{w.status === "scheduled" ? "Unschedule" : "Schedule"}</button> : null}
                        {live && may.work ? <button type="button" className="k2b-button small" data-wo-act="done" disabled={busy} onClick={() => { setAct({ id: w.id, kind: "done" }); setForm({}); }} title={w.roId ? "Close the RO to finish it — or mark it done if the work was done elsewhere" : "Done outside an RO (a vendor did it)"}>✓ Done</button> : null}
                        {live && may.void ? <button type="button" className="k2b-button small" data-wo-act="void" disabled={busy} onClick={() => { setAct({ id: w.id, kind: "void" }); setForm({}); }} title="The customer no longer needs it — its set-aside cost is taken back">Void</button> : null}
                      </td>
                    </tr>
                    {act && act.id === w.id ? (
                      <tr data-wo-form={act.kind}><td colSpan={may.seeCost ? 9 : 6} style={{ padding: "6px 9px 10px", background: "var(--jb-yellow-tint, #FFF8DC)" }}>
                        <div style={{ display: "flex", gap: 8, alignItems: "center", flexWrap: "wrap", fontSize: 12.5 }}>
                          <b>{act.kind === "schedule" ? "Schedule" : act.kind === "open" ? "Back to open" : act.kind === "done" ? "Mark done" : "Void"} — {w.item}</b>
                          {act.kind === "schedule" ? <label>Date <input type="date" data-wo-in="date" value={form.date || ""} onChange={(e) => setForm(f => ({ ...f, date: e.target.value }))} /></label> : null}
                          {act.kind === "void"
                            ? <input data-wo-in="reason" placeholder="Why (e.g. customer declined)" value={form.reason || ""} onChange={(e) => setForm(f => ({ ...f, reason: e.target.value }))} style={{ flex: "1 1 260px", height: 26 }} />
                            : <input data-wo-in="note" placeholder={act.kind === "done" ? "How it was done (e.g. Glass Pro, invoice 4411)" : "Note (optional)"} value={form.note || ""} onChange={(e) => setForm(f => ({ ...f, note: e.target.value }))} style={{ flex: "1 1 260px", height: 26 }} />}
                          {act.kind === "done" && may.seeCost ? <label>Actual cost $ <input data-wo-in="actual" value={form.actual || ""} onChange={(e) => setForm(f => ({ ...f, actual: e.target.value }))} style={{ width: 90, height: 26 }} /></label> : null}
                          <button type="button" className="k2b-button small" data-wo-act="confirm" disabled={busy} onClick={confirm} style={{ fontWeight: 700 }}>Confirm</button>
                          <button type="button" className="k2b-button small" onClick={() => setAct(null)}>Cancel</button>
                        </div>
                        {act.kind === "done" && w.roId ? <div style={{ fontSize: 11.5, marginTop: 4 }}>{w.roId} is linked — closing it marks this done with the RO's internal total as the actual cost. Mark it done here only if the work was done somewhere else.</div> : null}
                        {act.kind === "void" ? <div style={{ fontSize: 11.5, marginTop: 4 }}>The office only. The estimated cost set aside when the deal posted is taken back; the deal's posted figures and the commission are not refigured.</div> : null}
                      </td></tr>
                    ) : null}
                  </React.Fragment>);
              })}
              {!list.length ? <tr><td colSpan={may.seeCost ? 9 : 6} style={{ padding: 20, textAlign: "center", color: "var(--jb-text-muted)" }} data-wo="empty">{filter === "open" ? "Nothing owed right now — no open we-owes." : "No we-owes match."}</td></tr> : null}
            </tbody>
          </table>
        </div>
        <div style={{ fontSize: 11.5, color: "var(--jb-text-muted)" }}>
          A we-owe line on the desk (Show gross › 💲 Profit) prints a due bill with the deal documents and comes onto this list when the deal is posted.
          Service opens an internal RO from it; closing that RO marks it done{may.seeCost ? " and shows the actual cost next to the estimate (the difference is booked to the deal's cost account)" : ""}.
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { WeOwes });