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

const emit = defineEmits(['close'])

const serviceType = ref('maintenance')
const location = ref('')
const urgency = ref('medium')

const handleSubmit = () => {
  // In a real app, you would call an API here
  console.log('Service search submitted:', {
    serviceType: serviceType.value,
    location: location.value,
    urgency: urgency.value
  })
  
  // Show success message
  alert('Szerviz keresés elindítva! Hamarosan értesítünk.')
  
  // Reset form
  serviceType.value = 'maintenance'
  location.value = ''
  urgency.value = 'medium'
  
  // Close modal
  emit('close')
}

const closeModal = () => {
  emit('close')
}
</script>

<template>
  <!-- Modal Backdrop -->
  <div class="fixed inset-0 z-[100] flex items-center justify-center bg-black bg-opacity-50 p-4" @click.self="closeModal">
    <!-- Modal Container -->
    <div class="bg-white rounded-2xl shadow-2xl w-full max-w-md overflow-hidden">
      <!-- Modal Header -->
      <div class="flex items-center justify-between p-6 border-b border-gray-200">
        <h2 class="text-xl font-bold text-gray-900">Szerviz Keresése</h2>
        <button @click="closeModal" class="text-gray-500 hover:text-gray-700 transition-colors">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>
      </div>

      <!-- Modal Body -->
      <div class="p-6">
        <form @submit.prevent="handleSubmit" class="space-y-5">
          <!-- Service Type -->
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">Szerviz típusa</label>
            <select
              v-model="serviceType"
              class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition"
            >
              <option value="maintenance">Általános karbantartás</option>
              <option value="repair">Javítás</option>
              <option value="diagnostic">Diagnosztika</option>
              <option value="tire">Gumiszerviz</option>
              <option value="oil">Olajcsere</option>
              <option value="brake">Fékrendszer</option>
              <option value="other">Egyéb</option>
            </select>
          </div>

          <!-- Location -->
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">Helyszín (város/irányítószám)</label>
            <input
              v-model="location"
              type="text"
              required
              class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition"
              placeholder="Pl.: Budapest"
            />
          </div>

          <!-- Urgency -->
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">Sürgősség</label>
            <div class="flex gap-4">
              <label class="flex items-center">
                <input v-model="urgency" type="radio" value="low" class="mr-2">
                <span class="text-gray-700">Alacsony</span>
              </label>
              <label class="flex items-center">
                <input v-model="urgency" type="radio" value="medium" class="mr-2">
                <span class="text-gray-700">Közepes</span>
              </label>
              <label class="flex items-center">
                <input v-model="urgency" type="radio" value="high" class="mr-2">
                <span class="text-gray-700">Magas</span>
              </label>
            </div>
          </div>

          <!-- Description -->
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">Részletes leírás (opcionális)</label>
            <textarea
              rows="3"
              class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition"
              placeholder="Pl.: Motorhiba, féknyikorgás..."
            ></textarea>
          </div>

          <!-- Buttons -->
          <div class="flex gap-3 pt-4">
            <button
              type="button"
              @click="closeModal"
              class="flex-1 px-4 py-3 border border-gray-300 text-gray-700 font-medium rounded-lg hover:bg-gray-50 transition"
            >
              Mégse
            </button>
            <button
              type="submit"
              class="flex-1 px-4 py-3 bg-green-600 hover:bg-green-700 text-white font-medium rounded-lg transition"
            >
              Szerviz keresése
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>
</template>

<style scoped>
/* Additional custom styles if needed */
</style>