analiticaNucleo/nuxt4-app/app/pages/informe-ingresos.vue

<template>
  <div class="flex flex-col gap-8">
    <!-- Loading State -->
    <UCard v-if="loading && !data" class="brand-card border border-transparent">
      <div class="flex flex-col items-center justify-center gap-4 py-10 text-[var(--brand-text-muted)]">
        <div class="flex items-center gap-3">
          <span class="inline-flex h-8 w-8 animate-spin rounded-full border-2 border-[#c08040] border-t-transparent align-middle" aria-hidden="true" />
          <span class="text-sm uppercase tracking-[0.3em]">Cargando datos...</span>
        </div>
      </div>
    </UCard>

    <!-- Error State -->
    <div v-else-if="error" class="rounded-lg border border-red-500/40 bg-red-500/18 p-4 text-sm text-red-200">
      <p>Error al cargar datos: {{ error }}</p>
      <UButton class="mt-4" :loading="loading" :disabled="loading" @click="loadData" color="primary">
        Reintentar
      </UButton>
    </div>

    <!-- Initial State - No data loaded yet -->
    <template v-else-if="!data && !loading">
      <!-- Card de Filtros -->
      <UCard class="brand-card border border-transparent">
        <template #header>
          <div class="flex flex-col gap-3">
            <div class="flex flex-wrap items-center justify-between gap-3">
              <div>
                <h2 class="text-xl font-bold brand-section-title">Filtros y Configuraciones</h2>
                <p class="text-xs text-[var(--brand-text-muted)] mt-1">
                  Aplicados a <code>created_at</code> de ingresos
                </p>
              </div>
              <div class="flex items-center gap-2">
                <UCheckbox v-model="includeAnulados" label="Incluir anulados" @update:model-value="onToggleAnulados" />
              </div>
            </div>

            <!-- Alerta roja cuando incluye anulados -->
            <UAlert
              v-if="includeAnulados"
              color="error"
              variant="solid"
              icon="i-lucide-alert-triangle"
              title="Incluir anulados activado"
              description="Los cálculos incluyen registros anulados. Esto puede afectar los resultados financieros."
            />
          </div>
        </template>

        <DateRangeSelector
          :selected-preset="selectedPreset"
          :fecha-desde="fechaDesde"
          :fecha-hasta="fechaHasta"
          @update:selected-preset="onUpdatePreset"
          @update:fecha-desde="onUpdateFechaDesde"
          @update:fecha-hasta="onUpdateFechaHasta"
        />

        <!-- Filtros Avanzados -->
        <div class="mt-6 space-y-4">
          <h3 class="text-sm font-semibold text-[var(--brand-text)]">Filtros Avanzados</h3>

          <!-- Selector de Clientes -->
          <div>
            <label class="block text-sm font-medium mb-2 text-[var(--brand-text)]">Clientes</label>
            <ClienteMultiSelector
              :selected-ids="selectedClienteIds"
              @update:selected-ids="selectedClienteIds = $event"
            />
          </div>

          <!-- Selector de Ubicaciones -->
          <div>
            <label class="block text-sm font-medium mb-2 text-[var(--brand-text)]">Ubicaciones</label>
            <UbicacionMultiSelector
              :selected-ubicaciones="selectedUbicaciones"
              :ubicaciones="opcionesFiltros.ubicaciones"
              @update:selected-ubicaciones="selectedUbicaciones = $event"
            />
          </div>

          <!-- Grid de 3 filtros simples -->
          <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
            <!-- Tipos de Café -->
            <div>
              <label class="block text-sm font-medium mb-2 text-[var(--brand-text)]">Tipos de Café</label>
              <SimpleMultiSelector
                :selected-items="selectedTipos"
                :items="opcionesFiltros.tipos"
                icon="i-lucide-coffee"
                placeholder="Todos los tipos"
                item-label="tipo"
                items-label="tipos"
                @update:selected-items="selectedTipos = $event"
              />
            </div>

            <!-- Estados -->
            <div>
              <label class="block text-sm font-medium mb-2 text-[var(--brand-text)]">Estados</label>
              <SimpleMultiSelector
                :selected-items="selectedEstados"
                :items="opcionesFiltros.estados"
                icon="i-lucide-check-circle"
                placeholder="Todos los estados"
                item-label="estado"
                items-label="estados"
                @update:selected-items="selectedEstados = $event"
              />
            </div>

            <!-- Calidades -->
            <div>
              <label class="block text-sm font-medium mb-2 text-[var(--brand-text)]">Calidades</label>
              <SimpleMultiSelector
                :selected-items="selectedCalidades"
                :items="opcionesFiltros.calidades"
                icon="i-lucide-star"
                placeholder="Todas las calidades"
                item-label="calidad"
                items-label="calidades"
                @update:selected-items="selectedCalidades = $event"
              />
            </div>
          </div>
        </div>

        <template #footer>
          <div class="flex flex-col sm:flex-row items-center justify-between gap-3">
            <div class="text-xs text-[var(--brand-text-muted)]">
              Rango activo: {{ rangoLegible }}
            </div>
            <UButton
              :loading="loading"
              :disabled="loading"
              :ui="{ base: 'bg-[#c08040] text-[#1b1209] border border-[#d99a56] hover:bg-[#d99a56] hover:border-[#f0c07c] disabled:opacity-50 disabled:cursor-not-allowed' }"
              size="sm"
              @click="loadData"
            >
              <template #leading>
                <UIcon name="i-lucide-refresh-cw" :class="{ 'animate-spin': loading }" />
              </template>
              Actualizar
            </UButton>
          </div>
        </template>
      </UCard>

      <!-- Mensaje de bienvenida -->
      <UCard class="brand-card border border-transparent">
        <div class="flex flex-col items-center justify-center gap-4 py-16 text-center">
          <div class="rounded-full bg-[#c08040]/10 p-6">
            <UIcon name="i-lucide-file-text" class="w-12 h-12 text-[#c08040]" />
          </div>
          <div class="flex flex-col gap-2">
            <h3 class="text-lg font-semibold text-[var(--brand-text)]">
              Informe de Ingresos
            </h3>
            <p class="text-sm text-[var(--brand-text-muted)] max-w-md">
              Configura los filtros y haz clic en el botón "Actualizar" para cargar el informe detallado de ingresos
            </p>
          </div>
        </div>
      </UCard>
    </template>

    <!-- Main Content -->
    <template v-else-if="data">
      <!-- Card de Filtros -->
      <UCard
        :class="[
          'brand-card border transition-all duration-300',
          hasPendingChanges
            ? 'border-yellow-500/60'
            : 'border-transparent'
        ]"
      >
        <template #header>
          <div class="flex flex-col gap-3">
            <div class="flex flex-wrap items-center justify-between gap-3">
              <div>
                <h2 class="text-xl font-bold brand-section-title">Filtros y Configuraciones</h2>
                <p class="text-xs text-[var(--brand-text-muted)] mt-1">
                  Aplicados a <code>created_at</code> de ingresos
                </p>
              </div>
              <div class="flex items-center gap-2">
                <UCheckbox v-model="includeAnulados" label="Incluir anulados" @update:model-value="onToggleAnulados" />
              </div>
            </div>

            <!-- Alerta de cambios pendientes -->
            <UAlert
              v-if="hasPendingChanges"
              color="warning"
              variant="soft"
              class="py-2"
            >
              <template #title>
                <div class="flex items-center justify-between gap-3 text-sm">
                  <div class="flex items-center gap-2">
                    <span class="inline-flex h-2 w-2 rounded-full bg-yellow-500 animate-pulse"></span>
                    <span class="font-medium">Cambios pendientes - Haz clic en "Actualizar" para aplicar</span>
                  </div>
                </div>
              </template>
            </UAlert>

            <!-- Alerta roja cuando incluye anulados -->
            <UAlert
              v-if="includeAnulados"
              color="error"
              variant="solid"
              icon="i-lucide-alert-triangle"
              title="Incluir anulados activado"
              description="Los cálculos incluyen registros anulados. Esto puede afectar los resultados financieros."
            />
          </div>
        </template>

        <DateRangeSelector
          :selected-preset="selectedPreset"
          :fecha-desde="fechaDesde"
          :fecha-hasta="fechaHasta"
          @update:selected-preset="onUpdatePreset"
          @update:fecha-desde="onUpdateFechaDesde"
          @update:fecha-hasta="onUpdateFechaHasta"
        />

        <!-- Filtros Avanzados -->
        <div class="mt-6 space-y-4">
          <h3 class="text-sm font-semibold text-[var(--brand-text)]">Filtros Avanzados</h3>

          <!-- Selector de Clientes -->
          <div>
            <label class="block text-sm font-medium mb-2 text-[var(--brand-text)]">Clientes</label>
            <ClienteMultiSelector
              :selected-ids="selectedClienteIds"
              @update:selected-ids="selectedClienteIds = $event"
            />
          </div>

          <!-- Selector de Ubicaciones -->
          <div>
            <label class="block text-sm font-medium mb-2 text-[var(--brand-text)]">Ubicaciones</label>
            <UbicacionMultiSelector
              :selected-ubicaciones="selectedUbicaciones"
              :ubicaciones="opcionesFiltros.ubicaciones"
              @update:selected-ubicaciones="selectedUbicaciones = $event"
            />
          </div>

          <!-- Grid de 3 filtros simples -->
          <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
            <!-- Tipos de Café -->
            <div>
              <label class="block text-sm font-medium mb-2 text-[var(--brand-text)]">Tipos de Café</label>
              <SimpleMultiSelector
                :selected-items="selectedTipos"
                :items="opcionesFiltros.tipos"
                icon="i-lucide-coffee"
                placeholder="Todos los tipos"
                item-label="tipo"
                items-label="tipos"
                @update:selected-items="selectedTipos = $event"
              />
            </div>

            <!-- Estados -->
            <div>
              <label class="block text-sm font-medium mb-2 text-[var(--brand-text)]">Estados</label>
              <SimpleMultiSelector
                :selected-items="selectedEstados"
                :items="opcionesFiltros.estados"
                icon="i-lucide-check-circle"
                placeholder="Todos los estados"
                item-label="estado"
                items-label="estados"
                @update:selected-items="selectedEstados = $event"
              />
            </div>

            <!-- Calidades -->
            <div>
              <label class="block text-sm font-medium mb-2 text-[var(--brand-text)]">Calidades</label>
              <SimpleMultiSelector
                :selected-items="selectedCalidades"
                :items="opcionesFiltros.calidades"
                icon="i-lucide-star"
                placeholder="Todas las calidades"
                item-label="calidad"
                items-label="calidades"
                @update:selected-items="selectedCalidades = $event"
              />
            </div>
          </div>
        </div>

        <template #footer>
          <div class="flex flex-col sm:flex-row items-center justify-between gap-3">
            <div class="text-xs text-[var(--brand-text-muted)]">
              Rango activo: {{ rangoLegible }} · Registros filtrados: {{ data.contadores.ingresos_filtrados || 0 }}/{{ data.contadores.total_ingresos || 0 }}
            </div>
            <UButton
              :loading="loading"
              :disabled="loading"
              :ui="{
                base: hasPendingChanges
                  ? 'bg-yellow-500 text-black border border-yellow-600 hover:bg-yellow-400 hover:border-yellow-500 disabled:opacity-50 disabled:cursor-not-allowed'
                  : 'bg-[#c08040] text-[#1b1209] border border-[#d99a56] hover:bg-[#d99a56] hover:border-[#f0c07c] disabled:opacity-50 disabled:cursor-not-allowed'
              }"
              size="sm"
              @click="loadData"
            >
              <template #leading>
                <UIcon name="i-lucide-refresh-cw" :class="{ 'animate-spin': loading }" />
              </template>
              Actualizar
            </UButton>
          </div>
        </template>
      </UCard>

      <!-- Contadores -->
      <UCard v-if="data.contadores" class="brand-card border border-transparent">
        <template #header>
          <h2 class="text-xl font-bold brand-section-title">Estadísticas del Filtro</h2>
        </template>

        <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
          <div class="rounded-lg border border-[#3a2a16] bg-[#1c140c] px-4 py-3">
            <div class="text-xs text-[var(--brand-text-muted)] uppercase tracking-wide mb-1">Ingresos Filtrados</div>
            <div class="text-2xl font-bold text-[var(--brand-primary)]">
              {{ data.contadores.ingresos_filtrados || 0 }}
            </div>
          </div>
          <div class="rounded-lg border border-[#3a2a16] bg-[#1c140c] px-4 py-3">
            <div class="text-xs text-[var(--brand-text-muted)] uppercase tracking-wide mb-1">Total Ingresos</div>
            <div class="text-2xl font-bold text-[var(--brand-text)]">
              {{ data.contadores.total_ingresos || 0 }}
            </div>
          </div>
          <div class="rounded-lg border border-[#3a2a16] bg-[#1c140c] px-4 py-3">
            <div class="text-xs text-[var(--brand-text-muted)] uppercase tracking-wide mb-1">Clientes Activos</div>
            <div class="text-2xl font-bold text-[var(--brand-primary)]">
              {{ data.contadores.clientes_con_ingresos_filtrados || 0 }}
            </div>
          </div>
          <div class="rounded-lg border border-[#3a2a16] bg-[#1c140c] px-4 py-3">
            <div class="text-xs text-[var(--brand-text-muted)] uppercase tracking-wide mb-1">Total Clientes</div>
            <div class="text-2xl font-bold text-[var(--brand-text)]">
              {{ data.contadores.total_clientes || 0 }}
            </div>
          </div>
        </div>

        <template #footer>
          <div class="text-xs text-[var(--brand-text-muted)]">
            Última actualización: {{ lastUpdated }}
          </div>
        </template>
      </UCard>

      <!-- Secciones de Totales -->
      <TotalesIngresoCompra
        v-if="pageSections.totalesCafe"
        :data="data.totalesIngresoCompra"
        :contadores="data.contadores"
        :rango-legible="rangoLegible"
        :last-updated="lastUpdated"
      />
      <TotalesMonetarios
        v-if="pageSections.totalesCafe"
        :data="data.totalesMonetarios"
        :contadores="data.contadores"
        :rango-legible="rangoLegible"
        :last-updated="lastUpdated"
      />
      <TotalesVerde
        v-if="pageSections.totalesVerde"
        :data="data.totalesVerde"
        :contadores="data.contadores"
        :rango-legible="rangoLegible"
        :last-updated="lastUpdated"
      />

      <!-- Lista de Ingresos -->
      <UCard v-if="pageSections.tablaIngresos" class="brand-card border border-transparent">
        <template #header>
          <div class="flex items-center justify-between">
            <div>
              <h2 class="text-xl font-bold brand-section-title">Lista de Ingresos</h2>
              <p class="text-xs text-[var(--brand-text-muted)] mt-1">
                Detalles completos de {{ data.listaIngresos?.length || 0 }} ingresos filtrados
              </p>
            </div>
            <div class="flex items-center gap-2">
              <UButton
                size="xs"
                color="gray"
                variant="soft"
                icon="i-lucide-copy"
                @click="copiarListaIngresosTexto"
                :disabled="!data.listaIngresos || data.listaIngresos.length === 0"
              >
                Copiar Texto
              </UButton>
              <UButton
                size="xs"
                color="gray"
                variant="soft"
                icon="i-lucide-braces"
                @click="copiarListaIngresosJSON"
                :disabled="!data.listaIngresos || data.listaIngresos.length === 0"
              >
                Copiar JSON
              </UButton>
            </div>
          </div>
        </template>

        <div v-if="data.listaIngresos && data.listaIngresos.length > 0" class="overflow-x-auto max-h-[600px] overflow-y-auto">
          <table class="w-full text-sm">
            <thead class="sticky top-0 bg-[#1c140c] z-10">
              <tr class="border-b border-[var(--brand-border)]">
                <th class="text-left py-3 px-2 font-semibold text-[var(--brand-text-muted)]">ID</th>
                <th class="text-left py-3 px-2 font-semibold text-[var(--brand-text-muted)]">Fecha</th>
                <th class="text-left py-3 px-2 font-semibold text-[var(--brand-text-muted)]">Cliente</th>
                <th class="text-left py-3 px-2 font-semibold text-[var(--brand-text-muted)]">Tipo</th>
                <th class="text-right py-3 px-2 font-semibold text-[var(--brand-text-muted)]">Peso Neto</th>
                <th class="text-right py-3 px-2 font-semibold text-[var(--brand-text-muted)]">Precio</th>
                <th class="text-right py-3 px-2 font-semibold text-[var(--brand-text-muted)]">Total</th>
                <th class="text-center py-3 px-2 font-semibold text-[var(--brand-text-muted)]">Estado</th>
              </tr>
            </thead>
            <tbody>
              <tr
                v-for="ingreso in data.listaIngresos"
                :key="ingreso.id"
                class="border-b border-[var(--brand-border)]/50 hover:bg-[#1c140c] transition-colors"
              >
                <td class="py-2 px-2 text-[var(--brand-text-muted)]">{{ ingreso.id }}</td>
                <td class="py-2 px-2 text-[var(--brand-text)]">
                  {{ ingreso.created_at ? new Date(ingreso.created_at).toLocaleDateString('es-ES') : '-' }}
                </td>
                <td class="py-2 px-2 text-[var(--brand-text)]">{{ ingreso.cliente_nombre || '-' }}</td>
                <td class="py-2 px-2">
                  <span :class="[
                    'inline-flex px-2 py-0.5 rounded text-xs font-medium',
                    ingreso.tipo === 'uva' ? 'bg-purple-500/20 text-purple-300' :
                    ingreso.tipo === 'verde' ? 'bg-green-500/20 text-green-300' :
                    ingreso.tipo === 'mojado' ? 'bg-blue-500/20 text-blue-300' :
                    ingreso.tipo === 'oreado' ? 'bg-yellow-500/20 text-yellow-300' :
                    'bg-gray-500/20 text-gray-300'
                  ]">
                    {{ ingreso.tipo || '-' }}
                  </span>
                </td>
                <td class="py-2 px-2 text-right text-[var(--brand-text)]">
                  {{ ingreso.peso_neto ? ingreso.peso_neto.toFixed(2) : '-' }} lb
                </td>
                <td class="py-2 px-2 text-right text-[var(--brand-text)]">
                  L {{ ingreso.precio ? ingreso.precio.toFixed(2) : '-' }}
                </td>
                <td class="py-2 px-2 text-right font-semibold text-[var(--brand-primary)]">
                  L {{ ingreso.total_a_pagar ? ingreso.total_a_pagar.toFixed(2) : '-' }}
                </td>
                <td class="py-2 px-2 text-center">
                  <span :class="[
                    'inline-flex px-2 py-0.5 rounded text-xs font-medium',
                    ingreso.estado === 'pagado' ? 'bg-green-500/20 text-green-300' :
                    ingreso.estado === 'pendiente' ? 'bg-yellow-500/20 text-yellow-300' :
                    ingreso.estado === 'anulado' ? 'bg-red-500/20 text-red-300' :
                    'bg-gray-500/20 text-gray-300'
                  ]">
                    {{ ingreso.estado || '-' }}
                  </span>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
        <div v-else class="py-8 text-center text-sm text-[var(--brand-text-muted)]">
          No hay ingresos disponibles con los filtros actuales
        </div>
      </UCard>

      <!-- Top 10 Clientes -->
      <UCard v-if="pageSections.top10Clientes" class="brand-card border border-transparent">
        <template #header>
          <div class="flex items-center justify-between">
            <div>
              <h2 class="text-xl font-bold brand-section-title">Top 10 Clientes</h2>
              <p class="text-xs text-[var(--brand-text-muted)] mt-1">
                Clientes ordenados por monto total de ingresos
              </p>
            </div>
            <div class="flex items-center gap-2">
              <UButton
                size="xs"
                color="gray"
                variant="soft"
                icon="i-lucide-copy"
                @click="copiarTop10ClientesTexto"
                :disabled="!data.listaClientes || data.listaClientes.length === 0"
              >
                Copiar Texto
              </UButton>
              <UButton
                size="xs"
                color="gray"
                variant="soft"
                icon="i-lucide-braces"
                @click="copiarTop10ClientesJSON"
                :disabled="!data.listaClientes || data.listaClientes.length === 0"
              >
                Copiar JSON
              </UButton>
            </div>
          </div>
        </template>

        <div v-if="data.listaClientes && data.listaClientes.length > 0" class="space-y-3">
          <div
            v-for="(cliente, index) in data.listaClientes.slice(0, 10)"
            :key="cliente.cliente_id"
            class="flex items-center gap-3 p-3 rounded-lg border border-[var(--brand-border)] hover:border-[#c08040]/50 transition-colors"
          >
            <div class="flex items-center justify-center w-8 h-8 rounded-full bg-[var(--brand-primary)]/20 text-[var(--brand-primary)] font-bold text-sm">
              {{ index + 1 }}
            </div>
            <div class="flex-1 min-w-0">
              <div class="text-sm font-medium text-[var(--brand-text)] truncate">
                {{ cliente.cliente_nombre || 'Sin nombre' }}
              </div>
              <div class="text-xs text-[var(--brand-text-muted)]">
                {{ cliente.cliente_cedula || 'Sin cédula' }} · {{ cliente.cliente_ubicacion || 'Sin ubicación' }}
              </div>
            </div>
            <div class="text-right">
              <div class="text-sm font-bold text-[var(--brand-primary)]">
                L {{ cliente.total_pagado ? cliente.total_pagado.toFixed(2) : '0.00' }}
              </div>
              <div class="text-xs text-[var(--brand-text-muted)]">
                {{ cliente.num_ingresos || 0 }} ingresos · {{ cliente.total_qq_seco ? cliente.total_qq_seco.toFixed(2) : '0.00' }} qq
              </div>
            </div>
          </div>
        </div>
        <div v-else class="py-8 text-center text-sm text-[var(--brand-text-muted)]">
          No hay clientes disponibles con los filtros actuales
        </div>
      </UCard>

      <!-- Gráficas: Series Temporales -->
      <div v-if="pageSections.graficas && data.serieTemporal && data.serieTemporal.length > 0" class="space-y-6">
        <UCard class="brand-card border border-transparent">
          <template #header>
            <div class="flex items-center justify-between">
              <div>
                <h2 class="text-xl font-bold brand-section-title">Serie Temporal Acumulada</h2>
                <p class="text-xs text-[var(--brand-text-muted)] mt-1">
                  Evolución de ingresos en el tiempo ({{ data.serieTemporal.length }} puntos de datos)
                </p>
              </div>
              <div class="flex items-center gap-2">
                <UButton
                  size="xs"
                  color="gray"
                  variant="soft"
                  icon="i-lucide-copy"
                  @click="copiarSerieTemporalTexto"
                  :disabled="!data.serieTemporal || data.serieTemporal.length === 0"
                >
                  Copiar Texto
                </UButton>
                <UButton
                  size="xs"
                  color="gray"
                  variant="soft"
                  icon="i-lucide-braces"
                  @click="copiarSerieTemporalJSON"
                  :disabled="!data.serieTemporal || data.serieTemporal.length === 0"
                >
                  Copiar JSON
                </UButton>
              </div>
            </div>
          </template>

          <div class="space-y-4">
            <!-- Tabla de serie temporal -->
            <div class="overflow-x-auto max-h-96">
              <table class="w-full text-xs">
                <thead class="sticky top-0 bg-[#1c140c]">
                  <tr class="border-b border-[var(--brand-border)]">
                    <th class="text-left py-2 px-2 font-semibold text-[var(--brand-text-muted)]">Fecha</th>
                    <th class="text-left py-2 px-2 font-semibold text-[var(--brand-text-muted)]">Tipo</th>
                    <th class="text-left py-2 px-2 font-semibold text-[var(--brand-text-muted)]">Estado</th>
                    <th class="text-right py-2 px-2 font-semibold text-[var(--brand-text-muted)]">Ingresos</th>
                    <th class="text-right py-2 px-2 font-semibold text-[var(--brand-text-muted)]">Peso Seco (qq)</th>
                    <th class="text-right py-2 px-2 font-semibold text-[var(--brand-text-muted)]">Inversión</th>
                    <th class="text-right py-2 px-2 font-semibold text-[var(--brand-text-muted)]">Acum. qq</th>
                    <th class="text-right py-2 px-2 font-semibold text-[var(--brand-text-muted)]">Acum. L</th>
                  </tr>
                </thead>
                <tbody>
                  <tr
                    v-for="(punto, idx) in data.serieTemporal"
                    :key="`${punto.fecha_grupo}-${punto.tipo}-${punto.estado}-${idx}`"
                    class="border-b border-[var(--brand-border)]/30 hover:bg-[#1c140c] transition-colors"
                  >
                    <td class="py-2 px-2 text-[var(--brand-text)]">
                      {{ punto.fecha_grupo ? new Date(punto.fecha_grupo).toLocaleDateString('es-ES') : '-' }}
                    </td>
                    <td class="py-2 px-2">
                      <span :class="[
                        'inline-flex px-2 py-0.5 rounded text-xs font-medium',
                        punto.tipo === 'uva' ? 'bg-purple-500/20 text-purple-300' :
                        punto.tipo === 'verde' ? 'bg-green-500/20 text-green-300' :
                        punto.tipo === 'mojado' ? 'bg-blue-500/20 text-blue-300' :
                        punto.tipo === 'oreado' ? 'bg-yellow-500/20 text-yellow-300' :
                        'bg-gray-500/20 text-gray-300'
                      ]">
                        {{ punto.tipo || '-' }}
                      </span>
                    </td>
                    <td class="py-2 px-2">
                      <span :class="[
                        'inline-flex px-2 py-0.5 rounded text-xs font-medium',
                        punto.estado === 'pagado' ? 'bg-green-500/20 text-green-300' :
                        punto.estado === 'pendiente' ? 'bg-yellow-500/20 text-yellow-300' :
                        'bg-gray-500/20 text-gray-300'
                      ]">
                        {{ punto.estado || '-' }}
                      </span>
                    </td>
                    <td class="py-2 px-2 text-right text-[var(--brand-text)]">
                      {{ punto.num_ingresos_periodo || 0 }}
                    </td>
                    <td class="py-2 px-2 text-right text-[var(--brand-text)]">
                      {{ punto.peso_seco_periodo ? punto.peso_seco_periodo.toFixed(2) : '0.00' }}
                    </td>
                    <td class="py-2 px-2 text-right font-semibold text-[var(--brand-primary)]">
                      L {{ punto.inversion_periodo ? punto.inversion_periodo.toFixed(2) : '0.00' }}
                    </td>
                    <td class="py-2 px-2 text-right text-cyan-400">
                      {{ punto.peso_seco_acumulado ? punto.peso_seco_acumulado.toFixed(2) : '0.00' }}
                    </td>
                    <td class="py-2 px-2 text-right font-bold text-cyan-400">
                      L {{ punto.inversion_acumulada ? punto.inversion_acumulada.toFixed(2) : '0.00' }}
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </UCard>
      </div>
    </template>
  </div>
