{{--
    文件功能：聊天室主界面框架（frame 页面）
    全屏沉浸式布局，不使用统一 layout
    CSS 抽取到 /public/css/chat.css
    JS 抽取到 chat.partials.scripts Blade 模板

    @author ChatRoom Laravel
    @version 1.0.0
--}}
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ $room->name ?? '聊天室' }} - 飘落流星</title>
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <meta http-equiv="Delegate-CH" content="Sec-CH-UA https://s.magsrv.com; Sec-CH-UA-Mobile https://s.magsrv.com; Sec-CH-UA-Arch https://s.magsrv.com; Sec-CH-UA-Model https://s.magsrv.com; Sec-CH-UA-Platform https://s.magsrv.com; Sec-CH-UA-Platform-Version https://s.magsrv.com; Sec-CH-UA-Bitness https://s.magsrv.com; Sec-CH-UA-Full-Version-List https://s.magsrv.com; Sec-CH-UA-Full-Version https://s.magsrv.com;">
    @php
        // 从 sysparam 读取权限等级配置
        $levelWarn = (int) \App\Models\Sysparam::getValue('level_warn', '5');
        $levelKick = (int) \App\Models\Sysparam::getValue('level_kick', '10');
        $levelMute = (int) \App\Models\Sysparam::getValue('level_mute', '8');
        $levelBan = (int) \App\Models\Sysparam::getValue('level_ban', '12');
        $levelBanip = (int) \App\Models\Sysparam::getValue('level_banip', '14');
        $levelFreeze = (int) \App\Models\Sysparam::getValue('level_freeze', '14');
        $superLevel = (int) \App\Models\Sysparam::getValue('superlevel', '100');
        $myLevel = Auth::user()->user_level;
        $positionPermissions = array_keys(array_filter($roomPermissionMap ?? []));
        $operatorActivePosition = Auth::user()->activePosition?->load('position.department')->position;
        $operatorDepartmentRank = (int) ($operatorActivePosition?->department?->rank ?? 0);
        $operatorPositionRank = (int) ($operatorActivePosition?->rank ?? 0);
    @endphp
    <script>
        window.chatContext = {
            roomId: {{ $room->id }},
            userId: {{ $user->id }},
            username: "{{ $user->username }}",
            userSex: "{{ match ((int) $user->sex) {1 => '男',2 => '女',default => ''} }}",
            userLevel: {{ $user->user_level }},
            superLevel: {{ $superLevel }},
            levelKick: {{ $levelKick }},
            levelMute: {{ $levelMute }},
            levelBan: {{ $levelBan }},
            levelBanip: {{ $levelBanip }},
            sendUrl: "{{ route('chat.send', $room->id) }}",
            leaveUrl: "{{ route('chat.leave', $room->id) }}",
            expiredLeaveUrl: "{{ \Illuminate\Support\Facades\URL::temporarySignedRoute('chat.leave.expired', now()->addHours(12), ['id' => $room->id, 'user' => $user->id]) }}",
            heartbeatUrl: "{{ route('chat.heartbeat', $room->id) }}",
            fishCastUrl: "{{ route('fishing.cast', $room->id) }}",
            fishReelUrl: "{{ route('fishing.reel', $room->id) }}",
            chatBotUrl: "{{ route('chatbot.chat') }}",
            chatBotClearUrl: "{{ route('chatbot.clear') }}",
            @php
                $chatbotEnabledState = \App\Models\Sysparam::getValue('chatbot_enabled', '0') === '1';
                $botUserData = null;
                if ($chatbotEnabledState) {
                    $botUser = \App\Models\User::where('username', 'AI小班长')->first();
                    if ($botUser) {
                        $botUserData = app(\App\Services\ChatUserPresenceService::class)->build($botUser);
                        $botUserData['headfaceUrl'] = $botUser->headfaceUrl;
                    }
                }
            @endphp
            chatBotEnabled: {{ $chatbotEnabledState ? 'true' : 'false' }},
            botUser: @json($botUserData),
            hasPosition: {{ Auth::user()->activePosition || Auth::user()->user_level >= $superLevel ? 'true' : 'false' }},
            hasRoomManagementPermission: {{ (! empty($hasRoomManagementPermission) || Auth::id() === 1) ? 'true' : 'false' }},
            isSiteOwner: {{ Auth::id() === 1 ? 'true' : 'false' }},
            positionPermissions: @json($positionPermissions),
            positionPermissionMap: @json($roomPermissionMap ?? []),
            @php
                $activePos = Auth::user()->activePosition;
                $deptName  = $activePos?->position?->department?->name ?? '';
                $posName   = $activePos?->position?->name ?? '';
            @endphp
            welcomePrefix: "{{ $deptName ? "{$deptName} {$posName} {$user->username}" : $user->username }}",
            operatorDepartmentRank: {{ $operatorDepartmentRank }},
            operatorPositionRank: {{ $operatorPositionRank }},
            myMaxReward: @php
                if (Auth::id() === 1) {
                    // 超级管理员（id=1）无需职务，直接拥有不限量奖励权
                    echo -1;
                } else {
                    $pos = Auth::user()->activePosition?->position;
                    // -1 = 有权限但无上限（null），0 = 禁止，正整数 = 有具体上限
                    echo $pos ? ($pos->max_reward === null ? -1 : (int) $pos->max_reward) : 0;
                }
            @endphp,
            appointPositionsUrl: "{{ route('chat.appoint.positions') }}",
            appointUrl: "{{ route('chat.appoint.appoint') }}",
            revokeUrl: "{{ route('chat.appoint.revoke') }}",
            rewardUrl: "{{ route('command.reward') }}",
            rewardQuotaUrl: "{{ route('command.reward_quota') }}",
            refreshAllUrl: "{{ route('command.refresh_all') }}",
            chatPreferencesUrl: "{{ route('user.update_chat_preferences') }}",
            dailyStatusUpdateUrl: "{{ route('user.update_daily_status') }}",
            dailySignInStatusUrl: @json(\Illuminate\Support\Facades\Route::has('daily-sign-in.status') ? route('daily-sign-in.status') : null),
            dailySignInCalendarUrl: @json(\Illuminate\Support\Facades\Route::has('daily-sign-in.calendar') ? route('daily-sign-in.calendar') : null),
            dailySignInClaimUrl: @json(\Illuminate\Support\Facades\Route::has('daily-sign-in.claim') ? route('daily-sign-in.claim') : null),
            dailySignInMakeupUrl: @json(\Illuminate\Support\Facades\Route::has('daily-sign-in.makeup') ? route('daily-sign-in.makeup') : null),
            userJjb: {{ (int) $user->jjb }}, // 当前用户金币（求婚前金额预检查用）
            myGold: {{ (int) $user->jjb }},  // 赠金币面板显示余额用（赠送成功后前端更新）
            chatPreferences: @json($user->chat_preferences ?? []),
            currentDailyStatus: @json($activeDailyStatus),
            dailyStatusCatalog: @json($dailyStatusCatalog),

            // ─── 婚姻系统 ──────────────────────────────
            minWeddingCost: {{ (int) \App\Models\WeddingTier::where('is_active', true)->orderBy('amount')->value('amount') ?? 0 }},
            marriage: {
                proposeUrl: "{{ route('marriage.propose') }}",
                statusUrl: "{{ route('marriage.status') }}",
                targteStatusUrl: "/marriage/target",
                myRingsUrl: "{{ route('marriage.rings') }}",
                acceptUrl: (id) => `/marriage/${id}/accept`,
                rejectUrl: (id) => `/marriage/${id}/reject`,
                divorceUrl: (id) => `/marriage/${id}/divorce`,
                confirmDivorceUrl: (id) => `/marriage/${id}/confirm-divorce`,
                rejectDivorceUrl: (id) => `/marriage/${id}/reject-divorce`,
                divorceConfigUrl: '/marriage/divorce-config',
                weddingTiersUrl: "/wedding/tiers",
                weddingSetupUrl: (id) => `/wedding/${id}/setup`,
                claimEnvelopeUrl: (id, ceremonyId) => `/wedding/${id}/claim`,
                envelopeStatusUrl: (id) => `/wedding/${id}/envelope-status`,
            },
            earnRewardUrl: "{{ route('earn.video_reward') }}",
            chatImageRetentionDays: 3
        };
    </script>
    @vite(['resources/css/app.css', 'resources/js/app.js', 'resources/js/chat.js'])
    <script defer src="/js/alpinejs.min.js"></script>
    <link rel="stylesheet" href="{{ asset('css/chat.css') }}?v={{ filemtime(public_path('css/chat.css')) }}">
