@extends('layouts.app')

@section('title', 'Messages')

@section('content')
    <div class="min-h-screen bg-gradient-to-br from-sky-50 via-white to-teal-50">
        <div class="mx-auto max-w-5xl px-4 py-8 sm:px-6 lg:px-8">
            <!-- Header -->
            <div class="mb-6 flex items-center justify-between">
                <div>
                    <h1 class="font-heading text-3xl text-ink flex items-center gap-2">
                        <svg class="h-8 w-8 text-purple-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z" />
                        </svg>
                        My Messages
                    </h1>
                    <p class="mt-1 text-sm text-slate-600">{{ $conversations->count() }} conversation(s)</p>
                </div>
                <a href="{{ route('nurse.connect.index') }}" class="inline-flex items-center gap-2 rounded-lg border border-slate-300 bg-white px-4 py-2 text-sm font-semibold text-slate-700 hover:bg-slate-50 transition">
                    <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="M10 19l-7-7m0 0l7-7m-7 7h18" />
                    </svg>
                    Back to Dashboard
                </a>
            </div>

            <!-- Conversations List -->
            <div class="space-y-3">
                @forelse ($conversations as $conversation)
                    @php
                        $otherParticipant = $conversation->participants->where('id', '!=', auth()->id())->first();
                        $lastMessage = $conversation->messages->first();
                    @endphp
                    <a href="{{ route('messages.show', $conversation) }}" class="block rounded-2xl border border-slate-100 bg-white p-5 shadow-sm hover:shadow-md hover:border-brand/30 transition-all">
                        <div class="flex items-start gap-4">
                            <img src="{{ $otherParticipant->displayAvatarUrl() }}" alt="{{ $otherParticipant->name }}" class="h-14 w-14 rounded-full object-cover border-2 border-slate-200 flex-shrink-0" width="56" height="56" loading="lazy" decoding="async">
                            
                            <div class="flex-1 min-w-0">
                                <div class="flex items-center justify-between mb-1">
                                    <h3 class="font-semibold text-ink text-lg">{{ $otherParticipant->name ?? 'Healthcare Worker' }}</h3>
                                    <span class="text-xs text-slate-400">{{ $conversation->updated_at->diffForHumans() }}</span>
                                </div>
                                <p class="text-sm text-slate-600 mb-1">{{ $conversation->subject ?? 'Conversation' }}</p>
                                @if ($lastMessage)
                                    <p class="text-sm text-slate-500 line-clamp-1">
                                        <span class="font-medium">{{ $lastMessage->sender_id === auth()->id() ? 'You' : $otherParticipant->name }}:</span>
                                        {{ \Illuminate\Support\Str::limit($lastMessage->body, 60) }}
                                    </p>
                                @else
                                    <p class="text-sm text-slate-400 italic">No messages yet</p>
                                @endif
                            </div>

                            <svg class="h-5 w-5 text-slate-400 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                            </svg>
                        </div>
                    </a>
                @empty
                    <div class="text-center py-16 rounded-2xl border border-slate-100 bg-white">
                        <svg class="mx-auto h-16 w-16 text-slate-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z" />
                        </svg>
                        <p class="mt-4 text-lg font-medium text-slate-500">No conversations yet</p>
                        <p class="text-sm text-slate-400 mt-1">Connect with other healthcare workers to start messaging</p>
                        <a href="{{ route('nurse.connect.index') }}" class="mt-4 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">
                            Find Healthcare Workers
                            <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="M13 7l5 5m0 0l-5 5m5-5H6" />
                            </svg>
                        </a>
                    </div>
                @endforelse
            </div>
        </div>
    </div>
@endsection