<template>
  <div class="h-full min-h-0 flex flex-col">
    <AppHeader title="Verification">
      <template #subtitle>
        <span v-if="currentBatch" class="text-sm text-ink-secondary">
          Batch {{ currentBatch.id.substring(0, 8) }}…
          <span v-if="enteredByLabel"> · Entered by {{ enteredByLabel }}</span>
        </span>
      </template>
    </AppHeader>

    <WorkstationLayout :has-batch="!!batchId">
      <template #queue>
        <h2 class="text-xl font-semibold mb-4 text-ink-strong">Verification Queue</h2>
        <p class="text-sm text-ink-secondary mb-4">
          Batches pending verification, oldest first (FIFO by last update).
        </p>
        <BatchList
          :batches="batchStore.batches"
          :loading="batchStore.loading"
          :error="batchStore.error"
          empty-title="No batches are waiting for verification."
          empty-description="New batches appear here after data entry is submitted."
          @select="openBatch"
          @retry="loadQueue"
        />
      </template>

      <template #rail>
        <WorkstationQueueRail
          title="Verification queue"
          :batches="batchStore.batches"
          :selected-id="batchId"
          :loading="batchStore.loading"
          @select="openBatch"
          @back="router.push('/verification')"
        />
      </template>

      <template #scan>
        <ScanViewer
          :url="documentUrl"
          :loading="documentLoading"
          :error="documentError"
          @retry="refreshUrl"
        />
      </template>

      <template #form>
        <VerificationForm
          v-if="batchId"
          :batch="currentBatch"
          :batch-id="batchId"
        />
      </template>
    </WorkstationLayout>
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useBatchStore } from '../stores/batches'
import { usePresignedUrl } from '../composables/usePresignedUrl'
import AppHeader from '../components/AppHeader.vue'
import ScanViewer from '../components/ScanViewer.vue'
import VerificationForm from '../components/VerificationForm.vue'
import BatchList from '../components/BatchList.vue'
import WorkstationLayout from '../components/WorkstationLayout.vue'
import WorkstationQueueRail from '../components/WorkstationQueueRail.vue'

const props = defineProps<{ batchId?: string }>()

const batchStore = useBatchStore()
const route = useRoute()
const router = useRouter()

const batchId = computed(() => props.batchId ?? (route.params.batchId as string | undefined))
const currentBatch = computed(() => batchStore.currentBatch)
const { documentUrl, documentError, documentLoading, refreshUrl } = usePresignedUrl(batchId)

const enteredByLabel = computed(() => {
  const batch = currentBatch.value
  if (!batch) return null
  if (batch.enteredByUserName?.trim()) return batch.enteredByUserName.trim()
  const fromQueue = batchStore.batches.find((b) => b.id === batch.id)
  if (fromQueue?.enteredByUserName?.trim()) return fromQueue.enteredByUserName.trim()
  return null
})

function openBatch(id: string) {
  router.push(`/verification/${id}`)
}

async function loadQueue() {
  await batchStore.listVerificationQueue({
    page: 1,
    pageSize: 50,
  })
}

watch(
  batchId,
  async (id) => {
    if (id) {
      await batchStore.getDraft(id)
    }
  },
  { immediate: true }
)

onMounted(async () => {
  await loadQueue()
})
</script>
