@php
    /** @var \App\Models\Order|\Closure|null $record */
    if (isset($getRecord) && is_callable($getRecord)) {
        $record = $getRecord();
    }

    if ($record instanceof \Closure) {
        $record = $record();
    }
@endphp

@if (! $record)
    <div class="text-xs text-gray-600">-</div>
@else
@php
    $stages = \App\Models\Order::progressStages();
    $currentIndex = $record->progressIndex();
    $isDelivered = $record->currentStatusCode() === \App\Enums\OrderStatus::EntregadoAlCliente->value;

    $isCanceled = $record->isCanceled();
    $isOnHold = $record->isOnHold();

    $stepColor = function (int $index) use ($currentIndex, $isCanceled, $isOnHold, $isDelivered, $stages): string {
        if ($isCanceled) {
            return 'gray';
        }

        if ($isOnHold) {
            return 'warning';
        }

        if ($isDelivered && $index === (count($stages) - 1)) {
            return 'success';
        }

        if ($currentIndex === null) {
            return 'gray';
        }

        if ($index < $currentIndex) {
            return 'primary';
        }

        if ($index === $currentIndex) {
            return $isDelivered ? 'success' : 'primary';
        }

        return 'gray';
    };

    $isCompleted = function (int $index) use ($currentIndex): bool {
        return $currentIndex !== null && $index < $currentIndex;
    };
@endphp

<div class="space-y-2">
    <div class="grid grid-cols-1 gap-2 sm:grid-cols-7">
        @foreach ($stages as $i => $stage)
            <div class="flex items-center gap-2 sm:flex-col sm:items-start">
                <div class="flex items-center gap-2">
                    <x-filament::badge :color="$stepColor($i)">
                        <div class="flex items-center gap-1">
                            <x-filament::icon :icon="$stage['icon']" class="h-4 w-4" />
                            <span class="text-xs">{{ $i + 1 }}</span>
                            @if ($isCompleted($i))
                                <x-filament::icon icon="heroicon-o-check" class="h-4 w-4 text-success-200 dark:text-success-300" />
                            @endif
                        </div>
                    </x-filament::badge>

                    <div class="text-xs text-gray-700 sm:hidden">
                        {{ $stage['label'] }}
                    </div>
                </div>

                <div class="hidden text-xs text-gray-700 sm:block">
                    {{ $stage['label'] }}
                </div>
            </div>
        @endforeach
    </div>

    @if ($isCanceled)
        <div class="text-xs text-gray-600">Proceso interrumpido (Cancelado).</div>
    @elseif ($isOnHold)
        <div class="text-xs text-gray-600">En pausa (On Hold).</div>
    @endif
</div>
@endif