/* © 2026 K2B NETWORK SOLUTIONS LLC. All rights reserved. */
/* eslint-disable */
// ServiceSetup — window.ServiceSetupPanel
//   Standard jobs (reusable templates applied to ROs as COPIES), shop labor
//   rates, card fee % + on/off, recon warning threshold, invoice footer.
//   Mounted as Settings → "Service Setup" (Settings builder) and as the
//   "Setup" tab in Service Department. Writes go through DMS.saveStdJob /
//   DMS.saveServiceSettings (ServiceCore) → DMS._mutate + DMS._audit.
//   RC32 (rset): + RO screen & steps, Lists, Technicians, Texts & printing (the RO screens' store settings) and new rows on Rates.

const SVCSETUP_BLANK = { id: "", desc: "", laborOp: "", estHours: 1, rateMode: "rate", rateSource: "shop", rate: "", flat: "",
                         payType: "Customer", parts: [], custDesc: "", techNotes: "", active: true };
const svcSetupLbl = { fontSize: 10.5, fontWeight: 700, textTransform: "uppercase", letterSpacing: "0.04em", color: "var(--jb-text-muted, #667)" };
const svcSetupInp = { width: "100%", boxSizing: "border-box", fontSize: 13, padding: "6px 8px", border: "1px solid var(--jb-border, #C8CCD2)", borderRadius: 4, fontFamily: "var(--jb-font)", background: "var(--jb-surface, #fff)", color: "var(--jb-text, #222)" };

const SvcSetupField = ({ label, children, hint, span }) => (
  <label style={{ display: "flex", flexDirection: "column", gap: 3, gridColumn: span ? "1 / -1" : undefined, minWidth: 0 }}>
    <span style={svcSetupLbl}>{label}</span>
    {children}
    {hint && <span style={{ fontSize: 11, color: "var(--jb-text-muted, #778)" }}>{hint}</span>}
  </label>
);

// ══ RC32 (lane rset) — Service Dept › Setup: the four new pages (RO screen & steps, Lists, Technicians, Texts & printing) and the new
//  rows on Rates. Every row is one store setting (DMS.SVC_SETTING_LEAVES — ServiceCore; work/r32fd/INTERFACE.md section 3): plain words,
//  today's value shown, "Advanced ▸" for the rarely changed rows. Edit gate per row (DMS.svcCanEditSetting: the office; the office + the
//  Service Manager for the screen, steps, lists and technicians) — read-only for everyone else; the server decides again (fixedops-guard).
//  "Preview an RO" opens a made-up RO drawn with the unsaved choices; "Back to today's look" fills every row you may change with today's
//  value (DMS.SVC_RO_TODAY) — saved only on Save. Saves go through DMS.saveServiceSettings (each leaf checked, saved whole, one audit row).
const SVCSET_TABS = [["ro", "RO screen & steps"], ["lists", "Lists"], ["techs", "Technicians"], ["texts", "Texts & printing"]];
const SVCSET_GROUPS = [["writeup", "1 Write-up"], ["waiting", "2 Waiting"], ["progress", "3 In progress"], ["ready", "4 Ready"], ["closed", "5 Closed"]];
const SVCSET_VIEW = { k: "group", f: [["chip", "List starts on", { k: "enum", o: [["open", "Open"], ["mine", "Mine"], ["all", "All"], ["aged", "Aged"], ["warranty", "Warranty"], ["internal", "Internal"], ["closed", "Closed"]] }],
  ["counters", "Counters", { k: "enum", o: [["tiles", "Tiles"], ["line", "One line"], ["off", "Off"]] }], ["acct", "Accounting", { k: "enum", o: [["tab", "Its own tab"], ["more", "Under More"]] }],
  ["acctDetail", "Accounting detail", { k: "enum", o: [["open", "Open"], ["folded", "Folded"]] }], ["tabs", "Tabs, in order", { k: "words", o: ["jobs", "cust", "notes", "mpi", "pay"] }]] };