</template>

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

// Define page metadata
definePageMeta({
  layout: 'informe',
  title: 'Informe Ingresos'
})

// Get page sections from layout
const { pageSections } = useInformeLayout()

// Reactive state
const data = ref<any>(null)
const loading = ref(false)
const error = ref<string | null>(null)
const lastUpdated = ref<string>('')

// Filtros básicos
const includeAnulados = ref(false)

type PresetValue =
  | '' | 'custom' | 'hoy' | 'semana' | 'mes' | 'ytd'
  | 'cosecha-20-21' | 'cosecha-21-22' | 'cosecha-22-23'
  | 'cosecha-23-24' | 'cosecha-24-25' | 'cosecha-25-26'

const selectedPreset = ref<PresetValue>('cosecha-25-26')
const fechaDesde = ref<string | null>(null)
const fechaHasta = ref<string | null>(null)

// Filtros avanzados - todos usando arrays para CheckboxGroup
const selectedClienteIds = ref<number[]>([])
const selectedUbicaciones = ref<string[]>([])
const selectedCalidades = ref<string[]>([])
const selectedTipos = ref<string[]>([])
const selectedEstados = ref<string[]>([])

// Opciones de filtros disponibles (desde Metabase)
const opcionesFiltros = ref({
  ubicaciones: [] as string[],
  calidades: [] as string[],
  tipos: [] as string[],
  estados: [] as string[]
})

