<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
            {{ __('Messages') }}
        </h2>
    </x-slot>

    <div class="py-12">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
            <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                <div class="p-6">
                    @if($conversations->count() > 0)
                        <div class="space-y-4">
                            @foreach($conversations as $conversation)
                                @php
                                    $unreadCount = $conversation->messages()
                                        ->where('user_id', '!=', auth()->id())
                                        ->where('read_at', null)
                                        ->count();
                                @endphp
                                <div class="border rounded-lg p-4 hover:bg-gray-50 transition-colors {{ $conversation->has_unread ? 'border-blue-300 bg-blue-50 border-l-4 border-l-blue-500' : 'border-gray-200' }}">
                                    <a href="{{ route('messages.show', $conversation) }}" class="block">
                                        <div class="flex items-start justify-between">
                                            <div class="flex-1">
                                                <div class="flex items-center space-x-3">
                                                    <div class="relative">
                                                        <div class="w-10 h-10 bg-gray-300 rounded-full flex items-center justify-center">
                                                            <span class="text-gray-600 font-semibold text-sm">
                                                                {{ substr($conversation->other_participant->name ?? 'Unknown', 0, 1) }}
                                                            </span>
                                                        </div>
                                                        @if($conversation->has_unread)
                                                            <div class="absolute -bottom-1 -right-1 w-4 h-4 bg-red-600 rounded-full flex items-center justify-center animate-pulse">
                                                                <span class="text-white text-xs font-bold">{{ $unreadCount }}</span>
                                                            </div>
                                                        @endif
                                                    </div>
                                                    <div class="flex-1">
                                                        <div class="flex items-center space-x-2">
                                                            <h3 class="font-semibold text-gray-900">{{ $conversation->subject }}</h3>
                                                            @if($conversation->has_unread)
                                                                <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
                                                                    {{ $unreadCount }} unread
                                                                </span>
                                                            @endif
                                                        </div>
                                                        <p class="text-sm text-gray-600">
                                                            With {{ $conversation->other_participant->name ?? 'Unknown User' }}
                                                        </p>
                                                        @if($conversation->latest_message)
                                                            <p class="text-sm {{ $conversation->has_unread ? 'text-gray-800 font-medium' : 'text-gray-500' }} line-clamp-2 mt-1">
                                                                {{ Str::limit($conversation->latest_message->body, 100) }}
                                                            </p>
                                                        @endif
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="flex flex-col items-end space-y-2">
                                                @if($conversation->item)
                                                    <div class="flex items-center space-x-2">
                                                        @if($conversation->item->primaryPhoto)
                                                            <img src="{{ asset($conversation->item->primaryPhoto->url) }}" alt="{{ $conversation->item->title }}" class="w-12 h-12 object-cover rounded">
                                                        @else
                                                            <div class="w-12 h-12 bg-gray-200 rounded flex items-center justify-center">
                                                                <span class="text-gray-400 text-xs">No Image</span>
                                                            </div>
                                                        @endif
                                                        <div class="text-right">
                                                            <p class="text-sm font-medium text-gray-900">{{ Str::limit($conversation->item->title, 30) }}</p>
                                                            @if($conversation->item->price && $conversation->item->listing_type === 'sale')
                                                                <p class="text-sm text-gray-900 font-semibold">${{ number_format($conversation->item->price, 2) }}</p>
                                                            @else
                                                                <p class="text-sm text-gray-600 font-semibold">Trade Only</p>
                                                            @endif
                                                        </div>
                                                    </div>
                                                @endif
                                                <p class="text-xs text-gray-500">
                                                    {{ $conversation->last_message_at ? $conversation->last_message_at->diffForHumans() : $conversation->created_at->diffForHumans() }}
                                                </p>
                                            </div>
                                        </div>
                                    </a>
                                </div>
                            @endforeach
                        </div>
                    @else
                        <div class="text-center py-12">
                            <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path>
                            </svg>
                            <h3 class="text-lg font-semibold text-gray-900 mb-2 mt-4">No conversations yet</h3>
                            @if(!auth()->user()->is_active)
                                <p class="text-gray-600 mb-6">As a suspended user, you can only contact administrators.</p>
                                <div class="mt-8">
                                    <a href="{{ route('messages.contact-admin') }}" class="inline-flex items-center px-4 py-2 bg-gray-800 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-gray-700 transition ease-in-out duration-150">
                                        Contact Administrator
                                    </a>
                                </div>
                            @else
                                <p class="text-gray-600 mb-6">Start a conversation by messaging a seller about an item you're interested in.</p>
                                <div class="mt-8">
                                    <a href="{{ route('items.index') }}" class="inline-flex items-center px-4 py-2 bg-gray-800 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-gray-700 transition ease-in-out duration-150">
                                        Browse Items
                                    </a>
                                </div>
                            @endif
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</x-app-layout>