const SVCSET_DOCS = [["workorder", "Work order"], ["estimate", "Estimate"], ["invoice", "Invoice"], ["warranty", "Warranty invoice"], ["lube", "Quick lube checklist"], ["history", "Vehicle history"], ["wo2", "Work order (tech copy)"], ["rental", "Car rental agreement"]];
const SVCSET_DOC_ON = [[true, "Ticked"], [false, "Not ticked"], ["warranty", "Warranty ROs only"], ["notWarranty", "Not on warranty ROs"]];
const SVCSET_PAYM = [["cash", "Cash"], ["card", "Credit card"], ["invoice", "Invoice (A/R) — office only"], ["warranty", "Warranty"], ["contract", "Service contract"], ["courtesy", "Courtesy"], ["internal", "Internal"], ["sunbit", "Sunbit"]];
// rows per page: p = leaf path, adv = under "Advanced ▸", today = how the program works without the setting (SPEC 5 "Today"), s = the editor
const SVCSET_ROWS = {
  ro: [
    { p: "ro.workflow.steps", today: "12 fixed steps, all on", s: { k: "steps" } },
    { p: "ro.workflow.okGate", today: "One check at Awaiting Approval", s: { k: "enum", o: [["work", "Before work starts (the Advance check — always)"], ["work+close", "Before work starts and before close (a screen check only)"]] } },
    { p: "ro.workflow.autoStep", today: "Advance by hand", s: { k: "bool", l: "Move the RO to the next step by itself (one stored step at a time, never past the customer's OK)" } },
    { p: "ro.workflow.closeList", today: "No list (money checks only)", s: { k: "group", f: [["mode", "The list", { k: "enum", o: [["off", "Off"], ["remind", "Remind only"], ["must", "Must be done (holds back the screen button only)"]] }],
      ["items", "Reminders", { k: "group", f: [["miles", "", { k: "bool", l: "Mileage in" }], ["ok", "", { k: "bool", l: "Customer OK" }], ["tech", "", { k: "bool", l: "A technician on every job" }], ["done", "", { k: "bool", l: "Every approved job Done" }], ["ccc", "", { k: "bool", l: "Cause and correction typed" }]] }]] } },
    { p: "ro.workflow.agedDays", today: "7 days, fixed in code", s: { k: "num", min: 1, max: 365, step: 1, unit: "days" } },
    { p: "ro.workflow.promise", today: "No promise time on the RO", s: { k: "group", f: [["mode", "Promise time", { k: "enum", o: [["off", "Off"], ["optional", "Optional"]] }], ["suggestHrs", "Suggest (hours ahead)", { k: "num", min: 0.25, max: 72, step: 0.25 }], ["waiterHrs", "Waiter (hours ahead)", { k: "num", min: 0.25, max: 72, step: 0.25 }]] } },
    { p: "ro.lists.transport", today: "Only on appointments", s: { k: "lines" } },
    { p: "ro.lists.jobStatus", today: "PEND / ACTIVE / DONE / HOLD", s: { k: "group", f: [["PEND", "PEND", { k: "text", max: 24 }], ["ACTIVE", "ACTIVE", { k: "text", max: 24 }], ["DONE", "DONE", { k: "text", max: 24 }], ["HOLD", "HOLD", { k: "text", max: 24 }]] } },
    { p: "ro.lists.holdReasons", today: "None", s: { k: "lines" } },
    { p: "ro.layout.jobRows", today: "Every job fully open", s: { k: "enum", o: [["fold", "Fold each job to one line (the one being priced or worked opens by itself)"], ["open", "Keep every job open"]] } },
    { p: "ro.layout.threeCs", today: "Typed twice, both print", s: { k: "enum", o: [["both", "Both: on each job and on the Notes tab"], ["job", "On each job only"], ["notes", "On the Notes tab only"]] } },
    { p: "ro.layout.headerButtons", today: "Carfax, History by VIN and Customer… in the header", s: { k: "checks", o: [["carfax", "Carfax"], ["vin", "History by VIN"], ["cust", "Change customer"], ["flag", "Flag hours"]] } },
    { p: "ro.layout.byRole", adv: true, today: "Same screen for everyone (tiles, Accounting tab, list on Open)", s: { k: "byRole" } },
    { p: "ro.layout.queue", adv: true, today: "Cards, 4 visible", s: { k: "group", f: [["style", "Style", { k: "enum", o: [["rows", "Rows"], ["cards", "Cards (today)"]] }], ["groupBySteps", "", { k: "bool", l: "Group by step" }],
      ["columns", "Columns", { k: "checks", o: [["ro", "RO"], ["cust", "Customer · vehicle"], ["waiting", "Waiting on"], ["tech", "Technician"], ["promised", "Promised"], ["total", "Total"], ["pay", "Pay type"]] }], ["fold", "Long groups", { k: "enum", o: [["never", "Never fold"], ["long", "Fold long groups"]] }]] } },
    { p: "ro.layout.moneyLine", adv: true, today: "Up to 9 figures + 4 buttons", s: { k: "enum", o: [["short", "Short: Tax, Total, Paid, Customer owes + Details"], ["full", "Every figure"]] } },
    { p: "ro.layout.afterClose", adv: true, today: "Posting window", s: { k: "enum", o: [["window", "The posting window"], ["note", "A short note with Print invoice?"]] } },
    { p: "ro.layout.addWork", adv: true, today: "All four always shown", s: { k: "group", f: [["bulkOil", "Bulk oil", { k: "enum", o: [["auto", "Only when the store has a bulk tank"], ["on", "Always"], ["off", "Off"]] }], ["laborOp", "", { k: "bool", l: "+ Labor op" }], ["blankJob", "", { k: "bool", l: "+ Blank job" }]] } },
  ],
  lists: [
    { p: "ro.lists.advisorsFromUsers", today: "4 names fixed in code; a new RO starts on the first name", s: { k: "bool", l: "Advisors come from the sign-ins (Service Advisor / Service Manager); a new RO starts on the person signed in" } },
    { p: "ro.lists.newJobTech", today: "The RO's default technician", s: { k: "enum", o: [["ro", "The RO's \"New jobs go to\" pick"], ["none", "Nobody (pick each time)"], ["next", "Next tech up"]] } },
    { p: "ro.lists.inspection", today: "14 items on screen, 10 on the quick-lube print", s: { k: "group", f: [["items", "Inspection items (one per line)", { k: "lines" }], ["grades", "The 3 grades", { k: "lines" }], ["printItems", "Quick-lube print list (one per line)", { k: "lines" }]] } },
    { p: "money.opCatalog", today: "16 ops with fixed prices", s: { k: "group", f: [["on", "", { k: "bool", l: "Show the + Labor op button" }], ["ops", "Labor ops (a new job's starting price only)", { k: "ops" }]] } },
    { p: "money.payMethods", today: "All 8 always; Card picked first", s: { k: "group", f: [["offered", "Methods offered", { k: "checks", o: SVCSET_PAYM }], ["first", "Picked first", { k: "enum", o: SVCSET_PAYM }], ["cardBrands", "Card brands (one per line)", { k: "lines" }]] } },
    { p: "money.drawerRemember", today: "Typed every time", s: { k: "bool", l: "Remember the last cash drawer on each computer (the drawer reference stays required)" } },
    { p: "money.defaultPay", today: "Customer (Internal on recon ROs)", s: { k: "enum", o: [["Customer", "Customer"], ["Warranty", "Warranty"], ["Service Contract", "Service Contract"], ["Internal", "Internal"], ["Courtesy", "Courtesy"]] } },
    { p: "ro.lists.bulkOilQts", adv: true, today: "5 / 6 / 8 qt, 6 picked", s: { k: "group", f: [["quick", "Quick amounts (quarts)", { k: "numlist" }], ["pick", "Picked first", { k: "num", min: 0.5, max: 40, step: 0.5 }]] } },
    { p: "ro.lists.flagStart", adv: true, today: "1.0 h", s: { k: "num", min: 0, max: 24, step: 0.1, unit: "hours" } },
    { p: "ro.lists.blankJob", adv: true, today: "LABOR, \"New job\", 1.0 h", s: { k: "group", f: [["op", "Op code", { k: "text", max: 16 }], ["desc", "Description", { k: "text", max: 80 }], ["hrs", "Hours", { k: "num", min: 0, max: 99, step: 0.1 }]] } },
    { p: "ro.lists.apptTypes", adv: true, today: "Today's 10", s: { k: "lines" } },
  ],
  techs: [
    { p: "ro.techs.myJobsOnPhone", today: "A phone shows the advisor screen", s: { k: "bool", l: "Technician phones open on My jobs (view only; laptops open the RO screen)" } },
    { p: "ro.techs.showOwnHours", today: "Not shown", s: { k: "bool", l: "Techs see their own flagged hours for today" } },
    { p: "ro.techs.rateViewers", today: "Every role", s: { k: "enum", o: [["all", "Everyone (today)"], ["office+sm", "The office and the Service Manager only"]] } },
    { p: "ro.techs.selfUpdate", today: "The advisor types it", s: { k: "bool", l: "Techs update their own jobs" } },
    { p: "ro.techs.partRequests", today: "Not possible", s: { k: "bool", l: "Techs ask for a part from the job" } },
    { p: "ro.techs.timeClock", today: "No time clock", s: { k: "bool", l: "Time clock on jobs" } },
  ],
  texts: [
    { p: "ro.texts.storeName", today: "The store profile name (Owner Panel > Stores)", s: { k: "text", max: 80, ph: "Blank = the store profile name" } },
    { p: "ro.texts.authText", today: "Wording in code; the e-sign page ignores per-RO edits", s: { k: "group", f: [["text", "Wording (blank = the standard wording)", { k: "area", max: 4000, rows: 5 }], ["perRoEdit", "", { k: "bool", l: "An advisor may edit it on one RO" }]] } },
    { p: "ro.texts.approvalAmount", today: "Labor only", s: { k: "enum", o: [["whole", "The whole estimate: labor + parts + sublet + tax"], ["labor", "Labor only"]] } },
    { p: "ro.texts.packets", today: "Fixed 8-document packet", s: { k: "packets" } },
    { p: "ro.texts.esignSend", today: "Link shown only; number typed", s: { k: "group", f: [["via", "E-sign link", { k: "enum", o: [["show", "Show it"], ["text", "Text it"], ["email", "Email it"]] }], ["fillMobile", "", { k: "bool", l: "Fill in the customer's mobile number" }]] } },
    { p: "ro.texts.estimateLine", adv: true, today: "Today's line", s: { k: "area", max: 400, rows: 2, ph: "Blank = today's line" } },
    { p: "ro.texts.newRo", adv: true, today: "Walk-in yes; customers added in the CRM", s: { k: "group", f: [["walkIn", "", { k: "bool", l: "Allow walk-in ROs" }], ["addCustomer", "", { k: "bool", l: "Add a new customer from the RO" }]] } },
    { p: "money.roNumber", adv: true, today: "\"RO-\" and the next number (never below the store's first RO number)", s: { k: "group", f: [["prefix", "Starts with", { k: "text", max: 8 }], ["floor", "Never below", { k: "num", min: 1, max: 99999999, step: 1 }]] } },
  ],
  rates: [
    { p: "money.laborRates", today: "Warranty → Warranty rate, Internal → Internal rate, everything else → Shop rate", s: { k: "rateMap" } },
    { p: "money.subletMarkup", today: "\"x1.25\" is only a label", s: { k: "group", f: [["on", "", { k: "bool", l: "Fill in the sublet sale price from the cost" }], ["factor", "Cost ×", { k: "num", min: 1, max: 5, step: 0.05 }]] } },
    { p: "money.bodyRates", today: "Body 58, Paint 62, Frame 75, Mechanical 145", s: { k: "group", f: [["body", "Body $/h", { k: "num", min: 0.01, max: 1000, step: 1 }], ["paint", "Paint $/h", { k: "num", min: 0.01, max: 1000, step: 1 }], ["frame", "Frame $/h", { k: "num", min: 0.01, max: 1000, step: 1 }], ["mechanical", "Mechanical $/h", { k: "num", min: 0.01, max: 1000, step: 1 }]] } },
    { p: "money.shopSupplies", today: "No fee line anywhere", s: { k: "group", f: [["on", "", { k: "bool", l: "Charge a shop supplies / hazmat fee" }]] } },
  ],
};
const svcSetStable = (v) => { if (v === null || typeof v !== "object") return JSON.stringify(v === undefined ? null : v); if (Array.isArray(v)) return "[" + v.map(svcSetStable).join(",") + "]"; return "{" + Object.keys(v).filter(k => v[k] !== undefined).sort().map(k => JSON.stringify(k) + ":" + svcSetStable(v[k])).join(",") + "}"; };
const svcSetGet = (o, path) => String(path).split(".").reduce((a, k) => (a && typeof a === "object" && !Array.isArray(a) ? a[k] : undefined), o);
const svcSetClone = (v) => (v === undefined ? undefined : JSON.parse(JSON.stringify(v)));
const svcSetPut = (o, path, v) => { const ks = path.split("."); let a = o; for (let i = 0; i < ks.length - 1; i++) { if (!a[ks[i]] || typeof a[ks[i]] !== "object" || Array.isArray(a[ks[i]])) a[ks[i]] = {}; a = a[ks[i]]; } a[ks[ks.length - 1]] = v; };
const svcSetWho = { office: "the office (Admin / F&I, Office Manager, Accounting)", "office+sm": "the office or the Service Manager", admin: "Admin / F&I" };
const svcSetLeaf = (path) => ((window.DMS && window.DMS.SVC_SETTING_LEAVES) || []).find(L => L.path === path) || null;

