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

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
      <div
        class="p-4 rounded-lg border transition-all bg-[var(--brand-surface)]"
        :style="{
          borderColor: 'color-mix(in srgb, var(--coffee-verde) 40%, transparent)',
          color: 'color-mix(in srgb, var(--coffee-verde) 90%, white)'
        }"
      >
        <div class="flex flex-col">
          <span class="text-xs uppercase tracking-wide opacity-80 mb-1">Total Lb Neto de Verde</span>
          <div class="flex items-baseline gap-2">
            <span class="text-2xl font-bold">{{ formatNumber(data.total_lb_neto_verde) }}</span>
            <span class="text-sm font-bold opacity-70">lb</span>
          </div>
        </div>
      </div>
      <div
        class="p-4 rounded-lg border transition-all bg-[var(--brand-surface)]"
        :style="{
          borderColor: 'color-mix(in srgb, var(--coffee-verde) 35%, transparent)',
          color: 'var(--coffee-verde)'
        }"
      >
        <div class="flex flex-col">
          <span class="text-xs uppercase tracking-wide opacity-80 mb-1">Precio Promedio Ponderado Pagado</span>
          <div class="flex items-baseline gap-2">
            <span class="text-2xl font-bold">{{ formatNumber(data.precio_promedio_verde_pagado) }}</span>
            <span class="text-sm font-bold opacity-70">L./lb</span>
          </div>
        </div>
      </div>
      <div
        class="p-4 rounded-lg border transition-all bg-[var(--brand-surface)]"
        :style="{
          borderColor: 'color-mix(in srgb, var(--coffee-verde) 30%, transparent)',
          color: 'color-mix(in srgb, var(--coffee-verde) 110%, white)'
        }"
      >
        <div class="flex flex-col">
          <span class="text-xs uppercase tracking-wide opacity-80 mb-1">Total Lb Neto de Verde en Depósito</span>
          <div class="flex items-baseline gap-2">
            <span class="text-2xl font-bold">{{ formatNumber(data.total_lb_neto_verde_deposito) }}</span>
            <span class="text-sm font-bold opacity-70">lb</span>
          </div>
        </div>
      </div>
      <div
        class="p-4 rounded-lg border transition-all bg-[var(--brand-surface)]"
        :style="{
          borderColor: 'color-mix(in srgb, var(--coffee-verde) 35%, transparent)',
          color: 'color-mix(in srgb, var(--coffee-verde) 95%, white)'
        }"
      >
        <div class="flex flex-col">
          <span class="text-xs uppercase tracking-wide opacity-80 mb-1">Inversión en Verde Hasta la Fecha</span>
          <div class="flex items-baseline gap-2">
            <span class="text-2xl font-bold">{{ formatCurrency(data.inversion_verde_hasta_fecha) }}</span>
          </div>
        </div>
      </div>
      <div
        class="p-4 rounded-lg border transition-all bg-[var(--brand-surface)]"
        :style="{
          borderColor: 'color-mix(in srgb, var(--coffee-verde) 38%, transparent)',
          color: 'color-mix(in srgb, var(--coffee-verde) 105%, white)'
        }"
      >
        <div class="flex flex-col">
          <span class="text-xs uppercase tracking-wide opacity-80 mb-1">Inversión Restante a Realizar en Verde</span>
          <div class="flex items-baseline gap-2">
            <span class="text-2xl font-bold">{{ formatCurrency(data.inversion_restante_verde) }}</span>
          </div>
        </div>
      </div>
      <div
        class="p-4 rounded-lg border transition-all bg-[var(--brand-surface)]"
        :style="{
          borderColor: 'color-mix(in srgb, var(--coffee-verde) 32%, transparent)',
          color: 'color-mix(in srgb, var(--coffee-verde) 100%, #20d5ff)'
        }"
      >
        <div class="flex flex-col">
          <span class="text-xs uppercase tracking-wide opacity-80 mb-1">Total Lb Neto Comprado de Verde</span>
          <div class="flex items-baseline gap-2">
            <span class="text-2xl font-bold">{{ formatNumber(data.total_lb_neto_comprado_verde) }}</span>
            <span class="text-sm font-bold opacity-70">lb</span>
          </div>
        </div>
      </div>
    </div>
  </UCard>
</template>

<script setup lang="ts">
// Props reciben datos directos de Metabase - SIN composables
defineProps<{
  data: {
    total_lb_neto_verde: number
    precio_promedio_verde_pagado: number
    total_lb_neto_verde_deposito: number
    inversion_verde_hasta_fecha: number
    inversion_restante_verde: number
    total_lb_neto_comprado_verde: number
  }
}>()

const formatNumber = (value: number) => {
  return value.toLocaleString('en-US', {
    minimumFractionDigits: 2,
    maximumFractionDigits: 2
  })
}

const formatCurrency = (value: number) => {
  return new Intl.NumberFormat('es-HN', {
    style: 'currency',
    currency: 'HNL',
    minimumFractionDigits: 2,
    maximumFractionDigits: 2
  }).format(value).replace('HNL', 'L')
}
</script>