<template>
  <div
    class="flex h-full w-full min-h-0 flex-col bg-surface border-r border-line"
    data-testid="workstation-queue-rail"
  >
    <div class="shrink-0 border-b border-line px-3 py-2.5">
      <h3 class="text-xs font-semibold uppercase tracking-wide text-ink-secondary">
        {{ title }}
      </h3>
    </div>

    <div class="min-h-0 flex-1 overflow-y-auto">
      <SkeletonBlock
        v-if="loading && batches.length === 0"
        variant="row"
        :rows="5"
        class="p-3"
      />
      <EmptyState
        v-else-if="batches.length === 0"
        title="No batches in queue"
        description="Assigned or pending items appear here."
        class="!py-6"
      />
      <button
        v-for="batch in batches"
        :key="batch.id"
        type="button"
        class="w-full border-b border-line border-l-2 px-3 py-2.5 text-left transition-colors hover:bg-primary-50"
        :class="
          batch.id === selectedId
            ? 'border-l-primary-600 bg-primary-50'
            : 'border-l-transparent'
        "
        :aria-current="batch.id === selectedId ? 'true' : undefined"
        @click="$emit('select', batch.id)"
      >
        <div class="text-sm font-semibold text-ink-strong truncate">
          {{ formatBatchType(batch.batchType) }}
        </div>
        <div class="mt-1.5">
          <StatusBadge :status="batch.status" />
        </div>
        <div class="mt-1 font-mono text-[11px] text-ink-secondary truncate">
          {{ batch.id.substring(0, 8) }}…
        </div>
      </button>
    </div>

    <div class="shrink-0 border-t border-line p-2">
      <button
        type="button"
        class="w-full rounded-input px-2 py-1.5 text-xs font-medium text-primary-600 hover:bg-primary-50"
        @click="$emit('back')"
      >
        Full queue
      </button>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { BatchDetailResponse } from '../types'
import StatusBadge from './StatusBadge.vue'
import EmptyState from './EmptyState.vue'
import SkeletonBlock from './SkeletonBlock.vue'

withDefaults(
  defineProps<{
    title?: string
    batches: BatchDetailResponse[]
    selectedId?: string
    loading?: boolean
  }>(),
  {
    title: 'Queue',
    loading: false,
  }
)

defineEmits<{
  (e: 'select', id: string): void
  (e: 'back'): void
}>()

function formatBatchType(type: string): string {
  return type
    .toLowerCase()
    .replace(/_/g, ' ')
    .replace(/\b\w/g, (c) => c.toUpperCase())
}
</script>
