<template>
  <div class="auth-page">
    <div class="navbar">
      <div class="navbar-inner">
        <div class="container">
          <AppBrand />
        </div>
      </div>
    </div>

    <div class="contents">
      <div class="auth-form-container">
        <h2>Registrieren</h2>
        
        <form @submit.prevent="handleRegister" class="auth-form">
          <div v-if="error" class="error-message">
            {{ error }}
          </div>

          <div v-if="success" class="success-message">
            {{ success }}
          </div>

          <div class="auth-form-group">
            <label for="full_name">Vollständiger Name</label>
            <input
              v-model="registerForm.full_name"
              type="text"
              id="full_name"
              class="form-input"
              required
            />
            <span class="info">Ihr vollständiger Name</span>
          </div>

          <div class="auth-form-group">
            <label for="email">E-Mail-Adresse</label>
            <input
              v-model="registerForm.email"
              type="email"
              id="email"
              class="form-input"
              required
            />
            <span class="info">Ihre E-Mail-Adresse</span>
          </div>

          <div class="auth-form-group">
            <label for="password">Passwort</label>
            <input
              v-model="registerForm.password"
              type="password"
              id="password"
              class="form-input"
              required
              minlength="6"
            />
            <span class="info">Mindestens 6 Zeichen</span>
          </div>

          <div class="auth-form-group">
            <label for="password_confirm">Passwort bestätigen</label>
            <input
              v-model="registerForm.password_confirm"
              type="password"
              id="password_confirm"
              class="form-input"
              required
            />
            <span class="info">Passwort wiederholen</span>
          </div>

          <div class="buttons">
            <button
              type="submit"
              class="btn btn-primary"
              :disabled="authStore.isLoading"
            >
              {{ authStore.isLoading ? 'Wird registriert...' : 'Registrieren' }}
            </button>
          </div>

          <div class="buttons">
            Bereits registriert?
            <router-link to="/login" class="link">Jetzt einloggen</router-link>
          </div>
        </form>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { useAuthStore } from '../stores/authStore'
import AppBrand from '../components/AppBrand.vue'

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

const registerForm = ref({
  full_name: '',
  email: '',
  password: '',
  password_confirm: ''
})

const error = ref('')
const success = ref('')

const handleRegister = async () => {
  try {
    error.value = ''
    success.value = ''

    if (registerForm.value.password !== registerForm.value.password_confirm) {
      error.value = 'Passwörter stimmen nicht überein'
      return
    }

    if (registerForm.value.password.length < 6) {
      error.value = 'Passwort muss mindestens 6 Zeichen lang sein'
      return
    }

    await authStore.register({
      full_name: registerForm.value.full_name,
      email: registerForm.value.email,
      password: registerForm.value.password
    })

    success.value = 'Registrierung erfolgreich! Sie werden weitergeleitet...'
    
    setTimeout(() => {
      router.push('/login')
    }, 2000)
  } catch (err) {
    error.value = err.message || 'Registrierung fehlgeschlagen'
  }
}
</script>

<style scoped>
.auth-page {
  min-height: 100vh;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  width: 100%;
}

.navbar {
  margin: 0;
}

.navbar-inner {
  background-image: none;
  background-color: #f0ffec;
  border-radius: 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  border-bottom: 1px solid #e0ffe0;
}

.contents {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 2rem;
}

.auth-form-container {
  width: 900px;
  background-color: white;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 2.5rem 3rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.auth-form-container h2 {
  text-align: center;
  background-color: #f5f5f5;
  padding: 0.75em;
  margin: -2.5rem -2.5rem 2rem -2.5rem;
  font-size: 1.6rem;
  font-weight: 500;
  border-radius: 8px 8px 0 0;
  border-bottom: 1px solid #e0e0e0;
}

.auth-form {
  padding: 0;
}

.auth-form-group {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
  gap: 1rem;
}

.auth-form-group label {
  width: 12em;
  line-height: 1.5;
  margin: 0;
  font-weight: 500;
  color: #333;
}

.auth-form-group input,
.auth-form-group select {
  flex: 1;
  line-height: 1.5;
  margin: 0;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.auth-form-group input:focus,
.auth-form-group select:focus {
  outline: none;
  border-color: #5bc0de;
  box-shadow: 0 0 0 3px rgba(91, 192, 222, 0.1);
}

.auth-form-group .info {
  display: none;
}

.form-input {
  flex: 1;
  min-width: 0;
}

.error-message {
  background-color: #f2dede;
  border: 1px solid #ebccd1;
  color: #a94442;
  padding: 0.75em;
  margin-bottom: 1em;
  border-radius: 4px;
}

.success-message {
  background-color: #dff0d8;
  border: 1px solid #d6e9c6;
  color: #3c763d;
  padding: 0.75em;
  margin-bottom: 1em;
  border-radius: 4px;
}

.buttons {
  margin-top: 1em;
  text-align: left;
  padding-left: 7em;
}

.buttons .btn {
  margin: 0 3px;
}

.link {
  color: #337ab7;
  text-decoration: none;
  cursor: pointer;
  padding: 0 0.5em;
}

.link:hover {
  text-decoration: underline;
  color: #23527c;
}
</style>
