From d7054402dd3044dad2945f5b4b894671aea8eebd Mon Sep 17 00:00:00 2001
From: Ovidiu U <nonreal@gmail.com>
Date: Fri, 10 Apr 2026 18:02:23 +0100
Subject: [PATCH] feat: add PredictionCard component with tier gating

---
 resources/js/components/PredictionCard.vue | 87 ++++++++++++++++++++++
 1 file changed, 87 insertions(+)
 create mode 100644 resources/js/components/PredictionCard.vue

diff --git a/resources/js/components/PredictionCard.vue b/resources/js/components/PredictionCard.vue
new file mode 100644
index 0000000..2523553
--- /dev/null
+++ b/resources/js/components/PredictionCard.vue
@@ -0,0 +1,87 @@
+<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 icon="lucide:lock" class="text-[#bb5b3e] text-3xl"></iconify-icon>
+            <p class="font-bold text-[#4a3f3b]">Price predictions are available on paid plans</p>
+            <a
+                href="/pricing"
+                class="px-6 py-2 bg-[#bb5b3e] text-white rounded-full text-sm font-bold hover:bg-[#a34a31] 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-[#e5ded7] space-y-4', !isPaidTier && 'select-none pointer-events-none']"
+        >
+            <p class="text-xs font-bold uppercase tracking-widest text-[#89726c]">Price Prediction</p>
+
+            <!-- Loading state -->
+            <template v-if="loading">
+                <div class="animate-pulse space-y-2">
+                    <div class="h-8 bg-[#e5ded7] rounded w-1/2"></div>
+                    <div class="h-4 bg-[#e5ded7] 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-[#8B4860]' : prediction.action === 'wait' ? 'text-[#4A7C7E]' : 'text-[#9B8B6B]'"
+                >
+                    {{ actionLabel }}
+                </h3>
+
+                <div class="w-full h-2 bg-[#eeeae5] rounded-full overflow-hidden">
+                    <div
+                        class="h-full rounded-full transition-all"
+                        :class="prediction.action === 'fill_now' ? 'bg-[#8B4860]' : 'bg-[#4A7C7E]'"
+                        :style="{ width: prediction.confidence_score + '%' }"
+                    ></div>
+                </div>
+
+                <p class="text-sm text-[#89726c] leading-relaxed">{{ prediction.reasoning }}</p>
+
+                <div class="flex items-center gap-4 text-xs text-[#89726c] 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-[#8B4860]">Fill up now</h3>
+                <div class="h-2 bg-[#eeeae5] rounded-full"><div class="h-full bg-[#8B4860] w-4/5 rounded-full"></div></div>
+                <p class="text-sm text-[#89726c]">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>