@php
    $trackingStatus = $order->getTrackingStatus();
    $orderStatus = $trackingStatus->getValue();
    $isCanceled = in_array($orderStatus, [
        \Botble\Ecommerce\Enums\OrderStatusEnum::CANCELED,
        \Botble\Ecommerce\Enums\OrderStatusEnum::RETURNED,
        \Botble\Ecommerce\Enums\OrderStatusEnum::PARTIAL_RETURNED,
    ]);

    $shipmentStatus = ($order->shipment && $order->shipment->id)
        ? ($order->shipment->status instanceof \Botble\Base\Supports\Enum ? $order->shipment->status->getValue() : (string) $order->shipment->status)
        : null;

    $currentStep = 1;
    if ($orderStatus === \Botble\Ecommerce\Enums\OrderStatusEnum::COMPLETED || in_array($shipmentStatus, [\Botble\Ecommerce\Enums\ShippingStatusEnum::DELIVERED, \Botble\Ecommerce\Enums\ShippingStatusEnum::AUDITED])) {
        $currentStep = 4;
    } elseif ($shipmentStatus === \Botble\Ecommerce\Enums\ShippingStatusEnum::DELIVERING) {
        $currentStep = 3;
    } elseif (
        $orderStatus === \Botble\Ecommerce\Enums\OrderStatusEnum::PROCESSING ||
        in_array($shipmentStatus, [
            \Botble\Ecommerce\Enums\ShippingStatusEnum::APPROVED,
            \Botble\Ecommerce\Enums\ShippingStatusEnum::PENDING,
            \Botble\Ecommerce\Enums\ShippingStatusEnum::ARRANGE_SHIPMENT,
            \Botble\Ecommerce\Enums\ShippingStatusEnum::READY_TO_BE_SHIPPED_OUT,
            \Botble\Ecommerce\Enums\ShippingStatusEnum::PICKING,
            \Botble\Ecommerce\Enums\ShippingStatusEnum::DELAY_PICKING,
            \Botble\Ecommerce\Enums\ShippingStatusEnum::PICKED,
        ])
    ) {
        $currentStep = 2;
    } else {
        $currentStep = 1;
    }

    $progressPercent = match ($currentStep) {
        1 => 0,
        2 => 33.33,
        3 => 66.66,
        4 => 100,
        default => 0,
    };

    $steps = [
        [
            'number' => 1,
            'key' => 'approved',
            'title' => $trackingStatus->label() ?: __('Approved'),
            'description' => __('Order Placed'),
            'icon' => $trackingStatus->getIcon() ?: 'ti ti-clipboard-check',
            'time' => $order->created_at ? $order->created_at->translatedFormat('d M Y, H:i') : null,
        ],
        [
            'number' => 2,
            'key' => 'preparing',
            'title' => __('Preparing'),
            'description' => __('Processing & Packing'),
            'icon' => 'ti ti-package',
            'time' => ($currentStep >= 2 && $order->shipment && $order->shipment->created_at) ? $order->shipment->created_at->translatedFormat('d M Y, H:i') : null,
        ],
        [
            'number' => 3,
            'key' => 'shipping',
            'title' => __('Shipping'),
            'description' => ($order->shipment && $order->shipment->shipping_company_name) ? $order->shipment->shipping_company_name : __('Out for Delivery'),
            'icon' => 'ti ti-truck-delivery',
            'time' => ($order->shipment && $order->shipment->date_shipped) ? \Carbon\Carbon::parse($order->shipment->date_shipped)->translatedFormat('d M Y, H:i') : null,
        ],
        [
            'number' => 4,
            'key' => 'delivered',
            'title' => __('Delivered'),
            'description' => __('Package Delivered'),
            'icon' => 'ti ti-home-check',
            'time' => ($currentStep >= 4 && $order->completed_at) ? $order->completed_at->translatedFormat('d M Y, H:i') : null,
        ],
    ];
@endphp

