@props(['metric'])

@php
    $m = $metric;
    $status = $m['status'] ?? null;

    $topBar = match ($status) {
        'on' => 'bg-gradient-to-r from-emerald-400 via-emerald-500 to-teal-500',
        'off' => 'bg-gradient-to-r from-rose-400 via-rose-500 to-orange-500',
        default => 'bg-gradient-to-r from-slate-200 via-slate-300 to-slate-200',
    };

    $statusBadge = match ($status) {
        'on' => ['label' => __('ON TRACK'), 'cls' => 'bg-emerald-50 text-emerald-700 ring-emerald-600/20'],
        'off' => ['label' => __('OFF TRACK'), 'cls' => 'bg-rose-50 text-rose-700 ring-rose-600/20'],
        default => ['label' => __('NO FLAG'), 'cls' => 'bg-slate-100 text-slate-500 ring-slate-500/20'],
    };

    $deltaUp = $m['delta_up'] ?? null;
    $deltaGood = $deltaUp === null ? null : ($deltaUp === ($m['up_is_good'] ?? true));
    $deltaCls = $deltaGood === null ? 'text-slate-400 bg-slate-50' : ($deltaGood ? 'text-emerald-700 bg-emerald-50' : 'text-rose-700 bg-rose-50');
    $deltaIcon = $deltaUp === null ? 'minus' : ($deltaUp ? 'arrow-trending-up' : 'arrow-trending-down');
@endphp

<x-card {{ $attributes->merge(['class' => 'relative overflow-hidden p-0']) }}>
    <div class="absolute inset-x-0 top-0 h-[3px] {{ $topBar }}"></div>

    <div class="p-5">
        <div class="flex items-start justify-between gap-3">
            <h3 class="text-[13px] font-semibold tracking-tight text-slate-900">{{ $m['label'] }}</h3>
            <span class="shrink-0 rounded-full px-2 py-0.5 text-[10px] font-bold uppercase tracking-wider ring-1 ring-inset {{ $statusBadge['cls'] }}">
                {{ $statusBadge['label'] }}
            </span>
        </div>

        <div class="mt-4 flex items-end justify-between gap-3">
            <div class="min-w-0">
                <p class="text-[10px] font-semibold uppercase tracking-[0.12em] text-slate-400">{{ __('Latest') }}</p>
                <p class="mt-1 text-[28px] font-extrabold leading-none tracking-tight text-slate-900 tabular-nums">{{ $m['value_display'] }}</p>
                <span class="mt-2 inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-[11px] font-semibold {{ $deltaCls }}">
                    <x-icon :name="$deltaIcon" class="h-3 w-3 shrink-0" />
                    {{ $m['delta_display'] }}
                </span>
            </div>
            <div class="shrink-0 text-right">
                <p class="text-[10px] font-semibold uppercase tracking-[0.12em] text-slate-400">{{ __('Target') }}</p>
                <p class="mt-1 text-sm font-bold tabular-nums {{ $m['target_label'] ? 'text-slate-700' : 'text-slate-300' }}">
                    {{ $m['target_label'] ?? '—' }}
                </p>
            </div>
        </div>

        <div wire:ignore class="mt-4 -mx-1" x-data="scorecardChart(@js($m['chart']))">
            <div x-ref="chart"></div>
        </div>

        <div class="mt-3 flex items-center justify-between border-t border-slate-100 pt-3 text-xs">
            <span class="text-slate-400">{{ $m['counts_label'] }}</span>
            @if (! empty($m['streak_label']))
                <span class="font-bold {{ $status === 'off' ? 'text-rose-600' : 'text-emerald-600' }}">{{ $m['streak_label'] }}</span>
            @endif
        </div>
    </div>
</x-card>