<template>
  <UCard class="brand-card border border-transparent">
    <template #header>
      <div class="flex items-center justify-between">
        <div>
          <h2 class="text-xl font-bold brand-section-title">Rechazos y Subproductos</h2>
          <p class="text-sm text-[var(--brand-text-muted)] mt-1">Resumen de rechazos por tipo</p>
        </div>
        <div class="flex items-center gap-2">
          <UButton
            size="xs"
            color="gray"
            variant="soft"
            icon="i-lucide-copy"
            @click="copiarTexto"
            :disabled="!data || data.length === 0"
          >
            Copiar Texto
          </UButton>
          <UButton
            size="xs"
            color="gray"
            variant="soft"
            icon="i-lucide-braces"
            @click="copiarJSON"
            :disabled="!data || data.length === 0"
          >
            Copiar JSON
          </UButton>
        </div>
      </div>
    </template>

    <div v-if="data && data.length > 0" class="overflow-x-auto">
      <table class="w-full">
        <thead>
          <tr class="border-b border-[var(--brand-border)]">
            <th class="text-left py-3 px-4 text-xs text-[var(--brand-text-muted)] uppercase tracking-wide">Tipo</th>
            <th class="text-right py-3 px-4 text-xs text-[var(--brand-text-muted)] uppercase tracking-wide">Registros</th>
            <th class="text-right py-3 px-4 text-xs text-[var(--brand-text-muted)] uppercase tracking-wide">Cantidad Total</th>
            <th class="text-right py-3 px-4 text-xs text-[var(--brand-text-muted)] uppercase tracking-wide">Total Cobrado</th>
            <th class="text-right py-3 px-4 text-xs text-[var(--brand-text-muted)] uppercase tracking-wide">Precio Promedio</th>
          </tr>
        </thead>
        <tbody>
          <tr
            v-for="(rechazo, index) in data"
            :key="rechazo.tipo"
            class="border-b border-[var(--brand-border)] hover:bg-[#2a1f0f] transition-colors"
          >
            <td class="py-3 px-4 text-[var(--brand-text)] capitalize font-medium">
              {{ rechazo.tipo }}
            </td>
            <td class="py-3 px-4 text-right text-[var(--brand-text)]">
              {{ rechazo.num_registros }}
            </td>
            <td class="py-3 px-4 text-right text-[var(--brand-text)]">
              {{ formatNumber(rechazo.total_cantidad) }}
            </td>
            <td class="py-3 px-4 text-right text-green-400 font-semibold">
              {{ formatCurrency(rechazo.total_cobrado) }}
            </td>
            <td class="py-3 px-4 text-right text-[var(--brand-text-muted)]">
              {{ formatCurrency(rechazo.precio_promedio) }}
            </td>
          </tr>
        </tbody>
        <tfoot class="border-t-2 border-[var(--brand-border)] bg-[var(--brand-surface)]">
          <tr>
            <td class="py-3 px-4 text-[var(--brand-text)] font-bold uppercase text-sm">Total</td>
            <td class="py-3 px-4 text-right text-[var(--brand-text)] font-bold">
              {{ totalRegistros }}
            </td>
            <td class="py-3 px-4 text-right text-[var(--brand-text)] font-bold">
              {{ formatNumber(totalCantidad) }}
            </td>
            <td class="py-3 px-4 text-right text-green-400 font-bold">
              {{ formatCurrency(totalCobrado) }}
            </td>
            <td class="py-3 px-4 text-right text-[var(--brand-text-muted)]">
              {{ formatCurrency(promedioGeneral) }}
            </td>
          </tr>
        </tfoot>
      </table>
    </div>

    <div v-else class="text-center py-8 text-[var(--brand-text-muted)]">
      No hay rechazos registrados en este período
    </div>
  </UCard>
</template>

<script setup lang="ts">
interface Rechazo {
  tipo: string
  num_registros: number
  total_cantidad: number
  total_cobrado: number
  precio_promedio: number
}

const props = defineProps<{
  data: Rechazo[]
  conteos?: {
    ingresos_total?: number
    ingresos_filtrados?: number
    rechazos_total?: number
    rechazos_filtrados?: number
  }
  rangoLegible?: string
  lastUpdated?: string
}>()

const totalRegistros = computed(() => {
  if (!props.data || props.data.length === 0) return 0
  return props.data.reduce((sum, r) => sum + r.num_registros, 0)
})

const totalCantidad = computed(() => {
  if (!props.data || props.data.length === 0) return 0
  return props.data.reduce((sum, r) => sum + r.total_cantidad, 0)
})

const totalCobrado = computed(() => {
  if (!props.data || props.data.length === 0) return 0
  return props.data.reduce((sum, r) => sum + r.total_cobrado, 0)
})

const promedioGeneral = computed(() => {
  if (!props.data || props.data.length === 0 || totalCantidad.value === 0) return 0
  return totalCobrado.value / totalCantidad.value
})

const formatNumber = (value: number) => {
  if (!value) return '0.00'
  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')
}

async function copiarTexto() {
  if (!props.data || props.data.length === 0) return

  const footer = props.rangoLegible && props.lastUpdated ? `
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
📊 RESUMEN
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
📅 Rango: ${props.rangoLegible}
📦 Ingresos: ${props.conteos?.ingresos_filtrados || 0} de ${props.conteos?.ingresos_total || 0} registros
📦 Rechazos: ${props.conteos?.rechazos_filtrados || 0} de ${props.conteos?.rechazos_total || 0} registros
🕐 Generado: ${props.lastUpdated}` : ''

  const texto = `🗑️ RECHAZOS Y SUBPRODUCTOS

${props.data.map((rechazo) => `
📦 ${rechazo.tipo.toUpperCase()}:
   Registros: ${rechazo.num_registros}
   Cantidad Total: ${formatNumber(rechazo.total_cantidad)}
   Total Cobrado: ${formatCurrency(rechazo.total_cobrado)}
   Precio Promedio: ${formatCurrency(rechazo.precio_promedio)}
`).join('\n')}

📊 TOTAL:
   Registros: ${totalRegistros.value}
   Cantidad Total: ${formatNumber(totalCantidad.value)}
   Total Cobrado: ${formatCurrency(totalCobrado.value)}
   Precio Promedio General: ${formatCurrency(promedioGeneral.value)}${footer}`

  await navigator.clipboard.writeText(texto)
  alert('✅ Rechazos y Subproductos copiados al portapapeles')
}

async function copiarJSON() {
  if (!props.data || props.data.length === 0) return

  const json = JSON.stringify({
    rechazos: props.data,
    totales: {
      registros: totalRegistros.value,
      cantidad: totalCantidad.value,
      cobrado: totalCobrado.value,
      promedio_general: promedioGeneral.value
    }
  }, null, 2)
  await navigator.clipboard.writeText(json)
  alert('✅ JSON copiado al portapapeles')
}
</script>
