@extends('student.layouts.app')

@section('title', app()->getLocale() === 'ar' ? 'المحادثات' : 'Chat')

@section('content')
@php $isArabic = app()->getLocale() === 'ar'; @endphp

<div class="flex h-[calc(100vh-4rem)] overflow-hidden rounded-xl border border-zinc-200 bg-white shadow-sm dark:border-zinc-700 dark:bg-zinc-900"
     x-data="chatApp({{ $otherUser->id }}, {{ auth()->id() }})"
     x-init="init()">

    {{-- قائمة المحادثات --}}
    <div class="w-72 shrink-0 border-e border-zinc-200 dark:border-zinc-700 flex flex-col">
        <div class="px-4 py-3 border-b border-zinc-200 dark:border-zinc-700">
            <h2 class="font-semibold text-zinc-800 dark:text-zinc-100 text-sm">
                {{ $isArabic ? 'المحادثات' : 'Conversations' }}
            </h2>
        </div>
        <div class="flex-1 overflow-y-auto">
            @forelse($conversations as $conv)
            <a href="{{ route('chat.index', $conv->id) }}"
               class="flex items-center gap-3 px-4 py-3 hover:bg-zinc-50 dark:hover:bg-zinc-800 transition
                      {{ $otherUser->id == $conv->id ? 'bg-blue-50 dark:bg-blue-900/20 border-e-2 border-blue-500' : '' }}">
                <div class="w-9 h-9 rounded-full bg-blue-100 dark:bg-blue-900 flex items-center justify-center shrink-0">
                    <span class="text-blue-600 dark:text-blue-300 font-bold text-sm">{{ mb_substr($conv->name, 0, 1) }}</span>
                </div>
                <div class="min-w-0 flex-1">
                    <div class="flex items-center justify-between">
                        <span class="text-sm font-medium text-zinc-800 dark:text-zinc-100 truncate">{{ $conv->name }}</span>
                        @if($conv->unread > 0)
                        <span class="rounded-full bg-blue-500 text-white text-[10px] font-bold px-1.5 py-0.5 shrink-0">{{ $conv->unread }}</span>
                        @endif
                    </div>
                    @if($conv->last_message)
                    <p class="text-xs text-zinc-500 dark:text-zinc-400 truncate">{{ $conv->last_message }}</p>
                    @endif
                </div>
            </a>
            @empty
            <p class="text-center text-zinc-400 text-sm py-8">{{ $isArabic ? 'لا توجد محادثات' : 'No conversations' }}</p>
            @endforelse
        </div>
    </div>

    {{-- نافذة الرسائل --}}
    <div class="flex flex-col flex-1 min-w-0">
        {{-- رأس المحادثة --}}
        <div class="flex items-center gap-3 px-4 py-3 border-b border-zinc-200 dark:border-zinc-700 shrink-0">
            <div class="w-9 h-9 rounded-full bg-blue-100 dark:bg-blue-900 flex items-center justify-center">
                <span class="text-blue-600 dark:text-blue-300 font-bold text-sm">{{ mb_substr($otherUser->name, 0, 1) }}</span>
            </div>
            <div>
                <p class="font-semibold text-zinc-800 dark:text-zinc-100 text-sm">{{ $otherUser->name }}</p>
                <p class="text-xs text-zinc-400">{{ $isArabic ? ucfirst($otherUser->type) : ucfirst($otherUser->type) }}</p>
            </div>
        </div>

        {{-- منطقة الرسائل --}}
        <div class="flex-1 overflow-y-auto p-4 space-y-3" id="messages-container">
            @foreach($messages as $msg)
            <div class="flex {{ $msg->sender_id === auth()->id() ? 'justify-end' : 'justify-start' }}">
                <div class="max-w-xs lg:max-w-md px-3 py-2 rounded-2xl text-sm
                    {{ $msg->sender_id === auth()->id()
                        ? 'bg-blue-500 text-white rounded-br-sm'
                        : 'bg-zinc-100 dark:bg-zinc-800 text-zinc-800 dark:text-zinc-100 rounded-bl-sm' }}">
                    <p>{{ $msg->message }}</p>
                    <p class="text-[10px] mt-1 opacity-70 text-end">{{ $msg->created_at->format('H:i') }}</p>
                </div>
            </div>
            @endforeach

            {{-- رسائل Alpine.js الجديدة --}}
            <template x-for="msg in newMessages" :key="msg.id">
                <div :class="msg.sender_id === {{ auth()->id() }} ? 'flex justify-end' : 'flex justify-start'">
                    <div :class="msg.sender_id === {{ auth()->id() }}
                        ? 'max-w-xs lg:max-w-md px-3 py-2 rounded-2xl rounded-br-sm text-sm bg-blue-500 text-white'
                        : 'max-w-xs lg:max-w-md px-3 py-2 rounded-2xl rounded-bl-sm text-sm bg-zinc-100 dark:bg-zinc-800 text-zinc-800 dark:text-zinc-100'">
                        <p x-text="msg.message"></p>
                        <p class="text-[10px] mt-1 opacity-70 text-end" x-text="msg.created_at"></p>
                    </div>
                </div>
            </template>
        </div>

        {{-- حقل الإرسال --}}
        <div class="border-t border-zinc-200 dark:border-zinc-700 p-3 shrink-0">
            <form @submit.prevent="sendMessage" class="flex gap-2">
                <input
                    x-model="newMsg"
                    type="text"
                    placeholder="{{ $isArabic ? 'اكتب رسالة...' : 'Type a message...' }}"
                    class="flex-1 rounded-full border border-zinc-300 dark:border-zinc-600 bg-zinc-50 dark:bg-zinc-800 px-4 py-2 text-sm text-zinc-800 dark:text-zinc-100 focus:outline-none focus:ring-2 focus:ring-blue-500"
                    :disabled="sending"
                />
                <button type="submit"
                    :disabled="sending || !newMsg.trim()"
                    class="rounded-full bg-blue-500 hover:bg-blue-600 disabled:opacity-50 text-white px-4 py-2 text-sm font-medium transition">
                    <i class="fa-solid fa-paper-plane"></i>
                </button>
            </form>
        </div>
    </div>
