<script setup lang="ts">
import type { Notification } from '~/composables/useNotifications'

definePageMeta({
  layout: 'dashboard',
  title: 'Notificaciones'
})

const {
  notifications,
  unreadCount,
  markAsRead,
  markAllAsRead,
  removeNotification,
  clearAll,
  getFilteredNotifications
} = useNotifications()

// Estado de filtros y búsqueda
const searchQuery = ref('')
const selectedTypes = ref<Array<'info' | 'warning' | 'success' | 'error'>>([])

// Opciones de tipos de notificación
const typeOptions = [
  { value: 'info', label: 'Información', icon: 'i-lucide-info', color: 'blue' },
  { value: 'success', label: 'Éxito', icon: 'i-lucide-check-circle', color: 'green' },
  { value: 'warning', label: 'Advertencia', icon: 'i-lucide-alert-triangle', color: 'amber' },
  { value: 'error', label: 'Error', icon: 'i-lucide-x-circle', color: 'red' }
]

// Notificaciones filtradas
const filteredNotifications = computed(() => {
  return getFilteredNotifications({
    type: selectedTypes.value.length > 0 ? selectedTypes.value : undefined,
    search: searchQuery.value || undefined
  })
})

// Verificar si hay notificaciones
const hasNotifications = computed(() => notifications.value.length > 0)

// Mapeo de tipos a iconos y colores
function getNotificationStyle(type: Notification['type']) {
  const option = typeOptions.find(o => o.value === type)
  return option || typeOptions[0]
}

// Formatear tiempo relativo
function formatRelativeTime(timestamp: number): string {
  const now = Date.now()
  const diff = now - timestamp
  const minutes = Math.floor(diff / 60000)
  const hours = Math.floor(diff / 3600000)
  const days = Math.floor(diff / 86400000)

  if (minutes < 1) return 'ahora'
  if (minutes < 60) return `hace ${minutes} min`
  if (hours < 24) return `hace ${hours}h`
  if (days < 30) return `hace ${days} días`
  return new Date(timestamp).toLocaleDateString('es-ES', {
    day: 'numeric',
    month: 'short',
    year: 'numeric'
  })
}

// Manejar clic en notificación (marcar como leída)
function handleNotificationClick(notification: Notification) {
  if (!notification.read) {
    markAsRead(notification.id)
  }
}

// Confirmar antes de eliminar todas
const toast = useToast()

function confirmClearAll() {
  if (confirm('¿Estás seguro de que quieres eliminar todas las notificaciones?')) {
    clearAll()
    toast.add({
      title: 'Notificaciones eliminadas',
      description: 'Se han eliminado todas las notificaciones',
      color: 'success'
    })
  }
}

// Eliminar notificación individual
function handleRemove(notification: Notification) {
  removeNotification(notification.id)
  toast.add({
    title: 'Notificación eliminada',
    color: 'info'
  })
}
</script>

