<x-app-layout
    :title="$user->name . ' — Seller Profile'"
    :description="$user->name . ' sells musical instruments on ' . config('app.name') . '.'"
    :image="$user->avatar ? asset($user->avatar) : null"
>
    <x-slot name="header">
        <div class="flex items-center space-x-4">
            <div class="w-16 h-16 bg-gray-300 rounded-full flex items-center justify-center">
                <span class="text-gray-600 font-semibold text-xl">{{ substr($user->name, 0, 1) }}</span>
            </div>
            <div>
                <h2 class="font-semibold text-xl text-gray-800 leading-tight">
                    {{ $user->name }}
                </h2>
                <p class="text-sm text-gray-600">
                    @if($user->rating > 0)
                        ⭐ {{ number_format($user->rating, 1) }} ({{ $user->total_reviews }} reviews)
                    @else
                        New seller
                    @endif
                    • Member since {{ $stats['member_since']->format('M Y') }}
                </p>
            </div>
        </div>
    </x-slot>

    <div class="py-12">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
            <!-- User Stats -->
            <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
                <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                    <div class="p-6 text-center">
                        <div class="text-3xl font-bold text-blue-600">{{ $stats['active_listings'] }}</div>
                        <div class="text-sm text-gray-600">Active Listings</div>
                    </div>
                </div>
                <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                    <div class="p-6 text-center">
                        <div class="text-3xl font-bold text-green-600">{{ $stats['sold_items'] }}</div>
                        <div class="text-sm text-gray-600">Items Sold</div>
                    </div>
                </div>
                <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                    <div class="p-6 text-center">
                        <div class="text-3xl font-bold text-purple-600">{{ $stats['total_listings'] }}</div>
                        <div class="text-sm text-gray-600">Total Listings</div>
                    </div>
                </div>
                <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                    <div class="p-6 text-center">
                        @if($user->rating > 0)
                            <div class="text-3xl font-bold text-yellow-600">{{ number_format($user->rating, 1) }}</div>
                            <div class="text-sm text-gray-600">Average Rating</div>
                        @else
                            <div class="text-3xl font-bold text-gray-400">--</div>
                            <div class="text-sm text-gray-600">No Ratings Yet</div>
                        @endif
                    </div>
                </div>
            </div>

            <!-- Trust Chain Display -->
            @if($user->verifiedTrustLinks->count() > 0)
                <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg mb-8">
                    <div class="p-6">
                        <h3 class="text-lg font-semibold text-gray-900 mb-4">Verified Accounts</h3>
                        <div class="flex flex-wrap gap-3">
                            @foreach($user->verifiedTrustLinks as $link)
                                <a href="{{ $link->remote_user_url }}" target="_blank" rel="noopener noreferrer" class="inline-flex items-center px-4 py-2 bg-green-50 border border-green-200 rounded-lg hover:bg-green-100 transition">
                                    <span class="text-green-600 mr-2">✓</span>
                                    <span class="text-gray-900 font-medium">{{ $link->service->name }}</span>
                                    <svg class="w-4 h-4 ml-2 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
                                    </svg>
                                </a>
                            @endforeach
                        </div>
                    </div>
                </div>
            @elseif(!auth()->check())
                <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg mb-8">
                    <div class="p-6 text-center">
                        <p class="text-gray-600">🔒 Sign in to see {{ $user->name }}'s verified trust chain</p>
                    </div>
                </div>
            @endif

            <!-- Contact Section -->
            @auth
                @if(auth()->id() !== $user->id)
                    <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg mb-8">
                        <div class="p-6">
                            <h3 class="text-lg font-semibold text-gray-900 mb-4">Contact {{ $user->name }}</h3>
                            <div class="flex space-x-4">
                                <form method="POST" action="{{ route('messages.create-direct') }}">
                                    @csrf
                                    <input type="hidden" name="recipient_id" value="{{ $user->id }}">
                                    <button type="submit" class="inline-flex items-center px-4 py-2 bg-blue-600 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-blue-700 transition ease-in-out duration-150">
                                        <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <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>
                                        Send Message
                                    </button>
                                </form>
                                <a href="{{ route('reports.create', ['type' => 'user', 'id' => $user->id]) }}" class="inline-flex items-center px-4 py-2 border border-red-300 rounded-md font-semibold text-xs text-red-700 bg-white hover:bg-red-50 transition ease-in-out duration-150">
                                    <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z"></path>
                                    </svg>
                                    Report User
                                </a>
                            </div>
                        </div>
                    </div>
                @endif
            @else
                <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg mb-8">
                    <div class="p-6 text-center">
                        <p class="text-gray-600 mb-4">Sign in to contact this seller</p>
                        <a href="{{ route('login') }}" class="inline-flex items-center px-4 py-2 bg-blue-600 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-blue-700 transition ease-in-out duration-150">
                            Sign In
                        </a>
                    </div>
                </div>
            @endauth

            <!-- User's Listings -->
            <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                <div class="p-6">
                    <div class="flex justify-between items-center mb-6">
                        <h2 class="text-xl font-semibold text-gray-900">{{ $user->name }}'s Listings</h2>
                        <span class="text-sm text-gray-500">{{ $listings->total() }} {{ Str::plural('item', $listings->total()) }}</span>
                    </div>

                    @if($listings->count() > 0)
                        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
                            @foreach($listings as $item)
                                <div class="group border border-gray-200 rounded-lg overflow-hidden hover:shadow-lg transition-shadow">
                                    <a href="{{ route('items.show', $item) }}" class="block">
                                        <div class="aspect-square bg-gray-200 overflow-hidden">
                                            @if($item->primaryPhoto)
                                                <img src="{{ asset($item->primaryPhoto->url) }}" alt="{{ $item->title }}" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-200">
                                            @else
                                                <div class="w-full h-full flex items-center justify-center">
                                                    <span class="text-gray-400">No Image</span>
                                                </div>
                                            @endif
                                        </div>
                                        <div class="p-4">
                                            <h3 class="font-semibold text-gray-900 group-hover:text-blue-600 line-clamp-2 mb-2">{{ $item->title }}</h3>
                                            
                                            <div class="flex items-center justify-between mb-2">
                                                @if($item->price && in_array($item->listing_type, ['sale', 'inventory_open']))
                                                    <span class="font-bold text-lg text-gray-900">${{ number_format($item->price, 2) }}</span>
                                                @else
                                                    <span class="font-bold text-lg text-green-600">
                                                        @if($item->listing_type === 'trade')
                                                            Trade Only
                                                        @else
                                                            {{ ucfirst($item->listing_type) }}
                                                        @endif
                                                    </span>
                                                @endif
                                                
                                                @if($item->status === 'sale_pending')
                                                    <span class="bg-orange-100 text-orange-800 text-xs px-2 py-1 rounded-full">
                                                        Pending
                                                    </span>
                                                @endif
                                            </div>
                                            
                                            <div class="text-xs text-gray-500 space-y-1">
                                                @if($item->category)
                                                    <div>{{ $item->category->name }}</div>
                                                @endif
                                                @if($item->location_city || $item->location_state)
                                                    <div>{{ collect([$item->location_city, $item->location_state])->filter()->join(', ') }}</div>
                                                @endif
                                                <div>{{ $item->created_at->diffForHumans() }}</div>
                                            </div>
                                        </div>
                                    </a>
                                </div>
                            @endforeach
                        </div>

                        <!-- Pagination -->
                        @if($listings->hasPages())
                            <div class="mt-8">
                                {{ $listings->links() }}
                            </div>
                        @endif
                    @else
                        <div class="text-center py-8">
                            <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="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2M4 13h2m13-4v6a2 2 0 01-2 2H7a2 2 0 01-2-2V9a2 2 0 012-2h10a2 2 0 012 2z"></path>
                            </svg>
                            <h3 class="mt-2 text-sm font-medium text-gray-900">No active listings</h3>
                            <p class="mt-1 text-sm text-gray-500">{{ $user->name }} doesn't have any active listings at the moment.</p>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</x-app-layout>