@extends('layouts.app')

@section('content')
<section class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1>تفاصيل البلاغ #{{ $chatReport->id }}</h1>
            </div>
            <div class="col-sm-6 text-right">
                <a href="{{ route('admin.chatReports.index') }}" class="btn btn-default"><i class="fas fa-arrow-left"></i> عودة</a>
            </div>
        </div>
    </div>
</section>

<div class="content px-3">
    @include('flash::message')
    @include('common.errors')

    <!-- Quick Action Toolbar -->
    <div class="card shadow-sm mb-4" style="border-radius: 12px; border-left: 5px solid #007bff;">
        <div class="card-body py-3 d-flex justify-content-between align-items-center">
            <div>
                <h5 class="mb-0 font-weight-bold">إجراءات سريعة (ضغطة واحدة):</h5>
                <small class="text-muted">الرجاء مراجعة سياق المحادثة قبل اتخاذ القرار.</small>
            </div>
            <div>
                <!-- Ban User -->
                <form action="{{ route('admin.chatReports.banUser', $chatReport->id) }}" method="POST" class="d-inline">
                    @csrf
                    <button type="submit" class="btn btn-danger shadow-sm mr-2" onclick="return confirm('هل أنت متأكد من حظر المستخدم لمدة 24 ساعة؟')">
                        <i class="fas fa-ban"></i> حظر لـ 24 ساعة
                    </button>
                </form>

                <!-- Delete & Warn -->
                <form action="{{ route('admin.chatReports.deleteAndWarn', $chatReport->id) }}" method="POST" class="d-inline">
                    @csrf
                    <button type="submit" class="btn btn-warning shadow-sm mr-2 text-white" onclick="return confirm('سيتم مسح الرسالة وتسجيل إنذار للمستخدم. هل أنت متأكد؟')">
                        <i class="fas fa-trash-alt"></i> مسح وإنذار
                    </button>
                </form>

                <!-- Ignore -->
                <form action="{{ route('admin.chatReports.ignore', $chatReport->id) }}" method="POST" class="d-inline">
                    @csrf
                    <button type="submit" class="btn btn-success shadow-sm" onclick="return confirm('تجاهل هذا البلاغ كأنه لم يكن؟')">
                        <i class="fas fa-check"></i> تجاهل البلاغ
                    </button>
                </form>
            </div>
        </div>
    </div>

    <div class="row">
        <!-- Report Information -->
        <div class="col-md-5">
            <div class="card shadow-sm" style="border-radius: 12px;">
                <div class="card-header bg-white border-0">
                    <h3 class="card-title font-weight-bold"><i class="fa fa-info-circle text-info"></i> معلومات البلاغ</h3>
                </div>
                <div class="card-body">
                    <ul class="list-group list-group-flush">
                        <li class="list-group-item d-flex justify-content-between align-items-center">
                            <strong>المُبلّغ:</strong>
                            <span>{{ $chatReport->reporter->full_name ?? 'غير معروف' }} <br><small class="text-muted">{{ $chatReport->reporter->contact_no ?? '' }}</small></span>
                        </li>
                        <li class="list-group-item d-flex justify-content-between align-items-center">
                            <strong>سبب البلاغ:</strong>
                            <span class="text-danger font-weight-bold">{{ $chatReport->reason }}</span>
                        </li>
                        <li class="list-group-item d-flex justify-content-between align-items-center">
                            <strong>تاريخ البلاغ:</strong>
                            <span>{{ $chatReport->created_at->format('Y-m-d H:i') }}</span>
                        </li>
                        <li class="list-group-item d-flex justify-content-between align-items-center">
                            <strong>الحالة:</strong>
                            @if($chatReport->status === 'pending')
                                <span class="badge badge-warning p-2">قيد المراجعة</span>
                            @else
                                <span class="badge badge-success p-2">تمت المراجعة</span>
                            @endif
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        <!-- Chat Context Viewer -->
        <div class="col-md-7">
            <div class="card shadow-sm border-danger" style="border-radius: 12px; display: flex; flex-direction: column; height: 600px;">
                <div class="card-header bg-danger text-white" style="border-top-left-radius: 12px; border-top-right-radius: 12px;">
                    <h3 class="card-title font-weight-bold"><i class="fa fa-comments"></i> سياق المحادثة (Chat Context)</h3>
                </div>
                
                <div class="card-body p-3" style="background-color: #e5ddd5; overflow-y: auto; display: flex; flex-direction: column;" id="chat-context-container">
                    @if($chatReport->message)
                        <!-- Load older button -->
                        <div class="text-center mb-3">
                            <button class="btn btn-sm btn-light rounded-pill shadow-sm" id="load-older-btn" onclick="loadContext('before')">
                                <i class="fas fa-arrow-up"></i> تحميل رسائل أقدم
                            </button>
                        </div>
                        
                        <div id="messages-container" class="d-flex flex-column">
                            <!-- Messages will be injected here via JS -->
                            <div class="text-center" id="initial-loader">
                                <i class="fas fa-spinner fa-spin text-muted"></i> جاري تحميل السياق...
                            </div>
                        </div>

                        <!-- Load newer button -->
                        <div class="text-center mt-3">
                            <button class="btn btn-sm btn-light rounded-pill shadow-sm" id="load-newer-btn" onclick="loadContext('after')">
                                <i class="fas fa-arrow-down"></i> تحميل رسائل أحدث
                            </button>
                        </div>
                    @else
                        <div class="alert alert-warning text-center mt-4">
                            الرسالة غير موجودة أو تم حذفها نهائياً من قاعدة البيانات.
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('third_party_scripts')
@if($chatReport->message)
<script>
    const reportMessageId = {{ $chatReport->message_id }};
    const contextUrl = "{{ route('admin.chatReports.context', $chatReport->id) }}";
    const messagesContainer = document.getElementById('messages-container');
    const initialLoader = document.getElementById('initial-loader');
    const currentUserId = {{ $chatReport->message->sender_id }}; // We consider the offender as the 'right' side for focus
    
    // Store first and last loaded message IDs to fetch correctly
    let oldestMessageId = null;
    let newestMessageId = null;

    function renderMessage(msg, isReported = false) {
        // Simple WhatsApp-like styling
        const isOffender = (msg.sender_id === currentUserId);
        const alignmentClass = isOffender ? 'align-self-end' : 'align-self-start';
        const bgClass = isReported ? 'bg-danger text-white' : (isOffender ? 'bg-white' : 'bg-success text-white');
        const shadow = isReported ? 'shadow' : 'shadow-sm';
        const reportedBadge = isReported ? '<div class="badge badge-warning mb-1"><i class="fas fa-flag"></i> الرسالة المُبلغ عنها</div><br>' : '';
        const senderName = msg.sender ? (msg.sender.first_name + ' ' + msg.sender.last_name) : 'غير معروف';
        
        const date = new Date(msg.created_on || msg.created_at);
        const timeStr = date.toLocaleTimeString('ar-LY', { hour: '2-digit', minute: '2-digit' });

        return `
            <div class="${alignmentClass} mb-3" style="max-width: 75%;">
                <div class="p-2 rounded ${bgClass} ${shadow}" style="border-radius: 12px; position: relative;">
                    ${reportedBadge}
                    <small class="d-block mb-1 ${isReported ? 'text-light' : 'text-muted'} font-weight-bold" style="font-size: 10px;">${senderName}</small>
                    <div style="font-size: 15px; word-wrap: break-word;">${msg.message}</div>
                    <div class="text-right mt-1">
                        <small class="${isReported ? 'text-light' : 'text-muted'}" style="font-size: 10px;">${timeStr}</small>
                    </div>
                </div>
            </div>
        `;
    }

    function initContext() {
        fetch(contextUrl + "?limit=3")
            .then(res => res.json())
            .then(data => {
                initialLoader.remove();
                
                let html = '';
                
                // Render Before
                if(data.before && data.before.length > 0) {
                    oldestMessageId = data.before[0].id;
                    data.before.forEach(msg => {
                        html += renderMessage(msg);
                    });
                } else {
                    document.getElementById('load-older-btn').style.display = 'none';
                }
                
                // Render Current
                html += renderMessage(data.current, true);
                if(!oldestMessageId) oldestMessageId = data.current.id;
                newestMessageId = data.current.id;
                
                // Render After
                if(data.after && data.after.length > 0) {
                    newestMessageId = data.after[data.after.length - 1].id;
                    data.after.forEach(msg => {
                        html += renderMessage(msg);
                    });
                } else {
                    document.getElementById('load-newer-btn').style.display = 'none';
                }
                
                messagesContainer.innerHTML = html;
                
                // Scroll to center/reported message roughly
                const container = document.getElementById('chat-context-container');
                container.scrollTop = container.scrollHeight / 3;
            })
            .catch(err => {
                console.error(err);
                initialLoader.innerHTML = '<span class="text-danger">فشل في تحميل السياق.</span>';
            });
    }

    function loadContext(direction) {
        const btn = direction === 'before' ? document.getElementById('load-older-btn') : document.getElementById('load-newer-btn');
        const originalText = btn.innerHTML;
        btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> جاري التحميل...';
        btn.disabled = true;

        fetch(contextUrl + "?direction=" + direction + "&limit=5")
            .then(res => res.json())
            .then(data => {
                btn.innerHTML = originalText;
                btn.disabled = false;
                
                if(data.messages && data.messages.length > 0) {
                    let newHtml = '';
                    data.messages.forEach(msg => {
                        newHtml += renderMessage(msg);
                    });
                    
                    if(direction === 'before') {
                        // Filter out if we already have it (basic protection)
                        messagesContainer.insertAdjacentHTML('afterbegin', newHtml);
                    } else {
                        messagesContainer.insertAdjacentHTML('beforeend', newHtml);
                    }
                } else {
                    btn.style.display = 'none'; // No more messages
                }
            })
            .catch(err => {
                console.error(err);
                btn.innerHTML = originalText;
                btn.disabled = false;
            });
    }

    // Initialize on page load
    document.addEventListener('DOMContentLoaded', initContext);
</script>
@endif
@endpush