<template>
  <div class="max-w-md mx-auto mt-20 p-8 bg-white rounded-2xl shadow-xl border">
    <h2 class="text-2xl font-bold text-center mb-4 text-gray-800">Elfelejtett jelszó</h2>
    <p class="text-sm text-gray-600 mb-6 text-center">Add meg az e-mail címed, és küldünk egy linket a jelszó visszaállításához.</p>
    
    <form @submit.prevent="handleForgot" class="space-y-4">
      <input v-model="email" type="email" placeholder="E-mail címed" required class="w-full p-3 border rounded-lg focus:ring-2 focus:ring-blue-500" />
      <button type="submit" class="w-full bg-blue-700 text-white py-3 rounded-lg font-bold hover:bg-blue-800">Küldés</button>
    </form>
    
    <p v-if="message" class="mt-4 text-center font-medium text-blue-600">{{ message }}</p>
    <div class="mt-6 text-center">
      <router-link to="/login" class="text-sm text-gray-500 hover:underline">Vissza a belépéshez</router-link>
    </div>
  </div>
</template>

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

const email = ref('')
const message = ref('')

const handleForgot = async () => {
  try {
    await axios.post(`http://192.168.100.43:8000/api/v2/auth/forgot-password?email=${email.value}`)
    message.value = "Ha a cím létezik, a helyreállító levelet elküldtük."
  } catch (err) {
    message.value = "Hiba történt a kérés feldolgozásakor."
  }
}
</script>