<template>
    <div
        v-if="prediction"
        class="p-2 sm:p-5 bg-white rounded-2xl border border-zinc-300"
    >
        <div class="grid gap-4 lg:grid-cols-2 lg:gap-5">
            <div class="space-y-1.5">
                <p class="font-mono text-[10px] uppercase tracking-widest text-zinc-500 mb-1 truncate">Price Prediction</p>
                <h3 class="text-sm font-semibold text-zinc-800 leading-snug">{{ actionLabel }}</h3>
                <p class="text-sm text-zinc-500 leading-snug">{{ prediction.reasoning }}</p>
                <p class="text-sm text-zinc-500 leading-snug">
                    <span>Avg {{ prediction.current_avg }}p</span>
                    <span class="text-zinc-400"> · </span>
                    <span>Confidence {{ prediction.confidence_label }}</span>
                    <template v-if="prediction.predicted_change_pence">
                        <span class="text-zinc-400"> · </span>
                        <span>{{ prediction.predicted_change_pence > 0 ? '+' : '' }}{{ prediction.predicted_change_pence.toFixed(1) }}p expected</span>
                    </template>
                </p>
            </div>

            <div
                v-if="weeklyHeadline || todayContext"
                class="space-y-1.5 pt-3 border-t border-zinc-200 lg:pt-0 lg:border-t-0 lg:border-l lg:pl-5"
            >
                <p class="font-mono text-[10px] uppercase tracking-widest text-zinc-500 mb-1 truncate">Last 7 days</p>
                <p v-if="weeklyHeadline" class="text-sm font-semibold text-zinc-800 leading-snug">{{ weeklyHeadline }}</p>
                <p v-if="todayContext" class="text-sm text-zinc-500 leading-snug">{{ todayContext }}</p>
            </div>
        </div>
    </div>
</template>

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

const props = defineProps({
    prediction: { type: Object, default: null },
})

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'
})

const weekly = computed(() => props.prediction?.weekly_summary ?? null)

function formatPence(value) {
    if (value === null || value === undefined) return null
    return Number(value).toFixed(1) + 'p'
}

function formatDateShort(iso) {
    if (!iso) return ''
    const d = new Date(iso)
    if (Number.isNaN(d.getTime())) return iso
    return d.toLocaleDateString('en-GB', { weekday: 'short', day: 'numeric' })
}

const weeklyHeadline = computed(() => {
    const w = weekly.value
    if (!w || !w.cheapest_day || !w.priciest_day || w.last_7_days_change_pence === null) {
        return null
    }
    const change = w.last_7_days_change_pence
    const lead = change > 0.05
        ? `Avg rose ${change.toFixed(1)}p`
        : change < -0.05
            ? `Avg fell ${Math.abs(change).toFixed(1)}p`
            : 'Avg held steady'
    return `${lead} — cheapest ${formatDateShort(w.cheapest_day.date)} (${formatPence(w.cheapest_day.avg)}), priciest ${formatDateShort(w.priciest_day.date)} (${formatPence(w.priciest_day.avg)}).`
})

const todayContext = computed(() => {
    const w = weekly.value
    if (!w) return null

    const today = formatPence(w.today_avg)
    const tomorrow = formatPence(w.tomorrow_estimated_avg)

    if (today && tomorrow) {
        return `Today ${today}; tomorrow ≈ ${tomorrow}.`
    }
    if (today) {
        return `Today ${today}.`
    }
    return null
})
</script>
