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

<template>
    <div
        :aria-expanded="isExpanded"
        :class="[
            'relative bg-zinc-50 rounded-xl border shadow-sm flex flex-col gap-4 transition-colors',
            dismissible ? 'pt-7 px-4 pb-4' : 'p-4',
            isExpanded ? 'border-accent' : 'border-zinc-300 hover:border-zinc-400',
            isControlled ? '' : 'cursor-pointer',
        ]"
        :role="isControlled ? null : 'button'"
        :style="swipeStyle"
        :tabindex="isControlled ? null : 0"
        @click="toggle"
        @keydown.enter.prevent="toggle"
        @keydown.space.prevent="toggle"
        @touchcancel="onTouchEnd"
        @touchend="onTouchEnd"
        @touchmove="onTouchMove"
        @touchstart.passive="onTouchStart"
    >
        <button
            v-if="dismissible"
            type="button"
            aria-label="Close"
            class="absolute top-2 right-2 z-10 inline-flex w-6 h-6 items-center justify-center rounded-full bg-white/90 text-zinc-500 border border-zinc-200 shadow-sm hover:bg-white hover:text-zinc-800"
            @click.stop="emit('dismiss')"
        >
            <iconify-icon class="text-xs" icon="lucide:x"></iconify-icon>
        </button>
        <div
            v-if="dismissible"
            aria-hidden="true"
            class="absolute top-2 left-1/2 -translate-x-1/2 w-9 h-1 rounded-full bg-zinc-300"
        ></div>
        <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>
                <p v-if="!isExpanded" 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="text-xs text-zinc-500 flex items-center gap-1">
                    <iconify-icon class="text-xs" icon="lucide:clock"></iconify-icon>
                    <span>{{ updatedAgo }}</span>
                </p>
            </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="isExpanded" 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 }}
                </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 },
    expanded: { type: Boolean, default: null },
    dismissible: { type: Boolean, default: false },
})

const emit = defineEmits(['remove', 'dismiss', 'update:expanded'])

const internalExpanded = ref(false)
const isControlled = computed(() => props.expanded !== null)
const isExpanded = computed(() => (isControlled.value ? props.expanded : internalExpanded.value))

function toggle() {
    if (isControlled.value) return
    internalExpanded.value = !internalExpanded.value
    emit('update:expanded', internalExpanded.value)
}

const SWIPE_DISMISS_THRESHOLD_PX = 80
const dragOffset = ref(0)
const dragging = ref(false)
let touchStartX = 0
let touchStartY = 0
let lockedAxis = null

function onTouchStart(e) {
    if (!props.dismissible || e.touches.length !== 1) return
    touchStartX = e.touches[0].clientX
    touchStartY = e.touches[0].clientY
    lockedAxis = null
    dragging.value = false
    dragOffset.value = 0
}

function onTouchMove(e) {
    if (!props.dismissible || e.touches.length !== 1) return
    const dy = e.touches[0].clientY - touchStartY
    const dx = e.touches[0].clientX - touchStartX

    if (lockedAxis === null) {
        if (Math.abs(dy) < 6 && Math.abs(dx) < 6) return
        lockedAxis = Math.abs(dy) > Math.abs(dx) ? 'y' : 'x'
    }

    if (lockedAxis === 'y' && dy > 0) {
        dragging.value = true
        dragOffset.value = dy
        if (e.cancelable) e.preventDefault()
    }
}

function onTouchEnd() {
    if (!props.dismissible) return
    if (dragging.value && dragOffset.value > SWIPE_DISMISS_THRESHOLD_PX) {
        emit('dismiss')
    }
    dragging.value = false
    dragOffset.value = 0
    lockedAxis = null
}

const swipeStyle = computed(() => {
    if (!props.dismissible) return null
    if (dragOffset.value === 0 && !dragging.value) {
        return { transition: 'transform .2s ease, opacity .2s ease' }
    }
    return {
        transform: `translateY(${dragOffset.value}px)`,
        opacity: String(Math.max(1 - dragOffset.value / 400, 0.4)),
        transition: dragging.value ? 'none' : 'transform .2s ease, opacity .2s ease',
    }
})

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 DEAL_COLOR_MAP = {
    cheap: 'text-status-good',
    average: 'text-zinc-800',
    expensive: '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(() => DEAL_COLOR_MAP[props.station.deal_quality] ?? 'text-zinc-800')

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>