<template>
  <UCard class="brand-card border border-transparent">
    <template #header>
      <h2 class="text-xl font-bold brand-section-title">Totales de Ingreso y Compra</h2>
    </template>

    <div class="space-y-6">
      <!-- Uva -->
      <div>
        <h3 class="text-lg font-semibold text-[var(--brand-primary)] mb-3">Uva</h3>
        <div class="grid grid-cols-1 md:grid-cols-4 gap-3">
          <MetricBox label="LB Uva Ingresada" :value="formatNumber(data.total_lb_uva_ingresada) + ' lb'" />
          <MetricBox label="QQ Seco Ingresado" :value="formatNumber(data.total_qq_seco_uva_ingresado) + ' QQ'" />
          <MetricBox label="LB Uva Pagada" :value="formatNumber(data.total_lb_uva_pagada) + ' lb'" color="green" />
          <MetricBox label="LB Uva en Depósito" :value="formatNumber(data.total_lb_uva_deposito) + ' lb'" color="yellow" />
        </div>
      </div>

      <!-- Mojado -->
      <div>
        <h3 class="text-lg font-semibold text-[var(--brand-primary)] mb-3">Mojado</h3>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-3">
          <MetricBox label="QQ Seco Ingresado" :value="formatNumber(data.total_qq_seco_mojado_ingresado) + ' QQ'" />
          <MetricBox label="QQ Seco Pagado" :value="formatNumber(data.total_qq_seco_mojado_pagado) + ' QQ'" color="green" />
          <MetricBox label="QQ en Depósito" :value="formatNumber(data.total_qq_mojado_deposito) + ' QQ'" color="yellow" />
        </div>
      </div>

      <!-- Oreado -->
      <div>
        <h3 class="text-lg font-semibold text-[var(--brand-primary)] mb-3">Oreado</h3>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-3">
          <MetricBox label="QQ Seco Ingresado" :value="formatNumber(data.total_qq_seco_oreado_ingresado) + ' QQ'" />
          <MetricBox label="QQ Seco Pagado" :value="formatNumber(data.total_qq_seco_oreado_pagado) + ' QQ'" color="green" />
          <MetricBox label="QQ en Depósito" :value="formatNumber(data.total_qq_oreado_deposito) + ' QQ'" color="yellow" />
        </div>
      </div>

      <!-- Totales Generales -->
      <div class="pt-4 border-t border-[#3a2a16]">
        <h3 class="text-lg font-semibold text-[var(--brand-primary)] mb-3">Totales Generales</h3>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-3">
          <MetricBox label="QQ Seco Ingresado" :value="formatNumber(data.total_qq_seco_ingresado) + ' QQ'" />
          <MetricBox label="QQ Seco Comprado" :value="formatNumber(data.total_qq_seco_comprado) + ' QQ'" color="green" />
          <MetricBox label="QQ Seco en Depósito" :value="formatNumber(data.total_qq_seco_deposito) + ' QQ'" color="yellow" />
        </div>
      </div>
    </div>
  </UCard>
</template>

<script setup lang="ts">
const props = defineProps<{
  data: {
    total_lb_uva_ingresada: number
    total_qq_seco_uva_ingresado: number
    total_qq_seco_mojado_ingresado: number
    total_qq_seco_oreado_ingresado: number
    total_qq_seco_ingresado: number
    total_lb_uva_pagada: number
    total_qq_seco_uva_pagado: number
    total_qq_seco_mojado_pagado: number
    total_qq_seco_oreado_pagado: number
    total_qq_seco_comprado: number
    total_lb_uva_deposito: number
    total_qq_mojado_deposito: number
    total_qq_oreado_deposito: number
    total_qq_seco_deposito: number
  }
}>()

const formatNumber = (value: number) => {
  return new Intl.NumberFormat('es-HN', {
    minimumFractionDigits: 2,
    maximumFractionDigits: 2
  }).format(value)
}
</script>
