@php
    $user = auth()->user();
    $role = $user->membership_status ?? $user->role ?? 'member';

    switch ($role) {
        case 'super-admin':
            $layout = 'layouts.superadmin';
            break;

        case 'advisor':
            $layout = 'layouts.advisor';
            break;

        case 'admin':
        case 'moderator':
            $layout = 'layouts.moderator';
            break;

        case 'official':
        case 'beta':
        case 'member':
        default:
            $layout = 'layouts.member';
            break;
    }
@endphp

@section('title', 'ãÍÇÏËÉ ãÚ ' . $user->name)

@section('content')
<div class="container mx-auto px-4 py-8">
    <div class="max-w-4xl mx-auto">
        {{-- Header --}}
        <div class="mb-6">
            <div class="flex items-center justify-between">
                <div class="flex items-center">
                    <a href="{{ route('member.messages.index') }}"
                       class="mr-4 p-2 rounded-lg hover:bg-slate-100 dark:hover:bg-white/10 transition-colors">
                        <i class="fas fa-arrow-right text-slate-600 dark:text-white/70"></i>
                    </a>
                    
                    <div class="flex items-center">
                        <div class="relative mr-3">
                            <img src="{{ $user->avatar ?? '/images/default-avatar.png' }}" 
                                 class="h-12 w-12 rounded-full object-cover ring-2 ring-emerald-500">
                            @if($user->last_seen && $user->last_seen->diffInMinutes(now()) < 5)
                                <span class="absolute -bottom-0.5 -right-0.5 h-4 w-4 rounded-full 
                                             bg-emerald-500 ring-2 ring-white dark:ring-black"></span>
                            @endif
                        </div>
                        <div>
                            <h1 class="text-xl font-bold text-slate-900 dark:text-white">
                                {{ $user->name }}
                            </h1>
                            <div class="flex items-center gap-2 mt-1">
                                <span class="text-sm text-slate-600 dark:text-slate-400">
                                    @if($user->last_seen && $user->last_seen->diffInMinutes(now()) < 5)
                                        <span class="text-emerald-600 dark:text-emerald-300">
                                            <i class="fas fa-circle text-[8px] ml-1"></i>
                                            äÔØ ÇáÂä
                                        </span>
                                    @else
                                        <i class="fas fa-clock ml-1"></i>
                                        ÂÎÑ äÔÇØ: {{ $user->last_seen ? $user->last_seen->diffForHumans() : 'ÛíÑ ãÚÑæÝ' }}
                                    @endif
                                </span>
                                
                                @if($user->role)
                                    <span class="text-xs px-2 py-0.5 rounded-full bg-slate-100 dark:bg-slate-700 
                                                text-slate-600 dark:text-slate-300">
                                        {{ $user->role }}
                                    </span>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="flex gap-2">
                    @if($unreadCount > 0)
                    <form action="{{ route('member.messages.conversation.mark-read', $user) }}" 
                          method="POST" class="inline">
                        @csrf
                        <button type="submit"
                                class="px-3 py-1.5 bg-emerald-600 hover:bg-emerald-700 text-white 
                                       text-sm rounded-lg transition-colors">
                            <i class="fas fa-check-double ml-1"></i>
                            ÊÚííä ßãÞÑæÁ
                        </button>
                    </form>
                    @endif
                    
                    <form action="{{ route('member.messages.conversation.delete', $user) }}" 
                          method="POST" class="inline"
                          onsubmit="return confirm('åá ÃäÊ ãÊÃßÏ ãä ÍÐÝ åÐå ÇáãÍÇÏËÉ¿ ÓíÊã ÍÐÝ ÌãíÚ ÇáÑÓÇÆá ÈÔßá äåÇÆí.');">
                        @csrf
                        @method('DELETE')
                        <button type="submit"
                                class="px-3 py-1.5 bg-red-100 hover:bg-red-200 text-red-700 
                                       dark:bg-red-900/30 dark:hover:bg-red-900/50 dark:text-red-300
                                       text-sm rounded-lg transition-colors">
                            <i class="fas fa-trash ml-1"></i>
                            ÍÐÝ ÇáãÍÇÏËÉ
                        </button>
                    </form>
                </div>
            </div>
        </div>
        
        {{-- Messages Container --}}
        <div class="bg-white dark:bg-slate-800 rounded-xl shadow mb-6 overflow-hidden">
            <div class="h-[500px] overflow-y-auto p-4" id="messages-container">
                @if($messages->count() > 0)
                    @foreach($messages as $message)
                        <div class="mb-4">
                            <div class="flex {{ $message->sender_id == auth()->id() ? 'justify-end' : 'justify-start' }}">
                                <div class="max-w-[70%]">
                                    <div class="{{ $message->sender_id == auth()->id() ? 
                                                'bg-emerald-500 text-white rounded-tl-2xl rounded-tr-2xl rounded-bl-2xl' : 
                                                'bg-slate-100 dark:bg-slate-700 text-slate-900 dark:text-white rounded-tr-2xl rounded-br-2xl rounded-bl-2xl' }} 
                                               px-4 py-3">
                                        <p class="break-words">{{ $message->message }}</p>
                                        
                                        <div class="flex justify-between items-center mt-2">
                                            <span class="text-xs {{ $message->sender_id == auth()->id() ? 
                                                                    'text-emerald-100' : 
                                                                    'text-slate-500 dark:text-slate-400' }}">
                                                {{ $message->created_at->format('h:i A') }}
                                            </span>
                                            
                                            @if($message->sender_id == auth()->id())
                                                <span class="text-xs ml-2">
                                                    @if($message->is_read)
                                                        <i class="fas fa-check-double text-emerald-300"></i>
                                                    @else
                                                        <i class="fas fa-check text-slate-400"></i>
                                                    @endif
                                                </span>
                                            @endif
                                        </div>
                                    </div>
                                    
                                    @if($message->sender_id != auth()->id())
                                        <div class="text-xs text-slate-500 dark:text-slate-400 mt-1 mr-1">
                                            {{ $message->sender->name }}
                                        </div>
                                    @endif
                                </div>
                            </div>
                        </div>
                    @endforeach
                @else
                    <div class="h-full flex items-center justify-center">
                        <div class="text-center">
                            <div class="inline-flex h-16 w-16 rounded-full bg-emerald-100 dark:bg-emerald-900/30 
                                        items-center justify-center mb-4">
                                <i class="fa-regular fa-comments text-emerald-600 dark:text-emerald-300 text-xl"></i>
                            </div>
                            <h3 class="text-lg font-medium text-slate-900 dark:text-white mb-2">
                                áÇ ÊæÌÏ ÑÓÇÆá ÈÚÏ
                            </h3>
                            <p class="text-slate-600 dark:text-slate-400">
                                ÇÈÏà ãÍÇÏËÉ ÌÏíÏÉ ãÚ {{ $user->name }}
                            </p>
                        </div>
                    </div>
                @endif
            </div>
            
            {{-- Loading indicator for new messages --}}
            <div id="loading-messages" class="hidden text-center py-4">
                <div class="inline-block animate-spin h-6 w-6 border-2 border-emerald-500 
                            border-t-transparent rounded-full"></div>
            </div>
        </div>
        
        {{-- Message Input --}}
        <div class="bg-white dark:bg-slate-800 rounded-xl shadow p-4">
            <form id="message-form" class="flex gap-2">
                @csrf
                <input type="hidden" name="receiver_id" value="{{ $user->id }}">
                
                <div class="flex-1">
                    <textarea name="message" 
                              id="message-input"
                              rows="2"
                              placeholder="ÇßÊÈ ÑÓÇáÊß åäÇ..."
                              class="w-full px-4 py-3 rounded-lg border border-slate-300 dark:border-slate-600
                                     bg-white dark:bg-slate-700 text-slate-900 dark:text-white
                                     focus:outline-none focus:ring-2 focus:ring-emerald-500 resize-none"
                              oninput="autoResize(this)"
                              required></textarea>
                </div>
                
                <div class="flex flex-col gap-2">
                    <button type="submit"
                            class="h-full px-6 bg-emerald-600 hover:bg-emerald-700 text-white 
                                   rounded-lg font-medium transition-colors flex items-center justify-center">
                        <i class="fas fa-paper-plane"></i>
                    </button>
                    
                    <button type="button" onclick="clearMessage()"
                            class="px-4 py-2 bg-slate-100 hover:bg-slate-200 dark:bg-slate-700 
                                   dark:hover:bg-slate-600 text-slate-700 dark:text-slate-300 
                                   rounded-lg font-medium transition-colors">
                        ãÓÍ
                    </button>
                </div>
            </form>
            
            @if(!$user->allow_private_messages)
                <div class="mt-3 p-3 bg-amber-50 dark:bg-amber-900/20 border border-amber-200 
                           dark:border-amber-800 rounded-lg">
                    <div class="flex items-center text-amber-800 dark:text-amber-300">
                        <i class="fas fa-exclamation-triangle ml-2"></i>
                        <span class="text-sm">
                            {{ $user->name }} ÞÇã ÈÅÛáÇÞ ÇáÑÓÇÆá ÇáÎÇÕÉ. áÇ íãßäß ÅÑÓÇá ÑÓÇÆá ÌÏíÏÉ.
                        </span>
                    </div>
                </div>
            @endif
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // ÊãÑíÑ ÇáãÍÊæì Åáì ÇáÃÓÝá
    scrollToBottom();
    
    // ÅÑÓÇá ÇáÑÓÇáÉ
    document.getElementById('message-form').addEventListener('submit', sendMessage);
    
    // ÊÍãíá ÇáÑÓÇÆá ÇáÌÏíÏÉ ÊáÞÇÆíÇð
    startPolling();
    
    // ÇáÊÑßíÒ Úáì ÍÞá ÇáÑÓÇáÉ
    document.getElementById('message-input').focus();
});

