<script setup>
import { VForm } from 'vuetify/components/VForm'
import bklogin from '@images/pages/bk-login.svg'
import { useAlert } from '@/composables/useAlert'
const { setAlert } = useAlert()

const route = useRoute()
const router = useRouter()

const form = ref({
  fullName: '',
  email: '',
  telefone: '',
  cpf: '',
  endereco: {
    cep: '',
    street: '',
    number: '',
    complement: '',
    neighborhood: '',
    city: '',
    state: '',
  },
  password: '',
  confirmPassword: '',
  privacyPolicies: false,
})

if(route.query.data) {
  const data = JSON.parse(atob(route.query.data))
  form.value.email = data.email
  form.value.fullName = data.name

  console.log('Data: ', data)
}

const estados = [
  { value: 'AC', text: 'Acre' },
  { value: 'AL', text: 'Alagoas' },
  { value: 'AP', text: 'Amapá' },
  { value: 'AM', text: 'Amazonas' },
  { value: 'BA', text: 'Bahia' },
  { value: 'CE', text: 'Ceará' },
  { value: 'DF', text: 'Distrito Federal' },
  { value: 'ES', text: 'Espírito Santo' },
  { value: 'GO', text: 'Goiás' },
  { value: 'MA', text: 'Maranhão' },
  { value: 'MT', text: 'Mato Grosso' },
  { value: 'MS', text: 'Mato Grosso do Sul' },
  { value: 'MG', text: 'Minas Gerais' },
  { value: 'PA', text: 'Pará' },
  { value: 'PB', text: 'Paraíba' },
  { value: 'PR', text: 'Paraná' },
  { value: 'PE', text: 'Pernambuco' },
  { value: 'PI', text: 'Piauí' },
  { value: 'RJ', text: 'Rio de Janeiro' },
  { value: 'RN', text: 'Rio Grande do Norte' },
  { value: 'RS', text: 'Rio Grande do Sul' },
  { value: 'RO', text: 'Rondônia' },
  { value: 'RR', text: 'Roraima' },
  { value: 'SC', text: 'Santa Catarina' },
  { value: 'SP', text: 'São Paulo' },
  { value: 'SE', text: 'Sergipe' },
  { value: 'TO', text: 'Tocantins' },
]

const cidades = ref([])

const cidadesList = async (estado) => {
  if (!estado) {
    estado = 'RJ'
  }

  try {
    const res = await $api(`/users/cidades/${estado}`, { method: "GET" });

    if (!res) return;

    //console.log(res)
    cidades.value = res

  } catch (error) {
    console.error('Erro ao buscar cidades: ', error);
    console.error('Erro ao buscar cidades: ', error.response);
  }
}

const getCep = async () => {
  console.log('CEP: ', form.value.endereco.cep)
  if (!form.value.endereco.cep) return

  if (form.value.endereco.cep.length >= 8) {
    try {
      const res = await $api(`/users/cep/${form.value.endereco.cep}`, { method: "GET" });

      if (!res) return

      console.log(res)

      form.value.endereco.cep = res.cep

      form.value.endereco.street = res.logradouro
      form.value.endereco.neighborhood = res.bairro

      form.value.endereco.state = res.uf
      await cidadesList(res.uf)

      form.value.endereco.city = res.localidade

    } catch (error) {
      console.error('Erro ao buscar CEP: ', error);
      console.error('Erro ao buscar CEP: ', error.response);
      setAlert('CEP não encontrado! Tente novamente.', 'error', 'tabler-alert-triangle', 4000)
    }
  }
}

const confirmPasswordValidator = (value) => {
  if (value !== form.value.password) {
    return 'As senhas não coincidem'
  }
  return true
}



const isPasswordVisible = ref(false)
const ability = useAbility()
const loading = ref(false)

const refVForm = ref()

const register = async () => {

  if (!form.value.privacyPolicies) {
    setAlert('Você precisa aceitar os termos de uso e condições e a política de privacidade.', 'error', 'tabler-alert-triangle', 5000)
    return
  }

  if (!form.value.fullName || !form.value.email || !form.value.telefone || !form.value.cpf || !form.value.endereco.cep
    || !form.value.endereco.street || !form.value.endereco.number || !form.value.endereco.neighborhood || !form.value.endereco.city
    || !form.value.endereco.state || !form.value.password || !form.value.confirmPassword) {
    setAlert('Preencha todos os campos obrigatórios.', 'error', 'tabler-alert-triangle', 5000)
    return
  }

  if (form.value.password !== form.value.confirmPassword) {
    setAlert('As senhas não coincidem.', 'error', 'tabler-alert-triangle', 5000)
    return
  }

  if (!form.value.email.includes('@') || !form.value.email.includes('.')) {
    setAlert('Email inválido.', 'error', 'tabler-alert-triangle', 5000)
    return
  }

  if (form.value.endereco.state !== 'RJ') {
    setAlert('No momento estamos apenas no estado do Rio de Janeiro, em breve chegaremos em sua cidade!', 'error', 'tabler-alert-triangle', 5000)
    return
  }

  try {
    const res = await $api('/conta/register', {
      method: 'POST',
      body: {
        fullName: form.value.fullName,
        email: form.value.email,
        telefone: form.value.telefone,
        cpf: form.value.cpf,
        endereco: form.value.endereco,
        password: form.value.password,
      },
    })

    console.log('Register Response: ', res)

    const { accessToken, userData, userAbilityRules } = res.response

    const userAbilityRulesJSON = JSON.parse(userAbilityRules)

    console.log('userAbilityRules', userAbilityRules)

    ability.update(userAbilityRulesJSON)

    console.log(ability)

    useCookie('accessToken').value = accessToken
    useCookie('userData').value = userData

    const cookieOptions = {
      maxAge: 25 * 24 * 60 * 60
    }

    useCookie('userData', cookieOptions).value = userData;
    useCookie('userAbilityRules', cookieOptions).value = userAbilityRulesJSON
    useCookie('accessToken', cookieOptions).value = accessToken;

    setAlert('Cadastro realizado com sucesso! Você será redirecionado...', 'success', 'tabler-check', 5000)

    await nextTick(() => {
      router.replace(route.query.next ? String(route.query.next) : '/')
    })
  } catch (error) {
    console.error('Register Error: ', error)
    console.log('Register Error: ', error.response)
    let errorData = error.response._data

    if (errorData) {
      setAlert(errorData, 'error', 'tabler-alert-triangle', 5000)
    } else {
      setAlert('Erro ao fazer cadastro. Tente novamente mais tarde.', 'error', 'tabler-alert-triangle', 5000)
    }

  }
}

