<script setup lang="ts">
const queue = usePrintQueue()

// Tipo de comando activo
const activeCommand = ref('text')

// Tipos de comandos disponibles
const commandTypes = [
  { label: 'Texto', value: 'text', icon: 'i-heroicons-document-text' },
  { label: 'Feed', value: 'feed', icon: 'i-heroicons-arrow-down' },
  { label: 'Cortar', value: 'cut', icon: 'i-heroicons-scissors' },
  { label: 'Pulse', value: 'pulse', icon: 'i-heroicons-bolt' },
  { label: 'QR', value: 'qr', icon: 'i-heroicons-qr-code' },
  { label: 'Barcode', value: 'barcode', icon: 'i-heroicons-bars-3' }
]

// ===== Estado para TEXTO =====
const text = ref('')
const align = ref('none')
const font = ref('none')
const textWidth = ref<number | undefined>()
const textHeight = ref<number | undefined>()
const bold = ref(false)
const underline = ref(false)
const reverse = ref(false)
const smooth = ref(false)
const color = ref('none')

// ===== Estado para FEED =====
const feedLines = ref(2)

// ===== Estado para CORTAR =====
const cutType = ref('feed')

// ===== Estado para PULSE =====
const pulseDrawer = ref('drawer_1')
const pulseTime = ref('pulse_200')

// ===== Estado para QR =====
const qrData = ref('')
const qrModel = ref('qrcode_model_2')
const qrLevel = ref('level_m')
const qrSize = ref(6)

// ===== Estado para BARCODE =====
const barcodeData = ref('')
const barcodeType = ref('ean13')
const barcodeHri = ref('below')
const barcodeWidth = ref(3)
const barcodeHeight = ref(80)

// ===== Opciones para selects =====
const alignOptions = [
  { label: '(sin cambio)', value: 'none' },
  { label: 'Izquierda', value: 'left' },
  { label: 'Centro', value: 'center' },
  { label: 'Derecha', value: 'right' }
]

const fontOptions = [
  { label: '(sin cambio)', value: 'none' },
  { label: 'Font A', value: 'font_a' },
  { label: 'Font B', value: 'font_b' },
  { label: 'Font C', value: 'font_c' },
  { label: 'Font D', value: 'font_d' },
  { label: 'Font E', value: 'font_e' },
  { label: 'Special A', value: 'special_a' },
  { label: 'Special B', value: 'special_b' }
]

const colorOptions = [
  { label: '(default)', value: 'none' },
  { label: 'Color 1', value: 'color_1' },
  { label: 'Color 2', value: 'color_2' },
  { label: 'Color 3', value: 'color_3' },
  { label: 'Color 4', value: 'color_4' }
]

const cutOptions = [
  { label: 'Sin feed', value: 'no_feed' },
  { label: 'Con feed', value: 'feed' },
  { label: 'Reservar', value: 'reserve' },
  { label: 'Full sin feed', value: 'no_feed_fullcut' },
  { label: 'Full con feed', value: 'feed_fullcut' },
  { label: 'Full reservar', value: 'reserve_fullcut' }
]

const drawerOptions = [
  { label: 'Drawer 1', value: 'drawer_1' },
  { label: 'Drawer 2', value: 'drawer_2' }
]

const pulseTimeOptions = [
  { label: '100ms', value: 'pulse_100' },
  { label: '200ms', value: 'pulse_200' },
  { label: '300ms', value: 'pulse_300' },
  { label: '400ms', value: 'pulse_400' },
  { label: '500ms', value: 'pulse_500' }
]

const qrModelOptions = [
  { label: 'Model 1', value: 'qrcode_model_1' },
  { label: 'Model 2', value: 'qrcode_model_2' }
]

const qrLevelOptions = [
  { label: 'Level L (7%)', value: 'level_l' },
  { label: 'Level M (15%)', value: 'level_m' },
  { label: 'Level Q (25%)', value: 'level_q' },
  { label: 'Level H (30%)', value: 'level_h' }
]

const barcodeTypeOptions = [
  { label: 'UPC-A', value: 'upc_a' },
  { label: 'UPC-E', value: 'upc_e' },
  { label: 'EAN-13', value: 'ean13' },
  { label: 'EAN-8', value: 'ean8' },
  { label: 'Code 39', value: 'code39' },
  { label: 'ITF', value: 'itf' },
  { label: 'Codabar', value: 'codabar' },
  { label: 'Code 93', value: 'code93' },
  { label: 'Code 128', value: 'code128' },
  { label: 'GS1-128', value: 'gs1_128' },
  { label: 'GS1 DataBar', value: 'gs1_databar_omnidirectional' }
]

const barcodeHriOptions = [
  { label: 'Sin HRI', value: 'none' },
  { label: 'Arriba', value: 'above' },
  { label: 'Abajo', value: 'below' },
  { label: 'Ambos', value: 'both' }
]

