// screens-operations-2.jsx — Escalations + Custom Requests (design visuals,
// live backend). Uses shared helpers from screens-operations.jsx
// (useOpsAsync, relTime, OverviewCard, FilterPill, PrioTag, ESC_STATUS, REQ_STATUS).


/* ============================ ESCALATIONS ============================== */
function EscalationsScreen() {
  const data = useStore();
  const [st, refetch] = useOpsAsync(() => API.escalations.list(""), []);
  const [reqSt] = useOpsAsync(() => API.customRequests.list(""), []);
  const [prioF, setPrioF] = useOpsState("all");
  const [statusF, setStatusF] = useOpsState("all");
  const [openId, setOpenId] = useOpsState(null);

  const items = st.data?.escalations || [];
  const reqLeadIds = new Set((reqSt.data?.requests || []).map((r) => r.leadId).filter(Boolean));
  const filtered = items.filter((e) => (prioF === "all" || e.priority === prioF) && (statusF === "all" || e.status === statusF));
  const current = openId ? items.find((x) => x.id === openId) : null;

  const overview = [
    { label: "Open escalations", value: items.filter((e) => e.status === "open").length, icon: "alert", c: "var(--color-orange)" },
    { label: "High priority", value: items.filter((e) => e.priority === "high").length, icon: "flame", c: "var(--color-danger)" },
    { label: "In review", value: items.filter((e) => e.status === "review").length, icon: "eye", c: "var(--color-blue)" },
    { label: "Resolved", value: items.filter((e) => e.status === "resolved").length, icon: "checkcircle", c: "var(--color-success)" },
  ];
  const personOf = (id) => (data.CONTACTS || []).find((c) => c.id === id)?.person || "—";
  const platformOf = (id) => (data.CONTACTS || []).find((c) => c.id === id)?.platform || "—";
  const lastUpdated = (e) => { const h = (e.history || [])[(e.history || []).length - 1]; return relTime(h?.at || e.createdAt); };

  return (
    <div className="content__inner content__inner--wide fade-up" style={{ maxWidth: 1280 }}>
      <OpsError msg={st.error} />
      <div className="grid" style={{ gridTemplateColumns: "repeat(4,1fr)", gap: 12, marginBottom: 28 }}>
        {overview.map((o) => <OverviewCard key={o.label} {...o} />)}
      </div>

      <div className="between" style={{ marginBottom: 16 }}>
        <div className="row wrap" style={{ gap: 8 }}>
          <FilterPill on={statusF === "all" && prioF === "all"} onClick={() => { setStatusF("all"); setPrioF("all"); }}>All</FilterPill>
          {Object.entries(ESC_STATUS).map(([k, m]) => <FilterPill key={k} on={statusF === k} onClick={() => setStatusF(statusF === k ? "all" : k)}>{m.label}</FilterPill>)}
        </div>
        <div className="row" style={{ gap: 8 }}>
          <FilterPill on={prioF === "high"} onClick={() => setPrioF(prioF === "high" ? "all" : "high")}>High priority</FilterPill>
          <button className="btn btn--ghost btn--sm" onClick={refetch}><Icon name="refresh" size={14} />Refresh</button>
        </div>
      </div>

      {st.loading ? <Card><div className="skel" style={{ height: 180, borderRadius: 8 }} /></Card>
        : filtered.length === 0 ? (
          <Card><EmptyState icon="checkcircle" title="Nothing needs you right now" body="When the AI hits something it can't handle, it lands here for a human." /></Card>
        ) : (
          <Card flush>
            <table className="table">
              <thead><tr><th>Lead</th><th>Platform</th><th>Reason</th><th>Priority</th><th>Status</th><th>Assigned</th><th>Created</th><th>Updated</th></tr></thead>
              <tbody>
                {filtered.map((e) => {
                  const m = ESC_STATUS[e.status] || ESC_STATUS.open;
                  return (
                    <tr key={e.id} onClick={() => setOpenId(e.id)}>
                      <td><div className="row" style={{ gap: 10 }}><Avatar name={e.company} size="sm" /><div><div style={{ fontWeight: 700, fontSize: 13.5 }}>{e.company}</div><div style={{ fontSize: 11.5, color: "var(--fg-4)" }}>{personOf(e.leadId)}</div></div></div></td>
                      <td><Badge tone="neutral">{platformOf(e.leadId)}</Badge></td>
                      <td style={{ fontSize: 13, fontWeight: 600 }}>{(e.triggers || [])[0] || "Needs review"}</td>
                      <td><PrioTag p={e.priority} /></td>
                      <td><Badge tone={m.tone} dot={m.c}>{m.label}</Badge></td>
                      <td style={{ fontSize: 13 }}>{e.assignee ? <span className="row" style={{ gap: 6 }}><Avatar name={e.assignee} size="sm" />{e.assignee.split(" ")[0]}</span> : <span className="subtle">Unassigned</span>}</td>
                      <td style={{ fontSize: 12, color: "var(--fg-4)" }}>{relTime(e.createdAt)}</td>
                      <td style={{ fontSize: 12, color: "var(--fg-4)" }}>{lastUpdated(e)}</td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </Card>
        )}
      {current && <EscalationDrawer esc={current} hasRequest={reqLeadIds.has(current.leadId)} onClose={() => setOpenId(null)} onChanged={refetch} />}
    </div>
  );
}

function EscalationDrawer({ esc: e, hasRequest, onClose, onChanged }) {
  const { go, openContact } = useApp();
  const data = useStore();
  // Assignee options come from the configured team (Settings), not hardcoded names.
  const teamNames = (data.SETTINGS?.team || []).map((tm) => tm.name).filter(Boolean);
  const m = ESC_STATUS[e.status] || ESC_STATUS.open;
  const s = e.summary || {};
  const [note, setNote] = useOpsState("");
  const [assignOpen, setAssignOpen] = useOpsState(false);
  const [busy, setBusy] = useOpsState(false);
  const [err, setErr] = useOpsState(null);
  const lead = (data.CONTACTS || []).find((c) => c.id === e.leadId);

  const update = async (patch) => { setBusy(true); setErr(null); try { await API.escalations.update(e.id, patch); await onChanged(); } catch (ex) { setErr(ex.message); } finally { setBusy(false); } };
  const addNote = async () => { if (!note.trim()) return; const text = note.trim(); setNote(""); await update({ note: text }); };
  const timeline = (e.history || []).map((h) => [h.detail || h.action, relTime(h.at)]);
  const opportunity = s.opportunity || `${(e.value || "M")} opportunity`;

  return (
    <Drawer onClose={onClose}>
      <DrawerHead title={e.company} sub={`${(e.triggers || [])[0] || "Escalation"} · ${lead?.platform || "—"}`} onClose={onClose} right={<Badge tone={m.tone} dot={m.c}>{m.label}</Badge>} />
      <div style={{ overflowY: "auto", padding: 24, display: "flex", flexDirection: "column", gap: 16 }}>
        <OpsError msg={err} />
        {/* AI summary hero */}
        <div style={{ background: "var(--color-primary-tint-soft)", border: "1px solid var(--color-primary-tint)", borderRadius: 16, padding: 18 }}>
          <div className="row" style={{ gap: 8, marginBottom: 8 }}><Icon name="sparkles" size={18} style={{ color: "var(--color-secondary)" }} /><b style={{ color: "var(--color-secondary)", fontSize: 13 }}>AI summary</b></div>
          <p style={{ fontSize: 14, lineHeight: 1.55, color: "var(--fg-1)" }}>{s.conversation || s.opportunity || "Escalated for human review."}</p>
          <div className="row wrap" style={{ gap: 8, marginTop: 12 }}><Badge tone="lime"><Icon name="trophy" size={13} />{opportunity}</Badge><PrioTag p={e.priority} /><OppBadge band={e.value || "M"} /></div>
        </div>

        <Card title="Recommended next action"><p style={{ fontSize: 14, lineHeight: 1.55, color: "var(--fg-2)" }}>{s.recommendation || "Review and prepare a tailored proposal."}</p></Card>
        <Card title="Requirements"><p style={{ fontSize: 13.5, lineHeight: 1.55, color: "var(--fg-2)" }}>{s.requirements || "—"}</p></Card>

        {/* related */}
        <Card title="Related">
          <div className="col" style={{ gap: 8 }}>
            {lead && <button className="between" style={{ background: "var(--bg-2)", border: "none", borderRadius: 10, padding: "10px 12px", cursor: "pointer", width: "100%" }} onClick={() => { onClose(); openContact(lead); }}>
              <span className="row" style={{ gap: 8, fontSize: 13, fontWeight: 600 }}><Icon name="user" size={15} style={{ color: "var(--fg-3)" }} />Lead · {e.company}</span><Icon name="chevronRight" size={16} style={{ color: "var(--fg-disabled)" }} />
            </button>}
            {e.conversationId && <button className="between" style={{ background: "var(--bg-2)", border: "none", borderRadius: 10, padding: "10px 12px", cursor: "pointer", width: "100%" }} onClick={() => { onClose(); go("conversations"); }}>
              <span className="row" style={{ gap: 8, fontSize: 13, fontWeight: 600 }}><Icon name="message" size={15} style={{ color: "var(--fg-3)" }} />Conversation</span><Icon name="chevronRight" size={16} style={{ color: "var(--fg-disabled)" }} />
            </button>}
            {hasRequest && <button className="between" style={{ background: "var(--bg-2)", border: "none", borderRadius: 10, padding: "10px 12px", cursor: "pointer", width: "100%" }} onClick={() => { onClose(); go("requests"); }}>
              <span className="row" style={{ gap: 8, fontSize: 13, fontWeight: 600 }}><Icon name="tag" size={15} style={{ color: "var(--fg-3)" }} />Custom request</span><Icon name="chevronRight" size={16} style={{ color: "var(--fg-disabled)" }} />
            </button>}
          </div>
        </Card>

        {/* timeline */}
        {timeline.length > 0 && <Card title="History">
          <div className="col" style={{ gap: 0 }}>
            {timeline.map(([label, at], i) => (
              <div key={i} className="row" style={{ gap: 12, alignItems: "flex-start", paddingBottom: i < timeline.length - 1 ? 14 : 0 }}>
                <div className="col" style={{ alignItems: "center" }}>
                  <span className="sdot" style={{ background: "var(--color-secondary)", width: 9, height: 9, marginTop: 4 }} />
                  {i < timeline.length - 1 && <span style={{ width: 1.5, flex: 1, minHeight: 16, background: "var(--border-2)" }} />}
                </div>
                <div style={{ flex: 1 }}><div style={{ fontSize: 13, fontWeight: 600 }}>{label}</div><div style={{ fontSize: 11.5, color: "var(--fg-4)" }}>{at}</div></div>
              </div>
            ))}
          </div>
        </Card>}

        {/* internal notes */}
        <Card title="Internal notes">
          <div className="row" style={{ gap: 8, marginBottom: (e.notes || []).length ? 14 : 0 }}>
            <input className="input" placeholder="Add a note for the team…" value={note} disabled={busy} onChange={(ev) => setNote(ev.target.value)} onKeyDown={(ev) => ev.key === "Enter" && addNote()} style={{ flex: 1 }} />
            <Button variant="dark" size="sm" icon="plus" disabled={busy || !note.trim()} onClick={addNote}>Add</Button>
          </div>
          <div className="col" style={{ gap: 12 }}>
            {(e.notes || []).map((n, i) => (
              <div key={i} className="row" style={{ gap: 10, alignItems: "flex-start" }}>
                <Avatar name={n.by} size="sm" />
                <div style={{ flex: 1 }}><div className="row" style={{ gap: 6 }}><b style={{ fontSize: 12.5 }}>{(n.by || "").split(" ")[0]}</b><span style={{ fontSize: 11, color: "var(--fg-disabled)" }}>{relTime(n.at)}</span></div><p style={{ fontSize: 13, color: "var(--fg-2)", marginTop: 2, lineHeight: 1.45 }}>{n.text}</p></div>
              </div>
            ))}
          </div>
        </Card>
      </div>

      {/* sticky action bar */}
      <div style={{ borderTop: "1px solid var(--border-1)", background: "#fff", padding: 16 }}>
        <div className="row wrap" style={{ gap: 8 }}>
          <div style={{ position: "relative" }}>
            <Button variant="dark" size="sm" icon="user" iconEnd="chevronDown" disabled={busy} onClick={() => setAssignOpen((o) => !o)}>{e.assignee ? "Reassign" : "Assign"}</Button>
            {assignOpen && <>
              <div style={{ position: "fixed", inset: 0, zIndex: 51 }} onClick={() => setAssignOpen(false)} />
              <div style={{ position: "absolute", bottom: 44, insetInlineStart: 0, zIndex: 52, width: 220, background: "#fff", border: "1px solid var(--border-1)", borderRadius: "var(--radius-md)", boxShadow: "var(--shadow-lg)", padding: 6 }}>
                {teamNames.map((p) => (
                  <button key={p} onClick={() => { setAssignOpen(false); update({ assignee: p, status: e.status === "open" ? "review" : e.status }); }}
                    style={{ width: "100%", display: "flex", alignItems: "center", gap: 10, padding: "9px 10px", borderRadius: "var(--radius-xs)", cursor: "pointer", textAlign: "start", fontSize: 13.5, background: e.assignee === p ? "var(--color-primary-tint-soft)" : "transparent" }}>
                    <Avatar name={p} size="sm" />{p}{e.assignee === p && <Icon name="check" size={14} style={{ marginInlineStart: "auto", color: "var(--color-secondary)" }} />}
                  </button>
                ))}
              </div>
            </>}
          </div>
          {e.status !== "resolved" && <Button variant="primary" size="sm" icon="check" disabled={busy} onClick={() => update({ status: "resolved" })}>Mark resolved</Button>}
          <button className="btn btn--ghost btn--sm" disabled={busy} onClick={() => update({ status: "review" })}><Icon name="eye" size={14} />In review</button>
          <button className="btn btn--ghost btn--sm" disabled={busy} onClick={() => update({ status: "closed" })}><Icon name="bot" size={14} />Return to AI</button>
        </div>
      </div>
    </Drawer>
  );
}

/* ============================ CUSTOM REQUESTS ========================== */
const PROPOSAL_FOR = { new: "Not started", pricing: "Needs pricing", reviewed: "Reviewing", proposal: "Sent", won: "Won", lost: "Lost" };

function CustomRequestsScreen() {
  const data = useStore();
  const [st, refetch] = useOpsAsync(() => API.customRequests.list(""), []);
  const [escSt] = useOpsAsync(() => API.escalations.list(""), []);
  const [catF, setCatF] = useOpsState("all");
  const [openId, setOpenId] = useOpsState(null);

  const items = st.data?.requests || [];
  const escLeadIds = new Set((escSt.data?.escalations || []).map((e) => e.leadId).filter(Boolean));
  const catOf = (r) => r.categoryLabel || r.category || "Other";
  const filtered = items.filter((r) => catF === "all" || catOf(r) === catF);
  const current = openId ? items.find((x) => x.id === openId) : null;
  const cats = ["all", ...Array.from(new Set(items.map(catOf)))];

  const highValue = items.filter((r) => ["L", "XL"].includes(r.estimatedValue)).length;
  const overview = [
    { label: "New requests", value: items.filter((r) => r.status === "new").length, icon: "sparkles", c: "var(--color-blue)" },
    { label: "High value", value: highValue, icon: "trophy", c: "var(--color-secondary)" },
    { label: "Needs pricing", value: items.filter((r) => r.status === "pricing").length, icon: "tag", c: "var(--color-orange)" },
    { label: "Proposals sent", value: items.filter((r) => r.status === "proposal").length, icon: "fileText", c: "var(--color-success)" },
  ];
  const personOf = (id) => (data.CONTACTS || []).find((c) => c.id === id)?.person || "—";

  return (
    <div className="content__inner content__inner--wide fade-up" style={{ maxWidth: 1280 }}>
      <OpsError msg={st.error} />
      <div className="grid" style={{ gridTemplateColumns: "repeat(4,1fr)", gap: 12, marginBottom: 28 }}>
        {overview.map((o) => <OverviewCard key={o.label} {...o} />)}
      </div>

      <div className="between" style={{ marginBottom: 16 }}>
        <div className="row wrap" style={{ gap: 8 }}>
          {cats.map((c) => <FilterPill key={c} on={catF === c} onClick={() => setCatF(c)}>{c === "all" ? "All categories" : c}</FilterPill>)}
        </div>
        <button className="btn btn--ghost btn--sm" onClick={refetch}><Icon name="refresh" size={14} />Refresh</button>
      </div>

      {st.loading ? <Card><div className="skel" style={{ height: 180, borderRadius: 8 }} /></Card>
        : filtered.length === 0 ? (
          <Card><EmptyState icon="tag" title="No requests in this category" body="When a lead asks for something outside the standard offers, the AI files it here." /></Card>
        ) : (
          <Card flush>
            <table className="table">
              <thead><tr><th>Lead</th><th>Category</th><th>Request</th><th>Est. value</th><th>Priority</th><th>Status</th><th>Created</th></tr></thead>
              <tbody>
                {filtered.map((r) => {
                  const m = REQ_STATUS[r.status] || REQ_STATUS.new;
                  return (
                    <tr key={r.id} onClick={() => setOpenId(r.id)}>
                      <td><div className="row" style={{ gap: 10 }}><Avatar name={r.company} size="sm" /><div><div style={{ fontWeight: 700, fontSize: 13.5 }}>{r.company}</div><div style={{ fontSize: 11.5, color: "var(--fg-4)" }}>{personOf(r.leadId)}</div></div></div></td>
                      <td><Badge tone="purple">{catOf(r)}</Badge></td>
                      <td style={{ fontSize: 12.5, color: "var(--fg-2)", maxWidth: 260, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{r.description}</td>
                      <td><OppBadge band={r.estimatedValue || "M"} /></td>
                      <td><PrioTag p={r.priority} /></td>
                      <td><Badge tone={m.tone} dot={m.c}>{m.label}</Badge></td>
                      <td style={{ fontSize: 12, color: "var(--fg-4)" }}>{relTime(r.createdAt)}</td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </Card>
        )}
      {current && <RequestDrawer req={current} hasEscalation={escLeadIds.has(current.leadId)} onClose={() => setOpenId(null)} onChanged={refetch} />}
    </div>
  );
}

function RequestDrawer({ req: r, hasEscalation, onClose, onChanged }) {
  const { go, openContact } = useApp();
  const data = useStore();
  const m = REQ_STATUS[r.status] || REQ_STATUS.new;
  const [note, setNote] = useOpsState("");
  const [busy, setBusy] = useOpsState(false);
  const [err, setErr] = useOpsState(null);
  const lead = (data.CONTACTS || []).find((c) => c.id === r.leadId);
  const cat = r.categoryLabel || r.category || "Other";

  const update = async (patch) => { setBusy(true); setErr(null); try { await API.customRequests.update(r.id, patch); await onChanged(); } catch (ex) { setErr(ex.message); } finally { setBusy(false); } };
  const addNote = async () => { if (!note.trim()) return; const text = note.trim(); setNote(""); await update({ note: text }); };

  return (
    <Drawer onClose={onClose}>
      <DrawerHead title={r.company} sub={`${cat}`} onClose={onClose} right={<Badge tone={m.tone} dot={m.c}>{m.label}</Badge>} />
      <div style={{ overflowY: "auto", padding: 24, display: "flex", flexDirection: "column", gap: 16 }}>
        <OpsError msg={err} />
        <div className="row wrap" style={{ gap: 8 }}>
          <Badge tone="purple">{cat}</Badge><PrioTag p={r.priority} /><Badge tone="lime"><Icon name="trophy" size={13} /><OppBadge band={r.estimatedValue || "M"} /></Badge>
        </div>

        <Card title="Customer request"><p style={{ fontSize: 14, lineHeight: 1.6, color: "var(--fg-1)" }}>{r.description || "—"}</p></Card>

        <div style={{ background: "var(--color-primary-tint-soft)", border: "1px solid var(--color-primary-tint)", borderRadius: 16, padding: 18 }}>
          <div className="row" style={{ gap: 8, marginBottom: 8 }}><Icon name="sparkles" size={18} style={{ color: "var(--color-secondary)" }} /><b style={{ color: "var(--color-secondary)", fontSize: 13 }}>AI classification</b></div>
          <div style={{ fontSize: 13.5, color: "var(--fg-1)", marginBottom: 10 }}>{cat} · {r.category}</div>
          <div className="between" style={{ paddingTop: 10, borderTop: "1px solid var(--color-primary-tint)" }}>
            <span className="muted" style={{ fontSize: 12.5 }}>Suggested next action</span>
          </div>
          <p style={{ fontSize: 13.5, color: "var(--fg-1)", marginTop: 6, lineHeight: 1.5 }}>{r.suggestedNextAction || "Prepare a tailored proposal and route to the Maxab Hub team."}</p>
        </div>

        <Card title="Proposal status">
          <div className="between"><span className="muted" style={{ fontSize: 13 }}>Current</span><Badge tone={r.status === "proposal" ? "green" : r.status === "pricing" ? "orange" : "neutral"}>{PROPOSAL_FOR[r.status] || "Not started"}</Badge></div>
        </Card>

        <Card title="Related">
          <div className="col" style={{ gap: 8 }}>
            {lead && <button className="between" style={{ background: "var(--bg-2)", border: "none", borderRadius: 10, padding: "10px 12px", cursor: "pointer", width: "100%" }} onClick={() => { onClose(); openContact(lead); }}>
              <span className="row" style={{ gap: 8, fontSize: 13, fontWeight: 600 }}><Icon name="user" size={15} style={{ color: "var(--fg-3)" }} />Lead · {r.company}</span><Icon name="chevronRight" size={16} style={{ color: "var(--fg-disabled)" }} />
            </button>}
            {r.conversationId && <button className="between" style={{ background: "var(--bg-2)", border: "none", borderRadius: 10, padding: "10px 12px", cursor: "pointer", width: "100%" }} onClick={() => { onClose(); go("conversations"); }}>
              <span className="row" style={{ gap: 8, fontSize: 13, fontWeight: 600 }}><Icon name="message" size={15} style={{ color: "var(--fg-3)" }} />Conversation</span><Icon name="chevronRight" size={16} style={{ color: "var(--fg-disabled)" }} />
            </button>}
            {hasEscalation && <button className="between" style={{ background: "var(--bg-2)", border: "none", borderRadius: 10, padding: "10px 12px", cursor: "pointer", width: "100%" }} onClick={() => { onClose(); go("escalations"); }}>
              <span className="row" style={{ gap: 8, fontSize: 13, fontWeight: 600 }}><Icon name="alert" size={15} style={{ color: "var(--fg-3)" }} />Escalation</span><Icon name="chevronRight" size={16} style={{ color: "var(--fg-disabled)" }} />
            </button>}
          </div>
        </Card>

        <Card title="Internal notes">
          <div className="row" style={{ gap: 8, marginBottom: (r.notes || []).length ? 14 : 0 }}>
            <input className="input" placeholder="Add a note…" value={note} disabled={busy} onChange={(ev) => setNote(ev.target.value)} onKeyDown={(ev) => ev.key === "Enter" && addNote()} style={{ flex: 1 }} />
            <Button variant="dark" size="sm" icon="plus" disabled={busy || !note.trim()} onClick={addNote}>Add</Button>
          </div>
          {(r.notes || []).length === 0 ? <span className="muted" style={{ fontSize: 13 }}>No notes yet.</span> : <div className="col" style={{ gap: 12 }}>
            {(r.notes || []).map((n, i) => <div key={i} className="row" style={{ gap: 10, alignItems: "flex-start" }}><Avatar name={n.by} size="sm" /><div style={{ flex: 1 }}><div className="row" style={{ gap: 6 }}><b style={{ fontSize: 12.5 }}>{(n.by || "").split(" ")[0]}</b><span style={{ fontSize: 11, color: "var(--fg-disabled)" }}>{relTime(n.at)}</span></div><p style={{ fontSize: 13, color: "var(--fg-2)", marginTop: 2 }}>{n.text}</p></div></div>)}
          </div>}
        </Card>
      </div>

      <div style={{ borderTop: "1px solid var(--border-1)", background: "#fff", padding: 16 }}>
        <div className="row wrap" style={{ gap: 8 }}>
          <Button variant="primary" size="sm" icon="fileText" disabled={busy} onClick={() => update({ status: "proposal" })}>Create proposal</Button>
          <button className="btn btn--ghost btn--sm" disabled={busy} onClick={() => update({ status: "reviewed" })}><Icon name="eye" size={14} />Mark reviewed</button>
          <button className="btn btn--ghost btn--sm" disabled={busy} onClick={() => update({ status: "won" })}><Icon name="trophy" size={14} />Won</button>
          <button className="btn btn--ghost btn--sm" disabled={busy} onClick={() => update({ status: "lost" })}><Icon name="ban" size={14} />Lost</button>
        </div>
      </div>
    </Drawer>
  );
}

window.EscalationsScreen = EscalationsScreen;
window.CustomRequestsScreen = CustomRequestsScreen;