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

    <div class="py-12">
        <div class="max-w-5xl mx-auto sm:px-6 lg:px-8">

            @if($transactions->count() === 0)
                <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                    <div class="p-12 text-center">
                        <p class="text-gray-500 text-lg mb-2">No sales yet.</p>
                        <p class="text-gray-400 text-sm">Completed transactions where you're the seller will appear here.</p>
                        <a href="{{ route('items.my-listings') }}" class="mt-6 inline-flex items-center px-4 py-2 bg-blue-600 text-white text-sm font-semibold rounded-lg hover:bg-blue-700 transition">
                            View my listings
                        </a>
                    </div>
                </div>
            @else
                <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                    <div class="divide-y divide-gray-100">
                        @foreach($transactions as $transaction)
                            @php $item = $transaction->item; @endphp
                            <div class="flex items-center gap-4 p-4">
                                {{-- Thumbnail --}}
                                <div class="shrink-0">
                                    <div class="w-16 h-16 rounded-lg bg-gray-100 overflow-hidden">
                                        @if($item && $item->primaryPhoto)
                                            <img src="{{ asset($item->primaryPhoto->url) }}" alt="{{ $item->title }}" class="w-full h-full object-cover">
                                        @else
                                            <div class="w-full h-full flex items-center justify-center text-gray-300">
                                                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
                                            </div>
                                        @endif
                                    </div>
                                </div>

                                {{-- Details --}}
                                <div class="flex-1 min-w-0">
                                    <p class="font-semibold text-gray-900 truncate">
                                        {{ $item ? $item->title : 'Item deleted' }}
                                    </p>
                                    @if($transaction->buyer)
                                        <p class="text-sm text-gray-500">Buyer: {{ $transaction->buyer->name }}</p>
                                    @endif
                                    <p class="text-xs text-gray-400 mt-0.5">{{ $transaction->created_at->diffForHumans() }}</p>
                                </div>

                                {{-- Price --}}
                                <div class="shrink-0 text-right">
                                    @if($transaction->price)
                                        <p class="font-semibold text-gray-900">${{ number_format($transaction->price, 0) }}</p>
                                    @endif
                                    @if($transaction->type)
                                        <p class="text-xs text-gray-400">{{ ucfirst($transaction->type) }}</p>
                                    @endif
                                </div>

                                {{-- Status badge --}}
                                <div class="shrink-0">
                                    @php
                                        $badgeClass = match($transaction->status) {
                                            'completed' => 'bg-green-100 text-green-800',
                                            'pending'   => 'bg-yellow-100 text-yellow-800',
                                            'cancelled' => 'bg-red-100 text-red-800',
                                            default     => 'bg-gray-100 text-gray-600',
                                        };
                                    @endphp
                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium {{ $badgeClass }}">
                                        {{ ucfirst($transaction->status) }}
                                    </span>
                                </div>

                                {{-- Tracking --}}
                                @if($transaction->tracking_number)
                                    <div class="shrink-0 text-right">
                                        <p class="text-xs text-gray-500">Tracking</p>
                                        <p class="text-xs font-mono text-gray-700">{{ $transaction->tracking_number }}</p>
                                    </div>
                                @endif
                            </div>
                        @endforeach
                    </div>
                </div>

                <div class="mt-4">
                    {{ $transactions->links() }}
                </div>
            @endif

        </div>
    </div>
</x-app-layout>
