<template>
  <div class="min-h-screen bg-gray-50">
    <nav class="bg-white shadow">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex justify-between h-16">
          <div class="flex items-center">
            <h1 class="text-xl font-semibold text-gray-900">
              CorradAF RBAC Dashboard
            </h1>
          </div>
          <div class="flex items-center space-x-4">
            <span v-if="user" class="text-sm text-gray-700">
              Welcome, {{ user.name || user.email }}
            </span>
            <button
              @click="handleLogout"
              class="bg-red-600 hover:bg-red-700 text-white px-3 py-2 rounded-md text-sm font-medium"
            >
              Logout
            </button>
          </div>
        </div>
      </div>
    </nav>

    <main class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
      <div class="px-4 py-6 sm:px-0">
        <div class="border-4 border-dashed border-gray-200 rounded-lg p-8">
          <div v-if="pending">
            <p class="text-gray-500">Loading user information...</p>
          </div>
          
          <div v-else-if="user" class="space-y-6">
            <div>
              <h2 class="text-2xl font-bold text-gray-900 mb-4">
                🎉 Authentication Successful!
              </h2>
              <p class="text-gray-600 mb-6">
                You are now logged into the CorradAF RBAC system as the master provider.
              </p>
            </div>

            <div class="bg-white rounded-lg shadow p-6">
              <h3 class="text-lg font-medium text-gray-900 mb-4">
                User Information
              </h3>
              <dl class="grid grid-cols-1 gap-x-4 gap-y-6 sm:grid-cols-2">
                <div>
                  <dt class="text-sm font-medium text-gray-500">Name</dt>
                  <dd class="mt-1 text-sm text-gray-900">{{ user.name || 'N/A' }}</dd>
                </div>
                <div>
                  <dt class="text-sm font-medium text-gray-500">Email</dt>
                  <dd class="mt-1 text-sm text-gray-900">{{ user.email }}</dd>
                </div>
                <div>
                  <dt class="text-sm font-medium text-gray-500">Username</dt>
                  <dd class="mt-1 text-sm text-gray-900">{{ user.preferred_username || 'N/A' }}</dd>
                </div>
                <div>
                  <dt class="text-sm font-medium text-gray-500">User ID</dt>
                  <dd class="mt-1 text-sm text-gray-900">{{ user.sub }}</dd>
                </div>
              </dl>
            </div>

            <div class="bg-blue-50 border border-blue-200 rounded-lg p-4">
              <h4 class="text-sm font-medium text-blue-800 mb-2">
                Next Steps
              </h4>
              <ul class="text-sm text-blue-700 space-y-1">
                <li>• You can now create and manage other applications</li>
                <li>• Add users and assign them to applications</li>
                <li>• Create roles and permissions</li>
                <li>• Manage groups and access control</li>
              </ul>
            </div>

            <div class="flex space-x-4">
              <NuxtLink
                to="/applications"
                class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-md text-sm font-medium"
              >
                Manage Applications
              </NuxtLink>
              <NuxtLink
                to="/users"
                class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-md text-sm font-medium"
              >
                Manage Users
              </NuxtLink>
            </div>
          </div>

          <div v-else class="text-center">
            <p class="text-red-600">Failed to load user information</p>
            <NuxtLink
              to="/login"
              class="mt-4 inline-block bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-md text-sm font-medium"
            >
              Login Again
            </NuxtLink>
          </div>
        </div>
      </div>
    </main>
  </div>
</template>

<script setup>
// Require authentication for this page
definePageMeta({
  middleware: 'auth'
});

// Use the auth composable
const { logout } = useAuth();

// Get user information with proper error handling
const { data: user, pending } = await useFetch('/api/auth/me', {
  default: () => null,
  server: false // Client-side only to handle redirects properly
});

// If not authenticated, redirect to login
watchEffect(() => {
  if (!pending.value && !user.value) {
    navigateTo('/login');
  }
});

const handleLogout = async () => {
  await logout();
};
</script> 