<template>
    <form class="w-full max-w-xl" @submit.prevent="submitPostcode">
        <label class="flex items-center gap-2 h-14 md:h-15 pl-3.5 md:pl-4 pr-1.5 md:pr-2 bg-white md:bg-surface border border-zinc-200 rounded-2xl focus-within:border-primary transition-colors md:shadow-[0_20px_40px_-20px_rgba(0,0,0,0.12)]">
            <iconify-icon class="text-zinc-400 text-lg shrink-0" icon="lucide:map-pin"></iconify-icon>
            <input
                v-model="postcode"
                autocomplete="postal-code"
                class="flex-1 min-w-0 bg-transparent outline-none text-[15px] md:text-base placeholder:text-zinc-400"
                placeholder="Postcode"
                type="text"
            />

            <!-- Geolocation icon-button — visible on mobile AND desktop -->
            <button
                :disabled="locating"
                aria-label="Use my location"
                class="w-11 h-11 rounded-[10px] bg-zinc-100 text-primary inline-flex items-center justify-center shrink-0 hover:bg-zinc-200 transition-colors disabled:opacity-70"
                type="button"
                @click="useMyLocation"
            >
                <iconify-icon :class="{ 'animate-spin': locating }" :icon="locating ? 'lucide:loader-circle' : 'lucide:locate-fixed'" class="text-lg"></iconify-icon>
            </button>

            <!-- Mobile-only inline "Go" submit — sits next to the locate button -->
            <button
                class="md:hidden h-11 px-4 -ml-1 rounded-[10px] bg-primary text-white font-medium text-sm inline-flex items-center justify-center shrink-0 hover:opacity-90 transition"
                type="submit"
            >
                Go
            </button>

            <!-- Desktop-only inline submit -->
            <button
                class="hidden md:inline-flex h-12 px-5 ml-1 rounded-xl bg-primary text-white font-medium text-[15px] items-center gap-2 hover:opacity-90 transition"
                type="submit"
            >
                Check prices
                <iconify-icon icon="lucide:arrow-right"></iconify-icon>
            </button>
        </label>

        <div class="mt-3 flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-zinc-400 justify-center md:justify-start">
            <span class="hidden md:inline text-zinc-300">·</span>
            <span class="hidden md:inline font-mono">Try SW1A 1AA · M1 1AD · EH1 1YZ</span>
        </div>
    </form>
</template>

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

const props = defineProps({
    initial: { type: Object, default: () => ({}) },
    fuelType: { type: String, default: 'e10' },
    radius: { type: Number, default: 10 },
    sort: { type: String, default: 'reliable' },
})

const emit = defineEmits(['search'])

// Coarsen GPS coordinates to ~111 m (3 dp) before they leave the browser.
// "Use my location" coords flow into the shareable URL, the /api/stations
// request, and server/access logs — full precision would broadcast the user's
// exact position to anyone they share the resulting link with. 3 dp is ample
// for a radius station search. See .claude/rules/frontend.md.
const COORDINATE_DECIMALS = 3

function coarsenCoordinate(value) {
    const factor = 10 ** COORDINATE_DECIMALS
    return Math.round(value * factor) / factor
}

const postcode = ref('')
const locating = ref(false)

watch(() => props.initial, (v) => {
    if (!v) return
    if (typeof v.postcode === 'string') postcode.value = v.postcode
}, { immediate: true, deep: true })

function submitPostcode() {
    const trimmed = postcode.value.trim()
    if (!trimmed) return
    emit('search', {
        postcode: trimmed,
        lat: null,
        lng: null,
        fuelType: props.fuelType,
        radius: props.radius,
        sort: props.sort,
    })
}

function useMyLocation() {
    if (!navigator.geolocation) return
    locating.value = true
    navigator.geolocation.getCurrentPosition(
        ({ coords }) => {
            locating.value = false
            postcode.value = ''
            emit('search', {
                postcode: null,
                lat: coarsenCoordinate(coords.latitude),
                lng: coarsenCoordinate(coords.longitude),
                fuelType: props.fuelType,
                radius: props.radius,
                sort: props.sort,
            })
        },
        () => { locating.value = false },
        { timeout: 8000, enableHighAccuracy: false, maximumAge: 30000 },
    )
}
</script>
