<template>
  <UCard class="brand-card border border-transparent">
    <template #header>
      <h2 class="text-xl font-bold brand-section-title">Secos Vendidos y Pérdidas</h2>
    </template>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
      <div class="p-4 rounded-lg border transition-all bg-[var(--brand-surface)] border-purple-900/40 text-purple-300">
        <div class="flex flex-col">
          <span class="text-xs uppercase tracking-wide opacity-80 mb-1">Total qq Secos por Vender</span>
          <div class="flex items-baseline gap-2">
            <span class="text-2xl font-bold">{{ formatNumber(data.total_qq_seco_por_vender) }}</span>
            <span class="text-sm font-bold opacity-70">qq</span>
          </div>
        </div>
      </div>
      <div class="p-4 rounded-lg border transition-all bg-[var(--brand-surface)] border-purple-800/40 text-purple-400">
        <div class="flex flex-col">
          <span class="text-xs uppercase tracking-wide opacity-80 mb-1">Precio de Venta Promedio por qq</span>
          <div class="flex items-baseline gap-2">
            <span class="text-2xl font-bold">{{ formatCurrency(data.precio_venta_promedio_por_qq) }}</span>
          </div>
        </div>
      </div>
      <div class="p-4 rounded-lg border transition-all bg-[var(--brand-surface)] border-purple-700/40 text-purple-500">
        <div class="flex flex-col">
          <span class="text-xs uppercase tracking-wide opacity-80 mb-1">Precio de Compra Promedio por qq</span>
          <div class="flex items-baseline gap-2">
            <span class="text-2xl font-bold">{{ formatCurrency(data.precio_compra_promedio_por_qq) }}</span>
          </div>
        </div>
      </div>
      <div class="p-4 rounded-lg border transition-all bg-[var(--brand-surface)] text-purple-600" :class="data.margen_ganancia_por_qq > 0 ? 'border-purple-600/40' : 'border-red-600/40'">
        <div class="flex flex-col">
          <span class="text-xs uppercase tracking-wide opacity-80 mb-1">Margen de Ganancia por qq</span>
          <div class="flex items-baseline gap-2">
            <span class="text-2xl font-bold">{{ formatCurrency(data.margen_ganancia_por_qq) }}</span>
          </div>
        </div>
      </div>
    </div>
  </UCard>
</template>

<script setup lang="ts">
// Props reciben datos directos de Metabase - SIN composables
defineProps<{
  data: {
    total_qq_seco_por_vender: number
    precio_venta_promedio_por_qq: number
    precio_compra_promedio_por_qq: number
    margen_ganancia_por_qq: 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>