<template>
  <UCard class="brand-card border border-transparent">
    <template #header>
      <div class="flex items-center justify-between">
        <div>
          <h2 class="text-xl font-bold text-yellow-500">Vista Tabla de Clientes</h2>
          <p class="text-sm text-[var(--brand-text-muted)] mt-1">
            {{ props.records.length }} clientes registrados
          </p>
        </div>
        <div class="flex items-center gap-2">
          <UButton
            :label="dateFormat === 'short' ? 'Fecha Larga' : 'Fecha Corta'"
            color="neutral"
            variant="outline"
            icon="i-lucide-calendar"
            @click="toggleDateFormat"
          />
          <UCheckbox
            v-if="props.ingresos && props.ingresos.length > 0"
            v-model="includeClientesWithoutIngresos"
            label="Incluir sin ingresos"
            size="sm"
          />
        </div>
      </div>
    </template>

    <!-- Table Controls -->
    <div class="flex items-center gap-2 px-4 py-3.5 overflow-x-auto border-b border-[var(--brand-border)]">
      <UInput
        v-model="globalFilter"
        class="max-w-sm min-w-[12ch]"
        placeholder="Buscar en todos los campos..."
        icon="i-lucide-search"
      />

      <UDropdownMenu
        v-if="table?.tableApi"
        :items="columnVisibilityItems"
        :content="{ align: 'end' }"
      >
        <UButton
          label="Columnas"
          color="neutral"
          variant="outline"
          trailing-icon="i-lucide-chevron-down"
          class="ml-auto"
          aria-label="Selector de columnas visibles"
        />
      </UDropdownMenu>
    </div>

    <!-- Table Component -->
    <UTable
      ref="table"
      v-model:expanded="expanded"
      :data="limitedRecords"
      :columns="tableColumns"
      :global-filter="globalFilter"
      :get-sub-rows="(row: any) => row.children"
      sticky
      class="h-96"
      :ui="{
        thead: 'bg-yellow-500/20 [&>tr>th]:text-white [&>tr>th]:font-semibold',
        base: 'border-separate border-spacing-0',
        tbody: '[&>tr]:last:[&>td]:border-b-0',
        tr: 'group',
        td: 'empty:p-0 group-has-[td:not(:empty)]:border-b border-default'
      }"
    />

    <!-- Table Footer -->
    <template #footer>
      <div class="flex flex-col gap-3">
        <div class="flex items-center justify-between">
          <span class="text-sm text-[var(--brand-text-muted)]">
            Mostrando {{ startRecord }} - {{ endRecord }} de {{ totalRecords }} registros
          </span>

          <div class="flex items-center gap-2">
            <UButton
              icon="i-lucide-chevron-left"
              color="neutral"
              variant="outline"
              size="sm"
              :disabled="currentPage === 1"
              @click="previousPage"
            />
            <span class="text-sm text-[var(--brand-text-muted)] px-2">
              Página {{ currentPage }} de {{ totalPages }}
            </span>
            <UButton
              icon="i-lucide-chevron-right"
              color="neutral"
              variant="outline"
              size="sm"
              :disabled="currentPage === totalPages"
              @click="nextPage"
            />
          </div>
        </div>
      </div>
    </template>
  </UCard>
</template>

<script setup lang="ts">
import { h, ref, computed, resolveComponent } from 'vue'
import { upperFirst } from 'scule'
import type { TableColumn } from '@nuxt/ui'
import type { IngresoRecord } from '~/composables/useIngresosMetrics'

interface ClienteRecord extends Record<string, unknown> {
  id: number
  created_at: string
  updated_at: string
  name: string
  cedula?: number
  ubicacion?: string
  grupo_estudio?: string
  empleado?: boolean
  avatar_url?: string
  telefono?: string
  idciat?: number
}

interface ClienteWithChildren extends ClienteRecord {
  children?: IngresoRecord[]
  peso_seco?: number
  peso_neto?: number
  precio?: number
  estado?: string
}

interface Props {
  records: ClienteRecord[]
  ingresos?: IngresoRecord[]
}

const props = defineProps<Props>()

const UButton = resolveComponent('UButton')
const UBadge = resolveComponent('UBadge')
const UIcon = resolveComponent('UIcon')
const UAvatar = resolveComponent('UAvatar')

const globalFilter = ref('')
const table = useTemplateRef<{ tableApi?: any }>('table')
const currentPage = ref(1)
const recordsPerPage = 100
const dateFormat = ref<'short' | 'long'>('short')
const expanded = ref<Record<string, boolean>>({})
const includeClientesWithoutIngresos = ref(false)

