<template>
    <div class="bg-zinc-50 p-4 rounded-xl border border-zinc-300 shadow-sm flex flex-col gap-4">
        <div class="flex justify-between items-start gap-3">
            <div class="space-y-0.5 min-w-0 flex-1">
                <h4 class="font-bold text-lg text-zinc-800 truncate">{{ station.name }}</h4>
                <p class="text-xs text-zinc-500 flex items-center gap-1">
                    <iconify-icon class="text-xs" icon="lucide:map-pin"></iconify-icon>
                    <span class="truncate">{{ locationLine }}</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"
            >
                <iconify-icon class="text-lg" icon="lucide:navigation"></iconify-icon>
            </a>
            <div class="text-right flex-shrink-0">
                <div :class="priceColor" class="text-xl font-black">
                    {{ station.price }}<span class="text-sm font-bold uppercase ml-0.5">p</span>
                </div>
                <p :class="priceColor" class="text-[10px] font-bold uppercase tracking-wider">
                    {{ statusLabel }}
                </p>
            </div>
        </div>
        <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="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"
            >
                <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="emit('remove', station)"
            >
                <iconify-icon class="text-lg" icon="lucide:trash-2"></iconify-icon>
            </button>
        </div>
    </div>
</template>

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

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

const emit = defineEmits(['remove'])

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 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 locationLine = computed(() => {
    const parts = [props.station.address, `${distanceMiles.value} mi`].filter(Boolean)
    return parts.join(' • ')
})

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
})
</script>
