<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'
  import FileTextIcon from '@lucide/svelte/icons/file-text'

  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)
</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="Searching knowledge">
    <LoaderCircleIcon class="size-3 shrink-0 animate-spin text-primary" aria-hidden="true" />
    <span class="font-medium">Knowledge</span>
    <span class="animate-pulse text-muted-foreground">searching…</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="Knowledge search error">
    <XIcon class="size-3 shrink-0 text-destructive" aria-hidden="true" />
    <span class="font-medium">Knowledge</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="Knowledge: {rows.length} results">
    <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} result{rows.length === 1 ? '' : 's'}</span>
    </div>
    <div class="max-h-56 overflow-y-auto divide-y">
      {#each rows as row}
        <div class="px-3 py-2">
          <div class="flex items-start gap-2">
            <FileTextIcon class="size-3 shrink-0 mt-0.5 text-muted-foreground" />
            <div class="min-w-0">
              <div class="font-mono font-medium truncate">{row.title}</div>
              {#if row.snippet || row.headline}
                <div class="mt-0.5 text-muted-foreground leading-relaxed line-clamp-2">
                  {row.snippet || row.headline}
                </div>
              {/if}
              <div class="mt-1 flex items-center gap-2 text-[10px] text-muted-foreground">
                {#if row.source}
                  <span>{row.source}</span>
                {/if}
                {#if row.slug}
                  <span class="font-mono opacity-60">{row.slug}</span>
                {/if}
              </div>
            </div>
          </div>
        </div>
      {/each}
    </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="Knowledge: no results">
    <CheckIcon class="size-3 shrink-0 text-success" aria-hidden="true" />
    <span class="font-medium">Knowledge</span>
    <span class="text-muted-foreground">no results</span>
  </div>
{/if}
