@props([
    'card' => [],
    'title' => '',
    'unitsSuffix' => false,
    'periodLabel' => '',
])

@php
    $card = is_array($card) ? $card : [];
    $hasTarget = (bool) ($card['has_target'] ?? false);
    $status = $hasTarget
        ? (string) ($card['status'] ?? 'neutral')
        : 'green';
    $percentage = (int) ($card['percentage'] ?? 0);
    $circlePercent = $hasTarget ? min(max($percentage, 0), 100) : 100;

    $cardTitle = $title !== '' ? $title : (string) ($card['label'] ?? '');
    $displayActual = (string) ($card['display_actual'] ?? '0');
    $displayTarget = (string) ($card['display_target'] ?? 'No target');
    $centerValue = $hasTarget ? $percentage.'%' : $displayActual;

    $radius = 54;
    $stroke = 12;
    $circumference = 2 * M_PI * $radius;
    $strokeDashoffset = $circumference * (1 - ($circlePercent / 100));

    $ringClass = match ($status) {
        'red' => 'text-red-400',
        'yellow' => 'text-amber-400',
        'green' => 'text-emerald-400',
        default => 'text-slate-500',
    };

    $percentTextClass = match ($status) {
        'red' => 'text-red-300',
        'yellow' => 'text-amber-300',
        'green' => 'text-emerald-300',
        default => 'text-slate-300',
    };
@endphp

<div {{ $attributes->merge(['class' => 'tv-circular-metric flex flex-col items-center justify-center']) }}>
    @if ($cardTitle !== '')
        <h3 class="tv-circular-metric__title text-center font-semibold text-slate-200 mb-4">
            {{ $cardTitle }}
        </h3>
    @endif

    <div class="relative tv-circular-metric__ring shrink-0">
        <svg class="h-full w-full -rotate-90" viewBox="0 0 120 120" aria-hidden="true" role="img">
            <circle
                cx="60"
                cy="60"
                r="{{ $radius }}"
                stroke="currentColor"
                stroke-width="{{ $stroke }}"
                fill="none"
                class="text-slate-700/80"
            />
            <circle
                cx="60"
                cy="60"
                r="{{ $radius }}"
                stroke="currentColor"
                stroke-width="{{ $stroke }}"
                fill="none"
                stroke-linecap="round"
                class="{{ $ringClass }} transition-all duration-500 ease-out"
                stroke-dasharray="{{ $circumference }}"
                stroke-dashoffset="{{ $strokeDashoffset }}"
            />
        </svg>

        <div class="absolute inset-0 flex items-center justify-center text-center px-3 pointer-events-none">
            <div class="tv-circular-metric__value font-bold leading-none {{ $percentTextClass }}">
                {{ $centerValue }}
            </div>
        </div>
    </div>

    <div class="mt-4 text-center">
        <div class="tv-circular-metric__actual font-semibold text-slate-100">
            @if ($hasTarget)
                {{ $displayActual }}
                <span class="text-slate-500 font-normal">/</span>
                {{ $displayTarget }}@if ($unitsSuffix) units @endif
            @else
                {{ $displayActual }}
            @endif
        </div>
        @if ($periodLabel !== '')
            <div class="tv-circular-metric__period text-slate-500 mt-1">
                {{ $periodLabel }}
            </div>
        @endif
    </div>
</div>