/* ============================================================
   Reframe Work Orders — Admin (Kanban board + roster + assign)
   ============================================================ */

/* ---- Assignee popover (multi-select) ----------------------------------- */
// `selected` is an array of crew ids; `onChange(nextArray)` is called on each
// toggle. The menu stays open so several crew can be added to one work order.
function AssignPopover({ state, selected, onChange, onClose, align = "left" }) {
  const ref = useRef(null);
  const sel = Array.isArray(selected) ? selected : [];
  useEffect(() => {
    const h = (e) => { if (ref.current && !ref.current.contains(e.target)) onClose(); };
    document.addEventListener("mousedown", h);
    return () => document.removeEventListener("mousedown", h);
  }, [onClose]);
  const toggle = (id) => onChange(sel.includes(id) ? sel.filter((x) => x !== id) : [...sel, id]);
  const crew = state.employees.filter((e) => e.active && e.role !== "admin");
  return (
    <div ref={ref} style={{
      position: "absolute", top: "calc(100% + 6px)", [align]: 0, zIndex: 40, width: 256,
      background: "#fff", borderRadius: 12, border: "1px solid #E6E6E6", boxShadow: "var(--shadow-lg)", padding: 6,
      animation: "rfRise 140ms var(--ease-out)",
    }}>
      <div style={{ padding: "8px 10px 6px", fontSize: 11, fontWeight: 700, letterSpacing: "0.06em", textTransform: "uppercase", color: "#9AA3A5" }}>Assign crew · tap to add</div>
      <div style={{ maxHeight: 300, overflowY: "auto" }}>
        {crew.map((e) => {
          const load = state.tickets.filter((t) => (t.assigneeIds || []).includes(e.id) && t.status !== "done").length;
          const on = sel.includes(e.id);
          return (
            <button key={e.id} onClick={() => toggle(e.id)} style={{
              width: "100%", display: "flex", alignItems: "center", gap: 10, padding: "8px 10px", borderRadius: 8, border: "none",
              background: on ? "#E5F0E7" : "transparent", cursor: "pointer", textAlign: "left",
            }} onMouseEnter={(ev) => { if (!on) ev.currentTarget.style.background = "#F2F2F2"; }} onMouseLeave={(ev) => { if (!on) ev.currentTarget.style.background = "transparent"; }}>
              <span style={{ width: 18, height: 18, borderRadius: 5, border: "1.5px solid " + (on ? "#2F6B3A" : "#C5CDCF"), background: on ? "#2F6B3A" : "#fff", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>
                {on && <Icon name="check" size={12} color="#fff" stroke={3} />}
              </span>
              <Avatar name={e.name} color={e.color} size={28} />
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 13.5, fontWeight: 600, color: "#16331E" }}>{e.name}</div>
                <div style={{ fontSize: 11.5, color: "#515151" }}>{e.trade}</div>
              </div>
              <span style={{ fontSize: 11, fontWeight: 600, color: load >= e.capacity ? "#FF5E2E" : "#9AA3A5" }}>{load}/{e.capacity}</span>
            </button>
          );
        })}
        {crew.length === 0 && <div style={{ padding: "12px 10px", fontSize: 12.5, color: "#9AA3A5" }}>No active crew. Add crew on the Roster tab.</div>}
      </div>
      {sel.length > 0 && (
        <button onClick={() => onChange([])} style={{ width: "100%", display: "flex", alignItems: "center", gap: 8, padding: "8px 10px", borderRadius: 8, border: "none", background: "transparent", cursor: "pointer", textAlign: "left", color: "#FF5E2E", marginTop: 2, borderTop: "1px solid #F2F2F2" }}
          onMouseEnter={(ev) => ev.currentTarget.style.background = "#F2F2F2"} onMouseLeave={(ev) => ev.currentTarget.style.background = "transparent"}>
          <div style={{ width: 18, height: 18, borderRadius: "50%", border: "1.5px dashed #C5CDCF", display: "flex", alignItems: "center", justifyContent: "center" }}><Icon name="x" size={11} color="#FF5E2E" /></div>
          <span style={{ fontSize: 13, fontWeight: 600 }}>Clear all</span>
        </button>
      )}
    </div>
  );
}