// a list of words / numbers in a textarea (one per line, or "5, 6, 8"): keeps what is typed, hands up the parsed list
const SvcSetLines = ({ value, onChange, disabled, nums, testid }) => {
  const join = (v) => (Array.isArray(v) ? v.join(nums ? ", " : "\n") : "");
  const [t, setT] = React.useState(() => join(value));
  const last = React.useRef(svcSetStable(value));
  React.useEffect(() => { if (svcSetStable(value) !== last.current) { last.current = svcSetStable(value); setT(join(value)); } }, [svcSetStable(value)]);
  const parse = (s) => (nums ? s.split(/[,;\s]+/).filter(Boolean).map(x => (isFinite(+x) ? +x : x)) : s.split("\n").map(x => x.trim()).filter(Boolean));
  const set = (s) => { setT(s); const v = parse(s); last.current = svcSetStable(v); onChange(v); };
  return nums
    ? <input data-svc-setting-input={testid} value={t} disabled={disabled} onChange={(e) => set(e.target.value)} style={{ ...svcSetupInp, maxWidth: 220 }} autoComplete="off" />
    : <textarea data-svc-setting-input={testid} rows={Math.min(8, Math.max(3, (Array.isArray(value) ? value.length : 3) + 1))} value={t} disabled={disabled} onChange={(e) => set(e.target.value)} style={{ ...svcSetupInp, resize: "vertical" }} />;
};
// one value editor (recursive for a group of values)
const SvcSetEdit = ({ spec, value, onChange, disabled, testid, rateIds }) => {
  const s = spec || {};
  const tid = testid || "";
  if (s.k === "bool") return <label style={{ display: "flex", gap: 6, alignItems: "center", fontSize: 13 }}><input type="checkbox" data-svc-setting-input={tid} disabled={disabled} checked={!!value} onChange={(e) => onChange(e.target.checked)} /> {s.l}</label>;
  if (s.k === "enum") return <select data-svc-setting-input={tid} disabled={disabled} value={JSON.stringify(value)} onChange={(e) => onChange(JSON.parse(e.target.value))} style={{ ...svcSetupInp, maxWidth: 520 }}>{(s.o || []).map(([v, l]) => <option key={JSON.stringify(v)} value={JSON.stringify(v)}>{l}</option>)}{!(s.o || []).some(([v]) => svcSetStable(v) === svcSetStable(value)) && <option value={JSON.stringify(value)}>{String(value)}</option>}</select>;
  if (s.k === "num") return <span style={{ display: "inline-flex", gap: 6, alignItems: "center" }}><input data-svc-setting-input={tid} disabled={disabled} inputMode="decimal" value={value == null ? "" : String(value)} onChange={(e) => onChange(e.target.value.replace(/[^0-9.]/g, ""))} style={{ ...svcSetupInp, width: 110, textAlign: "right" }} autoComplete="off" />{s.unit && <span style={{ fontSize: 12, color: "var(--jb-text-muted)" }}>{s.unit}</span>}</span>;
  if (s.k === "text") return <input data-svc-setting-input={tid} disabled={disabled} value={value == null ? "" : String(value)} placeholder={s.ph || ""} maxLength={s.max || 200} onChange={(e) => onChange(e.target.value)} style={{ ...svcSetupInp, maxWidth: 420 }} autoComplete="off" />;
  if (s.k === "area") return <textarea data-svc-setting-input={tid} disabled={disabled} rows={s.rows || 3} value={value == null ? "" : String(value)} placeholder={s.ph || ""} maxLength={s.max || 4000} onChange={(e) => onChange(e.target.value)} style={{ ...svcSetupInp, resize: "vertical" }} />;
  if (s.k === "lines") return <SvcSetLines value={value} onChange={onChange} disabled={disabled} testid={tid} />;
  if (s.k === "numlist") return <SvcSetLines value={value} onChange={onChange} disabled={disabled} nums testid={tid} />;
  if (s.k === "checks") { const cur = Array.isArray(value) ? value : []; return <span style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>{(s.o || []).map(([v, l]) => <label key={v} style={{ display: "flex", gap: 4, alignItems: "center", fontSize: 13 }}><input type="checkbox" data-svc-setting-input={tid + "." + v} disabled={disabled} checked={cur.includes(v)} onChange={(e) => onChange(e.target.checked ? (s.o || []).map(([x]) => x).filter(x => x === v || cur.includes(x)) : cur.filter(x => x !== v))} /> {l}</label>)}</span>; }
  if (s.k === "words") { const cur = Array.isArray(value) ? value : []; return <SvcSetLines value={cur} nums onChange={(v) => onChange(v.map(String))} disabled={disabled} testid={tid} />; }
  if (s.k === "group") { const cur = value && typeof value === "object" ? value : {}; return (
    <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
      {(s.f || []).map(([key, label, sub]) => (
        <div key={key} style={{ display: "flex", flexDirection: label ? "column" : "row", gap: 3 }}>
          {label && <span style={{ ...svcSetupLbl, textTransform: "none", letterSpacing: 0, fontSize: 11.5 }}>{label}</span>}
          <SvcSetEdit spec={sub} value={cur[key]} disabled={disabled} testid={tid + "." + key} rateIds={rateIds} onChange={(v) => onChange({ ...cur, [key]: v })} />
        </div>
      ))}
    </div>); }
  if (s.k === "steps") { const cur = Array.isArray(value) ? value : []; const D = window.DMS; const lockedOf = (st) => ["Write-Up", "Awaiting Approval", "In Progress", "Cashed Out"].includes(st);
    return (
      <div style={{ display: "grid", gridTemplateColumns: "minmax(120px,1.2fr) 52px minmax(120px,1.4fr) minmax(110px,1fr)", gap: 4, alignItems: "center", fontSize: 12.5, overflowX: "auto" }}>
        <b>Stored step</b><b>On</b><b>Name shown</b><b>Shows in</b>
        {cur.map((st, i) => (
          <React.Fragment key={st.stage}>
            <span style={{ fontFamily: "var(--jb-mono)" }}>{st.stage}</span>
            <input type="checkbox" data-svc-setting-input={tid + "." + i + ".on"} disabled={disabled || lockedOf(st.stage)} checked={!!st.on} onChange={(e) => onChange(cur.map((x, n) => n === i ? { ...x, on: e.target.checked } : x))} title={lockedOf(st.stage) ? "Always on" : ""} />
            <input data-svc-setting-input={tid + "." + i + ".label"} disabled={disabled} value={st.label} maxLength={40} onChange={(e) => onChange(cur.map((x, n) => n === i ? { ...x, label: e.target.value } : x))} style={svcSetupInp} autoComplete="off" />
            <select data-svc-setting-input={tid + "." + i + ".group"} disabled={disabled || lockedOf(st.stage)} value={st.group} onChange={(e) => onChange(cur.map((x, n) => n === i ? { ...x, group: e.target.value } : x))} style={svcSetupInp}>{SVCSET_GROUPS.map(([g, l]) => <option key={g} value={g}>{l}</option>)}</select>
          </React.Fragment>
        ))}
      </div>); }
  if (s.k === "byRole") { const cur = value && typeof value === "object" ? value : {}; const names = { advisor: "Service advisor / Service", parts: "Parts", tech: "Technician", office: "Office (Admin / F&I, Office Manager, Accounting)", gm: "Sales Manager / GM", sales: "Sales" };
    return <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>{Object.keys(names).map(k => (
      <div key={k} style={{ border: "1px solid var(--jb-border, #e2e4e8)", borderRadius: 4, padding: 8 }}><div style={{ fontWeight: 700, fontSize: 12.5, marginBottom: 4 }}>{names[k]}</div>
        <SvcSetEdit spec={SVCSET_VIEW} value={cur[k]} disabled={disabled} testid={tid + "." + k} onChange={(v) => onChange({ ...cur, [k]: v })} /></div>))}</div>; }
  if (s.k === "packets") { const cur = value && typeof value === "object" ? value : { open: {}, closed: {}, hide: [] }; const hide = Array.isArray(cur.hide) ? cur.hide : [];
    const cell = (moment, d) => { const x = (cur[moment] || {})[d] || { on: false, copies: 1 }; const set = (patch) => onChange({ ...cur, [moment]: { ...(cur[moment] || {}), [d]: { ...x, ...patch } } });
      return <span style={{ display: "flex", gap: 4 }}><select data-svc-setting-input={`${tid}.${moment}.${d}.on`} disabled={disabled} value={JSON.stringify(x.on)} onChange={(e) => set({ on: JSON.parse(e.target.value) })} style={{ ...svcSetupInp, width: 150 }}>{SVCSET_DOC_ON.map(([v, l]) => <option key={l} value={JSON.stringify(v)}>{l}</option>)}</select>
        <input data-svc-setting-input={`${tid}.${moment}.${d}.copies`} disabled={disabled} value={String(x.copies)} onChange={(e) => set({ copies: e.target.value.replace(/[^0-9]/g, "") === "" ? "" : +e.target.value.replace(/[^0-9]/g, "") })} style={{ ...svcSetupInp, width: 44, textAlign: "right" }} title="copies" /></span>; };
    return (
      <div style={{ display: "grid", gridTemplateColumns: "minmax(140px,1fr) auto auto 70px", gap: 4, alignItems: "center", fontSize: 12.5, overflowX: "auto" }}>
        <b>Document</b><b>Write-up / open RO · copies</b><b>Cash-out / closed RO · copies</b><b>Hidden</b>
        {SVCSET_DOCS.map(([d, l]) => <React.Fragment key={d}><span>{l}</span>{cell("open", d)}{cell("closed", d)}<input type="checkbox" data-svc-setting-input={`${tid}.hide.${d}`} disabled={disabled} checked={hide.includes(d)} onChange={(e) => onChange({ ...cur, hide: e.target.checked ? SVCSET_DOCS.map(([k]) => k).filter(k => k === d || hide.includes(k)) : hide.filter(k => k !== d) })} /></React.Fragment>)}
      </div>); }
  if (s.k === "ops") { const cur = Array.isArray(value) ? value : []; const set = (i, k, v) => onChange(cur.map((o, n) => n === i ? { ...o, [k]: v } : o));
    return (
      <div style={{ display: "flex", flexDirection: "column", gap: 4, maxHeight: 320, overflow: "auto" }}>
        <div style={{ display: "grid", gridTemplateColumns: "110px minmax(140px,1fr) 64px 84px 28px", gap: 4, fontSize: 11.5, fontWeight: 700 }}><span>Op code</span><span>Description</span><span>Hours</span><span>Labor $</span><span /></div>
        {cur.map((o, i) => (
          <div key={i} style={{ display: "grid", gridTemplateColumns: "110px minmax(140px,1fr) 64px 84px 28px", gap: 4 }}>
            <input disabled={disabled} value={o.op} onChange={(e) => set(i, "op", e.target.value.toUpperCase())} style={svcSetupInp} autoComplete="off" />
            <input disabled={disabled} value={o.desc} onChange={(e) => set(i, "desc", e.target.value)} style={svcSetupInp} autoComplete="off" />
            <input disabled={disabled} value={String(o.hrs)} onChange={(e) => set(i, "hrs", e.target.value.replace(/[^0-9.]/g, ""))} style={{ ...svcSetupInp, textAlign: "right" }} autoComplete="off" />
            <input disabled={disabled} value={String(o.lab)} onChange={(e) => set(i, "lab", e.target.value.replace(/[^0-9.]/g, ""))} style={{ ...svcSetupInp, textAlign: "right" }} autoComplete="off" />
            {!disabled ? <button className="k2b-button small" title="Remove" onClick={() => onChange(cur.filter((_, n) => n !== i))}>×</button> : <span />}
          </div>
        ))}
        {!disabled && <span><button className="k2b-button small" data-svc-setting-input={tid + ".add"} onClick={() => onChange([...cur, { op: "NEW-OP", desc: "New labor op", hrs: 1, lab: 0 }])}>+ Labor op</button></span>}
      </div>); }
  if (s.k === "rateMap") { const cur = value && typeof value === "object" ? value : {}; const ids = rateIds || [];
    return <div style={{ display: "grid", gridTemplateColumns: "140px minmax(160px, 320px)", gap: 4, alignItems: "center", fontSize: 12.5 }}>{["Customer", "Warranty", "Internal", "Service Contract", "Courtesy"].map(pt => (
      <React.Fragment key={pt}><span>{pt}</span><select data-svc-setting-input={tid + "." + pt} disabled={disabled} value={cur[pt] || "SHOP"} onChange={(e) => onChange({ ...cur, [pt]: e.target.value })} style={svcSetupInp}>{ids.map(r => <option key={r.id} value={r.id}>{r.name} (${(+r.rate || 0).toFixed(2)})</option>)}{!ids.some(r => r.id === (cur[pt] || "SHOP")) && <option value={cur[pt] || "SHOP"}>{cur[pt] || "SHOP"} (not in the list — the shop rate)</option>}</select></React.Fragment>))}</div>; }
  return <span style={{ fontSize: 12 }}>{JSON.stringify(value)}</span>;
};

