@props(['status'])

@php
    $flow = [
        \App\Enums\OrderStatus::New,
        \App\Enums\OrderStatus::Confirmed,
        \App\Enums\OrderStatus::Processing,
        \App\Enums\OrderStatus::Ready,
        \App\Enums\OrderStatus::Shipped,
        \App\Enums\OrderStatus::Completed,
    ];
    $currentIndex = array_search($status, $flow, true);
    $cancelled = $currentIndex === false; // any cancelled_* status
@endphp

@if ($cancelled)
    <div class="flex items-center gap-2 rounded-[var(--radius-md)] bg-[var(--color-sale-soft)] px-4 py-3 text-[13.5px] font-bold text-[var(--color-sale)]">
        <i data-lucide="x-circle" class="h-4 w-4"></i> {{ $status->label() }}
    </div>
@else
    <div class="flex items-start">
        @foreach ($flow as $i => $step)
            @php($done = $i < $currentIndex)
            @php($active = $i === $currentIndex)
            <div class="flex flex-1 flex-col items-center">
                <div class="flex w-full items-center">
                    <span class="h-0.5 flex-1 {{ $i === 0 ? 'opacity-0' : ($i <= $currentIndex ? 'bg-[var(--color-primary)]' : 'bg-[var(--color-line)]') }}"></span>
                    {{-- Макет: активный — синий круг с белой цифрой, будущие — белые с
                         рамкой и серой цифрой; пройденные — синие с галочкой. --}}
                    <span class="grid h-7 w-7 shrink-0 place-items-center rounded-full border-2 text-xs font-bold
                        {{ $done || $active ? 'border-[var(--color-primary)] bg-[var(--color-primary)] text-white' : 'border-[var(--color-line)] bg-white text-[var(--color-disabled)]' }}">
                        @if ($done)<i data-lucide="check" class="h-3.5 w-3.5"></i>@else {{ $i + 1 }} @endif
                    </span>
                    <span class="h-0.5 flex-1 {{ $i === count($flow) - 1 ? 'opacity-0' : ($i < $currentIndex ? 'bg-[var(--color-primary)]' : 'bg-[var(--color-line)]') }}"></span>
                </div>
                <span class="mt-[7px] hidden text-center text-xs leading-tight sm:block {{ $active ? 'font-bold text-[var(--color-primary)]' : 'text-[var(--color-disabled)]' }}">{{ $step->label() }}</span>
            </div>
        @endforeach
    </div>

    {{-- На телефоне шесть подписей под кружками налезают друг на друга: «Подтверждён»
         вдвое шире своей колонки. Показываем там только текущий шаг — строкой во всю ширину. --}}
    <p class="mt-2 text-center text-[12.5px] font-bold text-[var(--color-primary)] sm:hidden">
        Шаг {{ $currentIndex + 1 }} из {{ count($flow) }} — {{ $status->label() }}
    </p>
@endif