@extends('layouts.account', ['title' => $ticket->ticket_number.' | RaseedNow'])

@php
    $isClosed = in_array($ticket->status, ['resolved', 'closed'], true);
    $statusLabel = match($ticket->status) {
        'open' => 'فريق الدعم متاح الآن',
        'pending_customer' => 'بانتظار ردك',
        'resolved', 'closed' => 'تم إغلاق المحادثة',
        default => 'تذكرة دعم'
    };
@endphp

@section('account_content')
    <section class="rn-support-chat-page">
        <div class="rn-chat-topbar">
            <a href="{{ route('account.tickets') }}" class="rn-chat-back" aria-label="كل التذاكر">→</a>
            <span class="rn-chat-support-avatar">R</span>
            <div class="rn-chat-title"><h1>فريق دعم RaseedNow</h1><p><i @class(['is-open' => ! $isClosed])></i>{{ $statusLabel }}</p></div>
            <span class="rn-chat-ticket-number">{{ $ticket->ticket_number }}</span>
        </div>

        <div class="rn-chat-context"><strong>{{ $ticket->subject }}</strong><span>أولوية {{ $ticket->priority === 'high' ? 'عاجلة' : ($ticket->priority === 'low' ? 'منخفضة' : 'عادية') }}</span></div>

        <div class="rn-chat-window" aria-label="محادثة الدعم">
            <div class="rn-chat-day"><span>بداية المحادثة</span></div>
            @forelse($ticket->messages as $message)
                @php
                    $isSelf = $message->sender_type === 'customer';
                @endphp
                <article @class(['rn-chat-message', 'is-self' => $isSelf, 'is-support' => ! $isSelf])>
                    @if(! $isSelf)<span class="rn-chat-message-avatar">R</span>@endif
                    <div class="rn-chat-bubble">
                        @if(! $isSelf)<strong>فريق الدعم</strong>@endif
                        <p>{{ $message->body }}</p>
                        <time>{{ $message->created_at->format('h:i A') }} @if($isSelf)<i title="تم الإرسال">✓✓</i>@endif</time>
                    </div>
                </article>
            @empty
                <div class="rn-chat-empty"><span>💬</span><strong>ابدأ المحادثة مع فريق الدعم</strong><p>رد فريقنا هيظهر هنا فورًا.</p></div>
            @endforelse
        </div>

        @if($isClosed)
            <div class="rn-chat-closed"><span>✓</span><div><strong>المحادثة مغلقة</strong><p>لو ما زلت تحتاج مساعدة، افتح تذكرة جديدة من صفحة الدعم.</p></div><a href="{{ route('account.tickets') }}">العودة للتذاكر</a></div>
        @else
            <form method="POST" action="{{ route('account.support.reply', $ticket) }}" class="rn-chat-composer">
                @csrf
                <textarea name="message" rows="1" maxlength="2000" required placeholder="اكتب رسالتك هنا..." aria-label="رسالتك"></textarea>
                <button type="submit" aria-label="إرسال الرسالة"><svg viewBox="0 0 24 24" fill="none"><path d="m21 3-8.8 18-2.2-7.8L3 11 21 3Zm-10.9 10.2L15 8.7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></button>
            </form>
        @endif
    </section>
@endsection