/* ---- A row/stack of assignee avatars ----------------------------------- */
function AssigneeStack({ state, ids, max = 3 }) {
  const techs = (ids || []).map((id) => WOData.employee(state, id)).filter(Boolean);
  if (techs.length === 0) return null;
  const shown = techs.slice(0, max);
  const extra = techs.length - shown.length;
  return (
    <div style={{ display: "flex", alignItems: "center" }}>
      <div style={{ display: "flex" }}>
        {shown.map((t, i) => (
          <div key={t.id} title={t.name} style={{ marginLeft: i ? -8 : 0, borderRadius: "50%", boxShadow: "0 0 0 2px #fff" }}>
            <Avatar name={t.name} color={t.color} size={26} />
          </div>
        ))}
      </div>
      {extra > 0 && <span style={{ marginLeft: 6, fontSize: 12, fontWeight: 600, color: "#515151" }}>+{extra}</span>}
    </div>
  );
}

/* ---- Kanban card ------------------------------------------------------- */
function TicketCard({ ticket, state, onOpen, onAssign, onDragStart, onDragEnd, dragging }) {
  const [menu, setMenu] = useState(false);
  const ids = ticket.assigneeIds || [];
  return (
    <div draggable
      onDragStart={(e) => { e.dataTransfer.effectAllowed = "move"; onDragStart(ticket.id); }}
      onDragEnd={onDragEnd}
      onClick={() => onOpen(ticket.id)}
      style={{
        background: "#fff", border: "1px solid #E6E6E6", borderRadius: 12, padding: 14, cursor: "pointer",
        boxShadow: dragging ? "var(--shadow-lg)" : "var(--shadow-sm)", opacity: dragging ? 0.5 : 1,
        transition: "box-shadow 120ms, transform 120ms", position: "relative",
      }}
      onMouseEnter={(e) => { if (!dragging) e.currentTarget.style.boxShadow = "var(--shadow-md)"; }}
      onMouseLeave={(e) => { if (!dragging) e.currentTarget.style.boxShadow = "var(--shadow-sm)"; }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 9 }}>
        <span style={{ fontFamily: "var(--font-mono)", fontSize: 11.5, color: "#9AA3A5" }}>{ticket.id}</span>
        <PriorityChip priority={ticket.priority} compact />
      </div>
      <div style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 15, lineHeight: 1.25, letterSpacing: "-0.01em", color: "#16331E", marginBottom: 8, textWrap: "pretty" }}>{ticket.title}</div>
      <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 11 }}>
        <CategoryTag category={ticket.category} />
        <span style={{ display: "inline-flex", alignItems: "center", gap: 4, fontSize: 12, color: "#515151" }}>
          <Icon name="map-pin" size={12} color="#9AA3A5" />{ticket.customer.property}{ticket.customer.unit ? " · " + ticket.customer.unit : ""}
        </span>
      </div>
      {ticket.photos.length > 0 && (
        <div style={{ display: "flex", gap: 6, marginBottom: 11 }}>
          {ticket.photos.slice(0, 3).map((p, i) => <PhotoThumb key={i} photo={p} size={42} />)}
          {ticket.photos.length > 3 && <div style={{ width: 42, height: 42, borderRadius: 8, background: "#F2F2F2", display: "flex", alignItems: "center", justifyContent: "center", fontSize: 12, fontWeight: 600, color: "#515151" }}>+{ticket.photos.length - 3}</div>}
        </div>
      )}
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", paddingTop: 10, borderTop: "1px solid #F2F2F2" }}>
        <span style={{ display: "inline-flex", alignItems: "center", gap: 4, fontSize: 11.5, color: "#9AA3A5" }}>
          <Icon name="clock" size={12} color="#9AA3A5" />{timeAgo(ticket.createdAt)}
        </span>
        <div style={{ position: "relative" }} onClick={(e) => e.stopPropagation()}>
          {ids.length > 0 ? (
            <button onClick={() => setMenu((m) => !m)} title="Edit crew" style={{ border: "none", background: "transparent", cursor: "pointer", padding: 0, display: "flex", alignItems: "center", gap: 2 }}>
              <AssigneeStack state={state} ids={ids} />
            </button>
          ) : (
            <button onClick={() => setMenu((m) => !m)} style={{
              display: "inline-flex", alignItems: "center", gap: 5, height: 28, padding: "0 10px", borderRadius: 999, cursor: "pointer",
              border: "1px dashed #2F6B3A", background: "#E5F0E7", color: "#245730", fontSize: 12, fontWeight: 600, fontFamily: "var(--font-sans)",
            }}><Icon name="plus" size={13} color="#245730" />Assign</button>
          )}
          {menu && <AssignPopover state={state} selected={ids} align="right" onClose={() => setMenu(false)} onChange={(next) => onAssign(ticket.id, next)} />}
        </div>
      </div>
    </div>
  );
}