// RC32 fix (r32-aud): the Service Manager's rights (owner Q5) reach only a sign-in whose role is "Service Manager" (or "Service Mgr") — the
// server's rule (rolematrix.isServiceManager). The office sees who that is, or that nobody is, so a service manager who signs in with the
// role "Service" is noticed before roll-out. Words only; nothing here changes a role.
const SvcSmNote = () => {
  const D = window.DMS;
  const roster = (D && D.roster ? D.roster() || [] : []).filter(u => u && u.active !== false);
  if (!roster.length) return null;
  const nm = (u) => String(u.name || u.id || "").trim();
  const sms = roster.filter(u => /^service\s*(manager|mgr)$/i.test(String(u.role || "").trim())).map(nm).filter(Boolean);
  const plain = roster.filter(u => /^service$/i.test(String(u.role || "").trim())).map(nm).filter(Boolean);
  return (
    <div data-svc-sm-note={sms.length ? "sm" : "none"} style={{ fontSize: 12, padding: "6px 10px", borderRadius: 6, background: sms.length ? "var(--jb-surface-2, #eef0f3)" : "#FFF4D6", color: "var(--jb-text)" }}>
      {sms.length
        ? <>The Service Manager may also change the rows on this page that are not marked "Only the office": <b>{sms.join(", ")}</b>.</>
        : <>No sign-in has the role <b>Service Manager</b> yet, so only the office can change this page. To let your service manager change the RO screen, steps, lists and technicians rows, give his sign-in the role "Service Manager" in Settings › Users.</>}
      {plain.length > 0 && <> {plain.join(", ")} {plain.length === 1 ? "signs" : "sign"} in with the role "Service", which cannot change these settings.</>}
    </div>
  );
};

// a made-up RO (never saved, never in the store) for "Preview an RO"
const svcSetPreviewRo = (rs) => {
  const opened = new Date(Date.now() - 9 * 86400000).toISOString();
  return { id: "RO-PREVIEW", customer: "SAMPLE, CUSTOMER", customerId: "", vehicle: "2021 CHEVROLET EQUINOX LT", vin: "2GNAXUEV0M6000000", miles: 41250, stage: "In Progress", status: "Open", opened, advisor: "", payType: "Customer",
    promise: new Date(Date.now() + 3 * 3600000).toISOString(), transport: (rs.ro.lists.transport || [])[1] || "",
    ops: [{ id: "P1", op: "OIL-LOF", desc: "Oil Change Lube Filter", lab: 65.5, hrs: 0.5, status: "DONE", approval: "approved", techId: "T1", payType: "Customer", complaint: "Maintenance due", cause: "Due", correction: "Changed oil" },
      { id: "P2", op: "BRK-PADS-F", desc: "Front Brake Pad Replacement", lab: 189, hrs: 1.5, status: "ACTIVE", approval: "approved", techId: "T1", payType: "Customer", complaint: "Brakes squeal" },
      { id: "P3", op: "ALIGN-4W", desc: "4-Wheel Alignment", lab: 129, hrs: 1, status: "HOLD", approval: "pending", payType: "Customer", holdReason: (rs.ro.lists.holdReasons || [])[0] || "" }],
    partsLines: [], payments: [], mpi: {}, stageHist: {},
    authorization: { method: "esign", by: "SAMPLE, CUSTOMER", at: opened, amount: 254.5 } };
};

// the RO screen lane's own preview (window.RoScreenPreview) can throw on a made-up RO it was not built for — fall back to the simple one, never break Setup
class SvcPreviewGuard extends React.Component {
  constructor(p) { super(p); this.state = { failed: false }; }
  static getDerivedStateFromError() { return { failed: true }; }
  componentDidCatch(e) { try { console.warn("Preview an RO: the RO screen preview failed, showing the simple preview", e && e.message); } catch (x) {} try { this.props.onFail && this.props.onFail(); } catch (x) {} }
  render() { return this.state.failed ? null : this.props.children; }
}

// "Preview an RO" — the real RO screen (lane ros, when loaded) for a made-up RO with the (unsaved) settings; else the simple preview below
const SvcSetPreview = ({ settings, onClose }) => {
  const [role, setRole] = React.useState("Service Advisor");
  const [lay, setLay] = React.useState("desk");
  const [simple, setSimple] = React.useState(false);
  // RC32 fix (r32-aud): the made-up RO is made readable (look only) BEFORE the RO screen draws it — its money / approval reads look the RO
  // up by id (DMS.svcPreviewRO, DMSCore); forgotten again when the window closes. It is never saved and never listed.
  const ro = React.useMemo(() => { const r = svcSetPreviewRo(settings); try { if (window.DMS && window.DMS.svcPreviewRO) window.DMS.svcPreviewRO(r); } catch (e) {} return r; }, [settings]);
  React.useEffect(() => () => { try { if (window.DMS && window.DMS.svcPreviewRO) window.DMS.svcPreviewRO(null); } catch (e) {} }, []);
  if (!window.RoScreenPreview || simple) return <SvcSetPreviewSimple settings={settings} onClose={onClose} />;
  const RSP = window.RoScreenPreview;
  const roles = ["Service Advisor", "Service Manager", "Technician", "Parts", "Office Manager", "Sales"];
  return (
    <K2BModal title="Preview an RO (made-up RO, your unsaved choices)" width={lay === "phone" ? 520 : 1180} onClose={onClose} buttons={<><button className="k2b-button" data-svc-preview-simple="1" onClick={() => setSimple(true)}>Simple preview</button><K2BButton primary onClick={onClose}>Close</K2BButton></>}>
      <div data-svc-preview="1" data-svc-preview-real="1" style={{ display: "flex", flexDirection: "column", gap: 8 }}>
        <div style={{ display: "flex", gap: 8, alignItems: "center", flexWrap: "wrap", fontSize: 12.5 }}>
          <span>Seen as</span><select data-svc-preview-role="1" value={role} onChange={(e) => setRole(e.target.value)} style={svcSetupInp}>{roles.map(r => <option key={r} value={r}>{r}</option>)}</select>
          <span>on a</span><select data-svc-preview-layout="1" value={lay} onChange={(e) => setLay(e.target.value)} style={svcSetupInp}><option value="desk">laptop</option><option value="phone">phone</option></select>
          <span style={{ color: "var(--jb-text-muted)" }}>Nothing here can be changed — it only shows how the RO screen will look.</span>
        </div>
        <SvcPreviewGuard key={role + "|" + lay} onFail={() => setSimple(true)}><RSP settings={settings} ro={ro} role={role} layout={lay} height={lay === "phone" ? 720 : 620} /></SvcPreviewGuard>
      </div>
    </K2BModal>
  );
};

