/* 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 — Forms Sequencing & Document Group Assignment (Sales & F&I).
// Manages window.jbForms: which printed forms attach to a deal and in what
// order, conditioned on deal type (New/Used/Lease…), funding bank, and buyer
// state. Mirrors the Dealertrack "Forms Sequence / Document Group Assignment"
// flow. A live preview shows the resolved packet for a sample deal context.

const fsBadge = (txt, color) => (
  <span style={{ background: color, color: "#fff", borderRadius: 999, padding: "1px 8px", fontSize: 10.5, fontWeight: 600, whiteSpace: "nowrap" }}>{txt}</span>
);

const FormsSequencing = ({ onClose, go }) => {
  const [, force] = React.useReducer(n => n + 1, 0);
  React.useEffect(() => window.jbForms ? window.jbForms.subscribe(force) : undefined, []);
  const list = window.jbForms ? window.jbForms.list().slice().sort((a, b) => a.seq - b.seq) : [];
  const DEAL_TYPES = window.jbForms ? window.jbForms.DEAL_TYPES : [];
  const GROUPS = window.jbForms ? window.jbForms.GROUPS : [];
  const bankNames = window.jbLenders ? window.jbLenders.list().map(l => l.name) : [];
  const [edit, setEdit] = React.useState(null);

  // Live preview context
  const [pvType, setPvType] = React.useState("Used");
  const [pvBank, setPvBank] = React.useState(bankNames[0] || "");
  const [pvState, setPvState] = React.useState("MO");
  const resolved = window.jbForms ? window.jbForms.resolve({ dealType: pvType, bank: pvBank, state: pvState }) : [];

  const blank = { seq: (list.length ? Math.max(...list.map(f => f.seq)) + 10 : 10), name: "", printKey: "buyersOrder",
    group: "Always Required", dealTypes: ["New", "Used"], banks: [], states: [], copies: 1, dest: "screen", active: true };

  return (
    <div className="k2b-window" style={{ width: "100%", maxWidth: 1300, height: 800, margin: "0 auto", fontFamily: "var(--jb-font)" }}>
      <K2BTitlebar title="Forms Sequencing & Document Group Assignment" onClose={onClose} onMin={() => {}} onMax={() => {}} />
      <div style={{ flex: 1, minHeight: 0, overflow: "auto", background: "var(--jb-bg)", padding: 18, display: "grid", gridTemplateColumns: "1fr 360px", gap: 16, alignItems: "start" }}>

        {/* ── Left: sequence table ── */}
        <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
            <div style={{ fontSize: 12.5, color: "var(--jb-text-dim)" }}>Forms attach to a deal in <b>sequence order</b>, filtered by the rules on each row.</div>
            <div style={{ flex: 1 }} />
            <button className="k2b-button" style={{ background: "var(--jb-yellow)", fontWeight: 700 }} onClick={() => setEdit({ ...blank })}>+ Add Form</button>
          </div>
          <div style={{ background: "var(--jb-surface)", border: "1px solid var(--jb-border)", borderRadius: "var(--jb-r-lg)", overflow: "hidden", boxShadow: "var(--jb-shadow-sm)" }}>
            <table style={{ width: "100%", borderCollapse: "collapse", fontSize: 12.5 }}>
              <thead><tr style={{ background: "var(--jb-surface-2)", color: "var(--jb-text-dim)", textAlign: "left" }}>
                {["Seq", "Form", "Group", "Deal Types", "Banks", "States", "Copies", "Dest"].map((h, i) => (
                  <th key={i} style={{ padding: "8px 10px", fontWeight: 600, textAlign: i === 0 || i === 6 ? "center" : "left" }}>{h}</th>
                ))}
              </tr></thead>
              <tbody>
                {list.map((f, i) => (
                  <tr key={f.id} onClick={() => setEdit({ ...f })} style={{ background: i % 2 ? "var(--jb-surface-2)" : "#fff", cursor: "pointer", opacity: f.active ? 1 : 0.45 }}>
                    <td style={{ padding: "8px 10px", textAlign: "center", fontFamily: "var(--jb-mono)", fontWeight: 700, color: "var(--jb-navy)" }}>{f.seq}</td>
                    <td style={{ padding: "8px 10px", fontWeight: 600, color: "var(--jb-text)" }}>{f.name}{!f.active && <span style={{ color: "var(--jb-text-muted)", fontWeight: 400 }}> · inactive</span>}</td>
                    <td style={{ padding: "8px 10px" }}>{fsBadge(f.group, "var(--jb-blue)")}</td>
                    <td style={{ padding: "8px 10px", color: "var(--jb-text-dim)" }}>{f.dealTypes.length ? f.dealTypes.join(", ") : "All"}</td>
                    <td style={{ padding: "8px 10px", color: "var(--jb-text-dim)" }}>{f.banks.length ? f.banks.join(", ") : "Any"}</td>
                    <td style={{ padding: "8px 10px", color: "var(--jb-text-dim)", fontFamily: "var(--jb-mono)" }}>{f.states.length ? f.states.join(", ") : "Any"}</td>
                    <td style={{ padding: "8px 10px", textAlign: "center", fontFamily: "var(--jb-mono)" }}>{f.copies}</td>
                    <td style={{ padding: "8px 10px" }}>{f.dest === "printer" ? fsBadge("🖨 Printer", "var(--jb-navy)") : fsBadge("🖥 Screen", "var(--jb-text-muted)")}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
          <div style={{ display: "flex", gap: 8 }}>
            <button className="k2b-button" onClick={onClose}>Close</button>
            <button className="k2b-button" onClick={() => go && go("banks")}>Banks / Lenders</button>
            <button className="k2b-button" onClick={() => go && go("desking")}>Back to Desking</button>
          </div>
        </div>

        {/* ── Right: live preview ── */}
        <div style={{ background: "var(--jb-surface)", border: "1px solid var(--jb-border)", borderRadius: "var(--jb-r-lg)", boxShadow: "var(--jb-shadow-sm)", overflow: "hidden", position: "sticky", top: 0 }}>
          <div style={{ padding: "10px 14px", borderBottom: "1px solid var(--jb-border)", background: "var(--jb-surface-2)", fontWeight: 700, fontSize: 12.5, textTransform: "uppercase", letterSpacing: 0.3 }}>Packet Preview</div>
          <div style={{ padding: 14, display: "flex", flexDirection: "column", gap: 10 }}>
            <label style={{ display: "flex", flexDirection: "column", gap: 3 }}>
              <span style={{ fontSize: 11, color: "var(--jb-text-dim)", fontWeight: 600 }}>Deal Type</span>
              <select value={pvType} onChange={(e) => setPvType(e.target.value)} style={{ fontSize: 13 }}>{DEAL_TYPES.map(t => <option key={t}>{t}</option>)}</select>
            </label>
            <label style={{ display: "flex", flexDirection: "column", gap: 3 }}>
              <span style={{ fontSize: 11, color: "var(--jb-text-dim)", fontWeight: 600 }}>Bank</span>
              <select value={pvBank} onChange={(e) => setPvBank(e.target.value)} style={{ fontSize: 13 }}>
                <option value="">— none —</option>{bankNames.map(b => <option key={b}>{b}</option>)}
              </select>
            </label>
            <label style={{ display: "flex", flexDirection: "column", gap: 3 }}>
              <span style={{ fontSize: 11, color: "var(--jb-text-dim)", fontWeight: 600 }}>Buyer State</span>
              <input value={pvState} onChange={(e) => setPvState(e.target.value.toUpperCase().slice(0, 2))} maxLength={2} style={{ fontSize: 13, width: 70, textTransform: "uppercase" }} />
            </label>
            <div style={{ borderTop: "1px solid var(--jb-border)", paddingTop: 10, marginTop: 2 }}>
              <div style={{ fontSize: 11, color: "var(--jb-text-muted)", textTransform: "uppercase", letterSpacing: 0.5, marginBottom: 6 }}>{resolved.length} form{resolved.length !== 1 ? "s" : ""} in packet</div>
              <ol style={{ margin: 0, paddingLeft: 18, display: "flex", flexDirection: "column", gap: 5 }}>
                {resolved.map(f => (
                  <li key={f.id} style={{ fontSize: 12.5 }}>
                    <span style={{ fontWeight: 600, color: "var(--jb-text)" }}>{f.name}</span>
                    <span style={{ color: "var(--jb-text-muted)" }}> · {f.copies}× {f.dest === "printer" ? "printer" : "screen"}</span>
                  </li>
                ))}
                {!resolved.length && <li style={{ fontSize: 12, color: "var(--jb-text-muted)", listStyle: "none", marginLeft: -18 }}>No forms match this context.</li>}
              </ol>
            </div>
            <button className="k2b-button" style={{ marginTop: 6, background: "var(--jb-blue)", color: "#fff", border: 0, fontWeight: 700 }}
                    onClick={() => window.k2bPrintSelectDeal && window.k2bPrintSelectDeal({ dealType: pvType, bank: pvBank, state: pvState })}>🖨 Open Print Dialog</button>
          </div>
        </div>
      </div>

      {edit && <FormEditor rec={edit} DEAL_TYPES={DEAL_TYPES} GROUPS={GROUPS} bankNames={bankNames} onClose={() => setEdit(null)}
        onSave={(r) => { window.jbForms.upsert(r); setEdit(null); window.k2bToast && window.k2bToast(`${r.name || "Form"} saved.`, "ok"); }}
        onDelete={edit.id ? () => { window.jbForms.remove(edit.id); setEdit(null); window.k2bToast && window.k2bToast("Form removed.", "warn"); } : null} />}
    </div>
  );
};

const FormEditor = ({ rec, DEAL_TYPES, GROUPS, bankNames, onClose, onSave, onDelete }) => {
  const [r, setR] = React.useState({ ...rec, states: (rec.states || []).join(", ") });
  const set = (k, v) => setR(p => ({ ...p, [k]: v }));
  const toggleArr = (k, val) => setR(p => { const a = p[k] || []; return { ...p, [k]: a.includes(val) ? a.filter(x => x !== val) : [...a, val] }; });
  const PRINT_KEYS = [
    ["buyersOrder", "Buyer's Order / Contract"], ["billOfSale", "Bill of Sale"], ["odometer", "Odometer Disclosure"],
    ["privacy", "Privacy Notice"], ["asIs", "As-Is — No Warranty"], ["releaseTrade", "Release of Liability (Trade)"], ["release", "Release of Liability (Sold)"],
  ].filter(([k]) => !(window.K2BForms && window.K2BForms.owns(k)))
   .concat(window.K2BForms ? window.K2BForms.printKeys() : []);   // RC37 (forms37): the dealership's own forms (same keys where the DMS had them)
  const Chip = ({ on, onClick, children }) => (
    <button onClick={onClick} style={{ fontSize: 11.5, padding: "3px 10px", borderRadius: 999, cursor: "pointer",
      border: "1px solid " + (on ? "var(--jb-blue)" : "var(--jb-border)"), background: on ? "var(--jb-blue)" : "#fff",
      color: on ? "#fff" : "var(--jb-text-dim)", fontWeight: 600 }}>{children}</button>
  );
  const valid = (r.name || "").trim().length > 0;
  const save = () => {
    if (!valid) { window.k2bToast && window.k2bToast("Form name is required.", "warn"); return; }
    onSave({ ...r, states: String(r.states || "").split(",").map(s => s.trim().toUpperCase()).filter(Boolean) });
  };
  return (
    <K2BModal title={rec.id ? "Edit Form" : "Add Form"} width={620} onClose={onClose}
      buttons={<>
        {onDelete && <K2BButton onClick={onDelete}>Delete</K2BButton>}
        <K2BButton onClick={onClose}>Cancel</K2BButton>
        <K2BButton primary onClick={save}>Save</K2BButton>
      </>}>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 90px", gap: 12 }}>
        <label style={{ display: "flex", flexDirection: "column", gap: 3 }}>
          <span style={{ fontSize: 11, color: "var(--jb-text-dim)", fontWeight: 600 }}>Form Name</span>
          <input value={r.name || ""} onChange={(e) => set("name", e.target.value)} style={{ fontSize: 13 }} />
        </label>
        <label style={{ display: "flex", flexDirection: "column", gap: 3 }}>
          <span style={{ fontSize: 11, color: "var(--jb-text-dim)", fontWeight: 600 }}>Sequence</span>
          <input type="number" value={r.seq} onChange={(e) => set("seq", +e.target.value)} style={{ fontSize: 13 }} />
        </label>
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12, marginTop: 12 }}>
        <label style={{ display: "flex", flexDirection: "column", gap: 3 }}>
          <span style={{ fontSize: 11, color: "var(--jb-text-dim)", fontWeight: 600 }}>Document Group</span>
          <select value={r.group} onChange={(e) => set("group", e.target.value)} style={{ fontSize: 13 }}>{GROUPS.map(g => <option key={g}>{g}</option>)}</select>
        </label>
        <label style={{ display: "flex", flexDirection: "column", gap: 3 }}>
          <span style={{ fontSize: 11, color: "var(--jb-text-dim)", fontWeight: 600 }}>Print Template</span>
          <select value={r.printKey} onChange={(e) => set("printKey", e.target.value)} style={{ fontSize: 13 }}>{PRINT_KEYS.map(([k, l]) => <option key={k} value={k}>{l}</option>)}</select>
        </label>
      </div>
      <div style={{ marginTop: 14 }}>
        <div style={{ fontSize: 11, color: "var(--jb-text-dim)", fontWeight: 600, marginBottom: 5 }}>Applies to Deal Types <span style={{ color: "var(--jb-text-muted)", fontWeight: 400 }}>(none = all)</span></div>
        <div style={{ display: "flex", gap: 6, flexWrap: "wrap" }}>{DEAL_TYPES.map(t => <Chip key={t} on={(r.dealTypes || []).includes(t)} onClick={() => toggleArr("dealTypes", t)}>{t}</Chip>)}</div>
      </div>
      <div style={{ marginTop: 14 }}>
        <div style={{ fontSize: 11, color: "var(--jb-text-dim)", fontWeight: 600, marginBottom: 5 }}>Only for Banks <span style={{ color: "var(--jb-text-muted)", fontWeight: 400 }}>(none = any bank)</span></div>
        <div style={{ display: "flex", gap: 6, flexWrap: "wrap", maxHeight: 90, overflow: "auto" }}>{bankNames.map(b => <Chip key={b} on={(r.banks || []).includes(b)} onClick={() => toggleArr("banks", b)}>{b}</Chip>)}</div>
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 90px 1fr", gap: 12, marginTop: 14, alignItems: "end" }}>
        <label style={{ display: "flex", flexDirection: "column", gap: 3 }}>
          <span style={{ fontSize: 11, color: "var(--jb-text-dim)", fontWeight: 600 }}>Only for States <span style={{ color: "var(--jb-text-muted)", fontWeight: 400 }}>(CSV, blank = any)</span></span>
          <input value={r.states} onChange={(e) => set("states", e.target.value)} placeholder="AR, TN, IL" style={{ fontSize: 13, textTransform: "uppercase" }} />
        </label>
        <label style={{ display: "flex", flexDirection: "column", gap: 3 }}>
          <span style={{ fontSize: 11, color: "var(--jb-text-dim)", fontWeight: 600 }}>Copies</span>
          <input type="number" value={r.copies} onChange={(e) => set("copies", +e.target.value)} style={{ fontSize: 13 }} />
        </label>
        <div style={{ display: "flex", flexDirection: "column", gap: 3 }}>
          <span style={{ fontSize: 11, color: "var(--jb-text-dim)", fontWeight: 600 }}>Default Destination</span>
          <div style={{ display: "flex", gap: 6 }}>
            <Chip on={r.dest === "screen"} onClick={() => set("dest", "screen")}>🖥 Screen</Chip>
            <Chip on={r.dest === "printer"} onClick={() => set("dest", "printer")}>🖨 Printer</Chip>
          </div>
        </div>
      </div>
      <label style={{ display: "flex", alignItems: "center", gap: 8, marginTop: 14 }}>
        <input type="checkbox" checked={r.active !== false} onChange={(e) => set("active", e.target.checked)} style={{ width: 16, height: 16 }} />
        <span style={{ fontSize: 13 }}>Active (included when building deal packets)</span>
      </label>
    </K2BModal>
  );
};

Object.assign(window, { FormsSequencing });