@extends('admin.layouts.app')

@section('content')
    <div class="py-12">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
            <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
                <div class="flex flex-col h-[600px]">
                    <!-- Chat Header -->
                    <div class="flex items-center justify-between px-6 py-4 border-b border-gray-200 dark:border-gray-800">
                        <div class="flex items-center gap-4">
                            <a href="{{ route('admin.chat.index') }}" class="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300">
                                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"/>
                                </svg>
                            </a>
                            <div>
                                <h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
                                    {{ $user->name }}
                                </h2>
                                <p class="text-sm text-gray-500 dark:text-gray-400">{{ $user->email }}</p>
                            </div>
                        </div>
                        <div class="flex items-center space-x-2">
                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-800 dark:text-green-100">
                                Online
                            </span>
                        </div>
                    </div>

                    <!-- Messages Container -->
                    <div id="messagesContainer" class="flex-1 overflow-y-auto p-4 space-y-4">
                        @foreach($messages->reverse() as $message)
                            <div class="flex {{ $message->sender_id === auth()->id() ? 'justify-end' : 'justify-start' }}">
                                <div class="max-w-[70%] {{ $message->sender_id === auth()->id() ? 'bg-blue-500 text-white' : 'bg-gray-100 dark:bg-gray-700 text-gray-900 dark:text-gray-100' }} rounded-lg px-4 py-2">
                                    @if($message->file_path)
                                        <div class="mb-2">
                                            <a href="{{ Storage::url($message->file_path) }}" target="_blank" class="text-sm underline">
                                                View Attachment
                                            </a>
                                        </div>
                                    @endif
                                    <p>{{ $message->message }}</p>
                                    <p class="text-xs mt-1 {{ $message->sender_id === auth()->id() ? 'text-blue-100' : 'text-gray-500 dark:text-gray-400' }}">
                                        {{ $message->created_at->format('g:i A') }}
                                        @if($message->sender_id === auth()->id() && $message->seen_at)
                                            <span class="ml-2">✓✓</span>
                                        @endif
                                    </p>
                                </div>
                            </div>
                        @endforeach
                    </div>

                    <!-- Message Input -->
                    <div class="border-t border-gray-200 dark:border-gray-700 p-4">
                        <form id="messageForm" class="flex space-x-4">
                            <div class="flex-1">
                                <textarea
                                    id="messageInput"
                                    rows="1"
                                    class="w-full rounded-lg border-gray-300 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 focus:border-blue-500 focus:ring-blue-500"
                                    placeholder="Type your message..."
                                ></textarea>
                            </div>
                            <div class="flex items-center space-x-2">
                                <label class="cursor-pointer">
                                    <input type="file" id="fileInput" class="hidden" accept="image/*,.pdf">
                                    <svg class="w-6 h-6 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13"/>
                                    </svg>
                                </label>
                                <button type="submit" class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
                                    Send
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @push('scripts')
    <script>
        const messagesContainer = document.getElementById('messagesContainer');
        const messageForm = document.getElementById('messageForm');
        const messageInput = document.getElementById('messageInput');
        const fileInput = document.getElementById('fileInput');
        let selectedFile = null;

        // Scroll to bottom on load
        messagesContainer.scrollTop = messagesContainer.scrollHeight;

        // Handle file selection
        fileInput.addEventListener('change', function(e) {
            selectedFile = e.target.files[0];
            if (selectedFile) {
                // You could show a preview or filename here
            }
        });

        // Handle message submission
        messageForm.addEventListener('submit', async function(e) {
            e.preventDefault();
            const message = messageInput.value.trim();
            if (!message && !selectedFile) return;

            const formData = new FormData();
            formData.append('message', message);
            if (selectedFile) {
                formData.append('file', selectedFile);
            }

            try {
                const response = await fetch(`/admin/chat/{{ $user->id }}`, {
                    method: 'POST',
                    body: formData,
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    }
                });

                if (response.ok) {
                    messageInput.value = '';
                    fileInput.value = '';
                    selectedFile = null;
                    // The new message will be added via the WebSocket event
                }
            } catch (error) {
                console.error('Error sending message:', error);
            }
        });

        // Listen for new messages
        Echo.private(`chat.{{ auth()->id() }}`)
            .listen('NewMessage', (e) => {
                const message = e.message;
                const isOwnMessage = message.sender_id === {{ auth()->id() }};
                
                const messageHtml = `
                    <div class="flex ${isOwnMessage ? 'justify-end' : 'justify-start'}">
                        <div class="max-w-[70%] ${isOwnMessage ? 'bg-blue-500 text-white' : 'bg-gray-100 dark:bg-gray-700 text-gray-900 dark:text-gray-100'} rounded-lg px-4 py-2">
                            ${message.file_path ? `
                                <div class="mb-2">
                                    <a href="/storage/${message.file_path}" target="_blank" class="text-sm underline">
                                        View Attachment
                                    </a>
                                </div>
                            ` : ''}
                            <p>${message.message}</p>
                            <p class="text-xs mt-1 ${isOwnMessage ? 'text-blue-100' : 'text-gray-500 dark:text-gray-400'}">
                                ${new Date(message.created_at).toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' })}
                                ${isOwnMessage ? '<span class="ml-2">✓✓</span>' : ''}
                            </p>
                        </div>
                    </div>
                `;
                
                messagesContainer.insertAdjacentHTML('beforeend', messageHtml);
                messagesContainer.scrollTop = messagesContainer.scrollHeight;
            });
    </script>
    @endpush
@endsection