<x-app-layout>
<x-module-hero title="Chat Agents" description="Appoint and manage chat support agents" icon="fa-user-tie">
    <x-slot name="tabs">
        @can('view chats')
        <a href="{{ route('chat.index') }}"
           class="module-hero-tab opacity-70 hover:opacity-100 inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium transition">
            <i class="fas fa-tachometer-alt"></i> Dashboard
        </a>
        @endcan
        @can('handle chats')
        <a href="{{ route('chat.conversations') }}"
           class="module-hero-tab opacity-70 hover:opacity-100 inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium transition">
            <i class="fas fa-comments"></i> Conversations
        </a>
        @endcan
        @can('handle chats')
        <a href="{{ route('chat.agent-dashboard') }}"
           class="module-hero-tab opacity-70 hover:opacity-100 inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium transition">
            <i class="fas fa-headset"></i> Agent Dashboard
        </a>
        @endcan
        @can('appoint chat agents')
        <a href="{{ route('chat.agents') }}"
           class="module-hero-tab border-b-2 border-[#1e293b] inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium transition">
            <i class="fas fa-user-tie"></i> Agents
        </a>
        @endcan
        @can('manage chat categories')
        <a href="{{ route('chat.categories') }}"
           class="module-hero-tab opacity-70 hover:opacity-100 inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium transition">
            <i class="fas fa-th-large"></i> Categories
        </a>
        @endcan
    </x-slot>
    @can('appoint chat agents')
    <x-slot name="actions">
        <button onclick="showAppointModal()"
           class="inline-flex items-center gap-2 px-4 py-2 bg-white text-[#1a4731] text-sm font-semibold rounded-lg hover:bg-green-50 transition">
            <i class="fas fa-user-plus"></i> Appoint Agent
        </button>
    </x-slot>
    @endcan
</x-module-hero>

<div class="p-6">
    @if(session('success'))
        <div class="mb-4 p-4 bg-green-100 border border-green-400 text-green-700 rounded-lg flex items-center gap-2">
            <i class="fas fa-check-circle"></i> {{ session('success') }}
        </div>
    @endif
    @if(session('error'))
        <div class="mb-4 p-4 bg-red-100 border border-red-400 text-red-700 rounded-lg flex items-center gap-2">
            <i class="fas fa-exclamation-circle"></i> {{ session('error') }}
        </div>
    @endif

    @if($agents->isEmpty())
        <div class="text-center py-16">
            <i class="fas fa-user-tie text-6xl text-gray-300 mb-4 block"></i>
            <h3 class="text-xl font-semibold text-gray-700 mb-2">No agents appointed</h3>
            <p class="text-gray-500 mb-6">Appoint users as chat agents to handle visitor conversations.</p>
            @can('appoint chat agents')
                <button onclick="showAppointModal()"
                    class="inline-flex items-center gap-2 px-5 py-2.5 bg-[#1a4731] text-white font-semibold rounded-lg hover:bg-[#276749] transition">
                    <i class="fas fa-user-plus"></i> Appoint First Agent
                </button>
            @endcan
        </div>
    @else
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            @foreach($agents as $agent)
                <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
                    <div class="p-5">
                        <div class="flex items-center gap-4 mb-4">
                            <div class="relative">
                                <div class="w-14 h-14 rounded-full bg-gradient-to-br from-green-500 to-green-700 flex items-center justify-center text-white text-xl font-bold">
                                    {{ strtoupper(substr($agent->user->name ?? 'A', 0, 1)) }}
                                </div>
                                @php
                                    $dotColors = ['online' => 'bg-green-500', 'away' => 'bg-yellow-500', 'busy' => 'bg-orange-500', 'offline' => 'bg-gray-400'];
                                    $dotColor = $dotColors[$agent->status] ?? 'bg-gray-400';
                                @endphp
                                <span class="absolute bottom-0 right-0 w-4 h-4 rounded-full border-2 border-white {{ $dotColor }}"></span>
                            </div>
                            <div>
                                <h3 class="font-semibold text-gray-800">{{ $agent->user->name ?? 'Unknown' }}</h3>
                                <p class="text-xs text-gray-500">{{ $agent->user->email ?? '' }}</p>
                                <span class="inline-block mt-1 px-2 py-0.5 text-xs rounded-full
                                    {{ $agent->status == 'online' ? 'bg-green-100 text-green-700' : ($agent->status == 'away' ? 'bg-yellow-100 text-yellow-700' : ($agent->status == 'busy' ? 'bg-orange-100 text-orange-700' : 'bg-gray-100 text-gray-700')) }}">
                                    {{ ucfirst($agent->status) }}
                                </span>
                            </div>
                        </div>

                        <div class="grid grid-cols-3 gap-2 text-center mb-4">
                            <div class="p-2 bg-gray-50 rounded-lg">
                                <p class="text-lg font-bold text-gray-800">{{ $agent->current_chats }}</p>
                                <p class="text-xs text-gray-500">Active</p>
                            </div>
                            <div class="p-2 bg-gray-50 rounded-lg">
                                <p class="text-lg font-bold text-gray-800">{{ $agent->total_conversations }}</p>
                                <p class="text-xs text-gray-500">Total</p>
                            </div>
                            <div class="p-2 bg-gray-50 rounded-lg">
                                <p class="text-lg font-bold text-gray-800">{{ $agent->max_concurrent_chats }}</p>
                                <p class="text-xs text-gray-500">Max</p>
                            </div>
                        </div>

                        @if(!empty($agent->categories))
                            <div class="mb-3">
                                <p class="text-xs text-gray-500 mb-1">Categories:</p>
                                <div class="flex flex-wrap gap-1">
                                    @foreach($categories->whereIn('id', $agent->categories) as $cat)
                                        <span class="px-2 py-0.5 text-xs rounded-full text-white"
                                              style="background-color: {{ $cat->color ?? '#6b7280' }}">
                                            {{ $cat->name }}
                                        </span>
                                    @endforeach
                                </div>
                            </div>
                        @else
                            <p class="text-xs text-gray-400 mb-3">Handles all categories</p>
                        @endif

                        @if($agent->satisfaction_rating > 0)
                            <div class="flex items-center gap-1 mb-3">
                                @for($i = 1; $i <= 5; $i++)
                                    <i class="fas fa-star text-xs {{ $i <= $agent->satisfaction_rating ? 'text-yellow-400' : 'text-gray-300' }}"></i>
                                @endfor
                                <span class="text-xs text-gray-500 ml-1">{{ number_format($agent->satisfaction_rating, 1) }}</span>
                            </div>
                        @endif
                    </div>

                    <div class="px-5 py-3 border-t border-gray-100 flex items-center justify-between">
                        <span class="text-xs text-gray-400">
                            Last active: {{ $agent->last_active_at ? $agent->last_active_at->diffForHumans() : 'Never' }}
                        </span>
                        @can('appoint chat agents')
                            <form action="{{ route('chat.remove-agent', $agent) }}" method="POST" class="inline">
                                @csrf @method('DELETE')
                                <button type="submit"
                                    class="inline-flex items-center gap-1 px-3 py-1.5 bg-red-100 text-red-700 text-xs font-medium rounded-lg hover:bg-red-200 transition"
                                    onclick="return confirm('Remove this agent?')">
                                    <i class="fas fa-user-minus"></i> Remove
                                </button>
                            </form>
                        @endcan
                    </div>
                </div>
            @endforeach
        </div>

        @if($agents->hasPages())
            <div class="mt-6">{{ $agents->links() }}</div>
        @endif
    @endif
