<x-app-layout>
<x-module-hero title="Chat Conversations" description="View and manage all chat history" icon="fa-comments">
    <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 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-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 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-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>
</x-module-hero>

<div class="w-full">
    {{-- Filter bar --}}
    <div class="p-4 bg-white border-b">
        <form method="GET" class="flex flex-wrap gap-3 items-end">
            <div>
                <label class="block text-xs font-medium text-gray-600 mb-1">Status</label>
                <select name="status" class="px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-green-500">
                    <option value="">All Statuses</option>
                    <option value="active" {{ request('status') == 'active' ? 'selected' : '' }}>Active</option>
                    <option value="waiting" {{ request('status') == 'waiting' ? 'selected' : '' }}>Waiting</option>
                    <option value="resolved" {{ request('status') == 'resolved' ? 'selected' : '' }}>Resolved</option>
                    <option value="closed" {{ request('status') == 'closed' ? 'selected' : '' }}>Closed</option>
                    <option value="missed" {{ request('status') == 'missed' ? 'selected' : '' }}>Missed</option>
                </select>
            </div>
            <div>
                <label class="block text-xs font-medium text-gray-600 mb-1">Category</label>
                <select name="category_id" class="px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-green-500">
                    <option value="">All Categories</option>
                    @foreach($categories as $category)
                        <option value="{{ $category->id }}" {{ request('category_id') == $category->id ? 'selected' : '' }}>{{ $category->name }}</option>
                    @endforeach
                </select>
            </div>
            <div>
                <label class="block text-xs font-medium text-gray-600 mb-1">From</label>
                <input type="date" name="date_from" value="{{ request('date_from') }}"
                    class="px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-green-500">
            </div>
            <div>
                <label class="block text-xs font-medium text-gray-600 mb-1">To</label>
                <input type="date" name="date_to" value="{{ request('date_to') }}"
                    class="px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-green-500">
            </div>
            <div class="flex gap-2">
                <button type="submit" class="px-4 py-2 bg-[#1a4731] text-white text-sm rounded-lg hover:bg-[#276749] transition">
                    <i class="fas fa-search mr-1"></i> Filter
                </button>
                @if(request()->hasAny(['status', 'category_id', 'date_from', 'date_to']))
                    <a href="{{ route('chat.conversations') }}" class="px-4 py-2 border border-gray-300 text-gray-600 text-sm rounded-lg hover:bg-gray-50 transition">
                        Clear
                    </a>
                @endif
            </div>
        </form>
    </div>

    @if(session('success'))
        <div class="mx-4 mt-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

    {{-- Agent's Active Chats --}}
    @if(isset($agentConversations) && $agentConversations->count() > 0)
        <div class="p-4 border-b bg-green-50">
            <h3 class="text-sm font-semibold text-green-800 mb-3 flex items-center gap-2">
                <i class="fas fa-comment-dots text-green-600"></i> Your Active Chats
            </h3>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
                @foreach($agentConversations as $conv)
                    <a href="{{ route('chat.conversation.show', $conv) }}"
                       class="bg-white rounded-lg border border-green-200 p-3 hover:shadow-sm transition">
                        <div class="flex items-center justify-between mb-1">
                            <span class="font-medium text-gray-800 text-sm">{{ $conv->visitor_name ?? 'Guest' }}</span>
                            <span class="text-xs text-gray-400">{{ $conv->created_at->diffForHumans() }}</span>
                        </div>
                        <p class="text-xs text-gray-500">{{ $conv->category->name ?? 'General' }}</p>
                    </a>
                @endforeach
            </div>
        </div>
    @endif

    {{-- Conversations Table --}}
    <div class="overflow-x-auto">
        <table class="w-full table-zebra">
            <thead>
                <tr>
                    <th class="px-4 py-3 text-left bg-blue-700 text-white text-xs font-semibold uppercase tracking-wider">Visitor</th>
                    <th class="px-4 py-3 text-left bg-purple-700 text-white text-xs font-semibold uppercase tracking-wider">Category</th>
                    <th class="px-4 py-3 text-left bg-green-700 text-white text-xs font-semibold uppercase tracking-wider">Agent</th>
                    <th class="px-4 py-3 text-left bg-orange-700 text-white text-xs font-semibold uppercase tracking-wider">Status</th>
                    <th class="px-4 py-3 text-left bg-teal-700 text-white text-xs font-semibold uppercase tracking-wider">Messages</th>
                    <th class="px-4 py-3 text-left bg-red-700 text-white text-xs font-semibold uppercase tracking-wider">Started</th>
                    <th class="px-4 py-3 text-center bg-indigo-700 text-white text-xs font-semibold uppercase tracking-wider">Actions</th>
                </tr>
            </thead>
            <tbody>
                @forelse($history as $conv)
                    <tr class="odd:bg-white even:bg-gray-50 hover:bg-gray-100 transition-colors border-b border-gray-100 last:border-0">
                        <td class="px-4 py-3">
                            <div class="text-sm font-medium text-gray-800">{{ $conv->visitor_name ?? 'Guest Visitor' }}</div>
                            <div class="text-xs text-gray-500">{{ $conv->visitor_email ?? '' }}</div>
                        </td>
                        <td class="px-4 py-3">
                            @if($conv->category)
                                <span class="px-2 py-0.5 text-xs rounded-full text-white font-medium"
                                      style="background-color: {{ $conv->category->color ?? '#6b7280' }}">
                                    {{ $conv->category->name }}
                                </span>
                            @else
                                <span class="text-xs text-gray-400">General</span>
                            @endif
                        </td>
                        <td class="px-4 py-3 text-sm text-gray-600">{{ $conv->agent->name ?? 'Unassigned' }}</td>
                        <td class="px-4 py-3">
                            @php
                                $statusColors = [
                                    'active' => 'bg-green-100 text-green-700',
                                    'waiting' => 'bg-yellow-100 text-yellow-700',
                                    'resolved' => 'bg-blue-100 text-blue-700',
                                    'closed' => 'bg-gray-100 text-gray-700',
                                    'missed' => 'bg-red-100 text-red-700',
                                ];
                                $sc = $statusColors[$conv->status] ?? 'bg-gray-100 text-gray-700';
                            @endphp
                            <span class="px-2 py-0.5 text-xs rounded-full font-semibold {{ $sc }}">
                                {{ ucfirst($conv->status) }}
                            </span>
                        </td>
                        <td class="px-4 py-3 text-sm text-gray-600">{{ $conv->message_count }}</td>
                        <td class="px-4 py-3 text-sm text-gray-500">{{ $conv->created_at->format('M d, H:i') }}</td>
                        <td class="px-4 py-3 text-center">
                            <a href="{{ route('chat.conversation.show', $conv) }}"
                               class="btn-action-view inline-flex items-center px-2 py-1 text-xs rounded text-white">
                                <i class="fas fa-eye"></i>
                            </a>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="7" class="px-4 py-12 text-center text-gray-500">
                            <i class="fas fa-inbox text-4xl mb-4 opacity-50 block"></i>
                            <p>No conversations found.</p>
                        </td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    @if($history->hasPages())
        <div class="px-4 py-3 border-t">{{ $history->links() }}</div>
    @endif
</div>
</x-app-layout>
