<template>
  <div class="max-w-md mx-auto mt-20 p-8 bg-white rounded-3xl shadow-2xl border border-gray-100">
    <div class="text-center mb-10">
      <span class="text-5xl">🚗</span>
      <h2 class="text-3xl font-black text-gray-900 mt-4 uppercase tracking-tighter">Belépés</h2>
      <p class="text-gray-400 text-sm font-medium">Service Finder V2.0</p>
    </div>
    
    <form @submit.prevent="handleLogin" class="space-y-6">
      <div class="space-y-1">
        <label class="text-xs font-bold text-gray-500 uppercase ml-1">E-mail cím</label>
        <input v-model="email" type="email" required 
               class="w-full p-4 bg-gray-50 border-2 border-transparent rounded-2xl focus:border-blue-500 focus:bg-white transition-all outline-none" 
               placeholder="kincses@gmail.com" />
      </div>
      
      <div class="space-y-1">
        <div class="flex justify-between items-center">
          <label class="text-xs font-bold text-gray-500 uppercase ml-1">Jelszó</label>
          <router-link to="/forgot-password" class="text-xs font-bold text-blue-600 hover:text-blue-800">Elfelejtetted?</router-link>
        </div>
        <input v-model="password" type="password" required 
               class="w-full p-4 bg-gray-50 border-2 border-transparent rounded-2xl focus:border-blue-500 focus:bg-white transition-all outline-none" 
               placeholder="••••••••" />
      </div>
      
      <div v-if="error" class="p-4 bg-red-50 border-l-4 border-red-500 text-red-700 rounded-lg text-sm font-bold">
        ⚠️ {{ error }}
      </div>

      <button type="submit" :disabled="loading" 
              class="w-full bg-blue-700 text-white py-4 rounded-2xl font-black text-lg hover:bg-blue-800 transition-all shadow-xl hover:shadow-blue-200 disabled:bg-gray-300">
        {{ loading ? 'ELLENŐRZÉS...' : 'BEJELENTKEZÉS' }}
      </button>
    </form>
    
    <div class="mt-10 pt-6 border-t border-gray-100 text-center">
      <p class="text-gray-500 font-medium mb-3">Nincs még fiókod?</p>
      <router-link to="/register" 
                   class="inline-block w-full py-3 px-6 border-2 border-blue-700 text-blue-700 rounded-2xl font-bold hover:bg-blue-50 transition-all">
        Új Széf létrehozása
      </router-link>
    </div>
  </div>
</template>

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

const email = ref('')
const password = ref('')
const error = ref('')
const loading = ref(false)
const router = useRouter()

// URLSearchParams használata - ez pontosan azt a formátumot küldi, amit a Swagger
  const params = new URLSearchParams()
  params.append('username', email.value)
  params.append('password', password.value)

  try {
    const res = await axios.post('http://192.168.100.43:8000/api/v2/auth/login', params, {
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
      }
    })
    
    const token = res.data.access_token
    localStorage.setItem('token', token)

    // Profil lekérése a jogosultságok miatt
    const userRes = await axios.get('http://192.168.100.43:8000/api/v1/users/me', {
      headers: { Authorization: `Bearer ${token}` }
    })

    localStorage.setItem('is_admin', userRes.data.is_superuser ? 'true' : 'false')
    router.push('/')
  } catch (err) {
    console.error("Belépési hiba részletei:", err.response?.data)
    error.value = err.response?.data?.detail || "Hibás e-mail vagy jelszó."
  } finally {
    loading.value = false
  }

</script>