@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => 'Chat'])

    {{-- Inline Fullscreen CSS to ensure it loads --}}
    <script>
        // Base URL from Laravel - important for subdirectory deployments
        window.APP_BASE_URL = "{{ rtrim(url(''), '/') }}";

        window.RC_USER_ID = "{{ session('rc_user_id') }}";
        window.RC_AUTH_TOKEN = "{{ session('rc_auth_token') }}";
        window.RC_USERNAME = "{{ session('rc_username') ?: auth()->user()->username ?? '' }}";
        // Base Rocket.Chat domain used by backend (see RocketChatService::DOM)
        window.RC_DOM = "{{ rtrim((string) config('services.rocketchat.dom', ''), '/') }}";
        window.RC_WEBSOCKET_URL = "{{ trim((string) config('services.rocketchat.websocket_url', '')) }}";

        // Avatar URL helper — proxies through Laravel to avoid browser caching stale RC avatars
        window._avatarVersions = {};
        window._pageLoadTs = Date.now();
        window.rcAvatarUrl = function(username) {
            if (!username) return '';
            var v = window._avatarVersions[username] || window._pageLoadTs;
            return window.APP_BASE_URL + '/chat/avatar/' + encodeURIComponent(username) + '?v=' + encodeURIComponent(
                String(v));
        };
        window.bumpAvatarVersion = function(username, versionToken) {
            if (!username) return;
            var nextVersion = versionToken != null && String(versionToken).trim() !== '' ?
                String(versionToken).trim() :
                Date.now();
            window._avatarVersions[username] = nextVersion;
        };
        window.localLetterAvatarUrl = function(name) {
            var raw = String(name || '').trim();
            var safeName = raw || 'User';
            var words = safeName.split(/\s+/).filter(Boolean);
            var initials = '';
            if (words.length >= 2) {
                initials = (words[0][0] || '') + (words[1][0] || '');
            } else {
                initials = (safeName[0] || '') + (safeName[1] || '');
            }
            initials = initials.toUpperCase();

            var palette = ['#0ea5e9', '#14b8a6', '#8b5cf6', '#ef4444', '#f59e0b', '#ec4899', '#22c55e', '#6366f1'];
            var hash = 0;
            for (var i = 0; i < safeName.length; i++) {
                hash = ((hash << 5) - hash) + safeName.charCodeAt(i);
                hash |= 0;
            }
            var color = palette[Math.abs(hash) % palette.length];

            var svg = '<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 128 128">' +
                '<rect width="128" height="128" rx="64" fill="' + color + '" />' +
                '<text x="50%" y="50%" dy="0.36em" text-anchor="middle" fill="#ffffff" font-family="Arial, Helvetica, sans-serif" font-size="52" font-weight="700">' +
                initials +
                '</text></svg>';

            return 'data:image/svg+xml;charset=UTF-8,' + encodeURIComponent(svg);
        };
    </script>
    <style>
        /* SweetAlert2 must overlay the chat fullscreen container (z-index 9999) */
        .swal2-container {
            z-index: 11000 !important;
        }

        .chat-fullscreen {
            position: fixed !important;
            top: 0 !important;
            left: 0 !important;
            right: 0 !important;
            bottom: 0 !important;
            width: 100vw !important;
            height: 100vh !important;
            max-width: 100vw !important;
            padding: 0 !important;
            margin: 0 !important;
            z-index: 9999 !important;
            background: white !important;
        }

        .chat-fullscreen #chat-card {
            border-radius: 0 !important;
            box-shadow: none !important;
            height: 100vh !important;
        }

        .chat-fullscreen-entering {
            animation: fullscreenIn 0.3s ease-out forwards;
        }

        .chat-fullscreen-exiting {
            animation: fullscreenOut 0.3s ease-out forwards;
        }

        @keyframes fullscreenIn {
            from {
                transform: scale(0.95);
                opacity: 0.8;
            }

            to {
                transform: scale(1);
                opacity: 1;
            }
        }

        @keyframes fullscreenOut {
            from {
                transform: scale(1);
                opacity: 1;
            }

            to {
                transform: scale(0.95);
                opacity: 0.8;
            }
        }
    </style>

    <div class="container-fluid chat-fullscreen" id="chat-container" style="height: 80dvh; height: 80vh;">
        <div class="card d-flex flex-row h-100 overflow-hidden" id="chat-card">
            {{-- Chat Sidebar (Contact List) --}}
            <div class="border-end" id="chat-sidebar-container" style="width: 420px; min-width: 320px;">
                @include('pages.msjcht.components.sidebar')
            </div>

            {{-- Main Chat Area --}}
            <div class="flex-grow-1 d-flex flex-column position-relative overflow-hidden" id="chat-area-container"
                style="min-width: 0;">
                @include('pages.msjcht.components.chat_area')
            </div>
        </div>
    </div>
    {{-- Scripts --}}
    {{-- Note: jQuery and Bootstrap are already loaded in layouts/app.blade.php --}}
    {{-- Do NOT load them again here to avoid conflicts! --}}

    {{-- EmojiMart v5.6.0 --}}
    <script src="https://cdn.jsdelivr.net/npm/emoji-mart@5.6.0/dist/browser.js"></script>
    {{-- JoyPixels parser for Rocket.Chat shortcodes (:smiley:, :joy:, etc) --}}
    <script src="https://cdn.jsdelivr.net/npm/emoji-toolkit@9.0.0/lib/js/joypixels.min.js"></script>

    {{-- Cropper.js for image cropping --}}
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.6.1/cropper.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.6.1/cropper.min.js"></script>

    {{-- Fabric.js for canvas manipulation (drag, resize, rotate objects) --}}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/5.3.1/fabric.min.js"></script>

    {{-- MSJ Chat Logic --}}
    {{-- Import Map: Cache-bust all ES modules so browser always loads fresh code --}}
    @php
        $v = time();
        $base = asset('assets/js/msjchat');
    @endphp
    <script type="importmap">
    {
        "imports": {
            "{{ $base }}/modules/events.js": "{{ $base }}/modules/events.js?v={{ $v }}",
            "{{ $base }}/modules/ui/chat.js": "{{ $base }}/modules/ui/chat.js?v={{ $v }}",
            "{{ $base }}/modules/ui/sidebar.js": "{{ $base }}/modules/ui/sidebar.js?v={{ $v }}",
            "{{ $base }}/modules/ui/contextMenu.js": "{{ $base }}/modules/ui/contextMenu.js?v={{ $v }}",
            "{{ $base }}/modules/ui/emoji.js": "{{ $base }}/modules/ui/emoji.js?v={{ $v }}",
            "{{ $base }}/modules/ui/fileUploadModal.js": "{{ $base }}/modules/ui/fileUploadModal.js?v={{ $v }}",
            "{{ $base }}/modules/ui/sidebarMenu.js": "{{ $base }}/modules/ui/sidebarMenu.js?v={{ $v }}",
            "{{ $base }}/modules/data.js": "{{ $base }}/modules/data.js?v={{ $v }}",
            "{{ $base }}/modules/state.js": "{{ $base }}/modules/state.js?v={{ $v }}",
            "{{ $base }}/modules/api.js": "{{ $base }}/modules/api.js?v={{ $v }}",
            "{{ $base }}/modules/socket.js": "{{ $base }}/modules/socket.js?v={{ $v }}",
            "{{ $base }}/modules/utils.js": "{{ $base }}/modules/utils.js?v={{ $v }}",
            "{{ $base }}/main.js": "{{ $base }}/main.js?v={{ $v }}"
        }
    }
    </script>
    <script type="module" src="{{ $base }}/main.js?v={{ $v }}"></script>