// Items para CheckboxGroup de Tipos
const tiposItems = computed(() => [
  { label: 'Uva', value: 'uva' },
  { label: 'Mojado', value: 'mojado' },
  { label: 'Oreado', value: 'oreado' },
  { label: 'Verde', value: 'verde' }
])

// Items para CheckboxGroup de Estados
const estadosItems = computed(() => [
  { label: 'Pagado', value: 'pagado' },
  { label: 'Pendiente', value: 'pendiente' }
])

// Filtros aplicados (los que se usaron en la última carga de datos)
const appliedFilters = ref<{
  fechaDesde: string | null
  fechaHasta: string | null
  includeAnulados: boolean
  clienteIds: number[]
  ubicaciones: string[]
  calidades: string[]
  tipos: string[]
  estados: string[]
} | null>(null)

// Computed
const rangoLegible = computed(() => {
  if (!fechaDesde.value && !fechaHasta.value) return 'Sin filtro de fecha'
  const f = fechaDesde.value ?? '—'
  const t = fechaHasta.value ?? '—'
  return `${f} → ${t}`
})

// Detectar si hay cambios pendientes sin aplicar
const hasPendingChanges = computed(() => {
  // Si no hay datos cargados, no hay cambios pendientes
  if (!appliedFilters.value) return false

  // Comparar filtros actuales con los aplicados
  return (
    fechaDesde.value !== appliedFilters.value.fechaDesde ||
    fechaHasta.value !== appliedFilters.value.fechaHasta ||
    includeAnulados.value !== appliedFilters.value.includeAnulados ||
    JSON.stringify(selectedClienteIds.value) !== JSON.stringify(appliedFilters.value.clienteIds) ||
    JSON.stringify(selectedUbicaciones.value) !== JSON.stringify(appliedFilters.value.ubicaciones) ||
    JSON.stringify(selectedCalidades.value) !== JSON.stringify(appliedFilters.value.calidades) ||
    JSON.stringify(selectedTipos.value) !== JSON.stringify(appliedFilters.value.tipos) ||
    JSON.stringify(selectedEstados.value) !== JSON.stringify(appliedFilters.value.estados)
  )
})

