<!-- Gráfica de Uva Pagada vs Uva en Depósito -->
<template>
  <UCard class="brand-card border border-transparent">
    <template #header>
      <div class="flex items-center justify-between">
        <div>
          <h3 class="text-lg font-bold brand-section-title">Dinámica: Pagado vs Depósito</h3>
          <p class="text-xs text-[var(--brand-text-muted)] mt-1">
            Evolución de café pagado y en depósito
          </p>
        </div>
        <div class="flex items-center gap-2 flex-wrap">
          <UCheckbox
            v-for="tipo in tipos"
            :key="tipo.value"
            :model-value="tiposSeleccionados.includes(tipo.value)"
            @update:model-value="(checked) => toggleTipo(tipo.value, checked)"
            :label="getTipoLabel(tipo)"
            :disabled="isTipoDisabled(tipo.value)"
            size="xs"
          />
        </div>
      </div>
    </template>

    <div class="relative w-full" style="height: 400px;">
      <svg :viewBox="`0 0 ${width} ${height}`" class="w-full h-full" preserveAspectRatio="none">
        <!-- Grid lines -->
        <g v-for="i in 5" :key="`grid-${i}`">
          <line
            :x1="padding"
            :y1="padding + (i - 1) * (chartHeight / 4)"
            :x2="width - padding"
            :y2="padding + (i - 1) * (chartHeight / 4)"
            stroke="currentColor"
            :stroke-opacity="0.1"
            stroke-width="1"
          />
          <text
            :x="padding - 10"
            :y="padding + (i - 1) * (chartHeight / 4) + 5"
            text-anchor="end"
            class="text-xs fill-[var(--brand-text-muted)]"
          >
            {{ formatValue(maxValue - (i - 1) * (maxValue / 4)) }}
          </text>
        </g>

        <!-- Gráficas por cada tipo -->
        <g v-for="tipo in tiposActivos" :key="`tipo-${tipo.value}`">
          <!-- Area Pagado -->
          <path
            :d="getAreaPagadoPathForTipo(tipo.value)"
            :fill="getTipoColor(tipo.value)"
            fill-opacity="0.2"
          />

          <!-- Area Deposito -->
          <path
            :d="getAreaDepositoPathForTipo(tipo.value)"
            :fill="getTipoColor(tipo.value)"
            fill-opacity="0.1"
            stroke-dasharray="5,5"
          />

          <!-- Line Pagado -->
          <path
            :d="getLinePagadoPathForTipo(tipo.value)"
            :stroke="getTipoColor(tipo.value)"
            stroke-width="3"
            fill="none"
            stroke-linecap="round"
            stroke-linejoin="round"
          />

          <!-- Line Deposito -->
          <path
            :d="getLineDepositoPathForTipo(tipo.value)"
            :stroke="getTipoColor(tipo.value)"
            stroke-width="3"
            fill="none"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-dasharray="8,4"
          />

          <!-- Points Pagado -->
          <circle
            v-for="(point, i) in getPointsPagadoForTipo(tipo.value)"
            :key="`pagado-${tipo.value}-${i}`"
            :cx="point.x"
            :cy="point.y"
            r="4"
            :fill="getTipoColor(tipo.value)"
            class="cursor-pointer hover:r-6 transition-all"
          >
            <title>{{ tipo.label }} Pagado - {{ point.label }}: {{ point.value.toFixed(2) }} {{ getTipoUnidad(tipo) }}</title>
          </circle>

          <!-- Points Deposito -->
          <circle
            v-for="(point, i) in getPointsDepositoForTipo(tipo.value)"
            :key="`deposito-${tipo.value}-${i}`"
            :cx="point.x"
            :cy="point.y"
            r="4"
            :fill="getTipoColor(tipo.value)"
            fill-opacity="0.6"
            class="cursor-pointer hover:r-6 transition-all"
          >
            <title>{{ tipo.label }} Depósito - {{ point.label }}: {{ point.value.toFixed(2) }} {{ getTipoUnidad(tipo) }}</title>
          </circle>
        </g>

        <!-- X-axis labels -->
        <g v-if="tiposActivos.length > 0" v-for="(point, i) in getPointsPagadoForTipo(tiposActivos[0].value)" :key="`label-${i}`">
          <text
            v-if="i % Math.ceil(getPointsPagadoForTipo(tiposActivos[0].value).length / 6) === 0 || i === getPointsPagadoForTipo(tiposActivos[0].value).length - 1"
            :x="point.x"
            :y="height - padding + 20"
            text-anchor="middle"
            class="text-xs fill-[var(--brand-text-muted)]"
          >
            {{ point.dateLabel }}
          </text>
        </g>
      </svg>
    </div>

    <template #footer>
      <div class="flex items-center justify-between text-xs flex-wrap gap-2">
        <div class="flex items-center gap-4 flex-wrap">
          <div v-for="tipo in tiposActivos" :key="`totales-${tipo.value}`" class="flex items-center gap-3">
            <div class="flex items-center gap-1.5">
              <div class="w-3 h-3 rounded-full" :style="{ backgroundColor: getTipoColor(tipo.value) }"></div>
              <span class="text-[var(--brand-text-muted)] text-xs">{{ tipo.label }}:</span>
            </div>
            <div class="flex items-center gap-2">
              <span class="font-bold" :style="{ color: getTipoColor(tipo.value) }">
                {{ formatValue(getTotalPagadoForTipo(tipo.value)) }} {{ getTipoUnidad(tipo) }}
              </span>
              <span class="text-[var(--brand-text-muted)]">pagado</span>
            </div>
            <div class="flex items-center gap-2">
              <span class="font-bold opacity-60" :style="{ color: getTipoColor(tipo.value) }">
                {{ formatValue(getTotalDepositoForTipo(tipo.value)) }} {{ getTipoUnidad(tipo) }}
              </span>
              <span class="text-[var(--brand-text-muted)]">depósito</span>
            </div>
          </div>
        </div>
      </div>
    </template>
  </UCard>