@endsection

@push('css')
    <style>
        /* Ensure height is full for chat experience */
        .main-content {
            height: 100vh;
            display: flex;
            flex-direction: column;
        }

        .container-fluid {
            flex: 1;
        }

        /* Chat Fullscreen Mode Styles */
        #chat-container {
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

        #chat-card {
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

        /* Fullscreen State - Higher specificity */
        .container-fluid#chat-container.chat-fullscreen {
            position: fixed !important;
            top: 0 !important;
            left: 0 !important;
            right: 0 !important;
            bottom: 0 !important;
            width: 100vw !important;
            height: 100vh !important;
            max-width: 100vw !important;
            padding: 0 !important;
            margin: 0 !important;
            z-index: 9999 !important;
            background: white !important;
        }

        .container-fluid#chat-container.chat-fullscreen .card#chat-card {
            border-radius: 0 !important;
            box-shadow: none !important;
            height: 100vh !important;
        }

        /* Animation for entering fullscreen */
        .container-fluid#chat-container.chat-fullscreen-entering {
            animation: fullscreenIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
        }

        /* Animation for exiting fullscreen */
        .container-fluid#chat-container.chat-fullscreen-exiting {
            animation: fullscreenOut 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
        }

        @keyframes fullscreenIn {
            0% {
                transform: scale(0.95);
                opacity: 0.8;
            }

            100% {
                transform: scale(1);
                opacity: 1;
            }
        }

        @keyframes fullscreenOut {
            0% {
                transform: scale(1);
                opacity: 1;
            }

            100% {
                transform: scale(0.95);
                opacity: 0.8;
            }
        }
    </style>
@endpush