@extends('layouts.app')

@section('content')
@php
    $status = $order->status;
    $isCancelled = $status === 'cancelled';

    // Timeline steps with status logic (same logic as original)
    $steps = [
        [
            'id' => 'placed',
            'title' => 'অর্ডার সফল হয়েছে',
            'subtitle' => 'আমরা আপনার অর্ডারটি পেয়েছি।',
            'icon' => 'fa-clipboard-check',
            'status' => $isCancelled ? 'cancelled' : 'completed',
            'date' => $order->created_at->format('d M, Y - h:i A'),
        ],
        [
            'id' => 'processing',
            'title' => 'প্রসেসিং হচ্ছে',
            'subtitle' => 'আপনার পণ্য প্যাকিং করা হচ্ছে।',
            'icon' => 'fa-box-open',
            'status' => $isCancelled ? 'cancelled'
                : (in_array($status, ['processing','shipped','delivered']) 
                    ? ($status === 'processing' ? 'in-progress' : 'completed') 
                    : 'pending'),
            'date' => in_array($status, ['processing','shipped','delivered']) ? 'সম্পন্ন' : 'অপেক্ষমান',
        ],
        [
            'id' => 'shipped',
            'title' => 'ডেলিভারির জন্য পাঠানো হয়েছে',
            'subtitle' => 'পার্সেলটি কুরিয়ারে হস্তান্তর করা হয়েছে।',
            'icon' => 'fa-truck-fast',
            'status' => $isCancelled ? 'cancelled'
                : (in_array($status, ['shipped','delivered']) 
                    ? ($status === 'shipped' ? 'in-progress' : 'completed') 
                    : 'pending'),
            'date' => in_array($status, ['shipped','delivered']) ? 'সম্পন্ন' : 'অপেক্ষমান',
        ],
        [
            'id' => 'delivered',
            'title' => 'ডেলিভারি সম্পন্ন',
            'subtitle' => 'পণ্যটি আপনার হাতে পৌঁছেছে।',
            'icon' => 'fa-house-chimney',
            'status' => $isCancelled ? 'cancelled'
                : ($status === 'delivered' ? 'completed' : 'pending'),
            'date' => $status === 'delivered' ? 'সম্পন্ন' : 'অপেক্ষমান',
        ],
    ];
@endphp

