<script setup lang="ts">
import type { PrintTemplate } from '~/composables/useTemplates'

const props = defineProps<{
  template: PrintTemplate
}>()

const emit = defineEmits<{
  load: [id: string]
  duplicate: [id: string]
  delete: [id: string]
}>()

const menuItems = computed(() => [
  [
    {
      label: 'Duplicar',
      icon: 'i-heroicons-document-duplicate',
      click: () => emit('duplicate', props.template.id)
    }
  ],
  [
    {
      label: 'Eliminar',
      icon: 'i-heroicons-trash',
      color: 'error' as const,
      click: () => emit('delete', props.template.id)
    }
  ]
])

function formatDate(date: string | number) {
  return new Date(date).toLocaleDateString('es-AR', {
    day: '2-digit',
    month: 'short',
    year: 'numeric'
  })
}
</script>

<template>
  <UCard variant="outline" class="hover:border-primary-500 dark:hover:border-primary-400 transition-colors">
    <div class="flex items-start justify-between gap-2">
      <div class="min-w-0 flex-1">
        <h3 class="font-medium text-gray-900 dark:text-white truncate">
          {{ template.name }}
        </h3>
        <p
          v-if="template.description"
          class="text-sm text-gray-500 dark:text-gray-400 line-clamp-2 mt-1"
        >
          {{ template.description }}
        </p>
        <div class="flex items-center gap-2 mt-2">
          <UBadge variant="subtle" size="xs">
            {{ template.operations.length }} comandos
          </UBadge>
          <span class="text-xs text-gray-400 dark:text-gray-500">
            {{ formatDate(template.updatedAt) }}
          </span>
        </div>
      </div>

      <UDropdownMenu :items="menuItems">
        <UButton icon="i-heroicons-ellipsis-vertical" variant="ghost" size="sm" />
      </UDropdownMenu>
    </div>

    <template #footer>
      <UButton
        icon="i-heroicons-play"
        color="primary"
        block
        @click="$emit('load', template.id)"
      >
        Cargar en cola
      </UButton>
    </template>
  </UCard>
</template>