/* ---- Kanban column ----------------------------------------------------- */
function KanbanColumn({ status, tickets, state, onOpen, onAssign, onDrop, dnd, setDnd }) {
  const c = STATUS_COLORS[status.id];
  const [over, setOver] = useState(false);
  const mobile = useIsMobile();
  const colW = mobile ? 270 : 308;
  return (
    <div style={{ display: "flex", flexDirection: "column", minWidth: colW, width: colW, flexShrink: 0 }}
      onDragOver={(e) => { e.preventDefault(); setOver(true); }}
      onDragLeave={() => setOver(false)}
      onDrop={() => { setOver(false); onDrop(status.id); }}>
      <div style={{ display: "flex", alignItems: "center", gap: 8, padding: "0 4px 12px" }}>
        <span style={{ width: 9, height: 9, borderRadius: "50%", background: c.dot }}></span>
        <span style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 14.5, letterSpacing: "-0.01em", color: "#16331E" }}>{status.label}</span>
        <span style={{ fontSize: 12, fontWeight: 600, color: "#9AA3A5", background: "#fff", border: "1px solid #E6E6E6", borderRadius: 999, padding: "1px 8px" }}>{tickets.length}</span>
      </div>
      <div style={{
        flex: 1, background: over ? "#E5F0E7" : "#EDEFEF", borderRadius: 14, padding: 10, display: "flex", flexDirection: "column", gap: 10,
        border: "1.5px " + (over ? "dashed #2F6B3A" : "solid transparent"), transition: "background 120ms, border-color 120ms", minHeight: 120,
      }}>
        {tickets.map((t) => (
          <TicketCard key={t.id} ticket={t} state={state} onOpen={onOpen} onAssign={onAssign}
            dragging={dnd === t.id} onDragStart={setDnd} onDragEnd={() => setDnd(null)} />
        ))}
        {tickets.length === 0 && (
          <div style={{ padding: "28px 12px", textAlign: "center", color: "#9AA3A5", fontSize: 12.5 }}>{status.hint}</div>
        )}
      </div>
    </div>
  );
}

