@extends('layouts.app')

@section('title', 'LiteChat - ' . ($me->nama_lengkap ?? $me->username))

@section('content')
<div class="flex h-full w-full relative overflow-hidden">
    <div id="side-panel" class="side-panel w-full md:w-1/4 bg-white border-r border-gray-300 flex flex-col h-full absolute md:relative">
        <div class="p-4 bg-teal-700 text-white flex justify-between items-center shadow-md">
            <div class="flex items-center gap-3">
                <img src="{{ asset('uploads/' . $me->avatar) }}" onerror="this.src='{{ asset('img/default.png') }}'" class="w-10 h-10 rounded-full border-2 border-white/50 object-cover bg-white">
                <div class="flex flex-col">
                    <span class="font-bold leading-none text-sm">{{ $me->nama_lengkap ?? $me->username }}</span>
                    <span class="text-[10px] opacity-80">Love Forever</span>
                </div>
            </div>
            <div class="flex gap-1">
                <button id="open-settings" class="p-2 hover:bg-white/10 rounded-full"><i class="fa-solid fa-gear"></i></button>
                <a href="{{ route('logout') }}" class="p-2 hover:bg-white/10 rounded-full"><i class="fa-solid fa-right-from-bracket"></i></a>
            </div>
        </div>

        <div class="flex-1 overflow-y-auto" id="user-list">
            @foreach($users as $user)
            <div class="user-item flex items-center p-4 cursor-pointer hover:bg-gray-50 border-b border-gray-100 transition" 
                 onclick="openChat('{{ $user->id }}', '{{ $user->nama_lengkap ?? $user->username }}', '{{ asset('uploads/' . $user->avatar) }}', '{{ $user->status_online }}')">
                <div class="relative w-12 h-12 flex-shrink-0">
                    <img src="{{ asset('uploads/' . $user->avatar) }}" onerror="this.src='{{ asset('img/default.png') }}'" class="w-full h-full rounded-full object-cover border">
                    <div class="absolute bottom-0 right-0 w-3.5 h-3.5 {{ $user->status_online == 'online' ? 'bg-green-500' : 'bg-gray-400' }} border-2 border-white rounded-full"></div>
                </div>
                <div class="ml-4 flex-1 overflow-hidden">
                    <h3 class="font-bold text-gray-800 text-sm truncate">{{ $user->nama_lengkap ?? $user->username }}</h3>
                    <p class="text-[11px] text-gray-500">{{ ucfirst($user->status_online) }}</p>
                </div>
            </div>
            @endforeach
        </div>

        <div id="surprise-menu-container" class="p-3 bg-white border-t border-gray-200 hidden">
            <a href="{{ route('surprise') }}" class="flex items-center gap-4 p-4 bg-gradient-to-r from-pink-500 to-purple-600 rounded-2xl text-white shadow-lg transform active:scale-95 transition-all animate-pulse">
                <div class="w-10 h-10 bg-white/20 rounded-full flex items-center justify-center">
                    <i class="fa-solid fa-gift text-xl"></i>
                </div>
                <div>
                    <h4 class="font-bold text-sm">Special Surprise! 🎁</h4>
                    <p class="text-[10px] opacity-90">Klik untuk melihat kejutanmu</p>
                </div>
                <i class="fa-solid fa-chevron-right ml-auto opacity-70"></i>
            </a>
        </div>
    </div>

    <div id="chat-panel" class="chat-panel flex-1 flex flex-col bg-whatsapp h-full w-full">
        <div class="p-3 bg-white flex items-center justify-between shadow-sm z-30 border-b">
            <div class="flex items-center gap-3 overflow-hidden">
                <button onclick="closeChat()" class="md:hidden text-teal-700 p-2 -ml-2"><i class="fa-solid fa-arrow-left text-xl"></i></button>
                <img src="{{ asset('img/default.png') }}" id="header-avatar" class="w-10 h-10 rounded-full border bg-gray-50 object-cover">
                <div class="overflow-hidden">
                    <h2 id="chat-with-name" class="font-bold text-gray-800 leading-none text-sm md:text-base truncate">Pilih Teman</h2>
                    <span id="chat-status-text" class="text-[10px] font-bold uppercase tracking-wider"></span>
                </div>
            </div>
        </div>

        <div id="chat-container" class="flex-1 overflow-y-auto p-4 space-y-4">
            <div id="messages-display" class="flex flex-col min-h-full"></div>
        </div>

        <div class="input-area p-2 md:p-3 bg-white border-t z-40 relative">
            
            <div id="reply-indicator" class="hidden bg-gray-100 p-2 border-l-4 border-teal-500 flex justify-between items-start">
                <div class="flex-1 min-w-0 pr-4">
                    <p class="text-[10px] text-teal-600 font-bold">Membalas pesan:</p>
                    <p id="reply-text-preview" class="text-xs text-gray-600 line-clamp-2 leading-tight"></p>
                </div>
                <button onclick="window.cancelReply()" class="text-gray-400 hover:text-red-500">
                    <i class="fa-solid fa-xmark"></i>
                </button>
            </div>

            <div id="edit-indicator" class="hidden bg-gray-50 p-2 border-b flex justify-between items-center px-4 absolute -top-10 left-0 w-full shadow-sm border-l-4 border-l-blue-500">
                <div class="text-xs text-blue-700 italic flex items-center gap-2">
                    <i class="fa-solid fa-pen text-[10px]"></i> Mengedit pesan...
                </div>
                <button onclick="window.cancelEdit()" class="text-red-500 text-[10px] font-bold uppercase tracking-wider">Batal</button>
            </div>

            <form id="chat-form" class="max-w-4xl mx-auto flex items-center gap-2" autocomplete="off">
                <input type="hidden" name="receiver_id" id="receiver_id" value="">
                <input type="hidden" name="reply_id" id="reply_id" value="">
                
                <input type="file" id="attach-image" accept="image/*" class="hidden" onchange="window.uploadFile('image')">
                <input type="file" id="attach-file" accept=".pdf,.doc,.docx,.xls,.xlsx,.zip" class="hidden" onchange="window.uploadFile('file')">

                <button type="button" id="btn-plus" class="text-gray-500 w-10 h-10 flex items-center justify-center hover:text-teal-600 transition">
                    <i class="fa-solid fa-circle-plus text-2xl"></i>
                </button>

                <input type="text" name="message" id="input-message" 
                    class="flex-1 bg-gray-100 rounded-full py-2 px-4 focus:outline-none text-sm border border-transparent focus:border-teal-500 focus:bg-white transition-all" 
                    placeholder="Ketik pesan...">
                
                <button type="submit" id="send-btn" class="bg-teal-600 text-white w-10 h-10 md:w-12 md:h-12 rounded-full flex items-center justify-center shadow-lg active:scale-90 transition-all">
                    <i class="fa-solid fa-paper-plane text-sm"></i>
                </button>
            </form>

            <div id="plus-menu" class="hidden absolute bottom-20 left-4 bg-white shadow-2xl rounded-2xl border p-2 flex flex-col gap-1 z-50">
                <button type="button" onclick="document.getElementById('attach-image').click()" class="flex items-center gap-3 p-3 hover:bg-teal-50 rounded-xl text-sm text-gray-700 w-full transition">
                    <div class="w-8 h-8 flex items-center justify-center bg-blue-100 rounded-lg">
                        <i class="fa-solid fa-image text-blue-500"></i>
                    </div>
                    <span>Gambar</span>
                </button>
            
                <button type="button" onclick="document.getElementById('attach-file').click()" class="flex items-center gap-3 p-3 hover:bg-teal-50 rounded-xl text-sm text-gray-700 w-full transition">
                    <div class="w-8 h-8 flex items-center justify-center bg-orange-100 rounded-lg">
                        <i class="fa-solid fa-file text-orange-500"></i>
                    </div>
                    <span>Dokumen</span>
                </button>
            
                <button type="button" 
                        onclick="event.stopPropagation(); window.toggleEmojiPicker();" 
                        class="flex items-center gap-3 p-3 hover:bg-teal-50 rounded-xl text-sm text-gray-700 w-full transition">
                    <div class="w-8 h-8 flex items-center justify-center bg-yellow-100 rounded-lg">
                        <i class="fa-regular fa-face-smile text-yellow-600 text-lg"></i>
                    </div>
                    <span>Emoji</span>
                </button>
            </div>

            <div id="emoji-picker" class="hidden absolute bottom-20 left-4 bg-white shadow-2xl rounded-2xl border p-3 z-50 w-72 max-h-64 overflow-y-auto">
                <div class="grid grid-cols-6 gap-2">
                    @php 
                    $emojis = ['❤️','💖','💕','😘','😍','🥰','🌹','🌷','💌','💍','👩‍❤️‍👨','✨','😀','😂','😇','😎','🤔','🥳','😭','😤','👍','🙌','🙏','🔥','✅','❌','📍','⏰','💬','⭐'];
                    @endphp
                    @foreach($emojis as $e)
                        <span onclick="window.addEmoji('{{ $e }}')" class="cursor-pointer text-2xl hover:bg-teal-50 hover:scale-125 transition-all text-center p-2 rounded-lg">{{ $e }}</span>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
