@php
    $data = $getState();
    $overall = $data['overall'] ?? ['status' => \App\Enums\OnTimeStatus::Unknown->value, 'delay_min' => null];

    $statusEnum = \App\Enums\OnTimeStatus::tryFrom($overall['status'] ?? null) ?? \App\Enums\OnTimeStatus::Unknown;

    $delay = $overall['delay_min'] ?? null;
    $delayText = $delay === null ? '--' : ((($delay > 0 ? '+' : '') . (int) $delay) . ' min');
@endphp

<div class="space-y-3">
    <div class="flex items-center justify-between">
        <span class="text-sm font-medium text-gray-700 dark:text-gray-200">Overall Status</span>

        <x-filament::badge
            :color="$statusEnum->getColor() ?? 'gray'"
            :icon="$statusEnum->getIcon()"
            size="sm"
        >
            {{ $statusEnum->getLabel() }}
        </x-filament::badge>
    </div>

    <div class="rounded-lg border border-gray-200 p-3 text-sm dark:border-gray-700 dark:bg-gray-900/70">
        <div class="flex items-center justify-between">
            <span class="text-gray-600 dark:text-gray-300">Worst delay</span>
            <span class="font-medium text-gray-900 dark:text-gray-100">{{ $delayText }}</span>
        </div>
        <p class="mt-2 text-xs text-gray-500 dark:text-gray-400">
            The overall status reflects the largest delay across all checkpoints, using the grace threshold defined in configuration.
        </p>
    </div>
</div>