@extends('layouts.app')

@section('title', 'Live Chat - AgroSmart Pro')

@section('content')
<div class="grid grid-cols-1 lg:grid-cols-4 gap-6 h-[calc(100vh-120px)]">
    <!-- Chat List Sidebar -->
    <div class="lg:col-span-1 bg-white rounded-xl shadow-lg overflow-hidden flex flex-col">
        <div class="p-4 border-b border-gray-200 bg-gradient-to-r from-green-50 to-blue-50">
            <h2 class="text-xl font-bold text-gray-900">💬 Messages</h2>
            @if(auth()->user()->isFarmer())
                <button onclick="openOfficerSelector()" class="w-full mt-3 px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 font-medium transition">
                    <i class="fas fa-plus"></i> Start Chat
                </button>
            @endif
        </div>

        <div id="chatList" class="overflow-y-auto flex-1">
            @forelse($chatRooms as $room)
                <div onclick="openChat({{ $room->id }})" class="cursor-pointer p-4 border-b border-gray-100 hover:bg-green-50 transition" id="room-{{ $room->id }}">
                    <div class="flex items-center space-x-3">
                        @php
                            $otherUser = auth()->user()->id === $room->farmer_id ? $room->officer : $room->farmer;
                        @endphp
                        <img src="{{ $otherUser->profile_photo_path ? asset('storage/' . $otherUser->profile_photo_path) : 'https://ui-avatars.com/api/?name=' . urlencode($otherUser->name) }}" 
                            alt="Avatar" class="w-12 h-12 rounded-full object-cover">
                        <div class="flex-1 min-w-0">
                            <h3 class="font-bold text-gray-900 truncate">{{ $otherUser->name }}</h3>
                            <p class="text-sm text-gray-600 truncate">
                                {{ $room->latestMessage?->message ? substr($room->latestMessage->message, 0, 30) . '...' : 'No messages yet' }}
                            </p>
                        </div>
                        @if($room->unreadCount(auth()->id()) > 0)
                            <span class="bg-red-500 text-white text-xs rounded-full h-6 w-6 flex items-center justify-center font-bold">
                                {{ $room->unreadCount(auth()->id()) }}
                            </span>
                        @endif
                    </div>
                </div>
            @empty
                <p class="text-center text-gray-500 py-8 mt-8">No chats yet. Start a conversation!</p>
            @endforelse
        </div>
    </div>

    <!-- Chat Window -->
    <div id="chatWindow" class="lg:col-span-3 bg-white rounded-xl shadow-lg hidden lg:flex flex-col">
        <!-- Header -->
        <div id="chatHeader" class="p-4 border-b border-gray-200 flex items-center justify-between bg-gradient-to-r from-green-50 to-blue-50">
            <div class="flex items-center space-x-3">
                <img id="chatAvatar" src="" alt="Avatar" class="w-12 h-12 rounded-full object-cover">
                <div>
                    <h2 id="chatName" class="text-lg font-bold text-gray-900"></h2>
                    <p id="onlineStatus" class="text-sm text-gray-600">
                        <span class="w-2 h-2 bg-green-500 rounded-full inline-block mr-1"></span> Online
                    </p>
                </div>
            </div>
            <button onclick="closeChatWindow()" class="text-gray-600 hover:text-gray-900 transition">
                <i class="fas fa-times text-2xl"></i>
            </button>
        </div>

        <!-- Messages Container -->
        <div id="messagesContainer" class="flex-1 overflow-y-auto p-6 space-y-4 bg-gray-50">
            <!-- Messages loaded here -->
        </div>

        <!-- Typing Indicator -->
        <div id="typingIndicator" class="px-6 py-2 hidden">
            <div class="flex items-center space-x-2 text-gray-600 text-sm">
                <span id="typingUser"></span> is typing
                <div class="flex space-x-1">
                    <div class="w-2 h-2 bg-gray-400 rounded-full pulse-animation"></div>
                    <div class="w-2 h-2 bg-gray-400 rounded-full pulse-animation" style="animation-delay: 0.1s"></div>
                    <div class="w-2 h-2 bg-gray-400 rounded-full pulse-animation" style="animation-delay: 0.2s"></div>
                </div>
            </div>
        </div>

        <!-- Input Area -->
        <div class="p-4 border-t border-gray-200 bg-white">
            <div class="flex items-center space-x-2 mb-2">
                <input id="messageInput" 
                    type="text" 
                    placeholder="Type a message..." 
                    maxlength="1000" 
                    class="flex-1 border border-gray-300 rounded-lg px-4 py-3 focus:outline-none focus:border-green-600 focus:ring-2 focus:ring-green-200 transition">
                <button onclick="sendMessage()" class="px-6 py-3 bg-green-600 text-white rounded-lg hover:bg-green-700 font-bold transition flex items-center space-x-2">
                    <i class="fas fa-paper-plane"></i>
                    <span class="hidden sm:inline">Send</span>
                </button>
                <button onclick="startVoiceInput()" id="voiceBtn" class="px-4 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 font-bold transition" title="Voice Input">
                    <i class="fas fa-microphone"></i>
                </button>
            </div>
        </div>
    </div>

    <!-- Officer Selector Modal -->
    <div id="officerModal" class="fixed inset-0 bg-black bg-opacity-50 hidden flex items-center justify-center z-50 p-4">
        <div class="bg-white rounded-xl shadow-2xl p-8 max-w-md w-full fade-in">
            <div class="flex justify-between items-center mb-6">
                <h2 class="text-2xl font-bold text-gray-900">Select an Officer</h2>
                <button onclick="document.getElementById('officerModal').classList.add('hidden')" class="text-gray-600 hover:text-gray-900">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div id="officerList" class="space-y-3 max-h-96 overflow-y-auto">
                <!-- Officers loaded here -->
            </div>
        </div>
    </div>
</div>

<!-- Meta tags for data -->
<meta name="user-id" content="{{ auth()->id() }}">
<meta name="pusher-app-key" content="{{ config('broadcasting.connections.pusher.key') }}">
<meta name="pusher-cluster" content="{{ config('broadcasting.connections.pusher.options.cluster') }}">

@endsection

@push('scripts')
<script src="{{ asset('js/chat.js') }}"></script>
<script src="{{ asset('js/voice-input.js') }}"></script>

<script>
document.addEventListener('DOMContentLoaded', () => {
    // Load first chat if exists
    const firstRoom = document.querySelector('[id^="room-"]');
    if (firstRoom) {
        const roomId = firstRoom.id.split('-')[1];
        openChat(roomId);
    }
});
</script>
@endpush