<template>
  <div class="max-w-md mx-auto bg-white p-8 rounded-2xl shadow-xl border border-gray-100 mt-10">
    <h2 class="text-2xl font-bold text-gray-800 mb-6 flex items-center gap-2">
      <span>💸</span> Új költség rögzítése
    </h2>

    <form @submit.prevent="handleSubmit" class="space-y-4">
      <div>
        <label class="block text-sm font-medium text-gray-700">Kategória</label>
        <select v-model="form.category" class="mt-1 block w-full rounded-lg border-gray-300 shadow-sm focus:ring-blue-500 focus:border-blue-500 p-2.5 border">
          <option value="REFUELING">⛽ Tankolás</option>
          <option value="SERVICE">🔧 Szerviz</option>
          <option value="INSURANCE">🛡️ Biztosítás</option>
          <option value="TOLL">🛣️ Útdíj / Matrica</option>
          <option value="FINE">👮 Büntetés</option>
        </select>
      </div>

      <div>
        <label class="block text-sm font-medium text-gray-700">Összeg (Ft)</label>
        <input v-model="form.amount" type="number" required class="mt-1 block w-full rounded-lg border-gray-300 shadow-sm focus:ring-blue-500 focus:border-blue-500 p-2.5 border" placeholder="Pl: 25000">
      </div>

      <div>
        <label class="block text-sm font-medium text-gray-700">Km óra állása</label>
        <input v-model="form.odometer_value" type="number" class="mt-1 block w-full rounded-lg border-gray-300 shadow-sm focus:ring-blue-500 focus:border-blue-500 p-2.5 border" placeholder="Pl: 145200">
      </div>

      <button type="submit" class="w-full bg-blue-600 text-white font-bold py-3 rounded-lg hover:bg-blue-700 transition-colors shadow-lg shadow-blue-200">
        Mentés rögzítése
      </button>
    </form>
  </div>
</template>

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

const form = ref({
  category: 'REFUELING',
  amount: null,
  odometer_value: null,
  vehicle_id: 'auto-uuid-helye', // Ezt majd a routerből kapjuk
  date: new Date().toISOString().split('T')[0]
})

const handleSubmit = async () => {
  try {
    await axios.post('http://localhost:8000/api/v1/expenses/add', form.value)
    alert("Sikeresen mentve!")
  } catch (err) {
    alert("Hiba történt a mentéskor.")
  }
}
</script>