<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-[var(--brand-primary-strong)] 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>

    <!-- Main Content -->
    <template v-else>
      <!-- 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">Comparativa de Cosechas</h2>
                <p class="text-xs text-[var(--brand-text-muted)] mt-1">
                  Compara métricas entre diferentes cosechas de café
                </p>
              </div>
              <div class="flex items-center gap-2">
                <UCheckbox v-model="incluirAnulados" 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="incluirAnulados"
              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."
            />
          </div>
        </template>

        <!-- Selector de Cosechas -->
        <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-3 mb-4">
          <label
            v-for="cosecha in cosechasDisponibles"
            :key="cosecha.id"
            class="flex items-center gap-2 p-3 rounded-lg border transition-all"
            :class="[
              cosechasSeleccionadas.includes(cosecha.id)
                ? 'border-[var(--brand-primary-strong)] bg-[var(--brand-primary-strong)]/10 cursor-pointer'
                : 'border-[var(--brand-border)] hover:border-[var(--brand-primary-strong)]/50 cursor-pointer'
            ]"
          >
            <input
              type="checkbox"
              :value="cosecha.id"
              v-model="cosechasSeleccionadas"
              class="rounded border-[var(--brand-border)] text-[var(--brand-primary-strong)] focus:ring-[var(--brand-primary-strong)]"
            />
            <span class="text-sm text-[var(--brand-text)]">{{ cosecha.label }}</span>
          </label>
        </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)]">
              Cosechas seleccionadas: {{ cosechasSeleccionadas.length }} de {{ cosechasDisponibles.length }}
            </div>
            <UButton
              :loading="loading"
              :disabled="loading || cosechasSeleccionadas.length === 0"
              :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-[var(--brand-primary-strong)] text-[var(--brand-bg)] border border-[var(--brand-primary)] hover:bg-[var(--brand-primary)] hover:border-[var(--brand-accent)] 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>

      <!-- Visualizaciones -->
      <template v-if="data && data.datosDiariosCompletos.length > 0">
        <CosechasHeatmap
          :ingresos="resumenIngresosProcesados"
          :cosechas-seleccionadas="cosechasSeleccionadas"
        />

        <CosechasEvolucion
          :ingresos="resumenIngresosProcesados"
          :cosechas-seleccionadas="cosechasSeleccionadas"
        />

        <CosechasTotales
          :ingresos="resumenIngresosProcesados"
          :cosechas-seleccionadas="cosechasSeleccionadas"
        />
      </template>

      <!-- Estado vacío -->
      <UCard v-else-if="data && data.datosDiariosCompletos.length === 0" 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-[var(--brand-primary-strong)]/10 p-6">
            <UIcon name="i-lucide-calendar-x" class="w-12 h-12 text-[var(--brand-primary-strong)]" />
          </div>
          <div class="flex flex-col gap-2">
            <h3 class="text-lg font-semibold text-[var(--brand-text)]">
              No hay datos disponibles
            </h3>
            <p class="text-sm text-[var(--brand-text-muted)] max-w-md">
              No se encontraron datos para las cosechas seleccionadas. Intenta seleccionar otras cosechas.
            </p>
          </div>
        </div>
      </UCard>

      <!-- Mensaje de bienvenida (sin datos cargados) -->
      <UCard v-else 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-[var(--brand-primary-strong)]/10 p-6">
            <UIcon name="i-lucide-bar-chart-3" class="w-12 h-12 text-[var(--brand-primary-strong)]" />
          </div>
          <div class="flex flex-col gap-2">
            <h3 class="text-lg font-semibold text-[var(--brand-text)]">
              Comparativa de Cosechas
            </h3>
            <p class="text-sm text-[var(--brand-text-muted)] max-w-md">
              Selecciona las cosechas que deseas comparar y haz clic en "Actualizar"
            </p>
          </div>
        </div>
      </UCard>
    </template>
  </div>
</template>

<script setup lang="ts">
// Define page metadata
definePageMeta({
  layout: 'informe',
  title: 'Comparativa Cosechas'
})

