/* 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 — RC32 (lane ros): the technician's phone screen "My jobs" (owner Q2: view only now; letting techs update their own
// jobs is decided later — T5). A technician signing in on a PHONE (T2, on by default) lands here; on a laptop the technician gets the
// RO screen (view only). Nothing here writes: no buttons that change an RO, no prices or costs (a technician never sees cost).
//   • My jobs: Mine · Unassigned · All open, counters (to do, working, flagged today, done), cards sorted by promise time.
//   • One job per screen: the vehicle + VIN (Copy VIN), complaint / cause / correction / tech notes / parts as text, the inspection.
//   • Bottom bar: Service menu (the same presentation, read for the customer) · Print · Full RO (the RO screen, view only).
// My jobs and the RO editor are never on the page together (exactly one data-svc-menu-btn and one data-tech-viewonly).
// Script order: after ServiceCore.jsx.txt (DMS.svc* helpers), before app.jsx (app.jsx asks svcTechPhoneMode() for the landing route).

// The ONE predicate for "a technician on a phone with My jobs turned on" — app.jsx (view-only bar, landing) and ServiceTickets use it.
const svcTechPhoneMode = () => {
  try {
    const D = window.DMS;
    if (!D || !D.roleIs || !D.roleIs("Technician")) return false;
    const s = D.svcSettings ? D.svcSettings() : null;
    if (!s || !s.ro || !s.ro.techs || !s.ro.techs.myJobsOnPhone) return false;
    return (D.svcDeviceType ? D.svcDeviceType() : "laptop") === "phone";
  } catch (e) { return false; }
};

const TJ_STATUS_TONE = { ACTIVE: { fg: "#1456A0", bg: "#E5EFFA", bar: "#1B66A8" }, PEND: { fg: "#8A5A00", bg: "#FFF3D9", bar: "#C8862A" }, HOLD: { fg: "#B23A2E", bg: "#FBE9E7", bar: "#B23A2E" }, DONE: { fg: "#0E7A37", bg: "#E6F7EC", bar: "#16A34A" } };
const TJ_ORDER = { ACTIVE: 0, PEND: 1, HOLD: 2, DONE: 3 };
const tjBtn = { minHeight: 48, minWidth: 48, borderRadius: 10, border: "1px solid var(--jb-border-strong, #C3CAD6)", background: "var(--jb-surface, #fff)", color: "var(--jb-text)", fontSize: 15, fontWeight: 700, cursor: "pointer", fontFamily: "var(--jb-font)", padding: "0 12px" };
const tjWord = (cfg, code) => { const w = cfg && cfg.ro && cfg.ro.lists && cfg.ro.lists.jobStatus; return (w && w[code]) || code; };

const TechJobs = ({ ros, techs, cfg, go, onClose, who, onFullRo }) => {
  const [, force] = React.useReducer(n => n + 1, 0);
  React.useEffect(() => DMS.subscribe(force), []);
  const me = who || (typeof roMeIds === "function" ? roMeIds() : { techIds: [] });
  const linked = me.techIds.length > 0;
  const [scope, setScope0] = React.useState(linked ? "mine" : "all");
  // RC33 (part C, RC32 acceptance F1): on a fresh browser the technicians arrive AFTER the first draw — a linked sign-in still opens on "Mine"
  // (once the link is known), unless the technician already picked a list
  const picked = React.useRef(false);
  const setScope = (k) => { picked.current = true; setScope0(k); };
  React.useEffect(() => { if (linked && !picked.current) setScope0("mine"); }, [linked]);
  const [find, setFind] = React.useState(false);
  const [q, setQ] = React.useState("");
  const [open, setOpen] = React.useState(null);     // { roId, jobId }
  const [insp, setInsp] = React.useState(false);
  const live = [];
  (ros || []).filter(r => r.status === "Open").forEach(r => (r.ops || []).forEach((o, i) => { if (o && o.approval !== "declined") live.push({ ro: r, job: o, n: i + 1 }); }));
  const mine = live.filter(x => me.techIds.includes(x.job.techId));
  const unassigned = live.filter(x => !x.job.techId);
  const base = scope === "mine" ? mine : scope === "unassigned" ? unassigned : live;
  const ql = q.trim().toLowerCase();
  const hit = (x) => !ql || [x.ro.id, x.ro.customer, x.ro.vehicle, x.ro.vin, x.job.desc, x.job.op].join(" ").toLowerCase().includes(ql)
    || (window.DMS && DMS.custQueryHit ? DMS.custQueryHit(q, x.ro.custNum, [x.ro.cust && x.ro.cust.phone]) : false);
  const promiseT = (r) => { const d = r.promise ? new Date(r.promise).getTime() : NaN; return isNaN(d) ? Infinity : d; };
  const list = base.filter(hit).sort((a, b) => promiseT(a.ro) - promiseT(b.ro) || (TJ_ORDER[a.job.status || "PEND"] - TJ_ORDER[b.job.status || "PEND"]) || String(a.ro.id).localeCompare(String(b.ro.id)) || a.n - b.n);
  const counts = { todo: mine.filter(x => (x.job.status || "PEND") === "PEND" || x.job.status === "HOLD").length, working: mine.filter(x => x.job.status === "ACTIVE").length, done: mine.filter(x => x.job.status === "DONE").length };
  const myTech = (techs || []).find(t => me.techIds.includes(t.id));
  const showHours = !!(cfg && cfg.ro && cfg.ro.techs.showOwnHours) && !!myTech;
  const viewOnly = <span data-tech-viewonly="1" title="View only — the service advisors make the changes on the RO" style={{ fontSize: 12.5, fontWeight: 700, background: "rgba(255,255,255,.16)", borderRadius: 99, padding: "4px 10px", whiteSpace: "nowrap" }}>👁 View only</span>;
  const topBar = (left, title, right) => (
    <div style={{ display: "flex", alignItems: "center", gap: 8, padding: "6px 8px", background: "var(--jb-navy, #11264D)", color: "#fff", flexShrink: 0, minHeight: 56, boxSizing: "border-box" }}>
      {left}
      <b style={{ fontSize: 17, flex: 1, minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{title}</b>
      {right}
    </div>
  );
  const darkBtn = { ...tjBtn, background: "transparent", color: "#fff", border: "1px solid rgba(255,255,255,.35)" };

  // ── one job per screen ──
  const cur = open ? live.find(x => x.ro.id === open.roId && String(x.job.id) === String(open.jobId)) : null;
  if (open && !cur) { setTimeout(() => setOpen(null), 0); }
  if (cur) {
    const r = cur.ro, j = cur.job;
    const tone = TJ_STATUS_TONE[j.status || "PEND"] || TJ_STATUS_TONE.PEND;
    const parts = (r.partsLines || []).filter(l => l.jobId != null && String(l.jobId) === String(j.id) && +l.qty > 0);
    const items = (cfg && cfg.ro && cfg.ro.lists.inspection.items) || (typeof RO_MPI_ITEMS !== "undefined" ? RO_MPI_ITEMS : []);
    const gr = (cfg && cfg.ro && cfg.ro.lists.inspection.grades) || ["OK", "Attn", "Now"];
    const mpi = r.mpi || {};
    const nG = items.filter(i => mpi[i] === "g").length, nY = items.filter(i => mpi[i] === "y").length, nR = items.filter(i => mpi[i] === "r").length;
    const veh = r.veh || {};
    const vehTitle = [veh.yr, veh.mk, veh.mdl].filter(Boolean).join(" ") || r.vehicle || "";
    const copyVin = () => { try { navigator.clipboard.writeText(r.vin || veh.vin || ""); window.k2bToast && window.k2bToast("VIN copied.", "ok", 1800); } catch (e) {} };
    const box = (label, text, extra) => (
      <div style={{ background: "var(--jb-surface, #fff)", border: "1px solid var(--jb-border)", borderRadius: 10, padding: "10px 12px" }}>
        <div style={{ fontSize: 13, fontWeight: 700, color: "var(--jb-text-dim)", display: "flex", gap: 6, alignItems: "center" }}>{label}{extra}</div>
        <div style={{ fontSize: 16, lineHeight: 1.45, marginTop: 3, whiteSpace: "pre-wrap", overflowWrap: "anywhere", color: text ? "var(--jb-text)" : "var(--jb-text-muted)", fontStyle: text ? "normal" : "italic" }}>{text || "Not written yet."}</div>
      </div>
    );
    return (
      <div className="k2b-window" data-tech-job-screen={r.id + ":" + j.id} style={{ width: "100%", height: "100%", display: "flex", flexDirection: "column", background: "var(--jb-bg, #EEF1F5)", fontFamily: "var(--jb-font)", overflow: "hidden" }}>
        {topBar(<button type="button" onClick={() => insp ? setInsp(false) : setOpen(null)} aria-label="Back" style={darkBtn}>‹</button>, insp ? `Inspection · ${r.id}` : `${r.id} · Job ${cur.n}`, <>{viewOnly}{window.JBHelperButton ? <window.JBHelperButton compact tb dark /> : null}</>)}
        <div data-ro-body="1" style={{ flex: 1, minHeight: 0, overflowY: "auto", overflowX: "hidden", padding: 10, display: "grid", gridTemplateColumns: "minmax(0, 1fr)", gridAutoRows: "max-content", alignContent: "start", gap: 10 }}>
          {insp ? (
            <>
              <div style={{ fontSize: 14, color: "var(--jb-text-dim)" }}>{nG + nY + nR} of {items.length} checked · <b style={{ color: "#B23A2E" }}>{nR} {gr[2]}</b> · <b style={{ color: "#9A6700" }}>{nY} {gr[1]}</b></div>
              {items.map(it => {
                const v = mpi[it];
                const c = v === "r" ? ["#B23A2E", gr[2]] : v === "y" ? ["#C8862A", gr[1]] : v === "g" ? ["#16A34A", gr[0]] : ["#C7CDD4", "—"];
                return (
                  <div key={it} style={{ display: "flex", alignItems: "center", gap: 10, background: "var(--jb-surface, #fff)", border: "1px solid var(--jb-border)", borderRadius: 10, padding: "0 12px", minHeight: 48 }}>
                    <span style={{ flex: 1, fontSize: 15 }}>{it}</span>
                    <span style={{ minWidth: 60, textAlign: "center", borderRadius: 8, padding: "6px 8px", fontSize: 14, fontWeight: 800, color: v ? "#fff" : "var(--jb-text-muted)", background: v ? c[0] : "var(--jb-surface-2)" }}>{c[1]}</span>
                  </div>
                );
              })}
              {r.mpiNotes ? box("Inspection notes", r.mpiNotes) : null}
            </>
          ) : (
            <>
              <div style={{ background: "var(--jb-surface, #fff)", border: "1px solid var(--jb-border)", borderRadius: 10, padding: "12px" }}>
                <div style={{ fontSize: 18, fontWeight: 800 }}>{vehTitle}</div>
                <div style={{ display: "flex", gap: 8, alignItems: "center", marginTop: 6, flexWrap: "wrap" }}>
                  <span style={{ fontFamily: "var(--jb-mono)", fontSize: 14, fontWeight: 700, overflowWrap: "anywhere" }}>VIN {r.vin || veh.vin || "—"}</span>
                  {(r.vin || veh.vin) && <button type="button" data-tech-copy-vin="1" onClick={copyVin} style={tjBtn}>Copy</button>}
                </div>
                <div style={{ display: "flex", gap: 6, flexWrap: "wrap", marginTop: 8 }}>
                  {(r.miles || veh.miles) ? <span style={{ fontSize: 13, border: "1px solid var(--jb-border)", borderRadius: 99, padding: "3px 10px" }}>{Number(r.miles || veh.miles).toLocaleString()} mi</span> : null}
                  {typeof roPromiseText === "function" && roPromiseText(r) ? <span style={{ fontSize: 13, border: "1px solid var(--jb-border)", borderRadius: 99, padding: "3px 10px" }}>⏰ {roPromiseText(r)}</span> : null}
                  {r.transport ? <span style={{ fontSize: 13, border: "1px solid var(--jb-border)", borderRadius: 99, padding: "3px 10px" }}>{r.transport}</span> : null}
                  <span style={{ fontSize: 13, fontWeight: 800, color: tone.fg, background: tone.bg, borderRadius: 99, padding: "3px 10px" }}>● {tjWord(cfg, j.status || "PEND")}{j.status === "HOLD" && j.holdReason ? " · " + j.holdReason : ""}</span>
                </div>
                <div style={{ fontSize: 14, color: "var(--jb-text-dim)", marginTop: 8 }}><b style={{ color: "var(--jb-text)" }}>{j.desc || j.op}</b> <span style={{ fontFamily: "var(--jb-mono)" }}>{j.op}</span></div>
              </div>
              {box("Complaint", j.complaint)}
              {box("Cause", j.cause)}
              {box("Correction", j.correction)}
              {box("Tech notes", j.techNotes, <span style={{ fontSize: 12, fontWeight: 800, color: "#B23A2E", background: "#FBE9E7", borderRadius: 99, padding: "1px 8px" }}>never prints</span>)}
              <div style={{ background: "var(--jb-surface, #fff)", border: "1px solid var(--jb-border)", borderRadius: 10, padding: "10px 12px" }}>
                <div style={{ fontSize: 13, fontWeight: 700, color: "var(--jb-text-dim)" }}>Parts on this job</div>
                {parts.length === 0 && <div style={{ fontSize: 16, color: "var(--jb-text-muted)", fontStyle: "italic", marginTop: 3 }}>None.</div>}
                {parts.map(l => <div key={l.id} style={{ fontSize: 16, marginTop: 3 }}>{l.desc || l.part} × {l.qty} <span style={{ fontFamily: "var(--jb-mono)", fontSize: 13, color: "var(--jb-text-muted)" }}>{l.part}</span></div>)}
              </div>
              <button type="button" data-tech-insp="1" onClick={() => setInsp(true)} style={{ ...tjBtn, textAlign: "left", fontWeight: 600, padding: "10px 12px", minHeight: 56, borderRadius: 10 }}>
                <div style={{ fontSize: 13, fontWeight: 700, color: "var(--jb-text-dim)" }}>Inspection</div>
                <div style={{ fontSize: 16 }}>{nG + nY + nR} of {items.length} checked · <b style={{ color: "#B23A2E" }}>{nR} {String(gr[2]).toLowerCase()}</b> · <b style={{ color: "#9A6700" }}>{nY} {String(gr[1]).toLowerCase()}</b> ▸</div>
              </button>
            </>
          )}
        </div>
        <div style={{ flexShrink: 0, display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 8, padding: "8px 10px calc(8px + env(safe-area-inset-bottom, 0px))", background: "var(--jb-surface, #fff)", borderTop: "1px solid var(--jb-border)" }}>
          <span className="tj-menu-slot" style={{ display: "flex" }}>{window.SvcMenuButton ? <window.SvcMenuButton ro={r} /> : <span />}</span>
          <button type="button" data-tech-print="1" onClick={() => window.k2bPrintSelectRO ? window.k2bPrintSelectRO(r) : (window.k2bPrintRO && window.k2bPrintRO(r, "workorder"))} style={tjBtn}>🖨 Print</button>
          <button type="button" data-tech-fullro="1" onClick={() => onFullRo && onFullRo(r.id)} style={tjBtn}>Full RO</button>
        </div>
      </div>
    );
  }

  // ── My jobs ──
  const seg = (k, label, n) => (
    <button key={k} type="button" data-tech-scope={k} onClick={() => setScope(k)}
            style={{ flex: 1, minHeight: 48, border: 0, borderRight: k !== "all" ? "1px solid var(--jb-border)" : 0, background: scope === k ? "var(--jb-navy, #11264D)" : "var(--jb-surface, #fff)", color: scope === k ? "#fff" : "var(--jb-text-dim)", fontWeight: 800, fontSize: 14, cursor: "pointer", fontFamily: "var(--jb-font)" }}>{label} · {n}</button>
  );
  return (
    <div className="k2b-window" data-tech-myjobs="1" style={{ width: "100%", height: "100%", display: "flex", flexDirection: "column", background: "var(--jb-bg, #EEF1F5)", fontFamily: "var(--jb-font)", overflow: "hidden" }}>
      {topBar(typeof window.k2bToggleAppMenu === "function" ? <button type="button" onClick={() => window.k2bToggleAppMenu()} aria-label="The DMS menu" style={darkBtn}>☰</button> : null, "My jobs",
        <>{viewOnly}{window.JBHelperButton ? <window.JBHelperButton compact tb dark /> : null}<button type="button" data-ro-queue-toggle="1" onClick={() => setFind(f => !f)} style={darkBtn} aria-label="Find an RO">🔎</button></>)}
      <div data-ro-body="1" style={{ flex: 1, minHeight: 0, overflowY: "auto", overflowX: "hidden", padding: 10, display: "grid", gridTemplateColumns: "minmax(0, 1fr)", gridAutoRows: "max-content", alignContent: "start", gap: 10 }}>
        <div style={{ display: "grid", gridTemplateColumns: showHours ? "repeat(4, minmax(0, 1fr))" : "repeat(3, minmax(0, 1fr))", background: "var(--jb-surface, #fff)", border: "1px solid var(--jb-border)", borderRadius: 10, overflow: "hidden" }}>
          {[["to do", counts.todo], ["working", counts.working], ...(showHours ? [["flagged today", (+myTech.flaggedToday || 0).toFixed(1) + " h"]] : []), ["done", counts.done]].map(([l, v], i) => (
            <div key={l} style={{ padding: "8px 10px", borderLeft: i ? "1px solid var(--jb-border)" : 0 }}><div style={{ fontSize: 20, fontWeight: 800, fontFamily: "var(--jb-mono)" }}>{v}</div><div style={{ fontSize: 12.5, color: "var(--jb-text-dim)" }}>{l}</div></div>
          ))}
        </div>
        {!linked && <div style={{ fontSize: 13.5, color: "#8A5A00", background: "#FFF8E9", border: "1px solid #F0DBA8", borderRadius: 10, padding: "8px 12px" }}>Your sign-in is not linked to a technician yet, so "Mine" is empty — ask the office (Service Dept › Setup › Technicians).</div>}
        <div style={{ display: "flex", border: "1px solid var(--jb-border)", borderRadius: 10, overflow: "hidden" }}>
          {seg("mine", "Mine", mine.length)}{seg("unassigned", "Unassigned", unassigned.length)}{seg("all", "All open", live.length)}
        </div>
        {find && <div style={{ display: "flex" }}><JBSearch value={q} onChange={setQ} autoFocus name="k2b-tech-find" placeholder="RO#, customer, vehicle, VIN…" /></div>}
        {list.length === 0 && (q ? <JBSearchEmpty q={q} noun="jobs" onClear={() => setQ("")} /> : <div style={{ fontSize: 14, color: "var(--jb-text-muted)", textAlign: "center", padding: 20 }}>{scope === "mine" ? "No jobs for you right now." : "No jobs here."}</div>)}
        {list.map(x => {
          const st = x.job.status || "PEND", tone = TJ_STATUS_TONE[st] || TJ_STATUS_TONE.PEND;
          const veh = String(x.ro.vehicle || "").replace(/^(\d{4})\s+(CHEVROLET|CHEVY|GMC|BUICK|CADILLAC)\s+/i, "$1 ");
          const pr = typeof roPromiseText === "function" ? roPromiseText(x.ro) : "";
          const late = typeof roPromiseLate === "function" ? roPromiseLate(x.ro) : false;
          return (
            <button key={x.ro.id + ":" + x.job.id} type="button" data-tech-job={x.ro.id + ":" + x.job.id} onClick={() => setOpen({ roId: x.ro.id, jobId: x.job.id })}
                    style={{ textAlign: "left", border: "1px solid var(--jb-border)", borderLeft: "5px solid " + tone.bar, borderRadius: 10, background: st === "DONE" ? "var(--jb-surface-2, #F4F6F9)" : "var(--jb-surface, #fff)", padding: "10px 12px", minHeight: 64, cursor: "pointer", fontFamily: "var(--jb-font)", color: "var(--jb-text)" }}>
              <span style={{ display: "flex", gap: 8, alignItems: "center", flexWrap: "wrap" }}>
                <span style={{ fontSize: 12.5, fontWeight: 800, color: tone.fg, background: tone.bg, borderRadius: 99, padding: "2px 9px" }}>● {tjWord(cfg, st)}</span>
                <b style={{ fontFamily: "var(--jb-mono)", fontSize: 13.5 }}>{x.ro.id}</b><span style={{ fontSize: 13, color: "var(--jb-text-muted)" }}>· Job {x.n}</span>
                <span style={{ flex: 1 }} />
                {x.ro.transport === "Waiter" && <span style={{ fontSize: 12.5, fontWeight: 800, color: "#B23A2E", background: "#FBE9E7", borderRadius: 99, padding: "2px 9px" }}>Waiter</span>}
              </span>
              <span style={{ display: "block", fontSize: 17, fontWeight: 800, marginTop: 4 }}>{x.job.desc || x.job.op}</span>
              <span style={{ display: "block", fontSize: 14, color: late ? "#B23A2E" : "var(--jb-text-dim)", marginTop: 2 }}>{veh}{pr ? " · promise " + pr + (late ? " (late)" : "") : ""}{st === "HOLD" && x.job.holdReason ? " · " + x.job.holdReason : ""}{scope !== "mine" ? " · " + (((techs || []).find(t => t.id === x.job.techId) || {}).name || "unassigned") : ""}</span>
            </button>
          );
        })}
        <div style={{ fontSize: 13, color: "var(--jb-text-muted)", padding: "2px 4px" }}>Sorted by promise time. Tap a job to open it. View only — your service advisor types the status, cause, correction and inspection.</div>
      </div>
      <div style={{ flexShrink: 0, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8, padding: "8px 10px calc(8px + env(safe-area-inset-bottom, 0px))", background: "var(--jb-surface, #fff)", borderTop: "1px solid var(--jb-border)" }}>
        <button type="button" onClick={() => go && go("servicedept")} style={tjBtn}>📅 Schedules</button>
        <button type="button" onClick={() => list[0] ? onFullRo && onFullRo(list[0].ro.id) : null} disabled={!list.length} style={{ ...tjBtn, opacity: list.length ? 1 : 0.5 }}>RO screen</button>
      </div>
    </div>
  );
};

Object.assign(window, { TechJobs, svcTechPhoneMode });