<template>
  <div class="overflow-x-auto">
    <InlineError
      v-if="error"
      title="Could not load batches"
      :message="error"
      preserved="Your filters and previous selections were preserved."
      retry-label="Retry"
      @retry="$emit('retry')"
    />
    <SkeletonBlock v-else-if="loading" variant="table" :rows="5" />
    <EmptyState
      v-else-if="batches.length === 0"
      :title="emptyTitle"
      :description="emptyDescription"
    >
      <template v-if="$slots.emptyAction" #action>
        <slot name="emptyAction" />
      </template>
    </EmptyState>
    <table v-else class="w-full min-w-[640px] text-sm">
      <thead>
        <tr class="border-b text-left text-ink-secondary">
          <th class="py-2 px-4">ID</th>
          <th class="py-2 px-4">Type</th>
          <th class="py-2 px-4">Track</th>
          <th class="py-2 px-4">Status</th>
          <th class="py-2 px-4">Created</th>
          <th v-if="showAssign" class="py-2 px-4">Actions</th>
        </tr>
      </thead>
      <tbody>
        <tr
          v-for="batch in batches"
          :key="batch.id"
          class="border-b hover:bg-primary-50 cursor-pointer"
          @click="$emit('select', batch.id)"
        >
          <td class="py-2 px-4 font-mono text-xs">{{ batch.id.substring(0, 8) }}...</td>
          <td class="py-2 px-4">{{ formatBatchType(batch.batchType) }}</td>
          <td class="py-2 px-4">
            <span
              :class="batch.track === 'BACKFILL'
                ? 'bg-primary-50 text-primary-800 border border-primary-100'
                : 'bg-clinical-safe-bg text-clinical-safe border border-[#ABEFC6]'"
              class="status-badge"
            >
              {{ batch.track === 'BACKFILL' ? 'Backfill' : 'Live' }}
            </span>
          </td>
          <td class="py-2 px-4">
            <StatusBadge :status="batch.status" />
          </td>
          <td class="py-2 px-4 text-ink-secondary">
            {{ new Date(batch.createdAt).toLocaleString() }}
          </td>
          <td v-if="showAssign" class="py-2 px-4">
            <button
              v-if="batch.status === 'UPLOADED'"
              type="button"
              @click.stop="$emit('assign', batch.id)"
              class="text-primary-600 hover:text-primary-800 text-xs font-medium"
            >
              Assign
            </button>
          </td>
        </tr>
      </tbody>
    </table>
  </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'
import InlineError from './InlineError.vue'

withDefaults(
  defineProps<{
    batches: BatchDetailResponse[]
    loading: boolean
    showAssign?: boolean
    error?: string | null
    emptyTitle?: string
    emptyDescription?: string
  }>(),
  {
    emptyTitle: 'No batches found.',
    emptyDescription: undefined,
  }
)

defineEmits<{
  (e: 'select', batchId: string): void
  (e: 'assign', batchId: string): void
  (e: 'retry'): void
}>()

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