const onSubmit = () => {
  refVForm.value?.validate().then(({ valid: isValid }) => {
    if (isValid)
      register()
  })
}
console.log('teste: ')
</script>

<template>
  <VRow no-gutters class="auth-wrapper bg-surface justify-center align-center bk-login-register">

    <VCol cols="12" lg="4" class="auth-card-v2 d-flex align-center justify-center flex-wrap"
      style="background-color: white; border-radius: 10px;">
      <VCard flat :max-width="500" class="pa-4">
        <VCardText class="text-center pt-0">

          <img src="@images/logo.png" alt="logo" style="width: 120px; max-width: 120px; height: auto;">

          <h4 class="text-h4 mb-2">
            Bem vindo ao AkkiPerto!
          </h4>
          <p class="mb-0">
            Para seguir com seu cadastro basta preencher os dados abaixo
          </p>
        </VCardText>

        <VCardText>
          <VForm ref="refVForm" @submit.prevent="onSubmit">
            <VRow>
              <!-- Nome -->
              <VCol cols="12">
                <AppTextField v-model="form.fullName" :rules="[requiredValidator]" label="Nome"
                  placeholder="Insira o seu nome" required />
              </VCol>

              <!-- email -->
              <VCol cols="12">
                <AppTextField v-model="form.email" :rules="[requiredValidator, emailValidator]" label="Email"
                  type="email" placeholder="Insira seu email" />
              </VCol>

              <!-- telefone -->
              <VCol cols="12">
                <AppTextField v-model="form.telefone" :rules="[requiredValidator]" label="Telefone"
                  placeholder="(00) 00000-0000" v-mask="'(##) #####-####'" />
              </VCol>

              <VCol cols="12">
                <p class="mb-0 font-weight-bold">
                  <VIcon icon="tabler-lock" class="mr-1" />
                  Crie sua senha
                </p>
              </VCol>


              <!-- password -->
              <VCol cols="12">
                <AppTextField v-model="form.password" :rules="[requiredValidator]" label="Senha"
                  placeholder="············" :type="isPasswordVisible ? 'text' : 'password'"
                  :append-inner-icon="isPasswordVisible ? 'tabler-eye-off' : 'tabler-eye'"
                  @click:append-inner="isPasswordVisible = !isPasswordVisible" />
              </VCol>

              <VCol cols="12">
                <AppTextField v-model="form.confirmPassword" :rules="[requiredValidator, confirmPasswordValidator]"
                  label="Confirme sua Senha" placeholder="············" :type="isPasswordVisible ? 'text' : 'password'"
                  :append-inner-icon="isPasswordVisible ? 'tabler-eye-off' : 'tabler-eye'"
                  @click:append-inner="isPasswordVisible = !isPasswordVisible" />

              </VCol>

              <VCol cols="12">
                <div class="d-flex align-center mt-2 mb-4">
                  <VCheckbox id="privacy-policy" v-model="form.privacyPolicies" inline aria-checked="true" />
                  <VLabel for="privacy-policy" style="opacity: 1;">
                    <span class="me-1">Eu aceito os</span>
                    <a href="/termos-de-uso" class="text-primary mr-1">termos de uso</a>
                    <span class="me-1">e a</span>
                    <a href="/politica-de-privacidade" class="text-primary">política de privacidade.</a>
                  </VLabel>
                </div>

                <VBtn block type="submit">
                  Cadastrar
                </VBtn>
              </VCol>

              <!-- create account -->
              <VCol cols="12" class="text-center text-base">
                <span>Já tem uma conta?</span>
                <RouterLink class="text-primary ms-2" :to="{ name: 'login' }">
                  Faça login
                </RouterLink>
              </VCol>
            </VRow>
          </VForm>
        </VCardText>
      </VCard>
    </VCol>
  </VRow>
</template>

<style lang="scss">
@use "@core/scss/template/pages/page-auth.scss";
</style>