// Definiciones de cosechas disponibles
const cosechasDisponibles = ref([
  { id: 'cosecha-20-21', label: 'Cosecha 20-21', fechaInicio: '2020-09-08', fechaFin: '2021-09-07' },
  { id: 'cosecha-21-22', label: 'Cosecha 21-22', fechaInicio: '2021-09-08', fechaFin: '2022-09-07' },
  { id: 'cosecha-22-23', label: 'Cosecha 22-23', fechaInicio: '2022-09-08', fechaFin: '2023-09-07' },
  { id: 'cosecha-23-24', label: 'Cosecha 23-24', fechaInicio: '2023-09-08', fechaFin: '2024-09-07' },
  { id: 'cosecha-24-25', label: 'Cosecha 24-25', fechaInicio: '2024-09-08', fechaFin: '2025-09-07' },
  { id: 'cosecha-25-26', label: 'Cosecha 25-26', fechaInicio: '2025-09-08', fechaFin: '2026-09-07' }
])

// Configuración de estilos para las gráficas
const estilosGraficas = ref({
  coloresCosechas: ['var(--brand-primary-strong)', 'var(--brand-primary)', '#8b6f47', '#a0826e', '#b89968', 'var(--brand-accent)'],
  anchoCelda: 80,
  altoCelda: 6,
  anchoMaxBarra: 300,
  altoBarra: 8,
  opacidadVacias: 0.05
})

// Provide para que los componentes puedan acceder a estas configuraciones
provide('cosechasDisponibles', cosechasDisponibles.value)
provide('estilosGraficas', estilosGraficas)

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

// Filtros
const incluirAnulados = ref(false)
const cosechasSeleccionadas = ref<string[]>(['cosecha-24-25', 'cosecha-25-26'])

// Filtros aplicados (los que se usaron en la última carga de datos)
const appliedFilters = ref<{
  cosechasSeleccionadas: string[]
  incluirAnulados: boolean
} | null>(null)

// Computed
// 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
  const cosechasChanged = JSON.stringify(cosechasSeleccionadas.value.sort()) !== JSON.stringify(appliedFilters.value.cosechasSeleccionadas.sort())
  const anuladosChanged = incluirAnulados.value !== appliedFilters.value.incluirAnulados

  return cosechasChanged || anuladosChanged
})

// Procesar datos de resumen para los componentes
// Los componentes esperan el formato de vista_resumen_ingresos (que es lo que devuelve la query)
const resumenIngresosProcesados = computed(() => {
  if (!data.value || !data.value.datosDiariosCompletos) return []

  // La query ya devuelve los datos en el formato correcto con las métricas agregadas por día
  // Solo necesitamos mapear los nombres de campos si es necesario
  return data.value.datosDiariosCompletos.map((row: any) => ({
    fecha: row.fecha,
    created_at: row.fecha, // Algunos componentes esperan created_at
    cosecha_id: row.cosecha_id,
    dia_relativo: row.dia_relativo,
    total_peso_seco: row.total_peso_seco || 0,
    peso_neto_uva: row.peso_neto_uva || 0,
    peso_neto_verde: row.peso_neto_verde || 0,
    sacos_total_dia: row.sacos_total_dia || 0,
    total_lempiras_uva: row.total_lempiras_uva || 0,
    total_lempiras_verde: row.total_lempiras_verde || 0,
    total_lempiras_mojado_oreado: row.total_lempiras_mojado_oreado || 0
  }))
})

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

  // Validar que haya cosechas seleccionadas
  if (cosechasSeleccionadas.value.length === 0) {
    error.value = 'Debes seleccionar al menos una cosecha'
    return
  }

  loading.value = true
  error.value = null

  try {
    const result = await $fetch('/api/metabase/comparativa-cosechas', {
      method: 'POST',
      body: {
        cosechas_ids: cosechasSeleccionadas.value
      }
    })

    data.value = result

    // Guardar los filtros aplicados
    appliedFilters.value = {
      cosechasSeleccionadas: [...cosechasSeleccionadas.value],
      incluirAnulados: incluirAnulados.value
    }
  } catch (err: any) {
    error.value = err.message || 'Error al cargar datos'
    console.error('Error loading comparativa 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 de la comparativa.\n\n' +
      '¿Está seguro de que desea continuar?'
    )

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

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

// Inicialización
onMounted(() => {
  // Cargar datos automáticamente con las cosechas por defecto
  loadData()
})
</script>
