@props(['prediction'])

@if ($prediction)
    @php
        $action = $prediction['action'] ?? 'no_signal';
        $headline = match ($action) {
            'fill_now' => 'Fill up now',
            'wait'     => 'Wait',
            default    => 'No signal',
        };
        $score = (float) ($prediction['confidence_score'] ?? 0);
        $circumference = 125.6; // 2π × 20
        $offset = round($circumference * (1 - $score / 100), 1);
        $label = $prediction['confidence_label'] ?? 'low';
        $labelColour = match ($label) {
            'high'   => 'bg-green-100 text-green-700',
            'medium' => 'bg-amber-100 text-amber-700',
            default  => 'bg-zinc-100 text-zinc-500',
        };
    @endphp

    <div class="rounded-2xl border border-border bg-surface p-5 shadow-sm">
        <div class="mb-3 flex items-start justify-between">
            <div>
                <p class="mb-1 text-[10px] font-bold uppercase tracking-widest text-text-muted">
                    Recommendation
                </p>
                <h2 class="text-3xl font-black leading-tight text-mauve">
                    {{ $headline }}
                </h2>
            </div>

            <div class="flex flex-col items-center gap-1">
                <div class="relative h-12 w-12">
                    <svg class="h-full w-full -rotate-90" viewBox="0 0 48 48">
                        <circle cx="24" cy="24" r="20"
                            stroke="var(--color-surface-subtle)"
                            stroke-width="4" fill="transparent" />
                        <circle cx="24" cy="24" r="20"
                            stroke="var(--color-mauve)"
                            stroke-width="4" fill="transparent"
                            stroke-dasharray="{{ $circumference }}"
                            stroke-dashoffset="{{ $offset }}"
                            stroke-linecap="round" />
                    </svg>
                    <span class="absolute inset-0 flex items-center justify-center text-[11px] font-black text-text-base">
                        {{ (int) $score }}%
                    </span>
                </div>
                <span class="text-[9px] font-bold uppercase tracking-wider text-text-muted">Confidence</span>
            </div>
        </div>

        <p class="text-sm font-medium leading-relaxed text-text-dim">
            {{ $prediction['reasoning'] ?? '' }}
        </p>

        <div class="mt-3">
            <flux:badge size="sm" :class="$labelColour">{{ ucfirst($label) }} confidence</flux:badge>
        </div>
    </div>
@endif