@extends('layouts.admin')
@section('title', 'Chat — ' . $chatThread->order->order_id)
@section('page-title', 'Order ' . $chatThread->order->order_id)
@section('content')
<div class="-mx-6 -mt-6 h-[calc(100vh-80px)] flex flex-col bg-background-dark relative">
    
    {{-- Chat Header --}}
    <div class="px-6 py-4 border-b border-white/5 bg-white/5 flex items-center justify-between shrink-0">
        <div class="flex items-center gap-3">
            <a href="{{ route('admin.chats') }}" class="p-2 hover:bg-white/10 rounded-lg text-slate-400 hover:text-white transition-colors">
                <span class="material-symbols-outlined text-sm">arrow_back</span>
            </a>
            <div>
                <h3 class="font-bold text-sm text-slate-200">{{ $chatThread->user->name }}</h3>
                <p class="text-[10px] text-slate-500">{{ $chatThread->user->email }}</p>
            </div>
        </div>
        <div class="flex items-center gap-3">
            @php $clr = ['open'=>'green','closed'=>'slate','resolved'=>'blue'][$chatThread->status] ?? 'slate'; @endphp
            <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-[10px] font-bold uppercase bg-{{ $clr }}-500/10 text-{{ $clr }}-500 border border-{{ $clr }}-500/20">
                <span class="w-1.5 h-1.5 rounded-full bg-current {{ $chatThread->status==='open'?'animate-pulse':'' }}"></span> {{ $chatThread->status }}
            </span>
            
            <a href="{{ route('admin.orders', ['search' => $chatThread->order->order_id]) }}" target="_blank" class="px-3 py-1.5 text-xs font-bold bg-primary/10 text-primary border border-primary/20 rounded-lg hover:bg-primary hover:text-white transition-all">
                View Order
            </a>

            @if($chatThread->status === 'open')
            <form method="POST" action="{{ route('admin.chats.close', $chatThread) }}" class="inline">
                @csrf
                <button type="submit" class="px-3 py-1.5 text-xs font-bold bg-white/5 text-slate-400 border border-white/10 rounded-lg hover:bg-red-500/20 hover:text-red-400 hover:border-red-500/20 transition-all">
                    Close Chat
                </button>
            </form>
            @endif
        </div>
    </div>

    {{-- Messages Area --}}
    <div class="flex-1 overflow-y-auto px-6 py-6 space-y-5" id="adminChatMessages">
        @foreach($messages as $msg)
        @php $isAdmin = $msg->sender->role === 'admin' || $msg->sender->role === 'super_admin'; @endphp
        
        @if($msg->is_system_message)
        <div class="flex items-center justify-center gap-3">
            <div class="h-px bg-white/5 flex-1"></div>
            <span class="text-[10px] text-slate-600 font-bold uppercase tracking-[0.2em]">System • {{ $msg->created_at->format('h:i A') }}</span>
            <div class="h-px bg-white/5 flex-1"></div>
        </div>
        <div class="flex items-center justify-center">
            <div class="bg-blue-500/10 border border-blue-500/20 px-4 py-2 rounded-2xl text-blue-400 text-xs text-center max-w-md">
                {{ $msg->message }}
            </div>
        </div>
        
        @elseif($isAdmin)
        {{-- Admin Message (Right Side) --}}
        <div class="flex flex-col items-end space-y-1 max-w-[80%] self-end ml-auto">
            <span class="text-[10px] text-primary/70 font-semibold mr-2">You (Admin)</span>
            
            @if($msg->message)
            <div class="bg-primary text-background-dark px-4 py-2.5 rounded-2xl rounded-br-none text-sm font-medium leading-relaxed shadow-lg shadow-primary/20">
                {{ $msg->message }}
            </div>
            @endif
            
            @if($msg->file_attachment)
            <a href="{{ $msg->file_url }}" target="_blank" class="group bg-background-dark border border-primary/20 rounded-2xl p-3 flex items-center gap-3 hover:border-primary/40 transition-colors shadow-lg shadow-primary/10">
                <span class="material-symbols-outlined text-primary">{{ $msg->file_type === 'image' ? 'image' : 'description' }}</span>
                <div>
                    <p class="text-xs font-bold text-slate-200">{{ $msg->file_name }}</p>
                    <p class="text-[10px] text-slate-500">{{ strtoupper($msg->file_type ?? 'file') }}</p>
                </div>
                <span class="material-symbols-outlined text-slate-500 text-sm ml-2 group-hover:text-primary transition-colors">download</span>
            </a>
            @endif
            
            <div class="flex items-center gap-1 mr-1">
                <span class="text-[10px] text-slate-600">{{ $msg->created_at->format('h:i A') }}</span>
                <span class="material-symbols-outlined text-[11px] text-primary">{{ $msg->is_read ? 'done_all' : 'check' }}</span>
            </div>
        </div>
        
        @else
        {{-- User Message (Left Side) --}}
        <div class="flex items-end gap-3 max-w-[80%]">
            <div class="w-9 h-9 rounded-full bg-white/10 flex items-center justify-center border border-white/10 shrink-0 overflow-hidden">
                <img src="{{ $msg->sender->avatar_url }}" alt="User" class="w-full h-full object-cover">
            </div>
            <div class="flex flex-col gap-1">
                <span class="text-[10px] text-slate-500 font-semibold ml-1">{{ $msg->sender->name }}</span>
                
                @if($msg->message)
                <div class="bg-white/5 border border-white/10 px-4 py-2.5 rounded-2xl rounded-bl-none text-slate-200 text-sm leading-relaxed">
                    {{ $msg->message }}
                </div>
                @endif
                
                @if($msg->file_attachment)
                <a href="{{ $msg->file_url }}" target="_blank" class="bg-white/5 border border-white/10 rounded-2xl p-3 flex items-center gap-3 hover:border-white/20 transition-colors">
                    <span class="material-symbols-outlined text-slate-400">description</span>
                    <div>
                        <p class="text-xs font-bold text-slate-200">{{ $msg->file_name }}</p>
                        <p class="text-[10px] text-slate-500">{{ strtoupper($msg->file_type ?? 'file') }}</p>
                    </div>
                </a>
                @endif
                
                <span class="text-[10px] text-slate-600 ml-1">{{ $msg->created_at->format('h:i A') }}</span>
            </div>
        </div>
        @endif
        @endforeach
    </div>

    {{-- Input Area --}}
    @if($chatThread->status === 'open')
    <div class="border-t border-white/5 px-6 py-4 bg-[#0d0d0d] shrink-0">
        <form method="POST" action="{{ route('admin.chats.send', $chatThread) }}" enctype="multipart/form-data" id="adminChatForm">
            @csrf
            <div id="adminFilePreview" class="hidden flex gap-2 mb-2"></div>
            <div class="bg-white/5 border border-white/10 rounded-2xl p-2 flex items-center gap-2">
                <label class="flex items-center justify-center w-10 h-10 rounded-xl text-slate-400 hover:text-primary hover:bg-white/5 transition-all cursor-pointer">
                    <span class="material-symbols-outlined">attach_file</span>
                    <input type="file" name="attachment" class="hidden" accept=".jpg,.jpeg,.png,.pdf" onchange="previewAdminFile(this)"/>
                </label>
                <input type="text" name="message" placeholder="Type your response to the user..." autocomplete="off" autofocus
                       class="flex-1 bg-transparent border-none focus:ring-0 text-sm text-slate-200 placeholder:text-slate-600 py-2 px-1"/>
                <button type="submit" class="w-10 h-10 rounded-xl bg-primary text-white flex items-center justify-center hover:bg-primary/90 active:scale-95 transition-all shadow-lg shadow-primary/20">
                    <span class="material-symbols-outlined font-bold text-sm">send</span>
                </button>
            </div>
        </form>
    </div>
    @else
    <div class="border-t border-white/5 px-6 py-4 bg-[#0d0d0d] text-center shrink-0">
        <p class="text-sm text-slate-500 flex items-center justify-center gap-2">
            <span class="material-symbols-outlined text-sm">lock</span>
            This chat thread has been marked as <span class="font-bold text-slate-400">{{ $chatThread->status }}</span> and can no longer receive messages.
        </p>
    </div>
    @endif
