fuel-price/resources/js/components/StationCard.vue

<template>
    <div
        :aria-expanded="expanded"
        :class="[
            'bg-zinc-50 p-4 rounded-xl border shadow-sm flex flex-col gap-4 cursor-pointer transition-colors',
            expanded ? 'border-accent' : 'border-zinc-300 hover:border-zinc-400',
        ]"
        role="button"
        tabindex="0"
        @click="toggle"
        @keydown.enter.prevent="toggle"
        @keydown.space.prevent="toggle"
    >
        <div class="flex justify-between items-start gap-3">
            <div class="space-y-0.5 min-w-0 flex-1">
                <h4 class="font-semibold text-sm text-zinc-800 truncate">{{ displayName }}</h4>
                <template v-if="!expanded">
                    <p class="text-xs text-zinc-500 flex items-center gap-1">
                        <iconify-icon class="text-xs" icon="lucide:map-pin"></iconify-icon>
                        <span>{{ distanceMiles }} mi</span>
                    </p>
                    <p v-if="updatedAgo" :class="[priceColor, 'text-xs flex items-center gap-1']">
                        <iconify-icon class="text-xs" icon="lucide:clock"></iconify-icon>
                        <span>{{ updatedAgo }}</span>
                    </p>
                </template>
            </div>
            <a
                :href="directionsUrl"
                aria-label="Directions"
                class="hidden md:inline-flex w-10 h-10 items-center justify-center rounded-lg bg-accent/10 text-accent active:bg-accent/20 flex-shrink-0"
                rel="noopener"
                target="_blank"
                @click.stop
            >
                <iconify-icon class="text-lg" icon="lucide:navigation"></iconify-icon>
            </a>
            <div class="text-right shrink-0 font-mono font-medium">
                <div :class="priceColor" class="text-zinc-900 tabular-nums">
                    {{ station.price }}p
                </div>
                <p :class="priceColor" class="text-[10px]">
                    {{ statusLabel }}
                </p>
                <p v-if="priceDelta" :class="priceDeltaColor" class="text-[11px] font-semibold mt-0.5">
                    {{ priceDelta }}
                </p>
            </div>
        </div>

        <Transition
            enter-active-class="transition duration-200 ease-out"
            enter-from-class="opacity-0 -translate-y-1"
            enter-to-class="opacity-100 translate-y-0"
            leave-active-class="transition duration-150 ease-in"
            leave-from-class="opacity-100"
            leave-to-class="opacity-0"
        >
            <div v-if="expanded" class="border-t border-zinc-200 pt-3 space-y-3">
                <p v-if="brandLabel" class="font-mono text-[10px] uppercase tracking-widest text-zinc-500 mb-1 truncate">
                    {{ brandLabel }}
                </p>

                <div v-if="badges.length" class="flex flex-wrap gap-1.5">
                    <span
                        v-for="badge in badges"
                        :key="badge.label"
                        :class="[badge.class, 'inline-flex items-center gap-1 px-2 py-0.5 rounded text-[10px] font-bold uppercase tracking-wider']"
                    >
                        <iconify-icon v-if="badge.icon" :icon="badge.icon"></iconify-icon>
                        {{ badge.label }}
                    </span>
                </div>

                <div v-if="fuelTypes.length" class="flex flex-wrap gap-1.5">
                    <span
                        v-for="type in fuelTypes"
                        :key="type"
                        class="inline-block bg-zinc-200 text-zinc-600 text-[10px] font-bold px-2 py-0.5 rounded"
                    >
                        {{ type }}
                    </span>
                </div>

                <div class="flex flex-wrap items-center gap-2 text-xs text-zinc-500">
                    <span>{{ distanceMiles }} mi</span>
                    <span
                        v-if="openStatus"
                        :class="[
                            openChipClass,
                            'inline-flex items-center gap-1 px-2 py-0.5 rounded text-[11px] font-bold',
                        ]"
                    >
                        <span
                            :class="[openDotClass, 'inline-block size-1.5 rounded-full']"
                            aria-hidden="true"
                        ></span>
                        {{ openStatus }}
                    </span>
                </div>

                <div v-if="amenityItems.length" class="flex flex-wrap gap-3 text-xs text-zinc-500">
                    <span
                        v-for="item in amenityItems"
                        :key="item.key"
                        class="inline-flex items-center gap-1"
                    >
                        <iconify-icon :icon="item.icon" class="text-sm"></iconify-icon>
                        {{ item.label }}
                    </span>
                </div>

                <p class="text-[11px] text-zinc-400">
                    {{ fullAddress }}<span v-if="updatedAgo"> · Updated {{ updatedAgo }}</span>
                </p>
            </div>
        </Transition>

        <div class="flex items-center justify-end gap-2 md:hidden">
            <button
                v-if="removable"
                aria-label="Remove"
                class="w-10 h-10 flex items-center justify-center rounded-lg bg-zinc-200 text-zinc-500 active:bg-zinc-300"
                type="button"
                @click.stop="emit('remove', station)"
            >
                <iconify-icon class="text-lg" icon="lucide:trash-2"></iconify-icon>
            </button>
            <a
                :href="directionsUrl"
                class="flex-1 h-10 flex items-center justify-center gap-2 rounded-lg bg-accent/10 text-accent font-bold text-sm active:bg-accent/20"
                rel="noopener"
                target="_blank"
                @click.stop
            >
                <iconify-icon class="text-lg" icon="lucide:navigation"></iconify-icon>
                Directions
            </a>
        </div>
        <div v-if="removable" class="hidden md:flex justify-end">
            <button
                aria-label="Remove"
                class="w-10 h-10 flex items-center justify-center rounded-lg bg-zinc-200 text-zinc-500 active:bg-zinc-300"
                type="button"
                @click.stop="emit('remove', station)"
            >
                <iconify-icon class="text-lg" icon="lucide:trash-2"></iconify-icon>
            </button>
        </div>
    </div>
