<template>
  <div class="form-container">
    <h2>Registrieren</h2>
    <form @submit.prevent="handleRegister">
      <div class="form-group">
        <label for="username">Benutzername:</label>
        <input id="username" v-model="username" type="text" required />
      </div>

      <div class="form-group">
        <label for="email">Email:</label>
        <input id="email" v-model="email" type="email" required />
      </div>

      <div class="form-group">
        <label for="password">Passwort:</label>
        <input id="password" v-model="password" type="password" required />
      </div>

      <div class="form-group">
        <label for="confirmPassword">Passwort bestätigen:</label>
        <input id="confirmPassword" v-model="confirmPassword" type="password" required />
      </div>

      <button type="submit">Registrieren</button>
    </form>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const username = ref('')
const email = ref('')
const password = ref('')
const confirmPassword = ref('')

const handleRegister = () => {
  if (!username.value || !email.value || !password.value || !confirmPassword.value) {
    alert('Bitte alle Felder ausfüllen')
    return
  }
  if (password.value !== confirmPassword.value) {
    alert('Passwörter stimmen nicht überein')
    return
  }
  authClient.signUp.email(
    {
      email: email.value,
      password: password.value,
      name: username.value
    },
    {
      onRequest: (ctx) => {
        console.log('Sending register request', ctx)
      },
      onSuccess: (ctx) => {
        console.log('Successfully registered!')
      },
      onError: (ctx) => {
        console.log(ctx.error.message)
      }
    }
  )
}
</script>

<style scoped>
.form-container {
  max-width: 300px;
  margin: auto;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #f9f9f9;
}
.form-group {
  margin-bottom: 10px;
}
input {
  width: 100%;
  padding: 8px;
  margin-top: 4px;
}
button {
  width: 100%;
  padding: 10px;
  background: #28a745;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
button:hover {
  background: #218838;
}
</style>
