<script lang="ts">
  import { fetchSessionDigest, type SessionDigest } from '$lib/api'
  import { currentSession, streaming } from '$lib/stores/chat'
  import { Badge } from '$lib/components/ui/badge'
  import ChevronDownIcon from '@lucide/svelte/icons/chevron-down'
  import ChevronRightIcon from '@lucide/svelte/icons/chevron-right'
  import SparklesIcon from '@lucide/svelte/icons/sparkles'

  let digest = $state<SessionDigest | null>(null)
  let open = $state(false)
  let loadedFor = $state<string | null>(null)

  // Reload the digest whenever the session changes or a stream finishes —
  // "what did this session actually do" is only meaningful once executions
  // have had a chance to land.
  $effect(() => {
    const sid = $currentSession
    const busy = $streaming
    if (!sid || busy) return
    if (loadedFor === sid) return
    loadedFor = sid
    fetchSessionDigest(sid).then((d) => (digest = d))
  })

  function statusVariant(status: string): 'default' | 'secondary' | 'destructive' | 'outline' {
    if (['failed', 'denied', 'revoked', 'cancelled'].includes(status)) return 'destructive'
    if (status === 'completed') return 'default'
    if (['running', 'approved'].includes(status)) return 'secondary'
    return 'outline'
  }
</script>

{#if digest && digest.total_executions > 0}
  <div class="border-b">
    <button
      type="button"
      class="flex w-full items-center justify-between gap-2 px-3 py-2 text-left text-xs font-medium hover:bg-muted/50"
      onclick={() => (open = !open)}
    >
      <span class="flex items-center gap-1.5">
        {#if open}<ChevronDownIcon class="size-3.5" />{:else}<ChevronRightIcon class="size-3.5" />{/if}
        This session
      </span>
      <span class="flex items-center gap-1.5 text-muted-foreground">
        {digest.total_executions} action{digest.total_executions === 1 ? '' : 's'}
        {#if digest.knowledge_created.length}
          <span class="flex items-center gap-0.5 text-primary">
            <SparklesIcon class="size-3" />{digest.knowledge_created.length}
          </span>
        {/if}
      </span>
    </button>

    {#if open}
      <div class="flex flex-col gap-3 px-3 pb-3 text-xs">
        <div class="flex flex-wrap gap-1">
          {#each Object.entries(digest.by_status) as [status, count]}
            <Badge variant={statusVariant(status)}>{status} × {count}</Badge>
          {/each}
        </div>

        {#if digest.entities_touched.length}
          <div>
            <div class="mb-1 text-muted-foreground">Entities touched</div>
            <div class="flex flex-wrap gap-1">
              {#each digest.entities_touched as target}
                <span class="rounded bg-muted px-1.5 py-0.5 font-mono text-[11px]">{target}</span>
              {/each}
            </div>
          </div>
        {/if}

        <div class="flex flex-col gap-1">
          {#each digest.executions as ex}
            <div class="flex items-start justify-between gap-2 rounded border px-2 py-1">
              <div class="min-w-0">
                <div class="font-mono text-[11px] text-muted-foreground">{ex.target}</div>
                <div class="truncate">{ex.summary || ex.verb}</div>
              </div>
              <Badge variant={statusVariant(ex.status)} class="shrink-0">{ex.status}</Badge>
            </div>
          {/each}
        </div>

        {#if digest.knowledge_created.length}
          <div>
            <div class="mb-1 flex items-center gap-1 text-primary">
              <SparklesIcon class="size-3" />Learned this session
            </div>
            <ul class="list-inside list-disc">
              {#each digest.knowledge_created as title}
                <li>{title}</li>
              {/each}
            </ul>
          </div>
        {/if}
      </div>
    {/if}
  </div>
{/if}
