<template>
  <v-container class="login-container fill-height" fluid>
    <v-row no-gutters class="fill-height align-center justify-center">
      <v-col cols="12" md="10" class="d-flex align-center justify-center">
        <!-- Retângulo de fundo -->
        <div class="retangulo-box">
          <!-- Formulário (esquerda) -->
          <div class="login-form-box">
            <h2 class="title">Bem-vindo</h2>
            <p class="subtitle">Realize o login em sua conta</p>

            <v-form class="form" v-model="valid" ref="loginForm">
              <v-text-field
                v-model="email"
                label="E-mail"
                :rules="emailRules"
                required
                hide-details="auto"
                class="custom-field"
              ></v-text-field>

              <v-text-field
                v-model="password"
                label="Senha"
                :rules="passwordRules"
                @keyup.enter="login"
                type="password"
                required
                hide-details="auto"
                class="custom-field"
              ></v-text-field>

              <div class="text-right forgot-password">
                <a href="#">Esqueci a senha</a>
              </div>

              <v-btn
                block
                color="primary"
                class="login-btn"
                height="44"
                :disabled="!valid"
                @click="login"
              >
                Entrar
              </v-btn>
            </v-form>

            <div class="register-link">
              Não tem cadastro? <a href="#">Cadastre-se aqui</a>
            </div>
          </div>

          <!-- Círculo (direita) -->
          <div class="circle-container">
            <img src="/image.png" alt="Círculo" class="circle-img" />
          </div>
        </div>
      </v-col>
    </v-row>
  </v-container>
</template>

  
<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { useAuthStore } from '../stores/auth'; // Certifique-se de que o caminho da store está correto

const router = useRouter();
const authStore = useAuthStore();

const email = ref('');
const password = ref('');
const valid = ref(false);

const emailRules = [
  (v) => !!v || 'Preencha o campo', // Verifica se está preenchido
  (v) =>
    /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$/.test(v) || /^[a-zA-Z0-9_.-]+$/.test(v) || 
    'Insira um e-mail válido ou um nome de usuário', // Permite emails ou usernames simples
];

const passwordRules = [(v) => !!v || 'Preencha a senha'];

const login = async () => {
  try {
    await authStore.login(email.value, password.value); // Ação de login no Pinia
    router.push('/dashboard'); // Redireciona ao dashboard após login bem-sucedido
  } catch (error) {
    alert('Falha ao fazer login. Verifique suas credenciais.'); // Exibe erro em caso de falha
  }
};

</script>

  
  <style scoped>

.login-container {
  background: linear-gradient(135deg, #2d0f44, #23408e);
  color: #fff;
}

.retangulo-box {
  background-image: url('/image_ret.png');
  background-repeat: no-repeat;
  background-size: 110%;
  background-position: center;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 1200px;
  height: 600px;
  padding: 120px;
  box-sizing: border-box;
  position: relative;
}

.login-form-box {
  background-color: white;
  padding: 30px;
  border-radius: 20px;
  width: 100%;
  max-width: 360px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  color: #000;
}

.title {
  font-size: 28px;
  font-weight: bold;
  color: #4c9ff0;
  margin-bottom: 10px;
}

.subtitle {
  margin-bottom: 20px;
  color: #777;
}

.custom-field {
  margin-bottom: 20px;
}

.forgot-password {
  margin-bottom: 20px;
  font-size: 14px;
}

.login-btn {
  background: linear-gradient(to right, #86b6f6, #b8b4f7);
  color: white;
  font-weight: 600;
  text-transform: none;
  border-radius: 25px;
  margin-bottom: 15px;
}

.register-link {
  margin-top: 20px;
  font-size: 14px;
  color: #333;
}

.register-link a,
.forgot-password a {
  color: #4c9ff0;
  text-decoration: none;
}

.circle-container {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-left: 20px;
}

.circle-img {
  width: 100%;
  max-width: 320px;
  height: auto;
}

  </style>