// ===== Secciones de formato para texto =====
const formatSections = [
  { label: 'Alineación y Fuente', slot: 'alignment', icon: 'i-heroicons-bars-3-bottom-left' },
  { label: 'Tamaño', slot: 'size', icon: 'i-heroicons-arrows-pointing-out' },
  { label: 'Estilo', slot: 'style', icon: 'i-heroicons-paint-brush' }
]

// ===== Funciones =====
function resetForm() {
  // Reset texto
  text.value = ''
  align.value = 'none'
  font.value = 'none'
  textWidth.value = undefined
  textHeight.value = undefined
  bold.value = false
  underline.value = false
  reverse.value = false
  smooth.value = false
  color.value = 'none'
  // Reset feed
  feedLines.value = 2
  // Reset cut
  cutType.value = 'feed'
  // Reset pulse
  pulseDrawer.value = 'drawer_1'
  pulseTime.value = 'pulse_200'
  // Reset QR
  qrData.value = ''
  qrModel.value = 'qrcode_model_2'
  qrLevel.value = 'level_m'
  qrSize.value = 6
  // Reset barcode
  barcodeData.value = ''
  barcodeType.value = 'ean13'
  barcodeHri.value = 'below'
  barcodeWidth.value = 3
  barcodeHeight.value = 80
}

function addToQueue() {
  const ops: any[] = []

  switch (activeCommand.value) {
    case 'text':
      if (align.value && align.value !== 'none') ops.push({ op: 'textAlign', align: align.value })
      if (font.value && font.value !== 'none') ops.push({ op: 'textFont', font: font.value })
      if (textWidth.value || textHeight.value) {
        ops.push({ op: 'textSize', width: textWidth.value, height: textHeight.value })
      }
      ops.push({
        op: 'textStyle',
        em: bold.value,
        ul: underline.value,
        reverse: reverse.value,
        ...(color.value && color.value !== 'none' ? { color: color.value } : {})
      })
      if (text.value) ops.push({ op: 'text', value: text.value })
      break

    case 'feed':
      ops.push({ op: 'feedLine', line: Number(feedLines.value) || 1 })
      break

    case 'cut':
      ops.push({ op: 'cut', type: cutType.value })
      break

    case 'pulse':
      ops.push({ op: 'pulse', drawer: pulseDrawer.value, time: pulseTime.value })
      break

    case 'qr':
      if (qrData.value) {
        ops.push({
          op: 'qrcode',
          data: qrData.value,
          model: qrModel.value,
          level: qrLevel.value,
          size: qrSize.value
        })
      }
      break

    case 'barcode':
      if (barcodeData.value) {
        ops.push({
          op: 'barcode',
          data: barcodeData.value,
          type: barcodeType.value,
          hri: barcodeHri.value,
          width: barcodeWidth.value,
          height: barcodeHeight.value
        })
      }
      break
  }

  if (ops.length > 0) {
    queue.addOperations(ops)
  }
}

// Validación para habilitar/deshabilitar botón
const canAdd = computed(() => {
  switch (activeCommand.value) {
    case 'text':
      return text.value.trim().length > 0
    case 'feed':
      return feedLines.value != null && feedLines.value > 0
    case 'cut':
    case 'pulse':
      return true
    case 'qr':
      return qrData.value.trim().length > 0
    case 'barcode':
      return barcodeData.value.trim().length > 0
    default:
      return false
  }
})
</script>

