<script lang="ts">
  import type { ToolCallResult } from '$lib/stores/chat'
  import LoaderCircleIcon from '@lucide/svelte/icons/loader-circle'
  import CheckIcon from '@lucide/svelte/icons/check'
  import XIcon from '@lucide/svelte/icons/x'

  let { tool }: { tool: ToolCallResult } = $props()

  const rows = $derived.by(() => {
    if (tool.type !== 'tool_result' || !tool.result) return null
    const data = (tool.result as any).data ?? tool.result
    return Array.isArray(data) ? data as any[] : null
  })

  const loading = $derived(tool.type === 'tool_use')
  const error = $derived(tool.type === 'tool_result' ? tool.error : undefined)

  const healthColor: Record<string, string> = {
    healthy: 'var(--success)',
    degraded: 'var(--warning)',
    down: 'var(--destructive)',
  }

  function shortName(slug: string): string {
    return slug.split(':').pop() ?? slug
  }
</script>

{#if loading}
  <div class="flex items-center gap-2 rounded-lg border bg-card px-3 py-2 text-xs" role="status" aria-label="Loading LXC containers">
    <LoaderCircleIcon class="size-3 shrink-0 animate-spin text-primary" aria-hidden="true" />
    <span class="font-medium">LXC containers</span>
    <span class="animate-pulse text-muted-foreground">loading…</span>
  </div>
{:else if error}
  <div class="flex items-center gap-2 rounded-lg border border-destructive/30 bg-destructive/5 px-3 py-2 text-xs" role="alert" aria-label="Error loading LXC containers">
    <XIcon class="size-3 shrink-0 text-destructive" aria-hidden="true" />
    <span class="font-medium">LXC containers</span>
    <span class="text-destructive">{error}</span>
  </div>
{:else if rows && rows.length > 0}
  <div class="rounded-lg border bg-card text-xs" aria-label="LXC containers: {rows.length} total">
    <div class="flex items-center gap-2 px-3 py-1.5 border-b">
      <CheckIcon class="size-3 shrink-0 text-success" aria-hidden="true" />
      <span class="font-medium">{rows.length} container{rows.length === 1 ? '' : 's'}</span>
    </div>
    <div class="max-h-48 overflow-y-auto">
      <table class="w-full">
        <thead>
          <tr class="border-b text-muted-foreground">
            <th class="px-3 py-1 text-left font-medium">Name</th>
            <th class="px-3 py-1 text-left font-medium">ID</th>
            <th class="px-3 py-1 text-left font-medium">IP</th>
            <th class="px-3 py-1 text-left font-medium">Health</th>
          </tr>
        </thead>
        <tbody>
          {#each rows as row}
            <tr class="border-b last:border-0 hover:bg-muted/30">
              <td class="px-3 py-1 font-mono">{shortName(row.slug)}</td>
              <td class="px-3 py-1 tabular-nums text-muted-foreground">{row.pve_id ?? '—'}</td>
              <td class="px-3 py-1 font-mono text-muted-foreground">{row.lan_ip ?? '—'}</td>
              <td class="px-3 py-1">
                {#if row.health}
                  <span class="flex items-center gap-1">
                    <span class="size-1.5 rounded-full" style="background: {healthColor[row.health] ?? 'var(--muted-foreground)'}"></span>
                    {row.health}
                  </span>
                {:else}
                  <span class="text-muted-foreground">—</span>
                {/if}
              </td>
            </tr>
          {/each}
        </tbody>
      </table>
    </div>
  </div>
{:else}
  <div class="flex items-center gap-2 rounded-lg border bg-card px-3 py-2 text-xs" role="status" aria-label="LXC containers: no data">
    <CheckIcon class="size-3 shrink-0 text-success" aria-hidden="true" />
    <span class="font-medium">LXC containers</span>
    <span class="text-muted-foreground">no data</span>
  </div>
{/if}
