<template>
  <UCard class="brand-card border border-transparent">
    <template #header>
      <h2 class="text-xl font-bold brand-section-title">Café Seco - Inventario y Proyecciones</h2>
    </template>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
      <div class="rounded-lg border border-[#3a2a16] bg-[#1c140c] px-4 py-3">
        <div class="text-xs text-[var(--brand-text-muted)] uppercase tracking-wide mb-1">QQ Seco por Vender</div>
        <div class="text-2xl font-bold text-[var(--brand-text)]">
          {{ formatNumber(data.total_qq_seco_por_vender) }} QQ
        </div>
      </div>

      <div class="rounded-lg border border-[#3a2a16] bg-[#1c140c] px-4 py-3">
        <div class="text-xs text-[var(--brand-text-muted)] uppercase tracking-wide mb-1">Precio Venta Promedio/QQ</div>
        <div class="text-2xl font-bold text-green-400">
          {{ formatCurrency(data.precio_venta_promedio_por_qq) }}
        </div>
        <div v-if="data.precio_venta_promedio_por_qq === 0" class="text-xs text-[var(--brand-text-muted)] mt-1">
          Sin ventas registradas
        </div>
      </div>

      <div class="rounded-lg border border-[#3a2a16] bg-[#1c140c] px-4 py-3">
        <div class="text-xs text-[var(--brand-text-muted)] uppercase tracking-wide mb-1">Precio Compra Promedio/QQ</div>
        <div class="text-2xl font-bold text-[var(--brand-text)]">
          {{ formatCurrency(data.precio_compra_promedio_por_qq) }}
        </div>
      </div>

      <div class="rounded-lg border border-[#3a2a16] bg-[#1c140c] px-4 py-3">
        <div class="text-xs text-[var(--brand-text-muted)] uppercase tracking-wide mb-1">Margen de Ganancia/QQ</div>
        <div class="text-2xl font-bold" :class="margenColor">
          {{ formatCurrency(data.margen_ganancia_por_qq) }}
        </div>
      </div>
    </div>
  </UCard>
</template>

<script setup lang="ts">
const props = 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 margenColor = computed(() => {
  if (props.data.margen_ganancia_por_qq > 0) return 'text-green-400'
  if (props.data.margen_ganancia_por_qq < 0) return 'text-red-400'
  return 'text-[var(--brand-text)]'
})

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

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