let pollingInterval = null;
let lastMessageId = {{ $messages->last() ? $messages->last()->id : 0 }};

function sendMessage(e) {
    e.preventDefault();
    
    const form = e.target;
    const formData = new FormData(form);
    const messageInput = document.getElementById('message-input');
    const message = messageInput.value.trim();
    
    if (!message) return;
    
    // ÅÙåÇÑ ÇáÑÓÇáÉ ÝæÑíÇð
    addMessageToChat({
        id: 'temp-' + Date.now(),
        sender_id: {{ auth()->id() }},
        message: message,
        created_at: new Date().toISOString(),
        is_read: false,
        sender: {
            name: 'ÃäÊ',
            avatar: '{{ auth()->user()->avatar ?? '/images/default-avatar.png' }}'
        }
    });
    
    // ÅÑÓÇá Åáì ÇáÎÇÏã
    fetch('{{ route("member.messages.send") }}', {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}',
            'Accept': 'application/json'
        },
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            // ÊÍÏíË ÇáÑÓÇáÉ ÇáãÄÞÊÉ ÈÇáÑÓÇáÉ ÇáÍÞíÞíÉ
            updateTempMessage(data.message);
            messageInput.value = '';
            autoResize(messageInput);
        } else {
            // ÅÒÇáÉ ÇáÑÓÇáÉ ÇáãÄÞÊÉ æÅÙåÇÑ ÎØÃ
            removeTempMessage();
            alert(data.error || 'ÍÏË ÎØà ÃËäÇÁ ÅÑÓÇá ÇáÑÓÇáÉ');
        }
    })
    .catch(error => {
        console.error('Error sending message:', error);
        removeTempMessage();
        alert('ÍÏË ÎØà ÃËäÇÁ ÅÑÓÇá ÇáÑÓÇáÉ');
    });
}

