<script setup lang="ts">
definePageMeta({
  middleware: 'auth'
})

const { user } = useUserSession()

// Este endpoint está protegido y requiere autenticación
const { data: protectedData, error } = await useFetch('/api/protected')
</script>

<template>
  <div class="min-h-screen">
    <header class="border-b border-gray-200 dark:border-gray-800">
      <div class="container mx-auto px-4 py-4 flex justify-between items-center">
        <div class="flex items-center gap-4">
          <UButton
            icon="i-heroicons-arrow-left"
            variant="ghost"
            to="/"
          />
          <h1 class="text-2xl font-bold">Dashboard</h1>
        </div>
        <UserMenu />
      </div>
    </header>

    <main class="container mx-auto px-4 py-8">
      <div class="space-y-6">
        <UCard>
          <template #header>
            <h2 class="text-xl font-semibold">Panel de Control</h2>
          </template>

          <p>Esta página está protegida por el middleware de autenticación.</p>
        </UCard>

        <UCard>
          <template #header>
            <h3 class="font-semibold">Datos Protegidos de la API</h3>
          </template>

          <div v-if="error" class="text-red-500">
            Error al cargar datos: {{ error.message }}
          </div>

          <div v-else-if="protectedData">
            <pre class="bg-gray-100 dark:bg-gray-800 p-4 rounded overflow-auto text-sm">{{ JSON.stringify(protectedData, null, 2) }}</pre>
          </div>

          <div v-else>
            Cargando datos protegidos...
          </div>
        </UCard>
      </div>
    </main>
  </div>
</template>