function toggleDateFormat() {
  dateFormat.value = dateFormat.value === 'short' ? 'long' : 'short'
}

// Map clientes to include ingresos as children and aggregate data
const recordsWithChildren = computed((): ClienteWithChildren[] => {
  if (!props.ingresos || props.ingresos.length === 0) {
    return props.records as ClienteWithChildren[]
  }

  const clientesData = props.records.map(cliente => {
    const clienteIngresos = props.ingresos?.filter(i => i.cliente_id === cliente.id) || []

    // Agregar campos agregados al cliente
    const peso_seco = clienteIngresos.reduce((sum, i) => sum + (i.peso_seco || 0), 0)
    const peso_neto = clienteIngresos.reduce((sum, i) => sum + (i.peso_neto || 0), 0)

    // Precio promedio ponderado (por peso_neto)
    const totalPrecioXPeso = clienteIngresos.reduce((sum, i) => sum + (i.precio * i.peso_neto), 0)
    const precio = peso_neto > 0 ? totalPrecioXPeso / peso_neto : 0

    // Estados únicos
    const estados = [...new Set(clienteIngresos.map(i => i.estado))]

    return {
      ...cliente,
      peso_seco,
      peso_neto,
      precio,
      estado: estados.length > 0 ? estados.join(', ') : '',
      children: clienteIngresos
    }
  })

  // Filter out clientes without ingresos if toggle is OFF
  if (!includeClientesWithoutIngresos.value) {
    return clientesData.filter(cliente => cliente.children && cliente.children.length > 0)
  }

  return clientesData
})

// Paginación
const totalRecords = computed(() => recordsWithChildren.value.length)
const totalPages = computed(() => Math.ceil(totalRecords.value / recordsPerPage))

const startRecord = computed(() => {
  if (totalRecords.value === 0) return 0
  return (currentPage.value - 1) * recordsPerPage + 1
})

const endRecord = computed(() => {
  const end = currentPage.value * recordsPerPage
  return Math.min(end, totalRecords.value)
})

const limitedRecords = computed(() => {
  const start = (currentPage.value - 1) * recordsPerPage
  const end = start + recordsPerPage
  return recordsWithChildren.value.slice(start, end)
})

function nextPage() {
  if (currentPage.value < totalPages.value) {
    currentPage.value++
  }
}

function previousPage() {
  if (currentPage.value > 1) {
    currentPage.value--
  }
}

// Columnas seleccionadas
const selectedColumns = [
  'id',
  'name',
  'cedula',
  'telefono',
  'ubicacion',
  'grupo_estudio',
  'empleado',
  'idciat',
  'peso_seco',
  'peso_neto',
  'precio',
  'estado',
  'created_at',
  'updated_at'
]

const tableColumns = computed((): TableColumn<Record<string, unknown>>[] => {
  if (!limitedRecords.value.length) return []

  const firstRow = limitedRecords.value[0]
  if (!firstRow) return []

  const availableColumns = selectedColumns.filter(col => {
    // Siempre incluir columnas de cliente base
    const baseColumns = ['id', 'name', 'cedula', 'telefono', 'ubicacion', 'grupo_estudio', 'empleado', 'idciat', 'created_at', 'updated_at']
    if (baseColumns.includes(col)) return true

    // Incluir columnas agregadas si hay ingresos
    if (props.ingresos && props.ingresos.length > 0 && ['peso_seco', 'peso_neto', 'precio', 'estado'].includes(col)) {
      return true
    }

    return col in firstRow
  })

  return availableColumns.map((column: string) => {
    // Columna ID especial con botón de expansión
    if (column === 'id') {
      return {
        accessorKey: column,
        header: ({ column: tableColumn }) => {
          const isSorted = tableColumn.getIsSorted()
          return h(UButton, {
            color: 'neutral',
            variant: 'ghost',
            label: '#',
            icon: isSorted ? (isSorted === 'asc' ? 'i-lucide-arrow-up-narrow-wide' : 'i-lucide-arrow-down-wide-narrow') : 'i-lucide-arrow-up-down',
            class: '-mx-2.5 text-white hover:text-yellow-100',
            onClick: () => tableColumn.toggleSorting(tableColumn.getIsSorted() === 'asc')
          })
        },
        cell: ({ row }) => {
          const original = row.original as any
          const isIngreso = 'tipo' in original
          const isCliente = 'name' in original && !('tipo' in original)
          const isParent = row.depth === 0

          return h(
            'div',
            {
              style: {
                paddingLeft: `${row.depth * 2}rem`
              },
              class: 'flex items-center gap-2'
            },
            [
              // Botón de expansión solo en parent rows
              isParent && props.ingresos && props.ingresos.length > 0 && h(UButton, {
                color: 'neutral',
                variant: 'outline',
                size: 'xs',
                icon: row.getIsExpanded() ? 'i-lucide-minus' : 'i-lucide-plus',
                class: !row.getCanExpand() && 'invisible',
                ui: {
                  base: 'p-0 rounded-sm',
                  leadingIcon: 'size-4'
                },
                onClick: row.getToggleExpandedHandler()
              }),
              // Badge de ID
              isCliente && h(UBadge, {
                label: `C-${row.getValue('id')}`,
                color: 'primary',
                variant: 'subtle',
                size: 'md',
                class: 'rounded-full'
              }),
              isIngreso && h(UBadge, {
                label: `I-${row.getValue('id')}`,
                color: 'info',
                variant: 'subtle',
                size: 'md',
                class: 'rounded-full'
              })
            ]
          )
        }
      }
    }

    // Otras columnas normales
    return {
      accessorKey: column,
      header: ({ column: tableColumn }) => {
        const isSorted = tableColumn.getIsSorted()

        return h(UButton, {
          color: 'neutral',
          variant: 'ghost',
          label: upperFirst(column),
          icon: isSorted ? (isSorted === 'asc' ? 'i-lucide-arrow-up-narrow-wide' : 'i-lucide-arrow-down-wide-narrow') : 'i-lucide-arrow-up-down',
          class: '-mx-2.5 text-white hover:text-yellow-100',
          onClick: () => tableColumn.toggleSorting(tableColumn.getIsSorted() === 'asc')
        })
      },
      cell: ({ row }) => formatCellValue(row.getValue(column), column, row.original as any, row.depth)
    }
  })
})

