@extends('layouts.app')

@section('content')
<div class="max-w-4xl mx-auto px-4 py-8">
    <div class="mb-8">
        <h1 class="text-3xl font-black text-slate-800 italic uppercase tracking-tighter">Support Center</h1>
        <p class="text-slate-500 font-medium">Contact an Admin for help or reporting issues.</p>
    </div>

    {{-- Admins List --}}
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-12">
        @foreach($admins as $admin)
        <a href="{{ route('employee.messages.chat', $admin->id) }}" 
           class="group relative bg-white p-8 rounded-[2.5rem] border {{ isset($adminToChat) && $adminToChat->id == $admin->id ? 'border-emerald-500 ring-2 ring-emerald-100' : 'border-slate-100' }} shadow-sm hover:shadow-xl hover:border-emerald-200 transition-all duration-300">
            
            <div class="relative z-10">
                <div class="w-16 h-16 bg-emerald-900 rounded-2xl flex items-center justify-center text-white text-2xl font-black italic mb-6">
                    {{ strtoupper(substr($admin->name, 0, 1)) }}
                </div>
                <h3 class="text-xl font-black text-slate-800 uppercase italic tracking-tighter">{{ $admin->name }}</h3>
                <p class="text-xs font-bold text-slate-400 uppercase tracking-widest mb-4">Official Admin Support</p>
            </div>
        </a>
        @endforeach
    </div>

    {{-- ✅ CHAT INTERFACE --}}
    @if(isset($adminToChat))
    <div class="bg-white rounded-[2.5rem] border border-slate-100 shadow-2xl overflow-hidden animate-in fade-in slide-in-from-bottom-4 duration-500">
        <div class="bg-emerald-900 p-6 flex justify-between items-center">
            <h3 class="text-white font-black uppercase italic tracking-tighter">Support Chat: {{ $adminToChat->name }}</h3>
            <span class="text-emerald-300 text-xs font-bold italic">SECURED</span>
        </div>

        {{-- Messages Window --}}
        <div class="h-96 overflow-y-auto p-8 bg-slate-50 flex flex-col gap-4" id="chatWindow">
            @forelse($messages as $msg)
                <div class="flex {{ $msg->sender_id == Auth::id() ? 'justify-end' : 'justify-start' }}">
                    <div class="max-w-[80%] p-4 rounded-2xl {{ $msg->sender_id == Auth::id() ? 'bg-emerald-600 text-white rounded-tr-none' : 'bg-white text-slate-800 shadow-sm rounded-tl-none' }}">
                        <p class="text-sm font-medium">{{ $msg->message }}</p>
                        <span class="text-[10px] opacity-60 block mt-1 uppercase font-bold">
                            {{ \Carbon\Carbon::parse($msg->created_at)->diffForHumans() }}
                        </span>
                    </div>
                </div>
            @empty
                <div id="no-messages" class="text-center py-20 text-slate-400 italic font-medium uppercase tracking-widest text-xs">No previous conversation. Send a message to start.</div>
            @endforelse
        </div>

        {{-- Send Form (AJAX Fitted) --}}
        <form id="chatForm" class="p-6 bg-white border-t border-slate-100">
            @csrf
            <input type="hidden" id="receiver_id" name="receiver_id" value="{{ $adminToChat->id }}">
            <div class="flex gap-3">
                <input type="text" id="messageInput" name="message" required autocomplete="off" placeholder="Write your message here..." 
                       class="flex-1 bg-slate-100 border-none rounded-2xl px-6 py-4 focus:ring-2 focus:ring-emerald-500 outline-none font-medium">
                <button type="submit" class="bg-emerald-900 text-white px-8 py-4 rounded-2xl font-black uppercase italic hover:bg-emerald-800 transition-all">
                    Send
                </button>
            </div>
        </form>
    </div>

    {{-- ✅ JAVASCRIPT LOGIC --}}
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const chatWindow = document.getElementById("chatWindow");
            const chatForm = document.getElementById("chatForm");
            const messageInput = document.getElementById("messageInput");
            const receiverId = document.getElementById("receiver_id").value;

            // Scroll to bottom
            const scrollToBottom = () => {
                chatWindow.scrollTop = chatWindow.scrollHeight;
            };
            scrollToBottom();

            // 1. AJAX Send Message
            chatForm.addEventListener('submit', async (e) => {
                e.preventDefault();
                const message = messageInput.value;
                if(!message) return;

                // Clear input
                messageInput.value = '';

                // Append message locally for speed
                const myMsg = `
                    <div class="flex justify-end">
                        <div class="max-w-[80%] p-4 rounded-2xl bg-emerald-600 text-white rounded-tr-none">
                            <p class="text-sm font-medium">${message}</p>
                            <span class="text-[10px] opacity-60 block mt-1 uppercase font-bold">Just now</span>
                        </div>
                    </div>`;
                chatWindow.insertAdjacentHTML('beforeend', myMsg);
                if(document.getElementById('no-messages')) document.getElementById('no-messages').remove();
                scrollToBottom();

                // Server request
                try {
                    await fetch("{{ route('employee.messages.send') }}", {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': '{{ csrf_token() }}'
                        },
                        body: JSON.stringify({ message, receiver_id: receiverId })
                    });
                } catch (error) { console.error(error); }
            });

            // 2. Polling for new messages (Every 4 seconds)
            setInterval(async () => {
                try {
                    const response = await fetch(`/api/messages/fetch/${receiverId}`);
                    const data = await response.json();
                    
                    if (data.messages && data.messages.length > 0) {
                        data.messages.forEach(msg => {
                            const adminMsg = `
                                <div class="flex justify-start">
                                    <div class="max-w-[80%] p-4 rounded-2xl bg-white text-slate-800 shadow-sm rounded-tl-none border border-slate-100">
                                        <p class="text-sm font-medium">${msg.message}</p>
                                        <span class="text-[10px] opacity-60 block mt-1 uppercase font-bold">New</span>
                                    </div>
                                </div>`;
                            chatWindow.insertAdjacentHTML('beforeend', adminMsg);
                        });
                        scrollToBottom();
                    }
                } catch (e) { }
            }, 4000);
        });
    </script>
    @endif
</div>
@endsection