@php
    use App\Enums\OrderStatus;
    $current = $order->status instanceof OrderStatus ? $order->status : OrderStatus::tryFrom((string) $order->status);
    $canPay = in_array($current, [OrderStatus::AwaitingPayment, OrderStatus::PaymentRejected], true);
    $canCancel = $current && $current->canTransitionTo(OrderStatus::Cancelled);
    $canRate = $current === OrderStatus::Completed && ! $order->rated_at;
@endphp

<x-layouts.customer :title="'طلب ' . $order->order_number">
    <x-slot name="pageTitle">طلب {{ $order->order_number }}</x-slot>
    <x-slot name="pageSubtitle">{{ $order->service_label }}{{ $order->plan_label ? ' · '.$order->plan_label : '' }}</x-slot>
    <x-slot name="pageActions">
        <x-status-badge :status="$order->status" />
        @if($canPay)
            <a href="{{ route('customer.orders.payment', $order) }}" class="btn btn-primary">ارفع إيصال الدفع</a>
        @endif
    </x-slot>

    <div x-data="{ tab: 'overview' }" class="space-y-5">
        {{-- Tabs --}}
        <div class="card overflow-x-auto">
            <div class="flex items-center gap-1 p-2 min-w-max">
                @foreach([
                    'overview' => 'نظرة عامة',
                    'timeline' => 'الخط الزمني',
                    'messages' => 'الرسائل',
                    'attachments' => 'المرفقات',
                    'delivery' => 'تسليم الخدمة',
                    'tickets' => 'التذاكر المرتبطة',
                ] as $key => $label)
                    <button type="button" @click="tab = '{{ $key }}'"
                            :class="tab === '{{ $key }}' ? 'bg-brand-600 text-white' : 'text-navy-700 hover:bg-muted'"
                            class="px-4 py-2 rounded-lg text-sm font-semibold transition-all">{{ $label }}</button>
                @endforeach
            </div>
        </div>

        {{-- Overview --}}
        <div x-show="tab === 'overview'" x-cloak class="grid lg:grid-cols-[1.3fr_1fr] gap-5">
            <div class="card card-padded space-y-4">
                <div>
                    <h3 class="font-bold text-navy-900 mb-3">تفاصيل الطلب</h3>
                    <dl class="grid sm:grid-cols-2 gap-x-6 gap-y-3 text-sm">
                        <div><dt class="text-navy-500">الخدمة</dt><dd class="font-semibold text-navy-900">{{ $order->service_label }}</dd></div>
                        <div><dt class="text-navy-500">الباقة</dt><dd class="font-semibold text-navy-900">{{ $order->plan_label ?? '—' }}</dd></div>
                        <div><dt class="text-navy-500">تاريخ الإنشاء</dt><dd class="text-navy-900">{{ $order->created_at->translatedFormat('d M Y H:i') }}</dd></div>
                        <div><dt class="text-navy-500">آخر تحديث</dt><dd class="text-navy-900">{{ $order->updated_at->diffForHumans() }}</dd></div>
                    </dl>
                </div>

                @if($order->customer_notes)
                    <div>
                        <h3 class="font-bold text-navy-900 mb-2">ملاحظاتك للفريق</h3>
                        <p class="text-sm text-navy-700 leading-relaxed bg-muted/40 rounded-xl p-3">{{ $order->customer_notes }}</p>
                    </div>
                @endif
            </div>

            <div class="card card-padded">
                <h3 class="font-bold text-navy-900 mb-3">الفاتورة</h3>
                <dl class="text-sm space-y-2">
                    <div class="flex justify-between"><dt class="text-navy-500">المجموع الفرعي</dt><dd>{{ number_format((float) $order->subtotal, 2) }}</dd></div>
                    @if((float) $order->discount_amount > 0)
                        <div class="flex justify-between text-amber-700"><dt>خصم</dt><dd>-{{ number_format((float) $order->discount_amount, 2) }}</dd></div>
                    @endif
                    @if((float) $order->vat_amount > 0)
                        <div class="flex justify-between"><dt class="text-navy-500">ضريبة ({{ (float) $order->vat_rate }}%)</dt><dd>{{ number_format((float) $order->vat_amount, 2) }}</dd></div>
                    @endif
                    <div class="flex justify-between text-base font-extrabold pt-2 border-t border-border/60">
                        <dt>الإجمالي المتوقع</dt>
                        <dd class="text-brand-700">{{ number_format((float) $order->expected_amount, 2) }} {{ $order->currency }}</dd>
                    </div>
                </dl>

                @if($canPay)
                    <a href="{{ route('customer.orders.payment', $order) }}" class="btn btn-primary w-full mt-5">ارفع إيصال الدفع</a>
                @elseif($current === OrderStatus::AwaitingPaymentVerification)
                    <p class="mt-5 text-sm text-amber-700 bg-amber-50 rounded-xl p-3 text-center">
                        ⏳ بانتظار مراجعة إيصالك
                    </p>
                @elseif($current?->isPaidStatus())
                    <p class="mt-5 text-sm text-brand-700 bg-brand-50 rounded-xl p-3 text-center">✓ تم تأكيد الدفع</p>
                @endif

                @if($canCancel || $canRate)
                    <div class="mt-4 pt-4 border-t border-border/60 space-y-2">
                        @if($canCancel)
                            <form method="POST" action="{{ route('customer.orders.cancel', $order) }}" onsubmit="return confirm('هل أنت متأكد من إلغاء الطلب؟');">
                                @csrf
                                <button class="btn btn-ghost btn-sm w-full text-red-600 hover:bg-red-50">إلغاء الطلب</button>
                            </form>
                        @endif
                        @if($canRate)
                            <form method="POST" action="{{ route('customer.orders.rate', $order) }}" class="space-y-2">
                                @csrf
                                <p class="text-sm font-bold text-navy-900">قيّم تجربتك</p>
                                <select name="rating" class="form-select form-input text-sm">
                                    @for($i = 5; $i >= 1; $i--)
                                        <option value="{{ $i }}">{{ str_repeat('⭐', $i) }} ({{ $i }}/5)</option>
                                    @endfor
                                </select>
                                <textarea name="comment" rows="2" placeholder="تعليقك (اختياري)" class="form-textarea text-sm"></textarea>
                                <button class="btn btn-gold btn-sm w-full">إرسال التقييم</button>
                            </form>
                        @endif
                    </div>
                @endif
            </div>
        </div>

        {{-- Timeline --}}
        <div x-show="tab === 'timeline'" x-cloak class="card card-padded">
            <h3 class="font-bold text-navy-900 mb-5">الخط الزمني للطلب</h3>
            @if($order->statusHistory->isEmpty())
                <p class="text-navy-500">لا يوجد تاريخ بعد.</p>
            @else
                <ul class="ms-4">
                    @foreach($order->statusHistory as $h)
                        @php
                            $hStatus = OrderStatus::tryFrom((string) $h->to_status);
                            $isCurrent = $loop->first;
                        @endphp
                        <x-timeline-item
                            :title="$hStatus?->labelAr() ?? $h->to_status"
                            :date="$h->created_at?->translatedFormat('d M Y H:i')"
                            :note="$h->reason"
                            :isCurrent="$isCurrent" />
                    @endforeach
                </ul>
            @endif
        </div>

        {{-- Messages --}}
        <div x-show="tab === 'messages'" x-cloak class="card card-padded">
            <h3 class="font-bold text-navy-900 mb-5">المراسلات مع الفريق</h3>
            @if($order->customerVisibleMessages->isEmpty())
                <p class="text-navy-500 mb-4">لم يبدأ أي محادثة بعد.</p>
            @else
                <div class="space-y-3 mb-5 max-h-[460px] overflow-y-auto pe-2 scrollbar-thin">
                    @foreach($order->customerVisibleMessages as $msg)
                        @php $isMine = $msg->sender_id === auth()->id(); @endphp
                        <div class="flex gap-3 {{ $isMine ? 'flex-row-reverse' : '' }}">
                            <span class="inline-flex items-center justify-center w-9 h-9 rounded-full bg-brand-100 text-brand-700 font-bold text-sm shrink-0">
                                {{ mb_substr($msg->sender?->name ?? 'م', 0, 1) }}
                            </span>
                            <div class="max-w-md {{ $isMine ? 'bg-brand-600 text-white' : 'bg-muted text-navy-800' }} rounded-2xl px-4 py-2.5">
                                <p class="text-sm whitespace-pre-wrap">{{ $msg->message }}</p>
                                <p class="text-[10px] mt-1 {{ $isMine ? 'text-white/80' : 'text-navy-500' }}">
                                    {{ $msg->sender?->name }} · {{ $msg->created_at->diffForHumans() }}
                                </p>
                            </div>
                        </div>
                    @endforeach
                </div>
            @endif

            <form method="POST" action="{{ route('customer.orders.messages.send', $order) }}" class="flex gap-2">
                @csrf
                <input type="text" name="message" required placeholder="اكتب رسالتك..." class="form-input flex-1">
                <button class="btn btn-primary">إرسال</button>
            </form>
        </div>

        {{-- Attachments --}}
        <div x-show="tab === 'attachments'" x-cloak class="card card-padded">
            <h3 class="font-bold text-navy-900 mb-5">المرفقات</h3>
            @if($order->attachments->isEmpty())
                <p class="text-navy-500">لا توجد مرفقات.</p>
            @else
                <ul class="space-y-2">
                    @foreach($order->attachments as $att)
                        <li class="flex items-center gap-3 p-3 rounded-xl bg-muted/40">
                            <span class="inline-flex items-center justify-center w-10 h-10 rounded-lg bg-white border border-border">
                                <svg class="w-5 h-5 text-navy-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-width="2" d="M9 3h7l4 4v14H4V3h5z"/></svg>
                            </span>
                            <span class="flex-1 min-w-0 truncate text-sm font-medium text-navy-800">{{ $att->original_name ?? $att->file_path }}</span>
                            <span class="text-xs text-navy-500">{{ $att->created_at->diffForHumans() }}</span>
                        </li>
                    @endforeach
                </ul>
            @endif
        </div>

        {{-- Delivery --}}
        <div x-show="tab === 'delivery'" x-cloak class="card card-padded">
            <h3 class="font-bold text-navy-900 mb-5">تسليم الخدمة</h3>
            @if(! $current || ! in_array($current, [OrderStatus::Delivered, OrderStatus::Completed], true))
                <div class="empty-state">
                    <p class="text-navy-600">سيتم عرض بيانات التسليم هنا فور تسليم الخدمة من الفريق التقني.</p>
                </div>
            @else
                @php $cs = $order->customerService->first(); @endphp
                @if($cs && $cs->credentials->isNotEmpty())
                    <p class="text-sm text-navy-600 mb-4">⚠️ تظهر كلمات المرور لمدة 10 ثوانٍ فقط ويتم تسجيل كل عملية كشف.</p>
                    <div class="space-y-3">
                        @foreach($cs->credentials as $cred)
                            <x-secure-credential-field :credential="$cred" :revealUrl="route('customer.services.credential.reveal', [$cs, $cred])" />
                        @endforeach
                    </div>
                @else
                    <p class="text-navy-500">لا توجد بيانات اعتماد متاحة بعد.</p>
                @endif
            @endif
        </div>

        {{-- Linked Tickets --}}
        <div x-show="tab === 'tickets'" x-cloak class="card card-padded">
            <div class="flex items-center justify-between mb-5">
                <h3 class="font-bold text-navy-900">التذاكر المرتبطة</h3>
                <a href="{{ route('customer.tickets.create', ['order_id' => $order->id]) }}" class="btn btn-outline btn-sm">+ تذكرة جديدة</a>
            </div>
            @if($order->tickets->isEmpty())
                <p class="text-navy-500">لا توجد تذاكر لهذا الطلب.</p>
            @else
                <ul class="space-y-2">
                    @foreach($order->tickets as $tk)
                        <li class="flex items-center justify-between gap-3 p-3 rounded-xl bg-muted/40">
                            <div class="min-w-0">
                                <p class="font-mono font-bold text-brand-700">{{ $tk->ticket_number }}</p>
                                <p class="text-sm text-navy-700 truncate">{{ $tk->subject }}</p>
                            </div>
                            <x-status-badge :status="$tk->status" />
                            <a href="{{ route('customer.tickets.show', $tk) }}" class="btn btn-ghost btn-sm">عرض</a>
                        </li>
                    @endforeach
                </ul>
            @endif
        </div>
    </div>
</x-layouts.customer>