<template>
  <UCard class="brand-card border border-transparent">
    <template #header>
      <div class="flex items-center gap-2">
        <UIcon name="i-lucide-layers" class="size-5 text-[var(--brand-primary-strong)]" />
        <h3 class="text-base font-semibold text-[var(--brand-text)]">Comparativa por Tipo de Café</h3>
      </div>
    </template>

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
      <!-- Peso por Tipo -->
      <div class="flex flex-col gap-2">
        <h4 class="text-sm font-medium text-[var(--brand-text-muted)]">Peso Total por Tipo (qq)</h4>
        <svg :viewBox="`0 0 ${svgWidth} ${svgHeight}`" class="w-full h-80">
          <!-- Eje Y -->
          <line
            :x1="padding.left"
            :y1="padding.top"
            :x2="padding.left"
            :y2="svgHeight - padding.bottom"
            stroke="var(--brand-border)"
            stroke-width="1"
          />

          <!-- Eje X -->
          <line
            :x1="padding.left"
            :y1="svgHeight - padding.bottom"
            :x2="svgWidth - padding.right"
            :y2="svgHeight - padding.bottom"
            stroke="var(--brand-border)"
            stroke-width="1"
          />

          <!-- Barras agrupadas -->
          <g v-for="(tipo, tipoIndex) in tipos" :key="tipo">
            <g v-for="(cosecha, cosechaIndex) in datosCosechas" :key="cosecha.id">
              <rect
                :x="getGroupedBarX(tipoIndex, cosechaIndex)"
                :y="getBarY(cosecha.pesosPorTipo[tipo] || 0, maxPesoPorTipo)"
                :width="groupedBarWidth"
                :height="getBarHeight(cosecha.pesosPorTipo[tipo] || 0, maxPesoPorTipo)"
                :fill="getCosechaColor(cosechaIndex)"
                :opacity="0.8"
                class="transition-all duration-300 hover:opacity-100"
              >
                <title>{{ cosecha.label }}: {{ (cosecha.pesosPorTipo[tipo] || 0).toFixed(1) }} qq</title>
              </rect>

              <!-- Valor sobre la barra (solo si es significativo) -->
              <text
                v-if="(cosecha.pesosPorTipo[tipo] || 0) > maxPesoPorTipo * 0.05"
                :x="getGroupedBarX(tipoIndex, cosechaIndex) + groupedBarWidth / 2"
                :y="getBarY(cosecha.pesosPorTipo[tipo] || 0, maxPesoPorTipo) - 5"
                text-anchor="middle"
                class="text-xs fill-[var(--brand-text)]"
              >
                {{ (cosecha.pesosPorTipo[tipo] || 0).toFixed(0) }}
              </text>
            </g>

            <!-- Etiqueta del tipo -->
            <text
              :x="getGroupX(tipoIndex)"
              :y="svgHeight - padding.bottom + 20"
              text-anchor="middle"
              class="text-sm font-medium fill-[var(--brand-text)]"
            >
              {{ tipo.charAt(0).toUpperCase() + tipo.slice(1) }}
            </text>
          </g>

          <!-- Leyenda -->
          <g v-for="(cosecha, index) in datosCosechas" :key="cosecha.id">
            <rect
              :x="padding.left + index * 100"
              :y="10"
              :width="12"
              :height="12"
              :fill="getCosechaColor(index)"
            />
            <text
              :x="padding.left + index * 100 + 18"
              :y="20"
              class="text-xs fill-[var(--brand-text-muted)]"
            >
              {{ cosecha.label }}
            </text>
          </g>
        </svg>
      </div>

      <!-- Cantidad por Tipo -->
      <div class="flex flex-col gap-2">
        <h4 class="text-sm font-medium text-[var(--brand-text-muted)]">Cantidad de Ingresos por Tipo</h4>
        <svg :viewBox="`0 0 ${svgWidth} ${svgHeight}`" class="w-full h-80">
          <!-- Eje Y -->
          <line
            :x1="padding.left"
            :y1="padding.top"
            :x2="padding.left"
            :y2="svgHeight - padding.bottom"
            stroke="var(--brand-border)"
            stroke-width="1"
          />

          <!-- Eje X -->
          <line
            :x1="padding.left"
            :y1="svgHeight - padding.bottom"
            :x2="svgWidth - padding.right"
            :y2="svgHeight - padding.bottom"
            stroke="var(--brand-border)"
            stroke-width="1"
          />

          <!-- Barras agrupadas -->
          <g v-for="(tipo, tipoIndex) in tipos" :key="tipo">
            <g v-for="(cosecha, cosechaIndex) in datosCosechas" :key="cosecha.id">
              <rect
                :x="getGroupedBarX(tipoIndex, cosechaIndex)"
                :y="getBarY(cosecha.cantidadPorTipo[tipo] || 0, maxCantidadPorTipo)"
                :width="groupedBarWidth"
                :height="getBarHeight(cosecha.cantidadPorTipo[tipo] || 0, maxCantidadPorTipo)"
                :fill="getCosechaColor(cosechaIndex)"
                :opacity="0.8"
                class="transition-all duration-300 hover:opacity-100"
              >
                <title>{{ cosecha.label }}: {{ cosecha.cantidadPorTipo[tipo] || 0 }} ingresos</title>
              </rect>

              <!-- Valor sobre la barra -->
              <text
                v-if="(cosecha.cantidadPorTipo[tipo] || 0) > 0"
                :x="getGroupedBarX(tipoIndex, cosechaIndex) + groupedBarWidth / 2"
                :y="getBarY(cosecha.cantidadPorTipo[tipo] || 0, maxCantidadPorTipo) - 5"
                text-anchor="middle"
                class="text-xs fill-[var(--brand-text)]"
              >
                {{ cosecha.cantidadPorTipo[tipo] || 0 }}
              </text>
            </g>

            <!-- Etiqueta del tipo -->
            <text
              :x="getGroupX(tipoIndex)"
              :y="svgHeight - padding.bottom + 20"
              text-anchor="middle"
              class="text-sm font-medium fill-[var(--brand-text)]"
            >
              {{ tipo.charAt(0).toUpperCase() + tipo.slice(1) }}
            </text>
          </g>

          <!-- Leyenda -->
          <g v-for="(cosecha, index) in datosCosechas" :key="cosecha.id">
            <rect
              :x="padding.left + index * 100"
              :y="10"
              :width="12"
              :height="12"
              :fill="getCosechaColor(index)"
            />
            <text
              :x="padding.left + index * 100 + 18"
              :y="20"
              class="text-xs fill-[var(--brand-text-muted)]"
            >
              {{ cosecha.label }}
            </text>
          </g>
        </svg>
      </div>
    </div>
  </UCard>