<template>
  <UCard>
    <template #header>
      <div class="flex items-center justify-between">
        <h2 class="text-lg font-semibold text-gray-900 dark:text-white">
          Constructor de Comandos
        </h2>
        <UButton
          icon="i-heroicons-arrow-path"
          variant="ghost"
          size="sm"
          @click="resetForm"
        />
      </div>
    </template>

    <!-- Selector de tipo de comando -->
    <div class="flex flex-wrap gap-2 mb-4">
      <UButton
        v-for="cmd in commandTypes"
        :key="cmd.value"
        :variant="activeCommand === cmd.value ? 'solid' : 'outline'"
        :color="activeCommand === cmd.value ? 'primary' : 'neutral'"
        size="sm"
        :icon="cmd.icon"
        @click="activeCommand = cmd.value"
      >
        {{ cmd.label }}
      </UButton>
    </div>

    <!-- Formulario de TEXTO -->
    <div v-if="activeCommand === 'text'" class="space-y-4">
      <UFormField label="Texto a imprimir">
        <UTextarea
          v-model="text"
          :rows="4"
          autoresize
          placeholder="Escribe el texto a imprimir..."
        />
      </UFormField>

      <UAccordion :items="formatSections" type="multiple">
        <template #alignment>
          <div class="grid grid-cols-1 sm:grid-cols-3 gap-3 p-3">
            <UFormField label="Alineación">
              <USelect v-model="align" :items="alignOptions" />
            </UFormField>
            <UFormField label="Fuente">
              <USelect v-model="font" :items="fontOptions" />
            </UFormField>
            <UFormField label="Color">
              <USelect v-model="color" :items="colorOptions" />
            </UFormField>
          </div>
        </template>

        <template #size>
          <div class="grid grid-cols-2 gap-3 p-3">
            <UFormField label="Ancho (1-8)">
              <UInput v-model.number="textWidth" type="number" :min="1" :max="8" placeholder="1" />
            </UFormField>
            <UFormField label="Alto (1-8)">
              <UInput v-model.number="textHeight" type="number" :min="1" :max="8" placeholder="1" />
            </UFormField>
          </div>
        </template>

        <template #style>
          <div class="flex flex-wrap gap-4 p-3">
            <UCheckbox v-model="bold" label="Negrita" />
            <UCheckbox v-model="underline" label="Subrayado" />
            <UCheckbox v-model="reverse" label="Invertido" />
            <UCheckbox v-model="smooth" label="Suavizado" />
          </div>
        </template>
      </UAccordion>
    </div>

    <!-- Formulario de FEED -->
    <div v-else-if="activeCommand === 'feed'" class="space-y-4">
      <UFormField label="Líneas de avance">
        <UInput
          v-model.number="feedLines"
          type="number"
          :min="1"
          :max="255"
          placeholder="2"
        />
      </UFormField>
      <p class="text-sm text-gray-500 dark:text-gray-400">
        Avanza el papel la cantidad de líneas especificadas.
      </p>
    </div>

    <!-- Formulario de CORTAR -->
    <div v-else-if="activeCommand === 'cut'" class="space-y-4">
      <UFormField label="Tipo de corte">
        <USelect v-model="cutType" :items="cutOptions" />
      </UFormField>
      <p class="text-sm text-gray-500 dark:text-gray-400">
        Corta el papel según el tipo seleccionado.
      </p>
    </div>

    <!-- Formulario de PULSE -->
    <div v-else-if="activeCommand === 'pulse'" class="space-y-4">
      <div class="grid grid-cols-2 gap-4">
        <UFormField label="Drawer">
          <USelect v-model="pulseDrawer" :items="drawerOptions" />
        </UFormField>
        <UFormField label="Duración">
          <USelect v-model="pulseTime" :items="pulseTimeOptions" />
        </UFormField>
      </div>
      <p class="text-sm text-gray-500 dark:text-gray-400">
        Envía un pulso al cajón de dinero para abrirlo.
      </p>
    </div>

    <!-- Formulario de QR -->
    <div v-else-if="activeCommand === 'qr'" class="space-y-4">
      <UFormField label="Datos del QR">
        <UTextarea
          v-model="qrData"
          :rows="2"
          placeholder="https://ejemplo.com o texto"
        />
      </UFormField>
      <div class="grid grid-cols-3 gap-3">
        <UFormField label="Modelo">
          <USelect v-model="qrModel" :items="qrModelOptions" />
        </UFormField>
        <UFormField label="Corrección">
          <USelect v-model="qrLevel" :items="qrLevelOptions" />
        </UFormField>
        <UFormField label="Tamaño">
          <UInput v-model.number="qrSize" type="number" :min="1" :max="16" />
        </UFormField>
      </div>
    </div>

    <!-- Formulario de BARCODE -->
    <div v-else-if="activeCommand === 'barcode'" class="space-y-4">
      <UFormField label="Datos del código">
        <UInput
          v-model="barcodeData"
          placeholder="490123456789"
        />
      </UFormField>
      <div class="grid grid-cols-2 gap-3">
        <UFormField label="Tipo">
          <USelect v-model="barcodeType" :items="barcodeTypeOptions" />
        </UFormField>
        <UFormField label="HRI (texto)">
          <USelect v-model="barcodeHri" :items="barcodeHriOptions" />
        </UFormField>
      </div>
      <div class="grid grid-cols-2 gap-3">
        <UFormField label="Ancho (2-6)">
          <UInput v-model.number="barcodeWidth" type="number" :min="2" :max="6" />
        </UFormField>
        <UFormField label="Alto (1-255)">
          <UInput v-model.number="barcodeHeight" type="number" :min="1" :max="255" />
        </UFormField>
      </div>
    </div>

    <template #footer>
      <div class="flex gap-2">
        <UButton color="primary" :disabled="!canAdd" @click="addToQueue">
          Agregar a cola
        </UButton>
        <UButton variant="ghost" @click="resetForm">
          Limpiar
        </UButton>
      </div>
    </template>
  </UCard>
</template>