</template>

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

interface Props {
  ingresos: IngresoRecord[]
}

const props = defineProps<Props>()

const tipos = [
  { value: 'uva', label: 'Uva', unidad: 'lb' },
  { value: 'oreado', label: 'Oreado', unidad: 'qq' },
  { value: 'mojado', label: 'Mojado', unidad: 'qq' },
  { value: 'verde', label: 'Verde', unidad: 'lb' }
]

const tiposSeleccionados = ref(['uva'])

const tiposActivos = computed(() => tipos.filter(t => tiposSeleccionados.value.includes(t.value)))

// Determinar si estamos en modo seco (oreado o mojado seleccionado)
const modoSeco = computed(() => {
  return tiposSeleccionados.value.includes('oreado') || tiposSeleccionados.value.includes('mojado')
})

// Determinar si un tipo está deshabilitado
function isTipoDisabled(tipo: string): boolean {
  if (tipo === 'verde') {
    return modoSeco.value
  }
  if (tipo === 'oreado' || tipo === 'mojado') {
    return tiposSeleccionados.value.includes('verde')
  }
  return false
}

// Obtener label dinámico con unidad correcta
function getTipoLabel(tipo: { value: string, label: string, unidad: string }): string {
  if (tipo.value === 'uva') {
    return modoSeco.value ? `${tipo.label} (qq)` : `${tipo.label} (lb)`
  }
  return `${tipo.label} (${tipo.unidad})`
}

// Obtener unidad dinámica según el modo
function getTipoUnidad(tipo: { value: string, label: string, unidad: string }): string {
  if (tipo.value === 'uva') {
    return modoSeco.value ? 'qq' : 'lb'
  }
  return tipo.unidad
}

function toggleTipo(value: string, checked: boolean) {
  if (checked) {
    if (!tiposSeleccionados.value.includes(value)) {
      tiposSeleccionados.value.push(value)
    }
    // Si se activa verde, desactivar oreado y mojado
    if (value === 'verde') {
      tiposSeleccionados.value = tiposSeleccionados.value.filter(v => v !== 'oreado' && v !== 'mojado')
    }
    // Si se activa oreado o mojado, desactivar verde
    if (value === 'oreado' || value === 'mojado') {
      tiposSeleccionados.value = tiposSeleccionados.value.filter(v => v !== 'verde')
    }
  } else {
    tiposSeleccionados.value = tiposSeleccionados.value.filter(v => v !== value)
  }
}

const width = 1200
const height = 400
const padding = 60

