<template>
    <div class="flex flex-col gap-3 max-w-md w-full">
        <!-- Row 1: postcode + button -->
        <div class="relative flex flex-col sm:flex-row gap-3">
            <div class="relative flex-1">
                <label for="postcode-input" class="sr-only">Postcode or city</label>
                <span aria-hidden="true" class="absolute left-4 top-1/2 -translate-y-1/2 text-zinc-500">
                    <iconify-icon icon="lucide:map-pin" style="font-size:1.25rem"></iconify-icon>
                </span>
                <input
                    id="postcode-input"
                    v-model="postcode"
                    type="text"
                    placeholder="Enter postcode, e.g. SW1A 1AA"
                    class="w-full h-14 pl-12 pr-4 bg-white border border-zinc-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-accent shadow-inner text-base"
                    @keyup.enter="onSearch"
                />
            </div>
            <button
                @click="onSearch"
                :disabled="!postcode.trim()"
                class="h-14 px-8 bg-accent text-white rounded-xl font-bold text-base shadow-xl hover:bg-accent-content transition-all disabled:opacity-50 disabled:cursor-not-allowed"
            >
                Find Prices
            </button>
        </div>

        <!-- Row 2: fuel type + radius -->
        <div class="flex gap-3">
            <select
                v-model="fuelType"
                aria-label="Fuel type"
                class="flex-1 h-10 px-3 bg-white border border-zinc-300 rounded-xl text-sm font-medium text-zinc-700 focus:outline-none focus:ring-2 focus:ring-accent"
            >
                <option value="e10">Petrol (E10)</option>
                <option value="e5">Premium Petrol (E5)</option>
                <option value="b7_standard">Diesel (B7)</option>
                <option value="b7_premium">Premium Diesel (B7)</option>
                <option value="b10">Diesel (B10)</option>
                <option value="hvo">HVO</option>
            </select>
            <select
                v-model="radius"
                aria-label="Search radius"
                class="w-32 h-10 px-3 bg-white border border-zinc-300 rounded-xl text-sm font-medium text-zinc-700 focus:outline-none focus:ring-2 focus:ring-accent"
            >
                <option :value="2">2 miles</option>
                <option :value="5">5 miles</option>
                <option :value="10">10 miles</option>
                <option :value="20">20 miles</option>
            </select>
        </div>
    </div>
</template>

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

const emit = defineEmits(['search'])

const postcode = ref('')
const fuelType = ref('e10')
const radius = ref(10)

function onSearch() {
    if (!postcode.value.trim()) return
    emit('search', {
        postcode: postcode.value.trim(),
        fuelType: fuelType.value,
        radius: radius.value,
    })
}
</script>
