<template>
    <div class="space-y-6 max-w-lg">
        <h1 class="text-2xl font-black text-zinc-800">Preferences</h1>

        <form class="space-y-5 p-6 bg-white rounded-2xl border border-zinc-300" @submit.prevent="save">
            <div class="space-y-2">
                <label class="text-sm font-bold text-zinc-800">Default fuel type</label>
                <select
                    v-model="form.preferred_fuel_type"
                    class="w-full h-12 px-4 bg-zinc-50 border border-zinc-300 rounded-xl font-medium text-zinc-800 focus:outline-none focus:ring-2 focus:ring-accent"
                >
                    <option v-for="fuel in FUEL_TYPES" :key="fuel.value" :value="fuel.value">
                        {{ fuel.label }}
                    </option>
                </select>
            </div>

            <div class="space-y-2">
                <label class="text-sm font-bold text-zinc-800">Home postcode</label>
                <input
                    v-model="form.postcode"
                    type="text"
                    placeholder="e.g. SW1A 1AA"
                    maxlength="8"
                    class="w-full h-12 px-4 bg-zinc-50 border border-zinc-300 rounded-xl font-medium text-zinc-800 focus:outline-none focus:ring-2 focus:ring-accent"
                />
            </div>

            <div class="flex items-center gap-4">
                <button
                    type="submit"
                    :disabled="saving"
                    class="px-8 py-3 bg-accent text-white rounded-xl font-bold hover:bg-accent-content transition-all disabled:opacity-50"
                >
                    {{ saving ? 'Saving…' : 'Save preferences' }}
                </button>
                <p v-if="saved" class="text-sm font-bold text-green-600">Saved!</p>
            </div>
        </form>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import api from '../../axios.js'
import { FUEL_TYPES } from '../../constants/fuelTypes.js'

const form = ref({ preferred_fuel_type: 'e10', postcode: '' })
const saving = ref(false)
const saved = ref(false)

onMounted(async () => {
    const response = await api.get('/user/preferences')
    form.value.preferred_fuel_type = response.data.preferred_fuel_type ?? 'e10'
    form.value.postcode = response.data.postcode ?? ''
})

async function save() {
    saving.value = true
    saved.value = false
    try {
        await api.put('/user/preferences', form.value)
        saved.value = true
        setTimeout(() => { saved.value = false }, 3000)
    } finally {
        saving.value = false
    }
}
</script>
