<template>
  <div class="container mt-5">
    <div class="row justify-content-center">
      <div class="col-md-6">
        <div class="card">
          <div class="card-header text-center">
            <h2>Вход в аккаунт</h2>
          </div>
          <div class="card-body">
            <form @submit.prevent="handleLogin">
              <div class="mb-3">
                <label for="email" class="form-label">Email:</label>
                <input type="email" class="form-control" id="email" v-model="email" required :disabled="loading" />
              </div>

              <div class="mb-3">
                <label for="password" class="form-label">Пароль:</label>
                <input type="password" class="form-control" id="password" v-model="password" required :disabled="loading" />
              </div>

              <div v-if="errorMessage" class="alert alert-danger" role="alert">
                {{ errorMessage }}
              </div>

              <button type="submit" class="btn btn-primary w-100" :disabled="loading">
                <span v-if="loading" class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
                {{ loading ? 'Вход...' : 'Войти' }}
              </button>
            </form>
          </div>
          <div class="card-footer text-center">
            <p class="mb-0">
              Нет аккаунта? <router-link to="/register">Зарегистрироваться</router-link>
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
// Не используем useRouter напрямую для перенаправления, так как это делает функция login
// import { useRouter } from 'vue-router'; 
import { useAuth } from '@/auth'; // Импортируем наш auth composable

const email = ref('');
const password = ref('');
const errorMessage = ref('');
const loading = ref(false); // Для отображения состояния загрузки

const { login } = useAuth(); // Получаем функцию login
// const router = useRouter(); // Если бы перенаправляли вручную

const handleLogin = async () => {
  errorMessage.value = ''; // Сбрасываем предыдущие ошибки
  loading.value = true; // Устанавливаем флаг загрузки

  if (!email.value || !password.value) {
    errorMessage.value = 'Пожалуйста, введите email и пароль.';
    loading.value = false;
    return;
  }

  try {
    await login({ email: email.value, password: password.value });
    // Перенаправление теперь происходит внутри функции login в auth.js
    // Если login завершился успешно, пользователь будет перенаправлен.
    // Если была ошибка, она будет поймана в catch блоке ниже.
    // Очищать поля здесь не нужно, так как будет перенаправление.
  } catch (error) {
    // error.message здесь будет содержать сообщение из throw в функции login в auth.js
    errorMessage.value = error.message || 'Произошла неизвестная ошибка при входе.';
  } finally {
    loading.value = false; // Снимаем флаг загрузки в любом случае
  }
};
</script>

<style scoped>
/* Стили Bootstrap уже должны применяться глобально */
/* Можно добавить свои специфичные стили, если нужно */
</style>