<script setup lang="ts">
const queue = usePrintQueue()
const templates = useTemplates()
const toast = useToast()

const saveDrawerOpen = ref(false)
const templateName = ref('')
const templateDescription = ref('')
const saving = ref(false)

async function saveAsTemplate() {
  if (!templateName.value.trim()) return

  saving.value = true
  try {
    const result = await templates.saveTemplate(
      templateName.value.trim(),
      templateDescription.value.trim(),
      queue.operations.value as any
    )

    if (result) {
      toast.add({ title: 'Template guardado', color: 'success' })
      templateName.value = ''
      templateDescription.value = ''
      saveDrawerOpen.value = false
    } else {
      toast.add({ title: 'Error al guardar template', color: 'error' })
    }
  } finally {
    saving.value = false
  }
}
</script>

<template>
  <div class="space-y-3">
    <!-- Resultado de la última impresión -->
    <UCard v-if="queue.result.value" variant="soft" :class="queue.result.value.ok ? '' : 'border-red-500'">
      <div class="flex items-center gap-2">
        <UIcon
          :name="queue.result.value.ok ? 'i-heroicons-check-circle' : 'i-heroicons-exclamation-circle'"
          :class="queue.result.value.ok ? 'text-green-500' : 'text-red-500'"
          class="w-5 h-5"
        />
        <span class="text-sm">
          {{ queue.result.value.ok ? (queue.result.value.msg || 'Listo') : (queue.result.value.error || 'Error') }}
        </span>
      </div>
      <pre v-if="queue.result.value.code" class="text-xs text-gray-500 mt-2 overflow-auto">{{ queue.result.value.code }}</pre>
    </UCard>

    <!-- Botones de acción -->
    <div class="flex flex-wrap gap-2">
      <UButton
        color="primary"
        :loading="queue.loading.value"
        :disabled="queue.operations.value.length === 0"
        @click="queue.sendToPrinter"
      >
        <template #leading>
          <UIcon name="i-heroicons-printer" class="w-4 h-4" />
        </template>
        Imprimir ({{ queue.operations.value.length }})
      </UButton>

      <UButton
        variant="outline"
        :disabled="queue.operations.value.length === 0"
        @click="saveDrawerOpen = true"
      >
        <template #leading>
          <UIcon name="i-heroicons-bookmark" class="w-4 h-4" />
        </template>
        Guardar template
      </UButton>

      <UButton
        variant="ghost"
        color="error"
        :disabled="queue.operations.value.length === 0"
        @click="queue.clearQueue"
      >
        <template #leading>
          <UIcon name="i-heroicons-trash" class="w-4 h-4" />
        </template>
        Limpiar
      </UButton>
    </div>

    <!-- Drawer para guardar template -->
    <UDrawer v-model:open="saveDrawerOpen" direction="bottom" title="Guardar como Template" description="Guardar la cola actual como template reutilizable">
      <template #body>
        <div class="space-y-4 p-4">
          <UFormField label="Nombre del template" required>
            <UInput v-model="templateName" placeholder="Ej: Ticket de venta" />
          </UFormField>

          <UFormField label="Descripción (opcional)">
            <UTextarea
              v-model="templateDescription"
              :rows="2"
              placeholder="Breve descripción del template..."
            />
          </UFormField>

          <p class="text-sm text-gray-500 dark:text-gray-400">
            Se guardarán {{ queue.operations.value.length }} comandos de la cola actual.
          </p>
        </div>
      </template>

      <template #footer>
        <div class="flex gap-2 justify-end p-4">
          <UButton variant="ghost" @click="saveDrawerOpen = false">
            Cancelar
          </UButton>
          <UButton color="primary" :disabled="!templateName.trim()" :loading="saving" @click="saveAsTemplate">
            Guardar
          </UButton>
        </div>
      </template>
    </UDrawer>
  </div>
</template>