// the simple preview (its own drawing of the made-up RO with the settings)
const SvcSetPreviewSimple = ({ settings, onClose }) => {
  const D = window.DMS; const rs = settings;
  const money = (n) => "$" + (Number(n) || 0).toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 });
  const ro = svcSetPreviewRo(rs); const opened = ro.opened;
  const est = { labor: 383.5, parts: 141.9, sublet: 0, tax: 18.04, total: 543.44 };
  const steps = rs.ro.workflow.steps; const grp = D.svcStepGroup ? D.svcStepGroup(ro, { settings: rs }) : "progress";
  const view = D.svcRoleView ? D.svcRoleView({ settings: rs }) : null;
  const next = D.svcNextStep ? D.svcNextStep(ro, { settings: rs, readOnly: false, owes: 543.44, canClose: true }) : null;
  const close = D.svcCloseChecklist ? D.svcCloseChecklist(ro, { settings: rs }) : { items: [] };
  const words = rs.ro.lists.jobStatus; const aged = Math.floor((Date.now() - Date.parse(opened)) / 86400000) >= rs.ro.workflow.agedDays;
  const tabName = { jobs: "Jobs (3)", cust: "Customer & vehicle", notes: "Notes", mpi: "Inspection", pay: "Payments · owes " + money(543.44) };
  const hdr = rs.ro.layout.headerButtons; const more = [["carfax", "Carfax"], ["vin", "History by VIN"], ["cust", "Change customer"], ["flag", "Flag hours"]];
  const chip = (t, bg, fg) => <span style={{ fontSize: 11.5, padding: "2px 7px", borderRadius: 10, background: bg || "var(--jb-surface-2, #eef0f3)", color: fg || "var(--jb-text)", fontWeight: 600 }}>{t}</span>;
  const store = rs.ro.texts.storeName || (D.storeProfile && D.storeProfile() && D.storeProfile().name) || "the store profile name";
  return (
    <K2BModal title="Preview an RO (made-up RO, your unsaved choices)" width={980} onClose={onClose} buttons={<K2BButton primary onClick={onClose}>Close</K2BButton>}>
      <div data-svc-preview="1" style={{ display: "flex", flexDirection: "column", gap: 10, fontSize: 13, fontFamily: "var(--jb-font)" }}>
        <div style={{ display: "flex", gap: 8, alignItems: "center", flexWrap: "wrap" }}>
          <b style={{ fontFamily: "var(--jb-mono)", fontSize: 15 }}>RO-PREVIEW</b>{chip((SVCSET_GROUPS.find(g => g[0] === grp) || ["", grp])[1])}{aged && chip(`${rs.ro.workflow.agedDays}+ days aged`, "#FDE2E1", "#9B1C1C")}
          <span>SAMPLE, CUSTOMER · #5550000</span><div style={{ flex: 1 }} />
          <button className="k2b-button small">Print…</button><button className="k2b-button small">Service menu · 2 due</button>
          {more.filter(([k]) => hdr.includes(k)).map(([k, l]) => <button key={k} className="k2b-button small" data-svc-preview-hdr={k}>{l}</button>)}
          <button className="k2b-button small" title={"More: " + more.filter(([k]) => !hdr.includes(k)).map(x => x[1]).join(", ")}>⋯ More</button>
        </div>
        <div style={{ color: "var(--jb-text-muted)" }}>2021 CHEVROLET EQUINOX LT · VIN 2GNAXUEV0M6000000 · 41,250 mi {rs.ro.workflow.promise.mode !== "off" && chip(`Promised today ${rs.ro.workflow.promise.suggestHrs} h after write-up`)} {chip((rs.ro.lists.transport || [])[1] || "Drop-off")}</div>
        <div data-svc-preview-steps="1" style={{ display: "flex", gap: 6, flexWrap: "wrap", alignItems: "flex-start" }}>
          {SVCSET_GROUPS.map(([g, l]) => <div key={g} style={{ border: "1px solid var(--jb-border, #ccd)", borderRadius: 4, padding: "4px 8px", background: g === grp ? "var(--jb-blue-tint, #E5EFFA)" : "transparent", minWidth: 110 }}>
            <div style={{ fontWeight: 700 }}>{l}</div><div style={{ fontSize: 11, color: "var(--jb-text-muted)" }}>{steps.filter(st => st.on && st.group === g).map(st => st.label).join(" · ") || "—"}</div></div>)}
          {next && next.key && <button className="k2b-button small" style={{ background: "var(--jb-yellow)", fontWeight: 700, opacity: next.enabled ? 1 : 0.6 }} title={next.hint || ""}>{next.label}{next.hint ? ` (${next.hint})` : ""}</button>}
          {chip(rs.ro.workflow.autoStep ? "Moves to the next step by itself" : "Moves by hand")}
        </div>
        <div style={{ display: "flex", gap: 4, flexWrap: "wrap" }}>{(view ? view.tabs : ["jobs", "cust", "notes", "pay"]).map((t, i) => <span key={t} style={{ padding: "4px 10px", border: "1px solid var(--jb-border)", borderBottom: i === 0 ? "2px solid var(--jb-navy)" : undefined, fontWeight: i === 0 ? 700 : 500 }}>{tabName[t]}</span>)}{view && view.acct === "tab" ? <span style={{ padding: "4px 10px", border: "1px solid var(--jb-border)" }}>Accounting</span> : <span style={{ padding: "4px 10px", border: "1px dashed var(--jb-border)" }}>⋯ More (Accounting)</span>}</div>
        <div style={{ border: "1px solid var(--jb-border)", borderRadius: 6, padding: 8 }}>
          <div style={{ fontWeight: 700, marginBottom: 4 }}>Customer OK · signed by e-sign</div>
          <div>The customer approves: <b>{rs.ro.texts.approvalAmount === "whole" ? `${money(est.total)} — the whole estimate (labor ${money(est.labor)} + parts ${money(est.parts)} + tax ${money(est.tax)})` : `${money(254.5)} — labor only`}</b></div>
          <div style={{ fontSize: 11.5, color: "var(--jb-text-muted)" }}>E-sign page: {store}{rs.ro.texts.esignSend.via !== "show" ? ` · the link is ${rs.ro.texts.esignSend.via === "text" ? "texted" : "emailed"}` : " · the link is shown"}{rs.ro.texts.esignSend.fillMobile ? " · mobile filled in" : ""}</div>
        </div>
        <div style={{ display: "flex", gap: 6, flexWrap: "wrap" }}><button className="k2b-button small">+ Standard job…</button>{rs.ro.layout.addWork.bulkOil !== "off" && <button className="k2b-button small">Bulk oil{rs.ro.layout.addWork.bulkOil === "auto" ? " (with a tank)" : ""}</button>}{rs.ro.layout.addWork.laborOp && rs.money.opCatalog.on && <button className="k2b-button small">+ Labor op ({rs.money.opCatalog.ops.length})</button>}{rs.ro.layout.addWork.blankJob && <button className="k2b-button small">+ Blank job ({rs.ro.lists.blankJob.desc}, {rs.ro.lists.blankJob.hrs} h)</button>}</div>
        <div data-svc-preview-jobs={rs.ro.layout.jobRows} style={{ display: "flex", flexDirection: "column", gap: 4 }}>
          {ro.ops.map((j, i) => <div key={j.id} style={{ border: "1px solid var(--jb-border)", borderRadius: 4, padding: 6 }}>
            <div style={{ display: "flex", gap: 8, alignItems: "center", flexWrap: "wrap" }}><b>Job {i + 1}</b><span style={{ fontFamily: "var(--jb-mono)" }}>{j.op}</span><span>{j.desc}</span>{chip(words[j.status] || j.status)}{j.status === "HOLD" && j.holdReason && chip("On hold: " + j.holdReason, "#FFF4CE")}<div style={{ flex: 1 }} /><b>{money(j.lab)}</b></div>
            {(rs.ro.layout.jobRows === "open" || j.status === "ACTIVE") && <div style={{ fontSize: 12, color: "var(--jb-text-muted)", marginTop: 4 }}>Complaint · Cause · Correction{rs.ro.layout.threeCs === "notes" ? " (typed on the Notes tab)" : ""} · Tech notes · Parts</div>}
          </div>)}
        </div>
        {close.items.length > 0 && <div style={{ border: "1px solid var(--jb-border)", borderRadius: 6, padding: 8 }}><b>Before you close ({close.mode === "must" ? "must be done" : "reminders"})</b>{close.items.map(it => <div key={it.key}>{it.done ? "✓" : "○"} {it.label}</div>)}</div>}
        <div style={{ display: "flex", gap: 12, flexWrap: "wrap", borderTop: "1px solid var(--jb-border)", paddingTop: 6 }}>
          {rs.ro.layout.moneyLine === "full" && <><span>Labor {money(est.labor)}</span><span>Parts {money(est.parts)}</span><span>Sublet $0.00</span><span>Fees $0.00</span></>}
          <span>Tax {money(est.tax)}</span><b>Total {money(est.total)}</b><span>Paid $0.00</span><b>Customer owes {money(est.total)}</b>{rs.ro.layout.moneyLine === "short" && <span>Details ▾</span>}
        </div>
        <div style={{ fontSize: 12 }}>Payment methods: {(rs.money.payMethods.offered || []).map(m => (SVCSET_PAYM.find(x => x[0] === m) || [m, m])[1] + (m === rs.money.payMethods.first ? " (first)" : "")).join(" · ")}</div>
      </div>
    </K2BModal>
  );
};

