<template>
  <div class="flex flex-col gap-6">
    <UCard class="brand-card border border-transparent backdrop-blur-sm">
      <template #header>
        <div class="flex flex-col gap-2">
          <h2 class="text-xl font-semibold text-[var(--brand-text)]">Explorador de Datos</h2>
          <p class="text-sm text-[var(--brand-text-muted)]">
            Explore y analice los datos de las tablas disponibles con funciones avanzadas de filtrado y ordenamiento.
          </p>
        </div>
      </template>

      <!-- Table Selection Field Group -->
      <UFieldGroup>
        <UButton
          :label="selectedTable ? selectedTable.label : 'Seleccionar tabla'"
          :icon="selectedTable ? 'i-lucide-table' : 'i-lucide-loader-circle'"
          color="neutral"
          variant="subtle"
          :loading="metadataStore.loading && !metadataStore.hasMetadata"
        />

        <UDropdownMenu :items="tableDropdownItems" :loading="metadataStore.loading && !metadataStore.hasMetadata">
          <UButton
            color="neutral"
            variant="outline"
            icon="i-lucide-chevron-down"
            :disabled="metadataStore.loading && !metadataStore.hasMetadata"
          />
        </UDropdownMenu>
      </UFieldGroup>
    </UCard>

    <!-- Loading State -->
    <UCard v-if="metadataStore.loading && !metadataStore.hasMetadata" class="brand-card border border-transparent">
      <div class="flex items-center justify-center gap-3 py-10 text-[var(--brand-text-muted)]">
        <span class="inline-flex h-8 w-8 animate-spin rounded-full border-2 border-[#c08040] border-t-transparent align-middle" aria-hidden="true" />
        <span class="text-sm uppercase tracking-[0.3em]">Cargando metadatos...</span>
      </div>
      <p class="text-center text-sm text-[var(--brand-text-muted)] mt-2">
        Por favor espera mientras se cargan los metadatos de las tablas disponibles.
      </p>
    </UCard>

    <!-- Table Content -->
    <UCard v-else-if="selectedTable" class="brand-card border border-transparent">
      <template #header>
        <div class="flex flex-wrap items-center justify-between gap-3">
          <h2 class="text-lg font-semibold brand-section-title">
            Tabla: {{ selectedTable.name }}
          </h2>
          <div class="flex flex-wrap gap-2 text-xs text-[var(--brand-text-muted)]">
            <span class="brand-pill inline-flex items-center gap-2 rounded-full px-3 py-1 text-xs">
              {{ selectedTable.rowCount || 0 }} registros
            </span>
          </div>
        </div>
      </template>

      <!-- Loading State for Table Data -->
      <div v-if="tableDataLoading" class="flex items-center justify-center gap-3 py-10 text-[var(--brand-text-muted)]">
        <span class="inline-flex h-8 w-8 animate-spin rounded-full border-2 border-[#c08040] border-t-transparent align-middle" aria-hidden="true" />
        <span class="text-sm uppercase tracking-[0.3em]">Cargando datos...</span>
      </div>

      <!-- NuxtUI Table -->
      <div v-else-if="tableData.length > 0" class="flex-1 divide-y divide-accented w-full">
        <!-- Table Controls -->
        <div class="flex items-center gap-2 px-4 py-3.5 overflow-x-auto">
          <UInput
            :model-value="globalFilter"
            class="max-w-sm min-w-[12ch]"
            placeholder="Buscar en todos los campos..."
            icon="i-lucide-search"
            @update:model-value="updateGlobalFilter"
          />

          <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"
          :data="tableData"
          :columns="tableColumns"
          :global-filter="globalFilter"
          sticky
          class="h-96"
        />

        <!-- Table Footer with Meta Information -->
        <div class="px-4 py-3.5 text-sm text-muted">
          {{ filteredRowCount }} de {{ totalRowCount }} filas mostradas.
          <span v-if="selectedTable.primaryKey" class="ml-2">
            Clave primaria: <code class="text-xs bg-elevated px-1 py-0.5 rounded">{{ selectedTable.primaryKey }}</code>
          </span>
        </div>
      </div>

      <!-- Empty State -->
      <div v-else class="py-10 text-center text-sm text-[var(--brand-text-muted)]">
        No se encontraron datos en esta tabla.
      </div>
    </UCard>

    <!-- No Table Selected -->
    <UCard v-else class="brand-card border border-transparent">
      <div class="py-10 text-center text-sm text-[var(--brand-text-muted)]">
        Selecciona una tabla para explorar sus datos.
      </div>
    </UCard>
  </div>
</template>

