<template>
  <div class="authentication bg-primary">
    <v-container class="pa-3 auth-login ">
      <v-row class="h-100vh d-flex justify-center align-center ">
        <v-col cols="12" class="text-center mt-6">
        </v-col>
        <v-col cols="12" class="d-flex align-center">
          <v-card rounded="md" elevation="10" class="mx-auto">
            <div class="pa-3">
              <v-row>
                <v-col cols="12" md="6" class="border-e px-md-12 px-6 py-md-12 py-6 rounded-s-md">
                  <div class="login-container d-flex flex-column justify-space-between h-100 w-100">

                    <!-- TOP AREA -->
                    <div>
                      <!-- Logo and Title -->
                      <div class="mb-8">
                        <div class="d-flex align-center mb-2">
                            <img :src="Logoimg" width="180" alt="home" />
                        </div>
                      </div>
                    </div>

                    <!-- Sign In Section -->
                    <div class="mb-8 pa-4">
                      <h1 class="text-h3 font-weight-bold mb-6 textPrimary">Login</h1>

                      <!-- Error Message -->
                      <v-alert
                        v-if="errorMessage"
                        type="error"
                        closable
                        class="mb-4"
                        @click:close="errorMessage = ''"
                      >
                        {{ errorMessage }}
                      </v-alert>

                      <!-- Success Message -->
                      <v-alert
                        v-if="successMessage"
                        type="success"
                        class="mb-4"
                      >
                        {{ successMessage }}
                      </v-alert>

                      <v-btn 
                        color="primary" 
                        size="x-large" 
                        block 
                        class="text-none mb-4 text-primary login-btn" 
                        elevation="4"
                        :loading="isLoading"
                        :disabled="isLoading"
                        @click="handleLogin"
                      >
                        <v-icon left class="mr-3">mdi-account-circle</v-icon>
                        Login dengan Keycloak
                      </v-btn>
                    </div>

                    <!-- BOTTOM AREA -->
                    <div class="d-flex align-center">
                      <v-icon size="small" class="mr-2">mdi-lock-outline</v-icon>
                      <span class="text-caption">Belum terautentikasi</span>
                    </div>

                  </div>
                </v-col>
                <v-col cols="12" md="6" class="d-md-flex d-none rounded-e-md pa-0 bg-grey100">
                  <div class="d-flex flex-column justify-center h-100 align-center text-center w-100 px-8">
                      <img src="@/assets/images/backgrounds/undraw_wait.svg" alt="matdash-img"
                        width="300" class="mb-6 mx-auto" />
                      <h3 class="text-h3 mb-4">{{ AuthCuroselData[0].title }}</h3>
                      <p class="textSecondary mx-auto" style="max-width: 400px;">
                        {{ AuthCuroselData[0].subtitle }}
                      </p>
                  </div>
                </v-col>
              </v-row>
            </div>
          </v-card>
        </v-col>
        <v-col cols="12" class="text-center mt-6">
          <p class="text-caption text-white">&copy; 2026 RSUD Dr. Saiful Anwar Provinsi Jawa Timur. All rights reserved.</p> 
        </v-col>
      </v-row>
    </v-container>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import type { LoginResponse } from '~/types/auth';
import Logoimg from "/images/logos/Logo-antrean-new.svg";

const route = useRoute();

const AuthCuroselData = [
  {
    title: 'Sistem Antrean Operasi',
    subtitle: 'Kelola antrean operasi dengan efisien menggunakan sistem.'
  }
];

const isLoading = ref(false);
const errorMessage = ref('');
const successMessage = ref('');

// Check for error in URL query parameters
onMounted(() => {
  const errorParam = route.query.error as string;
  if (errorParam) {
    errorMessage.value = decodeURIComponent(errorParam);
  }
});

const handleLogin = async (): Promise<void> => {
  isLoading.value = true;
  errorMessage.value = '';
  successMessage.value = '';

  try {
    console.log('Starting login process...');
    
    // Call API route to initiate Keycloak login process
    const response = await $fetch<LoginResponse>('/api/auth/keycloak-login', {
      method: 'POST'
    });

    if (response?.success && response?.data?.authUrl) {
      console.log('Redirecting to Keycloak...');
      successMessage.value = 'Redirecting to Keycloak...';
      
      // Redirect the user to the Keycloak authorization URL
      setTimeout(() => {
        window.location.href = response.data!.authUrl;
      }, 500);
    } else {
      throw new Error('Failed to get authorization URL');
    }
  } catch (error: any) {
    console.error('Login error:', error);
    // Display the error message
    errorMessage.value = `Login failed: ${error.message || 'Please try again.'}`;
  } finally {
    // Only set isLoading back to false if no redirect is happening
    if (!successMessage.value.includes('Redirecting')) {
      isLoading.value = false;
    }
  }
};

/*-For Set Blank Layout-*/
definePageMeta({
  layout: "blank",
  middleware: "guest"
});
</script>

<style scoped>
.login-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2) !important;
  transition: all 0.3s ease;
}

.login-btn {
  transition: all 0.3s ease;
}
</style>
