<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>
    
    <!-- Registration Form (shown when not successful) -->
    <div v-if="!success">
      <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
          :disabled="loading"
          class="w-full bg-green-600 text-white py-3 rounded-lg font-bold hover:bg-green-700 transition disabled:opacity-50 disabled:cursor-not-allowed"
        >
          <span v-if="loading">Feldolgozás...</span>
          <span v-else>Fiók létrehozása</span>
        </button>
      </form>
      <p v-if="msg && !success" :class="['mt-4 text-center font-medium', isError ? 'text-red-600' : 'text-green-600']">{{ msg }}</p>
    </div>
    
    <!-- Success Card (shown after successful registration) -->
    <div v-else class="text-center">
      <div class="mb-6">
        <!-- Animated checkmark -->
        <div class="relative inline-flex items-center justify-center w-24 h-24">
          <div class="absolute inset-0 bg-green-100 rounded-full"></div>
          <svg class="relative w-16 h-16 text-green-600 animate-checkmark" viewBox="0 0 52 52">
            <circle class="stroke-current" cx="26" cy="26" r="25" fill="none" stroke-width="2"/>
            <path class="stroke-current" fill="none" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" d="M14.1 27.2l7.1 7.2 16.7-16.8"/>
          </svg>
        </div>
      </div>
      
      <h3 class="text-xl font-bold text-gray-800 mb-3">Sikeres regisztráció!</h3>
      <p class="text-gray-600 mb-6">
        Elküldtünk egy megerősítő e-mailt a(z) <span class="font-semibold">{{ form.email }}</span> címre.
        Kérjük, ellenőrizd a postaládádat és kattints a linkre a fiók aktiválásához.
      </p>
      
      <div class="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-6 text-left">
        <div class="flex items-start">
          <svg class="w-5 h-5 text-blue-500 mt-0.5 mr-3 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
            <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"/>
          </svg>
          <div>
            <p class="text-sm text-blue-800">
              <strong>Fontos:</strong> A megerősítő e-mail néhány perc múlva érkezhet meg. 
              Ha nem találod, ellenőrizd a spam mappát is.
            </p>
          </div>
        </div>
      </div>
      
      <button
        @click="resetForm"
        class="w-full bg-gray-200 text-gray-800 py-3 rounded-lg font-bold hover:bg-gray-300 transition"
      >
        Új regisztráció
      </button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import api from '@/services/api'

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

const handleRegister = async () => {
  msg.value = ""; // Üzenet alaphelyzetbe
  isError.value = false
  loading.value = true
  try {
    const res = await api.post('/auth/register', form.value);
    // Sikeres válasz: 201 Created
    success.value = true
    msg.value = `Verification email sent to ${form.value.email}!`;
    isError.value = false
  } catch (err) {
    isError.value = true
    success.value = false
    // 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.";
    }
  } finally {
    loading.value = false
  }
}

const resetForm = () => {
  success.value = false
  form.value = { email: '', password: '', first_name: '', last_name: '' }
  msg.value = ''
}
</script>

<style scoped>
@keyframes checkmark {
  0% {
    stroke-dashoffset: 100;
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    opacity: 1;
    transform: scale(1.1);
  }
  100% {
    stroke-dashoffset: 0;
    transform: scale(1);
  }
}

.animate-checkmark circle {
  stroke-dasharray: 166;
  stroke-dashoffset: 166;
  animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.animate-checkmark path {
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}

@keyframes stroke {
  100% {
    stroke-dashoffset: 0;
  }
}
</style>