/* ---- Roster ------------------------------------------------------------ */
function RosterCard({ e, state, onOpen, canManage, actions }) {
  const [hover, setHover] = useState(false);
  const isAdmin = e.role === "admin";
  const mine = state.tickets.filter((t) => (t.assigneeIds || []).includes(e.id));
  const active = mine.filter((t) => t.status !== "done");
  const done = mine.length - active.length;
  const pct = e.capacity > 0 ? Math.min(100, Math.round((active.length / e.capacity) * 100)) : 0;
  const over = e.capacity > 0 && active.length >= e.capacity;
  const open = canManage ? () => actions.openEmployee(e.id) : undefined;
  const badge = isAdmin ? "ADMIN" : (e.canDispatch ? "OFFICE" : null);
  return (
    <div onClick={open}
      onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{ background: "#fff", border: "1px solid " + (canManage && hover ? "#2F6B3A" : "#E6E6E6"), borderRadius: 14, padding: 18, boxShadow: canManage && hover ? "var(--shadow-md)" : "var(--shadow-sm)", cursor: canManage ? "pointer" : "default", transition: "box-shadow 120ms, border-color 120ms" }}>
      <div style={{ display: "flex", gap: 13, alignItems: "center", marginBottom: 16 }}>
        <Avatar name={e.name} color={e.color} size={46} />
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 7 }}>
            <div style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 16.5, letterSpacing: "-0.01em", color: "#16331E", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{e.name}</div>
            {badge && (
              <span title={isAdmin ? "Office admin — full access" : "Has office access — can assign work"} style={{ display: "inline-flex", alignItems: "center", gap: 3, padding: "2px 7px", borderRadius: 999, background: "#E5F0E7", color: "#245730", fontSize: 10.5, fontWeight: 700, letterSpacing: "0.02em", flexShrink: 0 }}>
                <Icon name="shield" size={10} color="#245730" />{badge}
              </span>
            )}
          </div>
          <div style={{ fontSize: 13, color: "#2F6B3A", fontWeight: 600 }}>{e.trade}</div>
        </div>
        {canManage && <Icon name="chevron-right" size={18} color={hover ? "#2F6B3A" : "#C5CDCF"} />}
      </div>
      <div style={{ display: "flex", flexDirection: "column", gap: 5, marginBottom: isAdmin ? 0 : 15 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 7, fontSize: 12.5, color: "#515151" }}><Icon name="mail" size={13} color="#9AA3A5" />{e.email}</div>
        <div style={{ display: "flex", alignItems: "center", gap: 7, fontSize: 12.5, color: "#515151" }}><Icon name="phone" size={13} color="#9AA3A5" />{e.phone}</div>
      </div>
      {isAdmin ? (
        <div style={{ marginTop: 14, paddingTop: 13, borderTop: "1px solid #F2F2F2", fontSize: 12.5, color: "#9AA3A5", display: "flex", alignItems: "center", gap: 6 }}>
          <Icon name="shield" size={13} color="#9AA3A5" />Camp office — dispatch &amp; oversight
        </div>
      ) : (
        <React.Fragment>
          <div style={{ marginBottom: 14 }}>
            <div style={{ display: "flex", justifyContent: "space-between", fontSize: 12, marginBottom: 5 }}>
              <span style={{ color: "#515151", fontWeight: 500 }}>Current load</span>
              <span style={{ fontWeight: 700, color: over ? "#FF5E2E" : "#16331E" }}>{active.length} / {e.capacity}</span>
            </div>
            <div style={{ height: 7, background: "#F2F2F2", borderRadius: 999, overflow: "hidden" }}>
              <div style={{ width: pct + "%", height: "100%", borderRadius: 999, background: over ? "#FF5E2E" : "#2F6B3A", transition: "width 240ms var(--ease-out)" }}></div>
            </div>
          </div>
          <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
            {active.length === 0 && <span style={{ fontSize: 12.5, color: "#9AA3A5" }}>No active work orders.</span>}
            {active.slice(0, 3).map((t) => (
              <button key={t.id} onClick={(ev) => { ev.stopPropagation(); onOpen(t.id); }} style={{ display: "inline-flex", alignItems: "center", gap: 6, padding: "5px 10px", borderRadius: 8, border: "1px solid #E6E6E6", background: "#FAFBFB", cursor: "pointer", fontSize: 12 }}>
                <span style={{ width: 6, height: 6, borderRadius: "50%", background: STATUS_COLORS[t.status].dot }}></span>
                <span style={{ fontFamily: "var(--font-mono)", color: "#515151" }}>{t.id}</span>
              </button>
            ))}
            {active.length > 3 && <span style={{ fontSize: 12, color: "#9AA3A5", alignSelf: "center" }}>+{active.length - 3} more</span>}
          </div>
          {done > 0 && <div style={{ marginTop: 12, fontSize: 11.5, color: "#9AA3A5", display: "flex", alignItems: "center", gap: 5 }}><Icon name="check-circle" size={12} color="#0DAB4A" />{done} completed</div>}
        </React.Fragment>
      )}
    </div>
  );
}

function RosterView({ state, onOpen, onAddEmployee, canManage, actions }) {
  const mobile = useIsMobile();
  const [showArchived, setShowArchived] = useState(false);
  const activeCrew = state.employees.filter((e) => e.active);
  const archived = state.employees.filter((e) => !e.active);
  const grid = { display: "grid", gridTemplateColumns: `repeat(auto-fill, minmax(${mobile ? 240 : 330}px, 1fr))`, gap: mobile ? 12 : 16 };
  return (
    <div style={{ padding: mobile ? "16px 14px" : "24px 32px", overflowY: "auto" }}>
      <div style={{ display: "flex", flexWrap: "wrap", gap: 12, justifyContent: "space-between", alignItems: "center", marginBottom: 20 }}>
        <div>
          <h2 style={{ margin: 0, fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 22, letterSpacing: "-0.02em", color: "#16331E" }}>Ranger crew</h2>
          <p style={{ margin: "3px 0 0", fontSize: 13.5, color: "#515151" }}>{activeCrew.length} on the roster{canManage ? " · tap a card to edit" : " · active load shown per person"}</p>
        </div>
        {canManage && <Button kind="ghost" icon="plus" onClick={onAddEmployee}>Add crew member</Button>}
      </div>
      <div style={grid}>
        {activeCrew.map((e) => <RosterCard key={e.id} e={e} state={state} onOpen={onOpen} canManage={canManage} actions={actions} />)}
      </div>

      {canManage && archived.length > 0 && (
        <div style={{ marginTop: 28 }}>
          <Button kind="ghost" size="sm" icon="archive" iconRight={showArchived ? "chevron-down" : "chevron-right"} onClick={() => setShowArchived((v) => !v)}>
            {showArchived ? "Hide" : "Show"} archived ({archived.length})
          </Button>
          {showArchived && (
            <div style={{ ...grid, marginTop: 14 }}>
              {archived.map((e) => <ArchivedRow key={e.id} e={e} canManage={canManage} actions={actions} />)}
            </div>
          )}
        </div>
      )}
    </div>
  );
}

