/* 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 — Service Department (front of shop).
// Scheduling, dispatch board, tech productivity, and RO close — all reading
// and writing the shared DMSCore ledger. Closing an RO runs the cascade
// (books labor + parts, relieves parts inventory, flags tech hours, creates
// the receivable/warranty claim, posts the GL).

// RC32 (lane ros): "today" is the STORE's day (the station's local date — never a UTC date, which is tomorrow after 7 pm in Missouri)
const svcIsToday = (v) => {
  if (!v) return false;
  const s = String(v);
  if (/^\d{4}-\d{2}-\d{2}$/.test(s)) return s === apptToday();
  const d = new Date(s); return !isNaN(d) && d.toDateString() === new Date().toDateString();
};
const svcPct = (a, b) => (+b > 0 ? Math.round((+a || 0) / +b * 100) : null);   // NaN guard: no hours available → no %
const svcNum = (v) => (+v || 0);

const ServiceDept = ({ onClose, go }) => {
  const [, force] = React.useReducer(n => n + 1, 0);
  React.useEffect(() => DMS.subscribe(force), []);
  const [tab, setTab]     = React.useState("board");
  const [modal, setModal] = React.useState(null);

  const ros    = DMS.repairOrders();
  const techs  = DMS.technicians();
  const appts  = DMS.appointments();
  const money  = (n) => "$" + Number(n || 0).toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 });
  const act = (r) => window.k2bToast && window.k2bToast(r.msg, r.ok ? "ok" : "warn", 3000);
  // Open an RO in the RO editor (same pointer Service Reports uses).
  const openRO = (r) => { try { localStorage.setItem("jb_ro_focus", r.id); } catch (e) {} window.jbROFocus = r.id; go && go("service"); };
  // Split-pay ROs close from the editor (payments must add up); legacy ROs close here.
  // RC20 (fops): the board's Close is the SAME server command as the editor's (POST /api/ro/close); success only from the committed answer
  const closeOrOpen = async (r) => { const res = await DMS.closeRO(r.id); act(res); if (!res.ok && Array.isArray(r.payments) && res.code === "payments") openRO(r); };
  const roTotal = (r) => { const m = DMS.roMoney ? DMS.roMoney(r) : null; return m ? m.total : (r.laborSale || 0) + (r.partsSale || 0) + (r.tax || 0); };
  const canClose = !!(DMS.fopsCanCloseRO && DMS.fopsCanCloseRO());

  const openROs   = ros.filter(r => r.status === "Open");
  const closedROs = ros.filter(r => r.status === "Closed");
  const techName  = (id) => { const t = techs.find(x => x.id === id); return t ? t.name : "— unassigned —"; };

  // shop capacity
  const totalAvail   = techs.reduce((s, t) => s + svcNum(t.availToday), 0);
  const totalFlagged = techs.reduce((s, t) => s + svcNum(t.flaggedToday), 0);
  // RC32: read-only roles (Technician, Sales, GM) do not get buttons the server refuses them; tech pay rates per T4
  const canSvc = !!(DMS.can && DMS.can("service"));
  const svcCfg = (DMS.svcSettings && DMS.svcSettings()) || {};
  const agedDays = (svcCfg.ro && svcCfg.ro.workflow.agedDays) || 7;
  const seeRates = !(svcCfg.ro && svcCfg.ro.techs.rateViewers === "office+sm") || (DMS.svcCanSetup && DMS.svcCanSetup()) || (DMS._svcRawServiceManager && DMS._svcRawServiceManager());
  const doorRate = svcCfg.shopRate != null ? +svcCfg.shopRate : 145;
  const closedToday = closedROs.filter(r => svcIsToday(r.closed)).length;
  const stepOf = (r) => (typeof roGroupOf === "function" ? roGroupOf(r) : (r.status === "Closed" ? "closed" : "writeup"));
  const stepMeta = (g) => (typeof RO_GROUP_META !== "undefined" && RO_GROUP_META[g]) || { dot: "#9AA3AE", label: g };
  const stepLabel = (g) => (typeof roGroupLabel === "function" ? roGroupLabel(g) : stepMeta(g).label);
  const promiseOf = (r) => (typeof roPromiseText === "function" ? roPromiseText(r) : "");
  const lateOf = (r) => (typeof roPromiseLate === "function" ? roPromiseLate(r) : false);
  // booked today = live appointments for today's date (old appointments without a date count as today)
  const apptTodayStr = apptToday();
  const bookedHours  = appts.filter(a => (a.status === "Scheduled" || a.status === "Checked In") && (!a.date || a.date === apptTodayStr)).reduce((s, a) => s + (+a.estHours || 0), 0);
  // sales features: only service roles book / change appointments (Sales and Sales Manager see the list read-only)
  const canBook = !!(DMS.can && DMS.can("service"));

  const TABS = [
    { k: "board",  label: "Dispatch Board" },
    { k: "appts",  label: `Appointments (${appts.filter(a => a.status === "Scheduled" && (!a.date || a.date >= apptTodayStr)).length})` },
    { k: "open",   label: `Open ROs (${openROs.length})` },
    { k: "techs",  label: "Tech Productivity" },
    ...(window.ImpRoHistory ? [{ k: "oldros", label: "Old ROs" }] : []),   // RC25 (imp): the repair-order history imported from the old system
    ...(window.ServiceReports ? [{ k: "reports", label: "Reports" }] : []),
    // RC28 (svc): the service pack — schedules (every service login, techs too), reminders (advisors / the office), Sunbit to collect (the office
    // and the Service Manager), Setup (+ the Service Manager: the maintenance schedule and the service menu — RC28 fix, svc-aud finding 5)
    ...(window.SvcMaintLookup && (DMS.svcCanLookup ? DMS.svcCanLookup() : (DMS.svcCanPresent && DMS.svcCanPresent())) ? [{ k: "maint", label: "Maintenance schedules" }] : []),
    ...(window.SvcReminders && DMS.svcCanRemind && DMS.svcCanRemind() && DMS.svcCanPresent && DMS.svcCanPresent() ? [{ k: "reminders", label: "Reminders" }] : []),
    ...(window.SvcSunbitCollect && (DMS.svcCanCollect ? DMS.svcCanCollect() : (DMS.svcIsOffice && DMS.svcIsOffice())) ? [{ k: "sunbit", label: "Sunbit to collect" }] : []),
    ...((DMS.svcCanSetup ? DMS.svcCanSetup() : (DMS.isAdmin && DMS.isAdmin())) || (window.SvcSetupTab && DMS.svcPackCanSetup && DMS.svcPackCanSetup()) ? [{ k: "setup", label: "Setup" }] : []),
  ];

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

      {/* KPI strip */}
      <div style={{ display: "flex", gap: 10, padding: "10px 16px", borderBottom: "1px solid var(--jb-border, #C0C0C0)", flexWrap: "wrap" }}>
        <SvcKpi label="Hours Available" value={totalAvail.toFixed(1)} />
        <SvcKpi label="Hours Flagged"   value={totalFlagged.toFixed(1)} tone="ok" />
        <SvcKpi label="Booked Today"    value={bookedHours.toFixed(1)} sub={totalAvail > 0 ? `${Math.round(bookedHours / totalAvail * 100)}% of capacity` : "no tech hours set"} tone={bookedHours > totalAvail ? "red" : "amber"} />
        <SvcKpi label="Open ROs"        value={openROs.length} tone={openROs.some(r => (Date.now() - new Date(r.opened)) / 86400000 >= agedDays) ? "red" : undefined} />
        <SvcKpi label="Closed Today"    value={closedToday} sub="the store's date" />
        <div style={{ flex: 1 }} />
        {canBook && <button id="svc-schedule" className="k2b-button small" onClick={() => setModal({ type: "newAppt" })} style={{ background: "var(--jb-yellow, #FFE9B0)", fontWeight: 700 }}>+ Schedule</button>}
        <K2BButton small onClick={() => go && go("service")}>Open RO Editor</K2BButton>
      </div>

      {/* Tabs */}
      <div style={{ display: "flex", gap: 4, padding: "8px 16px 0", borderBottom: "1px solid var(--jb-border, #C0C0C0)", flexWrap: "wrap" }}>
        {TABS.map(t => (
          <button key={t.k} className="k2b-button small" onClick={() => setTab(t.k)}
                  style={{ background: tab === t.k ? "var(--jb-navy, #1B66A8)" : undefined,
                           color: tab === t.k ? "#FFF" : undefined, fontWeight: tab === t.k ? 700 : 500 }}>
            {t.label}
          </button>
        ))}
      </div>

      <div style={{ flex: 1, overflow: "auto", padding: "12px 16px" }}>

        {/* ── DISPATCH BOARD ── */}
        {tab === "board" && (
          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(280px, 1fr))", gap: 12 }}>
            {techs.map(t => {
              const jobs = openROs.filter(r => r.techId === t.id);
              const prod = svcPct(t.flaggedToday, t.availToday);
              return (
                <div key={t.id} style={{ background: "#FFF", border: "1px solid var(--jb-border, #C0C0C0)", borderRadius: 8, overflow: "hidden" }}>
                  <div style={{ padding: "8px 12px", background: "var(--jb-navy, #11337A)", color: "#FFF", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                    <div>
                      <div style={{ fontWeight: 700, fontSize: 13 }}>{t.name}</div>
                      <div style={{ fontSize: 10, color: "#C8D0E4" }}>{t.skill}</div>
                    </div>
                    <div style={{ textAlign: "right" }}>
                      <div style={{ fontSize: 16, fontWeight: 700, color: prod == null ? "#C8D0E4" : prod >= 100 ? "#7CE2A0" : prod >= 80 ? "#F4D27A" : "#F4A09A" }}>{prod == null ? "—" : prod + "%"}</div>
                      <div style={{ fontSize: 9, color: "#C8D0E4" }}>{svcNum(t.flaggedToday)}h / {svcNum(t.availToday)}h</div>
                    </div>
                  </div>
                  <div style={{ padding: "8px 10px", display: "flex", flexDirection: "column", gap: 6, minHeight: 70 }}>
                    {jobs.length === 0 && <div style={{ fontSize: 11, color: "#999", fontStyle: "italic" }}>No active jobs — available</div>}
                    {jobs.map(r => {
                      const days = Math.floor((Date.now() - new Date(r.opened)) / 86400000);
                      const g = stepOf(r), pr = promiseOf(r), late = lateOf(r);
                      return (
                        <div key={r.id} style={{ background: "var(--jb-surface-2, #F0F0F0)", borderRadius: 5, padding: "6px 8px",
                                                  borderLeft: "3px solid " + (days >= agedDays ? "#C03546" : r.payType === "Warranty" ? "#B26A00" : r.payType === "Internal" ? "#8050B0" : "#1B66A8") }}>
                          <div style={{ display: "flex", justifyContent: "space-between" }}>
                            <span style={{ fontWeight: 700, fontSize: 12, fontFamily: "'Courier Prime', monospace" }}>{r.id}</span>
                            <span style={{ fontSize: 10, color: days >= agedDays ? "#C03546" : "#666" }}>{days}d{days >= agedDays ? " AGED" : ""}</span>
                          </div>
                          <div style={{ fontSize: 11, color: "var(--jb-navy)" }}>{r.customer}</div>
                          <div data-board-step={r.id} style={{ display: "flex", gap: 5, alignItems: "center", fontSize: 11, color: late ? "#C03546" : "#555" }}>
                            <span style={{ width: 7, height: 7, borderRadius: 99, background: stepMeta(g).dot }} />{stepLabel(g)}{pr ? <span style={{ fontWeight: late ? 700 : 400 }}> · ⏰ {pr}{late ? " late" : ""}</span> : null}
                          </div>
                          <div style={{ fontSize: 10, color: "#666" }}>{r.payType} · {r.flagHours || 0}h flagged · <span data-board-total={r.id}>{money(roTotal(r))}</span></div>
                          <div style={{ display: "flex", gap: 4, marginTop: 4 }}>
                            {canSvc && <button className="k2b-button small" onClick={() => setModal({ type: "flag", ro: r })} style={{ fontSize: 10, padding: "1px 6px" }}>Flag Hrs</button>}
                            <button className="k2b-button small" onClick={() => openRO(r)} style={{ fontSize: 10, padding: "1px 6px" }}>Open</button>
                            {canClose && <button className="k2b-button small" onClick={() => closeOrOpen(r)} style={{ fontSize: 10, padding: "1px 6px", background: "var(--jb-yellow)", fontWeight: 700 }}>Close</button>}
                          </div>
                        </div>
                      );
                    })}
                  </div>
                </div>
              );
            })}
            {/* Unassigned column */}
            {openROs.filter(r => !techs.find(t => t.id === r.techId)).length > 0 && (
              <div style={{ background: "#FFF", border: "1px dashed #C03546", borderRadius: 8, overflow: "hidden" }}>
                <div style={{ padding: "8px 12px", background: "#C03546", color: "#FFF", fontWeight: 700, fontSize: 13 }}>Unassigned</div>
                <div style={{ padding: "8px 10px", display: "flex", flexDirection: "column", gap: 6 }}>
                  {openROs.filter(r => !techs.find(t => t.id === r.techId)).map(r => (
                    <div key={r.id} style={{ background: "var(--jb-surface-2)", borderRadius: 5, padding: "6px 8px" }}>
                      <div style={{ fontWeight: 700, fontSize: 12, fontFamily: "'Courier Prime', monospace" }}>{r.id} · {r.customer}</div>
                      {canSvc ? (
                        <select onChange={(e) => e.target.value && act(DMS.assignTechToRO(r.id, e.target.value))} defaultValue=""
                                style={{ marginTop: 4, fontSize: 11, ...svcInp }}>
                          <option value="">Dispatch to…</option>
                          {techs.map(t => <option key={t.id} value={t.id}>{t.name}</option>)}
                        </select>
                      ) : <div style={{ fontSize: 11, color: "#666", marginTop: 2 }}>waiting for a technician</div>}
                    </div>
                  ))}
                </div>
              </div>
            )}
          </div>
        )}

        {/* ── APPOINTMENTS (grouped by dealer date; service roles can check in / reschedule / cancel) ── */}
        {tab === "appts" && <ApptList appts={appts} techs={techs} act={act} canEdit={canBook}
                                      onReschedule={(a) => setModal({ type: "editAppt", appt: a })} onCancel={(a) => setModal({ type: "cancelAppt", appt: a })} />}

        {/* ── OPEN ROs ── */}
        {tab === "open" && (
          <table style={svcTable}>
            <thead>
              <tr style={svcHeadRow}>
                <th style={sTh}>RO #</th><th style={sThL}>Customer / Vehicle</th><th style={sThL}>Step</th><th style={sThL}>Tech</th>
                <th style={sTh}>Pay Type</th><th style={sThR}>Flag Hrs</th><th style={sThR}>Labor</th><th style={sThR}>Parts</th><th style={sThR}>Total</th>
                <th style={sThR}>Open</th><th style={sThC}>Action</th>
              </tr>
            </thead>
            <tbody>
              {openROs.length === 0 && <tr><td colSpan={11} style={{ padding: 14, textAlign: "center", color: "var(--k2b-green)" }}>No open repair orders. ✓</td></tr>}
              {openROs.map(r => {
                const days = Math.floor((Date.now() - new Date(r.opened)) / 86400000);
                return (
                  <tr key={r.id} style={{ borderBottom: "1px dotted #DDD" }}>
                    <td style={sTdMono}>{r.id}</td>
                    <td style={sTd}>{r.customer}<br/><span style={{ fontSize: 10, color: "#666" }}>{r.vehicle}</span></td>
                    <td style={sTd} data-open-step={r.id}><span style={{ display: "inline-flex", gap: 5, alignItems: "center", whiteSpace: "nowrap" }}><span style={{ width: 7, height: 7, borderRadius: 99, background: stepMeta(stepOf(r)).dot }} />{stepLabel(stepOf(r))}</span>{promiseOf(r) ? <><br/><span style={{ fontSize: 10, color: lateOf(r) ? "#C03546" : "#666", fontWeight: lateOf(r) ? 700 : 400 }}>⏰ {promiseOf(r)}{lateOf(r) ? " late" : ""}</span></> : null}</td>
                    <td style={sTd}>{r.tech || "—"}</td>
                    <td style={sTd}><span style={{ fontWeight: 700, fontSize: 11, color: r.payType === "Warranty" ? "#B26A00" : r.payType === "Internal" ? "#8050B0" : "var(--k2b-navy)" }}>{r.payType}</span></td>
                    <td style={sTdR}>{r.flagHours || 0}</td>
                    <td style={sTdR}>{money(r.laborSale)}</td>
                    <td style={sTdR}>{money(r.partsSale)}</td>
                    <td style={{ ...sTdR, fontWeight: 700 }} data-open-total={r.id}>{money(roTotal(r))}</td>
                    <td style={{ ...sTdR, color: days >= agedDays ? "#C03546" : "#666", fontWeight: days >= agedDays ? 700 : 400 }}>{days}d</td>
                    <td style={sTdC}>
                      <div style={{ display: "flex", gap: 4, justifyContent: "center" }}>
                        {canSvc && <button className="k2b-button small" onClick={() => setModal({ type: "flag", ro: r })}>Flag</button>}
                        {r.vin && <CarfaxButton small vin={r.vin} ctx={r.vehicle} />}
                        <button className="k2b-button small" onClick={() => openRO(r)}>Open</button>
                        {canClose && <button className="k2b-button small" style={{ background: "var(--jb-yellow)", fontWeight: 700 }} onClick={() => closeOrOpen(r)}>Close RO</button>}
                      </div>
                    </td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        )}

        {/* ── OLD ROs (RC25 imp): the imported repair-order history, looked up on the server ── */}
        {tab === "oldros" && window.ImpRoHistory && <window.ImpRoHistory embedded go={go} />}

        {/* ── REPORTS (ServiceReports builder) ── */}
        {tab === "reports" && window.ServiceReports && <window.ServiceReports go={go} />}
        {tab === "maint" && window.SvcMaintLookup && <div style={{ padding: 14 }}><window.SvcMaintLookup /></div>}{/* RC28 (svc) */}
        {tab === "reminders" && window.SvcReminders && <div style={{ padding: 14 }}><window.SvcReminders /></div>}
        {tab === "sunbit" && window.SvcSunbitCollect && <div style={{ padding: 14 }}><window.SvcSunbitCollect /></div>}

        {/* ── SETUP: standard jobs, labor rates, card fee, recon %, invoice footer ── */}
        {tab === "setup" && window.ServiceSetupPanel && <window.ServiceSetupPanel embedded go={go} />}

        {/* ── TECH PRODUCTIVITY ── */}
        {tab === "techs" && (
          <>
            <div style={{ fontSize: 12, color: "#666", marginBottom: 8 }}>
              <b>Productivity</b> = flagged ÷ available (today). <b>Efficiency</b> = flagged ÷ clock (MTD). Door rate {money(doorRate)}/hr <span style={{ color: "#888" }}>(Service Dept › Setup › Rates)</span>.
            </div>
            <table style={svcTable}>
              <thead>
                <tr style={svcHeadRow}>
                  <th style={sTh}>Tech</th><th style={sThL}>Skill</th>{seeRates && <th style={sThR}>Rate</th>}
                  <th style={sThR}>Avail Today</th><th style={sThR}>Flagged Today</th><th style={sThR}>Productivity</th>
                  <th style={sThR}>Flagged MTD</th><th style={sThR}>Clock MTD</th><th style={sThR}>Efficiency</th>
                </tr>
              </thead>
              <tbody>
                {techs.map(t => {
                  const prod = svcPct(t.flaggedToday, t.availToday);
                  const eff = svcPct(t.flaggedMTD, t.clockMTD);
                  return (
                    <tr key={t.id} style={{ borderBottom: "1px dotted #DDD" }}>
                      <td style={sTdMono}>{t.name}</td>
                      <td style={sTd}>{t.skill}</td>
                      {seeRates && <td style={sTdR}>{money(t.rate)}</td>}
                      <td style={sTdR}>{svcNum(t.availToday).toFixed(1)}</td>
                      <td style={sTdR}>{svcNum(t.flaggedToday).toFixed(1)}</td>
                      <td style={{ ...sTdR, fontWeight: 700, color: prod == null ? "#888" : prod >= 100 ? "var(--k2b-green)" : prod >= 80 ? "#B26A00" : "#C03546" }}>{prod == null ? "—" : prod + "%"}</td>
                      <td style={sTdR}>{svcNum(t.flaggedMTD).toFixed(1)}</td>
                      <td style={sTdR}>{svcNum(t.clockMTD).toFixed(1)}</td>
                      <td style={{ ...sTdR, fontWeight: 700, color: eff == null ? "#888" : eff >= 100 ? "var(--k2b-green)" : eff >= 85 ? "#B26A00" : "#C03546" }}>{eff == null ? "—" : eff + "%"}</td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </>
        )}
      </div>

      {/* Footer */}
      <div style={{ borderTop: "1px solid var(--jb-border, #C0C0C0)", padding: "8px 16px", display: "flex", gap: 6, flexWrap: "wrap" }}>
        <K2BButton small onClick={onClose}>ESC-Close</K2BButton>
        {canBook && <K2BButton small onClick={() => setModal({ type: "newAppt" })}>F2-Schedule</K2BButton>}
        <K2BButton small onClick={() => go && go("service")}>F3-RO Editor</K2BButton>
        <K2BButton small onClick={() => go && go("partsdept")}>F4-Parts Dept</K2BButton>
        <K2BButton small onClick={() => go && go("accounting")}>F6-Accounting</K2BButton>
      </div>

      {modal && modal.type === "flag"    && <FlagHoursDialog ro={modal.ro} onClose={() => setModal(null)} act={act} />}
      {modal && modal.type === "newAppt" && canBook && <ApptDialog techs={techs} onClose={() => setModal(null)} act={act} />}
      {modal && modal.type === "editAppt" && canBook && <ApptDialog techs={techs} appt={modal.appt} onClose={() => setModal(null)} act={act} />}
      {modal && modal.type === "cancelAppt" && canBook && <ApptCancelDialog appt={modal.appt} onClose={() => setModal(null)} act={act} />}
    </div>
  );
};

const FlagHoursDialog = ({ ro, onClose, act }) => {
  const [h, setH] = React.useState(() => { try { const c = DMS.svcSettings(); return (+(c.ro && c.ro.lists.flagStart != null ? c.ro.lists.flagStart : 1)).toFixed(1); } catch (e) { return "1.0"; } });   // L8
  return (
    <K2BModal title={`Flag Hours — ${ro.id}`} onClose={onClose}
              buttons={<>
                <K2BButton onClick={onClose}>Cancel</K2BButton>
                <K2BButton style={{ background: "var(--jb-yellow)", fontWeight: 700 }}
                           onClick={() => { act(DMS.flagHoursOnRO(ro.id, parseFloat(h) || 0)); onClose(); }}>Flag Hours</K2BButton>
              </>}>
      <div style={{ fontSize: 13, lineHeight: 1.8 }}>
        <div><b>{ro.customer}</b> · {ro.tech || "unassigned"}</div>
        <div style={{ color: "#666", fontSize: 12 }}>Currently flagged: {ro.flagHours || 0}h</div>
        <div style={{ marginTop: 10, display: "flex", gap: 8, alignItems: "center" }}>
          <span>Add hours:</span>
          <input value={h} onChange={(e) => setH(e.target.value.replace(/[^0-9.]/g, ""))}
                 autoComplete="off" name="k2b-flag-hours" style={{ width: 80, ...svcInp }} />
        </div>
      </div>
    </K2BModal>
  );
};

// ── Appointments (sales features, lane 2) ───────────────────────────────────
// Every new appointment carries a date, the customer (picked from the customer file, like the RO
// editor's search) and the vehicle (VIN), plus a service type — so the salesperson who sold the car
// gets an alert in the DMS when it is booked, and again (same alert) when it is checked in.
const apptPad = (n) => String(n).padStart(2, "0");
// today's dealer date as YYYY-MM-DD (the store's PCs run on dealer time)
const apptToday = (plusDays) => { const d = new Date(); if (plusDays) d.setDate(d.getDate() + plusDays); return d.getFullYear() + "-" + apptPad(d.getMonth() + 1) + "-" + apptPad(d.getDate()); };
// "2026-10-12" -> "Mon Oct 12" from the parts (never new Date("YYYY-MM-DD"), which is the day before in Missouri)
const apptFmtDay = (day) => {
  const m = /^(\d{4})-(\d{2})-(\d{2})$/.exec(String(day || ""));
  if (!m) return "";
  return new Date(Date.UTC(+m[1], +m[2] - 1, +m[3])).toLocaleDateString("en-US", { timeZone: "UTC", weekday: "short", month: "short", day: "numeric" }).replace(/,/g, "");
};
const apptFmtTime = (hhmm) => { const m = /^(\d{1,2}):(\d{2})/.exec(String(hhmm || "")); if (!m) return hhmm || ""; const h = +m[1]; return ((h % 12) || 12) + ":" + m[2] + (h < 12 ? " AM" : " PM"); };
// RC32 (lane ros): the store's lists — appointment types (L10), advisors from the user list (L1), transport (R7); missing = today's
const apptSvcCfg = () => { try { return DMS.svcSettings ? DMS.svcSettings() : null; } catch (e) { return null; } };
const apptTypes = () => { const c = apptSvcCfg(); const l = c && c.ro && c.ro.lists.apptTypes; return (Array.isArray(l) && l.length ? l : null) || DMS.SVC_APPT_TYPES || ["Oil change", "Maintenance", "Tires & alignment", "Brakes", "Battery", "Inspection", "Diagnosis", "Warranty / recall", "Repair", "Other"]; };
const apptAdvisors = () => { try { if (DMS.svcAdvisors) { const a = DMS.svcAdvisors({}); if (a && a.names && a.names.length) return [a.pick].concat(a.names.filter(n => n !== a.pick)); } } catch (e) {} return (typeof SVC_ADVISORS !== "undefined" && Array.isArray(SVC_ADVISORS) ? SVC_ADVISORS : ["Mark Service"]); };
const apptTransports = (cur) => { const c = apptSvcCfg(); const l = (c && c.ro && Array.isArray(c.ro.lists.transport) && c.ro.lists.transport.length ? c.ro.lists.transport : ["Drop-off", "Waiter", "Loaner", "Shuttle"]); return cur && !l.includes(cur) ? l.concat([cur]) : l; };
const apptVehLabel = (v) => [v.yr, v.mk, v.mdl].filter(Boolean).join(" ") || v.label || "";

const ApptDialog = ({ techs, appt, onClose, act }) => {
  const editing = !!appt;
  const [f, setF] = React.useState(() => ({
    date: (appt && appt.date) || apptToday(), time: (appt && appt.time) || "08:00",
    serviceType: (appt && appt.serviceType) || "", concern: (appt && appt.concern) || "",
    advisor: (appt && appt.advisor) || apptAdvisors()[0], techId: (appt && appt.techId) || "",
    estHours: String((appt && appt.estHours) || "1.0"), transport: (appt && appt.transport) || "Drop-off",
  }));
  const set = (k, v) => setF(s => ({ ...s, [k]: v }));
  const [q, setQ] = React.useState("");
  const [pick, setPick] = React.useState(null);            // {custNum, name, phone, email, city, vehicles}
  const [walkIn, setWalkIn] = React.useState(false);
  const [walkName, setWalkName] = React.useState("");
  const [vehSel, setVehSel] = React.useState("__other");
  const [vin, setVin] = React.useState("");
  const [vehDesc, setVehDesc] = React.useState("");
  const [msg, setMsg] = React.useState("");
  // "Other vehicle": a 17-character VIN typed / pasted here fills the vehicle description ("2022 CHEVROLET SILVERADO 1500") from our server
  // (window.DMS.vin: MarketCheck -> NHTSA -> the VIN itself) when the description is still blank. A typed description stays; Undo puts it back.
  const descTyped = React.useRef(new Set());
  const vinFill = (typeof VlUseVinFill === "function") ? VlUseVinFill({
    vin, enabled: !editing && vehSel === "__other", keys: { vehDesc: "ymm" },
    read: () => ({ vehDesc }), write: (p) => { if (p.vehDesc !== undefined) setVehDesc(p.vehDesc); }, typed: () => descTyped.current,
  }) : null;
  const rows = React.useMemo(() => (q.trim().length >= 2 && DMS.customerSearch ? DMS.customerSearch(q).slice(0, 30) : []), [q]);
  const choose = (c) => { setPick(c); setWalkIn(false); setVehSel(c.vehicles && c.vehicles.length ? "0" : "__other"); setVin(""); setVehDesc(""); descTyped.current = new Set(); setMsg(""); };

  const save = () => {
    if (!/^\d{4}-\d{2}-\d{2}$/.test(f.date)) { setMsg("Pick a date."); return; }
    if (!f.serviceType) { setMsg("Pick a service type."); return; }
    if (editing) {
      const r = DMS.updateAppointment(appt.id, { date: f.date, time: f.time || "08:00", serviceType: f.serviceType, concern: f.concern, advisor: f.advisor, techId: f.techId, estHours: f.estHours, transport: f.transport });
      if (!r.ok) { setMsg(r.msg); return; }
      act(r); onClose(); return;
    }
    let cust = null, customer = "";
    if (pick) { cust = { custNum: pick.custNum, name: pick.name, phone: pick.phone || "", email: pick.email || "" }; customer = pick.name; }
    else if (walkIn && walkName.trim()) customer = walkName.trim().toUpperCase();
    else { setMsg("Pick the customer, or tick walk-in and type a name."); return; }
    let veh = null, vehicleText = "";
    if (pick && vehSel !== "__other" && pick.vehicles[+vehSel]) {
      const v = pick.vehicles[+vehSel];
      veh = { vin: v.vin || "", yr: v.yr || "", mk: v.mk || "", mdl: v.mdl || "", miles: v.miles || "" };
      vehicleText = apptVehLabel(v);
    } else if (vin.trim() || vehDesc.trim()) {
      const desc = vehDesc.trim().toUpperCase();
      const m = desc.match(/^(\d{4})\s+(\S+)\s*(.*)$/);
      veh = { vin: vin.trim().toUpperCase().replace(/[\s-]/g, ""), yr: m ? m[1] : "", mk: m ? m[2] : "", mdl: m ? m[3] : desc, miles: "" };
      vehicleText = desc;
    }
    const r = DMS.addAppointment({ date: f.date, time: f.time || "08:00", custNum: cust ? cust.custNum : "", cust, customer,
      veh, vin: veh ? veh.vin : "", vehicle: vehicleText,
      serviceType: f.serviceType, concern: f.concern, advisor: f.advisor, techId: f.techId, estHours: f.estHours, transport: f.transport });
    if (!r.ok) { setMsg(r.msg); return; }
    act(r); onClose();
  };
  const lbl = { fontSize: 11, fontWeight: 700, color: "#555" };
  return (
    <K2BModal title={editing ? "Change Appointment" : "Schedule Appointment"} onClose={onClose} width={640}
              buttons={<>
                <K2BButton onClick={onClose}>Cancel</K2BButton>
                <button id="appt-save" className="k2b-button" style={{ background: "var(--jb-yellow)", fontWeight: 700 }} onClick={save}>{editing ? "Save" : "Schedule"}</button>
              </>}>
      <div id="appt-dialog" data-mode={editing ? "edit" : "new"} style={{ display: "flex", flexDirection: "column", gap: 10, fontSize: 13 }}>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1.4fr", gap: 10 }}>
          <label style={{ display: "flex", flexDirection: "column", gap: 3 }}><span style={lbl}>Date *</span>
            <input id="appt-date" type="date" value={f.date} min={editing ? undefined : apptToday(-1)} onChange={(e) => set("date", e.target.value)} style={svcInp} /></label>
          <label style={{ display: "flex", flexDirection: "column", gap: 3 }}><span style={lbl}>Time</span>
            <input id="appt-time" type="time" value={f.time} onChange={(e) => set("time", e.target.value)} style={svcInp} /></label>
          <label style={{ display: "flex", flexDirection: "column", gap: 3 }}><span style={lbl}>Service type *</span>
            <select id="appt-type" value={f.serviceType} onChange={(e) => set("serviceType", e.target.value)} style={svcInp}>
              <option value="">Pick…</option>
              {apptTypes().map(t => <option key={t} value={t}>{t}</option>)}
            </select></label>
        </div>
        {editing ? (
          <div style={{ padding: "6px 10px", background: "#F3F6FA", borderRadius: 5 }}>
            <b>{appt.customer || appt.custNum || "—"}</b>{appt.vehicle ? " · " + appt.vehicle : ""}{appt.vin ? <span style={{ fontFamily: "var(--jb-mono)" }}> · {appt.vin}</span> : null}
          </div>
        ) : (
          <div>
            <span style={lbl}>Customer * — name, phone, email or customer #</span>
            {pick ? (
              <div id="appt-cust-picked" data-custnum={pick.custNum} style={{ display: "flex", gap: 8, alignItems: "center", padding: "6px 8px", border: "1px solid var(--jb-border)", borderRadius: 5, background: "#F7F9FC", marginTop: 3 }}>
                <b>{pick.name}</b><span style={{ fontFamily: "var(--jb-mono)" }}>{pick.phone}</span><span style={{ color: "#777" }}>{pick.city}</span>
                <div style={{ flex: 1 }} />
                <a style={{ cursor: "pointer", color: "var(--jb-blue)", fontWeight: 700 }} onClick={() => { setPick(null); setQ(""); }}>change</a>
              </div>
            ) : (
              <>
                <input id="appt-cust-search" value={q} disabled={walkIn} onChange={(e) => { setQ(e.target.value); setMsg(""); }} placeholder="e.g. SMITH · 573-555-0101 · 5735550101" style={{ ...svcInp, marginTop: 3 }} />
                {!walkIn && q.trim().length >= 2 && (
                  <div style={{ border: "1px solid #C0C0C0", borderTop: 0, maxHeight: 170, overflow: "auto", background: "#FFF" }}>
                    {rows.length === 0 && <div style={{ padding: 8, fontSize: 12, color: "#777" }}>No customer matches. Tick walk-in below, or add the customer in the CRM first.</div>}
                    {rows.map(c => (
                      <div key={c.custNum} className="appt-cust-option" data-custnum={c.custNum} onClick={() => choose(c)}
                           style={{ display: "flex", gap: 10, padding: "6px 8px", cursor: "pointer", borderBottom: "1px solid #EEE", fontSize: 12.5 }}>
                        <b style={{ minWidth: 150 }}>{c.name}</b><span style={{ fontFamily: "var(--jb-mono)" }}>{c.phone}</span><span style={{ color: "#777", flex: 1 }}>{c.city}</span>
                        <span style={{ color: "#777" }}>{c.vehicles.length} veh</span>
                      </div>
                    ))}
                  </div>
                )}
                <label style={{ display: "flex", gap: 6, alignItems: "center", marginTop: 6, fontSize: 12.5 }}>
                  <input id="appt-walkin" type="checkbox" checked={walkIn} onChange={(e) => { setWalkIn(e.target.checked); setMsg(""); }} /> Walk-in / not in the customer file
                </label>
                {walkIn && <input id="appt-walkin-name" value={walkName} onChange={(e) => setWalkName(e.target.value)} placeholder="LAST, FIRST" style={{ ...svcInp, marginTop: 4 }} />}
              </>
            )}
          </div>
        )}
        {!editing && (pick || walkIn) && (
          <div>
            <span style={lbl}>Vehicle</span>
            <select id="appt-vehicle" value={vehSel} onChange={(e) => setVehSel(e.target.value)} style={{ ...svcInp, marginTop: 3 }}>
              {pick && pick.vehicles.map((v, i) => <option key={i} value={String(i)}>{apptVehLabel(v) || "Vehicle"}{v.vin ? " · " + v.vin : ""}</option>)}
              <option value="__other">Other vehicle</option>
            </select>
            {vehSel === "__other" && (
              <>
                <div style={{ display: "grid", gridTemplateColumns: "1.3fr 1fr", gap: 8, marginTop: 6 }}>
                  <input id="appt-vin" value={vin} onChange={(e) => setVin(e.target.value.toUpperCase())} onBlur={() => vinFill && vinFill.onBlur()} placeholder="VIN (if known)" spellCheck={false} style={{ ...svcInp, fontFamily: "var(--jb-mono)" }} />
                  <input id="appt-veh-desc" value={vehDesc} onChange={(e) => { descTyped.current.add("vehDesc"); setVehDesc(e.target.value); }} placeholder="2020 CHEVROLET MALIBU" style={svcInp} />
                </div>
                {vinFill && typeof VlVinNote === "function" && <VlVinNote fill={vinFill} id="appt-vin-note" />}
              </>
            )}
          </div>
        )}
        <label style={{ display: "flex", flexDirection: "column", gap: 3 }}><span style={lbl}>Concern</span>
          <input id="appt-concern" value={f.concern} onChange={(e) => set("concern", e.target.value)} placeholder="Customer states…" style={svcInp} /></label>
        <div style={{ display: "grid", gridTemplateColumns: "1.2fr 1.2fr 0.6fr 1fr", gap: 8 }}>
          <label style={{ display: "flex", flexDirection: "column", gap: 3 }}><span style={lbl}>Advisor</span>
            <select id="appt-advisor" value={f.advisor} onChange={(e) => set("advisor", e.target.value)} style={svcInp}>
              {apptAdvisors().concat(apptAdvisors().includes(f.advisor) ? [] : [f.advisor]).map(a => <option key={a} value={a}>{a}</option>)}
            </select></label>
          <label style={{ display: "flex", flexDirection: "column", gap: 3 }}><span style={lbl}>Tech</span>
            <select id="appt-tech" value={f.techId} onChange={(e) => set("techId", e.target.value)} style={svcInp}>
              <option value="">— assign later —</option>
              {techs.map(t => <option key={t.id} value={t.id}>{t.name}{t.skill ? " (" + t.skill + ")" : ""}</option>)}
            </select></label>
          <label style={{ display: "flex", flexDirection: "column", gap: 3 }}><span style={lbl}>Est hrs</span>
            <input id="appt-hours" value={f.estHours} onChange={(e) => set("estHours", e.target.value.replace(/[^0-9.]/g, ""))} style={svcInp} /></label>
          <label style={{ display: "flex", flexDirection: "column", gap: 3 }}><span style={lbl}>Transport</span>
            <select id="appt-transport" value={f.transport} onChange={(e) => set("transport", e.target.value)} style={svcInp}>
              {apptTransports(f.transport).map(t => <option key={t}>{t}</option>)}
            </select></label>
        </div>
        {msg && <div id="appt-msg" style={{ color: "#B23A2E", fontWeight: 700, fontSize: 12.5 }}>{msg}</div>}
      </div>
    </K2BModal>
  );
};

const ApptCancelDialog = ({ appt, onClose, act }) => {
  const [reason, setReason] = React.useState("");
  return (
    <K2BModal title="Cancel Appointment" onClose={onClose} width={460}
              buttons={<>
                <K2BButton onClick={onClose}>Keep it</K2BButton>
                <button id="appt-cancel-save" className="k2b-button" style={{ background: "#FBE9E7", fontWeight: 700 }}
                        onClick={() => { const r = DMS.cancelAppointment(appt.id, reason); act(r); if (r.ok) onClose(); }}>Cancel appointment</button>
              </>}>
      <div style={{ fontSize: 13, display: "flex", flexDirection: "column", gap: 8 }}>
        <div><b>{appt.customer}</b> · {appt.serviceType || "Service"} · {apptFmtDay(appt.date)} {apptFmtTime(appt.time)}</div>
        <input id="appt-cancel-reason" value={reason} onChange={(e) => setReason(e.target.value)} placeholder="Why? (optional — e.g. customer called, rebooking)" style={svcInp} />
      </div>
    </K2BModal>
  );
};

const ApptList = ({ appts, techs, act, canEdit, onReschedule, onCancel }) => {
  const today = apptToday(), tomorrow = apptToday(1);
  const dated = appts.filter(a => a && /^\d{4}-\d{2}-\d{2}$/.test(String(a.date || "")));
  const noDate = appts.filter(a => a && !/^\d{4}-\d{2}-\d{2}$/.test(String(a.date || "")));
  const byWhen = (a, b) => String(a.date).localeCompare(String(b.date)) || String(a.time || "").localeCompare(String(b.time || ""));
  const groups = [
    ["today", "Today — " + apptFmtDay(today), dated.filter(a => a.date === today).sort(byWhen)],
    ["tomorrow", "Tomorrow — " + apptFmtDay(tomorrow), dated.filter(a => a.date === tomorrow).sort(byWhen)],
    ["later", "Later", dated.filter(a => a.date > tomorrow).sort(byWhen)],
    ["past", "Past", dated.filter(a => a.date < today).sort(byWhen).reverse()],
  ];
  const tone = (st) => st === "Checked In" ? "var(--k2b-green)" : st === "Cancelled" ? "#8a8f98" : st === "Done" ? "#0E7A37" : "#B26A00";
  const techName = (id) => { const t = techs.find(x => x.id === id); return t ? t.name : "—"; };
  const row = (a) => {
    const live = a.status !== "Checked In" && a.status !== "Cancelled" && a.status !== "Done";
    return (
      <tr key={a.id} className="appt-row" data-appt-id={a.id} data-date={a.date || ""} data-status={a.status || ""} style={{ borderBottom: "1px dotted #DDD", opacity: a.status === "Cancelled" ? 0.6 : 1 }}>
        <td style={sTdMono}>{a.date ? apptFmtDay(a.date) : "—"}<br/><span style={{ fontWeight: 400 }}>{apptFmtTime(a.time)}</span></td>
        <td style={sTd}><span className="appt-type" style={{ fontWeight: 700 }}>{a.serviceType || "—"}</span></td>
        <td style={sTd}>{a.customer}{a.custNum ? <span style={{ fontSize: 10, color: "#666" }}> #{a.custNum}</span> : a.date ? <span style={{ fontSize: 10, color: "#9A6700" }}> walk-in</span> : null}<br/>
          <span style={{ fontSize: 10, color: "#666" }}>{a.vehicle}{a.vin ? " · " + a.vin : ""}</span></td>
        <td style={sTd}>{a.concern}</td>
        <td style={sTd}>
          {canEdit && live ? (
            <select value={a.techId || ""} onChange={(e) => act(DMS.assignTechToAppt(a.id, e.target.value))} style={{ ...svcInp, fontSize: 11, width: "auto", minWidth: 120 }}>
              <option value="">— unassigned —</option>
              {techs.map(t => <option key={t.id} value={t.id}>{t.name}</option>)}
            </select>
          ) : techName(a.techId)}
        </td>
        <td style={sTdR}>{(+a.estHours || 0).toFixed(1)}</td>
        <td style={sTd}>{a.transport}</td>
        <td style={sTd}><span style={{ fontWeight: 700, fontSize: 11, color: tone(a.status) }}>{a.status}</span></td>
        <td style={sTdC}>
          {a.roId ? <span style={{ fontSize: 11, color: "var(--k2b-green)", fontFamily: "'Courier Prime', monospace" }}>{a.roId}</span> : null}
          {canEdit && live && (
            <div style={{ display: "flex", gap: 4, justifyContent: "center", flexWrap: "wrap" }}>
              {a.date ? <button className="k2b-button small" data-act="checkin" style={{ background: "var(--jb-yellow)", fontWeight: 700 }} onClick={() => act(DMS.checkInAppointment(a.id))}>Check In → RO</button> : null}
              <button className="k2b-button small" data-act={a.date ? "reschedule" : "set-date"} onClick={() => onReschedule(a)}>{a.date ? "Reschedule" : "Set date"}</button>
              <button className="k2b-button small" data-act="cancel" onClick={() => onCancel(a)}>Cancel</button>
            </div>
          )}
        </td>
      </tr>
    );
  };
  const head = (
    <thead>
      <tr style={svcHeadRow}>
        <th style={sTh}>When</th><th style={sThL}>Type</th><th style={sThL}>Customer / Vehicle</th><th style={sThL}>Concern</th>
        <th style={sThL}>Tech</th><th style={sThR}>Est Hrs</th><th style={sTh}>Transport</th><th style={sTh}>Status</th><th style={sThC}>{canEdit ? "Action" : "RO"}</th>
      </tr>
    </thead>
  );
  return (
    <div id="appt-list" style={{ display: "flex", flexDirection: "column", gap: 14 }}>
      {!canEdit && <div style={{ fontSize: 12, color: "#666" }}>View only — the service team books, checks in and changes appointments.</div>}
      {appts.length === 0 && <div style={{ padding: 14, textAlign: "center", color: "#888" }}>No appointments scheduled.</div>}
      {groups.map(([k, label, list]) => list.length === 0 ? null : (
        <div key={k} id={"appt-group-" + k}>
          <div style={{ fontSize: 12, fontWeight: 800, color: "var(--jb-navy)", textTransform: "uppercase", letterSpacing: "0.04em", marginBottom: 4 }}>{label} ({list.length})</div>
          <table style={svcTable}>{head}<tbody>{list.map(row)}</tbody></table>
        </div>
      ))}
      {noDate.length > 0 && (
        <div id="appt-nodate">
          <div style={{ fontSize: 12, fontWeight: 800, color: "#9A6700", textTransform: "uppercase", letterSpacing: "0.04em", marginBottom: 4 }}>No date (made before the update) ({noDate.length})</div>
          <div style={{ fontSize: 11.5, color: "#777", marginBottom: 4 }}>These were booked before appointments had a date. {canEdit ? "Set a date so the right salesperson is told." : ""}</div>
          <table style={svcTable}>{head}<tbody>{noDate.map(row)}</tbody></table>
        </div>
      )}
    </div>
  );
};

const SvcKpi = ({ label, value, sub, tone }) => {
  const border = tone === "red" ? "#C03546" : tone === "amber" ? "#D9920A" : tone === "ok" ? "var(--jb-green, #16A34A)" : "var(--jb-border, #C0C0C0)";
  const color  = tone === "red" ? "#C03546" : tone === "amber" ? "#9A6700" : tone === "ok" ? "var(--jb-green, #16A34A)" : "var(--jb-navy, #11337A)";
  return (
    <div style={{ background: "#FFF", border: "1px solid " + border, borderRadius: 6, padding: "6px 12px", minWidth: 96 }}>
      <div style={{ fontSize: 10, color: "#666", textTransform: "uppercase", letterSpacing: "0.04em", fontWeight: 600 }}>{label}</div>
      <div style={{ fontSize: 17, fontWeight: 700, color, lineHeight: 1.1 }}>{value}</div>
      {sub && <div style={{ fontSize: 10, color: "#888" }}>{sub}</div>}
    </div>
  );
};

const svcInp = { background: "var(--k2b-yellow, #FFFFE1)", border: "1px solid #808080", padding: "3px 6px", fontFamily: "var(--font-ui)", fontSize: 13, width: "100%", boxSizing: "border-box" };
const svcTable = { width: "100%", borderCollapse: "collapse", fontFamily: "'Courier Prime', monospace", fontSize: 12 };
const svcHeadRow = { background: "#C0C0C0", color: "var(--k2b-maroon, #8a1c1c)", borderBottom: "1px solid #808080", position: "sticky", top: 0 };
const sTh = { padding: "3px 6px", textAlign: "left", whiteSpace: "nowrap" };
const sThL = { ...sTh };
const sThR = { ...sTh, textAlign: "right" };
const sThC = { ...sTh, textAlign: "center" };
const sTd = { padding: "3px 6px", color: "var(--k2b-navy, #11337A)", verticalAlign: "top" };
const sTdMono = { ...sTd, fontWeight: 700, color: "var(--k2b-blue-data-dk, #11337A)" };
const sTdR = { ...sTd, textAlign: "right" };
const sTdC = { ...sTd, textAlign: "center" };

Object.assign(window, { ServiceDept, ApptDialog, ApptList, ApptCancelDialog, apptFmtDay, apptToday });