@extends('admin.layout')
@section('title', 'Gesprek #' . $conversation->id)

@section('content')

<div class="flex items-center gap-3 mb-4">
    <a href="{{ route('admin.conversations.index') }}" class="text-xs text-gray-400 hover:text-gray-600 transition">← Berichten</a>
</div>

{{-- Header --}}
<div class="bg-white rounded-lg border border-gray-100 p-4 mb-4">
    <div class="flex flex-wrap gap-6">
        @foreach ([$conversation->userOne, $conversation->userTwo] as $u)
            <div>
                <p class="text-xs text-gray-400 mb-1">{{ $loop->first ? 'Gebruiker 1' : 'Gebruiker 2' }}</p>
                @if ($u)
                    <a href="{{ route('admin.users.show', $u) }}"
                       class="font-medium text-gray-800 hover:text-blue-600 transition text-sm"><span class="text-gray-400 font-normal text-xs">#{{ $u->id }}</span> {{ $u->name }}</a>
                    <p class="text-xs text-gray-400">{{ $u->email }}</p>
                @else
                    <span class="text-gray-300 text-sm italic">Verwijderd</span>
                @endif
            </div>
        @endforeach
        <div>
            <p class="text-xs text-gray-400 mb-1">Berichten</p>
            <p class="text-sm font-medium text-gray-800">{{ $messages->count() }}</p>
        </div>
        <div>
            <p class="text-xs text-gray-400 mb-1">Gestart</p>
            <p class="text-sm text-gray-600">{{ $conversation->created_at->format('d/m/Y H:i') }}</p>
        </div>
    </div>
</div>

{{-- Messages --}}
<div class="bg-white rounded-lg border border-gray-100 overflow-hidden">
    <div class="px-4 py-3 border-b border-gray-100">
        <p class="text-xs font-semibold text-gray-500 uppercase tracking-wide">Berichten</p>
    </div>
    <div class="divide-y divide-gray-50 max-h-[70vh] overflow-y-auto">
        @forelse ($messages as $msg)
            @php $isOne = $msg->sender_id === $conversation->user_one_id; @endphp
            <div class="px-4 py-3 flex gap-3 {{ $isOne ? '' : 'flex-row-reverse' }}">
                <div class="w-7 h-7 rounded-full bg-gray-200 flex items-center justify-center text-xs font-semibold text-gray-500 shrink-0">
                    {{ mb_substr($msg->sender?->name ?? '?', 0, 1) }}
                </div>
                <div class="flex-1 min-w-0 {{ $isOne ? '' : 'items-end flex flex-col' }}">
                    <div class="flex items-center gap-2 mb-0.5 {{ $isOne ? '' : 'flex-row-reverse' }}">
                        <span class="text-xs font-medium text-gray-700">@if($msg->sender)<span class="text-gray-400 font-normal">#{{ $msg->sender_id }}</span> @endif{{ $msg->sender?->name ?? 'Verwijderd' }}</span>
                        <span class="text-[10px] text-gray-300">{{ $msg->created_at->format('d/m H:i') }}</span>
                        @if ($msg->read_at)
                            <span class="text-[10px] text-blue-300" title="Gelezen {{ $msg->read_at->format('d/m H:i') }}">✓✓</span>
                        @endif
                    </div>
                    @if ($msg->type === 'mood_change')
                        <p class="text-xs text-gray-400 italic">Stemming gewijzigd</p>
                    @elseif ($msg->message)
                        <div class="inline-block max-w-md px-3 py-2 rounded-xl text-sm
                            {{ $isOne ? 'bg-gray-100 text-gray-800 rounded-tl-none' : 'bg-blue-100 text-blue-900 rounded-tr-none' }}">
                            {!! nl2br(e($msg->message)) !!}
                        </div>
                    @endif
                    @if ($msg->attachment_name)
                        <p class="text-xs text-gray-400 mt-0.5">📎 {{ $msg->attachment_name }}</p>
                    @endif
                </div>
            </div>
        @empty
            <div class="px-4 py-8 text-center text-sm text-gray-400">Geen berichten.</div>
        @endforelse
    </div>
</div>

@endsection