</div>

{{-- Appoint Agent Modal --}}
<div id="agent-modal" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center z-50">
    <div class="bg-white rounded-lg shadow-xl max-w-lg w-full mx-4 max-h-[90vh] overflow-y-auto">
        <div class="flex items-center justify-between px-6 py-4 bg-gradient-to-r from-green-700 to-emerald-700">
            <h3 class="text-lg font-semibold text-white flex items-center gap-2">
                <i class="fas fa-user-plus"></i> Appoint Chat Agent
            </h3>
            <button onclick="closeModal()" class="text-white/80 hover:text-white transition"><i class="fas fa-times"></i></button>
        </div>
        <form action="{{ route('chat.appoint-agent') }}" method="POST" class="p-6">
            @csrf
            <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700 mb-1">Select User <span class="text-red-500">*</span></label>
                <select name="user_id" required class="w-full px-4 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-green-500">
                    <option value="">Choose a user...</option>
                    @foreach(\App\Models\User::whereNotIn('id', \App\Models\ChatAgent::pluck('user_id'))->orderBy('name')->get() as $user)
                        <option value="{{ $user->id }}">{{ $user->name }} ({{ $user->email }})</option>
                    @endforeach
                </select>
            </div>
            <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700 mb-1">Assign Categories <span class="text-gray-400 text-xs">(leave empty for all)</span></label>
                <div class="grid grid-cols-2 gap-2 max-h-40 overflow-y-auto border border-gray-200 rounded-lg p-2">
                    @foreach($categories as $category)
                        <label class="flex items-center gap-2 p-2 hover:bg-gray-50 rounded cursor-pointer">
                            <input type="checkbox" name="categories[]" value="{{ $category->id }}" class="rounded text-green-600">
                            <span class="text-sm text-gray-700">{{ $category->name }}</span>
                        </label>
                    @endforeach
                </div>
            </div>
            <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700 mb-1">Max Concurrent Chats</label>
                <input type="number" name="max_chats" value="3" min="1" max="10"
                    class="w-full px-4 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-green-500">
            </div>
            <div class="flex justify-end gap-2 pt-4 border-t border-gray-200">
                <button type="button" onclick="closeModal()" class="px-4 py-2 border border-gray-300 rounded-lg text-sm text-gray-700">Cancel</button>
                <button type="submit" class="px-4 py-2 bg-[#1a4731] text-white text-sm font-semibold rounded-lg hover:bg-[#276749] transition">
                    Appoint Agent
                </button>
            </div>
        </form>
    </div>
</div>

@push('scripts')
<script>
function showAppointModal() {
    document.getElementById('agent-modal').classList.remove('hidden');
    document.getElementById('agent-modal').classList.add('flex');
}
function closeModal() {
    document.getElementById('agent-modal').classList.add('hidden');
    document.getElementById('agent-modal').classList.remove('flex');
}
</script>
@endpush
</x-app-layout>
