<template>
  <v-container fluid fill-height class="login-background">
    
    <div class="floating-medical-icon icon-1">
      <v-icon size="144">mdi-heart-pulse</v-icon>
    </div>
    <div class="floating-medical-icon icon-2">
      <v-icon size="108">mdi-medical-bag</v-icon>
    </div>
    <div class="floating-medical-icon icon-3">
      <v-icon size="126">mdi-stethoscope</v-icon>
    </div>
    <div class="floating-medical-icon icon-4">
      <v-icon size="120">mdi-hospital-box</v-icon>
    </div>
    <div class="floating-medical-icon icon-5">
      <v-icon size="96">mdi-pill</v-icon>
    </div>
    <div class="floating-medical-icon icon-6">
      <v-icon size="114">mdi-bandage</v-icon>
    </div>

    <v-row class="fill-height align-center justify-center">
      <v-col cols="12" class="d-flex justify-center align-center">
        <v-card class="main-card white-card rounded-xl pa-0" max-width="450" width="100%">
          <v-row class="ma-0">
            <v-col cols="12" class="login-section-box d-flex align-center pa-8">
              <div class="login-content w-100">
                <div class="text-center mb-6">
                  <h2 class="welcome-title-dark">SELAMAT DATANG KEMBALI</h2>
                  <p class="login-instruction-dark">MASUK UNTUK MELANJUTKAN</p>
                </div>

                <div class="d-flex flex-column align-center text-center mb-10 pt-10 pb-10">
                  <img
                    src="/love logo biru.png"
                    alt="Antrean Logo"
                    class="mt-3 hospital-logo"
                  />
                  <!-- src="/x logo biru.png"  -->
                  <!-- src="/logo spiral.png"   -->
                  <!-- src="/logo biru.png"     -->
                  <!-- src="/love logo biru.png" -->
                </div>

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

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

                

                <v-btn
                  @click="handleLogin"
                  class="login-btn"
                  block
                  rounded="lg"
                  size="large"
                  :loading="isLoading"
                  :disabled="isLoading"
                >
                  <v-icon left>mdi-shield-key</v-icon>
                  <span class="font-weight-bold">
                    {{ isLoading ? 'Connecting to Keycloak...' : 'Login dengan Keycloak' }}
                  </span>
                  <v-icon right>mdi-arrow-right</v-icon>
                </v-btn>

                <v-divider class="my-6 custom-divider-dark"></v-divider>

                <div class="text-center mb-6">
                  <p class="sso-text-dark">Login menggunakan Single Sign-On</p>
                </div>

                
                
                <!-- <div class="text-center">
                  <v-btn
                    @click="showRegistrationDialog = true"
                    class="register-btn-dark"
                    variant="outlined"
                    block
                    rounded="lg"
                    size="large"
                  >
                    <v-icon left>mdi-account-plus</v-icon>
                    <span class="font-weight-bold">Daftar Akun Baru</span>
                  </v-btn>

                  <div class="text-center mt-4">
                    <span class="help-text-dark">
                      Belum memiliki akun?
                    </span>
                    <br>
                    <v-btn
                      @click="showAdminContact = true"
                      variant="text"
                      color="#FF9B1B" size="small"
                      class="contact-link-dark mt-1"
                    >
                      Hubungi Administrator
                    </v-btn>
                  </div>
                </div> -->

                <!-- <div class="text-center mt-4">
                  <span class="help-link-dark">Masalah dengan kata sandi Anda?</span>
                </div> -->
              </div>
            </v-col>
          </v-row>
        </v-card>
      </v-col>
    </v-row>

    <!-- <v-dialog v-model="showRegistrationDialog" max-width="500">
      <v-card class="white-dialog rounded-xl">
        <v-card-title class="text-h5 text-center pa-6 bg-grey-lighten-4">
          <v-icon left color="#FF9B1B">mdi-account-plus</v-icon> Pendaftaran Akun Baru
        </v-card-title>
        
        <v-card-text class="text-grey-darken-2 pa-6">
          <div class="text-center mb-4">
            <v-icon size="64" color="#FF9B1B" class="mb-4">mdi-information</v-icon> </div>
          
          <p class="text-body-1 mb-4">
            Untuk mendaftar akun baru pada sistem Antrean RSSA, silakan ikuti langkah berikut:
          </p>
          
          <v-list class="transparent">
            <v-list-item class="text-grey-darken-2 px-0">
              <template v-slot:prepend>
                <v-icon color="#FF9B1B">mdi-numeric-1-circle</v-icon> </template>
              <v-list-item-title class="text-grey-darken-2">
                Hubungi Administrator IT Rumah Sakit
              </v-list-item-title>
            </v-list-item>
            
            <v-list-item class="text-grey-darken-2 px-0">
              <template v-slot:prepend>
                <v-icon color="#FF9B1B">mdi-numeric-2-circle</v-icon> </template>
              <v-list-item-title class="text-grey-darken-2">
                Siapkan dokumen identitas dan surat penugasan
              </v-list-item-title>
            </v-list-item>
            
            <v-list-item class="text-grey-darken-2 px-0">
              <template v-slot:prepend>
                <v-icon color="#FF9B1B">mdi-numeric-3-circle</v-icon> </template>
              <v-list-item-title class="text-grey-darken-2">
                Tunggu proses verifikasi dan aktivasi akun
              </v-list-item-title>
            </v-list-item>
          </v-list>
        </v-card-text>
        
        <v-card-actions class="pa-6 bg-grey-lighten-5">
          <v-spacer></v-spacer>
          <v-btn
            @click="showRegistrationDialog = false"
            color="grey"
            variant="outlined"
            rounded
          >
            Tutup
          </v-btn>
          <v-btn
            @click="showRegistrationDialog = false; showAdminContact = true"
            color="#FF9B1B" rounded
          >
            <v-icon left>mdi-phone</v-icon>
            Hubungi Admin
          </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog> -->

    <!-- <v-dialog v-model="showAdminContact" max-width="500">
      <v-card class="white-dialog rounded-xl">
        <v-card-title class="text-h5 text-center pa-6 bg-grey-lighten-4">
          <v-icon left color="#FF9B1B">mdi-account-tie</v-icon> Kontak Administrator
        </v-card-title>
        
        <v-card-text class="text-grey-darken-2 pa-6">
          <div class="text-center mb-4">
            <v-icon size="64" color="#FF9B1B" class="mb-4">mdi-phone-settings</v-icon> </div>
          
          <v-list class="transparent">
            <v-list-item class="text-grey-darken-2 px-0 mb-2">
              <template v-slot:prepend>
                <v-icon color="#FF9B1B">mdi-office-building</v-icon> </template>
              <div>
                <v-list-item-title class="text-grey-darken-2 font-weight-bold">
                  IT Support RSSA
                </v-list-item-title>
                <v-list-item-subtitle class="text-grey-darken-1">
                  Bagian Teknologi Informasi
                </v-list-item-subtitle>
              </div>
            </v-list-item>
            
            <v-list-item class="text-grey-darken-2 px-0 mb-2">
              <template v-slot:prepend>
                <v-icon color="#FF9B1B">mdi-phone</v-icon> </template>
              <div>
                <v-list-item-title class="text-grey-darken-2">
                  (0341) 343343 ext. 1234
                </v-list-item-title>
                <v-list-item-subtitle class="text-grey-darken-1">
                  Telepon Internal
                </v-list-item-subtitle>
              </div>
            </v-list-item>
            
            <v-list-item class="text-grey-darken-2 px-0 mb-2">
              <template v-slot:prepend>
                <v-icon color="#FF9B1B">mdi-email</v-icon> </template>
              <div>
                <v-list-item-title class="text-grey-darken-2">
                  it-support@rssa.malang.go.id
                </v-list-item-title>
                <v-list-item-subtitle class="text-grey-darken-1">
                  Email Resmi
                </v-list-item-subtitle>
              </div>
            </v-list-item>
            
            <v-list-item class="text-grey-darken-2 px-0">
              <template v-slot:prepend>
                <v-icon color="#FF9B1B">mdi-clock</v-icon> </template>
              <div>
                <v-list-item-title class="text-grey-darken-2">
                  Senin - Jumat: 07:00 - 15:00
                </v-list-item-title>
                <v-list-item-subtitle class="text-grey-darken-1">
                  Jam Operasional
                </v-list-item-subtitle>
              </div>
            </v-list-item>
          </v-list>
          
          <v-alert
            type="info"
            variant="tonal"
            class="mt-4"
            color="orange" >
            <div class="text-grey-darken-2">
              <strong>Catatan:</strong> Pendaftaran akun memerlukan verifikasi dokumen dan dapat memakan waktu 1-2 hari kerja.
            </div>
          </v-alert>
        </v-card-text>
        
        <v-card-actions class="pa-6 bg-grey-lighten-5">
          <v-spacer></v-spacer>
          <v-btn
            @click="showAdminContact = false"
            color="grey"
            variant="outlined"
            rounded
          >
            Tutup
          </v-btn>
          <v-btn
            @click="copyContactInfo"
            color="#FF9B1B" rounded
          >
            <v-icon left>mdi-content-copy</v-icon>
            Salin Info
          </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog> -->

  </v-container>