// Methods
async function loadData() {
  // Prevenir múltiples peticiones simultáneas
  if (loading.value) {
    console.warn('[Informe] Ya hay una petición en proceso, ignorando nueva solicitud')
    return
  }

  loading.value = true
  error.value = null

  try {
    const payload = {
      fecha_desde: fechaDesde.value,
      fecha_hasta: fechaHasta.value,
      incluir_anulados: includeAnulados.value,
      cliente_ids: selectedClienteIds.value,
      tipos: selectedTipos.value,
      estados: selectedEstados.value,
      ubicaciones: selectedUbicaciones.value,
      calidades: selectedCalidades.value,
      granularidad: 'dia' // Default granularity
    }

    console.log('[Informe] Cargando datos con filtros:', payload)
    const result = await $fetch('/api/metabase/informe', {
      method: 'POST',
      body: payload
    })

    data.value = result
    lastUpdated.value = new Date().toLocaleString('es-ES', {
      year: 'numeric',
      month: 'long',
      day: 'numeric',
      hour: '2-digit',
      minute: '2-digit'
    })

    // Guardar los filtros aplicados
    appliedFilters.value = {
      fechaDesde: fechaDesde.value,
      fechaHasta: fechaHasta.value,
      includeAnulados: includeAnulados.value,
      clienteIds: [...selectedClienteIds.value],
      ubicaciones: [...selectedUbicaciones.value],
      calidades: [...selectedCalidades.value],
      tipos: [...selectedTipos.value],
      estados: [...selectedEstados.value]
    }

    console.log('[Informe] Datos cargados:', result)
  } catch (err: any) {
    error.value = err.message || 'Error al cargar datos del informe'
    console.error('[Informe] Error loading data:', err)
  } finally {
    loading.value = false
  }
}

