@extends('layouts.app')

@section('title', 'Conversation')

@section('content')
    @php
        $partner = $conversation->participants->firstWhere('id', '!=', auth()->id());
    @endphp
    <div class="min-h-screen bg-gradient-to-br from-sky-50 via-white to-teal-50">
        <div class="mx-auto max-w-4xl px-4 py-8 sm:px-6 lg:px-8">
            <!-- Header -->
            <div class="mb-6 flex items-center justify-between rounded-2xl border border-slate-100 bg-white p-4 shadow-sm">
                <div class="flex items-center gap-3">
                    <a href="{{ route('messages.index') }}" class="rounded-lg border border-slate-300 p-2 hover:bg-slate-50 transition">
                        <svg class="h-5 w-5 text-slate-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
                        </svg>
                    </a>
                    <img src="{{ $partner->displayAvatarUrl() }}" alt="{{ $partner->name }}" class="h-12 w-12 rounded-full object-cover border-2 border-slate-200" width="48" height="48" loading="lazy" decoding="async">
                    <div>
                        <h1 class="font-heading text-xl text-ink font-semibold">{{ $partner->name ?? 'User' }}</h1>
                        <p class="text-sm text-slate-500">{{ optional($partner->nurseProfile)->primary_specialty ?? 'Healthcare Professional' }}</p>
                    </div>
                </div>
                <div class="text-right">
                    <p class="text-xs text-slate-400">{{ $conversation->subject ?? 'Conversation' }}</p>
                    <p class="text-xs text-slate-500">{{ $messages->count() }} message(s)</p>
                </div>
            </div>

            @if (session('status'))
                <div class="mb-4 rounded-lg bg-green-50 border border-green-200 px-4 py-3 text-sm text-green-800">
                    {{ session('status') }}
                </div>
            @endif

            <!-- Messages Container -->
            <div class="mb-4 rounded-2xl border border-slate-100 bg-white p-6 shadow-sm">
                <div class="space-y-4 max-h-[500px] overflow-y-auto" id="messages-container">
                    @forelse ($messages as $message)
                        @php
                            $isCurrentUser = $message->sender_id === auth()->id();
                            $sender = $message->sender;
                        @endphp
                        <div class="flex {{ $isCurrentUser ? 'justify-end' : 'justify-start' }}">
                            <div class="flex gap-2 max-w-[70%] {{ $isCurrentUser ? 'flex-row-reverse' : 'flex-row' }}">
                                @if(!$isCurrentUser)
                                    <img src="{{ $sender->displayAvatarUrl() }}" alt="{{ $sender->name }}" class="h-8 w-8 rounded-full object-cover border-2 border-slate-200 flex-shrink-0" width="32" height="32" loading="lazy" decoding="async">
                                @endif
                                
                                <div>
                                    <div class="rounded-2xl px-4 py-3 {{ $isCurrentUser ? 'bg-brand text-white' : 'bg-slate-100 text-slate-800' }}">
                                        <p class="text-sm whitespace-pre-wrap break-words">{{ $message->body }}</p>
                                    </div>
                                    <p class="mt-1 text-xs text-slate-400 {{ $isCurrentUser ? 'text-right' : 'text-left' }}">
                                        {{ $message->created_at->format('M j, g:i A') }}
                                    </p>
                                </div>

                                @if($isCurrentUser)
                                    <img src="{{ auth()->user()->displayAvatarUrl() }}" alt="You" class="h-8 w-8 rounded-full object-cover border-2 border-brand flex-shrink-0" width="32" height="32" loading="lazy" decoding="async">
                                @endif
                            </div>
                        </div>
                    @empty
                        <div class="text-center py-8">
                            <svg class="mx-auto h-12 w-12 text-slate-300" 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" />
                            </svg>
                            <p class="mt-2 text-sm text-slate-500">No messages yet. Start the conversation!</p>
                        </div>
                    @endforelse
                </div>
            </div>

            <!-- Message Input Form -->
            <form method="POST" action="{{ route('messages.send', $conversation) }}" class="rounded-2xl border border-slate-100 bg-white p-4 shadow-sm">
                @csrf
                <div class="space-y-3">
                    <textarea 
                        name="body" 
                        rows="3" 
                        class="w-full rounded-lg border-slate-300 focus:border-brand focus:ring-brand resize-none" 
                        placeholder="Type your message..."
                        required
                    ></textarea>
                    @error('body') 
                        <div class="text-sm text-red-600">{{ $message }}</div> 
                    @enderror
                    <div class="flex items-center justify-between">
                        <p class="text-xs text-slate-500">Press Ctrl + Enter to send quickly</p>
                        <button type="submit" class="inline-flex items-center gap-2 rounded-lg bg-brand px-6 py-2.5 text-sm font-semibold text-white hover:bg-brand/90 transition shadow-sm">
                            <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" />
                            </svg>
                            Send Message
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <script>
        // Auto-scroll to bottom of messages
        document.addEventListener('DOMContentLoaded', function() {
            const container = document.getElementById('messages-container');
            if (container) {
                container.scrollTop = container.scrollHeight;
            }
        });
    </script>
@endsection