@php
    use App\Enums\TicketStatus;
    $current = $ticket->status instanceof TicketStatus ? $ticket->status : TicketStatus::tryFrom((string) $ticket->status);
    $isClosed = in_array($current, [TicketStatus::Resolved, TicketStatus::Closed], true);
    $canRate = $isClosed && ! $ticket->rated_at;
@endphp

<x-layouts.customer :title="$ticket->subject">
    <x-slot name="pageTitle">{{ $ticket->subject }}</x-slot>
    <x-slot name="pageSubtitle">
        <span class="font-mono">{{ $ticket->ticket_number }}</span> · {{ $ticket->department?->name_ar ?? '—' }}
        @if($ticket->order)
            · مرتبطة بـ <a href="{{ route('customer.orders.show', $ticket->order) }}" class="font-mono text-brand-700 hover:underline">{{ $ticket->order->order_number }}</a>
        @endif
    </x-slot>
    <x-slot name="pageActions">
        <x-status-badge :status="$ticket->status" />
        @if(! $isClosed)
            <form method="POST" action="{{ route('customer.tickets.close', $ticket) }}"
                  onsubmit="return confirm('هل المشكلة محلولة؟ سيتم إغلاق التذكرة.');" class="inline">
                @csrf
                <button class="btn btn-outline btn-sm">إغلاق التذكرة</button>
            </form>
        @endif
    </x-slot>

    <div class="grid lg:grid-cols-[1.4fr_1fr] gap-5">
        {{-- Conversation --}}
        <div class="card">
            <div class="p-5 border-b border-border/60">
                <h3 class="font-bold text-navy-900">المحادثة</h3>
            </div>
            <div class="p-5 space-y-4 max-h-[640px] overflow-y-auto scrollbar-thin">
                @forelse($ticket->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-10 h-10 rounded-full {{ $isMine ? 'bg-brand-100 text-brand-700' : 'bg-navy-100 text-navy-700' }} font-bold shrink-0">
                            {{ mb_substr($msg->sender?->name ?? 'م', 0, 1) }}
                        </span>
                        <div class="max-w-lg {{ $isMine ? 'bg-brand-600 text-white' : 'bg-muted text-navy-800 border border-border' }} rounded-2xl px-4 py-3">
                            <p class="text-sm whitespace-pre-wrap leading-relaxed">{{ $msg->message }}</p>
                            <p class="text-[10px] mt-1.5 {{ $isMine ? 'text-white/80' : 'text-navy-500' }}">
                                {{ $msg->sender?->name }} · {{ $msg->created_at->translatedFormat('d M Y H:i') }}
                            </p>
                        </div>
                    </div>
                @empty
                    <p class="text-navy-500 text-center py-8">لا توجد رسائل بعد.</p>
                @endforelse
            </div>

            @if(! $isClosed)
                <form method="POST" action="{{ route('customer.tickets.reply', $ticket) }}" class="p-5 border-t border-border/60 space-y-3">
                    @csrf
                    <textarea name="message" rows="3" required minlength="2" class="form-textarea" placeholder="اكتب ردك هنا..."></textarea>
                    <div class="flex justify-end">
                        <button class="btn btn-primary">إرسال الرد</button>
                    </div>
                </form>
            @else
                <div class="p-5 border-t border-border/60 bg-muted/40 text-center">
                    <p class="text-sm text-navy-500">التذكرة مغلقة. افتح تذكرة جديدة إذا واجهت مشكلة أخرى.</p>
                </div>
            @endif
        </div>

        {{-- Sidebar --}}
        <div class="space-y-5">
            <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>
                        @php $p = $ticket->priority instanceof \App\Enums\TicketPriority ? $ticket->priority->labelAr() : (string)$ticket->priority; @endphp
                        <span class="font-bold">{{ $p }}</span>
                    </dd></div>
                    <div class="flex justify-between"><dt class="text-navy-500">المسؤول</dt><dd class="font-bold">{{ $ticket->assignedTo?->name ?? 'لم يتم التعيين بعد' }}</dd></div>
                    <div class="flex justify-between"><dt class="text-navy-500">تاريخ الفتح</dt><dd>{{ $ticket->created_at->translatedFormat('d M Y') }}</dd></div>
                    <div class="flex justify-between"><dt class="text-navy-500">آخر رد</dt><dd>{{ $ticket->updated_at->diffForHumans() }}</dd></div>
                </dl>
            </div>

            @if($canRate)
                <div class="card card-padded">
                    <h3 class="font-bold text-navy-900 mb-3">قيّم خدمة الدعم</h3>
                    <form method="POST" action="{{ route('customer.tickets.rate', $ticket) }}" class="space-y-3">
                        @csrf
                        <select name="rating" class="form-select">
                            @for($i = 5; $i >= 1; $i--)
                                <option value="{{ $i }}">{{ str_repeat('⭐', $i) }} ({{ $i }}/5)</option>
                            @endfor
                        </select>
                        <textarea name="comment" rows="2" class="form-textarea text-sm" placeholder="رأيك (اختياري)"></textarea>
                        <button class="btn btn-gold w-full">إرسال التقييم</button>
                    </form>
                </div>
            @elseif($ticket->rated_at)
                <div class="card card-padded bg-brand-50/30 border-brand-200">
                    <p class="font-bold text-brand-700 text-center">✓ شكراً لتقييمك ({{ $ticket->rating }}/5)</p>
                </div>
            @endif
        </div>
    </div>
</x-layouts.customer>