</div>

<script>
function chatApp(otherUserId, authUserId) {
    return {
        otherUserId: otherUserId,
        authUserId: authUserId,
        newMsg: '',
        sending: false,
        newMessages: [],
        lastId: {{ $messages->last()?->id ?? 0 }},
        pollInterval: null,

        init() {
            this.scrollToBottom();
            this.startPolling();
        },

        scrollToBottom() {
            this.$nextTick(() => {
                const container = document.getElementById('messages-container');
                if (container) container.scrollTop = container.scrollHeight;
            });
        },

        startPolling() {
            this.pollInterval = setInterval(() => this.poll(), 3000);
        },

        async poll() {
            try {
                const res = await fetch(`/chat/${this.otherUserId}/poll?after=${this.lastId}`, {
                    headers: { 'X-Requested-With': 'XMLHttpRequest' }
                });
                const data = await res.json();
                if (data.length > 0) {
                    this.newMessages.push(...data);
                    this.lastId = data[data.length - 1].id;
                    this.scrollToBottom();
                }
            } catch (e) {}
        },

        async sendMessage() {
            if (!this.newMsg.trim() || this.sending) return;
            this.sending = true;
            const text = this.newMsg;
            this.newMsg = '';

            try {
                const res = await fetch('/chat', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                        'X-Requested-With': 'XMLHttpRequest',
                    },
                    body: JSON.stringify({ receiver_id: this.otherUserId, message: text }),
                });
                const msg = await res.json();
                this.newMessages.push(msg);
                this.lastId = msg.id;
                this.scrollToBottom();
            } catch (e) {
                this.newMsg = text;
            } finally {
                this.sending = false;
            }
        },
    };
}
</script>
@endsection