<template>
  <v-container>
    <v-form @submit.prevent="resetPassword">
      <v-text-field
        v-model="email"
        label="Digite seu e-mail"
        type="email"
        required
        :rules="[emailRules.required, emailRules.email]"
      ></v-text-field>
      
      <v-btn color="primary" type="submit" :loading="isLoading" :disabled="isLoading || !isFormValid">Redefinir Senha</v-btn>
      
      <v-alert v-if="errorMessage" type="error" dismissible>{{ errorMessage }}</v-alert>
      <v-alert v-if="successMessage" type="success" dismissible>{{ successMessage }}</v-alert>
    </v-form>
  </v-container>
</template>

<script>
import { ref, computed } from "vue";
import authService from "@/services/authservice";  // importa o serviço de autenticação

export default {
  setup() {
    const email = ref("");  // Define o estado reativo para o e-mail
    const isLoading = ref(false);  // Indica se o processo está carregando
    const errorMessage = ref("");  // Mensagem de erro, se ocorrer
    const successMessage = ref("");  // Mensagem de sucesso

    // Regras de validação para o campo de e-mail
    const emailRules = {
      required: value => !!value || "E-mail é obrigatório",
      email: value => /.+@.+\..+/.test(value) || "E-mail inválido"
    };

    // Verifica se o formulário é válido
    const isFormValid = computed(() => {
      return emailRules.required(email.value) === true && emailRules.email(email.value) === true;
    });

    // Função para redefinir a senha
    const resetPassword = async () => {
      if (!isFormValid.value) return;

      isLoading.value = true;
      errorMessage.value = "";  // Limpa mensagens de erro antes de tentar
      successMessage.value = "";  // Limpa mensagens de sucesso

      try {
        const response = await authService.recoverPassword(email.value);  // Chama o serviço para recuperação de senha
        successMessage.value = "E-mail enviado com sucesso. Verifique sua caixa de entrada.";  // Mensagem de sucesso
        console.log("E-mail enviado", response);  // Log do sucesso
      } catch (error) {
        errorMessage.value = "Erro ao tentar recuperar senha. Tente novamente.";  // Mensagem de erro
        console.error("Erro ao tentar recuperar senha", error);  // Log do erro
      } finally {
        isLoading.value = false;  // Finaliza o estado de carregamento
      }
    };

    return {
      email,
      resetPassword,
      emailRules,
      isLoading,
      isFormValid,
      errorMessage,
      successMessage
    };
  }
};
</script>

<style scoped>
/* Estilos personalizados */
.v-container {
  max-width: 400px;
  margin: 0 auto;
  padding: 20px;
}
v-text-field {
  width: 100%;
  margin-bottom: 10px;
}
v-btn {
  width: 100%;
}
v-alert {
  margin-top: 10px;
}
</style>
