<template>
  <div class="container mt-5">
    <div class="row justify-content-center">
      <div class="col-md-8">
        <div class="text-center p-5 rounded-3 bg-light shadow-sm">
          <template v-if="isAuthenticated">
            <h1 class="display-4 fw-bold mb-3">С возвращением, {{ user?.name || 'Пользователь' }}!</h1>
            <p class="lead mb-4">
              Готов продолжить поиск своей второй половинки?
            </p>
            <hr class="my-4" />
            <p>
              Перейди в свой <router-link to="/profile">профиль</router-link> или начни <router-link to="/swipe">поиск</router-link>! (Ссылка на свайпы пока не работает)
            </p>
            <!-- Можно добавить еще кнопки или информацию для залогиненного пользователя -->
          </template>
          <template v-else>
            <h1 class="display-4 fw-bold mb-3">Добро пожаловать в Dating App!</h1>
            <p class="lead mb-4">
              Найди свою вторую половинку уже сегодня. Присоединяйся к нашему
              дружелюбному сообществу.
            </p>
            <hr class="my-4" />
            <p>
              Это главная страница нашего замечательного приложения. Готов начать?
            </p>
            <div class="d-grid gap-2 d-sm-flex justify-content-sm-center mt-4">
              <router-link to="/login" class="btn btn-outline-primary btn-lg px-4 gap-3">
                Войти
              </router-link>
              <router-link to="/register" class="btn btn-success btn-lg px-4">
                Зарегистрироваться
              </router-link>
            </div>
          </template>
        </div>
      </div>
    </div>
    <!-- ... секция с фичами (можно оставить или убрать) ... -->
  </div>
</template>

<script setup>
import { useAuth } from '@/auth'; // Импортируем наш auth composable
import { onMounted } from 'vue'; // Добавляем импорт onMounted

const { user, isAuthenticated, fetchUser } = useAuth(); // Добавляем fetchUser

// Обновляем данные пользователя при монтировании компонента
onMounted(async () => {
  if (localStorage.getItem('userToken')) {
    // Если в localStorage есть токен, пробуем загрузить данные пользователя
    await fetchUser();
    console.log('HomeView: Состояние аутентификации:', isAuthenticated.value);
    console.log('HomeView: Пользователь:', user.value);
  }
});

// Если нужна какая-то специфическая логика для главной страницы, можно добавить здесь.
// Например, если пользователь аутентифицирован, можно было бы сразу перенаправлять
// на другую страницу, но это зависит от желаемого UX.
// import { useRouter } from 'vue-router';
// const router = useRouter();
// onMounted(() => {
//   if (isAuthenticated.value) {
//     // router.push('/swipe'); // Например, на страницу свайпов
//   }
// });
</script>

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