<template>
  <h1>Login</h1>

  <v-form ref="loginForm" @submit.prevent="onSubmit">
    <v-text-field
      v-model="username"
      label="Usuario"
      :rules="[requiredRule]"
      required
    />
    <v-text-field
      v-model="password"
      label="Contraseña"
      type="password"
      :rules="[requiredRule]"
      required
    />

    <v-btn type="submit" color="primary">Entrar</v-btn>

    <v-alert v-if="error" type="error" class="mt-2">{{ error }}</v-alert>
  </v-form>
</template>

<script>
  import AuthService from '@/services/auth';

  export default {
    name: 'DonConfiao',

    data() {
      return {
        username: '',
        password: '',
        error: '',
      };
    },

    methods: {
      requiredRule(value) {
        return !!value || 'Este campo es obligatorio';
      },

      async onSubmit() {
        this.error = '';

        const form = this.$refs.loginForm;
        const isValid = await form.validate();

        if (!isValid) return;

        if (!this.username || !this.password) {
          this.error = 'Usuario y contraseña son obligatorios';
          return;
        }

        try {
          await AuthService.login({
            username: this.username,
            password: this.password,
          });
          this.$router.push({ path: '/' });
        } catch (e) {
          // Si el servicio devuelve un error (ej. 401) lo convertimos en excepción
          const msg = e?.response?.data?.message ?? e.message;
          this.error = msg ?? 'Error al iniciar sesión';
        }
      },
    },
  };
</script>
