@extends('layouts.admin')

@section('page_kicker', 'Inbox')
@section('page_title', 'Messages')

@section('content')
    <div class="grid gap-6 lg:grid-cols-3">
        <div class="admin-content-card lg:col-span-2">
            <h3 class="admin-card-title">History</h3>
            <p class="admin-card-desc">Secure threads with your clinicians</p>
            <div class="mt-5 max-h-[480px] space-y-3 overflow-y-auto pr-1">
                @forelse($messages as $msg)
                    <div class="rounded-2xl px-4 py-3 text-sm shadow-sm {{ $msg->sender_id === auth()->id() ? 'ml-4 bg-gradient-to-br from-teal-50 to-cyan-50 text-right ring-1 ring-teal-100' : 'mr-4 bg-slate-50 ring-1 ring-slate-100' }}">
                        <p class="text-[10px] font-bold uppercase tracking-wide text-slate-500">{{ $msg->sender->name ?? 'User' }} → {{ $msg->receiver->name ?? 'User' }}</p>
                        <p class="mt-2 whitespace-pre-wrap text-slate-800">{{ $msg->message }}</p>
                        <p class="mt-2 text-[10px] text-slate-400">{{ $msg->created_at->format('M j, g:i A') }}</p>
                    </div>
                @empty
                    <p class="text-sm text-slate-500">No messages yet.</p>
                @endforelse
            </div>
            <div class="mt-6">{{ $messages->links() }}</div>
        </div>
        <div class="admin-content-card">
            <h3 class="admin-card-title">Compose</h3>
            @if($doctorOptions->isEmpty())
                <p class="mt-3 text-sm leading-relaxed text-slate-600">After you book or complete a consultation, your clinician appears here.</p>
            @else
                <form method="POST" action="{{ route('patient.telehealth.messages.send') }}" class="mt-5 space-y-4">
                    @csrf
                    <div>
                        <label class="admin-form-label" for="receiver_id">To</label>
                        <select id="receiver_id" name="receiver_id" required class="admin-input">
                            @foreach($doctorOptions as $d)
                                <option value="{{ $d->id }}">{{ $d->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div>
                        <label class="admin-form-label" for="message">Message</label>
                        <textarea id="message" name="message" required rows="4" class="admin-input"></textarea>
                    </div>
                    <button type="submit" class="admin-btn-dark w-full">Send</button>
                </form>
            @endif
            <a href="{{ route('chat.index') }}" class="mt-6 inline-flex text-sm font-semibold text-teal-700 underline decoration-teal-600/30 underline-offset-2 hover:text-teal-800">Open full chat app</a>
        </div>
    </div>
@endsection