</div>

<div id="settings-modal" class="hidden fixed inset-0 bg-black/60 backdrop-blur-sm z-[100] flex items-center justify-center p-4">
    <div class="bg-white w-full max-w-md rounded-2xl shadow-2xl overflow-hidden animate-slide-up">
        <div class="p-6 border-b flex justify-between items-center">
            <h3 class="font-bold text-gray-800 text-lg">Pengaturan Profil</h3>
            <button onclick="window.closeSettings()" class="text-gray-400 hover:text-gray-600"><i class="fa-solid fa-xmark text-xl"></i></button>
        </div>
        
        <form id="settings-form" enctype="multipart/form-data" class="p-6 space-y-4">
            <div class="flex flex-col items-center mb-4">
                <div class="relative group">
                    <img id="settings-avatar-preview" src="{{ asset('uploads/' . $me->avatar) }}" onerror="this.src='{{ asset('img/default.png') }}'" class="w-24 h-24 rounded-full object-cover border-4 border-teal-50 shadow-md">
                    <label for="settings-avatar" class="absolute bottom-0 right-0 bg-teal-600 text-white p-2 rounded-full cursor-pointer shadow-lg hover:bg-teal-700 transition">
                        <i class="fa-solid fa-camera text-xs"></i>
                        <input type="file" id="settings-avatar" name="avatar" class="hidden" accept="image/*" onchange="window.previewImage(this)">
                    </label>
                </div>
                <p class="text-[10px] text-gray-400 mt-2 italic">Klik ikon kamera untuk ganti foto</p>
            </div>

            <div>
                <label class="block text-xs font-bold text-gray-500 mb-1 uppercase">Username</label>
                <input type="text" value="{{ $me->username }}" class="w-full p-3 bg-gray-100 border rounded-xl text-sm text-gray-500 cursor-not-allowed" readonly>
            </div>

            <div>
                <label class="block text-xs font-bold text-gray-500 mb-1 uppercase">Nama Lengkap</label>
                <input type="text" name="nama_lengkap" value="{{ $me->nama_lengkap }}" class="w-full p-3 bg-gray-50 border rounded-xl focus:ring-2 focus:ring-teal-500 outline-none text-sm">
            </div>

            <div>
                <label class="block text-xs font-bold text-gray-500 mb-1 uppercase">Password Baru</label>
                <input type="password" name="password" placeholder="Kosongkan jika tidak ganti" class="w-full p-3 bg-gray-50 border rounded-xl focus:ring-2 focus:ring-teal-500 outline-none text-sm">
            </div>

            <button type="submit" id="btn-save-settings" class="w-full bg-teal-600 hover:bg-teal-700 text-white font-bold py-3 rounded-xl transition shadow-lg flex items-center justify-center gap-2">
                <i class="fa-solid fa-floppy-disk"></i> Simpan Perubahan
            </button>
        </form>
    </div>