const chartWidth = width - 2 * padding
const chartHeight = height - 2 * padding

interface DataPoint {
  date: Date
  value: number
  x: number
  y: number
  label: string
  dateLabel: string
}

// Datos pagado por tipo
const dataPagadoByTipo = computed(() => {
  const result: Record<string, DataPoint[]> = {}

  tiposSeleccionados.value.forEach(tipo => {
    const ingresosFiltrados = props.ingresos
      .filter(i => i.tipo === tipo)
      .filter(i => i.estado === 'pagado')
      .filter(i => i.created_at)
      .sort((a, b) => new Date(a.created_at!).getTime() - new Date(b.created_at!).getTime())

    if (ingresosFiltrados.length === 0) {
      result[tipo] = []
      return
    }

    const porDia = new Map<string, number>()

    ingresosFiltrados.forEach(ingreso => {
      const fecha = new Date(ingreso.created_at!).toLocaleDateString('es-HN')
      let valor = 0

      if (tipo === 'uva') {
        // Si estamos en modo seco, convertir uva a qq (dividir entre 500)
        valor = modoSeco.value ? ingreso.peso_neto / 500 : ingreso.peso_neto
      } else if (tipo === 'verde') {
        valor = ingreso.peso_neto
      } else {
        valor = ingreso.peso_seco
      }

      porDia.set(fecha, (porDia.get(fecha) || 0) + valor)
    })

    let acumulado = 0
    const puntos: DataPoint[] = []

    Array.from(porDia.entries()).forEach(([fecha, valor]) => {
      acumulado += valor
      puntos.push({
        date: new Date(fecha),
        value: acumulado,
        x: 0,
        y: 0,
        label: fecha,
        dateLabel: new Date(fecha).toLocaleDateString('es-HN', { day: 'numeric', month: 'short' })
      })
    })

    result[tipo] = puntos
  })

  return result
})

// Datos depósito por tipo
const dataDepositoByTipo = computed(() => {
  const result: Record<string, DataPoint[]> = {}

  tiposSeleccionados.value.forEach(tipo => {
    const todosFiltrados = props.ingresos
      .filter(i => i.tipo === tipo)
      .filter(i => i.created_at)
      .sort((a, b) => new Date(a.created_at!).getTime() - new Date(b.created_at!).getTime())

    const pagadosFiltrados = props.ingresos
      .filter(i => i.tipo === tipo)
      .filter(i => i.estado === 'pagado')
      .filter(i => i.created_at)

    if (todosFiltrados.length === 0) {
      result[tipo] = []
      return
    }

    const totalPorDia = new Map<string, number>()
    const pagadoPorDia = new Map<string, number>()

    todosFiltrados.forEach(ingreso => {
      const fecha = new Date(ingreso.created_at!).toLocaleDateString('es-HN')
      let valor = 0

      if (tipo === 'uva') {
        valor = modoSeco.value ? ingreso.peso_neto / 500 : ingreso.peso_neto
      } else if (tipo === 'verde') {
        valor = ingreso.peso_neto
      } else {
        valor = ingreso.peso_seco
      }

      totalPorDia.set(fecha, (totalPorDia.get(fecha) || 0) + valor)
    })

    pagadosFiltrados.forEach(ingreso => {
      const fecha = new Date(ingreso.created_at!).toLocaleDateString('es-HN')
      let valor = 0

      if (tipo === 'uva') {
        valor = modoSeco.value ? ingreso.peso_neto / 500 : ingreso.peso_neto
      } else if (tipo === 'verde') {
        valor = ingreso.peso_neto
      } else {
        valor = ingreso.peso_seco
      }

      pagadoPorDia.set(fecha, (pagadoPorDia.get(fecha) || 0) + valor)
    })

    let acumuladoTotal = 0
    let acumuladoPagado = 0
    const puntos: DataPoint[] = []

    const fechasUnicas = new Set([...totalPorDia.keys(), ...pagadoPorDia.keys()])
    const fechasOrdenadas = Array.from(fechasUnicas).sort((a, b) => new Date(a).getTime() - new Date(b).getTime())

    fechasOrdenadas.forEach(fecha => {
      acumuladoTotal += totalPorDia.get(fecha) || 0
      acumuladoPagado += pagadoPorDia.get(fecha) || 0
      const deposito = acumuladoTotal - acumuladoPagado

      puntos.push({
        date: new Date(fecha),
        value: deposito,
        x: 0,
        y: 0,
        label: fecha,
        dateLabel: new Date(fecha).toLocaleDateString('es-HN', { day: 'numeric', month: 'short' })
      })
    })

    result[tipo] = puntos
  })

  return result
})

