<template>
  <UCard class="brand-card border border-transparent">
    <template #header>
      <div class="flex items-center justify-between">
        <h2 class="text-xl font-bold brand-section-title">Rechazos y Subproductos</h2>
        <div class="rounded-lg border border-[var(--brand-border)] bg-[var(--brand-surface)] px-4 py-2">
          <div class="text-xs text-[var(--brand-text-muted)] uppercase tracking-wide mb-1">Total Rechazos</div>
          <div class="text-2xl font-bold text-[var(--brand-text)]">{{ formatCurrency(totalRechazos) }}</div>
        </div>
      </div>
    </template>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
      <RechazosRechazoCard
        v-for="rechazo in rechazosFormateados"
        :key="rechazo.tipo"
        :title="rechazo.title"
        :data="rechazo.data"
        :unidad="rechazo.unidad"
        :color="rechazo.color"
      />
    </div>
  </UCard>
</template>

<script setup lang="ts">
const props = defineProps<{
  data: Array<{
    tipo: string
    num_registros: number
    total_cantidad: number
    total_cobrado: number
    precio_promedio: number
  }>
}>()

// Calcular total de rechazos
const totalRechazos = computed(() => {
  return props.data.reduce((sum, r) => sum + (r.total_cobrado || 0), 0)
})

// Formatear rechazos para los cards
const rechazosFormateados = computed(() => {
  const config = {
    chibolita: { title: 'Chibolita', unidad: 'libras', color: 'blue' },
    perico: { title: 'Perico', unidad: 'libras', color: 'green' },
    vano: { title: 'Vano', unidad: 'galones', color: 'yellow' },
    picadillo: { title: 'Picadillo', unidad: 'galones', color: 'red' },
    magalla: { title: 'Magalla', unidad: 'galones', color: 'purple' },
    pinta: { title: 'Pinta', unidad: 'libras', color: 'pink' }
  }

  return Object.entries(config).map(([tipo, cfg]) => {
    const rechazo = props.data.find(r => r.tipo === tipo)
    return {
      tipo,
      title: cfg.title,
      unidad: cfg.unidad,
      color: cfg.color,
      data: rechazo || {
        tipo,
        num_registros: 0,
        total_cantidad: 0,
        total_cobrado: 0,
        precio_promedio: 0
      }
    }
  })
})

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>
