<template>
  <span
    class="status-badge inline-flex items-center gap-1.5 border"
    :class="toneClass"
    :title="meta.label"
  >
    <span class="inline-flex shrink-0" aria-hidden="true">
      <!-- upload -->
      <svg v-if="meta.icon === 'upload'" class="w-3 h-3" viewBox="0 0 16 16" fill="none">
        <path d="M8 11V3M8 3L5 6M8 3l3 3M3 13h10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
      </svg>
      <!-- edit -->
      <svg v-else-if="meta.icon === 'edit'" class="w-3 h-3" viewBox="0 0 16 16" fill="none">
        <path d="M11.5 2.5l2 2L5 13H3v-2L11.5 2.5z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round" />
      </svg>
      <!-- clock -->
      <svg v-else-if="meta.icon === 'clock'" class="w-3 h-3" viewBox="0 0 16 16" fill="none">
        <circle cx="8" cy="8" r="5.5" stroke="currentColor" stroke-width="1.5" />
        <path d="M8 5v3.5l2 1.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
      </svg>
      <!-- reject -->
      <svg v-else-if="meta.icon === 'reject'" class="w-3 h-3" viewBox="0 0 16 16" fill="none">
        <circle cx="8" cy="8" r="5.5" stroke="currentColor" stroke-width="1.5" />
        <path d="M5.5 5.5l5 5M10.5 5.5l-5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
      </svg>
      <!-- check -->
      <svg v-else-if="meta.icon === 'check'" class="w-3 h-3" viewBox="0 0 16 16" fill="none">
        <path d="M3.5 8.5l3 3 6-7" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
      </svg>
      <!-- shield -->
      <svg v-else-if="meta.icon === 'shield'" class="w-3 h-3" viewBox="0 0 16 16" fill="none">
        <path d="M8 2.5l5 2v3.5c0 3-2.2 5.2-5 6-2.8-.8-5-3-5-6V4.5l5-2z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round" />
      </svg>
      <!-- approve -->
      <svg v-else-if="meta.icon === 'approve'" class="w-3 h-3" viewBox="0 0 16 16" fill="none">
        <circle cx="8" cy="8" r="5.5" stroke="currentColor" stroke-width="1.5" />
        <path d="M5.5 8l2 2 3.5-3.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
      </svg>
      <!-- done -->
      <svg v-else-if="meta.icon === 'done'" class="w-3 h-3" viewBox="0 0 16 16" fill="none">
        <path d="M2.5 8.5l2 2M6 9l3.5-4M9.5 8.5l2 2 3-3.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
      </svg>
      <!-- cancel / unknown -->
      <svg v-else class="w-3 h-3" viewBox="0 0 16 16" fill="none">
        <circle cx="8" cy="8" r="5.5" stroke="currentColor" stroke-width="1.5" />
        <path d="M5.5 8h5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
      </svg>
    </span>
    <span>{{ meta.label }}</span>
  </span>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import {
  BATCH_STATUS_TONE_CLASSES,
  getBatchStatusMeta,
} from '../utils/batchStatus'

const props = defineProps<{
  status: string | null | undefined
}>()

const meta = computed(() => getBatchStatusMeta(props.status))
const toneClass = computed(() => BATCH_STATUS_TONE_CLASSES[meta.value.tone])
</script>
