<script setup lang="ts">
import type { NuxtError } from '#app'

const props = defineProps<{
  error: NuxtError
}>()

const handleError = () => clearError({ redirect: '/' })

const errorMessage = computed(() => {
  if (props.error.statusCode === 404) {
    return {
      title: 'Página no encontrada',
      description: 'Lo sentimos, la página que buscas no existe o ha sido movida.',
      icon: 'i-lucide-file-question'
    }
  }
  return {
    title: 'Error del servidor',
    description: 'Ha ocurrido un error inesperado. Por favor, intenta nuevamente.',
    icon: 'i-lucide-alert-circle'
  }
})
</script>

<template>
  <UDashboardLayout>
    <UDashboardPanel grow>
      <div class="flex items-center justify-center min-h-screen p-4">
        <div class="text-center max-w-md mx-auto space-y-6">
          <!-- Error Icon -->
          <div class="flex justify-center">
            <div class="w-20 h-20 rounded-full bg-red-50 dark:bg-red-950/30 flex items-center justify-center">
              <UIcon :name="errorMessage.icon" class="size-10 text-red-600 dark:text-red-400" />
            </div>
          </div>

          <!-- Error Code -->
          <div>
            <h1 class="text-6xl font-bold text-[var(--brand-text)] mb-2">
              {{ error.statusCode || '500' }}
            </h1>
            <h2 class="text-2xl font-semibold text-[var(--brand-text)] mb-3">
              {{ errorMessage.title }}
            </h2>
            <p class="text-[var(--brand-text-muted)]">
              {{ errorMessage.description }}
            </p>
          </div>

          <!-- Error Details (dev mode) -->
          <div v-if="error.message && $config.public.dev" class="mt-4 p-4 bg-[var(--brand-surface)] rounded-lg text-left border border-[var(--brand-border)]">
            <p class="text-xs font-mono text-[var(--brand-text-muted)] break-all">
              {{ error.message }}
            </p>
          </div>

          <!-- Actions -->
          <div class="flex flex-col sm:flex-row gap-3 justify-center mt-8">
            <UButton
              to="/"
              color="primary"
              size="lg"
              icon="i-lucide-home"
            >
              Ir al inicio
            </UButton>
            <UButton
              color="neutral"
              variant="outline"
              size="lg"
              icon="i-lucide-refresh-ccw"
              @click="handleError"
            >
              Intentar nuevamente
            </UButton>
          </div>
        </div>
      </div>
    </UDashboardPanel>
  </UDashboardLayout>
</template>
