<script setup lang="ts">
import { useAuth } from '@/composables/useAuth'
import DashboardLayout from '@/layouts/DashboardLayout.vue'

defineOptions({
  layout: DashboardLayout,
})

const { user } = useAuth()
</script>

<template>
  <UDashboardPanel>
    <template #header>
      <UDashboardNavbar title="Dashboard" />
    </template>

    <template #body>
      <div class="flex flex-col gap-6">
        <UCard>
          <div class="flex items-center gap-4">
            <UIcon name="i-lucide-shield-check" class="text-primary size-8" />
            <div>
              <h2 class="text-lg font-medium">
                Welcome back, {{ user?.first_name }}!
              </h2>
              <p class="text-muted text-sm">
                Your email is verified and you have access to this protected page.
              </p>
            </div>
          </div>
        </UCard>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
          <UCard>
            <div class="flex items-center gap-3">
              <UIcon name="i-lucide-lock" class="text-primary size-5" />
              <div>
                <p class="text-sm font-medium">
                  Auth Middleware
                </p>
                <p class="text-muted text-xs">
                  Route requires authentication
                </p>
              </div>
            </div>
          </UCard>

          <UCard>
            <div class="flex items-center gap-3">
              <UIcon name="i-lucide-mail-check" class="text-primary size-5" />
              <div>
                <p class="text-sm font-medium">
                  Verified Middleware
                </p>
                <p class="text-muted text-xs">
                  Route requires email verification
                </p>
              </div>
            </div>
          </UCard>

          <UCard>
            <div class="flex items-center gap-3">
              <UIcon name="i-lucide-layout-dashboard" class="text-primary size-5" />
              <div>
                <p class="text-sm font-medium">
                  Nuxt UI Dashboard
                </p>
                <p class="text-muted text-xs">
                  Built with dashboard components
                </p>
              </div>
            </div>
          </UCard>
        </div>

        <UCard>
          <template #header>
            <h3 class="font-medium">
              Route Protection
            </h3>
          </template>
          <div class="text-sm space-y-2">
            <p class="text-muted">
              This page is protected with both <code class="bg-gray-100 dark:bg-gray-800 px-1.5 py-0.5 rounded text-xs">auth</code> and <code class="bg-gray-100 dark:bg-gray-800 px-1.5 py-0.5 rounded text-xs">verified</code> middleware. Unauthenticated users are redirected to login, and unverified users are redirected to the email verification page.
            </p>
            <UAlert
              icon="i-lucide-info"
              color="info"
              variant="subtle"
              title="Enable email verification by setting AUTH_ENABLE_EMAIL_VERIFICATION=true in your .env file."
            />
          </div>
        </UCard>
      </div>
    </template>
  </UDashboardPanel>
</template>
