<template>
  <UCard class="brand-card border border-transparent">
    <div class="text-center py-12 space-y-6">
      <div class="flex justify-center">
        <div class="w-24 h-24 rounded-full bg-amber-50 dark:bg-amber-950/30 flex items-center justify-center relative">
          <UIcon :name="icon" class="size-12 text-amber-600 dark:text-amber-400" />
          <span class="absolute -top-1 -right-1 w-6 h-6 bg-amber-500 text-white text-xs font-bold rounded-full flex items-center justify-center ring-4 ring-white dark:ring-gray-900">
            !
          </span>
        </div>
      </div>

      <div>
        <h2 class="text-3xl font-bold text-gray-900 dark:text-white mb-2">
          {{ title }}
        </h2>
        <p class="text-lg text-[var(--brand-text-muted)] mb-4">
          Esta funcionalidad está temporalmente en mantenimiento
        </p>
        <p class="text-sm text-gray-500 dark:text-gray-500 max-w-md mx-auto">
          {{ description }}
        </p>
      </div>

      <div class="flex justify-center gap-3">
        <UButton
          to="/"
          color="primary"
          icon="i-lucide-home"
        >
          Volver al inicio
        </UButton>
        <UButton
          v-if="showRefresh"
          color="neutral"
          variant="outline"
          icon="i-lucide-refresh-cw"
          @click="refresh"
        >
          Reintentar
        </UButton>
      </div>

      <div v-if="technicalInfo" class="mt-8 pt-6 border-t border-gray-200 dark:border-gray-700">
        <details class="text-left max-w-md mx-auto">
          <summary class="text-sm font-semibold text-gray-700 dark:text-gray-300 cursor-pointer hover:text-gray-900 dark:hover:text-white">
            Información técnica
          </summary>
          <div class="mt-3 p-4 bg-[var(--brand-surface)] rounded-lg text-sm text-[var(--brand-text-muted)]">
            {{ technicalInfo }}
          </div>
        </details>
      </div>
    </div>
  </UCard>
</template>

<script setup lang="ts">
interface Props {
  title?: string
  description?: string
  icon?: string
  showRefresh?: boolean
  technicalInfo?: string
}

withDefaults(defineProps<Props>(), {
  title: 'Funcionalidad en mantenimiento',
  description: 'Estamos trabajando para mejorar esta funcionalidad. Por favor, intenta nuevamente más tarde.',
  icon: 'i-lucide-construction',
  showRefresh: false,
  technicalInfo: ''
})

const refresh = () => {
  window.location.reload()
}
</script>