<script setup lang="ts">
import { h, resolveComponent } from 'vue'
import { upperFirst } from 'scule'
import type { TableColumn, DropdownMenuItem } from '@nuxt/ui'
import { useRequestFetch } from '#imports'
import { useMetadataStore } from '~/stores/metadata'

definePageMeta({
  layout: 'dashboard',
  title: 'Explorador de datos'
})

const UButton = resolveComponent('UButton')

// State
const selectedTableName = ref<string>('')
const tableData = ref<Record<string, unknown>[]>([])
const tableDataLoading = ref(false)
const globalFilter = ref('')

const requestFetch = useRequestFetch()
const table = useTemplateRef('table')
const metadataStore = useMetadataStore()

// Computed properties
const selectedTable = computed(() => {
  if (!selectedTableName.value || !metadataStore.hasMetadata) return null

  const metadata = metadataStore.getTableMetadata(selectedTableName.value)
  if (!metadata) return null

  return {
    name: metadata.table,
    label: `${metadata.table} (${metadata.rowCount || 0} registros)`,
    rowCount: metadata.rowCount || 0,
    primaryKey: metadata.primaryKey,
    columns: metadata.columns || [],
    ...metadata
  }
})

const tableDropdownItems = computed((): DropdownMenuItem[] => {
  if (metadataStore.loading && !metadataStore.hasMetadata) {
    return [{
      type: 'label',
      label: 'Cargando...'
    }]
  }

  if (!metadataStore.hasMetadata) {
    return [{
      type: 'label',
      label: 'No hay tablas disponibles'
    }]
  }

  return metadataStore.allTables.map(metadata => ({
    label: `${metadata.table} (${metadata.rowCount || 0})`,
    icon: 'i-lucide-table',
    onSelect: () => selectTable(metadata.table)
  }))
})

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

  const firstRow = tableData.value[0]
  const columns = Object.keys(firstRow)

  return columns.map(column => ({
    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',
        onClick: () => tableColumn.toggleSorting(tableColumn.getIsSorted() === 'asc')
      })
    },
    cell: ({ row }) => formatCellValue(row.getValue(column))
  }))
})

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

  return table.value.tableApi
    .getAllColumns()
    .filter(column => column.getCanHide())
    .map(column => ({
      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()
      }
    }))
})

const filteredRowCount = computed(() => {
  return table.value?.tableApi?.getFilteredRowModel().rows.length || 0
})

const totalRowCount = computed(() => {
  return tableData.value.length
})

// Methods

async function selectTable(tableName: string) {
  if (selectedTableName.value === tableName) return

  selectedTableName.value = tableName
  await loadTableData(tableName)
}

async function loadTableData(tableName: string) {
  try {
    tableDataLoading.value = true

    const response = await requestFetch(`/api/data/${tableName}`, {
      query: { limit: '100' }
    })

    if (response && typeof response === 'object' && 'records' in response) {
      const dataset = response as {
        records?: Record<string, unknown>[]
      }
      tableData.value = Array.isArray(dataset.records) ? dataset.records : []
    } else if (Array.isArray(response)) {
      tableData.value = response
    } else {
      tableData.value = []
    }

  } catch (error) {
    console.error('Error loading table data:', error)
    tableData.value = []
  } finally {
    tableDataLoading.value = false
  }
}

function updateGlobalFilter(value: string) {
  globalFilter.value = value
}

function formatCellValue(value: unknown): string {
  if (value === null || value === undefined) {
    return '—'
  }

  if (value instanceof Date) {
    return value.toISOString()
  }

  if (typeof value === 'object') {
    try {
      return JSON.stringify(value)
    } catch {
      return '[objeto]'
    }
  }

  const stringValue = String(value)

  // Truncate long strings
  if (stringValue.length > 100) {
    return stringValue.substring(0, 100) + '...'
  }

  return stringValue
}

// Watchers
watch(selectedTableName, async (newTableName) => {
  if (newTableName) {
    await loadTableData(newTableName)
  } else {
    tableData.value = []
  }
})

// Auto-select first table when metadata becomes available
watch(() => metadataStore.hasMetadata, (hasMetadata) => {
  if (hasMetadata && !selectedTableName.value && metadataStore.allTables.length > 0) {
    selectedTableName.value = metadataStore.allTables[0].table
  }
})

// Lifecycle
onMounted(async () => {
  await metadataStore.initialize()

  // Auto-select first table if available
  if (metadataStore.hasMetadata && !selectedTableName.value) {
    const firstTable = metadataStore.allTables[0]
    if (firstTable) {
      selectedTableName.value = firstTable.table
    }
  }
})
</script>