const columnVisibilityItems = computed((): any[] => {
  if (!table.value?.tableApi) return []

  return table.value.tableApi
    .getAllColumns()
    .filter((column: any) => column.getCanHide())
    .map((column: any) => ({
      label: upperFirst(column.id),
      type: 'checkbox' as const,
      checked: column.getIsVisible(),
      onUpdateChecked(checked: boolean) {
        table.value?.tableApi?.getColumn(column.id)?.toggleVisibility(!!checked)
      },
      onSelect(e?: Event) {
        e?.preventDefault()
      }
    }))
})

function formatCellValue(value: unknown, column: string, row: any, depth: number): any {
  // Detectar si es ingreso (child row)
  const isIngreso = 'tipo' in row
  const isCliente = 'name' in row && !('tipo' in row)

  // Si es una fila de ingreso expandida, mostrar info del ingreso
  if (isIngreso && depth > 0) {
    if (column === 'name') {
      return h('div', { class: 'flex items-center gap-2' }, [
        h('span', {
          class: row.tipo === 'uva' ? 'text-purple-400' :
                row.tipo === 'oreado' ? 'text-orange-400' :
                row.tipo === 'mojado' ? 'text-blue-400' : 'text-green-400'
        }, row.tipo?.toUpperCase())
      ])
    }
    if (column === 'peso_seco' && typeof row.peso_seco === 'number') {
      return h('div', { class: 'text-right font-medium text-cyan-400' }, row.peso_seco.toFixed(2))
    }
    if (column === 'peso_neto' && typeof row.peso_neto === 'number') {
      return h('div', { class: 'text-right font-medium text-cyan-400' }, row.peso_neto.toFixed(2))
    }
    if (column === 'precio' && typeof row.precio === 'number') {
      const formatted = new Intl.NumberFormat('es-HN', {
        style: 'currency',
        currency: 'HNL',
        minimumFractionDigits: 2,
        maximumFractionDigits: 2
      }).format(row.precio).replace('HNL', 'L')
      return h('div', { class: 'text-right font-medium text-cyan-400' }, formatted)
    }
    if (column === 'estado' && typeof row.estado === 'string') {
      return h('span', {
        class: row.estado === 'pagado'
          ? 'inline-flex items-center gap-1 px-2 py-0.5 rounded bg-green-500/20 text-green-300 border border-green-400/30 text-xs'
          : 'inline-flex items-center gap-1 px-2 py-0.5 rounded bg-yellow-500/20 text-yellow-300 border border-yellow-400/30 text-xs'
      }, row.estado === 'pagado' ? '✓ Pagado' : '⏳ Pendiente')
    }
    if (column === 'created_at' && typeof row.created_at === 'string') {
      const date = new Date(row.created_at)
      const formattedDate = dateFormat.value === 'long'
        ? date.toLocaleDateString('es-HN', { day: 'numeric', month: 'long', year: 'numeric' })
        : date.toLocaleDateString('es-HN')
      return h('span', { class: 'font-bold text-base' }, formattedDate)
    }
    return '—'
  }

  if (value === null || value === undefined) {
    return '—'
  }

  // idciat - badge con formato CIAT-####
  if (column === 'idciat' && typeof value === 'number') {
    return h(UBadge, {
      label: `CIAT-${value}`,
      color: 'info',
      variant: 'subtle',
      size: 'md',
      class: 'rounded-full'
    })
  }

  // name - con avatar si está disponible
  if (column === 'name' && typeof value === 'string' && isCliente) {
    return h('div', { class: 'flex items-center gap-2' }, [
      row.avatar_url ? h(UAvatar, {
        src: row.avatar_url,
        alt: value,
        size: 'xs'
      }) : h(UIcon, {
        name: 'i-lucide-user-circle',
        class: 'w-6 h-6 text-gray-400'
      }),
      h('span', { class: 'font-medium' }, value)
    ])
  }

  // empleado - icono booleano
  if (column === 'empleado' && typeof value === 'boolean') {
    return h(UIcon, {
      name: value ? 'i-lucide-briefcase' : 'i-lucide-user',
      class: value ? 'text-purple-600 w-5 h-5' : 'text-gray-400 w-5 h-5'
    })
  }

  // cedula - formato especial
  if (column === 'cedula' && typeof value === 'number') {
    return h(UBadge, {
      label: String(value),
      color: 'neutral',
      variant: 'soft',
      size: 'sm',
      class: 'font-mono'
    })
  }

  // telefono - con icono
  if (column === 'telefono' && typeof value === 'string') {
    return h('div', { class: 'flex items-center gap-1.5' }, [
      h(UIcon, {
        name: 'i-lucide-phone',
        class: 'w-4 h-4 text-green-600'
      }),
      h('span', { class: 'font-mono text-sm' }, value)
    ])
  }

  // ubicacion - con icono
  if (column === 'ubicacion' && typeof value === 'string') {
    return h('div', { class: 'flex items-center gap-1.5' }, [
      h(UIcon, {
        name: 'i-lucide-map-pin',
        class: 'w-4 h-4 text-red-500'
      }),
      h('span', { class: 'text-sm' }, value)
    ])
  }

  // grupo_estudio - badge
  if (column === 'grupo_estudio' && typeof value === 'string') {
    return h(UBadge, {
      label: value,
      color: 'secondary',
      variant: 'subtle',
      size: 'sm'
    })
  }

  // Campos agregados de ingresos
  if (column === 'peso_seco' && typeof value === 'number' && depth === 0) {
    return h('div', { class: 'text-right font-medium text-yellow-500' }, value.toFixed(2))
  }

  if (column === 'peso_neto' && typeof value === 'number' && depth === 0) {
    return h('div', { class: 'text-right font-medium text-yellow-500' }, value.toFixed(2))
  }

  if (column === 'precio' && typeof value === 'number' && depth === 0) {
    const formatted = new Intl.NumberFormat('es-HN', {
      style: 'currency',
      currency: 'HNL',
      minimumFractionDigits: 2,
      maximumFractionDigits: 2
    }).format(value).replace('HNL', 'L')
    return h('div', { class: 'text-right font-medium text-yellow-500' }, formatted)
  }

  if (column === 'estado' && typeof value === 'string' && depth === 0) {
    const estados = value.split(', ')
    return h('div', { class: 'flex flex-wrap gap-1' }, estados.map((estado: string) =>
      h('span', {
        class: estado === 'pagado'
          ? 'inline-flex items-center gap-1 px-2 py-0.5 rounded bg-green-500/20 text-green-300 border border-green-400/30 text-xs'
          : 'inline-flex items-center gap-1 px-2 py-0.5 rounded bg-yellow-500/20 text-yellow-300 border border-yellow-400/30 text-xs'
      }, estado === 'pagado' ? '✓ Pagado' : '⏳ Pendiente')
    ))
  }

  // Formatear fechas
  if ((column === 'created_at' || column === 'updated_at') && typeof value === 'string' && value.includes('T')) {
    try {
      const date = new Date(value)
      if (dateFormat.value === 'long') {
        return date.toLocaleDateString('es-HN', {
          day: 'numeric',
          month: 'long',
          year: 'numeric'
        })
      }
      return date.toLocaleDateString('es-HN')
    } catch {
      return String(value)
    }
  }

  return String(value).substring(0, 100)
}
</script>
