setReply(e.target.value)} />
        <Button disabled={replying || !reply.trim()} onClick={sendReply}>{replying ? 'Sending…' : 'Reply'}</Button>
      </div>

{/* Decision */}
      {pending ? (
        <div className="space-y-3 border-t bg-muted/30 p-3">
          {error && <div className="rounded-md bg-destructive/10 px-3 py-2 text-sm text-destructive">{error}</div>}
          <div className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">Convert to Help Desk</div>
          <Input value={title} onChange={e => setTitle(e.target.value)} placeholder="Ticket title" />
          <div className="flex flex-wrap items-center gap-2">
            <Select className="w-32" value={priority} onChange={e => setPriority(e.target.value)}>{['low', 'medium', 'high', 'critical'].map(p => <option key={p} value={p}>{titleCase(p)}</option>)}</Select>
            <Select className="w-36" value={category} onChange={e => setCategory(e.target.value)}>{['general', 'bug', 'feature', 'question', 'access'].map(c => <option key={c} value={c}>{titleCase(c)}</option>)}</Select>
            <Button className="ml-auto" disabled={busy || !title.trim()} onClick={convert}>Convert to ticket</Button>
            <Button variant="outline" disabled={busy} onClick={dismiss}>Dismiss</Button>
          </div>
        </div>
      ) : (
        <div className="border-t p-3 text-sm text-muted-foreground">
          <Badge variant="outline">{(item.status || '').replace('_', ' ')}</Badge>
          {item.linkedTicketId && <span className="ml-2">Ticket {String(item.linkedTicketId).slice(0, 8)}</span>}
          {item.linkedGithubIssueNumber && <span className="ml-2">GH #{item.linkedGithubIssueNumber}</span>}
        </div>
      )}
    </Card>
  );
}

function SlackInbox() {
  const [statusFilter, setStatusFilter] = useState('pending');
  const [triggerFilter, setTriggerFilter] = useState('all');
  const [items, setItems] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  const [selId, setSelId] = useState(null);
  const [page, setPage] = useState(1);
  const [overviewOpen, setOverviewOpen] = useOverviewOpen();

async function reload() {
    setLoading(true);
    try {
      const list = await api.fetchSlackInbox(statusFilter);
      const arr = Array.isArray(list) ? list : (list.items || []);
      setItems(arr); setError(null); setSelId(arr[0] ? arr[0].id : null);
    } catch (e) { setError(e.message || 'Failed to load Slack inbox'); }
    finally { setLoading(false); }
  }
  useEffect(() => { reload(); }, [statusFilter]);
  useEffect(() => { setPage(1); }, [statusFilter, triggerFilter]);

const filtered = items.filter(i => triggerFilter === 'all' || i.triggerType === triggerFilter);
  const pageCount = Math.max(1, Math.ceil(filtered.length / PER_PAGE));
  const paged = filtered.slice((page - 1) * PER_PAGE, page * PER_PAGE);
  const sel = items.find(i => i.id === selId);

function onDecided(updated) {
    if (statusFilter === 'pending') { setItems(prev => prev.filter(x => x.id !== (updated && updated.id))); setSelId(null); }
    else if (updated) setItems(prev => prev.map(x => x.id === updated.id ? updated : x));
  }

const Seg = ({ opts, value, onChange }) => (
    <div className="inline-flex flex-wrap gap-1 rounded-lg bg-muted p-1">
      {opts.map(([k, label]) => (
        <button key={k} onClick={() => onChange(k)}
          className={cn('rounded-md px-3 py-1 text-sm font-medium transition-colors', value === k ? 'bg-background text-foreground shadow' : 'text-muted-foreground hover:text-foreground')}>{label}</button>
      ))}
    </div>
  );

return (
    <div className="space-y-4">
      {overviewOpen && (
        <Card className="border-primary/20 bg-primary/5">
          <CardContent className="pt-6">
            <h2 className="text-2xl font-semibold tracking-tight">Slack inbox</h2>
            <p className="mt-1 text-sm text-muted-foreground">Messages flagged from Slack via an @dispatch mention or a trigger emoji. Open one to read the thread, reply, then convert it to a Help Desk ticket or dismiss it.</p>
          </CardContent>
        </Card>
      )}

{error && <div className="rounded-md border border-amber-300 bg-amber-50 px-4 py-2 text-sm text-amber-800">{error}</div>}

{/* Two-pane: message list (left) + conversation (right). */}
      <div className="grid gap-4 lg:grid-cols-[minmax(0,380px)_minmax(0,1fr)]">
        <Card className="flex h-[70vh] min-h-[480px] flex-col">
          <div className="flex-1 divide-y overflow-y-auto">
            {loading && filtered.length === 0 && <div className="p-4 text-sm text-muted-foreground">Loading…</div>}
            {!loading && filtered.length === 0 && <div className="p-6 text-center text-sm text-muted-foreground">{statusFilter === 'pending' ? 'Inbox zero — nothing awaiting triage.' : 'Nothing here.'}</div>}
            {paged.map(i => (
              <button key={i.id} onClick={() => setSelId(i.id)}
                className={cn('flex w-full items-start gap-3 p-3 text-left transition-colors hover:bg-muted/50', selId === i.id && 'bg-muted/60')}>
                <div className="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full bg-muted text-xs font-semibold">{slkInitials(slkAuthor(i))}</div>
                <div className="min-w-0 flex-1">
                  <div className="flex flex-wrap items-center gap-1.5">
                    <strong className="truncate text-sm">{slkAuthor(i)}</strong>
                    {i.triggerType === 'mention' && <Badge variant="secondary">@dispatch</Badge>}
                    {i.triggerType === 'reaction' && <Badge variant="secondary">:{i.triggerReaction || 'emoji'}:</Badge>}
                    <span className="ml-auto text-xs text-muted-foreground">{relAge(i.createdAt)}</span>
                  </div>
                  <div className="mt-0.5 line-clamp-2 text-sm text-muted-foreground">{i.text}</div>
                </div>
              </button>
            ))}
          </div>
          <div className="flex items-center justify-between border-t px-3 py-2 text-xs text-muted-foreground">
            <span>{filtered.length}</span>
            <Pagination page={page} pageCount={pageCount} onPage={setPage} />
          </div>
        </Card>

{sel
          ? <SlackConversation key={sel.id} item={sel} onDecided={onDecided} />
          : <Card className="flex h-[70vh] min-h-[480px] items-center justify-center"><div className="p-8 text-center text-sm text-muted-foreground">Pick a message to read the conversation.</div></Card>}
      </div>
    </div>
  );
}