{# Plan 61/2b W3 — Bots health card (Option 2 — dedicated card with
   per-channel rows). Data: /api/admin/overview/bots-health.

   Per-channel row:
       🟢 Telegram   @cmdop_team_bot   24m ago    342/24h
       ⚫ Discord    (not configured)  —          [Connect →]

   Server-admin: rows grouped by fleet (one heading per fleet).
   Owner/admin: flat list (single fleet).
   Member: this card is not included in their dashboard. #}
<div class="card p-4"
     x-data="botsHealthCard()"
     x-init="load()">
  <div class="flex items-center justify-between mb-3">
    <div class="flex items-center gap-2">
      <i data-lucide="bot" class="w-3.5 h-3.5 text-cmdop-400"></i>
      <h2 class="text-[12px] font-semibold text-ink-100 tracking-tight">Bots</h2>
      <span x-show="loading" class="text-[10px] uppercase tracking-wider text-ink-500">loading…</span>
    </div>
    <a href="/admin/wizards/chat-bot"
       class="inline-flex items-center gap-1 text-[11px] text-cmdop-300 hover:text-cmdop-200 transition-colors">
      <i data-lucide="plus" class="w-3 h-3"></i>
      Connect channel
    </a>
  </div>

  {# Nothing connected anywhere — collapse the 6 empty "Connect →" rows
     into a single call to action instead of a wall of placeholders. #}
  <template x-if="!loading && configuredChannels.length === 0">
    <p class="text-[12px] text-ink-500 py-2">
      No bots configured. <a href="/admin/wizards/chat-bot" class="underline">Connect Telegram, Discord, or Slack →</a>
    </p>
  </template>

  <template x-if="configuredChannels.length > 0">
    <ul class="divide-y divide-white/[0.06]">
      <template x-for="ch in configuredChannels" :key="ch.fleet_id + ':' + ch.channel">
        <li class="py-2 flex items-center gap-3 text-[12px]">
          <span class="w-2 h-2 rounded-full flex-shrink-0"
                :class="ch.status === 'healthy' ? 'bg-emerald-400'
                      : ch.status === 'degraded' ? 'bg-amber-300'
                      : ch.status === 'down' ? 'bg-red-400'
                      : 'bg-ink-600'"></span>
          <span class="text-ink-200 font-medium capitalize w-20" x-text="ch.channel"></span>
          <span class="text-ink-400 truncate flex-1"
                :title="ch.bot_username || ''"
                x-text="ch.bot_username || (ch.status === 'not_configured' ? '(not configured)' : '—')"></span>
          <span class="text-ink-500 font-mono text-[11px] hidden sm:inline-block w-20 text-right"
                x-text="ch.hint || ''"></span>
          <span class="text-ink-400 font-mono text-[11px] w-16 text-right">
            <span x-text="ch.messages_24h"></span>/24h
          </span>
          <template x-if="ch.status === 'not_configured'">
            <a :href="'/admin/wizards/chat-bot?channel=' + ch.channel"
               class="text-cmdop-300 hover:text-cmdop-200 text-[11px] whitespace-nowrap">Connect →</a>
          </template>
          <template x-if="ch.status === 'down'">
            <a href="/admin/help/troubleshooting"
               target="_blank" rel="noopener"
               class="text-amber-300 hover:text-amber-200 text-[11px] whitespace-nowrap">Check →</a>
          </template>
        </li>
      </template>
    </ul>
  </template>

  <p class="text-[10px] text-ink-600 mt-3" x-show="fallbackUsed">
    Some channels show "last message" instead of heartbeat (legacy adapter).
  </p>
</div>

<script>
function botsHealthCard() {
  return Object.assign(pageHelper({}), {
    loading: true,
    channels: [],
    fallbackUsed: false,

    // Only channels that are actually wired up — an all-unconfigured fleet
    // (every channel `not_configured`) collapses to the single CTA above
    // instead of a row per platform per fleet.
    get configuredChannels() {
      return this.channels.filter(c => c.status !== 'not_configured');
    },

    async load() {
      this.loading = true;
      try {
        const r = await fetch('/api/admin/overview/bots-health');
        if (!r.ok) throw new Error('HTTP ' + r.status);
        const data = await r.json();
        this.channels = data.channels || [];
        this.fallbackUsed = this.channels.some(c => c.signal_source === 'activity_fallback');
        // Friendly relative hints: prefer the server-side `hint`
        // string; fall back to a rel time on last_heartbeat_at.
        for (const ch of this.channels) {
          if (!ch.hint && ch.last_heartbeat_at) {
            ch.hint = this.formatRelative(ch.last_heartbeat_at);
          }
        }
      } catch (err) {
        console.error('bots-health load failed', err);
      } finally {
        this.loading = false;
        this.$nextTick(() => window.lucide && window.lucide.createIcons());
      }
    },
  });
}
</script>