function ArchivedRow({ e, canManage, actions }) {
  const [busy, setBusy] = useState(false);
  return (
    <div onClick={canManage ? () => actions.openEmployee(e.id) : undefined}
      style={{ display: "flex", alignItems: "center", gap: 11, background: "#FAFBFB", border: "1px solid #E6E6E6", borderRadius: 12, padding: "12px 14px", cursor: canManage ? "pointer" : "default" }}>
      <div style={{ opacity: 0.5 }}><Avatar name={e.name} color={e.color} size={36} /></div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ fontSize: 14, fontWeight: 600, color: "#515151" }}>{e.name}</div>
        <div style={{ fontSize: 12, color: "#9AA3A5" }}>{e.trade}</div>
      </div>
      <Button kind="ghost" size="sm" icon="rotate-ccw" disabled={busy}
        onClick={async (ev) => { ev.stopPropagation(); setBusy(true); try { await actions.restoreEmployee(e.id); } finally { setBusy(false); } }}>Restore</Button>
    </div>
  );
}

/* ---- Admin shell ------------------------------------------------------- */
function AdminView({ state, actions, openId, setOpenId, user }) {
  const [tab, setTab] = useState("board"); // board | roster
  const canManage = !!user && user.role === "admin"; // only admins manage accounts
  const mobile = useIsMobile();
  const [q, setQ] = useState("");
  const [pri, setPri] = useState("all");
  const [dnd, setDnd] = useState(null);

  const filtered = useMemo(() => {
    return state.tickets.filter((t) => {
      if (pri !== "all" && t.priority !== pri) return false;
      if (q) {
        const s = (t.id + " " + t.title + " " + t.customer.name + " " + t.customer.property + " " + t.category).toLowerCase();
        if (!s.includes(q.toLowerCase())) return false;
      }
      return true;
    });
  }, [state.tickets, q, pri]);

  const byStatus = (sid) => filtered.filter((t) => t.status === sid).sort((a, b) =>
    (WOData.priorityRank(a.priority) - WOData.priorityRank(b.priority)) || (new Date(b.updatedAt) - new Date(a.updatedAt)));

  const stats = useMemo(() => ({
    open: state.tickets.filter((t) => t.status !== "done").length,
    unassigned: state.tickets.filter((t) => t.status === "new").length,
    urgent: state.tickets.filter((t) => t.priority === "urgent" && t.status !== "done").length,
    done: state.tickets.filter((t) => t.status === "done").length,
  }), [state.tickets]);

  function handleDrop(statusId) {
    if (dnd) actions.moveTicket(dnd, statusId);
    setDnd(null);
  }

  return (
    <div style={{ display: "flex", flexDirection: "column", height: "100%", background: "#F2F2F2" }}>
      {/* Admin header */}
      <div style={{ background: "#fff", borderBottom: "1px solid #E6E6E6", padding: mobile ? "0 14px" : "0 32px" }}>
        <div style={{ display: "flex", flexWrap: "wrap", gap: 12, alignItems: "center", justifyContent: "space-between", paddingTop: 20 }}>
          <div>
            <div style={{ fontSize: 12.5, fontWeight: 600, color: "#2F6B3A", letterSpacing: "0.04em", textTransform: "uppercase" }}>Camp Office</div>
            <h1 style={{ margin: "2px 0 0", fontFamily: "var(--font-display)", fontWeight: 700, fontSize: mobile ? 21 : 26, letterSpacing: "-0.025em", color: "#16331E" }}>Dispatch board</h1>
          </div>
          <div style={{ display: "flex", gap: mobile ? 14 : 18 }}>
            {[
              { k: "open", label: "Open", v: stats.open, color: "#2F6B3A" },
              { k: "unassigned", label: "Unassigned", v: stats.unassigned, color: "#515151" },
              { k: "urgent", label: "Urgent", v: stats.urgent, color: "#FF5E2E" },
              { k: "done", label: "Completed", v: stats.done, color: "#0DAB4A" },
            ].map((s) => (
              <div key={s.k} style={{ textAlign: "right" }}>
                <div style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 26, lineHeight: 1, color: s.color, letterSpacing: "-0.02em" }}>{s.v}</div>
                <div style={{ fontSize: 11.5, color: "#9AA3A5", fontWeight: 500, marginTop: 3 }}>{s.label}</div>
              </div>
            ))}
          </div>
        </div>
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginTop: 18 }}>
          <div style={{ display: "flex", gap: 4 }}>
            {[{ id: "board", label: "Board", icon: "layout-grid" }, { id: "roster", label: "Roster", icon: "users" }].map((t) => (
              <button key={t.id} onClick={() => setTab(t.id)} style={{
                display: "inline-flex", alignItems: "center", gap: 7, padding: "10px 4px", marginRight: 18, border: "none", background: "transparent", cursor: "pointer",
                fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 14.5, color: tab === t.id ? "#16331E" : "#9AA3A5",
                borderBottom: "2px solid " + (tab === t.id ? "#2F6B3A" : "transparent"), marginBottom: -1,
              }}><Icon name={t.icon} size={16} color={tab === t.id ? "#2F6B3A" : "#9AA3A5"} />{t.label}</button>
            ))}
          </div>
          {tab === "board" && (
            <div style={{ display: "flex", gap: 10, alignItems: "center", paddingBottom: 8 }}>
              <div style={{ position: "relative" }}>
                <Icon name="search" size={15} color="#9AA3A5" style={{ position: "absolute", left: 12, top: 11 }} />
                <input value={q} onChange={(e) => setQ(e.target.value)} placeholder="Search requests…" style={{
                  height: 38, width: mobile ? 150 : 240, padding: "0 12px 0 34px", borderRadius: 8, border: "1px solid #E6E6E6", fontSize: 13.5, fontFamily: "var(--font-sans)", color: "#16331E", outline: "none",
                }} onFocus={(e) => e.target.style.borderColor = "#2F6B3A"} onBlur={(e) => e.target.style.borderColor = "#E6E6E6"} />
              </div>
              <div style={{ position: "relative" }}>
                <select value={pri} onChange={(e) => setPri(e.target.value)} style={{
                  height: 38, padding: "0 30px 0 12px", borderRadius: 8, border: "1px solid #E6E6E6", fontSize: 13.5, fontFamily: "var(--font-sans)", color: "#16331E", appearance: "none", cursor: "pointer", background: "#fff",
                }}>
                  <option value="all">All priorities</option>
                  {WOData.PRIORITIES.map((p) => <option key={p.id} value={p.id}>{p.label}</option>)}
                </select>
                <Icon name="chevron-down" size={15} color="#515151" style={{ position: "absolute", right: 10, top: 11, pointerEvents: "none" }} />
              </div>
            </div>
          )}
        </div>
      </div>

      {/* Body */}
      {tab === "board" ? (
        <div style={{ flex: 1, overflow: "auto", padding: mobile ? "14px" : "20px 32px" }}>
          <div style={{ display: "flex", gap: mobile ? 12 : 16, minHeight: "100%", alignItems: "stretch" }}>
            {WOData.STATUSES.map((s) => (
              <KanbanColumn key={s.id} status={s} tickets={byStatus(s.id)} state={state}
                onOpen={setOpenId} onAssign={actions.assign} onDrop={handleDrop} dnd={dnd} setDnd={setDnd} />
            ))}
          </div>
        </div>
      ) : (
        <div style={{ flex: 1, overflow: "hidden" }}>
          <RosterView state={state} onOpen={setOpenId} onAddEmployee={actions.addEmployee} canManage={canManage} actions={actions} />
        </div>
      )}

      <TicketModal openId={openId} onClose={() => setOpenId(null)} state={state} actions={actions} role="admin" />
    </div>
  );
}

Object.assign(window, { AdminView, AssignPopover, AssigneeStack, TicketCard, KanbanColumn, RosterView, RosterCard, ArchivedRow });