// one Setup page of rows (RO screen & steps / Lists / Technicians / Texts & printing / the new rows on Rates)
const SvcSettingsPage = ({ page }) => {
  const D = window.DMS;
  const [, force] = React.useReducer(n => n + 1, 0);
  React.useEffect(() => (D && D.subscribe ? D.subscribe(force) : undefined), []);
  const [draft, setDraft] = React.useState({});
  const [adv, setAdv] = React.useState(false);
  const [preview, setPreview] = React.useState(null);
  const [gen, setGen] = React.useState(0);
  // RC35 (brd): a store switch asks first when this page has unsaved rows (SPEC 4.4)
  const skSaveRef = React.useRef(null);
  if (window.useK2BUnsaved) window.useK2BUnsaved("svc-setup-" + page, { label: "Service Setup",
    isDirty: () => { try { const c = D && D.svcSettings ? D.svcSettings() : {}; return (SVCSET_ROWS[page] || []).some(r => Object.prototype.hasOwnProperty.call(draft, r.p) && svcSetStable(draft[r.p]) !== svcSetStable(svcSetGet(c, r.p))); } catch (e) { return false; } },
    save: () => (skSaveRef.current ? skSaveRef.current() : false), discard: () => { setDraft({}); setGen(g => g + 1); } });
  if (!D || !D.svcSettings || !D.SVC_SETTING_LEAVES) return <div style={{ padding: 12 }}>Service settings not loaded.</div>;
  const cur = D.svcSettings();
  const rows = SVCSET_ROWS[page] || [];
  const valOf = (p) => (Object.prototype.hasOwnProperty.call(draft, p) ? draft[p] : svcSetGet(cur, p));
  const canRow = (p) => !!(D.svcCanEditSetting && D.svcCanEditSetting(p));
  const changed = rows.filter(r => Object.prototype.hasOwnProperty.call(draft, r.p) && svcSetStable(draft[r.p]) !== svcSetStable(svcSetGet(cur, r.p)));
  const toast = (r) => { window.k2bToast && window.k2bToast(r.msg, r.ok ? "ok" : "warn", 4200); return r; };
  const save = () => {
    const patch = {};
    changed.forEach(r => { if (canRow(r.p)) svcSetPut(patch, r.p, svcSetClone(draft[r.p])); });
    if (!Object.keys(patch).length) return toast({ ok: true, msg: "Nothing to save." });
    const r = toast(D.saveServiceSettings(patch));
    if (r.ok) { setDraft({}); setGen(g => g + 1); }
    return r;
  };
  skSaveRef.current = () => { if (!changed.length) return true; const r = save(); return !!(r && r.ok); };
  const today = () => {
    const T = D.SVC_RO_TODAY || {}; const next = { ...draft }; let n = 0;
    rows.forEach(r => { const L = svcSetLeaf(r.p); if (!L || L.later || !canRow(r.p)) return; next[r.p] = svcSetClone(svcSetGet(T, r.p)); n++; });
    setDraft(next); setGen(g => g + 1);
    toast({ ok: true, msg: n ? `${n} row(s) filled with today's look — press Save to keep them.` : "Nothing here you may change." });
  };
  const doPreview = () => {
    const raw = svcSetClone(D.serviceSettings ? D.serviceSettings() || {} : {});
    Object.keys(draft).forEach(p => svcSetPut(raw, p, svcSetClone(draft[p])));
    const rs = D.svcResolveSettings(raw, {});
    if (rs.invalid && rs.invalid.length) toast({ ok: false, msg: `The preview uses the saved value for ${rs.invalid.length} row(s) that can't be read yet: ${rs.invalid.join(", ")}.` });
    setPreview(rs);
  };
  const shownRows = rows.filter(r => !r.adv || adv);
  const anyEdit = rows.some(r => canRow(r.p));
  const rateIds = (cur.laborRates || []).map(r => ({ id: r.id, name: r.name, rate: r.rate }));
  return (
    <div data-svc-settings-page={page} style={{ display: "flex", flexDirection: "column", gap: 10 }}>
      <div style={{ display: "flex", gap: 8, alignItems: "center", flexWrap: "wrap" }}>
        {page !== "rates" && <button className="k2b-button small" data-svc-setup-preview="1" onClick={doPreview} style={{ fontWeight: 700 }}>Preview an RO</button>}
        {anyEdit && <button className="k2b-button small" data-svc-setup-reset="1" onClick={today}>Back to today's look</button>}
        {!anyEdit && <span data-svc-setting-viewonly="1" style={{ fontSize: 12, color: "#9A6700", fontWeight: 700 }}>View only — {page === "ro" || page === "lists" || page === "techs" ? "the office or the Service Manager" : "the office"} changes these.</span>}
        <div style={{ flex: 1 }} />
        {changed.length > 0 && <span style={{ fontSize: 12, color: "var(--jb-text-muted)" }}>{changed.length} unsaved</span>}
        {changed.length > 0 && <button className="k2b-button small" onClick={() => { setDraft({}); setGen(g => g + 1); }}>Discard</button>}
        {anyEdit && <button className="k2b-button small" data-svc-setup-save={page} onClick={save} disabled={!changed.length} style={{ background: "var(--jb-yellow)", fontWeight: 700 }}>Save</button>}
      </div>
      {(page === "ro" || page === "lists" || page === "techs") && canRow("ro.layout.moneyLine") && <SvcSmNote />}
      {page === "techs" && <SvcTechLinks />}
      {shownRows.map(r => {
        const L = svcSetLeaf(r.p); if (!L) return null;
        const may = canRow(r.p); const dirty = changed.includes(r);
        return (
          <div key={r.p + ":" + gen} data-svc-setting={r.p} data-svc-setting-ro={may ? undefined : "1"} style={{ border: "1px solid " + (dirty ? "var(--jb-navy, #1B66A8)" : "var(--jb-border, #ccd)"), borderRadius: 6, background: "var(--jb-surface, #fff)", padding: 10, display: "flex", flexDirection: "column", gap: 6 }}>
            <div style={{ display: "flex", gap: 8, alignItems: "baseline", flexWrap: "wrap" }}>
              <span style={{ fontFamily: "var(--jb-mono)", fontSize: 11, color: "var(--jb-text-muted)" }}>{L.id}</span>
              <b style={{ fontSize: 13 }}>{L.label}</b>
              {L.later && <span style={{ fontSize: 11, fontWeight: 700, color: "#9A6700" }}>Comes in a later release</span>}
            </div>
            <span style={{ fontSize: 11.5, color: "var(--jb-text-muted)" }}>Today: {r.today}{!may && !L.later ? ` · Only ${svcSetWho[L.who] || L.who} can change this.` : ""}</span>
            <SvcSetEdit spec={r.s} value={valOf(r.p)} disabled={!may || L.later} testid={r.p} rateIds={rateIds} onChange={(v) => setDraft(d => ({ ...d, [r.p]: v }))} />
          </div>
        );
      })}
      {rows.some(r => r.adv) && <span><button className="k2b-button small" data-svc-setup-adv="1" onClick={() => setAdv(a => !a)}>{adv ? "Hide advanced ▴" : "Advanced ▸"}</button></span>}
      {preview && <SvcSetPreview settings={preview} onClose={() => setPreview(null)} />}
    </div>
  );
};

// T1: link each technician to a sign-in (the office; one sign-in per technician) — "Mine" and My jobs know whose jobs are whose
const SvcTechLinks = () => {
  const D = window.DMS;
  const techs = (D.technicians ? D.technicians() : []) || [];
  const roster = (D.roster ? D.roster() : []) || [];
  const may = !!(D.isAdmin && D.isAdmin()) || !!(D.can && D.can("glEdit"));
  const nameOf = (id) => { const u = roster.find(x => String(x.id) === String(id)); return u ? `${u.name || u.id} (${u.id}${u.role ? " · " + u.role : ""})` : String(id); };
  const link = (t, uid) => { const r = D.linkTechnician(t.id, uid); window.k2bToast && window.k2bToast(r.msg, r.ok ? "ok" : "warn", 4200); };
  return (
    <div data-svc-setting="technicians.userId" data-svc-setting-ro={may ? undefined : "1"} style={{ border: "1px solid var(--jb-border, #ccd)", borderRadius: 6, background: "var(--jb-surface, #fff)", padding: 10, display: "flex", flexDirection: "column", gap: 6 }}>
      <div style={{ display: "flex", gap: 8, alignItems: "baseline" }}><span style={{ fontFamily: "var(--jb-mono)", fontSize: 11, color: "var(--jb-text-muted)" }}>T1</span><b style={{ fontSize: 13 }}>Link each technician to a sign-in</b></div>
      <span style={{ fontSize: 11.5, color: "var(--jb-text-muted)" }}>Today: technicians are names only. Needed so "Mine" and "My jobs" know whose jobs are whose.{!may ? " · Only the office (Admin / F&I, Office Manager, Accounting) can change this." : ""}</span>
      {techs.length === 0 && <span style={{ fontSize: 12.5 }}>No technicians yet (Settings › Technicians).</span>}
      {techs.map(t => (
        <div key={t.id} data-svc-tech-link={t.id} style={{ display: "grid", gridTemplateColumns: "minmax(140px, 1fr) minmax(200px, 2fr)", gap: 8, alignItems: "center", fontSize: 13 }}>
          <span><b>{t.name}</b> <span style={{ fontFamily: "var(--jb-mono)", fontSize: 11, color: "var(--jb-text-muted)" }}>{t.id}</span></span>
          {may ? (
            <select data-svc-tech-link-select={t.id} value={t.userId || ""} onChange={(e) => link(t, e.target.value)} style={svcSetupInp}>
              <option value="">— not linked —</option>
              {roster.filter(u => u && u.active !== false).map(u => <option key={u.id} value={String(u.id)} disabled={techs.some(x => x.id !== t.id && String(x.userId || "") === String(u.id))}>{nameOf(u.id)}</option>)}
              {t.userId && !roster.some(u => String(u.id) === String(t.userId)) && <option value={t.userId}>{t.userId}</option>}
            </select>
          ) : <span>{t.userId ? nameOf(t.userId) : "— not linked —"}</span>}
        </div>
      ))}
    </div>
  );
};

const ServiceSetupPanel = ({ embedded }) => {
  const [, force] = React.useReducer(n => n + 1, 0);
  React.useEffect(() => window.DMS && DMS.subscribe ? DMS.subscribe(force) : undefined, []);
  const D = window.DMS;
  // RC28 (svc) fix (svc-aud finding 5): the Service Manager keeps the maintenance schedule and the service menu — a login that may set up the
  // service pack but not the standard jobs opens on the pack's tab
  const [tab, setTab] = React.useState(() => (D && D.svcCanSetup && !D.svcCanSetup() && window.SvcSetupTab && D.svcPackCanSetup && D.svcPackCanSetup() ? "schedule" : "jobs"));
  const [selId, setSelId] = React.useState(null);
  const [f, setF] = React.useState(null);
  const [q, setQ] = React.useState("");
  const [sf, setSf] = React.useState(null);
  if (!D || !D.svcSettings) return <div style={{ padding: 16 }}>Service module not loaded.</div>;
  const canEdit = D.svcCanSetup();
  const jobs = D.stdJobs() || [];
  const s = D.svcSettings();
  const toast = (r) => { window.k2bToast && window.k2bToast(r.msg, r.ok ? "ok" : "warn", 3200); return r; };
  const money = (n) => "$" + (Number(n) || 0).toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 });

  const pick = (j) => { setSelId(j ? j.id : "new"); setF(j ? JSON.parse(JSON.stringify({ ...SVCSETUP_BLANK, ...j })) : { ...SVCSETUP_BLANK, parts: [] }); };
  const set = (k, v) => setF(x => ({ ...x, [k]: v }));
  const setPart = (i, k, v) => setF(x => ({ ...x, parts: x.parts.map((p, n) => n === i ? { ...p, [k]: v } : p) }));
  const rate = f ? (f.rateSource === "custom" ? +f.rate || 0 : D.svcRateFor(f.payType)) : 0;
  const laborPreview = f ? (f.rateMode === "flat" ? +f.flat || 0 : (+f.estHours || 0) * rate) : 0;
  const partsPreview = f ? f.parts.reduce((t, p) => t + (+p.qty || 0) * (+p.price || 0), 0) : 0;
  const shown = jobs.filter(j => !q || (j.laborOp + " " + j.desc).toLowerCase().includes(q.toLowerCase()));

  const save = () => { const r = toast(D.saveStdJob({ ...f, id: selId === "new" ? "" : f.id })); if (r.ok) { setSelId(r.id); setF(x => ({ ...x, id: r.id })); } };
  const del = () => { if (!window.confirm(`Delete standard job ${f.laborOp}? ROs that already used it keep their copy.`)) return; const r = toast(D.deleteStdJob(f.id)); if (r.ok) { setSelId(null); setF(null); } };

  const sfv = sf || { cardFeePct: s.cardFeePct, cardFeeOn: s.cardFeeOn, reconWarnPct: s.reconWarnPct, shopRate: s.shopRate, reconLaborRate: s.reconLaborRate == null ? "" : s.reconLaborRate, invoiceFooter: s.invoiceFooter, laborRates: s.laborRates.map(r => ({ ...r })) };
  const setS = (k, v) => setSf({ ...sfv, [k]: v });
  const saveSettings = () => { const r = toast(D.saveServiceSettings(sfv)); if (r.ok) setSf(null); };

  const tabBtn = (k, label) => (
    <button key={k} className="k2b-button small" data-svcsetup-tab={k} onClick={() => setTab(k)}
            style={{ background: tab === k ? "var(--jb-navy, #1B66A8)" : undefined, color: tab === k ? "#fff" : undefined, fontWeight: tab === k ? 700 : 500 }}>{label}</button>
  );

  return (
    <div data-svc-setup="1" style={{ display: "flex", flexDirection: "column", gap: 10, fontFamily: "var(--jb-font)", color: "var(--jb-text, #222)", minHeight: 0, height: embedded ? "100%" : undefined }}>
      <div style={{ display: "flex", gap: 6, alignItems: "center", flexWrap: "wrap" }}>
        {tabBtn("jobs", `Standard Jobs (${jobs.length})`)}
        {tabBtn("rates", "Rates, Card Fee & Invoice")}
        {SVCSET_TABS.map(([k, l]) => tabBtn(k, l))}{/* RC32 (rset) */}
        {window.SvcSetupTab && D.svcCanPresent && D.svcCanPresent() && <>{tabBtn("schedule", "Maintenance schedule")}{tabBtn("menu", "Service menu")}{tabBtn("sunbit", "Sunbit & reminders")}</>}{/* RC28 (svc) */}
        <div style={{ flex: 1 }} />
        {!canEdit && (tab === "jobs" || tab === "rates") && <span style={{ fontSize: 12, color: "#9A6700", fontWeight: 700 }}>View only — an office manager or admin maintains these.</span>}
      </div>

      {tab === "jobs" && (
        <div style={{ display: "grid", gridTemplateColumns: "minmax(220px, 300px) minmax(0, 1fr)", gap: 12, minHeight: 0, flex: 1 }}>
          <div style={{ border: "1px solid var(--jb-border, #ccd)", borderRadius: 6, background: "var(--jb-surface, #fff)", display: "flex", flexDirection: "column", minHeight: 260, maxHeight: embedded ? "none" : 560 }}>
            <div style={{ padding: 8, display: "flex", gap: 6, borderBottom: "1px solid var(--jb-border, #ccd)" }}>
              <input value={q} onChange={(e) => setQ(e.target.value)} placeholder="Find op / description…" style={{ ...svcSetupInp, flex: 1 }} autoComplete="off" name="k2b-stdjob-filter" data-svcsetup-q="1" />{/* RC32 (rset, owner 10/26): the browser never fills a sign-in id into a search box */}
              {canEdit && <button className="k2b-button small" data-svcsetup-new="1" onClick={() => pick(null)} style={{ fontWeight: 700, background: "var(--jb-yellow)" }}>+ New</button>}
            </div>
            <div style={{ overflow: "auto", flex: 1 }}>
              {shown.length === 0 && <div data-svcsetup-empty="1" style={{ padding: 14, fontSize: 12.5, color: "var(--jb-text-muted)" }}>{jobs.length ? <>No standard jobs match '{q}' · <button className="k2b-button small" data-svcsetup-clear="1" onClick={() => setQ("")}>Clear search</button></> : "No standard jobs yet. Add the jobs your shop writes every day — oil change, brakes, alignment — so advisors can apply them in one click."}</div>}
              {shown.map(j => (
                <button key={j.id} onClick={() => pick(j)} data-svcsetup-job={j.id}
                        style={{ display: "block", width: "100%", textAlign: "left", padding: "8px 10px", border: "none", borderBottom: "1px solid var(--jb-border, #e2e4e8)", cursor: "pointer",
                                 background: selId === j.id ? "var(--jb-blue-tint, #E5EFFA)" : "transparent", fontFamily: "var(--jb-font)", color: "var(--jb-text)" }}>
                  <div style={{ display: "flex", justifyContent: "space-between", gap: 6 }}>
                    <b style={{ fontFamily: "var(--jb-mono)", color: "var(--jb-navy)", fontSize: 12.5 }}>{j.laborOp}</b>
                    <span style={{ fontFamily: "var(--jb-mono)", fontSize: 12 }}>{j.rateMode === "flat" ? money(j.flat) : `${j.estHours}h`}</span>
                  </div>
                  <div style={{ fontSize: 12.5, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{j.desc}</div>
                  <div style={{ fontSize: 11, color: "var(--jb-text-muted)" }}>{j.payType} · {(j.parts || []).length} part(s){j.active === false ? " · inactive" : ""}</div>
                </button>
              ))}
            </div>
          </div>

          <div style={{ border: "1px solid var(--jb-border, #ccd)", borderRadius: 6, background: "var(--jb-surface, #fff)", padding: 12, minWidth: 0, overflow: "auto" }}>
            {!f ? (
              <div style={{ fontSize: 13, color: "var(--jb-text-muted)", padding: 20 }}>
                Pick a standard job to edit{canEdit ? ", or + New to create one" : ""}. Applying a standard job to an RO copies it — changing the RO never changes the template, and changing the template never changes existing ROs.
              </div>
            ) : (
              <fieldset disabled={!canEdit} style={{ border: 0, padding: 0, margin: 0, minWidth: 0 }}>
                <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(170px, 1fr))", gap: 10 }}>
                  <SvcSetupField label="Labor op code"><input data-sj="laborOp" value={f.laborOp} onChange={(e) => set("laborOp", e.target.value.toUpperCase())} placeholder="BRK-PADS-F" style={svcSetupInp} /></SvcSetupField>
                  <SvcSetupField label="Default pay type">
                    <select data-sj="payType" value={f.payType} onChange={(e) => set("payType", e.target.value)} style={svcSetupInp}>{D.SVC_JOB_PAY_TYPES.map(p => <option key={p}>{p}</option>)}</select>
                  </SvcSetupField>
                  <SvcSetupField label="Description" span><input data-sj="desc" value={f.desc} onChange={(e) => set("desc", e.target.value)} placeholder="Front brake pads — replace" style={svcSetupInp} /></SvcSetupField>
                  <SvcSetupField label="Estimated hours"><input data-sj="estHours" value={f.estHours} onChange={(e) => set("estHours", e.target.value.replace(/[^0-9.]/g, ""))} style={svcSetupInp} /></SvcSetupField>
                  <SvcSetupField label="Pricing rule">
                    <select data-sj="rateMode" value={f.rateMode} onChange={(e) => set("rateMode", e.target.value)} style={svcSetupInp}>
                      <option value="rate">Hours × rate</option><option value="flat">Flat price</option>
                    </select>
                  </SvcSetupField>
                  {f.rateMode === "rate" ? (
                    <>
                      <SvcSetupField label="Rate source">
                        <select data-sj="rateSource" value={f.rateSource} onChange={(e) => set("rateSource", e.target.value)} style={svcSetupInp}>
                          <option value="shop">Shop rate for the pay type</option><option value="custom">Custom rate</option>
                        </select>
                      </SvcSetupField>
                      {f.rateSource === "custom"
                        ? <SvcSetupField label="Custom rate $/hr"><input data-sj="rate" value={f.rate} onChange={(e) => set("rate", e.target.value.replace(/[^0-9.]/g, ""))} style={svcSetupInp} /></SvcSetupField>
                        : <SvcSetupField label="Rate used" hint="From Rates tab"><div style={{ ...svcSetupInp, background: "var(--jb-surface-2, #f3f4f6)" }}>{money(rate)}/hr</div></SvcSetupField>}
                    </>
                  ) : (
                    <SvcSetupField label="Flat price $"><input data-sj="flat" value={f.flat} onChange={(e) => set("flat", e.target.value.replace(/[^0-9.]/g, ""))} style={svcSetupInp} /></SvcSetupField>
                  )}
                  <SvcSetupField label="Customer-facing description (prints)" span>
                    <textarea data-sj="custDesc" rows={3} value={f.custDesc} onChange={(e) => set("custDesc", e.target.value)} placeholder="Replaced front brake pads, cleaned and lubricated slides, road tested." style={{ ...svcSetupInp, resize: "vertical" }} />
                  </SvcSetupField>
                  <SvcSetupField label="Internal tech notes (never prints)" span>
                    <textarea data-sj="techNotes" rows={3} value={f.techNotes} onChange={(e) => set("techNotes", e.target.value)} placeholder="Torque specs, measurement checklist…" style={{ ...svcSetupInp, resize: "vertical" }} />
                  </SvcSetupField>
                </div>

                <div style={{ marginTop: 12, border: "1px solid var(--jb-border, #ccd)", borderRadius: 6, overflow: "hidden" }}>
                  <div style={{ display: "flex", alignItems: "center", padding: "6px 10px", background: "var(--jb-surface-2, #f3f4f6)" }}>
                    <span style={{ ...svcSetupLbl, flex: 1 }}>Common parts</span>
                    <button className="k2b-button small" data-sj-addpart="1" onClick={() => set("parts", [...f.parts, { part: "", desc: "", qty: 1, price: "" }])}>+ Part</button>
                  </div>
                  {f.parts.length === 0 && <div style={{ padding: 10, fontSize: 12.5, color: "var(--jb-text-muted)" }}>No parts on this job.</div>}
                  {f.parts.map((p, i) => (
                    <div key={i} style={{ display: "grid", gridTemplateColumns: "minmax(90px,1fr) minmax(120px,2fr) 60px 90px 28px", gap: 6, padding: "6px 10px", borderTop: "1px solid var(--jb-border, #e2e4e8)", alignItems: "center" }}>
                      <input data-sjp={`part-${i}`} value={p.part} placeholder="Part #" onChange={(e) => {
                        const v = e.target.value.toUpperCase(); setPart(i, "part", v);
                        const inv = (D.parts() || []).find(x => x.part === v);
                        if (inv) { setPart(i, "desc", p.desc || inv.desc); if (!p.price) setPart(i, "price", inv.list); }
                      }} style={svcSetupInp} />
                      <input data-sjp={`desc-${i}`} value={p.desc} placeholder="Description" onChange={(e) => setPart(i, "desc", e.target.value)} style={svcSetupInp} />
                      <input data-sjp={`qty-${i}`} value={p.qty} onChange={(e) => setPart(i, "qty", e.target.value.replace(/[^0-9.]/g, ""))} style={{ ...svcSetupInp, textAlign: "right" }} />
                      <input data-sjp={`price-${i}`} value={p.price} placeholder="Price" onChange={(e) => setPart(i, "price", e.target.value.replace(/[^0-9.]/g, ""))} style={{ ...svcSetupInp, textAlign: "right" }} />
                      <button className="k2b-button small" title="Remove" onClick={() => set("parts", f.parts.filter((_, n) => n !== i))}>×</button>
                    </div>
                  ))}
                </div>

                <div style={{ display: "flex", alignItems: "center", gap: 10, marginTop: 12, flexWrap: "wrap" }}>
                  <span style={{ fontSize: 12.5 }}>Default price: labor <b>{money(laborPreview)}</b> + parts <b>{money(partsPreview)}</b> = <b>{money(laborPreview + partsPreview)}</b> (before tax)</span>
                  <label style={{ fontSize: 12.5, display: "flex", alignItems: "center", gap: 4 }}><input type="checkbox" checked={f.active !== false} onChange={(e) => set("active", e.target.checked)} /> Active</label>
                  <div style={{ flex: 1 }} />
                  {canEdit && selId !== "new" && <button className="k2b-button small" onClick={del}>Delete</button>}
                  {canEdit && <button className="k2b-button small" data-sj-save="1" onClick={save} style={{ background: "var(--jb-yellow)", fontWeight: 700 }}>Save standard job</button>}
                </div>
              </fieldset>
            )}
          </div>
        </div>
      )}

      {(tab === "schedule" || tab === "menu" || tab === "sunbit") && window.SvcSetupTab && <window.SvcSetupTab tab={tab} />}{/* RC28 (svc): kept on the server (/api/svc/settings/…) */}
      {SVCSET_TABS.some(([k]) => k === tab) && <SvcSettingsPage key={tab} page={tab} />}{/* RC32 (rset) */}
      {tab === "rates" && (
        <fieldset disabled={!canEdit} style={{ border: 0, padding: 0, margin: 0, minWidth: 0 }}>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(300px, 1fr))", gap: 12 }}>
            <div style={{ border: "1px solid var(--jb-border, #ccd)", borderRadius: 6, background: "var(--jb-surface, #fff)", padding: 12 }}>
              <div style={{ ...svcSetupLbl, marginBottom: 8 }}>Shop labor rates</div>
              {sfv.laborRates.map((r, i) => (
                <div key={r.id || i} style={{ display: "grid", gridTemplateColumns: "1fr 110px", gap: 6, marginBottom: 6 }}>
                  <input value={r.name} onChange={(e) => setS("laborRates", sfv.laborRates.map((x, n) => n === i ? { ...x, name: e.target.value } : x))} style={svcSetupInp} />
                  <input data-svc-rate={r.id} value={r.rate} onChange={(e) => setS("laborRates", sfv.laborRates.map((x, n) => n === i ? { ...x, rate: e.target.value.replace(/[^0-9.]/g, "") } : x))} style={{ ...svcSetupInp, textAlign: "right" }} />
                </div>
              ))}
              <SvcSetupField label="Door / shop rate $/hr" hint="Used when a job is priced hours × shop rate."><input data-svc-set="shopRate" value={sfv.shopRate} onChange={(e) => setS("shopRate", e.target.value.replace(/[^0-9.]/g, ""))} style={svcSetupInp} /></SvcSetupField>
            </div>
            <div style={{ border: "1px solid var(--jb-border, #ccd)", borderRadius: 6, background: "var(--jb-surface, #fff)", padding: 12, display: "flex", flexDirection: "column", gap: 10 }}>
              <div style={svcSetupLbl}>Credit card fee</div>
              <label style={{ display: "flex", alignItems: "center", gap: 6, fontSize: 13 }}>
                <input type="checkbox" data-svc-set="cardFeeOn" checked={!!sfv.cardFeeOn} onChange={(e) => setS("cardFeeOn", e.target.checked)} /> Charge a card fee on repair orders
              </label>
              <SvcSetupField label="Card fee %" hint="Shown to the advisor before the card is taken and printed on the receipt. Posts to card fee income (905E).">
                <input data-svc-set="cardFeePct" value={sfv.cardFeePct} onChange={(e) => setS("cardFeePct", e.target.value.replace(/[^0-9.]/g, ""))} style={svcSetupInp} />
              </SvcSetupField>
              <SvcSetupField label="Recon warning threshold %" hint="Recon screens warn when a unit's recon reaches this % of its budget.">
                <input data-svc-set="reconWarnPct" value={sfv.reconWarnPct} onChange={(e) => setS("reconWarnPct", e.target.value.replace(/[^0-9.]/g, ""))} style={svcSetupInp} />
              </SvcSetupField>
              <SvcSetupField label="Recon labor rate $/hr (optional)" hint="Rate the recon budget uses for internal labor with no price. Blank = internal rate.">
                <input data-svc-set="reconLaborRate" value={sfv.reconLaborRate == null ? "" : sfv.reconLaborRate} onChange={(e) => setS("reconLaborRate", e.target.value.replace(/[^0-9.]/g, ""))} style={svcSetupInp} />
              </SvcSetupField>
            </div>
            <div style={{ border: "1px solid var(--jb-border, #ccd)", borderRadius: 6, background: "var(--jb-surface, #fff)", padding: 12, gridColumn: "1 / -1" }}>
              <SvcSetupField label="Invoice footer (prints on every customer invoice)">
                <textarea data-svc-set="invoiceFooter" rows={4} value={sfv.invoiceFooter} onChange={(e) => setS("invoiceFooter", e.target.value)} style={{ ...svcSetupInp, resize: "vertical" }} />
              </SvcSetupField>
            </div>
          </div>
          <div style={{ display: "flex", gap: 8, marginTop: 10, alignItems: "center" }}>
            <span style={{ fontSize: 12, color: "var(--jb-text-muted)" }}>{s.updatedAt ? `Last saved ${new Date(s.updatedAt).toLocaleString()} by ${s.updatedBy || "—"}` : "Defaults in use."}</span>
            <div style={{ flex: 1 }} />
            {sf && <button className="k2b-button small" onClick={() => setSf(null)}>Discard</button>}
            {canEdit && <button className="k2b-button small" data-svc-set-save="1" onClick={saveSettings} style={{ background: "var(--jb-yellow)", fontWeight: 700 }}>Save settings</button>}
          </div>
        </fieldset>
      )}
      {tab === "rates" && <SvcTaxFlags />}{/* RC32 (rset, M2): today's shared tax flags, office + Service Manager as today */}
      {tab === "rates" && <SvcSettingsPage key="rates" page="rates" />}{/* RC32 (rset): M3 / M4 / M5 (+ M1 shown locked, a later release) */}
    </div>
  );
};

