<script setup lang="ts">
const activeTab = ref('constructor')
const isDesktop = useMediaQuery('(min-width: 768px)')
const queue = usePrintQueue()
const printers = usePrinters()
const showPrintersDrawer = ref(false)

// Cargar impresoras al iniciar
onMounted(() => {
  printers.fetchPrinters()
})
</script>

<template>
  <div class="min-h-screen bg-gray-50 dark:bg-gray-900">
    <!-- Header -->
    <LayoutAppHeader />

    <!-- Layout principal -->
    <div class="flex h-[calc(100vh-73px)]">
      <!-- Sidebar solo en desktop -->
      <ClientOnly>
        <aside
          v-if="isDesktop"
          class="w-80 border-r border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-950 flex flex-col"
        >
          <div class="p-4 border-b border-gray-200 dark:border-gray-800">
            <h2 class="font-semibold text-gray-900 dark:text-white">Cola de Impresión</h2>
            <p class="text-sm text-gray-500 dark:text-gray-400">
              {{ queue.operations.value.length }} comandos
            </p>
          </div>

          <!-- Selector de impresora -->
          <div class="p-4 border-b border-gray-200 dark:border-gray-800">
            <div class="flex items-center gap-2">
              <PrintersSelector class="flex-1" />
              <UButton
                icon="i-heroicons-cog-6-tooth"
                color="neutral"
                variant="ghost"
                size="sm"
                title="Configurar impresoras"
                @click="showPrintersDrawer = true"
              />
            </div>
          </div>

          <div class="flex-1 overflow-y-auto p-4">
            <QueuePrintQueue />
          </div>

          <div class="p-4 border-t border-gray-200 dark:border-gray-800">
            <QueueActions />
          </div>
        </aside>
      </ClientOnly>

      <!-- Panel principal -->
      <main class="flex-1 overflow-y-auto pb-mobile-nav md:pb-0">
        <div class="max-w-3xl mx-auto p-4 space-y-6">
          <!-- En mobile: mostrar según tab activo -->
          <!-- En desktop: mostrar constructor + templates -->
          <template v-if="isDesktop || activeTab === 'constructor'">
            <ConstructorCommandBuilder />
          </template>

          <template v-else-if="activeTab === 'queue'">
            <QueuePrintQueue />
            <QueueActions class="mt-4" />
          </template>

          <template v-else-if="activeTab === 'templates'">
            <TemplatesTemplateList />
          </template>

          <template v-else-if="activeTab === 'printers'">
            <PrintersList />
          </template>

          <!-- En desktop: mostrar templates debajo del constructor -->
          <template v-if="isDesktop">
            <TemplatesTemplateList />
          </template>
        </div>
      </main>
    </div>

    <!-- Navegación mobile -->
    <LayoutMobileNavigation v-model="activeTab" />

    <!-- Modal para gestionar impresoras (desktop) -->
    <UModal v-model:open="showPrintersDrawer" title="Gestión de Impresoras" description="Configurar impresoras disponibles">
      <template #body>
        <PrintersList />
      </template>
    </UModal>
  </div>
</template>
