@extends('layouts.admin')

@section('title', 'Conversations')
@section('page-title', 'Messages & Conversations')

@section('content')
<div class="grid grid-cols-4 gap-6">
    <!-- Stats Cards -->
    <div class="col-span-4 grid grid-cols-4 gap-4 mb-2">
        <div class="bg-white rounded-xl shadow-sm p-4">
            <p class="text-sm text-gray-500">Total Conversations</p>
            <p class="text-2xl font-bold">{{ $stats['total'] }}</p>
        </div>
        <div class="bg-white rounded-xl shadow-sm p-4">
            <p class="text-sm text-gray-500">Open</p>
            <p class="text-2xl font-bold text-green-600">{{ $stats['open'] }}</p>
        </div>
        <div class="bg-white rounded-xl shadow-sm p-4">
            <p class="text-sm text-gray-500">Pending</p>
            <p class="text-2xl font-bold text-yellow-600">{{ $stats['pending'] }}</p>
        </div>
        <div class="bg-white rounded-xl shadow-sm p-4">
            <p class="text-sm text-gray-500">Closed</p>
            <p class="text-2xl font-bold text-gray-600">{{ $stats['closed'] }}</p>
        </div>
    </div>

    <!-- Filters -->
    <div class="col-span-4 bg-white rounded-xl shadow-sm p-4 mb-2">
        <form method="GET" class="flex gap-4">
            <select name="status" class="border border-gray-300 rounded-lg px-3 py-2">
                <option value="">All Statuses</option>
                <option value="open" {{ request('status') === 'open' ? 'selected' : '' }}>Open</option>
                <option value="pending" {{ request('status') === 'pending' ? 'selected' : '' }}>Pending</option>
                <option value="closed" {{ request('status') === 'closed' ? 'selected' : '' }}>Closed</option>
            </select>

            <select name="type" class="border border-gray-300 rounded-lg px-3 py-2">
                <option value="">All Types</option>
                <option value="support" {{ request('type') === 'support' ? 'selected' : '' }}>Support</option>
                <option value="vendor_inquiry" {{ request('type') === 'vendor_inquiry' ? 'selected' : '' }}>Vendor Inquiry</option>
                <option value="order" {{ request('type') === 'order' ? 'selected' : '' }}>Order Related</option>
                <option value="general" {{ request('type') === 'general' ? 'selected' : '' }}>General</option>
            </select>

            <input type="text" name="search" value="{{ request('search') }}" 
                placeholder="Search by user..."
                class="border border-gray-300 rounded-lg px-3 py-2 flex-1 max-w-sm">

            <button type="submit" class="bg-gray-800 text-white px-4 py-2 rounded-lg">Filter</button>
            <a href="{{ route('admin.conversations.create') }}" class="bg-blue-600 text-white px-4 py-2 rounded-lg ml-auto">New Conversation</a>
        </form>
    </div>

    <!-- Conversations Table -->
    <div class="col-span-4 bg-white rounded-xl shadow-sm overflow-hidden">
        <table class="w-full text-sm">
            <thead class="bg-gray-50">
                <tr class="text-gray-500">
                    <th class="text-left py-3 px-4">User</th>
                    <th class="text-left py-3 px-4">Subject</th>
                    <th class="text-left py-3 px-4">Type</th>
                    <th class="text-left py-3 px-4">Status</th>
                    <th class="text-left py-3 px-4">Last Message</th>
                    <th class="text-left py-3 px-4">Actions</th>
                </tr>
            </thead>
            <tbody>
                @forelse($conversations as $conversation)
                <tr class="border-b hover:bg-gray-50 {{ $conversation->status === 'open' ? 'bg-blue-50' : '' }}">
                    <td class="py-3 px-4">
                        <div class="flex items-center gap-2">
                            <div class="w-8 h-8 bg-gray-200 rounded-full flex items-center justify-center text-sm font-bold">
                                {{ strtoupper(substr($conversation->user->name, 0, 1)) }}
                            </div>
                            <div>
                                <p class="font-medium">{{ $conversation->user->name }}</p>
                                <p class="text-xs text-gray-500">{{ $conversation->user->email }}</p>
                            </div>
                        </div>
                    </td>
                    <td class="py-3 px-4">
                        <a href="{{ route('admin.conversations.show', $conversation) }}" class="text-blue-600 hover:underline">
                            {{ $conversation->subject ?: '(No Subject)' }}
                        </a>
                        @if($conversation->unreadMessages()->count() > 0)
                            <span class="ml-2 bg-red-500 text-white text-xs px-2 py-0.5 rounded-full">
                                {{ $conversation->unreadMessages()->count() }}
                            </span>
                        @endif
                    </td>
                    <td class="py-3 px-4">
                        <span class="px-2 py-1 rounded-full text-xs font-medium
                            {{ $conversation->type === 'support' ? 'bg-purple-100 text-purple-700' : 
                               ($conversation->type === 'vendor_inquiry' ? 'bg-blue-100 text-blue-700' :
                               ($conversation->type === 'order' ? 'bg-green-100 text-green-700' : 'bg-gray-100 text-gray-700')) }}">
                            {{ ucfirst(str_replace('_', ' ', $conversation->type)) }}
                        </span>
                    </td>
                    <td class="py-3 px-4">
                        <span class="px-2 py-1 rounded-full text-xs font-medium
                            {{ $conversation->status === 'open' ? 'bg-green-100 text-green-700' : 
                               ($conversation->status === 'pending' ? 'bg-yellow-100 text-yellow-700' : 'bg-gray-100 text-gray-700') }}">
                            {{ ucfirst($conversation->status) }}
                        </span>
                    </td>
                    <td class="py-3 px-4 text-gray-500">
                        {{ $conversation->last_message_at ? $conversation->last_message_at->diffForHumans() : 'No messages' }}
                    </td>
                    <td class="py-3 px-4">
                        <a href="{{ route('admin.conversations.show', $conversation) }}" 
                           class="text-blue-600 hover:underline text-sm">View</a>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="6" class="py-8 text-center text-gray-500">No conversations found.</td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    <div class="col-span-4">{{ $conversations->links() }}</div>
</div>
@endsection