</template>

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

const props = defineProps({
    station: { type: Object, required: true },
    lowestPrice: { type: Number, default: null },
    avgPence: { type: Number, default: null },
    removable: { type: Boolean, default: false },
    origin: { type: Object, default: null },
})

const emit = defineEmits(['remove'])

const expanded = ref(false)

function toggle() {
    expanded.value = !expanded.value
}

const RELIABILITY_MAP = {
    reliable: { label: 'Current', color: 'text-status-good' },
    stale: { label: 'Stale', color: 'text-status-warn' },
    outdated: { label: 'Outdated', color: 'text-status-bad' },
}

const AMENITY_META = {
    customer_toilets: { icon: 'lucide:toilet', label: 'WC' },
    car_wash: { icon: 'lucide:spray-can', label: 'Wash' },
    air_pump_or_screenwash: { icon: 'lucide:wind', label: 'Air' },
    adblue_pumps: { icon: 'lucide:fuel', label: 'AdBlue' },
    adblue_packaged: { icon: 'lucide:package', label: 'AdBlue' },
    lpg_pumps: { icon: 'lucide:flame', label: 'LPG' },
    water_filling: { icon: 'lucide:droplets', label: 'Water' },
}

const AMENITY_ORDER = [
    'customer_toilets',
    'car_wash',
    'air_pump_or_screenwash',
    'adblue_pumps',
    'adblue_packaged',
    'lpg_pumps',
    'water_filling',
]

const reliabilityInfo = computed(() => RELIABILITY_MAP[props.station.reliability] ?? RELIABILITY_MAP.reliable)

const priceColor = computed(() => {
    if (props.lowestPrice && props.station.price_pence === props.lowestPrice) {
        return 'text-status-good'
    }
    return reliabilityInfo.value.color
})

const statusLabel = computed(() => reliabilityInfo.value.label)

