@extends('school.layouts.app')

@section('content')
<div class="flex h-[calc(100vh-120px)] bg-white rounded-3xl border border-slate-200 overflow-hidden shadow-sm">
    
    <!-- Left Side: Student History -->
    <div class="w-1/4 border-r border-slate-100 flex flex-col bg-slate-50/50">
        <div class="p-4 border-b border-slate-100">
            <a href="{{ route('school.communication.chats') }}" class="flex items-center gap-2 text-indigo-600 text-xs font-bold hover:underline">
                <i class="fa-solid fa-arrow-left"></i> Back to All Chats
            </a>
        </div>
        <div class="p-4 border-b border-slate-100 bg-white">
            <p class="text-[10px] font-bold text-slate-400 uppercase mb-2">Chatting With</p>
            <div class="flex items-center gap-3">
                <div class="w-10 h-10 rounded-full bg-indigo-600 text-white flex items-center justify-center font-bold">
                    {{ substr($conversation->student_name, 0, 1) }}
                </div>
                <div class="flex flex-col">
                    <p class="text-sm font-bold text-slate-800 leading-tight">{{ $conversation->student_name }}</p>
                    <p class="text-[10px] text-slate-500 leading-tight">
                        {{ $conversation->admission_no }} | {{ $conversation->seeking_class }} | {{ $conversation->section }}
                    </p>
                </div>
            </div>
        </div>
        <div class="flex-1 overflow-y-auto p-2">
            <p class="text-[10px] font-bold text-slate-400 uppercase p-2">Chat History</p>
            @foreach($history as $h)
                <a href="{{ route('school.communication.viewChat', $h->id) }}" 
                class="flex items-center gap-3 p-3 mb-1.5 rounded-xl transition-all {{ $h->id == $conversation->id ? 'bg-indigo-600 text-white shadow-md' : 'bg-white text-slate-600 hover:bg-indigo-50 border border-slate-100' }}">
                    
                    <!-- Avatar -->
                    <div class="relative shrink-0">
                        <div class="w-9 h-9 rounded-full overflow-hidden flex items-center justify-center text-xs font-bold border
                            {{ $h->id == $conversation->id ? 'bg-white/20 text-white border-white/30' : 'bg-indigo-100 text-indigo-600 border-indigo-200' }}">
                            {{ substr($conversation->student_name, 0, 1) }}
                        </div>
                        @if($h->unread_count > 0 && $h->id != $conversation->id)
                            <div class="absolute -top-1 -right-1 w-4 h-4 bg-red-500 text-white text-[8px] flex items-center justify-center rounded-full border-2 border-white font-bold">
                                {{ $h->unread_count }}
                            </div>
                        @endif
                    </div>

                    <!-- Text -->
                    <div class="flex-1 min-w-0">
                        <div class="flex justify-between items-baseline">
                            <h4 class="text-xs font-bold truncate {{ $h->id == $conversation->id ? 'text-white' : 'text-slate-800' }}">
                                {{ $conversation->student_name }}
                            </h4>
                            <span class="text-[9px] shrink-0 ml-1.5 {{ $h->id == $conversation->id ? 'text-indigo-200' : 'text-slate-400' }}">
                                {{ $h->last_msg_time ? \Carbon\Carbon::parse($h->last_msg_time)->format('h:i A') : \Carbon\Carbon::parse($h->updated_at)->format('d M') }}
                            </span>
                        </div>
                        <p class="text-[10px] {{ $h->id == $conversation->id ? 'text-indigo-100' : 'text-slate-500' }} truncate mt-0.5">
                            {{ $h->last_message ? Str::limit($h->last_message, 28) : 'No messages yet' }}
                        </p>
                    </div>
                </a>
            @endforeach
        </div>
    </div>

    <!-- Right Side: Chat Window -->
    <div class="flex-1 flex flex-col bg-white">
        <div class="p-4 border-b border-slate-100 flex justify-between items-center bg-white">
            <div class="flex items-center gap-3">
                <div class="w-10 h-10 rounded-full bg-indigo-600 text-white flex items-center justify-center font-bold">
                    {{ substr($conversation->student_name, 0, 1) }}
                </div>
                <div class="flex flex-col">
                    <h4 class="text-sm font-bold text-slate-800">{{ $conversation->student_name }}</h4>
                    <p class="text-[10px] text-green-500 font-medium">Active Session</p>
                </div>
            </div>
        </div>

        <!-- Messages Container -->
        <div id="chat-window" class="flex-1 p-6 overflow-y-auto space-y-4 bg-slate-50">
            @include('school.communications.chat_messages_partial')
        </div>

        <!-- Input Area -->
        <div class="p-4 bg-white border-t border-slate-100">
            <div class="flex items-end gap-3">
                <input type="file" id="file-input" class="hidden" accept="image/jpeg,image/jpg,image/png,image/gif,image/webp,application/pdf,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" onchange="uploadFile()">
                
                <form id="chat-form" class="flex-1 flex items-end gap-3">
                    @csrf
                    <button type="button" onclick="document.getElementById('file-input').click()" class="w-10 h-10 rounded-full bg-slate-100 text-slate-500 flex items-center justify-center hover:bg-slate-200 transition-all shrink-0">
                        <i class="fa-solid fa-paperclip text-sm"></i>
                    </button>
                    <textarea id="message_input" name="message" placeholder="Type your message..." 
                        class="flex-1 px-4 py-2 bg-slate-100 rounded-2xl text-sm outline-none focus:ring-2 focus:ring-indigo-500 resize-none max-h-32 overflow-y-auto" 
                        rows="1" style="resize: none;"></textarea>
                    <button type="submit" id="send-btn" class="w-10 h-10 rounded-full bg-indigo-600 text-white flex items-center justify-center hover:bg-indigo-700 transition-all shadow-md shrink-0">
                        <i class="fa-solid fa-paper-plane text-xs"></i>
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- LUXURY 3D ERROR MODAL -->
<div id="luxury-error-modal" class="fixed inset-0 z-[100] hidden items-center justify-center">
    <div class="absolute inset-0 bg-slate-900/70 backdrop-blur-sm transition-opacity" onclick="closeLuxuryError()"></div>
    <div class="relative bg-white w-full max-w-sm mx-4 rounded-3xl shadow-2xl p-8 text-center transform transition-all scale-95 opacity-0" id="luxury-modal-content">
        <div class="relative mx-auto mb-6">
            <div class="absolute inset-0 bg-red-500/20 rounded-full blur-xl animate-pulse"></div>
            <div class="relative w-20 h-20 bg-gradient-to-br from-red-400 to-red-600 rounded-full flex items-center justify-center mx-auto shadow-lg shadow-red-500/30 transform hover:scale-110 transition-transform">
                <i class="fa-solid fa-triangle-exclamation text-3xl text-white drop-shadow-lg"></i>
            </div>
        </div>
        <h3 class="text-xl font-black text-slate-800 mb-2 tracking-tight">File Not Supported</h3>
        <p class="text-sm text-slate-500 mb-6 leading-relaxed" id="luxury-error-message">
            This file format is not allowed. Please upload images, PDF, Word, or Excel files only.
        </p>
        <button onclick="closeLuxuryError()" class="w-full py-3.5 bg-gradient-to-r from-slate-800 to-slate-900 text-white rounded-2xl font-bold text-sm hover:from-slate-700 hover:to-slate-800 transition-all shadow-lg shadow-slate-900/20 active:scale-95">
            Got it
        </button>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    // ========== LUXURY ERROR MODAL ==========
    function showLuxuryError(message) {
        const modal = document.getElementById('luxury-error-modal');
        const content = document.getElementById('luxury-modal-content');
        const msgEl = document.getElementById('luxury-error-message');
        if (message) msgEl.textContent = message;
        modal.classList.remove('hidden');
        modal.classList.add('flex');
        setTimeout(() => {
            content.classList.remove('scale-95', 'opacity-0');
            content.classList.add('scale-100', 'opacity-100');
        }, 10);
    }

    function closeLuxuryError() {
        const modal = document.getElementById('luxury-error-modal');
        const content = document.getElementById('luxury-modal-content');
        content.classList.remove('scale-100', 'opacity-100');
        content.classList.add('scale-95', 'opacity-0');
        setTimeout(() => {
            modal.classList.add('hidden');
            modal.classList.remove('flex');
        }, 200);
    }

    // ========== CHAT FUNCTIONS ==========
    function scrollToBottom() {
        const chatWindow = document.getElementById('chat-window');
        if (chatWindow) {
            chatWindow.scrollTo({ top: chatWindow.scrollHeight, behavior: 'smooth' });
        }
    }

    let isRefreshing = false;
    let lastMessageCount = 0;
    let pendingRefresh = false;

    function refreshMessages(force = false) {
        if (isRefreshing) {
            pendingRefresh = true;
            return;
        }
        isRefreshing = true;

        $.ajax({
            url: "{{ route('school.communication.getMessages', $conversation->id) }}",
            method: 'GET',
            success: function(html) {
                const tempDiv = $('<div>').html(html);
                const newCount = tempDiv.find('.message-bubble').length;
                
                // Only update if count changed OR forced refresh
                if (force || newCount !== lastMessageCount) {
                    $('#chat-window').html(html);
                    lastMessageCount = newCount;
                    scrollToBottom();
                }
            },
            complete: function() {
                isRefreshing = false;
                // If another refresh was requested while this one was running, do it now
                if (pendingRefresh) {
                    pendingRefresh = false;
                    setTimeout(() => refreshMessages(), 100);
                }
            }
        });
    }

    function sendSchoolMessage() {
        const input = $('#message_input');
        const msg = input.val().trim();
        const sendBtn = $('#send-btn');

        if (!msg) return;

        sendBtn.prop('disabled', true).html('<i class="fa-solid fa-circle-notch fa-spin text-xs"></i>');

        $.ajax({
            url: "{{ route('school.communication.sendReply', $conversation->id) }}",
            method: 'POST',
            data: { 
                _token: "{{ csrf_token() }}", 
                message: msg 
            },
            success: function() {
                input.val('');
                input.css('height', 'auto');
                sendBtn.prop('disabled', false).html('<i class="fa-solid fa-paper-plane text-xs"></i>');
                // Force refresh with new message
                refreshMessages(true);
            },
            error: function() {
                sendBtn.prop('disabled', false).html('<i class="fa-solid fa-paper-plane text-xs"></i>');
                showLuxuryError('Failed to send message. Please try again.');
            }
        });
    }

    function uploadFile() {
        const fileInput = document.getElementById('file-input');
        const file = fileInput.files[0];
        if (!file) return;

        const allowedExtensions = ['jpg', 'jpeg', 'png', 'gif', 'webp', 'pdf', 'doc', 'docx', 'xls', 'xlsx'];
        const extension = file.name.split('.').pop().toLowerCase();
        
        if (!allowedExtensions.includes(extension)) {
            showLuxuryError('This file format is not supported. Please upload images (JPG, PNG), PDF, Word (DOC/DOCX), or Excel (XLS/XLSX) files only.');
            fileInput.value = '';
            return;
        }

        if (file.size > 5 * 1024 * 1024) {
            showLuxuryError('File is too large! Maximum allowed size is 5MB.');
            fileInput.value = '';
            return;
        }

        const formData = new FormData();
        formData.append('attachment', file);
        formData.append('_token', "{{ csrf_token() }}");

        $.ajax({
            url: "{{ route('school.communication.uploadAttachment', $conversation->id) }}",
            method: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            success: function() {
                fileInput.value = '';
                refreshMessages(true);
            },
            error: function(xhr) {
                fileInput.value = '';
                let errorMsg = 'Error uploading file. Please try again.';
                if (xhr.responseJSON && xhr.responseJSON.error) {
                    errorMsg = xhr.responseJSON.error;
                }
                showLuxuryError(errorMsg);
            }
        });
    }

    $(document).ready(function() {
        // Count initial messages
        lastMessageCount = $('#chat-window .message-bubble').length;
        scrollToBottom();

        const tx = document.getElementById('message_input');
        tx.addEventListener('input', function() {
            this.style.height = 'auto';
            this.style.height = (this.scrollHeight) + 'px';
        });

        $('#message_input').on('keydown', function(e) {
            if (e.which === 13 && !e.shiftKey) {
                e.preventDefault();
                sendSchoolMessage();
            }
        });

        $('#chat-form').on('submit', function(e) {
            e.preventDefault();
            sendSchoolMessage();
        });

        // Auto-refresh every 3 seconds (normal, not forced)
        setInterval(function() {
            refreshMessages(false);
        }, 3000);
    });
</script>
@endsection