function addMessageToChat(message) {
    const container = document.getElementById('messages-container');
    const isMe = message.sender_id === {{ auth()->id() }};
    
    const messageHtml = `
        <div class="mb-4" id="message-${message.id}">
            <div class="flex ${isMe ? 'justify-end' : 'justify-start'}">
                <div class="max-w-[70%]">
                    <div class="${isMe ? 
                                'bg-emerald-500 text-white rounded-tl-2xl rounded-tr-2xl rounded-bl-2xl' : 
                                'bg-slate-100 dark:bg-slate-700 text-slate-900 dark:text-white rounded-tr-2xl rounded-br-2xl rounded-bl-2xl'} 
                               px-4 py-3">
                        <p class="break-words">${message.message}</p>
                        
                        <div class="flex justify-between items-center mt-2">
                            <span class="text-xs ${isMe ? 
                                                    'text-emerald-100' : 
                                                    'text-slate-500 dark:text-slate-400'}">
                                ${new Date(message.created_at).toLocaleTimeString('ar-EG', { 
                                    hour: '2-digit', 
                                    minute: '2-digit' 
                                })}
                            </span>
                            
                            ${isMe ? `
                                <span class="text-xs ml-2">
                                    ${message.is_read ? 
                                        '<i class="fas fa-check-double text-emerald-300"></i>' : 
                                        '<i class="fas fa-check text-slate-400"></i>'}
                                </span>
                            ` : ''}
                        </div>
                    </div>
                    
                    ${!isMe ? `
                        <div class="text-xs text-slate-500 dark:text-slate-400 mt-1 mr-1">
                            ${message.sender.name}
                        </div>
                    ` : ''}
                </div>
            </div>
        </div>
    `;
    
    container.insertAdjacentHTML('beforeend', messageHtml);
    scrollToBottom();
    
    // ÊÍÏíË ÂÎÑ ÑÓÇáÉ ID
    if (!message.id.toString().startsWith('temp-')) {
        lastMessageId = message.id;
    }
}