</template>

<script setup lang="ts">
import type { LoginResponse } from '~/types/auth'

// Use guest middleware to redirect if already authenticated
definePageMeta({
  layout: 'empty',
  middleware: ['guest']
})

// Reactive state
const isLoading = ref<boolean>(false)
const errorMessage = ref<string>('')
const successMessage = ref<string>('')
const showRegistrationDialog = ref<boolean>(false)
const showAdminContact = ref<boolean>(false)

// Hospital Profile URL
const HOSPITAL_PROFILE_URL = 'https://rsusaifulanwar.jatimprov.go.id/v2/'

// Function to navigate to external hospital profile site
const goToHospitalProfile = (): void => {
  window.open(HOSPITAL_PROFILE_URL, '_blank')
}

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

// Custom login handler (pointing to Keycloak SSO logic)
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
    }
  }
}

// Copy contact information to clipboard
const copyContactInfo = async (): Promise<void> => {
  // Updated contact info block from user's provided code
  const contactInfo = `
IT Support RSSA
Telepon: (0341) 343343 ext. 1234
Email: it-support@rssa.malang.go.id
Jam Operasional: Senin - Jumat, 07:00 - 15:00
  `.trim()
  
  try {
    // Use the Clipboard API
    await navigator.clipboard.writeText(contactInfo)
    successMessage.value = 'Informasi kontak berhasil disalin!'
    showAdminContact.value = false
    
    // Clear the success message after a short delay
    setTimeout(() => {
      successMessage.value = ''
    }, 3000)
  } catch (error) {
    console.error('Failed to copy contact info:', error)
    // Fallback or simple alert for error
    errorMessage.value = 'Gagal menyalin informasi kontak. Silakan coba salin manual.'
    
    setTimeout(() => {
      errorMessage.value = ''
    }, 3000)
  }
}
</script>

<style scoped src="~/assets/styles/loginpage/login.scss"></style>