<script lang="ts">
  import { planSteps } from '$lib/stores/workspace'
  import EntitySheet from '$lib/components/EntitySheet.svelte'
  import CircleIcon from '@lucide/svelte/icons/circle'
  import LoaderCircleIcon from '@lucide/svelte/icons/loader-circle'
  import CircleCheckIcon from '@lucide/svelte/icons/circle-check'
  import CircleXIcon from '@lucide/svelte/icons/circle-x'
  import CircleSlashIcon from '@lucide/svelte/icons/circle-slash'
  import CirclePauseIcon from '@lucide/svelte/icons/circle-pause'

  const done = $derived($planSteps.filter((s) => s.status === 'done').length)
  const total = $derived($planSteps.length)
  const pct = $derived(total > 0 ? Math.round((done / total) * 100) : 0)

  let sheetSlug = $state<string | null>(null)
  let sheetOpen = $state(false)

  // Tool calls don't carry a step id, so a step can't be linked to its exact
  // transcript entry — but its target entity IS known, and EntitySheet already
  // gives a real, working detail view for any slug. Clicking a step with a
  // target opens that, rather than a fake "scroll to it" that would silently
  // no-op for a collapsed tool-call group.
  function openStep(targetSlug: string | undefined) {
    if (!targetSlug) return
    sheetSlug = targetSlug
    sheetOpen = true
  }
</script>

{#if total > 0}
  <div class="flex shrink-0 flex-col gap-2 border-b px-3 py-2.5">
    <div class="flex items-center justify-between text-[11px] text-muted-foreground">
      <span class="font-semibold uppercase tracking-wider">Plan</span>
      <span>{done}/{total}</span>
    </div>
    <div class="h-1 w-full overflow-hidden rounded-full bg-muted">
      <div class="h-full rounded-full bg-primary transition-all duration-500" style="width: {pct}%"></div>
    </div>
    <ol class="flex flex-col gap-1">
      {#each $planSteps as step (step.id)}
        <li>
          <button
            type="button"
            class="flex w-full items-start gap-2 rounded px-1 py-1 text-left text-xs {step.target_slug ? 'hover:bg-muted/50' : 'cursor-default'}"
            onclick={() => openStep(step.target_slug)}
          >
            <span class="mt-0.5 shrink-0">
              {#if step.status === 'done'}
                <CircleCheckIcon class="size-3.5 text-success" />
              {:else if step.status === 'failed'}
                <CircleXIcon class="size-3.5 text-destructive" />
              {:else if step.status === 'running'}
                <LoaderCircleIcon class="size-3.5 animate-spin text-primary" />
              {:else if step.status === 'skipped'}
                <CircleSlashIcon class="size-3.5 text-muted-foreground" />
              {:else if step.status === 'blocked'}
                <CirclePauseIcon class="size-3.5 text-warning" />
              {:else}
                <CircleIcon class="size-3.5 text-muted-foreground" />
              {/if}
            </span>
            <span class="min-w-0 flex-1">
              <span class="block leading-snug {step.status === 'done' ? 'text-muted-foreground line-through decoration-muted-foreground/40' : ''}">
                {step.title}
              </span>
              {#if step.target_slug}
                <span class="font-mono text-[10px] text-muted-foreground">{step.target_slug}</span>
              {/if}
            </span>
          </button>
        </li>
      {/each}
    </ol>
  </div>
{/if}

<EntitySheet slug={sheetSlug} bind:open={sheetOpen} />