async function onToggleAnulados(newValue: boolean | 'indeterminate') {
  if (newValue === true) {
    // Pedir confirmación al activar
    const confirmed = confirm(
      '⚠️ ADVERTENCIA\n\n' +
      'Está a punto de incluir registros ANULADOS en los cálculos.\n\n' +
      'Esto puede afectar significativamente los resultados financieros y métricas.\n\n' +
      '¿Está seguro de que desea continuar?'
    )

    if (!confirmed) {
      // Si cancela, revertir el cambio
      includeAnulados.value = false
      return
    }
  }

  // NO recargar automáticamente - el usuario debe hacer clic en "Actualizar"
}

function onUpdatePreset(value: PresetValue) {
  selectedPreset.value = value
}

function onUpdateFechaDesde(value: string | null) {
  fechaDesde.value = value
}

function onUpdateFechaHasta(value: string | null) {
  fechaHasta.value = value
}

// Cargar opciones de filtros desde Metabase
async function loadOpcionesFiltros() {
  try {
    const result = await $fetch('/api/metabase/opciones-filtros')
    opcionesFiltros.value = result
    console.log('[Informe] Opciones de filtros cargadas:', opcionesFiltros.value)
  } catch (error) {
    console.error('[Informe] Error loading opciones de filtros:', error)
    // No fallar si no se pueden cargar las opciones, solo usar arrays vacíos
  }
}

