/* 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 — Repair Order e-sign. Three pieces:
//   • RoSignaturePad — draw (mouse/finger) or type a signature.
//   • RoEsignModal — advisor "sends" a sign request by text/email; shows a
//     copyable link and a button to open the customer signing screen.
//   • RoSignScreen — full-screen, token-driven customer authorization page
//     (opened via ?rosign=TOKEN). Captures the signature and authorizes the RO.
// Real SMS/email delivery needs a server; here the send is simulated and the
// link is shown/copyable so the flow is fully demonstrable.

const roMoney = (n) => "$" + (Number(n) || 0).toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 });
// RC32 (lane ros): the store's settings for the customer's page — store name (X1), the authorization wording (X2), what the customer
// approves (X4: "whole" = labor + parts + sublet + tax, owner Q1; "labor" = today), the e-sign link (X6). Missing = today's behaviour.
const roSignCfg = () => { try { const s = window.DMS && DMS.svcSettings ? DMS.svcSettings() : null; return s && s.ro ? s : null; } catch (e) { return null; } };
const roSignStoreName = (cfg) => {
  const x = cfg && cfg.ro && cfg.ro.texts && String(cfg.ro.texts.storeName || "").trim();
  if (x) return x;
  return String((window.K2BStore && window.K2BStore.branding().dba) || "").trim();   // RC35 (brd, D52): the store's everyday name
};
// The wording the customer agrees to: the RO's own text (edited on this RO), else the store's (X2), else the standard text.
const roSignAuthText = (ro, cfg) => {
  if (ro && ro.disclosure != null && String(ro.disclosure).trim()) return String(ro.disclosure);
  const st = cfg && cfg.ro && cfg.ro.texts && cfg.ro.texts.authText && String(cfg.ro.texts.authText.text || "").trim();
  return st || RO_AUTH_DISCLAIMER;
};
// What the customer approves (X4). "whole": each job with its own parts and sublet, then labor / parts / sublet / fees / tax and the
// total — DMS.roMoney (the same figures the RO, the invoice and the close use; declined jobs are not on it). "labor": today's page.
const roSignEstimate = (ro, cfg) => {
  const shows = (cfg && cfg.ro && cfg.ro.texts && cfg.ro.texts.approvalAmount) || "labor";
  const ops = (ro.ops || []).filter(o => o.approval === "approved" || o.approval === "pending" || !o.approval);
  const m = window.DMS && DMS.roMoney ? DMS.roMoney(ro) : null;
  if (shows !== "whole" || !m) {
    const tot = DMS.roEstimateTotals(ro.id);
    return { shows: "labor", lines: ops.map(o => ({ id: o.id, desc: o.desc, note: o.complaint, amount: +o.lab || 0 })), total: tot.approved + tot.pending, parts: null };
  }
  const lines = ops.map(o => {
    const p = (ro.partsLines || []).filter(l => l.jobId != null && String(l.jobId) === String(o.id)).reduce((a, l) => a + (+l.sale || 0) * (+l.qty || 0), 0);
    const sb = (ro.sublets || []).filter(l => l.jobId != null && String(l.jobId) === String(o.id)).reduce((a, l) => a + (+l.sale || 0) * (l.qty == null ? 1 : +l.qty || 0), 0);
    return { id: o.id, desc: o.desc, note: o.complaint, amount: Math.round(((+o.lab || 0) + p + sb) * 100) / 100 };
  });
  return { shows: "whole", lines, total: m.total, parts: { labor: m.labor, parts: m.parts, sublet: m.sublet, fees: m.fees, tax: m.tax } };
};

const RO_AUTH_DISCLAIMER =
  "I hereby authorize the repair work described above along with the necessary " +
  "materials, and grant you and/or your employees permission to operate the " +
  "vehicle for the purpose of testing and/or inspection. An express mechanic's " +
  "lien is acknowledged on this vehicle to secure the amount of repairs. You will " +
  "not be held responsible for loss or damage to the vehicle or articles left in " +
  "it in case of fire, theft, or any other cause beyond your control. I have read " +
  "and approve the estimated charges, including any approved supplements, and " +
  "agree the estimate may change only with my further authorization.";

// ── Signature pad ──────────────────────────────────────────────────────────
const RoSignaturePad = ({ onChange, height }) => {
  const [mode, setMode] = React.useState("draw"); // draw | type
  const [typed, setTyped] = React.useState("");
  const canvasRef = React.useRef(null);
  const drawing = React.useRef(false);
  const dirty = React.useRef(false);

  const ctxOf = () => { const c = canvasRef.current; const ctx = c.getContext("2d"); ctx.lineWidth = 2.5; ctx.lineCap = "round"; ctx.strokeStyle = "#11264D"; return ctx; };
  const pos = (e) => {
    const c = canvasRef.current; const r = c.getBoundingClientRect();
    const t = e.touches ? e.touches[0] : e;
    return { x: (t.clientX - r.left) * (c.width / r.width), y: (t.clientY - r.top) * (c.height / r.height) };
  };
  const start = (e) => { e.preventDefault(); drawing.current = true; const ctx = ctxOf(); const p = pos(e); ctx.beginPath(); ctx.moveTo(p.x, p.y); };
  const move = (e) => { if (!drawing.current) return; e.preventDefault(); const ctx = ctxOf(); const p = pos(e); ctx.lineTo(p.x, p.y); ctx.stroke(); dirty.current = true; };
  const end = () => { if (!drawing.current) return; drawing.current = false; if (dirty.current && canvasRef.current) onChange(canvasRef.current.toDataURL("image/png")); };
  const clear = () => { const c = canvasRef.current; if (c) c.getContext("2d").clearRect(0, 0, c.width, c.height); dirty.current = false; onChange(""); };

  // Render a typed name to an image so it lands on the printed RO too.
  const commitTyped = (val) => {
    setTyped(val);
    const c = canvasRef.current; if (!c) return;
    const ctx = c.getContext("2d"); ctx.clearRect(0, 0, c.width, c.height);
    if (val.trim()) {
      ctx.fillStyle = "#11264D"; ctx.font = "italic 40px 'Brush Script MT','Segoe Script',cursive"; ctx.textBaseline = "middle";
      ctx.fillText(val, 16, c.height / 2);
      onChange(c.toDataURL("image/png"));
    } else onChange("");
  };

  return (
    <div>
      <div style={{ display: "flex", gap: 6, marginBottom: 6 }}>
        <button onClick={() => { setMode("draw"); clear(); }} className="k2b-button small" style={mode === "draw" ? { background: "var(--jb-navy, #1B66A8)", color: "#fff", fontWeight: 700 } : {}}>✍ Draw</button>
        <button onClick={() => { setMode("type"); clear(); }} className="k2b-button small" style={mode === "type" ? { background: "var(--jb-navy, #1B66A8)", color: "#fff", fontWeight: 700 } : {}}>⌨ Type</button>
        <div style={{ flex: 1 }} />
        <button onClick={() => { clear(); setTyped(""); }} className="k2b-button small">Clear</button>
      </div>
      {mode === "type" && (
        <input value={typed} onChange={(e) => commitTyped(e.target.value)} placeholder="Type your full name"
               style={{ width: "100%", boxSizing: "border-box", padding: "8px 10px", border: "1px solid #C8CCD2", borderRadius: 4, fontSize: 15, marginBottom: 6, fontFamily: "'Brush Script MT','Segoe Script',cursive" }} />
      )}
      <canvas ref={canvasRef} width={520} height={height || 130}
              onMouseDown={start} onMouseMove={move} onMouseUp={end} onMouseLeave={end}
              onTouchStart={start} onTouchMove={move} onTouchEnd={end}
              style={{ width: "100%", height: (height || 130) + "px", border: "1px dashed #9AA3AE", borderRadius: 6, background: "#FFFEF8",
                       touchAction: "none", cursor: mode === "draw" ? "crosshair" : "default", display: mode === "type" && !typed ? "none" : "block" }} />
      <div style={{ fontSize: 10.5, color: "#9AA3AE", marginTop: 3 }}>Sign above — {mode === "draw" ? "use your mouse or finger" : "your typed name becomes your signature"}.</div>
    </div>
  );
};

// ── Advisor "send" modal ────────────────────────────────────────────────────
const RoEsignModal = ({ ro, act, onClose }) => {
  const cfg = roSignCfg();
  const es = (cfg && cfg.ro && cfg.ro.texts && cfg.ro.texts.esignSend) || { via: "show", fillMobile: false };
  const mobile = ro.customerPhone || (es.fillMobile && ro.cust && ro.cust.phone) || "";
  const [via, setVia] = React.useState(es.via === "email" ? "email" : "text");
  const [to, setTo] = React.useState(es.via === "email" && es.fillMobile && ro.cust && ro.cust.email ? ro.cust.email : mobile);
  const [sent, setSent] = React.useState(ro.signRequest && ro.signRequest.status === "sent" ? ro.signRequest : null);
  const link = sent ? (location.origin + location.pathname + "?rosign=" + sent.token + ((window.K2BStore && window.K2BStore.pageId()) ? "&s=" + window.K2BStore.pageId() : "")) : "";   // RC35 (brd): the link names its store

  const send = () => {
    const r = DMS.requestROSignature(ro.id, { via, to });
    act(r);
    if (r.ok) setSent({ token: r.token, via, to, status: "sent" });
  };
  const copy = () => { try { navigator.clipboard.writeText(link); window.k2bToast && window.k2bToast("Link copied.", "ok"); } catch (e) {} };

  return (
    <K2BModal title="Send Repair Authorization for E-Sign" width={560} onClose={onClose}
      buttons={<><K2BButton onClick={onClose}>Close</K2BButton>{!sent && <K2BButton primary onClick={send}>Send Request</K2BButton>}</>}>
      {!sent ? (
        <>
          <div style={{ fontSize: 12.5, color: "#555", marginBottom: 12 }}>Text or email the customer a secure link to review and authorize the approved repairs on <b>{ro.id}</b>.</div>
          <div style={{ display: "flex", gap: 8, marginBottom: 12 }}>
            {[["text", "📱 Text"], ["email", "✉ Email"]].map(([v, l]) => (
              <button key={v} className="k2b-button small" onClick={() => { setVia(v); if (es.fillMobile) setTo(v === "email" ? ((ro.cust && ro.cust.email) || "") : mobile); }} style={via === v ? { background: "var(--jb-navy, #1B66A8)", color: "#fff", fontWeight: 700 } : {}}>{l}</button>
            ))}
          </div>
          <label style={{ display: "flex", flexDirection: "column", gap: 3 }}>
            <span style={{ fontSize: 11, color: "#666", fontWeight: 600 }}>{via === "text" ? "Mobile number" : "Email address"}</span>
            <input value={to} onChange={(e) => setTo(e.target.value)} autoComplete="off" name="k2b-esign-to" placeholder={via === "text" ? "(573) 555-0134" : "customer@email.com"}
                   style={{ padding: "8px 10px", border: "1px solid #C8CCD2", borderRadius: 4, fontSize: 13 }} />
          </label>
          <div style={{ fontSize: 11, color: "#999", marginTop: 10 }}>Live SMS/email delivery is wired through your messaging provider in production. In this build the link is generated for you to open the customer's signing screen.</div>
        </>
      ) : (
        <>
          <div style={{ background: "#E6F7EC", border: "1px solid #16A34A", borderRadius: 6, padding: "8px 12px", fontSize: 12.5, color: "#0E7A37", marginBottom: 12 }}>
            ✓ {via === "email" ? "Email" : "Text"} sent to {to || "customer"} with the signing link.
          </div>
          <label style={{ fontSize: 11, color: "#666", fontWeight: 600 }}>Signing link</label>
          <div style={{ display: "flex", gap: 6, marginTop: 4 }}>
            <input readOnly value={link} style={{ flex: 1, padding: "7px 9px", border: "1px solid #C8CCD2", borderRadius: 4, fontSize: 12, fontFamily: "var(--jb-mono, monospace)" }} />
            <button className="k2b-button small" onClick={copy}>Copy</button>
          </div>
          <button className="k2b-button" style={{ marginTop: 12, background: "var(--jb-yellow)", fontWeight: 700 }}
                  onClick={() => window.open(link, "_blank")}>Open Customer Signing Screen ↗</button>
          <div style={{ fontSize: 11, color: "#999", marginTop: 8 }}>When the customer signs, this RO is authorized automatically and the signature lands on the printed order.</div>
        </>
      )}
    </K2BModal>
  );
};

// ── Customer signing screen (full page, ?rosign=TOKEN) ──────────────────────
const RoSignScreen = ({ token }) => {
  const [, force] = React.useReducer(n => n + 1, 0);
  React.useEffect(() => (window.DMS && DMS.subscribe) ? DMS.subscribe(force) : undefined, []);
  const ro = window.DMS ? DMS.findROBySignToken(token) : null;
  React.useEffect(() => { try { if (typeof jbSvcViewport === "function") jbSvcViewport(true); } catch (e) {} }, []);   // RC32: the page fits the customer's phone
  const cfg = roSignCfg();
  const store = roSignStoreName(cfg);
  const [sig, setSig] = React.useState("");
  const [name, setName] = React.useState(ro ? ro.customer : "");
  const [agree, setAgree] = React.useState(false);

  if (!ro) return (
    <div style={{ minHeight: "100vh", display: "flex", alignItems: "center", justifyContent: "center", fontFamily: "system-ui, sans-serif", color: "#555" }}>
      <div style={{ textAlign: "center" }}><div style={{ fontSize: 40 }}>🔗</div><div style={{ marginTop: 8 }}>This signing link is invalid or has expired.</div></div>
    </div>
  );
  const already = ro.authorization;
  const est = roSignEstimate(ro, cfg);
  const supplies = !!(cfg && cfg.money && cfg.money.shopSupplies && cfg.money.shopSupplies.on);

  const submit = () => {
    if (!sig) { window.k2bToast && window.k2bToast("Please sign to authorize.", "warn"); return; }
    if (!agree) { window.k2bToast && window.k2bToast("Please check the authorization box.", "warn"); return; }
    // RC32 fix (r32-aud M1, owner Q1): the customer signs the WHOLE estimate -> its jobs are approved first (ServiceTickets roOkWholeJobs),
    // and the RO records what this page showed (est.shows), not a setting read later.
    if (est.shows === "whole" && typeof window.roOkWholeJobs === "function") window.roOkWholeJobs(ro.id, "whole");
    DMS.submitROSignature(token, { signature: sig, name: name || ro.customer, shown: est.shows });
    force();
  };

  return (
    <div style={{ minHeight: "100vh", background: "#EEF1F5", fontFamily: "system-ui, -apple-system, sans-serif", padding: "0 0 40px" }}>
      {window.K2BStoreBand ? <window.K2BStoreBand /> : null}
      <div style={{ background: (window.K2BStore ? window.K2BStore.branding().colors.primary : "#11264D"), color: "#fff", padding: "16px 20px", display: "flex", alignItems: "center", gap: 12 }} data-sign-store={(window.K2BStore && window.K2BStore.pageId()) || ""}>
        {window.K2BStoreLogo ? <window.K2BStoreLogo size={40} style={{ borderRadius: 8, background: "#fff" }} /> : null}
        <div>
          <div data-rosign-store="1" style={{ fontWeight: 700 }}>{store} — Service</div>
          <div style={{ fontSize: 12, opacity: 0.8 }}>Repair Authorization · {ro.id}</div>
        </div>
      </div>

      <div style={{ maxWidth: 620, margin: "20px auto", padding: "0 16px", display: "flex", flexDirection: "column", gap: 16 }}>
        {already ? (
          <div style={{ background: "#fff", borderRadius: 12, padding: 28, textAlign: "center", boxShadow: "0 1px 4px rgba(0,0,0,0.1)" }}>
            <div style={{ fontSize: 46 }}>✅</div>
            <div style={{ fontSize: 19, fontWeight: 700, marginTop: 8, color: "#0E7A37" }}>Repairs Authorized</div>
            <div style={{ color: "#555", marginTop: 6 }}>Thank you, {already.signedName || already.by}. Your service advisor has been notified and work will proceed.</div>
            <div style={{ fontSize: 12, color: "#999", marginTop: 10 }}>Signed {new Date(already.at).toLocaleString()}</div>
          </div>
        ) : (
          <>
            <div style={{ background: "#fff", borderRadius: 12, padding: 20, boxShadow: "0 1px 4px rgba(0,0,0,0.08)" }}>
              <div style={{ fontSize: 13, color: "#888" }}>{ro.customer} · {ro.vehicle}</div>
              <div style={{ fontWeight: 700, fontSize: 16, marginTop: 2, marginBottom: 12 }}>Please review &amp; approve your repairs</div>
              {est.lines.map(o => (
                <div key={o.id} data-rosign-line={o.id} style={{ display: "flex", justifyContent: "space-between", gap: 12, padding: "9px 0", borderTop: "1px solid #EEF1F5" }}>
                  <div>
                    <div style={{ fontWeight: 600, fontSize: 14 }}>{o.desc}</div>
                    {o.note && <div style={{ fontSize: 12.5, color: "#777" }}>{o.note}</div>}
                  </div>
                  <div style={{ fontFamily: "ui-monospace, monospace", fontWeight: 700, whiteSpace: "nowrap" }}>{roMoney(o.amount)}</div>
                </div>
              ))}
              {est.parts && (
                <div data-rosign-parts="1" style={{ borderTop: "1px solid #EEF1F5", marginTop: 4, paddingTop: 6, fontSize: 13, color: "#555", display: "grid", gridTemplateColumns: "1fr auto", gap: "2px 12px" }}>
                  <span>Labor</span><span style={{ fontFamily: "ui-monospace, monospace", textAlign: "right" }}>{roMoney(est.parts.labor)}</span>
                  <span>Parts</span><span style={{ fontFamily: "ui-monospace, monospace", textAlign: "right" }}>{roMoney(est.parts.parts)}</span>
                  {est.parts.sublet ? <><span>Sublet / outside work</span><span style={{ fontFamily: "ui-monospace, monospace", textAlign: "right" }}>{roMoney(est.parts.sublet)}</span></> : null}
                  {est.parts.fees ? <><span>Fees</span><span style={{ fontFamily: "ui-monospace, monospace", textAlign: "right" }}>{roMoney(est.parts.fees)}</span></> : null}
                  <span>Tax</span><span style={{ fontFamily: "ui-monospace, monospace", textAlign: "right" }}>{roMoney(est.parts.tax)}</span>
                </div>
              )}
              <div style={{ display: "flex", justifyContent: "space-between", borderTop: "2px solid #11264D", marginTop: 8, paddingTop: 8, fontWeight: 800 }}>
                <span>{est.shows === "whole" ? "Estimated total" : "Estimated total (approved)"}</span><span data-rosign-total="1" style={{ fontFamily: "ui-monospace, monospace" }}>{roMoney(est.total)}</span>
              </div>
              <div style={{ fontSize: 12, color: "#888", marginTop: 4 }}>{est.shows === "whole" ? (supplies ? "Plus applicable shop supplies. " : "") : (supplies ? "Plus applicable shop supplies and tax. " : "Plus applicable tax. ")}Final charges may change only with your further authorization.</div>
            </div>
            {window.SvcSunbitBox ? <window.SvcSunbitBox /> : null}{/* RC28 (svc): the store's Sunbit apply link + QR (no payment estimates) */}

            <div style={{ background: "#fff", borderRadius: 12, padding: 20, boxShadow: "0 1px 4px rgba(0,0,0,0.08)" }}>
              <div data-rosign-terms="1" style={{ fontSize: 13, color: "#555", lineHeight: 1.55, maxHeight: 160, overflow: "auto", border: "1px solid #EEF1F5", borderRadius: 6, padding: 10, background: "#FAFBFC", whiteSpace: "pre-wrap" }}>{roSignAuthText(ro, cfg)}</div>
              <label style={{ display: "flex", alignItems: "flex-start", gap: 9, marginTop: 12, fontSize: 13.5, cursor: "pointer" }}>
                <input type="checkbox" checked={agree} onChange={(e) => setAgree(e.target.checked)} style={{ width: 18, height: 18, marginTop: 1 }} />
                <span>I have read and agree to the authorization above, and approve the estimated repairs.</span>
              </label>
              <div style={{ marginTop: 14 }}>
                <label style={{ fontSize: 12, fontWeight: 600, color: "#666" }}>Full name</label>
                <input value={name} onChange={(e) => setName(e.target.value)} style={{ width: "100%", boxSizing: "border-box", padding: "8px 10px", border: "1px solid #C8CCD2", borderRadius: 4, fontSize: 14, marginTop: 3, marginBottom: 12 }} />
                <RoSignaturePad onChange={setSig} height={140} />
              </div>
              <button onClick={submit} style={{ width: "100%", marginTop: 16, padding: "13px", border: 0, borderRadius: 8, background: agree && sig ? "#16A34A" : "#B7C0CC", color: "#fff", fontWeight: 800, fontSize: 16, cursor: agree && sig ? "pointer" : "not-allowed" }}>
                Authorize Repairs
              </button>
            </div>
          </>
        )}
      </div>
    </div>
  );
};

Object.assign(window, { RoSignaturePad, RoEsignModal, RoSignScreen, RO_AUTH_DISCLAIMER, roSignEstimate, roSignAuthText, roSignStoreName });