<template>
  <div class="min-h-screen flex items-center justify-center bg-gray-50">
    <div class="max-w-md w-full space-y-8">
      <div>
        <h2 class="mt-6 text-center text-3xl font-extrabold text-gray-900">
          CorradAF RBAC System
        </h2>
        <p class="mt-2 text-center text-sm text-gray-600">
          Sign in to manage applications and users
        </p>
      </div>
      
      <div class="rounded-md shadow-sm -space-y-px">
        <button
          @click="loginWithAuthentik"
          :disabled="isLoading"
          class="group relative w-full flex justify-center py-3 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 disabled:opacity-50"
        >
          <span v-if="!isLoading">Sign in with Authentik</span>
          <span v-else>Redirecting...</span>
        </button>
      </div>

      <div class="text-center">
        <p class="text-xs text-gray-500">
          This will redirect you to Authentik for secure authentication
        </p>
      </div>
    </div>
  </div>
</template>

<script setup>
// Redirect authenticated users to dashboard
definePageMeta({
  middleware: 'dashboard',
  layout: "empty"
});

const isLoading = ref(false);

const loginWithAuthentik = async () => {
  isLoading.value = true;
  
  try {
    // Redirect to our auth endpoint which handles Authentik OAuth2
    await navigateTo('/api/auth/login', { external: true });
  } catch (error) {
    console.error('Login error:', error);
    isLoading.value = false;
  }
};

// Redirect if already authenticated
onMounted(() => {
  // Check if user is already authenticated (you can implement this later)
  // For now, just show the login page
});
</script> 