<template>
    <div class="relative">
        <!-- Gated overlay for free/guest users -->
        <div
            v-if="!isPaidTier"
            class="absolute inset-0 z-10 rounded-2xl backdrop-blur-sm bg-white/60 flex flex-col items-center justify-center gap-3 text-center px-6"
        >
            <iconify-icon class="text-accent text-3xl" icon="lucide:lock"></iconify-icon>
            <p class="font-bold text-zinc-800">Price predictions are available on paid plans</p>
            <a
                href="/pricing"
                class="px-6 py-2 bg-accent text-white rounded-full text-sm font-bold hover:bg-accent-content transition-colors"
            >
                Upgrade from £0.99/mo
            </a>
        </div>

        <!-- Card content (blurred for free users, fully visible for paid) -->
        <div
            :class="['p-6 bg-white rounded-2xl border border-zinc-300 space-y-4', !isPaidTier && 'select-none pointer-events-none']"
        >
            <p class="text-xs font-bold uppercase tracking-widest text-zinc-500">Price Prediction</p>

            <!-- Loading state -->
            <template v-if="loading">
                <div class="animate-pulse space-y-2">
                    <div class="h-8 bg-zinc-300 rounded w-1/2"></div>
                    <div class="h-4 bg-zinc-300 rounded w-3/4"></div>
                </div>
            </template>

            <!-- Loaded state -->
            <template v-else-if="prediction">
                <h3
                    class="text-2xl font-black"
                    :class="prediction.action === 'fill_now' ? 'text-mauve' : prediction.action === 'wait' ? 'text-teal' : 'text-tan'"
                >
                    {{ actionLabel }}
                </h3>

                <div class="w-full h-2 bg-zinc-200 rounded-full overflow-hidden">
                    <div
                        class="h-full rounded-full transition-all"
                        :class="prediction.action === 'fill_now' ? 'bg-mauve' : 'bg-teal'"
                        :style="{ width: prediction.confidence_score + '%' }"
                    ></div>
                </div>

                <p class="text-sm text-zinc-500 leading-relaxed">{{ prediction.reasoning }}</p>

                <div class="flex items-center gap-4 text-xs text-zinc-500 font-medium">
                    <span>Avg: {{ prediction.current_avg }}p</span>
                    <span>Confidence: {{ prediction.confidence_label }}</span>
                    <span v-if="prediction.predicted_change_pence">
                        {{ prediction.predicted_change_pence > 0 ? '+' : '' }}{{ prediction.predicted_change_pence.toFixed(1) }}p expected
                    </span>
                </div>
            </template>

            <!-- Empty state (placeholder for gated view) -->
            <template v-else>
                <h3 class="text-2xl font-black text-mauve">Fill up now</h3>
                <div class="h-2 bg-zinc-200 rounded-full"><div class="h-full bg-mauve w-4/5 rounded-full"></div></div>
                <p class="text-sm text-zinc-500">Prices in your area are rising — best to fill up today.</p>
            </template>
        </div>
    </div>
</template>

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

const props = defineProps({
    prediction: { type: Object, default: null },
    loading: { type: Boolean, default: false },
    isPaidTier: { type: Boolean, default: false },
})

const actionLabel = computed(() => {
    if (!props.prediction) return ''
    return {
        fill_now: 'Fill up now',
        wait: 'Wait — prices falling',
        no_signal: 'No clear signal',
    }[props.prediction.action] ?? 'Check local prices'
})
</script>
