<script lang="ts">
  import { currentTask } from '$lib/stores/workspace'
  import { Badge } from '$lib/components/ui/badge'

  type StatusStyle = { label: string; dot: string; pulse: boolean; variant: 'default' | 'secondary' | 'destructive' | 'outline' }

  function statusStyle(status: string | undefined, outcome: string | undefined): StatusStyle {
    switch (status) {
      case 'awaiting_input':
        return { label: 'Needs your input', dot: 'bg-warning', pulse: true, variant: 'secondary' }
      case 'done':
        return outcome === 'partial'
          ? { label: 'Done · partial', dot: 'bg-warning', pulse: false, variant: 'secondary' }
          : { label: 'Done', dot: 'bg-success', pulse: false, variant: 'default' }
      case 'failed':
        return { label: 'Failed', dot: 'bg-destructive', pulse: false, variant: 'destructive' }
      case 'planning':
        return { label: 'Planning', dot: 'bg-primary', pulse: true, variant: 'secondary' }
      case 'executing':
        return { label: 'Executing', dot: 'bg-primary', pulse: true, variant: 'secondary' }
      default:
        return { label: 'Active', dot: 'bg-muted-foreground', pulse: false, variant: 'outline' }
    }
  }
</script>

{#if $currentTask}
  {@const st = statusStyle($currentTask.status, $currentTask.outcome)}
  <div class="flex shrink-0 flex-col gap-1.5 border-b px-3 py-2.5">
    <div class="flex items-center gap-1.5">
      <span class="size-2 rounded-full {st.dot} {st.pulse ? 'animate-pulse' : ''}"></span>
      <Badge variant={st.variant} class="text-[10px]">{st.label}</Badge>
    </div>
    <p class="text-sm font-medium leading-snug">
      {$currentTask.goal || $currentTask.title || 'Untitled task'}
    </p>
  </div>
{/if}
