<x-app-layout>
    <x-slot name="header">
        <div class="flex justify-between items-center">
            <h2 class="font-semibold text-xl text-gray-800 leading-tight">
                {{ $conversation->subject }}
            </h2>
            <div class="flex items-center space-x-4">
                <span class="text-sm text-gray-600">
                    With {{ $otherParticipant->name ?? 'Unknown User' }}
                </span>
                <a href="{{ route('messages.index') }}" class="inline-flex items-center px-3 py-2 bg-gray-300 border border-transparent rounded-md font-semibold text-xs text-gray-700 uppercase tracking-widest hover:bg-gray-400 transition ease-in-out duration-150">
                    Back to Messages
                </a>
            </div>
        </div>
    </x-slot>

    <div class="py-12">
        <div class="max-w-4xl mx-auto sm:px-6 lg:px-8">
            <!-- Item Context (if conversation is about an item) -->
            @if($conversation->item)
                <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg mb-6">
                    <div class="p-4 bg-gray-50 border-b">
                        <div class="flex items-center space-x-4">
                            <div class="w-16 h-16 bg-gray-200 rounded-lg overflow-hidden">
                                @if($conversation->item->primaryPhoto)
                                    <img src="{{ asset($conversation->item->primaryPhoto->url) }}" alt="{{ $conversation->item->title }}" class="w-full h-full object-cover">
                                @else
                                    <div class="w-full h-full flex items-center justify-center">
                                        <span class="text-gray-400 text-xs">No Image</span>
                                    </div>
                                @endif
                            </div>
                            <div class="flex-1">
                                <h3 class="font-semibold text-lg">{{ $conversation->item->title }}</h3>
                                @if($conversation->item->category)
                                    <p class="text-gray-600">{{ $conversation->item->category->name }}</p>
                                @endif
                                @if($conversation->item->price && $conversation->item->listing_type === 'sale')
                                    <p class="font-bold text-green-600">${{ number_format($conversation->item->price, 2) }}</p>
                                @else
                                    <p class="font-bold text-green-600">Trade Only</p>
                                @endif
                            </div>
                            <div>
                                <a href="{{ route('items.show', $conversation->item) }}" class="inline-flex items-center px-3 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">
                                    View Item
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            @endif

            <!-- Messages -->
            <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                <div class="p-6">
                    <!-- Messages Thread -->
                    <div class="space-y-6 mb-8" style="max-height: 500px; overflow-y: auto;">
                        @foreach($messages as $message)
                            <div class="flex {{ $message->user_id === auth()->id() ? 'justify-end' : 'justify-start' }}">
                                <div class="flex items-start space-x-3 max-w-xs lg:max-w-md">
                                    @if($message->user_id !== auth()->id())
                                        <div class="w-8 h-8 bg-gray-300 rounded-full flex items-center justify-center flex-shrink-0">
                                            <span class="text-gray-600 font-semibold text-xs">
                                                {{ substr($message->user->name, 0, 1) }}
                                            </span>
                                        </div>
                                    @endif
                                    
                                    <div class="flex flex-col {{ $message->user_id === auth()->id() ? 'items-end' : 'items-start' }}">
                                        <div class="px-4 py-3 rounded-lg {{ $message->user_id === auth()->id() ? 'bg-blue-600 text-white' : 'bg-gray-100 text-gray-900' }}">
                                            <p class="text-sm whitespace-pre-wrap">{{ $message->body }}</p>
                                        </div>
                                        <div class="flex items-center space-x-2 mt-1">
                                            <span class="text-xs text-gray-500">
                                                {{ $message->user->name }}
                                            </span>
                                            <span class="text-xs text-gray-500">
                                                {{ $message->created_at->diffForHumans() }}
                                            </span>
                                            @if($message->read_at && $message->user_id === auth()->id())
                                                <span class="text-xs text-gray-400">✓ Read</span>
                                            @endif
                                        </div>
                                    </div>
                                    
                                    @if($message->user_id === auth()->id())
                                        <div class="w-8 h-8 bg-blue-600 rounded-full flex items-center justify-center flex-shrink-0">
                                            <span class="text-white font-semibold text-xs">
                                                {{ substr($message->user->name, 0, 1) }}
                                            </span>
                                        </div>
                                    @endif
                                </div>
                            </div>
                        @endforeach
                    </div>

                    <!-- Reply Form -->
                    <div class="border-t pt-6">
                        <form method="POST" action="{{ route('messages.reply', $conversation) }}">
                            @csrf
                            
                            <div class="mb-4">
                                <x-input-label for="message" :value="__('Reply')" />
                                <textarea id="message" name="message" rows="4" class="mt-1 block w-full border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm" placeholder="Type your reply..." required>{{ old('message') }}</textarea>
                                <x-input-error :messages="$errors->get('message')" class="mt-2" />
                            </div>

                            <div class="flex items-center justify-between">
                                <div class="text-sm text-gray-600">
                                    <p>Conversation with {{ $otherParticipant->name ?? 'Unknown User' }}</p>
                                </div>
                                
                                <x-primary-button>
                                    {{ __('Send Reply') }}
                                </x-primary-button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

</x-app-layout>