// Funciones de copia
async function copiarListaIngresosTexto() {
  if (!data.value?.listaIngresos || data.value.listaIngresos.length === 0) return

  const contadores = data.value.contadores || {}
  const footer = `
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
📊 RESUMEN
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
📅 Rango: ${rangoLegible.value}
📦 Ingresos: ${contadores.ingresos_filtrados || 0} de ${contadores.total_ingresos || 0} registros
👥 Clientes: ${contadores.clientes_con_ingresos_filtrados || 0} de ${contadores.total_clientes || 0} clientes
🕐 Generado: ${lastUpdated.value}`

  const texto = `📊 LISTA DE INGRESOS - ${data.value.listaIngresos.length} registros
Rango: ${rangoLegible.value}
Generado: ${lastUpdated.value}

${data.value.listaIngresos.map((ing, idx) => `
${idx + 1}. ID: ${ing.id}
   📅 Fecha: ${ing.created_at ? new Date(ing.created_at).toLocaleDateString('es-ES') : '-'}
   👤 Cliente: ${ing.cliente_nombre || '-'}
   ☕ Tipo: ${ing.tipo || '-'}
   ⚖️ Peso: ${ing.peso_neto ? ing.peso_neto.toFixed(2) : '-'} lb
   💰 Precio: L ${ing.precio ? ing.precio.toFixed(2) : '-'}
   💵 Total: L ${ing.total_a_pagar ? ing.total_a_pagar.toFixed(2) : '-'}
   📍 Estado: ${ing.estado || '-'}
`).join('\n')}${footer}`

  await navigator.clipboard.writeText(texto)
  alert('✅ Lista de ingresos copiada al portapapeles')
}

