<template>
  <!-- Queue-only: full-width list with empty/skeleton patterns from the list slot -->
  <div
    v-if="!hasBatch"
    class="flex-1 min-h-0 overflow-auto p-4 sm:p-6"
    data-testid="workstation-queue"
  >
    <slot name="queue" />
  </div>

  <!-- Work mode: optional left rail + dominant scan + form (desktop ≥1280px) -->
  <div
    v-else
    class="workstation-split flex-1 min-h-0"
    :class="{ 'workstation-split--no-rail': !showRail }"
    data-testid="workstation-split"
  >
    <aside
      v-if="showRail"
      class="workstation-rail hidden xl:flex min-h-0"
      data-testid="workstation-rail"
    >
      <slot name="rail" />
    </aside>
    <section class="workstation-scan min-h-0 min-w-0" data-testid="workstation-scan">
      <p class="evidence-level evidence-level--1" data-testid="evidence-level-1">
        <span class="evidence-level-mark" aria-hidden="true">1</span>
        Source scan
      </p>
      <div class="min-h-0 flex-1 flex flex-col">
        <slot name="scan" />
      </div>
    </section>
    <section class="workstation-form min-h-0 min-w-0" data-testid="workstation-form">
      <slot name="form" />
    </section>
  </div>
</template>

<script setup lang="ts">
import { computed, useSlots } from 'vue'

const props = defineProps<{
  /** When false, render full-width queue slot only */
  hasBatch: boolean
}>()

const slots = useSlots()
const showRail = computed(() => props.hasBatch && !!slots.rail)
</script>