<div class="card mb-4 bb-order-stepper-card">
    <div class="card-body p-4">
        <div class="d-flex align-items-center justify-content-between flex-wrap gap-2 mb-4 pb-3 border-bottom">
            <div>
                <h5 class="mb-1 fw-bold text-dark d-flex align-items-center gap-2">
                    <x-core::icon name="ti ti-timeline" class="text-primary" style="width: 22px; height: 22px;" />
                    {{ __('Order Status Progress') }}
                </h5>
                <span class="text-muted small">{{ __('Real-time timeline of your order fulfillment') }}</span>
            </div>
            <div>
                {!! BaseHelper::clean($trackingStatus->toHtml()) !!}
            </div>
        </div>

        @if ($isCanceled)
            <div class="alert alert-danger d-flex align-items-center gap-2 mb-4" role="alert">
                <x-core::icon name="ti ti-alert-circle" class="flex-shrink-0" style="width: 20px; height: 20px;" />
                <div>
                    <strong>{{ __('Order Status:') }} {{ $trackingStatus->label() }}</strong>
                    @if ($order->cancellation_reason_message)
                        <div class="small mt-1">{{ $order->cancellation_reason_message }}</div>
                    @endif
                </div>
            </div>
        @endif

        <div class="bb-order-stepper-wrapper @if($isCanceled) bb-stepper-canceled @endif">
            <div class="bb-stepper-line-bg">
                <div class="bb-stepper-line-fill" style="width: {{ $isCanceled ? 0 : $progressPercent }}%;"></div>
            </div>

            <div class="bb-stepper-steps">
                @foreach ($steps as $step)
                    @php
                        $stepNumber = $step['number'];
                        $isCompleted = ! $isCanceled && ($currentStep > $stepNumber || ($currentStep === 4 && $stepNumber === 4));
                        $isCurrent = ! $isCanceled && ($currentStep === $stepNumber && $currentStep !== 4);
                        $isPending = $isCanceled || ($currentStep < $stepNumber);
                    @endphp

                    <div @class([
                        'bb-stepper-step',
                        'is-completed' => $isCompleted,
                        'is-current' => $isCurrent,
                        'is-pending' => $isPending,
                    ])>
                        <div class="bb-stepper-icon-wrap">
                            <div class="bb-stepper-icon">
                                @if ($isCompleted)
                                    <x-core::icon name="ti ti-check" class="bb-icon-completed" />
                                @else
                                    <x-core::icon :name="$step['icon']" />
                                @endif
                            </div>
                            <span class="bb-stepper-number">{{ $stepNumber }}</span>
                        </div>

                        <div class="bb-stepper-content">
                            <h6 class="bb-stepper-title">{{ $step['title'] }}</h6>
                            <p class="bb-stepper-desc">{{ $step['description'] }}</p>
                            @if ($step['time'])
                                <span class="bb-stepper-time">{{ $step['time'] }}</span>
                            @endif
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </div>
</div>