<div class="min-h-[80vh] flex items-center justify-center p-4 sm:p-6 bg-gray-50">
    <div class="w-full max-w-lg mx-auto timeline-animate">

        {{-- Main Card --}}
        <div class="rounded-xl border border-gray-200 bg-white shadow-sm overflow-hidden">

            {{-- Header --}}
            <div class="bg-[#004225] p-5 sm:p-6 text-white flex justify-between items-start gap-4 timeline-fade-item">
                <div>
                    <h2 class="text-lg font-bold">অর্ডার আইডি: #{{ $order->id }}</h2>
                    <p class="text-xs text-white/60 mt-0.5">{{ $order->created_at->format('d M, Y | h:i A') }}</p>
                </div>
                @php
                    $badgeColors = match($status) {
                        'delivered' => 'bg-green-100 text-green-700',
                        'cancelled' => 'bg-red-100 text-red-700',
                        'shipped' => 'bg-blue-100 text-blue-700',
                        'processing' => 'bg-yellow-100 text-yellow-700',
                        default => 'bg-orange-100 text-orange-700',
                    };
                @endphp
                <span class="{{ $badgeColors }} px-3 py-1 rounded-full text-[10px] font-black uppercase tracking-wider flex-shrink-0">
                    {{ $order->status }}
                </span>
            </div>

            <div class="p-5 sm:p-6">

                {{-- Customer Info --}}
                <div class="mb-8 flex gap-3 items-center p-4 bg-gray-50 rounded-xl border border-gray-100 timeline-fade-item">
                    <div class="w-10 h-10 bg-orange-100 rounded-full flex items-center justify-center text-orange-600 text-base flex-shrink-0">
                        <i class="fa fa-user"></i>
                    </div>
                    <div class="min-w-0">
                        <h4 class="font-bold text-gray-800 text-sm truncate">{{ $order->customer_name }}</h4>
                        <p class="text-xs text-gray-500">{{ $order->customer_phone }}</p>
                    </div>
                </div>

                {{-- Tracking Timeline (TrackingTimeline React component style) --}}
                <h2 class="text-base font-bold text-gray-900 mb-6 timeline-fade-item">Order History</h2>

                @if($isCancelled)
                    {{-- Cancelled State --}}
                    <div class="mb-8 p-4 rounded-xl border border-red-200 bg-red-50 timeline-fade-item">
                        <div class="flex items-center gap-3">
                            <div class="w-10 h-10 rounded-full bg-red-500 text-white flex items-center justify-center flex-shrink-0 shadow-sm">
                                <i class="fa fa-xmark text-sm"></i>
                            </div>
                            <div>
                                <h4 class="font-bold text-red-700 text-sm">অর্ডার বাতিল করা হয়েছে</h4>
                                <p class="text-xs text-red-600/70 mt-0.5">দুঃখিত, আপনার অর্ডারটি বাতিল করা হয়েছে।</p>
                            </div>
                        </div>
                    </div>
                @else
                    {{-- Active Timeline --}}
                    <ol class="relative border-l-2 border-gray-100 ml-4 mb-8">
                        @foreach($steps as $i => $step)
                            <li class="mb-8 ml-8 last:mb-0 timeline-fade-item" style="animation-delay: {{ ($i + 3) * 0.1 }}s">

                                {{-- Icon Circle --}}
                                <span class="absolute -left-[17px] flex h-8 w-8 items-center justify-center rounded-full shadow-sm ring-[6px] ring-white transition-all
                                    @if($step['status'] === 'completed')
                                        bg-green-500 text-white
                                    @elseif($step['status'] === 'in-progress')
                                        bg-green-500/20
                                    @else
                                        bg-gray-100
                                    @endif
                                ">
                                    {{-- Pulsing ring for in-progress --}}
                                    @if($step['status'] === 'in-progress')
                                        <span class="absolute h-full w-full animate-ping rounded-full bg-green-500/40 opacity-75"></span>
                                    @endif

                                    @if($step['status'] === 'completed')
                                        <i class="fa fa-check text-[10px] text-white"></i>
                                    @elseif($step['status'] === 'in-progress')
                                        <i class="fa {{ $step['icon'] }} text-[10px] text-green-600"></i>
                                    @else
                                        <i class="fa {{ $step['icon'] }} text-[10px] text-gray-400/60"></i>
                                    @endif
                                </span>

                                {{-- Content --}}
                                <div class="flex flex-col">
                                    <h3 class="font-semibold text-sm
                                        @if($step['status'] !== 'pending') text-green-700 @else text-gray-400 @endif
                                    ">
                                        {{ $step['title'] }}
                                    </h3>
                                    <p class="text-xs mt-0.5
                                        @if($step['status'] === 'in-progress') font-medium text-gray-600 @else text-gray-400 @endif
                                    ">
                                        {{ $step['date'] }}
                                    </p>
                                </div>
                            </li>
                        @endforeach
                    </ol>
                @endif

                {{-- Action Buttons --}}
                <div class="pt-6 border-t border-gray-100 flex gap-3 timeline-fade-item">
                    <a href="{{ route('order.track') }}" class="flex-1 text-center py-2.5 bg-gray-100 hover:bg-gray-200 rounded-lg font-semibold text-sm transition-all text-gray-700">আগে ফিরে যান</a>
                    <a href="{{ route('home') }}" class="flex-1 text-center py-2.5 bg-orange-500 hover:bg-orange-600 text-white rounded-lg font-semibold text-sm shadow-sm transition-all">হোম পেজ</a>
                </div>
            </div>
        </div>

    </div>
</div>

<style>
    /* Staggered fade-in (replicates Framer Motion staggerChildren + itemVariants) */
    .timeline-animate .timeline-fade-item {
        opacity: 0;
        transform: translateY(20px);
        animation: timelineFadeIn 0.4s ease-out forwards;
    }
    .timeline-animate .timeline-fade-item:nth-child(1) { animation-delay: 0.1s; }
    .timeline-animate .timeline-fade-item:nth-child(2) { animation-delay: 0.2s; }
    .timeline-animate .timeline-fade-item:nth-child(3) { animation-delay: 0.3s; }
    .timeline-animate .timeline-fade-item:nth-child(4) { animation-delay: 0.4s; }
    .timeline-animate .timeline-fade-item:nth-child(5) { animation-delay: 0.5s; }
    .timeline-animate .timeline-fade-item:nth-child(6) { animation-delay: 0.6s; }
    .timeline-animate .timeline-fade-item:nth-child(7) { animation-delay: 0.7s; }
    .timeline-animate .timeline-fade-item:nth-child(8) { animation-delay: 0.8s; }

    @keyframes timelineFadeIn {
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
</style>
@endsection