@extends('staff.layouts.app')

@section('title', 'Chat')

@section('content')
@php
    $slug = session('staff_school_slug');
@endphp
<div class="flex flex-col h-[calc(100vh-120px)] relative px-4 pt-4">
    <!-- STICKY CHAT HEADER -->
    <div class="sticky top-[60px] z-40 bg-white py-3 mb-4 px-1 rounded-2xl border border-slate-100 shadow-sm">
        <div class="flex items-center justify-between">
            <div class="flex items-center gap-3">
                <a href="/school/{{ $slug }}/staff/chats" class="w-10 h-10 flex items-center justify-center rounded-full bg-slate-50 border border-slate-200 text-slate-400 hover:text-amber-500 hover:border-amber-300 transition-all shadow-sm">
                    <i class="fa-solid fa-arrow-left text-lg"></i>
                </a>
                
                <div class="flex items-center gap-3">
                    <div class="relative">
                        <div class="w-11 h-11 rounded-full {{ $chatPartnerType == 'admin' ? 'bg-indigo-600' : 'bg-emerald-600' }} text-white flex items-center justify-center font-bold shadow-md border-2 border-white ring-2 {{ $chatPartnerType == 'admin' ? 'ring-indigo-100' : 'ring-emerald-100' }}">
                            {{ $chatPartnerType == 'admin' ? 'S' : $chatPartnerInitials }}
                        </div>
                        <div class="absolute bottom-0 right-0 w-3 h-3 bg-green-500 border-2 border-white rounded-full"></div>
                    </div>
                    
                    <div class="flex flex-col">
                        <h4 class="text-sm font-extrabold text-slate-800 leading-tight">
                            {{ $chatPartnerType == 'admin' ? 'School Admin' : $chatPartner }}
                        </h4>
                    @if(in_array($chatPartnerType, ['student', 'teacher']) && isset($chatPartnerMeta))
                        <p class="text-[10px] text-slate-400 font-medium">{{ $chatPartnerMeta }}</p>
                    @endif
                    <div class="flex items-center gap-1">
                        <span class="text-[10px] text-green-500 font-bold uppercase tracking-wider">
                            {{ $chatPartnerType == 'admin' ? 'School Admin Online' : 'Active Session' }}
                        </span>
                    </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Messages Area -->
    <div id="chat-window" class="flex-1 overflow-y-auto px-1 space-y-6 pb-40">
        @include('staff.chat_messages')
    </div>

    <!-- Input Area -->
    <div class="fixed bottom-16 left-0 right-0 z-40 flex justify-center">
        <div class="w-full max-w-[420px] bg-white border-t border-slate-100 px-4 py-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()">

            <!-- IMPORTANT: onsubmit="return false;" prevents normal submission -->
            <form id="chat-form" onsubmit="return false;" action="javascript:void(0);" class="flex items-end gap-2 bg-slate-50 p-2 rounded-2xl border border-slate-200 shadow-lg">
                @csrf
                <button type="button" onclick="document.getElementById('file-input').click()" class="w-10 h-10 rounded-full bg-white text-slate-500 flex items-center justify-center hover:bg-slate-100 transition-all shadow-sm">
                    <i class="fa-solid fa-paperclip text-sm"></i>
                </button>
                <textarea id="message_input" name="message" placeholder="Type message..." 
                    class="flex-1 px-3 py-2 bg-transparent text-sm outline-none resize-none max-h-24 overflow-y-auto" 
                    rows="1" style="resize: none;"></textarea>
                <button type="button" id="send-btn" class="w-10 h-10 rounded-full bg-amber-500 text-white flex items-center justify-center hover:bg-amber-600 transition-all shadow-md">
                    <i class="fa-solid fa-paper-plane text-xs"></i>
                </button>
            </form>
        </div>
    </div>

    <!-- LUXURY 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">
                    <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>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
const STAFF_SLUG = "{{ $slug }}";

function scrollToBottom() {
    const chatWindow = document.getElementById('chat-window');
    if (chatWindow) { chatWindow.scrollTop = chatWindow.scrollHeight; }
}

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

    tx.addEventListener('keydown', function(e) {
        if (e.key === 'Enter' && !e.shiftKey) {
            e.preventDefault();
            sendMessage();
        }
    });
}

$(document).ready(function() {
    setTimeout(scrollToBottom, 100);
    
    // Poll for new messages every 3 seconds
    setInterval(function() {
        $.ajax({
            url: "/school/" + STAFF_SLUG + "/staff/chat/messages/get",
            method: 'GET',
            success: function(html) {
                if (html !== $('#chat-window').html()) {
                    $('#chat-window').html(html);
                    scrollToBottom();
                }
            }
        });
    }, 3000);

    $('#send-btn').on('click', function(e) {
        e.preventDefault();
        sendMessage();
    });
});

function sendMessage() {
    const messageInput = $('#message_input');
    const msg = messageInput.val().trim();
    if (!msg) return;

    messageInput.val('');
    messageInput.css('height', 'auto');

    $.ajax({
        url: "/school/" + STAFF_SLUG + "/staff/chat/send",
        method: 'POST',
        data: { _token: "{{ csrf_token() }}", message: msg },
        success: function() {
            $.get("/school/" + STAFF_SLUG + "/staff/chat/messages/get", function(html) {
                $('#chat-window').html(html);
                scrollToBottom();
            });
        },
        error: function(xhr) { showLuxuryError('Failed to send message.'); }
    });
}

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('Unsupported file format.');
        fileInput.value = '';
        return;
    }
    if (file.size > 5 * 1024 * 1024) {
        showLuxuryError('File too large (Max 5MB).');
        fileInput.value = '';
        return;
    }

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

    const btn = document.querySelector('.fa-paperclip').parentElement;
    btn.classList.add('animate-spin', 'bg-amber-100');

    $.ajax({
        url: "/school/" + STAFF_SLUG + "/staff/chat/upload",
        method: 'POST',
        data: formData,
        processData: false,
        contentType: false,
        success: function() {
            btn.classList.remove('animate-spin', 'bg-amber-100');
            fileInput.value = '';
            $.get("/school/" + STAFF_SLUG + "/staff/chat/messages/get", function(html) {
                $('#chat-window').html(html);
                scrollToBottom();
            });
        },
        error: function(xhr) {
            btn.classList.remove('animate-spin', 'bg-amber-100');
            fileInput.value = '';
            showLuxuryError(xhr.responseJSON?.error || "Upload failed.");
        }
    });
}

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);
}
</script>
@endsection