</template>

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

interface Props {
  ingresos: IngresoRecord[]
  cosechasSeleccionadas: string[]
}

const props = defineProps<Props>()

// Obtener definiciones de cosechas
const cosechasDisponibles = inject<any[]>('cosechasDisponibles', [])

// Obtener configuración de estilos
const estilosGraficas = inject<any>('estilosGraficas', ref({
  coloresCosechas: ['var(--brand-primary-strong)', 'var(--brand-primary)', '#8b6f47', '#a0826e', '#b89968', 'var(--brand-accent)']
}))

// Dimensiones del SVG
const svgWidth = 500
const svgHeight = 350
const padding = { top: 40, right: 20, bottom: 40, left: 60 }

// Tipos de café
const tipos = ['uva', 'verde', 'oreado', 'mojado']

// Calcular datos por cosecha y tipo
const datosCosechas = computed(() => {
  return props.cosechasSeleccionadas.map(cosechaId => {
    const cosechaDef = cosechasDisponibles.find(c => c.id === cosechaId)
    if (!cosechaDef) return null

    const ingresosEnCosecha = props.ingresos.filter(ingreso => {
      if (!ingreso.created_at) return false
      const fecha = new Date(ingreso.created_at)
      const inicio = new Date(cosechaDef.fechaInicio)
      const fin = new Date(cosechaDef.fechaFin)
      return fecha >= inicio && fecha <= fin
    })

    const pesosPorTipo: Record<string, number> = {}
    const cantidadPorTipo: Record<string, number> = {}

    tipos.forEach(tipo => {
      const ingresosTipo = ingresosEnCosecha.filter(ing => ing.tipo === tipo)
      pesosPorTipo[tipo] = ingresosTipo.reduce((sum, ing) => sum + ing.peso_neto, 0)
      cantidadPorTipo[tipo] = ingresosTipo.length
    })

    return {
      id: cosechaId,
      label: cosechaDef.label.replace('Cosecha ', ''),
      pesosPorTipo,
      cantidadPorTipo
    }
  }).filter(Boolean) as Array<{
    id: string
    label: string
    pesosPorTipo: Record<string, number>
    cantidadPorTipo: Record<string, number>
  }>
})

