@extends('layouts.app')
@section('title', 'Order Detail — Jumia Clone')

@section('content')
<div class="max-w-4xl mx-auto px-3 md:px-6 py-4"
     x-data="{
         order: null,
         loading: true,
         uuid: '{{ $uuid }}',
         async init() {
             try {
                 const data = await api.get('/orders/' + this.uuid)
                 this.order = data.data
             } catch (e) {
                 Alpine.store('app').toast(e.message, 'error')
             }
             this.loading = false
         },
         statusLabel(s) {
             return ['Pending','Confirmed','Processing','Shipped','In Transit','Delivered','Completed','Cancelled','Returned'][s] || 'Unknown'
         },
         statusClass(s) {
             const m = {0:'status-pending',1:'status-confirmed',2:'status-processing',3:'status-shipped',4:'status-shipped',5:'status-delivered',6:'status-completed',7:'status-cancelled'}
             return m[s] || 'badge-gray'
         },
         price: n => '₦' + Number(n).toLocaleString('en-NG', {minimumFractionDigits:2}),
     }"
     x-init="init()">

    {{-- Back button --}}
    <div class="flex items-center gap-3 mb-4">
        <a href="/orders" class="p-1.5 hover:bg-gray-200 rounded-lg transition-colors">
            <svg class="w-5 h-5 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
            </svg>
        </a>
        <h1 class="text-lg font-bold text-gray-900">Order Detail</h1>
    </div>

    {{-- Loading --}}
    <div x-show="loading" class="space-y-4 animate-pulse">
        <div class="skeleton h-24 rounded-xl"></div>
        <div class="skeleton h-48 rounded-xl"></div>
        <div class="skeleton h-32 rounded-xl"></div>
    </div>

    <div x-show="!loading && order" class="space-y-4 animate-fade-in">

        {{-- Order info bar --}}
        <div class="card-padded">
            <div class="flex flex-wrap items-start justify-between gap-3">
                <div>
                    <p class="text-xs text-gray-500">Order Number</p>
                    <p class="text-base font-bold text-gray-900" x-text="order?.order_number"></p>
                    <p class="text-xs text-gray-400 mt-0.5"
                       x-text="new Date(order?.created_at).toLocaleDateString('en-NG', {weekday:'long',year:'numeric',month:'long',day:'numeric'})"></p>
                </div>
                <div class="flex flex-col items-end gap-1.5">
                    <span :class="statusClass(order?.status)" x-text="statusLabel(order?.status)"></span>
                    <span class="text-xs text-gray-500"
                          :class="order?.payment_status === 'paid' ? 'text-green-600' : 'text-red-500'"
                          x-text="order?.payment_status === 'paid' ? '✓ Payment confirmed' : '● Payment pending'"></span>
                </div>
            </div>
        </div>

        {{-- Tracking timeline --}}
        <div class="card-padded" x-show="order?.status >= 0 && order?.status <= 6">
            <h2 class="text-sm font-bold text-gray-900 mb-4">Order Tracking</h2>
            <div class="relative">
                {{-- Vertical line --}}
                <div class="absolute left-3.5 top-0 bottom-0 w-px bg-gray-200"></div>

                <div class="space-y-4">
                    @foreach([
                        [0, '🕐', 'Order Placed',    'Your order has been received'],
                        [1, '✅', 'Order Confirmed',  'Seller confirmed your order'],
                        [2, '📦', 'Processing',       'Your items are being prepared'],
                        [3, '🚚', 'Shipped',          'Your order is on the way'],
                        [5, '🏠', 'Delivered',        'Delivered to your address'],
                    ] as [$statusVal, $icon, $label, $desc])
                    <div class="flex items-start gap-4 relative">
                        <div class="w-7 h-7 rounded-full flex items-center justify-center flex-shrink-0 z-10 text-sm"
                             :class="order?.status >= {{ $statusVal }} ? 'bg-orange-500 text-white shadow-md' : 'bg-gray-100 text-gray-400'">
                            {{ $icon }}
                        </div>
                        <div class="pb-1">
                            <p class="text-sm font-semibold"
                               :class="order?.status >= {{ $statusVal }} ? 'text-gray-900' : 'text-gray-400'">
                               {{ $label }}
                            </p>
                            <p class="text-xs text-gray-500">{{ $desc }}</p>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>
        </div>

        {{-- Cancelled / Returned state --}}
        <div x-show="order?.status === 7 || order?.status === 8"
             class="card-padded bg-red-50 border border-red-200">
            <div class="flex items-center gap-3">
                <span class="text-2xl">{{ '❌' }}</span>
                <div>
                    <p class="text-sm font-bold text-red-700" x-text="order?.status === 7 ? 'Order Cancelled' : 'Order Returned'"></p>
                    <p class="text-xs text-red-500">If you paid, your refund will be processed within 3–5 business days.</p>
                </div>
            </div>
        </div>

        {{-- Items --}}
        <div class="card-padded">
            <h2 class="text-sm font-bold text-gray-900 mb-3">Items Ordered</h2>
            <div class="divide-y divide-gray-100">
                <template x-for="item in order?.items || []" :key="item.id">
                    <div class="py-3 flex gap-3">
                        <div class="w-14 h-14 bg-gray-100 rounded-lg overflow-hidden flex-shrink-0 border border-gray-200">
                            <img :src="item.product?.primary_image || '/images/placeholder.png'"
                                 class="w-full h-full object-cover">
                        </div>
                        <div class="flex-1 min-w-0">
                            <p class="text-sm text-gray-900 font-medium line-clamp-2" x-text="item.product_name"></p>
                            <p x-show="item.variant_name" class="text-xs text-gray-500" x-text="item.variant_name"></p>
                            <div class="flex items-center justify-between mt-1">
                                <p class="text-xs text-gray-500" x-text="`Qty: ${item.quantity} × ${price(item.unit_price)}`"></p>
                                <p class="text-sm font-bold text-gray-900" x-text="price(item.subtotal)"></p>
                            </div>
                        </div>
                    </div>
                </template>
            </div>
        </div>

        {{-- Delivery address --}}
        <div class="card-padded">
            <h2 class="text-sm font-bold text-gray-900 mb-3">Delivery Address</h2>
            <div class="bg-gray-50 rounded-xl p-3 text-sm text-gray-700">
                <p class="font-semibold" x-text="order?.shipping_name"></p>
                <p x-text="order?.shipping_phone"></p>
                <p x-text="`${order?.shipping_address?.address || ''}`"></p>
                <p x-text="`${order?.shipping_city}, ${order?.shipping_state}, Nigeria`"></p>
            </div>
        </div>

        {{-- Order totals --}}
        <div class="card-padded">
            <h2 class="text-sm font-bold text-gray-900 mb-3">Payment Summary</h2>
            <div class="space-y-2">
                <div class="flex justify-between text-sm text-gray-600">
                    <span>Subtotal</span>
                    <span x-text="price(order?.subtotal || 0)"></span>
                </div>
                <div x-show="order?.coupon_discount > 0" class="flex justify-between text-sm text-green-600">
                    <span>Coupon (<span x-text="order?.coupon_code"></span>)</span>
                    <span x-text="'- ' + price(order?.coupon_discount || 0)"></span>
                </div>
                <div class="flex justify-between text-sm text-gray-600">
                    <span>Shipping</span>
                    <span x-text="order?.shipping_fee > 0 ? price(order.shipping_fee) : 'Free'"></span>
                </div>
                <div class="flex justify-between font-bold text-gray-900 text-base pt-2 border-t border-gray-200">
                    <span>Total Paid</span>
                    <span class="text-orange-500" x-text="price(order?.total_amount || 0)"></span>
                </div>
            </div>
        </div>

        {{-- Actions --}}
        <div class="flex gap-3 pb-4">
            <button x-show="order?.status === 0"
                    @click="api.post('/orders/' + order.uuid + '/cancel').then(() => { Alpine.store('app').toast('Order cancelled'); init(); }).catch(e => Alpine.store('app').toast(e.message, 'error'))"
                    class="btn-danger flex-1 py-3">
                Cancel Order
            </button>
            <button x-show="order?.status === 5"
                    class="btn-secondary flex-1 py-3">
                Write a Review
            </button>
            <a href="/products" class="btn-ghost border border-gray-300 flex-1 py-3 text-center">
                Continue Shopping
            </a>
        </div>
    </div>
</div>
@endsection