<script setup lang="ts">
definePageMeta({
  auth: false
})

const { signIn, status } = useAuth()

const isLoading = ref(false)
const isAuthenticated = computed(() => status.value === 'authenticated')

watch(isAuthenticated, (authenticated) => {
  if (authenticated) {
    navigateTo('/')
  }
})

async function loginWithZitadel() {
  try {
    isLoading.value = true
    await signIn('zitadel', { callbackUrl: '/' })
  } catch (error) {
    console.error('Login failed:', error)
    isLoading.value = false
  }
}
</script>

<template>
  <div class="min-h-screen flex items-center justify-center" style="background: var(--page-bg);">
    <div class="w-full max-w-md p-8 rounded-xl border" style="background: var(--surface); border-color: var(--card-border);">
      <div class="text-center mb-8">
        <h1 class="text-2xl font-semibold" style="color: var(--text-primary);">
          Welcome to Segur-OS
        </h1>
        <p class="mt-2 text-sm" style="color: var(--text-muted);">
          Sign in to access your insurance management dashboard
        </p>
      </div>

      <button
        type="button"
        :disabled="isLoading"
        @click="loginWithZitadel"
        class="w-full flex items-center justify-center gap-3 px-4 py-3 rounded-lg font-medium transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
        style="background: var(--brand); color: white;"
      >
        <UIcon v-if="isLoading" name="i-heroicons-arrow-path" class="h-5 w-5 animate-spin" />
        <UIcon v-else name="i-heroicons-lock-closed" class="h-5 w-5" />
        <span>{{ isLoading ? 'Signing in...' : 'Sign in with CorredorConect ID' }}</span>
      </button>

      <div class="mt-6 text-center text-xs" style="color: var(--text-muted);">
        <p>Secure authentication powered by CorredorConect ID</p>
      </div>
    </div>
  </div>
</template>