</div>
@endsection

@push('scripts')
<script>
    // Auto-scroll to bottom of messages
    const msgContainer = document.getElementById('adminChatMessages');
    if(msgContainer) msgContainer.scrollTop = msgContainer.scrollHeight;

    function previewAdminFile(input) {
        const file = input.files[0];
        if(!file) return;
        const div = document.getElementById('adminFilePreview');
        div.classList.remove('hidden');
        div.innerHTML = `
            <div class="flex items-center gap-2 bg-white/5 border border-white/10 rounded-lg px-3 py-1.5 text-xs text-slate-300">
                <span class="material-symbols-outlined text-primary text-sm">attach_file</span>
                <span class="font-medium truncate max-w-[200px]">${file.name}</span>
                <button type="button" onclick="this.closest('div').classList.add('hidden'); document.querySelector('[name=attachment]').value=''" class="text-slate-500 hover:text-red-400 ml-1 flex items-center justify-center">
                    <span class="material-symbols-outlined text-xs">close</span>
                </button>
            </div>
        `;
    }

    // Optimistic UI updates for Admin
    const adminChatForm = document.getElementById('adminChatForm');
    if(adminChatForm) {
        adminChatForm.addEventListener('submit', async function(e) {
            e.preventDefault();
            const formData = new FormData(this);
            const msgInput = document.querySelector('input[name="message"]');
            const fileInput = document.querySelector('input[name="attachment"]');
            const submitBtn = this.querySelector('button[type=submit]');
            const messageText = msgInput.value.trim();
            const hasFile = fileInput && fileInput.files.length > 0;
            
            if (!messageText && !hasFile) return;

            // Create optimistic message ID
            const tempId = 'opt-admin-' + Date.now();
            
            // Build optimistic bubble
            let bubbleHtml = `<div class="flex flex-col items-end space-y-1 max-w-[80%] self-end ml-auto" id="${tempId}">
                <span class="text-[10px] text-primary/70 font-semibold mr-2">You (Admin)</span>`;
                
            if(messageText) {
                bubbleHtml += `<div class="bg-primary text-background-dark px-4 py-2.5 rounded-2xl rounded-br-none text-sm font-medium leading-relaxed shadow-lg shadow-primary/20 opacity-70 border border-transparent transition-all">${messageText}</div>`;
            }
            if(hasFile) {
                bubbleHtml += `<div class="bg-background-dark border border-primary/20 rounded-2xl p-3 flex items-center gap-3 shadow-lg opacity-70">
                    <span class="material-symbols-outlined text-primary text-sm animate-pulse">cloud_upload</span>
                    <div><p class="text-xs font-bold text-slate-200">Uploading file...</p></div>
                </div>`;
            }
            
            bubbleHtml += `<div class="flex items-center gap-1 mr-1">
                    <span class="text-[10px] text-slate-600 status-text">Sending...</span>
                </div>
            </div>`;

            // Append optimistic message
            msgContainer.insertAdjacentHTML('beforeend', bubbleHtml);
            msgContainer.scrollTop = msgContainer.scrollHeight;

            // Clear input early for UX
            const formAction = this.action;
            msgInput.value = '';
            if(fileInput) fileInput.value = '';
            const previewDiv = document.getElementById('adminFilePreview');
            if(previewDiv) {
                previewDiv.classList.add('hidden');
                previewDiv.innerHTML = '';
            }
            submitBtn.disabled = true;

            try {
                const response = await fetch(formAction, {
                    method: 'POST',
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest',
                        'Accept': 'application/json'
                    },
                    body: formData
                });

                if(!response.ok) throw new Error('Failed to send');

                const result = await response.json();
                
                // Re-render message bubble softly without full flash
                const optNode = document.getElementById(tempId);
                if(optNode) {
                    // Remove opacity class from bubble
                    const bubbleBox = optNode.querySelector('.bg-primary, .bg-background-dark');
                    if(bubbleBox) bubbleBox.classList.remove('opacity-70');
                    
                    // Update time and status
                    const timeStr = new Date(result.message.created_at || Date.now()).toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'});
                    const statusBox = optNode.querySelector('.flex.items-center.gap-1.mr-1');
                    if(statusBox) {
                        statusBox.innerHTML = `
                            <span class="text-[10px] text-slate-600">${timeStr}</span>
                            <span class="material-symbols-outlined text-[11px] text-primary">check</span>`;
                    }
                }
            } catch(err) {
                console.error(err);
                const optNode = document.getElementById(tempId);
                if(optNode) {
                    // Visually fail
                    const bubbleBox = optNode.querySelector('.bg-primary, .bg-background-dark');
                    if(bubbleBox) {
                        bubbleBox.classList.remove('bg-primary', 'text-background-dark');
                        bubbleBox.classList.add('bg-red-500/10', 'text-red-400', 'border-red-500/30');
                    }
                    const statusBox = optNode.querySelector('.flex.items-center.gap-1.mr-1');
                    if(statusBox) {
                        statusBox.innerHTML = `<span class="text-[10px] text-red-500 flex items-center gap-1"><span class="material-symbols-outlined text-[10px]">error</span> Failed. Click to retry.</span>`;
                        statusBox.classList.add('cursor-pointer');
                        statusBox.onclick = () => optNode.remove();
                    }
                    setTimeout(() => { if(optNode.parentNode) optNode.remove(); }, 4000);
                }
            } finally {
                submitBtn.disabled = false;
                msgInput.focus();
            }
        });
    }
</script>
@endpush