const maxValue = computed(() => {
  let max = 0

  Object.values(dataPagadoByTipo.value).forEach(puntos => {
    if (puntos.length > 0) {
      const maxPagado = Math.max(...puntos.map(p => p.value))
      if (maxPagado > max) max = maxPagado
    }
  })

  Object.values(dataDepositoByTipo.value).forEach(puntos => {
    if (puntos.length > 0) {
      const maxDeposito = Math.max(...puntos.map(p => p.value))
      if (maxDeposito > max) max = maxDeposito
    }
  })

  return max * 1.1 || 100
})

function getTipoColor(tipo: string) {
  const tipoConfig = tipos.find(t => t.value === tipo)
  return tipoConfig?.value === 'uva' ? '#a855f7' :
         tipoConfig?.value === 'oreado' ? '#f97316' :
         tipoConfig?.value === 'mojado' ? '#06b6d4' : '#22c55e'
}

function getPointsPagadoForTipo(tipo: string) {
  const data = dataPagadoByTipo.value[tipo]
  if (!data || data.length === 0) return []

  return data.map((point, i) => {
    const x = padding + (i / (data.length - 1 || 1)) * chartWidth
    const y = height - padding - (point.value / maxValue.value) * chartHeight

    return { ...point, x, y }
  })
}

function getPointsDepositoForTipo(tipo: string) {
  const data = dataDepositoByTipo.value[tipo]
  if (!data || data.length === 0) return []

  return data.map((point, i) => {
    const x = padding + (i / (data.length - 1 || 1)) * chartWidth
    const y = height - padding - (point.value / maxValue.value) * chartHeight

    return { ...point, x, y }
  })
}

function getLinePagadoPathForTipo(tipo: string) {
  const points = getPointsPagadoForTipo(tipo)
  if (points.length === 0) return ''

  return points.map((point, i) => {
    return i === 0 ? `M ${point.x} ${point.y}` : `L ${point.x} ${point.y}`
  }).join(' ')
}

function getLineDepositoPathForTipo(tipo: string) {
  const points = getPointsDepositoForTipo(tipo)
  if (points.length === 0) return ''

  return points.map((point, i) => {
    return i === 0 ? `M ${point.x} ${point.y}` : `L ${point.x} ${point.y}`
  }).join(' ')
}

function getAreaPagadoPathForTipo(tipo: string) {
  const points = getPointsPagadoForTipo(tipo)
  if (points.length === 0) return ''

  const linePart = points.map((point, i) => {
    return i === 0 ? `M ${point.x} ${point.y}` : `L ${point.x} ${point.y}`
  }).join(' ')

  const lastPoint = points[points.length - 1]
  const firstPoint = points[0]

  return `${linePart} L ${lastPoint.x} ${height - padding} L ${firstPoint.x} ${height - padding} Z`
}

function getAreaDepositoPathForTipo(tipo: string) {
  const points = getPointsDepositoForTipo(tipo)
  if (points.length === 0) return ''

  const linePart = points.map((point, i) => {
    return i === 0 ? `M ${point.x} ${point.y}` : `L ${point.x} ${point.y}`
  }).join(' ')

  const lastPoint = points[points.length - 1]
  const firstPoint = points[0]

  return `${linePart} L ${lastPoint.x} ${height - padding} L ${firstPoint.x} ${height - padding} Z`
}

function getTotalPagadoForTipo(tipo: string) {
  const data = dataPagadoByTipo.value[tipo]
  if (!data || data.length === 0) return 0
  return data[data.length - 1]?.value || 0
}

function getTotalDepositoForTipo(tipo: string) {
  const data = dataDepositoByTipo.value[tipo]
  if (!data || data.length === 0) return 0
  return data[data.length - 1]?.value || 0
}

function formatValue(value: number): string {
  if (value >= 1000) {
    return (value / 1000).toFixed(1) + 'k'
  }
  return value.toFixed(0)
}
</script>