async function copiarListaIngresosJSON() {
  if (!data.value?.listaIngresos || data.value.listaIngresos.length === 0) return

  const json = JSON.stringify(data.value.listaIngresos, null, 2)
  await navigator.clipboard.writeText(json)
  alert('✅ JSON copiado al portapapeles')
}

async function copiarTop10ClientesTexto() {
  if (!data.value?.listaClientes || data.value.listaClientes.length === 0) return

  const contadores = data.value.contadores || {}
  const footer = `
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
📊 RESUMEN
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
📅 Rango: ${rangoLegible.value}
📦 Ingresos: ${contadores.ingresos_filtrados || 0} de ${contadores.total_ingresos || 0} registros
👥 Clientes: ${contadores.clientes_con_ingresos_filtrados || 0} de ${contadores.total_clientes || 0} clientes
🕐 Generado: ${lastUpdated.value}`

  const top10 = data.value.listaClientes.slice(0, 10)
  const texto = `🏆 TOP 10 CLIENTES
Rango: ${rangoLegible.value}
Generado: ${lastUpdated.value}

${top10.map((cliente, idx) => `
${idx + 1}. ${cliente.cliente_nombre || 'Sin nombre'}
   📄 Cédula: ${cliente.cliente_cedula || 'Sin cédula'}
   📍 Ubicación: ${cliente.cliente_ubicacion || 'Sin ubicación'}
   💰 Total Pagado: L ${cliente.total_pagado ? cliente.total_pagado.toFixed(2) : '0.00'}
   📦 Ingresos: ${cliente.num_ingresos || 0}
   ⚖️ Quintales: ${cliente.total_qq_seco ? cliente.total_qq_seco.toFixed(2) : '0.00'} qq
`).join('\n')}${footer}`

  await navigator.clipboard.writeText(texto)
  alert('✅ Top 10 clientes copiado al portapapeles')
}

