{# Plan 40 Phase 3 + Phase 6 — recent activity with filters.
   Filter chips (channel/outcome/within) call setChannel/setSuccess/
   setSinceHours; each refetches /api/admin/bots/activity. Row click
   opens the event-detail drawer (_activity_drawer.html). #}
{% from 'admin/components/ui.html' import card %}
{% call card(title="Recent activity") %}
<div class="px-4 py-3 border-b border-white/[0.06] flex flex-wrap items-center gap-3 text-[12px]">
  <span class="text-ink-500 uppercase tracking-wider text-[11px]">Channel:</span>
  <template x-for="c in [['', 'All'], ['telegram', 'Telegram'], ['discord', 'Discord'], ['slack', 'Slack']]" :key="c[0]">
    <button @click="setChannel(c[0])"
            :class="filters.channel === c[0] ? 'border-cmdop-500/30 text-cmdop-300' : 'border-white/[0.08] text-ink-400 hover:text-ink-200 hover:border-white/[0.16]'"
            class="px-2 py-0.5 rounded border transition-colors cursor-pointer"
            x-text="c[1]"></button>
  </template>
  <span class="text-ink-700">|</span>
  <span class="text-ink-500 uppercase tracking-wider text-[11px]">Outcome:</span>
  <template x-for="s in [[null, 'All'], [true, 'Success'], [false, 'Fail']]" :key="String(s[0])">
    <button @click="setSuccess(s[0])"
            :class="filters.success === s[0] ? 'border-cmdop-500/30 text-cmdop-300' : 'border-white/[0.08] text-ink-400 hover:text-ink-200 hover:border-white/[0.16]'"
            class="px-2 py-0.5 rounded border transition-colors cursor-pointer"
            x-text="s[1]"></button>
  </template>
  <span class="text-ink-700">|</span>
  <span class="text-ink-500 uppercase tracking-wider text-[11px]">Within:</span>
  <template x-for="h in [[null, 'Any'], [1, '1h'], [24, '24h'], [24*7, '7d']]" :key="String(h[0])">
    <button @click="setSinceHours(h[0])"
            :class="filters.sinceHours === h[0] ? 'border-cmdop-500/30 text-cmdop-300' : 'border-white/[0.08] text-ink-400 hover:text-ink-200 hover:border-white/[0.16]'"
            class="px-2 py-0.5 rounded border transition-colors cursor-pointer"
            x-text="h[1]"></button>
  </template>
  <span class="ml-auto text-ink-500 font-mono">
    <span x-text="activity ? activity.length : '…'"></span> events
  </span>
</div>

<template x-if="activity === null && !activityError">
  <div class="px-4 py-6 text-[13px] text-ink-500 flex items-center gap-2">
    <i data-lucide="loader-2" class="w-3.5 h-3.5 animate-spin"></i>
    Loading activity…
  </div>
</template>
<template x-if="activityError">
  <div class="px-4 py-6 text-[13px] text-amber-300 flex items-start gap-2">
    <i data-lucide="alert-triangle" class="w-3.5 h-3.5 mt-0.5 flex-shrink-0"></i>
    <div>
      Couldn't load activity.
      <button @click="_reloadActivity()" class="underline hover:text-amber-200 ml-1 cursor-pointer">Retry</button>
    </div>
  </div>
</template>
<template x-if="activity && !activityError && activity.length === 0">
  <div class="px-4 py-4 flex items-center gap-2.5 text-[12px] text-ink-500">
    <i data-lucide="message-square-dashed" class="w-4 h-4 text-ink-600 shrink-0"></i>
    <span>No bot chat events match these filters — loosen the channel/outcome/window above, or wait for the next message.</span>
  </div>
</template>
<div x-show="activity && !activityError && activity.length > 0" x-cloak class="overflow-x-auto">
  <table class="w-full text-[13px] text-left">
    <thead class="text-[11px] text-ink-500 uppercase tracking-wider border-b border-white/[0.06] sticky top-0 bg-ink-950 z-10">
      <tr>
        <th class="px-4 py-3 font-medium">When</th>
        <th class="px-4 py-3 font-medium">Channel</th>
        <th class="px-4 py-3 font-medium">User</th>
        <th class="px-4 py-3 font-medium" title="Inbound message length (chars)">In</th>
        <th class="px-4 py-3 font-medium" title="Outbound response length (chars)">Out</th>
        <th class="px-4 py-3 font-medium">Duration</th>
        <th class="px-4 py-3 font-medium">OK</th>
      </tr>
    </thead>
    <tbody class="divide-y divide-white/[0.06]">
      <template x-for="e in activity" :key="e.request_id || e.created_at">
        <tr @click="openDrawer(e)" class="cursor-pointer hover:bg-white/[0.02]">
          <td class="px-4 py-3 text-ink-400 text-[12px] font-mono"
              :title="formatTs(e.created_at)" x-text="formatRelative(e.created_at)"></td>
          <td class="px-4 py-3">
            <span class="text-[11px] px-2 py-0.5 rounded font-mono border border-cmdop-500/30 text-cmdop-300"
                  x-text="e.channel_kind"></span>
          </td>
          <td class="px-4 py-3 font-mono text-ink-200 text-[12px] max-w-[160px] truncate"
              :title="e.external_user_id" x-text="e.external_user_id"></td>
          <td class="px-4 py-3 text-ink-400 font-mono text-[12px]"
              :title="e.message_len + ' chars in'" x-text="e.message_len"></td>
          <td class="px-4 py-3 text-ink-400 font-mono text-[12px]"
              :title="e.response_len + ' chars out'" x-text="e.response_len"></td>
          <td class="px-4 py-3 text-ink-400 font-mono text-[12px]" x-text="e.duration_ms + ' ms'"></td>
          <td class="px-4 py-3">
            <template x-if="e.success">
              <span class="inline-flex items-center gap-1 text-[11px] px-1.5 py-0.5 rounded border border-emerald-500/30 text-emerald-300">
                <i data-lucide="check" class="w-3 h-3"></i> ok
              </span>
            </template>
            <template x-if="!e.success">
              <span class="inline-flex items-center gap-1 text-[11px] px-1.5 py-0.5 rounded border border-red-500/30 text-red-300">
                <i data-lucide="x" class="w-3 h-3"></i> fail
              </span>
            </template>
          </td>
        </tr>
      </template>
    </tbody>
  </table>
</div>
{% endcall %}