// Máximos para escala
const maxPesoPorTipo = computed(() => {
  let max = 0
  datosCosechas.value.forEach(cosecha => {
    tipos.forEach(tipo => {
      const valor = cosecha.pesosPorTipo[tipo]
      if (valor !== undefined && valor > max) {
        max = valor
      }
    })
  })
  return max || 1
})

const maxCantidadPorTipo = computed(() => {
  let max = 0
  datosCosechas.value.forEach(cosecha => {
    tipos.forEach(tipo => {
      const valor = cosecha.cantidadPorTipo[tipo]
      if (valor !== undefined && valor > max) {
        max = valor
      }
    })
  })
  return max || 1
})

// Dimensiones de barras agrupadas
const chartWidth = computed(() => svgWidth - padding.left - padding.right)
const chartHeight = svgHeight - padding.top - padding.bottom

const groupWidth = computed(() => chartWidth.value / tipos.length)
const groupedBarWidth = computed(() => {
  const count = datosCosechas.value.length
  return count > 0 ? (groupWidth.value * 0.8) / count : 0
})

function getGroupX(tipoIndex: number): number {
  return padding.left + tipoIndex * groupWidth.value + groupWidth.value / 2
}

function getGroupedBarX(tipoIndex: number, cosechaIndex: number): number {
  const groupStart = padding.left + tipoIndex * groupWidth.value
  const groupPadding = groupWidth.value * 0.1
  return groupStart + groupPadding + cosechaIndex * groupedBarWidth.value
}

function getBarY(value: number, max: number): number {
  const normalized = value / max
  return padding.top + chartHeight * (1 - normalized)
}

function getBarHeight(value: number, max: number): number {
  return (value / max) * chartHeight
}

// Mapeo de cosechas a índices fijos
const cosechaColorMap: Record<string, number> = {
  'cosecha-20-21': 0,
  'cosecha-21-22': 1,
  'cosecha-22-23': 2,
  'cosecha-23-24': 3,
  'cosecha-24-25': 4,
  'cosecha-25-26': 5
}

// Función para obtener color fijo de cosecha según su ID (no su orden de selección)
function getCosechaColor(cosechaIdOrIndex: string | number): string {
  const colores = estilosGraficas.value.coloresCosechas

  // Si es un string, es un ID de cosecha
  if (typeof cosechaIdOrIndex === 'string') {
    const index = cosechaColorMap[cosechaIdOrIndex] ?? 0
    return colores[index % colores.length]
  }

  // Si es un número, buscar el ID de la cosecha en datosCosechas
  const cosecha = datosCosechas.value[cosechaIdOrIndex]
  if (cosecha?.id) {
    const index = cosechaColorMap[cosecha.id] ?? cosechaIdOrIndex
    return colores[index % colores.length]
  }

  // Fallback al índice directo
  return colores[cosechaIdOrIndex % colores.length]
}
</script>
