<template>
  <div class="auth-page">
    <div class="auth-container">
      <div class="auth-card">
        <div class="card">
          <div class="card-header text-center">
            <h1 class="auth-title">Регистрация</h1>
          </div>
          
          <div class="card-body">
            <form @submit.prevent="handleSubmit" class="auth-form">
              <div class="form-group">
                <label class="form-label">Имя</label>
                <input 
                  v-model="form.name"
                  type="text" 
                  class="form-input"
                  placeholder="Ваше имя"
                  required
                >
              </div>

              <div class="form-group">
                <label class="form-label">Email</label>
                <input 
                  v-model="form.email"
                  type="email" 
                  class="form-input"
                  placeholder="your@email.com"
                  required
                >
              </div>
              
              <div class="form-group">
                <label class="form-label">Пароль</label>
                <input 
                  v-model="form.password"
                  type="password" 
                  class="form-input"
                  placeholder="Придумайте пароль"
                  required
                >
              </div>

              <div class="form-group">
                <label class="form-label">Подтверждение пароля</label>
                <input 
                  v-model="form.passwordConfirm"
                  type="password" 
                  class="form-input"
                  placeholder="Повторите пароль"
                  required
                >
              </div>
              
              <button type="submit" class="btn btn-primary auth-button">
                Зарегистрироваться
              </button>
            </form>
          </div>
          
          <div class="card-footer text-center">
            <p class="auth-footer-text">
              Уже есть аккаунт? 
              <NuxtLink to="/auth/login" class="auth-link">
                Войдите
              </NuxtLink>
            </p>
            <NuxtLink to="/" class="auth-link home-link">
              ← На главную
            </NuxtLink>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
const form = ref({
  name: '',
  email: '',
  password: '',
  passwordConfirm: ''
})

const handleSubmit = () => {
  if (form.value.password !== form.value.passwordConfirm) {
    alert('Пароли не совпадают')
    return
  }
  
  // В демо-режиме просто переходим в профиль
  alert('Демо-режим: регистрация выполнена')
  navigateTo('/profile')
}
</script>

<style scoped>
.auth-page {
  min-height: 100vh;
  background: var(--bg-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
}

.auth-container {
  width: 100%;
  max-width: 400px;
}

.auth-card {
  width: 100%;
}

.auth-title {
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 0.5rem;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.auth-button {
  width: 100%;
  margin-top: 0.5rem;
}

.auth-footer-text {
  color: var(--text-secondary);
  margin-bottom: 1rem;
}

.auth-link {
  color: var(--primary-600);
  font-weight: 500;
  text-decoration: none;
}

.auth-link:hover {
  color: var(--primary-700);
}

.home-link {
  display: inline-block;
  margin-top: 0.5rem;
}
</style>