<template>
  <div class="max-w-md mx-auto mt-10 p-8 bg-white rounded-2xl shadow-xl">
    <h2 class="text-2xl font-bold mb-6 text-center">Új Széf létrehozása</h2>
    <form @submit.prevent="handleRegister" class="space-y-4">
      <input v-model="form.first_name" type="text" placeholder="Keresztnév" required class="w-full p-3 border rounded-lg" />
      <input v-model="form.last_name" type="text" placeholder="Vezetéknév" required class="w-full p-3 border rounded-lg" />
      <input v-model="form.email" type="email" placeholder="E-mail" required class="w-full p-3 border rounded-lg" />
      <input v-model="form.password" type="password" placeholder="Jelszó" required class="w-full p-3 border rounded-lg" />
      <button class="w-full bg-green-600 text-white py-3 rounded-lg font-bold hover:bg-green-700 transition">Fiók létrehozása</button>
    </form>
    <p v-if="msg" class="mt-4 text-center font-medium text-green-600">{{ msg }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import axios from 'axios'

const form = ref({ email: '', password: '', first_name: '', last_name: '' })
const msg = ref('')

const handleRegister = async () => {
  msg.value = ""; // Üzenet alaphelyzetbe
  try {
    const res = await axios.post(`http://192.168.100.43:8000/api/v2/auth/register`, null, { params: form.value });
    msg.value = "Sikeres regisztráció! Kérlek aktiváld az e-mailedet.";
  } catch (err) {
    // ITT A JAVÍTÁS: kiolvassuk a backend hibaüzenetét
    if (err.response && err.response.data && err.response.data.detail) {
      msg.value = "Hiba: " + err.response.data.detail;
    } else {
      msg.value = "Hiba történt a regisztráció során.";
    }
  }
}
</script>