// RC32 (rset, M2): tax on sublet / tax on fees are today's SHARED tax settings (serviceSettings.tax — the server already reads them); one copy
// of the truth, changed by the office or the Service Manager through DMS.fopsSetSharedTax as the gear's tax rate is. The RO fee account is shown.
const SvcTaxFlags = () => {
  const D = window.DMS;
  if (!D || !D.fopsTaxConfig) return null;
  const c = D.fopsTaxConfig() || {}; const may = !!(D.fopsSeesShopCost && D.fopsSeesShopCost());
  const set = (k, v) => { const r = D.fopsSetSharedTax({ [k]: v }); window.k2bToast && window.k2bToast(r.msg, r.ok ? "ok" : "warn", 4000); };
  return (
    <div data-svc-setting="tax.flags" data-svc-setting-ro={may ? undefined : "1"} style={{ border: "1px solid var(--jb-border, #ccd)", borderRadius: 6, background: "var(--jb-surface, #fff)", padding: 10, display: "flex", flexDirection: "column", gap: 6 }}>
      <div style={{ display: "flex", gap: 8, alignItems: "baseline" }}><span style={{ fontFamily: "var(--jb-mono)", fontSize: 11, color: "var(--jb-text-muted)" }}>M2</span><b style={{ fontSize: 13 }}>Tax on sublet / tax on fees, and the fee account</b></div>
      <span style={{ fontSize: 11.5, color: "var(--jb-text-muted)" }}>Today: sublet taxed, fees not (on the server, the same for every station).{!may ? " · Only the office or the Service Manager can change this." : ""}</span>
      <label style={{ display: "flex", gap: 6, alignItems: "center", fontSize: 13 }}><input type="checkbox" data-svc-setting-input="tax.taxSublet" disabled={!may} checked={c.taxSublet !== false} onChange={(e) => set("taxSublet", e.target.checked)} /> Tax customer-pay sublet (outside work)</label>
      <label style={{ display: "flex", gap: 6, alignItems: "center", fontSize: 13 }}><input type="checkbox" data-svc-setting-input="tax.taxFees" disabled={!may} checked={c.taxFees === true} onChange={(e) => set("taxFees", e.target.checked)} /> Tax RO fees</label>
      <span style={{ fontSize: 12 }}>RO fee account: <b style={{ fontFamily: "var(--jb-mono)" }}>{(D.serviceSettings && (D.serviceSettings() || {}).feeAcct) || c.feeAcct || "(not set)"}</b> — used when the shop supplies fee comes (M1, a later release).</span>
    </div>
  );
};

Object.assign(window, { ServiceSetupPanel });