<template>
  <UDashboardLayout>
    <UDashboardPanel grow>
      <UDashboardNavbar
        title="Notificaciones"
        description="Historial de notificaciones y alertas del sistema"
      />

      <UDashboardPanelContent>
        <div class="max-w-4xl mx-auto space-y-6">
          <!-- Header con acciones -->
          <div v-if="hasNotifications" class="flex flex-col sm:flex-row gap-4">
            <!-- Búsqueda -->
            <div class="flex-1">
              <UInput
                v-model="searchQuery"
                icon="i-lucide-search"
                placeholder="Buscar notificaciones..."
                size="lg"
              />
            </div>

            <!-- Acciones -->
            <div class="flex gap-2">
              <UButton
                v-if="unreadCount > 0"
                color="neutral"
                variant="soft"
                @click="markAllAsRead"
              >
                <template #leading>
                  <UIcon name="i-lucide-check-check" />
                </template>
                Marcar todas como leídas
              </UButton>

              <UButton
                color="neutral"
                variant="soft"
                @click="confirmClearAll"
              >
                <template #leading>
                  <UIcon name="i-lucide-trash-2" />
                </template>
                Eliminar todas
              </UButton>
            </div>
          </div>

          <!-- Filtros por tipo -->
          <div v-if="hasNotifications" class="flex gap-2 flex-wrap">
            <UButton
              v-for="option in typeOptions"
              :key="option.value"
              :color="selectedTypes.includes(option.value as any) ? option.color : 'neutral'"
              :variant="selectedTypes.includes(option.value as any) ? 'solid' : 'soft'"
              size="sm"
              @click="() => {
                const idx = selectedTypes.indexOf(option.value as any)
                if (idx === -1) {
                  selectedTypes.push(option.value as any)
                } else {
                  selectedTypes.splice(idx, 1)
                }
              }"
            >
              <template #leading>
                <UIcon :name="option.icon" />
              </template>
              {{ option.label }}
            </UButton>
          </div>

          <!-- Badge de contador -->
          <div v-if="hasNotifications" class="flex items-center gap-2">
            <span class="text-sm text-gray-600 dark:text-[var(--brand-text-muted)]">
              {{ filteredNotifications.length }} notificación{{ filteredNotifications.length !== 1 ? 'es' : '' }}
            </span>
            <UBadge v-if="unreadCount > 0" color="red" variant="solid" size="sm">
              {{ unreadCount }} nueva{{ unreadCount !== 1 ? 's' : '' }}
            </UBadge>
          </div>

          <!-- Lista de notificaciones -->
          <UCard v-if="filteredNotifications.length > 0">
            <div class="space-y-3">
              <div
                v-for="notification in filteredNotifications"
                :key="notification.id"
                :class="[
                  'p-4 rounded-lg border transition-all cursor-pointer group',
                  notification.read
                    ? 'bg-gray-50/50 dark:bg-gray-800/50 border-gray-200 dark:border-gray-700'
                    : 'bg-white dark:bg-gray-900 border-gray-300 dark:border-gray-600 hover:border-gray-400 dark:hover:border-gray-500'
                ]"
                @click="handleNotificationClick(notification)"
              >
                <div class="flex gap-3">
                  <!-- Icono -->
                  <div
                    :class="[
                      'w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0',
                      `bg-${getNotificationStyle(notification.type).color}-50 dark:bg-${getNotificationStyle(notification.type).color}-950/30`
                    ]"
                  >
                    <UIcon
                      :name="getNotificationStyle(notification.type).icon"
                      :class="[
                        'size-5',
                        `text-${getNotificationStyle(notification.type).color}-600 dark:text-${getNotificationStyle(notification.type).color}-400`
                      ]"
                    />
                  </div>

                  <!-- Contenido -->
                  <div class="flex-1 min-w-0">
                    <div class="flex items-start justify-between gap-2">
                      <h4
                        :class="[
                          'font-semibold text-sm',
                          notification.read
                            ? 'text-gray-600 dark:text-[var(--brand-text-muted)]'
                            : 'text-gray-900 dark:text-white'
                        ]"
                      >
                        {{ notification.title }}
                      </h4>
                      <div class="flex items-center gap-2 flex-shrink-0">
                        <span class="text-xs text-gray-500 dark:text-gray-500">
                          {{ formatRelativeTime(notification.timestamp) }}
                        </span>
                        <UButton
                          color="neutral"
                          variant="ghost"
                          size="xs"
                          icon="i-lucide-x"
                          class="opacity-0 group-hover:opacity-100 transition-opacity"
                          @click.stop="handleRemove(notification)"
                        />
                      </div>
                    </div>
                    <p
                      v-if="notification.message"
                      class="text-sm text-gray-600 dark:text-[var(--brand-text-muted)] mt-1"
                    >
                      {{ notification.message }}
                    </p>

                    <!-- Badges de origen -->
                    <div class="flex gap-2 mt-2">
                      <UBadge
                        v-if="notification.origin === 'toast'"
                        color="neutral"
                        variant="subtle"
                        size="xs"
                      >
                        <template #leading>
                          <UIcon name="i-lucide-message-square" class="size-3" />
                        </template>
                        Toast
                      </UBadge>
                      <UBadge
                        v-else-if="notification.origin === 'backend'"
                        color="blue"
                        variant="subtle"
                        size="xs"
                      >
                        <template #leading>
                          <UIcon name="i-lucide-server" class="size-3" />
                        </template>
                        Sistema
                      </UBadge>
                      <UBadge
                        v-else-if="notification.origin === 'manual'"
                        color="purple"
                        variant="subtle"
                        size="xs"
                      >
                        <template #leading>
                          <UIcon name="i-lucide-user" class="size-3" />
                        </template>
                        Manual
                      </UBadge>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </UCard>

          <!-- Estado vacío cuando hay filtros activos -->
          <UCard
            v-else-if="hasNotifications && filteredNotifications.length === 0"
            class="text-center py-12"
          >
            <div class="flex flex-col items-center gap-4">
              <div class="w-16 h-16 rounded-full bg-gray-100 dark:bg-gray-800 flex items-center justify-center">
                <UIcon name="i-lucide-search-x" class="size-8 text-gray-400 dark:text-gray-600" />
              </div>
              <div>
                <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-1">
                  No se encontraron notificaciones
                </h3>
                <p class="text-sm text-gray-600 dark:text-[var(--brand-text-muted)]">
                  Intenta ajustar los filtros o la búsqueda
                </p>
              </div>
              <UButton
                color="neutral"
                variant="soft"
                @click="() => { searchQuery = ''; selectedTypes = [] }"
              >
                Limpiar filtros
              </UButton>
            </div>
          </UCard>

          <!-- Estado vacío cuando no hay notificaciones -->
          <UCard v-else class="text-center py-12">
            <div class="flex flex-col items-center gap-4">
              <div class="w-20 h-20 rounded-full bg-gray-100 dark:bg-gray-800 flex items-center justify-center">
                <UIcon name="i-lucide-bell-off" class="size-10 text-gray-400 dark:text-gray-600" />
              </div>
              <div>
                <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-1">
                  No tienes notificaciones
                </h3>
                <p class="text-sm text-gray-600 dark:text-[var(--brand-text-muted)]">
                  Cuando recibas notificaciones, aparecerán aquí
                </p>
              </div>
            </div>
          </UCard>
        </div>
      </UDashboardPanelContent>
    </UDashboardPanel>
  </UDashboardLayout>
</template>
