@php
    $data = $getState();
    $checkpoints = $data['checkpoints'] ?? [];
@endphp

<div class="space-y-3">
    @forelse ($checkpoints as $checkpoint)
        @php
            $statusEnum = \App\Enums\OnTimeStatus::tryFrom($checkpoint['status'] ?? null) ?? \App\Enums\OnTimeStatus::Unknown;
            $delta = $checkpoint['delta_min'] ?? null;
            $deltaText = $delta === null ? '--' : ((($delta > 0 ? '+' : '') . (int) $delta) . ' min');
            $scheduled = $checkpoint['scheduled_at'] ?? null;
            $actual = $checkpoint['actual_at'] ?? null;
        @endphp

        <div class="rounded-lg border border-gray-200 p-3 dark:border-gray-700 dark:bg-gray-900/70">
            <div class="flex items-center justify-between">
                <span class="text-sm font-medium text-gray-800 dark:text-gray-100">{{ $checkpoint['label'] ?? 'Checkpoint' }}</span>

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

            <dl class="mt-3 grid grid-cols-2 gap-3 text-xs">
                <div>
                    <dt class="text-gray-500 dark:text-gray-300">Delta</dt>
                    <dd class="font-medium text-gray-900 dark:text-gray-100">{{ $deltaText }}</dd>
                </div>
                <div>
                    <dt class="text-gray-500 dark:text-gray-300">Scheduled</dt>
                    <dd class="font-medium text-gray-900 dark:text-gray-100">
                        @if ($scheduled instanceof \DateTimeInterface)
                            {{ $scheduled->timezone(config('app.timezone', 'UTC'))->format('Y-m-d H:i') }}
                        @else
                            --
                        @endif
                    </dd>
                </div>
                <div>
                    <dt class="text-gray-500 dark:text-gray-300">Actual</dt>
                    <dd class="font-medium text-gray-900 dark:text-gray-100">
                        @if ($actual instanceof \DateTimeInterface)
                            {{ $actual->timezone(config('app.timezone', 'UTC'))->format('Y-m-d H:i') }}
                        @else
                            --
                        @endif
                    </dd>
                </div>
            </dl>
        </div>
    @empty
        <p class="text-sm text-gray-500 dark:text-gray-300">No on-time metrics are available for this trip yet.</p>
    @endforelse
</div>