async function copiarTop10ClientesJSON() {
  if (!data.value?.listaClientes || data.value.listaClientes.length === 0) return

  const top10 = data.value.listaClientes.slice(0, 10)
  const json = JSON.stringify(top10, null, 2)
  await navigator.clipboard.writeText(json)
  alert('✅ JSON copiado al portapapeles')
}

async function copiarSerieTemporalTexto() {
  if (!data.value?.serieTemporal || data.value.serieTemporal.length === 0) return

  const contadores = data.value.contadores || {}
  const footer = `
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
📊 RESUMEN
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
📅 Rango: ${rangoLegible.value}
📦 Ingresos: ${contadores.ingresos_filtrados || 0} de ${contadores.total_ingresos || 0} registros
👥 Clientes: ${contadores.clientes_con_ingresos_filtrados || 0} de ${contadores.total_clientes || 0} clientes
🕐 Generado: ${lastUpdated.value}`

  const texto = `📈 SERIE TEMPORAL ACUMULADA - ${data.value.serieTemporal.length} puntos
Rango: ${rangoLegible.value}
Generado: ${lastUpdated.value}

${data.value.serieTemporal.map((punto, idx) => `
${idx + 1}. 📅 ${punto.fecha_grupo ? new Date(punto.fecha_grupo).toLocaleDateString('es-ES') : '-'}
   ☕ Tipo: ${punto.tipo || '-'}
   📍 Estado: ${punto.estado || '-'}
   📦 Ingresos: ${punto.num_ingresos_periodo || 0}
   ⚖️ Peso Seco: ${punto.peso_seco_periodo ? punto.peso_seco_periodo.toFixed(2) : '0.00'} qq
   💰 Inversión: L ${punto.inversion_periodo ? punto.inversion_periodo.toFixed(2) : '0.00'}
   📊 Acumulado: ${punto.peso_seco_acumulado ? punto.peso_seco_acumulado.toFixed(2) : '0.00'} qq
   💵 Total Acum: L ${punto.inversion_acumulada ? punto.inversion_acumulada.toFixed(2) : '0.00'}
`).join('\n')}${footer}`

  await navigator.clipboard.writeText(texto)
  alert('✅ Serie temporal copiada al portapapeles')
}

async function copiarSerieTemporalJSON() {
  if (!data.value?.serieTemporal || data.value.serieTemporal.length === 0) return

  const json = JSON.stringify(data.value.serieTemporal, null, 2)
  await navigator.clipboard.writeText(json)
  alert('✅ JSON copiado al portapapeles')
}

// Inicializar preset por defecto sin cargar datos
onMounted(async () => {
  // Default preset: cosecha 25-26
  selectedPreset.value = 'cosecha-25-26'

  // Cargar opciones de filtros disponibles
  await loadOpcionesFiltros()

  // NO cargar datos automáticamente - el usuario debe hacer clic en "Actualizar"
})
</script>