function updateTempMessage(realMessage) {
    const tempMessage = document.querySelector(`#message-temp-${realMessage.created_at}`);
    if (tempMessage) {
        tempMessage.id = `message-${realMessage.id}`;
        
        const checkIcon = tempMessage.querySelector('.fa-check');
        if (checkIcon && realMessage.is_read) {
            checkIcon.classList.remove('fa-check', 'text-slate-400');
            checkIcon.classList.add('fa-check-double', 'text-emerald-300');
        }
    }
}

function removeTempMessage() {
    const tempMessages = document.querySelectorAll('[id^="message-temp-"]');
    tempMessages.forEach(msg => msg.remove());
}

function loadNewMessages() {
    fetch(`/member/messages/api/conversation/{{ $user->id }}?last_id=${lastMessageId}`)
        .then(response => response.json())
        .then(data => {
            if (data.messages && data.messages.length > 0) {
                data.messages.forEach(message => {
                    // ÊÃßÏ ãä Ãä ÇáÑÓÇáÉ áíÓÊ ãæÌæÏÉ ÈÇáÝÚá
                    if (!document.getElementById(`message-${message.id}`)) {
                        addMessageToChat(message);
                    }
                });
                
                // ÊÍÏíË ÂÎÑ ÑÓÇáÉ ID
                if (data.messages.length > 0) {
                    lastMessageId = data.messages[data.messages.length - 1].id;
                }
            }
        })
        .catch(error => {
            console.error('Error loading new messages:', error);
        });
}

function startPolling() {
    pollingInterval = setInterval(loadNewMessages, 5000); // ßá 5 ËæÇäò
}

function stopPolling() {
    if (pollingInterval) {
        clearInterval(pollingInterval);
        pollingInterval = null;
    }
}

function scrollToBottom() {
    const container = document.getElementById('messages-container');
    if (container) {
        container.scrollTop = container.scrollHeight;
    }
}

function autoResize(textarea) {
    textarea.style.height = 'auto';
    textarea.style.height = (textarea.scrollHeight) + 'px';
}

function clearMessage() {
    const messageInput = document.getElementById('message-input');
    messageInput.value = '';
    messageInput.style.height = 'auto';
    messageInput.focus();
}

// ÚäÏ ãÛÇÏÑÉ ÇáÕÝÍÉ
window.addEventListener('beforeunload', stopPolling);
</script>
@endpush