<template>
    <div class="space-y-6">
        <div>
            <h1 class="text-2xl font-black text-zinc-800">Welcome back{{ user ? ', ' + user.name : '' }}</h1>
            <p class="text-zinc-500 mt-1">Your FuelAlert dashboard.</p>
        </div>

        <div class="grid sm:grid-cols-3 gap-4">
            <RouterLink
                v-for="item in quickLinks"
                :key="item.to"
                :to="item.to"
                class="p-6 bg-white rounded-2xl border border-zinc-300 hover:border-accent transition-colors space-y-3"
            >
                <iconify-icon :icon="item.icon" class="text-accent text-2xl"></iconify-icon>
                <p class="font-bold text-zinc-800">{{ item.label }}</p>
                <p class="text-sm text-zinc-500">{{ item.description }}</p>
            </RouterLink>
        </div>

        <div class="p-6 bg-white rounded-2xl border border-zinc-300 space-y-2">
            <p class="text-sm font-bold uppercase tracking-widest text-zinc-500">Your plan</p>
            <p class="text-xl font-black text-zinc-800 capitalize">{{ userTier }}</p>
            <a v-if="userTier === 'free'" class="inline-block text-sm font-bold text-accent hover:underline" href="/pricing">
                Upgrade for alerts + predictions →
            </a>
        </div>
    </div>
</template>

<script setup>
import { RouterLink } from 'vue-router'
import { useAuth } from '../../composables/useAuth.js'

const { user, userTier } = useAuth()

const quickLinks = [
    { to: '/dashboard/saved-stations', label: 'Saved Stations', icon: 'lucide:bookmark', description: 'Stations you\'ve bookmarked for quick access.' },
    { to: '/dashboard/preferences', label: 'Preferences', icon: 'lucide:settings', description: 'Set your default fuel type and postcode.' },
    { to: '/', label: 'Find Fuel', icon: 'lucide:search', description: 'Search live prices near you.' },
]
</script>
