<script setup lang="ts">
import { computed, defineAsyncComponent, ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useAuthStore } from '@/stores/auth'
import { useValidation } from '@/composable/useValidation'
import type { FormError } from '@nuxt/ui'
import { i18n } from '@/plugins/02_i18n'
import Empty from '@/layouts/empty.vue'

const router = useRouter()
const route = useRoute()
const authStore = useAuthStore()
const email = ref('')
const password = ref('')
const showPassword = ref(false)
const validation = useValidation()

async function handleLogin() {
  const success = await authStore.login(email.value, password.value)
  if (success) {
    const redirectTo = route.query.redirect as string
    router.push(redirectTo || { name: 'home' })
  }
}

function goToRegister() {
  router.push({ name: 'register' })
}

function goToPasswordRecovery() {
  router.push({ name: 'password-recovery' })
}

function validate(): FormError[] {
  validation.reset()
  validation.validateEmail(email, 'email', i18n.t('validate_error.email_required'))
  if (!password.value) {
    validation.errors.push({ name: 'password', message: i18n.t('validate_error.password_required') })
  }
  return validation.errors
}

const showTherms = ref(false)
const showPrivacy = ref(false)
const TermsComponent = computed(() =>
  defineAsyncComponent(() =>
    import(`@/components/terms/${i18n.locale.value}_TermsAndConditionsView.vue`).catch(() => import('@/components/terms/en_TermsAndConditionsView.vue')),
  ),
)
const PrivacyComponent = computed(() =>
  defineAsyncComponent(() =>
    import(`@/components/terms/${i18n.locale.value}_PrivacyPolicyView.vue`).catch(() => import('@/components/terms/en_PrivacyPolicyView.vue')),
  ),
)

</script>

<template>
<component :is="Empty || 'div'">
  <UDrawer v-model:open="showTherms" :overlay="false">
    <template #body>
      <component :is="TermsComponent" />
    </template>
    <template #footer>
      <UButton @click="showTherms = false" class="mx-auto px-12">{{ $t('general.close') }}</UButton>
    </template>
  </UDrawer>
  <!-- PrivacyPolicyView -->
  <UDrawer v-model:open="showPrivacy" :overlay="false">
    <template #body>
      <component :is="PrivacyComponent" />
    </template>
    <template #footer>
      <UButton @click="showPrivacy = false" class="mx-auto px-12">{{ $t('general.close') }}</UButton>
    </template>
  </UDrawer>
  <div class="h-[100vh] flex flex-col items-center justify-center px-4 sm:px-6 lg:px-8">
    <div class="text-center mb-15">
      <div
        class="inline-flex items-center justify-center w-16 h-16 rounded-2xl bg-primary-500 text-white mb-4 shadow-lg shadow-primary-500/30">
        <UIcon name="i-heroicons-clock" class="w-8 h-8" />
      </div>
      <h1 class="text-3xl font-bold text-gray-900 dark:text-white">TimeTracker</h1>
    </div>
    <div class="w-full max-w-md flex flex-col gap-4">
      <UForm :validate="validate" @submit="handleLogin" class="space-y-5">
        <UAlert v-if="authStore.error" color="error" variant="subtle" :title="authStore.error"
          :close-button="{ icon: 'i-heroicons-x-mark-20-solid', color: 'gray', variant: 'link' }"
          @close="authStore.clearError" />

        <UFormField :label="$t('general.email_address')" name="email" required
          class="w-full dark:text-white text-black">
          <UInput v-model="email" :placeholder="$t('general.enter_your_email')" :disabled="authStore.loading"
            class="w-full dark:text-white text-black placeholder:text-(--placeholder)" />
        </UFormField>

        <UFormField :label="$t('general.password')" name="password" required class="w-full dark:text-white text-black">
          <UInput v-model="password" :placeholder="$t('general.enter_your_password')"
            :type="showPassword ? 'text' : 'password'" class="w-full placeholder:text-(--placeholder)" :ui="{ trailing: 'pe-1' }">
            <template #trailing>
              <UIcon color="neutral" variant="link" size="sm" :name="showPassword ? 'i-lucide-eye-off' : 'i-lucide-eye'"
                :aria-label="showPassword ? 'Hide password' : 'Show password'" :aria-pressed="showPassword"
                aria-controls="password" @click="showPassword = !showPassword" class="mr-2"/>
            </template>
          </UInput>
        </UFormField>

        <div class="flex items-center justify-between w-full dark:text-white text-black">
          <button variant="link" size="sm" @click="goToPasswordRecovery"
            class="text-[15px] w-full flex justify-end text-(--accent-blue-light) dark:text-(--accent-blue-dark) cursor-pointer">
            {{ $t('general.forgot_password') }}?
          </button>
        </div>
        <UButton type="submit" :loading="authStore.loading"
          class="w-full flex justify-center text-white bg-(--accent-blue-light) dark:bg-(--accent-blue-dark) cursor-pointer">
          {{ $t('general.sign_in') }}
        </UButton>
      </UForm>

      <!-- Divider -->
      <div class="flex items-center gap-3 my-1">
        <div class="flex-1 h-px bg-gray-200 dark:dark:hover:bg-(--gray-dark)" />
        <span class="text-xs text-gray-400 dark:text-gray-500">{{ $t('general.or') }}</span>
        <div class="flex-1 h-px bg-gray-200 dark:dark:hover:bg-(--gray-dark)" />
      </div>

      <!-- Google Sign In -->
      <UButton type="button" color="neutral" variant="outline" size="lg" block :disabled="authStore.loading"
        @click="authStore.loginWithGoogle()"
        class="flex items-center justify-center gap-2 dark:text-white text-black cursor-pointer">
        <svg class="w-5 h-5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path
            d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
            fill="#4285F4" />
          <path
            d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
            fill="#34A853" />
          <path
            d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l3.66-2.84z"
            fill="#FBBC05" />
          <path
            d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
            fill="#EA4335" />
        </svg>
        {{ $t('general.continue_with_google') }}
      </UButton>

      <div class="text-center">
        <p class="dark:text-white text-black">
          {{ $t('general.dont_have_an_account') }}?
          <button variant="link" size="sm"
            class="text-[15px] text-(--accent-blue-light) dark:text-(--accent-blue-dark) cursor-pointer"
            @click="goToRegister">{{ $t('general.create_account_now') }}</button>
        </p>
      </div>
      <p class="mt-8 text-center text-xs dark:text-white text-black">
        {{ $t('general.by_signing_in_you_agree_to_our') }}
        <span @click="showTherms = !showTherms"
          class="cursor-pointer underline text-(--accent-blue-light) dark:text-(--accent-blue-dark) cursor-pointer">{{
            $t('general.terms_of_service') }}</span>
        {{ $t('general.and') }}
        <span @click="showPrivacy = !showPrivacy"
          class="cursor-pointer underline text-(--accent-blue-light) dark:text-(--accent-blue-dark) cursor-pointer">{{
            $t('general.privacy_policy') }}</span>
      </p>
    </div>
  </div>
  </component>
</template>