const distanceMiles = computed(() => (props.station.distance_km * 0.621371).toFixed(1))

const displayName = computed(() => {
    const name = props.station.name ?? ''
    if (name !== name.toUpperCase()) return name
    return name.toLowerCase().replace(/\b\w/g, c => c.toUpperCase())
})

const fullAddress = computed(() => {
    const parts = [props.station.address, props.station.postcode].filter(Boolean)
    return parts.join(', ')
})

const updatedAgo = computed(() => {
    if (!props.station.price_updated_at) return ''
    const diffMin = Math.floor((Date.now() - new Date(props.station.price_updated_at)) / 60000)
    if (diffMin < 60) return `${Math.max(diffMin, 0)}m ago`
    const hours = Math.floor(diffMin / 60)
    if (hours < 24) return `${hours}h ago`
    const days = Math.floor(hours / 24)
    return `${days} day${days === 1 ? '' : 's'} ago`
})

const directionsUrl = computed(() => {
    const { lat, lng } = props.station
    const base = `https://www.google.com/maps/dir/?api=1&destination=${lat},${lng}`
    if (props.origin?.lat != null && props.origin?.lng != null) {
        return `${base}&origin=${props.origin.lat},${props.origin.lng}`
    }
    return base
})

const brandLabel = computed(() => {
    const brand = props.station.brand
    if (!brand) return ''
    if (brand === props.station.name) return ''
    return brand
})

const badges = computed(() => {
    const list = []
    if (props.station.is_supermarket) {
        list.push({ label: 'Supermarket', icon: 'lucide:shopping-cart', class: 'bg-lime-500/15 text-lime-700' })
    }
    if (props.station.open_today?.is_24_hours || props.station.amenities?.includes('twenty_four_hour_fuel')) {
        list.push({ label: '24h', icon: 'lucide:clock', class: 'bg-zinc-800 text-white' })
    }
    if (props.station.is_motorway) {
        list.push({ label: 'Motorway', icon: 'lucide:road', class: 'bg-blue-500/15 text-blue-700' })
    }
    return list
})

const fuelTypes = computed(() => {
    const types = props.station.fuel_types_available
    if (!Array.isArray(types)) return []
    return types.map(t => t.replace('_STANDARD', '').replace('_PREMIUM', '+').toUpperCase())
})

const amenityItems = computed(() => {
    const amenities = props.station.amenities
    if (!Array.isArray(amenities)) return []
    return AMENITY_ORDER
        .filter(key => amenities.includes(key) && AMENITY_META[key])
        .map(key => ({ key, ...AMENITY_META[key] }))
})

const openStatus = computed(() => {
    const open = props.station.open_today
    if (!open) return ''
    if (open.is_24_hours) return ''
    if (open.is_open_now) return open.close ? `Open until ${open.close}` : 'Open now'
    return open.open ? `Closed — opens ${open.open}` : 'Closed'
})

const isOpenNow = computed(() => {
    const open = props.station.open_today
    return Boolean(open?.is_24_hours || open?.is_open_now)
})

const openChipClass = computed(() => (
    isOpenNow.value
        ? 'bg-status-good/15 text-status-good'
        : 'bg-status-bad/10 text-status-bad'
))

const openDotClass = computed(() => (
    isOpenNow.value ? 'bg-status-good' : 'bg-status-bad'
))

const priceDelta = computed(() => {
    if (props.avgPence == null) return ''
    const delta = props.station.price_pence - props.avgPence
    const pence = Math.abs(delta) / 100
    if (pence < 0.1) return 'as expected'
    return `${pence.toFixed(1)}p ${delta < 0 ? 'below' : 'above'} average`
})

const priceDeltaColor = computed(() => {
    if (props.avgPence == null) return 'text-zinc-500'
    if (props.station.price_pence < props.avgPence) return 'text-status-good'
    if (props.station.price_pence > props.avgPence) return 'text-status-bad'
    return 'text-zinc-500'
})
</script>