</head>

<body>
    <div class="chat-layout">

        {{-- ═══════════ 左侧主区域 ═══════════ --}}
        <div class="chat-left">

            {{-- 顶部标题栏 + 公告滚动条（layout/ 子目录维护） --}}
            @include('chat.partials.layout.header')

            {{-- 消息窗格（双窗格，默认只显示 say1） --}}
            <div class="message-panes" id="message-panes">
                {{-- 主消息窗 --}}
                <div class="message-pane say1" id="chat-messages-container">
                    <div class="msg-line">
                        <span style="color: #cc0000; font-weight: bold;">【公众窗口】</span>显示公众的发言！
                        <span class="msg-time">({{ now()->format('H:i:s') }})</span><br>
                        <span
                            style="color: #000099;">『{{ $room->name }}』{{ $room->description ?? '欢迎光临！畅所欲言，文明聊天。' }}</span>
                    </div>
                </div>
                {{-- 副消息窗（包厢窗） --}}
                <div class="message-pane say2" id="chat-messages-container2">
                    <div class="msg-line">
                        <span style="color: #cc0000; font-weight: bold;">【包厢窗口】</span>显示包厢名单中聊友的发言！
                        <span class="msg-time">({{ now()->format('H:i:s') }})</span>
                    </div>
                </div>
            </div>

            {{-- 底部输入工具栏（layout/ 子目录维护） --}}
            @include('chat.partials.layout.input-bar')
        </div>

        {{-- ═══════════ 竖向工具条（layout/ 子目录维护） ═══════════ --}}
        @include('chat.partials.layout.toolbar')

        {{-- ═══════════ 右侧用户面板（layout/ 子目录维护） ═══════════ --}}
        @include('chat.partials.layout.right-panel')
    </div>

    {{-- ═══════════ 手机端浮动按钮 + 抽屉（≤ 640px 屏幕有效，独立维护）═══════════ --}}
    @include('chat.partials.layout.mobile-drawer')

    

    {{-- ═══════════ 全局 UI 公共组件 ═══════════ --}}

    {{-- 自定义弹窗（替代原生 alert/confirm/prompt，全页面可用） --}}
    @include('chat.partials.global-dialog')
    {{-- Toast 轻提示 --}}
    @include('chat.partials.toast-notification')
    {{-- 聊天图片大图预览层 --}}
    <div id="chat-image-lightbox"
        style="display:none; position:fixed; inset:0; z-index:10020; background:rgba(15,23,42,.86); backdrop-filter:blur(4px);"
        data-chat-image-lightbox-close>
        <div
            style="position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:32px;"
            data-chat-image-lightbox-close>
            <img id="chat-image-lightbox-img" src="" alt="聊天图片预览"
                data-chat-image-lightbox-image
                style="max-width:92vw; max-height:86vh; border-radius:12px; box-shadow:0 18px 50px rgba(0,0,0,.45);">
        </div>
        <button type="button" data-chat-image-lightbox-close
            style="position:absolute; top:20px; right:24px; z-index:10021; border:none; background:transparent; color:#fff; font-size:34px; cursor:pointer;">&times;</button>
        <div id="chat-image-lightbox-name"
            style="position:absolute; left:50%; bottom:24px; transform:translateX(-50%); z-index:10021; max-width:88vw; color:#e2e8f0; font-size:12px; text-align:center; word-break:break-all;">
        </div>
    </div>
    {{-- 大卡片通知（任命公告、好友通知、礼包选择等） --}}
    @include('chat.partials.chat-banner')

    {{-- ═══════════ 聊天室交互脚本（用户操作、好友通知等） ═══════════ --}}
    @include('chat.partials.user-actions')

    {{-- ═══════════ 活动与系统弹窗 ═══════════ --}}
    {{-- 婚姻系统弹窗 --}}
    @include('chat.partials.marriage-modals')
    {{-- 节日福利弹窗 --}}
    @include('chat.partials.holiday-modal')
    @include('chat.partials.daily-sign-in-modal')

    {{-- ═══════════ 游戏面板（partials/games/ 子目录，各自独立，包含 CSS + HTML + JS） ═══════════ --}}
    <script>
        /**
         * 延迟执行非关键游戏初始化，避免首屏聊天室渲染时同时抢占网络和主线程。
         *
         * @param {Function} callback 初始化回调
         * @param {number} timeout 最长等待时间
         */
        window.deferChatGameBootstrap = function(callback, timeout = 2500) {
            if (typeof callback !== 'function') {
                return;
            }

            if ('requestIdleCallback' in window) {
                window.requestIdleCallback(callback, { timeout });
                return;
            }

            window.setTimeout(callback, Math.min(timeout, 1200));
        };
    </script>
    @include('chat.partials.games.baccarat-panel')
    @include('chat.partials.games.slot-machine')
    @include('chat.partials.games.mystery-box')
    @include('chat.partials.games.horse-race-panel')
    @include('chat.partials.games.fortune-panel')
    @include('chat.partials.games.lottery-panel')
    @include('chat.partials.games.red-packet-panel')
    @include('chat.partials.games.fishing-panel')
    @include('chat.partials.games.game-hall')
    @include('chat.partials.games.baccarat-loss-cover-panel')
    @include('chat.partials.games.gomoku-panel')
    @include('chat.partials.games.earn-panel')

    {{-- 全屏特效系统：管理员和会员入场可触发的全屏动效，生产环境由 Vite 压缩与版本化 --}}
    @vite('resources/js/effects.js')

    @include('chat.partials.scripts')

    {{-- 辅助与全局事件组件 --}}
    @include('chat.partials.ai-chatbot')
    @include('chat.partials.system-events')
    {{-- 页面初始加载时，渲染自带的历史记录（解决入场欢迎语错过断网的问题） --}}
    @if (!empty($historyMessages))
        <script>
            document.addEventListener('DOMContentLoaded', () => {
                const historyMsgs = @json($historyMessages);
                const clearId = parseInt(localStorage.getItem(`local_clear_msg_id_{{ $room->id }}`) || '0', 10);

                if (historyMsgs && historyMsgs.length > 0) {
                    // 全局函数 appendMessage 在 scripts.blade.php 中定义
                    historyMsgs.forEach(msg => {
                        // 如果开启了本地清屏，之前的历史记录不再显示
                        if (msg.id > clearId) {
                            if (typeof window.appendMessage === 'function') {
                                window.appendMessage(msg);
                            }
                        }
                    });
                }
            });
        </script>
    @endif
    @if (!empty($initialWelcomeMessage))
        <script>
            document.addEventListener('DOMContentLoaded', () => {
                setTimeout(() => {
                    if (typeof window.appendMessage === 'function') {
                        window.appendMessage(@json($initialWelcomeMessage));
                    }
                }, 220);
            });
        </script>
    @endif
    @if (!empty($newbieEffect) || !empty($weekEffect) || !empty($initialPresenceTheme['presence_effect']))
        <script>
            /**
             * 延迟1秒待页面完成初始化后，自动播放进房附带的特效。
             * 优先级：新人礼包特效 -> 会员专属进场特效 -> 周卡特效。
             */
            setTimeout(() => {
                if (typeof EffectManager !== 'undefined') {
                    @if (!empty($newbieEffect))
                        EffectManager.play('{{ $newbieEffect }}');
                    @elseif (!empty($initialPresenceTheme['presence_effect']))
                        EffectManager.play('{{ $initialPresenceTheme['presence_effect'] }}');
                    @elseif (!empty($weekEffect))
                        EffectManager.play('{{ $weekEffect }}');
                    @endif
                }
            }, 1000);
        </script>
    @endif
    @if (!empty($initialPresenceTheme))
        <script>
            document.addEventListener('DOMContentLoaded', () => {
                setTimeout(() => {
                    if (typeof window.showVipPresenceBanner === 'function') {
                        window.showVipPresenceBanner(@json($initialPresenceTheme));
                    }
                }, 700);
            });
        </script>
    @endif

    {{-- 页面初始加载时，若存在挂起的求婚 / 离婚请求，则弹窗 --}}
    @if (!empty($pendingProposal) || !empty($pendingDivorce))
        <script>
            document.addEventListener('DOMContentLoaded', () => {
                // 等待短暂延迟以确保 Alpine 和 window.chatDialog 初始化完成
                setTimeout(() => {
                    @if (!empty($pendingProposal))
                        window.dispatchEvent(new CustomEvent('chat:marriage-proposed', {
                            detail: @json($pendingProposal)
                        }));
                    @endif

                    @if (!empty($pendingDivorce))
                        window.dispatchEvent(new CustomEvent('chat:divorce-requested', {
                            detail: @json($pendingDivorce)
                        }));
                    @endif
                }, 800);
            });
        </script>
    @endif

</body>

</html>