<style>
    .bb-order-stepper-card {
        border: 1px solid #e9ecef;
        border-radius: 12px;
        background: #ffffff;
        box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04);
        transition: all 0.3s ease;
    }

    .bb-order-stepper-wrapper {
        position: relative;
        padding: 20px 10px 10px;
    }

    .bb-stepper-line-bg {
        position: absolute;
        top: 44px;
        left: 5%;
        right: 5%;
        height: 4px;
        background-color: #e9ecef;
        border-radius: 4px;
        z-index: 1;
    }

    .bb-stepper-line-fill {
        height: 100%;
        background: linear-gradient(90deg, #3bb77e 0%, #29a56c 100%);
        border-radius: 4px;
        transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .bb-stepper-steps {
        position: relative;
        display: flex;
        justify-content: space-between;
        z-index: 2;
    }

    .bb-stepper-step {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        flex: 1;
        padding: 0 8px;
    }

    .bb-stepper-icon-wrap {
        position: relative;
        margin-bottom: 14px;
    }

    .bb-stepper-icon {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #ffffff;
        border: 2px solid #dee2e6;
        color: #6c757d;
        font-size: 20px;
        transition: all 0.3s ease;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    }

    .bb-stepper-icon svg {
        width: 22px;
        height: 22px;
    }

    .bb-stepper-number {
        position: absolute;
        top: -4px;
        right: -4px;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: #6c757d;
        color: #fff;
        font-size: 10px;
        font-weight: 700;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 2px solid #fff;
    }

    /* Completed Step */
    .bb-stepper-step.is-completed .bb-stepper-icon {
        background: #3bb77e;
        border-color: #3bb77e;
        color: #ffffff;
        box-shadow: 0 4px 12px rgba(59, 183, 126, 0.3);
    }

    .bb-stepper-step.is-completed .bb-stepper-number {
        background: #29a56c;
    }

    .bb-stepper-step.is-completed .bb-stepper-title {
        color: #253d4e;
        font-weight: 700;
    }

    /* Current Step */
    .bb-stepper-step.is-current .bb-stepper-icon {
        background: #ffffff;
        border-color: #3bb77e;
        color: #3bb77e;
        border-width: 3px;
        box-shadow: 0 0 0 5px rgba(59, 183, 126, 0.15), 0 4px 12px rgba(59, 183, 126, 0.2);
        animation: bb-stepper-pulse 2s infinite;
    }

    .bb-stepper-step.is-current .bb-stepper-number {
        background: #3bb77e;
    }

    .bb-stepper-step.is-current .bb-stepper-title {
        color: #3bb77e;
        font-weight: 700;
    }

    /* Pending Step */
    .bb-stepper-step.is-pending .bb-stepper-icon {
        background: #f8f9fa;
        border-color: #dee2e6;
        color: #adb5bd;
    }

    .bb-stepper-step.is-pending .bb-stepper-title {
        color: #7e7e7e;
    }

    /* Content Styling */
    .bb-stepper-content {
        max-width: 180px;
    }

    .bb-stepper-title {
        font-size: 15px;
        font-weight: 600;
        margin-bottom: 4px;
        transition: color 0.3s ease;
    }

    .bb-stepper-desc {
        font-size: 12px;
        color: #7e7e7e;
        margin-bottom: 4px;
        line-height: 1.3;
    }

    .bb-stepper-time {
        display: inline-block;
        font-size: 11px;
        font-weight: 500;
        color: #3bb77e;
        background: rgba(59, 183, 126, 0.08);
        padding: 2px 8px;
        border-radius: 20px;
    }

    @keyframes bb-stepper-pulse {
        0% {
            box-shadow: 0 0 0 0 rgba(59, 183, 126, 0.35);
        }
        70% {
            box-shadow: 0 0 0 8px rgba(59, 183, 126, 0);
        }
        100% {
            box-shadow: 0 0 0 0 rgba(59, 183, 126, 0);
        }
    }

    /* Responsive Mobile */
    @media (max-width: 767px) {
        .bb-stepper-line-bg {
            display: none;
        }

        .bb-stepper-steps {
            flex-direction: column;
            gap: 20px;
        }

        .bb-stepper-step {
            flex-direction: row;
            text-align: left;
            align-items: flex-start;
            padding: 0;
            position: relative;
        }

        .bb-stepper-step:not(:last-child)::after {
            content: '';
            position: absolute;
            top: 48px;
            left: 24px;
            bottom: -16px;
            width: 2px;
            background: #e9ecef;
            z-index: 1;
        }

        .bb-stepper-step.is-completed:not(:last-child)::after {
            background: #3bb77e;
        }

        .bb-stepper-icon-wrap {
            margin-bottom: 0;
            margin-right: 16px;
            z-index: 2;
        }

        .bb-stepper-content {
            max-width: 100%;
            text-align: left;
            flex: 1;
        }

        .bb-stepper-title {
            font-size: 14px;
        }
    }

    /* RTL Arabic Support */
    [dir="rtl"] .bb-stepper-line-fill,
    body.rtl .bb-stepper-line-fill {
        float: right;
        background: linear-gradient(270deg, #3bb77e 0%, #29a56c 100%);
    }

    [dir="rtl"] .bb-stepper-number,
    body.rtl .bb-stepper-number {
        right: auto;
        left: -4px;
    }

    @media (max-width: 767px) {
        [dir="rtl"] .bb-stepper-step,
        body.rtl .bb-stepper-step {
            text-align: right;
        }

        [dir="rtl"] .bb-stepper-step:not(:last-child)::after,
        body.rtl .bb-stepper-step:not(:last-child)::after {
            left: auto;
            right: 24px;
        }

        [dir="rtl"] .bb-stepper-icon-wrap,
        body.rtl .bb-stepper-icon-wrap {
            margin-right: 0;
            margin-left: 16px;
        }

        [dir="rtl"] .bb-stepper-content,
        body.rtl .bb-stepper-content {
            text-align: right;
        }
    }
</style>