<x-app-layout>
<x-module-hero title="Chat Support" description="Manage real-time conversations with visitors" icon="fa-headset">
    <x-slot name="tabs">
        @can('view chats')
        <a href="{{ route('chat.index') }}"
           class="module-hero-tab {{ request()->routeIs('chat.index') ? 'border-b-2 border-[#1e293b]' : '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 {{ request()->routeIs('chat.conversations') ? 'border-b-2 border-[#1e293b]' : '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 {{ request()->routeIs('chat.agent-dashboard') ? 'border-b-2 border-[#1e293b]' : '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 {{ request()->routeIs('chat.agents') ? 'border-b-2 border-[#1e293b]' : '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 {{ request()->routeIs('chat.categories') ? 'border-b-2 border-[#1e293b]' : '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="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

    {{-- Stats Row --}}
    <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
        <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-4">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-xs text-gray-500 font-medium">Total Chats</p>
                    <p class="text-2xl font-bold text-gray-800">{{ $statistics['total'] ?? 0 }}</p>
                </div>
                <div class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center">
                    <i class="fas fa-comments text-blue-600"></i>
                </div>
            </div>
        </div>
        <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-4">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-xs text-gray-500 font-medium">Active</p>
                    <p class="text-2xl font-bold text-green-700">{{ $statistics['active'] ?? 0 }}</p>
                </div>
                <div class="w-10 h-10 bg-green-100 rounded-lg flex items-center justify-center">
                    <i class="fas fa-comment-dots text-green-600"></i>
                </div>
            </div>
        </div>
        <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-4">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-xs text-gray-500 font-medium">Waiting</p>
                    <p class="text-2xl font-bold text-yellow-700">{{ $statistics['waiting'] ?? 0 }}</p>
                </div>
                <div class="w-10 h-10 bg-yellow-100 rounded-lg flex items-center justify-center">
                    <i class="fas fa-hourglass-half text-yellow-600"></i>
                </div>
            </div>
        </div>
        <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-4">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-xs text-gray-500 font-medium">Agents Online</p>
                    <p class="text-2xl font-bold text-purple-700">{{ $statistics['agents_online'] ?? 0 }}</p>
                </div>
                <div class="w-10 h-10 bg-purple-100 rounded-lg flex items-center justify-center">
                    <i class="fas fa-user-check text-purple-600"></i>
                </div>
            </div>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        {{-- Waiting Conversations --}}
        @can('handle chats')
            <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
                <div class="px-6 py-4 border-b border-gray-100 bg-gray-50 flex items-center justify-between">
                    <h3 class="font-semibold text-gray-800 flex items-center gap-2">
                        <i class="fas fa-clock text-yellow-600"></i> Waiting for Agent
                    </h3>
                    <span class="px-2 py-0.5 text-xs bg-yellow-100 text-yellow-700 rounded-full font-semibold">
                        {{ $waitingConversations->count() }}
                    </span>
                </div>
                <div class="divide-y divide-gray-100 max-h-96 overflow-y-auto">
                    @forelse($waitingConversations as $conv)
                        <a href="{{ route('chat.conversation.show', $conv) }}"
                           class="block p-4 hover:bg-gray-50 transition">
                            <div class="flex justify-between items-start mb-1">
                                <p class="font-medium text-gray-800 text-sm">{{ $conv->visitor_name ?? 'Guest Visitor' }}</p>
                                <span class="text-xs text-gray-400">{{ $conv->created_at->diffForHumans() }}</span>
                            </div>
                            <p class="text-xs text-gray-500 mb-1">{{ $conv->category->name ?? 'General' }}</p>
                            @if($conv->initial_message)
                                <p class="text-sm text-gray-600 truncate">{{ Str::limit($conv->initial_message, 60) }}</p>
                            @endif
                        </a>
                    @empty
                        <div class="p-8 text-center text-gray-500">
                            <i class="fas fa-check-circle text-3xl mb-3 block text-green-400"></i>
                            <p class="text-sm">No waiting conversations</p>
                        </div>
                    @endforelse
                </div>
                @if($waitingConversations->count() > 0)
                    <div class="px-4 py-3 border-t border-gray-100">
                        <a href="{{ route('chat.conversations') }}" class="text-sm text-blue-600 hover:text-blue-700 font-medium">
                            View all conversations →
                        </a>
                    </div>
                @endif
            </div>
        @endcan

        {{-- Categories Overview --}}
        @can('view chats')
            <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
                <div class="px-6 py-4 border-b border-gray-100 bg-gray-50 flex items-center justify-between">
                    <h3 class="font-semibold text-gray-800 flex items-center gap-2">
                        <i class="fas fa-th-large text-blue-600"></i> Chat Categories
                    </h3>
                    @can('manage chat categories')
                        <a href="{{ route('chat.categories') }}" class="text-xs text-blue-600 hover:text-blue-700 font-medium">
                            Manage →
                        </a>
                    @endcan
                </div>
                <div class="p-4 space-y-3">
                    @forelse($categories as $category)
                        <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                            <div class="flex items-center gap-3">
                                <div class="w-9 h-9 rounded-lg flex items-center justify-center text-white text-sm"
                                     style="background-color: {{ $category->color ?? '#1a4731' }}">
                                    <i class="fas fa-{{ $category->icon ?? 'comments' }}"></i>
                                </div>
                                <div>
                                    <p class="font-medium text-gray-800 text-sm">{{ $category->name }}</p>
                                    <p class="text-xs text-gray-500">{{ $category->conversations_count ?? 0 }} conversations</p>
                                </div>
                            </div>
                            <span class="px-2 py-0.5 text-xs rounded-full {{ $category->is_active ? 'bg-green-100 text-green-700' : 'bg-gray-100 text-gray-600' }}">
                                {{ $category->is_active ? 'Active' : 'Inactive' }}
                            </span>
                        </div>
                    @empty
                        <div class="text-center py-6 text-gray-500">
                            <p class="text-sm">No categories configured</p>
                            @can('manage chat categories')
                                <a href="{{ route('chat.categories') }}" class="text-blue-600 text-sm mt-1 inline-block">Create categories →</a>
                            @endcan
                        </div>
                    @endforelse
                </div>
            </div>
        @endcan
    </div>

    {{-- Widget Integration Info --}}
    @can('manage chat categories')
        <div class="mt-6 bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-100 bg-gray-50">
                <h3 class="font-semibold text-gray-800 flex items-center gap-2">
                    <i class="fas fa-code text-indigo-600"></i> Website Widget Integration
                </h3>
            </div>
            <div class="p-6">
                <p class="text-sm text-gray-600 mb-4">The live chat widget is already embedded in the public site layout. Visitors can open the chat interface by clicking the floating chat button on any public page.</p>
                <p class="text-sm text-gray-600 mb-4">If you want to customize visitor behavior, update <code>resources/js/app.js</code> and the public layout component instead of adding a separate widget script.</p>
                <p class="text-xs text-gray-500 mt-3">
                    <i class="fas fa-info-circle mr-1"></i>
                    The current implementation uses the public layout for chat integration, so no extra <code>/chat/widget.js</code> file is required.
                </p>
            </div>
        </div>
    @endcan
</div>
</x-app-layout>
