<script lang="ts">
  // The agent's working trace for one assistant turn: the live "thinking"
  // indicator and that turn's tool calls merged into a single collapsible
  // strip, instead of a stack of one card per call (a 13-call turn buried the
  // actual answer). Collapsed it's one line — the current activity while
  // running, a count once finished. Expanded it lists what the agent did, in
  // humanized language, each row opening to its raw args/result.
  import type { ToolCallResult } from '$lib/types'
  import ToolCallCard from './ToolCallCard.svelte'
  import Spinner from './Spinner.svelte'
  import ChevronRightIcon from '@lucide/svelte/icons/chevron-right'
  import CheckIcon from '@lucide/svelte/icons/check'
  import XIcon from '@lucide/svelte/icons/x'
  import SparklesIcon from '@lucide/svelte/icons/sparkles'

  let {
    tools = [],
    label = null,
    status = 'idle'
  }: {
    tools?: ToolCallResult[]
    /** Live indicator text — the running step, an error, or "Done". */
    label?: string | null
    /** `idle` = no live state; the strip is just this turn's finished trace. */
    status?: 'running' | 'done' | 'error' | 'idle'
  } = $props()

  let expanded = $state(false)

  const count = $derived(tools.length)
  // Collapsed line: prefer the live activity while something is happening,
  // otherwise summarize the turn so a finished trace still says what it was.
  const headline = $derived.by(() => {
    if (status !== 'idle' && label) return label
    if (count > 0) return count === 1 ? '1 tool call' : `${count} tool calls`
    return 'No tool calls'
  })
</script>

<div
  class="trace rounded-lg border border-border/60 bg-card/40 transition-colors"
  class:running={status === 'running'}
>
  <button
    class="flex w-full items-center gap-2 px-3 py-1.5 text-left transition-colors hover:bg-muted/40"
    onclick={() => (expanded = !expanded)}
    aria-expanded={expanded}
    aria-label={expanded ? 'Hide agent trace' : 'Show agent trace'}
  >
    <span
      class="shrink-0 {status === 'error'
        ? 'text-destructive'
        : status === 'idle'
          ? 'text-muted-foreground'
          : 'text-primary'}"
    >
      {#if status === 'running'}
        <Spinner class="size-3" />
      {:else if status === 'error'}
        <XIcon class="size-3" />
      {:else if status === 'done'}
        <CheckIcon class="size-3" />
      {:else}
        <SparklesIcon class="size-3" />
      {/if}
    </span>

    <span
      class="min-w-0 flex-1 truncate text-xs {status === 'error'
        ? 'text-destructive'
        : status === 'running'
          ? 'text-foreground/80'
          : 'text-muted-foreground'}"
    >
      {headline}
    </span>

    {#if count > 0 && status !== 'idle'}
      <span class="shrink-0 text-[10px] tabular-nums text-muted-foreground/60">{count}</span>
    {/if}

    <ChevronRightIcon
      class="size-3 shrink-0 text-muted-foreground/50 transition-transform {expanded
        ? 'rotate-90'
        : ''}"
    />
  </button>

  {#if expanded}
    <div class="border-t border-border/40 p-1">
      {#if count > 0}
        {#each tools as tool (tool.id)}
          <ToolCallCard {tool} />
        {/each}
      {:else}
        <p class="px-2 py-1.5 text-[11px] text-muted-foreground">
          Nothing recorded for this turn yet.
        </p>
      {/if}
    </div>
  {/if}
</div>

<style>
  .trace {
    animation: trace-in 0.2s ease-out;
  }
  /* A faint pulse while the agent is mid-turn — the collapsed strip is the
     only thing on screen then, so it carries the "still working" signal. */
  .trace.running {
    border-color: color-mix(in oklab, var(--primary) 35%, var(--border));
  }
  @keyframes trace-in {
    from {
      opacity: 0;
      transform: translateY(-2px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .trace {
      animation: none;
    }
  }
</style>