</div>

<div id="msg-modal" class="hidden fixed inset-0 bg-black/50 z-[100] flex items-center justify-center p-4">
    <div class="bg-white rounded-2xl w-full max-w-xs overflow-hidden shadow-2xl">
        <button onclick="prepareReply()" class="w-full p-4 text-left flex items-center gap-3 hover:bg-gray-50 border-b">
            <i class="fa-solid fa-reply text-teal-500"></i> Balas Pesan
        </button>
        <button onclick="prepareEdit()" class="w-full p-4 text-left flex items-center gap-3 hover:bg-gray-50 border-b">
            <i class="fa-solid fa-pen text-blue-500"></i> Edit Pesan
        </button>
        <button onclick="confirmDelete()" class="w-full p-4 text-left flex items-center gap-3 hover:bg-gray-50 text-red-500">
            <i class="fa-solid fa-trash"></i> Hapus Pesan
        </button>
        <button onclick="closeMsgModal()" class="w-full p-3 text-center text-sm text-gray-500 bg-gray-50">Batal</button>
    </div>
</div>
@endsection

@push('scripts')
<script>
    const chatFetchUrl = "{{ route('chat.fetch') }}";
    const chatSendUrl = "{{ route('chat.send') }}";
    const chatEditUrl = "{{ route('chat.edit') }}";
    const chatDeleteUrl = "{{ route('chat.delete') }}";
    const chatUploadUrl = "{{ route('chat.upload') }}";
    const profileUpdateUrl = "{{ route('profile.update') }}";

    function closeChat() {
        document.getElementById('side-panel').style.transform = 'translateX(0)';
        document.getElementById('receiver_id').value = "";
    }

    const btnPlus = document.getElementById('btn-plus');
    const plusMenu = document.getElementById('plus-menu');
    btnPlus.onclick = (e) => {
        e.stopPropagation();
        plusMenu.classList.toggle('hidden');
    };
    document.onclick = (event) => {
        plusMenu.classList.add('hidden');
        if(!event.target.closest('#emoji-picker')) document.getElementById('emoji-picker').classList.add('hidden');
    };

    const inputMsg = document.getElementById('input-message');
    inputMsg.addEventListener('focus', () => {
        setTimeout(() => { window.scrollTo(0, 0); document.body.scrollTop = 0; }, 100);
    });
    
    function checkSurprise() {
        const menu = document.getElementById('surprise-menu-container');
        menu.classList.remove('hidden'); 
    }
    checkSurprise();
</script>
<script src="{{ asset('js/chat.js') }}"></script>
@endpush