<template>
  <UDrawer v-model:open="showTherms" :overlay="false">
    <template #body>
      <component :is="TermsComponent" />
    </template>
    <template #footer>
      <UButton @click="showTherms = false" class="mx-auto px-12">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">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">
      <UForm :validate="validate" @submit="handleRegister" class="flex flex-col gap-3">
        <UAlert v-if="authStore.error" color="error" variant="subtle" icon="i-heroicons-exclamation-triangle"
          :title="authStore.error" :close-button="{ icon: 'i-heroicons-x-mark-20-solid', variant: 'link' }"
          @close="authStore.clearError" />

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

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

        <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')" :disabled="authStore.loading"
            class="w-full dark:text-white text-black placeholder:text-(--placeholder)" :type="showPassword ? 'text' : 'password'"
            :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>

        <UFormField :label="$t('general.confirm_password')" name="confirm_password" required
          class="w-full dark:text-white text-black">
          <UInput v-model="confirm_password_ref" :type="showConfirmPassword ? 'text' : 'password'"
            class="w-full dark:text-white text-black placeholder:text-(--placeholder)" :placeholder="$t('general.confirm_your_password')"
            :disabled="authStore.loading" :ui="{ trailing: 'pe-1' }">
            <template #trailing>
              <UIcon color="neutral" variant="ghost" size="sm"
                :name="showConfirmPassword ? 'i-lucide-eye-off' : 'i-lucide-eye'"
                @click="showConfirmPassword = !showConfirmPassword" class="mr-2"/>
            </template>
          </UInput>
        </UFormField>

        <UCheckbox v-model="acceptTerms" class="label mb-3">
          <template #label>
            <span class="dark:text-white text-black">
              {{ $t('general.i_agree_to_the') }}
              <span @click="showTherms = !showTherms"
                class="cursor-pointer underline text-(--accent-blue-light) dark:text-(--accent-blue-dark)">{{
                  $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)">{{
                  $t('general.privacy_policy')
                }}</span>
            </span>
          </template>
        </UCheckbox>

        <UButton type="submit" block :loading="authStore.loading" :disabled="!acceptTerms"
          class="text-white  bg-(--accent-blue-light) dark:bg-(--accent-blue-dark) cursor-pointer">
          {{ $t('general.create_account') }}
        </UButton>

        <div class="text-center flex flex-col gap-3 border-t dark:border-(--border-dark) border-(--border-light) pt-4">
          <p class="dark:text-white text-black">
            {{ $t('general.already_have_an_account') }}
          </p>
          <UButton color="neutral" variant="outline" :loading="authStore.loading"
            class="w-full flex justify-center dark:text-white hover:text-white cursor-pointer hover:bg-(--accent-blue-light) dark:hover:bg-(--accent-blue-dark) border border-(--border-light)! dark:border-(--border-dark)!"
            @click="goToLogin">{{ $t('general.sign_in') }}</UButton>
        </div>
      </UForm>
    </div>
  </div>
</template>

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

const { locale } = useI18n()
const router = useRouter()
const authStore = useAuthStore()
const acceptTerms = ref(false)
const showConfirmPassword = ref(false)
const showPassword = ref(false)
const validation = useValidation()

const first_name = ref('')
const last_name = ref('')
const email = ref('')
const password = ref('')
const confirm_password_ref = ref('')

async function handleRegister() {
  const result = await authStore.register(first_name.value, last_name.value, email.value, password.value, confirm_password_ref.value, locale.value)
  if (result?.success) {
    router.push({ name: 'login', query: { registered: 'true' } })
  }
}

function goToLogin() {
  router.push({ name: 'login' })
}

function validate(): FormError[] {
  validation.reset()
  validation.validateFirstName(first_name, 'first_name', i18n.t('validate_error.first_name_required'))
  validation.validateLastName(last_name, 'last_name', i18n.t('validate_error.last_name_required'))
  validation.validateEmail(email, 'email', i18n.t('validate_error.email_required'))
  validation.validatePasswords(password, 'password', confirm_password_ref, 'confirm_password', i18n.t('validate_error.confirm_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>
