<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-6">Új jelszó megadása</h2>
    
    <form @submit.prevent="handleReset" class="space-y-4">
      <input v-model="password" type="password" placeholder="Új jelszó" required class="w-full p-3 border rounded-lg" />
      <input v-model="passwordConfirm" type="password" placeholder="Jelszó megerősítése" required class="w-full p-3 border rounded-lg" />
      <button type="submit" class="w-full bg-blue-700 text-white py-3 rounded-lg font-bold">Jelszó mentése</button>
    </form>
    
    <p v-if="error" class="mt-4 text-red-600 text-center">{{ error }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import axios from 'axios'

const route = useRoute()
const router = useRouter()
const password = ref('')
const passwordConfirm = ref('')
const error = ref('')

const handleReset = async () => {
  if (password.value !== passwordConfirm.value) {
    error.value = "A két jelszó nem egyezik!";
    return;
  }
  try {
    const token = route.query.token;
    await axios.post(`http://192.168.100.43:8000/api/v2/auth/reset-password-confirm`, {
      token: token,
      new_password: password.value
    });
    alert("Jelszó sikeresen megváltoztatva!");
    router.push('/login');
  } catch (err) {
    error.value = "Hiba történt. Lehetséges, hogy a link lejárt.";
  }
}
</script>