@extends('layouts.app')
@section('title', 'Chat with ' . ($otherUser->name ?? 'Unknown'))
@section('page-title', 'Messages')

@section('content')
<div class="bg-white rounded-2xl ring-1 ring-stone-200/60 shadow-sm overflow-hidden flex flex-col" style="height: 78vh;">

    {{-- Chat Header --}}
    <div class="px-5 py-3 border-b border-stone-100 bg-stone-50/50 flex items-center gap-3 flex-shrink-0">
        <a href="{{ route('communication.conversations') }}" class="text-stone-400 hover:text-stone-600 transition mr-1">
            <i class="fas fa-arrow-left"></i>
        </a>
        <div class="w-10 h-10 bg-amber-500 rounded-full flex items-center justify-center flex-shrink-0">
            <span class="text-white font-bold text-sm">
                {{ strtoupper(substr($otherUser->name ?? '?', 0, 1)) }}{{ strtoupper(substr(explode(' ', $otherUser->name ?? '')[1] ?? '', 0, 1)) }}
            </span>
        </div>
        <div class="flex-1 min-w-0">
            <div class="flex items-center gap-2">
                <p class="font-bold text-stone-800 text-sm truncate">{{ $otherUser->name ?? 'Unknown' }}</p>
                <span class="text-[9px] px-1.5 py-0.5 bg-stone-100 text-stone-500 rounded capitalize font-medium">{{ $otherUser->role ?? '' }}</span>
            </div>
            @if(!empty($otherUserInfo))
            <p class="text-[11px] text-stone-400 truncate mt-0.5">
                @if($otherUser->role === 'parent')
                <i class="fas fa-child text-[9px] mr-0.5 text-amber-500"></i>
                @elseif($otherUser->role === 'student')
                <i class="fas fa-graduation-cap text-[9px] mr-0.5 text-amber-500"></i>
                @elseif($otherUser->role === 'teacher')
                <i class="fas fa-chalkboard-teacher text-[9px] mr-0.5 text-amber-500"></i>
                @endif
                {{ $otherUserInfo }}
            </p>
            @endif
        </div>
    </div>

    {{-- Messages Area --}}
    <div class="flex-1 overflow-y-auto p-5 space-y-3" id="chatMessages">
        @if($messages->hasMorePages())
        <div class="text-center py-2">
            <a href="{{ $messages->nextPageUrl() }}" class="text-xs text-amber-600 hover:underline">Load older messages</a>
        </div>
        @endif

        @foreach($messages->reverse() as $msg)
        @php $isMine = $msg->sender_id === auth()->id(); @endphp
        <div class="flex {{ $isMine ? 'justify-end' : 'justify-start' }}">
            <div class="max-w-[70%]">
                @if(!$isMine)
                <p class="text-[10px] text-stone-400 font-medium mb-1 ml-1">{{ $msg->sender->name ?? 'Unknown' }}</p>
                @endif
                <div class="{{ $isMine ? 'bg-amber-500 text-white rounded-2xl rounded-br-sm' : 'bg-stone-100 text-stone-800 rounded-2xl rounded-bl-sm' }} px-4 py-2.5 shadow-sm">
                    <p class="text-sm leading-relaxed">{{ $msg->message }}</p>
                    @if($msg->attachment)
                    <a href="{{ Storage::url($msg->attachment) }}" target="_blank"
                       class="inline-flex items-center gap-1 mt-1 text-xs {{ $isMine ? 'text-amber-100 hover:text-white' : 'text-amber-600 hover:underline' }}">
                        <i class="fas fa-paperclip"></i> Attachment
                    </a>
                    @endif
                </div>
                <p class="text-[9px] {{ $isMine ? 'text-right mr-1' : 'ml-1' }} text-stone-300 mt-1">
                    {{ $msg->created_at->format('h:i A') }} · {{ $msg->created_at->format('d M') }}
                </p>
            </div>
        </div>
        @endforeach

        @if($messages->isEmpty())
        <div class="flex-1 flex flex-col items-center justify-center text-center py-12">
            <div class="w-14 h-14 bg-stone-100 rounded-full flex items-center justify-center mb-3">
                <i class="fas fa-paper-plane text-stone-300 text-xl"></i>
            </div>
            <p class="text-sm text-stone-400">No messages yet. Say hello!</p>
        </div>
        @endif
    </div>

    {{-- Message Input --}}
    <div class="border-t border-stone-100 p-4 bg-stone-50/50 flex-shrink-0">
        <form method="POST" action="{{ route('communication.chat.send', $conversation) }}" enctype="multipart/form-data"
              class="flex items-end gap-3">
            @csrf
            <div class="flex-1">
                <textarea name="message" rows="1" required placeholder="Type a message..."
                          class="w-full border border-stone-200 rounded-xl px-4 py-2.5 text-sm resize-none focus:ring-2 focus:ring-amber-300 focus:border-amber-400 transition"
                          onkeydown="if(event.key==='Enter' && !event.shiftKey){event.preventDefault();this.form.submit()}"
                          style="max-height: 120px;"></textarea>
            </div>
            <label class="cursor-pointer px-3 py-2.5 text-stone-400 hover:text-amber-500 transition" title="Attach file">
                <i class="fas fa-paperclip"></i>
                <input type="file" name="attachment" class="hidden">
            </label>
            <button type="submit" class="px-5 py-2.5 bg-amber-500 text-white rounded-xl hover:bg-amber-600 transition shadow-sm flex-shrink-0">
                <i class="fas fa-paper-plane text-sm"></i>
            </button>
        </form>
    </div>
</div>

<script>
document.getElementById('chatMessages').scrollTop = document.getElementById('chatMessages').scrollHeight;
document.querySelector('textarea[name="message"]').addEventListener('input', function() {
    this.style.height = 'auto';
    this.style.height = Math.min(this.scrollHeight, 120) + 'px';
});
</script>
@endsection