{{--
    文件功能：用户交互全局函数 + 名片弹窗组件

    包含：
    1. switchTarget() — 单击用户名切换聊天目标
    2. openUserCard() — 双击用户名打开名片弹窗
    3. 用户名片弹窗 Alpine.js 组件（资料查看 + 送花 + 管理操作）

    从 scripts.blade.php 和 frame.blade.php 中抽取，保持代码职责清晰。

    @author ChatRoom Laravel
    @version 1.0.0
--}}

{{-- ═══════════ 全局交互函数 ═══════════ --}}
<script>
    /**
     * 全局函数：单击用户名 → 切换聊天目标
     *
     * 将「对...说」下拉选中为该用户，方便直接发悄悄话。
     * 若用户已离线不在下拉列表中，临时添加一个 option。
     */
    function switchTarget(username) {
        const toUserSelect = document.getElementById('to_user');
        if (!toUserSelect) return;

        const options = toUserSelect.options;
        let found = false;
        for (let i = 0; i < options.length; i++) {
            if (options[i].value === username) {
                toUserSelect.value = username;
                found = true;
                break;
            }
        }
        // 如果不在列表中（可能已离线），临时添加
        if (!found && username !== '大家') {
            const opt = document.createElement('option');
            opt.value = username;
            opt.textContent = username;
            toUserSelect.appendChild(opt);
            toUserSelect.value = username;
        }
        // 切换目标后自动聚焦输入框，方便直接输入
        document.getElementById('content').focus();
    }

    /**
     * 全局函数：双击用户名 → 打开名片弹窗
     *
     * 聊天消息区和右侧用户列表统一调用此函数。
     * 通过 Alpine.js 的 fetchUser 方法加载用户资料并显示弹窗。
     */
    function openUserCard(username) {
        // 剥除可能从消息内容带入的装饰括号（如 【username】 → username）
        username = String(username).replace(/^[\u3010\[【\s]+|[\u3011\]】\s]+$/g, '').trim();
        if (!username) return;

        // Alpine.js 使用 defer 异步加载，检查是否已完成初始化
        if (!window.Alpine) {
            console.warn('[openUserCard] Alpine.js 尚未初始化，请稍后再试');
            return;
        }

        const el = document.getElementById('user-modal-container');
        if (el) {
            const data = window.Alpine.$data(el);
            if (data) data.fetchUser(username);
        }
    }
</script>

{{-- ═══════════ 用户名片弹窗 (Alpine.js) ═══════════ --}}
@php $gifts = \App\Models\Gift::activeList(); @endphp

<script>
    /**
     * 礼物数据注入（避免 JSON 破坏 x-data 属性解析）
     */
    window.__gifts = {!! Js::from($gifts) !!};
    window.__defaultGiftId = {{ $gifts->first()?->id ?? 0 }};

    /**
     * 用户名片弹窗 Alpine.js 组件定义
     * 提取到 script 标签避免 HTML 属性中的引号冲突
     */
    function userCardComponent() {
        return {
            showUserModal: false,
            showOriginalLightbox: false,
            userInfo: {
                position_history: []
            },
            isMuting: false,
            muteDuration: 5,
            showWhispers: false,
            whisperList: [],
            showAnnounce: false,
            announceText: '',
            is_friend: false, // 当前用户是否已将对方加为好友
            friendLoading: false, // 好友操作加载状态
            gifts: window.__gifts || [],
            selectedGiftId: window.__defaultGiftId || 0,
            giftCount: 1,
            sendingGift: false,

            // 职务奖励金币
            rewardAmount: 0,
            sendingReward: false,
            showRewardPanel: false,

            // 任命相关
            showAppointPanel: false,
            appointPositions: [],
            selectedPositionId: null,
            appointRemark: '',
            appointLoading: false,

            // 折叠状态
            showAdminView: false, // 管理员视野
            showPositionHistory: false, // 职务履历
            showAdminPanel: false, // 管理操作（管理操作+职务操作合并）

            // 婚姻状态
            targetMarriage: null, // 对方婚姻状态 { status, partner_name, marriage_id }
            marriageLoading: false,
            mySex: window.chatContext?.userSex ?? '', // 当前用户性别（用于求婚异性判断）

            // 自定义弹窗：直接代理到全局 window.chatDialog
            $alert: (...args) => window.chatDialog.alert(...args),
            $confirm: (...args) => window.chatDialog.confirm(...args),
            $prompt: (...args) => window.chatDialog.prompt(...args),

            /**
             * 判断当前操作者是否拥有指定的职务权限码。
             */
            hasPositionPermission(permissionCode) {
                return Boolean(window.chatContext?.positionPermissionMap?.[permissionCode]);
            },

            /**
             * 判断目标用户职务是否严格低于当前操作者。
             *
             * 规则：
             * 1. 先比较部门位阶 rank
             * 2. 部门相同再比较职务位阶 rank
             * 3. 对方没有在职职务时，视为可处理
             * 4. id=1 站长始终可处理
             */
            canManageTargetByDuty() {
                if (window.chatContext?.isSiteOwner) {
                    return true;
                }

                const targetDepartmentRank = Number(this.userInfo.department_rank || 0);
                const targetPositionRank = Number(this.userInfo.position_rank || 0);

                if (targetDepartmentRank <= 0 && targetPositionRank <= 0) {
                    return true;
                }

                const operatorDepartmentRank = Number(window.chatContext?.operatorDepartmentRank || 0);
                const operatorPositionRank = Number(window.chatContext?.operatorPositionRank || 0);

                if (operatorDepartmentRank > targetDepartmentRank) {
                    return true;
                }

                if (operatorDepartmentRank < targetDepartmentRank) {
                    return false;
                }

                return operatorPositionRank >= targetPositionRank;
            },

            /** 切换好友关系（加好友 / 删好友） */
            async toggleFriend() {
                if (this.friendLoading) return;
                this.friendLoading = true;
                const username = this.userInfo.username;
                const roomId = window.chatContext.roomId;
                const removing = this.is_friend;

                try {
                    let res;
                    if (removing) {
                        // 删除好友
                        res = await fetch(`/friend/${encodeURIComponent(username)}/remove`, {
                            method: 'DELETE',
                            headers: this._headers(),
                            body: JSON.stringify({
                                room_id: roomId
                            }),
                        });
                    } else {
                        // 添加好友
                        res = await fetch(`/friend/${encodeURIComponent(username)}/add`, {
                            method: 'POST',
                            headers: this._headers(),
                            body: JSON.stringify({
                                room_id: roomId
                            }),
                        });
                    }
                    const data = await res.json();
                    const ok = data.status === 'success';
                    this.$alert(
                        data.message,
                        ok ? (removing ? '已删除好友' : '添加成功 🎉') : '操作失败',
                        ok ? (removing ? '#6b7280' : '#16a34a') : '#cc4444'
                    );
                    if (ok) {
                        this.is_friend = !this.is_friend;
                    }
                } catch (e) {
                    this.$alert('网络异常', '错误', '#cc4444');
                }
                this.friendLoading = false;
            },

            async handleConfirmDivorce(marriageId) {
                // 等待后端接口实现，当前先略
                return;
            },

            /** 发起协议离婚（先拉惩罚配置，再弹专属全屏确认弹窗） */
            async doDivorce(marriageId) {
                if (!marriageId) return;
                this.showUserModal = false;

                // 从后台实时拉取最新惩罚配置
                let divorceConfig = {
                    mutual_charm_penalty: 0,
                    forced_charm_penalty: 0,
                    mutual_cooldown_days: 0,
                    forced_cooldown_days: 0
                };
                try {
                    const cfgRes = await fetch(window.chatContext.marriage.divorceConfigUrl, {
                        headers: {
                            'Accept': 'application/json',
                            'X-Requested-With': 'XMLHttpRequest'
                        }
                    });
                    if (cfgRes.ok) divorceConfig = await cfgRes.json();
                } catch (e) {
                    /* 网络异常则使用默认值 */
                }

                // 打开专属离婚确认弹窗
                const modal = document.getElementById('divorce-confirm-modal');
                if (modal && window.Alpine) {
                    window.Alpine.$data(modal).open(marriageId, divorceConfig);
                }
            },


            /** 获取用户资料 */
            async fetchUser(username) {
                try {
                    const res = await fetch('/user/' + encodeURIComponent(username), {
                        headers: {
                            'Accept': 'application/json',
                            'X-Requested-With': 'XMLHttpRequest'
                        }
                    });

                    if (!res.ok) {
                        const errorData = await res.json().catch(() => ({}));
                        console.error('Failed to fetch user:', errorData.message || res.statusText);
                        return;
                    }

                    const data = await res.json();
                    if (data.status === 'success') {
                        this.userInfo = data.data;
                        this.showPositionHistory = false;

                        // 加载好友状态（仅对非自己的用户查询）
                        if (data.data.username !== window.chatContext.username) {
                            fetch(`/friend/${encodeURIComponent(data.data.username)}/status`, {
                                headers: {
                                    'Accept': 'application/json',
                                    'X-Requested-With': 'XMLHttpRequest'
                                }
                            }).then(r => r.json()).then(s => {
                                this.is_friend = s.is_friend ?? false;
                            });

                            // 加载对方婚姻状态
                            this.targetMarriage = null;
                            this.marriageLoading = true;
                            fetch(`/marriage/target?username=${encodeURIComponent(data.data.username)}`, {
                                headers: {
                                    'Accept': 'application/json',
                                    'X-Requested-With': 'XMLHttpRequest'
                                }
                            }).then(r => r.json()).then(m => {
                                this.targetMarriage = m.marriage ?? null;
                            }).catch(() => {
                            }).finally(() => {
                                this.marriageLoading = false;
                            });
                        }
                        this.showUserModal = true;
                        this.isMuting = false;
                        this.showWhispers = false;
                        this.whisperList = [];
                        this.showAppointPanel = false;
                        this.selectedPositionId = null;
                        this.appointRemark = '';
                        // 有职务的操作人预加载可用职务列表
                        if (window.chatContext?.hasPosition) {
                            this._loadPositions();
                        }
                    }
                } catch (e) {
                    console.error('Error fetching user:', e);
                }
            },

            /** 加载可任命职务列表 */
            async _loadPositions() {
                if (!window.chatContext?.appointPositionsUrl) return;
                try {
                    const res = await fetch(window.chatContext.appointPositionsUrl, {
                        headers: {
                            'Accept': 'application/json'
                        }
                    });
                    const data = await res.json();
                    if (data.status === 'success') {
                        this.appointPositions = data.positions;
                        if (this.appointPositions.length > 0) {
                            this.selectedPositionId = this.appointPositions[0].id;
                        }
                    }
                } catch (e) {
                    /* 静默失败 */
                }
            },

            /** 快速任命 */
            async doAppoint() {
                if (this.appointLoading || !this.selectedPositionId) return;
                this.appointLoading = true;
                try {
                    const res = await fetch(window.chatContext.appointUrl, {
                        method: 'POST',
                        headers: this._headers(),
                        body: JSON.stringify({
                            username: this.userInfo.username,
                            position_id: this.selectedPositionId,
                            remark: this.appointRemark.trim() || null,
                            room_id: window.chatContext.roomId ?? null,
                        })
                    });
                    const data = await res.json();
                    const ok = data.status === 'success';
                    if (ok) {
                        this.showUserModal = false;
                    } else {
                        this.$alert(data.message, '操作失败', '#cc4444');
                    }
                } catch (e) {
                    this.$alert('网络异常，请稍后重试', '错误', '#cc4444');
                }
                this.appointLoading = false;
            },

            /** 快速撤销 */
            async doRevoke() {
                const ok = await this.$confirm(
                    '确定要撤销 「' + this.userInfo.username + '」 的职务吗？撤销后将不再拥有相关权限。',
                    '撤销职务'
                );
                if (!ok) return;
                this.appointLoading = true;
                try {
                    const res = await fetch(window.chatContext.revokeUrl, {
                        method: 'POST',
                        headers: this._headers(),
                        body: JSON.stringify({
                            username: this.userInfo.username,
                            remark: '聊天室快速撤销',
                            room_id: window.chatContext.roomId ?? null,
                        })
                    });
                    const data = await res.json();
                    const revOk = data.status === 'success';
                    if (revOk) {
                        this.showUserModal = false;
                    } else {
                        this.$alert(data.message, '操作失败', '#cc4444');
                    }
                } catch (e) {
                    this.$alert('网络异常', '错误', '#cc4444');
                }
                this.appointLoading = false;
            },
            /** 踢出用户 */
            async kickUser() {
                const reason = await this.$prompt('踢出原因（可留空）：', '违反聊天室规则', '踢出用户', '#cc4444');
                if (reason === null) return;
                try {
                    const res = await fetch('/command/kick', {
                        method: 'POST',
                        headers: this._headers(),
                        body: JSON.stringify({
                            username: this.userInfo.username,
                            room_id: window.chatContext.roomId,
                            reason: reason || '违反聊天室规则'
                        })
                    });
                    const data = await res.json();
                    if (data.status === 'success') {
                        this.showUserModal = false;
                    } else {
                        this.$alert('操作失败：' + data.message, '操作失败', '#cc4444');
                    }
                } catch (e) {
                    this.$alert('网络异常', '错误', '#cc4444');
                }
            },

            /** 禁言用户 */
            async muteUser() {
                try {
                    const res = await fetch('/command/mute', {
                        method: 'POST',
                        headers: this._headers(),
                        body: JSON.stringify({
                            username: this.userInfo.username,
                            room_id: window.chatContext.roomId,
                            duration: this.muteDuration
                        })
                    });
                    const data = await res.json();
                    if (data.status === 'success') {
                        this.showUserModal = false;
                    } else {
                        this.$alert('操作失败：' + data.message, '操作失败', '#cc4444');
                    }
                } catch (e) {
                    this.$alert('网络异常', '错误', '#cc4444');
                }
            },

            /** 警告用户 */
            async warnUser() {
                const reason = await this.$prompt('警告原因：', '请注意言行', '警告用户', '#f59e0b');
                if (reason === null) return;
                try {
                    const res = await fetch('/command/warn', {
                        method: 'POST',
                        headers: this._headers(),
                        body: JSON.stringify({
                            username: this.userInfo.username,
                            room_id: window.chatContext.roomId,
                            reason: reason || '请注意言行'
                        })
                    });
                    const data = await res.json();
                    if (data.status === 'success') {
                        this.showUserModal = false;
                    } else {
                        this.$alert('操作失败：' + data.message, '操作失败', '#cc4444');
                    }
                } catch (e) {
                    this.$alert('网络异常', '错误', '#cc4444');
                }
            },

            /** 冻结用户 */
            async freezeUser() {
                const confirmed = await this.$confirm(
                    '确定要冻结 ' + this.userInfo.username + ' 的账号吗？冻结后将无法登录！',
                    '冻结账号',
                    '#cc4444'
                );
                if (!confirmed) return;
                const reason = await this.$prompt('冻结原因：', '严重违规', '填写原因', '#cc4444');
                if (reason === null) return;
                try {
                    const res = await fetch('/command/freeze', {
                        method: 'POST',
                        headers: this._headers(),
                        body: JSON.stringify({
                            username: this.userInfo.username,
                            room_id: window.chatContext.roomId,
                            reason: reason || '严重违规'
                        })
                    });
                    const data = await res.json();
                    if (data.status === 'success') {
                        this.showUserModal = false;
                    } else {
                        this.$alert('操作失败：' + data.message, '操作失败', '#cc4444');
                    }
                } catch (e) {
                    this.$alert('网络异常', '错误', '#cc4444');
                }
            },

            /** 查看私信记录 */
            async loadWhispers() {
                try {
                    const res = await fetch('/command/whispers/' + encodeURIComponent(this.userInfo.username), {
                        headers: {
                            'Accept': 'application/json'
                        }
                    });
                    const data = await res.json();
                    if (data.status === 'success') {
                        this.whisperList = data.messages;
                        this.showWhispers = true;
                    } else {
                        this.$alert(data.message, '操作失败', '#cc4444');
                    }
                } catch (e) {
                    this.$alert('网络异常', '错误', '#cc4444');
                }
            },

            /** 发送全服公告 */
            async sendAnnounce() {
                if (!this.announceText.trim()) return;
                try {
                    const res = await fetch('/command/announce', {
                        method: 'POST',
                        headers: this._headers(),
                        body: JSON.stringify({
                            content: this.announceText,
                            room_id: window.chatContext.roomId,
                        })
                    });
                    const data = await res.json();
                    if (data.status === 'success') {
                        this.announceText = '';
                        this.showAnnounce = false;
                    } else {
                        this.$alert(data.message, '操作失败', '#cc4444');
                    }
                } catch (e) {
                    this.$alert('网络异常', '错误', '#cc4444');
                }
            },

            /** 送礼物 */
            async sendGift() {
                if (this.sendingGift || !this.selectedGiftId) return;
                this.sendingGift = true;
                try {
                    const res = await fetch('/gift/flower', {
                        method: 'POST',
                        headers: this._headers(),
                        body: JSON.stringify({
                            to_user: this.userInfo.username,
                            room_id: window.chatContext.roomId,
                            gift_id: this.selectedGiftId,
                            count: this.giftCount
                        })
                    });
                    const data = await res.json();
                    this.$alert(data.message, data.status === 'success' ? '送礼成功 🎁' : '操作失败',
                        data.status === 'success' ? '#e11d48' : '#cc4444');
                    if (data.status === 'success') {
                        this.showUserModal = false;
                        this.giftCount = 1;
                    }
                } catch (e) {
                    this.$alert('网络异常', '错误', '#cc4444');
                }
                this.sendingGift = false;
            },

            /** 职务奖励：向用户发放金币（凭空产生，记入履职记录） */
            async sendReward() {
                if (this.sendingReward) return;
                const maxOnce = window.chatContext?.myMaxReward ?? 0;
                const amount = parseInt(this.rewardAmount, 10);
                if (!amount || amount <= 0) {
                    this.$alert('请输入有效的奖励金额', '提示', '#f59e0b');
                    return;
                }
                // 0 = 禁止（前端按钮不显示，此处二次保护）
                if (maxOnce === 0) {
                    this.$alert('你的职务没有奖励发放权限', '无权限', '#cc4444');
                    return;
                }
                // -1 = 不限，跳过上限校验；正整数 = 有具体上限
                if (maxOnce > 0 && amount > maxOnce) {
                    this.$alert(`单次奖励上限为 ${maxOnce} 金币`, '超出上限', '#cc4444');
                    return;
                }
                this.sendingReward = true;
                try {
                    const res = await fetch(window.chatContext.rewardUrl, {
                        method: 'POST',
                        headers: this._headers(),
                        body: JSON.stringify({
                            username: this.userInfo.username,
                            room_id: window.chatContext.roomId,
                            amount,
                        })
                    });
                    const data = await res.json();
                    const ok = data.status === 'success';
                    this.$alert(data.message, ok ? '奖励发放成功 🎉' : '操作失败',
                        ok ? '#d97706' : '#cc4444');
                    if (ok) {
                        this.showRewardPanel = false;
                        this.rewardAmount = 0;
                    }
                } catch (e) {
                    this.$alert('网络异常，请稍后重试', '错误', '#cc4444');
                }
                this.sendingReward = false;
            },

            /** 通用请求头 */
            _headers() {
                return {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                    'Content-Type': 'application/json',
                    'Accept': 'application/json'
                };
            }
        };
    }
</script>

<div id="user-modal-container" x-data="userCardComponent()">
    <div x-show="showUserModal" style="display: none;" class="modal-overlay" x-on:click.self="showUserModal = false">
        <div class="modal-card" x-transition>
            {{-- 弹窗头部 --}}
            <div class="modal-header">
                <h3 x-text="'用户名片 · ' + userInfo.username"></h3>
                <button class="modal-close" x-on:click="showUserModal = false">&times;</button>
            </div>
            {{-- 弹窗内容 --}}
            <div class="modal-body">
                <div class="profile-row">
                    <img class="profile-avatar" x-show="userInfo.headface"
                         :src="(userInfo.headface || '1.gif').startsWith('storage/') ? '/' + (userInfo.headface || '1.gif') : '/images/headface/' + (userInfo.headface || '1.gif')"
                         x-on:error="$el.style.display='none'"
                         style="cursor: pointer; transition: transform 0.2s;"
                         x-on:click="if(userInfo.headface) showOriginalLightbox = true"
                         title="点击查看大图"
                         onmouseover="this.style.transform='scale(1.05)'"
                         onmouseout="this.style.transform='scale(1)'">
                    <div class="profile-info">
                        <h4>
                            <span x-text="userInfo.username"></span>
                            <span class="level-badge" x-text="'LV.' + userInfo.user_level"></span>
                            <span class="sex-badge"
                                  x-text="userInfo.sex === '男' ? '♂' : (userInfo.sex === '女' ? '♀' : '')"
                                  :style="userInfo.sex === '男' ? 'color: blue' : (userInfo.sex === '女' ?
                                    'color: deeppink' : '')"></span>
                        </h4>

                        {{-- VIP + 在职职务：合并成一个胶囊，保证同一行 --}}
                        <div x-show="userInfo.vip?.Name || userInfo.position_name"
                             style="margin-top: 6px;">

                        <span style="display: inline-flex;align-items: center;gap: 6px;padding: 2px 10px;
                                    border-radius: 999px;white-space: nowrap;width: fit-content;max-width: 100%;
                                    font-size: 11px;font-weight: bold;background: #faf5ff;border: 1px solid #d8b4fe;color: #7c3aed;">

                            {{-- VIP --}}
                            <template x-if="userInfo.vip?.Name">
                                <span style="display: inline-flex; align-items: center; gap: 4px; color: #ea580c;">
                                    <span x-text="userInfo.vip?.Icon || '👑'" style="font-size: 12px;"></span>
                                    <span x-text="userInfo.vip?.Name"></span>
                                </span>
                            </template>

                            {{-- 分隔符：只有 VIP 和职务都存在时显示 --}}
                            <template x-if="userInfo.vip?.Name && userInfo.position_name">
                                <span style="color: #c4b5fd;">|</span>
                            </template>

                            {{-- 职务 --}}
                            <template x-if="userInfo.position_name">
                                <span style="display: inline-flex; align-items: center; gap: 4px; color: #7c3aed;">
                                    <span x-text="userInfo.position_icon || '🎖️'" style="font-size: 12px;"></span>
                                    <span
                                        x-text="(userInfo.department_name ? userInfo.department_name + ' · ' : '') + userInfo.position_name"></span>
                                </span>
                            </template>

                        </span>
                        </div>

                        <div style="font-size: 11px; color: #999; margin-top: 4px;">
                            加入: <span x-text="userInfo.created_at"></span>
                        </div>
                    </div>
                </div>

                {{-- 详细信息区：外层 x-show 控制显隐，内层单独写 flex 避免被 Alpine 覆盖 --}}
                <div x-show="userInfo.exp_num !== undefined" style="margin-top: 12px;">
                    <div style="display: flex; flex-direction: row; gap: 8px;">
                        <!-- 经验 -->
                        <div
                            style="flex: 1; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 6px; padding: 6px 0; display: flex; flex-direction: column; align-items: center; justify-content: center;">
                            <span style="color: #64748b; font-size: 11px; margin-bottom: 2px;">经验</span>
                            <span x-text="userInfo.exp_num"
                                  style="font-weight: 700; color: #4f46e5; font-size: 14px;"></span>
                        </div>
                        <!-- 金币 -->
                        <div
                            style="flex: 1; background: #fdfae8; border: 1px solid #fef08a; border-radius: 6px; padding: 6px 0; display: flex; flex-direction: column; align-items: center; justify-content: center;">
                            <span style="color: #b45309; font-size: 11px; margin-bottom: 2px;">金币</span>
                            <span x-text="userInfo.jjb"
                                  style="font-weight: 700; color: #d97706; font-size: 14px;"></span>
                        </div>
                        <!-- 存款 -->
                        <div
                            style="flex: 1; background: #ecfdf5; border: 1px solid #a7f3d0; border-radius: 6px; padding: 6px 0; display: flex; flex-direction: column; align-items: center; justify-content: center;">
                            <span style="color: #047857; font-size: 11px; margin-bottom: 2px;">存款</span>
                            <span x-text="userInfo.bank_jjb"
                                  style="font-weight: 700; color: #059669; font-size: 14px;"></span>
                        </div>
                        <!-- 魅力 -->
                        <div
                            style="flex: 1; background: #fdf2f8; border: 1px solid #fbcfe8; border-radius: 6px; padding: 6px 0; display: flex; flex-direction: column; align-items: center; justify-content: center;">
                            <span style="color: #be185d; font-size: 11px; margin-bottom: 2px;">魅力</span>
                            <span x-text="userInfo.meili"
                                  style="font-weight: 700; color: #db2777; font-size: 14px;"></span>
                        </div>
                    </div>
                </div>

                {{-- 邀请贡献卡片 (仅查看自己资料时显示) --}}
                <div x-show="userInfo.username === window.chatContext.username && userInfo.id !== undefined"
                     style="margin-top: 12px; border-radius: 8px; overflow: hidden; border: 1px dashed #c7d2fe;">
                    <div
                        style="background: #e0e7ff; padding: 6px 10px; font-size: 11px; font-weight: bold; color: #4338ca; display: flex; align-items: center; justify-content: space-between;">
                        <span>🤝 我的邀请推广</span>
                        <span style="font-size: 10px;">累计邀请：<span x-text="userInfo.invitees_count"
                                                                      style="color: #ef4444; font-size: 12px;"></span> 人</span>
                    </div>
                    <div
                        style="padding: 8px 10px; background: #f8fafc; font-size: 11px; display: flex; flex-direction: column; gap: 6px;">
                        <span style="color: #64748b;">复制下方专属链接，邀请好友注册聊天室：</span>
                        <div style="display: flex; gap: 6px; align-items: center;">
                            <input type="text" readonly :value="window.location.origin + '/' + userInfo.id"
                                   style="flex: 1; border: 1px solid #cbd5e1; border-radius: 4px; padding: 4px 6px; font-size: 11px; background: #fff; color: #334155;">
                            <button
                                x-on:click="navigator.clipboard.writeText(window.location.origin + '/' + userInfo.id); $alert('邀请链接已复制到剪贴板', '复制成功', '#22c55e');"
                                style="background: #4f46e5; color: white; border: none; border-radius: 4px; padding: 4px 8px; font-size: 11px; cursor: pointer; font-weight: bold;">
                                复制
                            </button>
                        </div>
                    </div>
                </div>

                {{-- 管理员可见区域 (IP 与 归属地) --}}
                <div x-show="userInfo.last_ip !== undefined"
                     style="margin-top: 8px; border-radius: 8px; overflow: hidden;">
                    {{-- 可点击标题 --}}
                    <div x-on:click="showAdminView = !showAdminView"
                         style="display: flex; align-items: center; justify-content: space-between; padding: 6px 10px;
                               background: #fee2e2; border: 1px dashed #fca5a5; border-radius: 8px;
                               cursor: pointer; font-size: 11px; color: #991b1b; font-weight: bold; user-select: none;">
                        <span>🛡️ 管理员视野</span>
                        <span x-text="showAdminView ? '▲' : '▼'" style="font-size: 10px; opacity: 0.6;"></span>
                    </div>
                    {{-- 折叠内容 --}}
                    <div x-show="showAdminView" x-transition
                         style="display: none; padding: 8px 10px; background: #fff5f5; border: 1px dashed #fca5a5;
                               border-top: none; border-radius: 0 0 8px 8px; font-size: 11px; color: #991b1b;">
                        <div style="display: flex; flex-direction: column; gap: 3px;">
                            <div><span style="opacity: 0.8;">首次IP：</span><span
                                    x-text="userInfo.first_ip || '无'"></span>
                            </div>
                            <div><span style="opacity: 0.8;">上次IP：</span><span
                                    x-text="userInfo.last_ip || '无'"></span>
                            </div>
                            <div><span style="opacity: 0.8;">本次IP：</span><span
                                    x-text="userInfo.login_ip || '无'"></span>
                            </div>
                            <div><span style="opacity: 0.8;">归属地：</span><span
                                    x-text="userInfo.location || '未知'"></span>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="profile-detail" x-text="userInfo.sign || '这家伙很懒，什么也没留下'"
                     style="margin-top: 12px;"></div>

                {{-- 职务履历时间轴（有任职记录才显示，可折叠） --}}
                <div x-show="userInfo.position_history && userInfo.position_history.length > 0"
                     style="display: none; margin-top: 10px; border-top: 1px solid #f0f0f0; padding-top: 8px;">
                    {{-- 可点击标题 --}}
                    <div x-on:click="showPositionHistory = !showPositionHistory"
                         style="display: flex; align-items: center; justify-content: space-between;
                               cursor: pointer; font-size: 11px; font-weight: bold; color: #7c3aed;
                               margin-bottom: 4px; user-select: none;">
                        <span>🎖️ 职务履历 <span style="font-weight: normal; font-size: 10px; color: #9ca3af;"
                                                x-text="'（' + (userInfo.position_history?.length ?? 0) + ' 条）'"></span></span>
                        <span x-text="showPositionHistory ? '▲' : '▼'" style="font-size: 10px; opacity:0.5;"></span>
                    </div>
                    {{-- 折叠内容 --}}
                    <div x-show="showPositionHistory" x-transition style="display: none;">
                        <template x-for="(h, idx) in userInfo.position_history" :key="idx">
                            <div style="display: flex; gap: 10px; margin-bottom: 8px; position: relative;">
                                {{-- 线 --}}
                                <div
                                    style="display: flex; flex-direction: column; align-items: center; width: 18px; flex-shrink: 0;">
                                    <div
                                        style="width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; margin-top: 2px;"
                                        :style="h.is_active ? 'background: #7c3aed; box-shadow: 0 0 0 3px #ede9fe;' :
                                            'background: #d1d5db;'">
                                    </div>
                                    <template x-if="idx < (userInfo.position_history?.length ?? 0) - 1">
                                        <div style="width: 1px; flex: 1; background: #e5e7eb; margin-top: 2px;"></div>
                                    </template>
                                </div>
                                {{-- 内容 --}}
                                <div style="flex: 1; font-size: 11px; padding-bottom: 4px;">
                                    <div style="font-weight: bold; color: #374151;">
                                        <span x-text="h.position_icon" style="margin-right: 2px;"></span>
                                        <span
                                            x-text="(h.department_name ? h.department_name + ' · ' : '') + h.position_name"></span>
                                        <span x-show="h.is_active"
                                              style="display: inline-block; margin-left: 4px; padding: 0 5px; background: #ede9fe; color: #7c3aed; border-radius: 10px; font-size: 10px;">在职中</span>
                                    </div>
                                    <div style="color: #9ca3af; font-size: 10px; margin-top: 2px;">
                                        <span x-text="h.appointed_at"></span>
                                        <span> – </span>
                                        <span x-text="h.is_active ? '至今' : (h.revoked_at || '')"></span>
                                        <span style="margin-left: 4px;" x-text="'(' + h.duration_days + ' 天)'"></span>
                                    </div>
                                </div>
                            </div>
                        </template>
                    </div>
                </div>
            </div>

            {{-- 操作按钮区：加好友 + 送礼物 + 送金币（有职务且有奖励权限时显示） --}}
            <div x-data="{ showGiftPanel: false, showGiftGoldPanel: false, giftGoldAmount: '', giftGoldSending: false }"
                 x-show="userInfo.username !== window.chatContext.username">

                <div class="modal-actions" style="margin-bottom: 0; display: flex; gap: 6px;">
                    {{-- 加好友 / 删好友 --}}
                    <button x-on:click="toggleFriend()" :disabled="friendLoading"
                            :style="is_friend
                            ?
                            'background: #f1f5f9; color: #6b7280; border: 1px solid #d1d5db;' :
                            'background: linear-gradient(135deg,#16a34a,#22c55e); color:#fff; border:none;'"
                            style="flex:1; padding: 7px 10px; border-radius: 5px; font-size: 12px;
                               cursor: pointer; font-weight: bold; transition: opacity .15s;"
                            x-text="friendLoading ? '处理中…' : (is_friend ? '✅ 好友' : '➕ 加好友')"></button>

                    {{-- 送礼物按钮 --}}
                    <button class="btn-whisper" style="flex:1;"
                            x-on:click="showGiftPanel = !showGiftPanel; showGiftGoldPanel = false;">
                        🎁 送礼物
                    </button>

                    {{-- 赠送金币按钮：所有人均可使用，自己金币转给对方 --}}
                    <button
                        style="flex:1; padding: 7px 10px; border-radius: 5px; font-size: 12px; font-weight: bold; cursor: pointer;
                               background: linear-gradient(135deg,#f59e0b,#d97706); color:#fff; border:none;"
                        x-on:click="showGiftGoldPanel = !showGiftGoldPanel; showGiftPanel = false;">
                        💰 赠金币
                    </button>

                    {{-- 求婚按钮：对方未婚 + 双方均已设置性别 + 异性 --}}
                    <button
                        x-show="!marriageLoading
                            && (!targetMarriage || targetMarriage.status === 'none')
                            && userInfo.sex
                            && mySex
                            && userInfo.sex !== mySex"
                        style="flex:1; padding: 7px 10px; border-radius: 5px; font-size: 12px; font-weight: bold; cursor: pointer;
                               background: linear-gradient(135deg,#f43f5e,#ec4899); color:#fff; border:none;"
                        x-on:click="showUserModal = false; openProposeModal(userInfo.username)">
                        💍 求婚
                    </button>

                    {{-- 自己未设置性别时的提示（让用户去完善资料） --}}
                    <div x-show="!marriageLoading
                            && (!targetMarriage || targetMarriage.status === 'none')
                            && userInfo.sex
                            && !mySex
                            && userInfo.sex !== mySex"
                         style="flex:1; display:flex; align-items:center; justify-content:center;
                               padding:7px 10px; border-radius:5px; font-size:11px;
                               background:#f8fafc; border:1px dashed #cbd5e1; color:#94a3b8; font-weight:bold; cursor:default;"
                         title="请到个人资料页设置您的性别后即可求婚">
                        💍 请先设置性别
                    </div>

                    {{-- 对方已婚时显示提示（非伴侣） --}}
                    <div
                        x-show="!marriageLoading && targetMarriage && targetMarriage.status === 'married' && !targetMarriage.is_my_partner"
                        :title="'与 ' + (targetMarriage?.partner_name || '—') + ' 已婚'"
                        style="flex:1; display:flex; align-items:center; justify-content:center;
                               padding:7px 10px; border-radius:5px; font-size:12px; background:#fff1f2;
                               border:1px solid #fecdd3; color:#f43f5e; font-weight:bold; white-space:nowrap;">
                        💑 已婚
                    </div>

                    {{-- 如果对方是自己的伴侣，显示离婚按钮 --}}
                    <button
                        x-show="!marriageLoading && targetMarriage && targetMarriage.status === 'married' && targetMarriage.is_my_partner"
                        style="flex:1; padding: 7px 10px; border-radius: 5px; font-size: 12px; font-weight: bold; cursor: pointer;
                               background: #64748b; color:#fff; border:none;"
                        x-on:click="doDivorce(targetMarriage.marriage_id)">
                        💔 协议离婚
                    </button>
                </div>

                {{-- 内联赠送金币面板 --}}
                <div x-show="showGiftGoldPanel" x-transition
                     style="display: none; padding: 12px 16px; background: #fffbeb; border-top: 1px solid #fde68a;">
                    <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:8px;">
                        <span style="font-size:13px; color:#92400e; font-weight:bold;">💰 赠送金币给 <span
                                x-text="userInfo.username"></span></span>
                        <button x-on:click="showGiftGoldPanel = false"
                                style="background:none; border:none; color:#92400e; cursor:pointer; font-size:18px; line-height:1; opacity:.6;">
                            ×
                        </button>
                    </div>
                    <div style="font-size:11px; color:#b45309; margin-bottom:8px;">您当前余额：<b
                            x-text="window.chatContext.myGold ?? '—'"></b> 金币
                    </div>
                    <div style="display:flex; gap:8px; align-items:center;">
                        <input type="number" x-model.number="giftGoldAmount" min="1" max="999999"
                               placeholder="输入金额"
                               style="flex:1; height:36px; padding:0 10px; border:1px solid #fbbf24; border-radius:6px; font-size:13px; color:#334155;">
                        <button
                            x-on:click="
                                if (!giftGoldAmount || giftGoldAmount <= 0) return;
                                giftGoldSending = true;
                                fetch('/gift/gold', {
                                    method: 'POST',
                                    headers: {
                                        'X-CSRF-TOKEN': document.querySelector('meta[name=csrf-token]').content,
                                        'Content-Type': 'application/json',
                                        'Accept': 'application/json'
                                    },
                                    body: JSON.stringify({
                                        to_user: userInfo.username,
                                        room_id: window.chatContext.roomId,
                                        amount: giftGoldAmount
                                    })
                                }).then(r => r.json()).then(d => {
                                    if (d.status === 'success') {
                                        window.chatContext.myGold = d.data?.my_jjb ?? window.chatContext.myGold;
                                        showGiftGoldPanel = false;
                                        giftGoldAmount = '';
                                        $alert(d.message, '赠送成功 💝', '#d97706');
                                    } else {
                                        $alert(d.message, '赠送失败', '#cc4444');
                                    }
                                }).catch(() => $alert('网络异常', '错误', '#cc4444'))
                                .finally(() => { giftGoldSending = false; });
                            "
                            :disabled="giftGoldSending"
                            style="height:36px; padding:0 16px; background:linear-gradient(135deg,#f59e0b,#d97706); color:#fff;
                                   border:none; border-radius:6px; font-size:13px; font-weight:bold; cursor:pointer; white-space:nowrap;"
                            :style="giftGoldSending ? 'opacity:.6; cursor:not-allowed;' : ''"
                            x-text="giftGoldSending ? '赠送中…' : '💝 确认赠送'"></button>
                    </div>
                </div>

                {{-- 内联礼物面板 --}}
                <div x-show="showGiftPanel" x-transition
                     style="display: none;
                    padding: 12px 16px; background: #fff; border-top: 1px solid #f1f5f9;">

                    <div
                        style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
                        <span style="font-size: 13px; color: #334155; font-weight: bold;">🎁 选择礼物</span>
                        <button x-on:click="showGiftPanel = false"
                                style="background: none; border: none; color: #94a3b8; cursor: pointer; font-size: 18px; line-height: 1;">
                            ×
                        </button>
                    </div>

                    {{-- 礼物选择列表 --}}
                    <div
                        style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 12px; max-height: 180px; overflow-y: auto;">
                        <template x-for="g in gifts" :key="g.id">
                            <div x-on:click="selectedGiftId = g.id"
                                 :style="selectedGiftId === g.id ?
                                    'border-color: #f43f5e; background: #fff1f2; box-shadow: 0 4px 12px rgba(244,63,94,0.15);' :
                                    'border-color: #e2e8f0; background: #fff;'"
                                 style="border: 2px solid; padding: 8px 4px; border-radius: 8px; text-align: center; cursor: pointer; transition: all 0.15s;">
                                <img :src="'/images/gifts/' + g.image"
                                     style="width: 36px; height: 36px; object-fit: contain; margin-bottom: 4px;"
                                     :alt="g.name">
                                <div
                                    style="font-size: 11px; color: #1e293b; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;"
                                    x-text="g.name"></div>
                                <div style="font-size: 10px; color: #e11d48;" x-text="g.cost + ' 💰'"></div>
                            </div>
                        </template>
                    </div>

                    {{-- 数量 + 送出 --}}
                    <div style="display: flex; gap: 8px; align-items: center;">
                        <select x-model.number="giftCount"
                                style="width: 70px; height: 36px; padding: 0 8px; border: 1px solid #cbd5e1; border-radius: 6px; font-size: 13px; color: #334155;">
                            <option value="1">1 个</option>
                            <option value="5">5 个</option>
                            <option value="10">10 个</option>
                            <option value="66">66 个</option>
                            <option value="99">99 个</option>
                            <option value="520">520 个</option>
                        </select>
                        <button x-on:click="sendGift(); showGiftPanel = false;" :disabled="sendingGift"
                                style="flex:1; height: 36px; background: linear-gradient(135deg,#f43f5e,#be123c); color:#fff;
                                   border: none; border-radius: 6px; font-size: 14px; font-weight: bold; cursor: pointer;"
                                :style="sendingGift ? 'opacity:0.7; cursor:not-allowed;' : ''">
                            <span x-text="sendingGift ? '正在送出...' : '💝 确认赠送'"></span>
                        </button>
                    </div>
                </div>
            </div>

            {{-- 管理操作 + 职务操作 合并折叠区 --}}
            @php
                $canWarnUser = Auth::id() === 1 || (($roomPermissionMap[\App\Support\PositionPermissionRegistry::USER_WARN] ?? false) === true);
                $canKickUser = Auth::id() === 1 || (($roomPermissionMap[\App\Support\PositionPermissionRegistry::USER_KICK] ?? false) === true);
                $canMuteUser = Auth::id() === 1 || (($roomPermissionMap[\App\Support\PositionPermissionRegistry::USER_MUTE] ?? false) === true);
                $canFreezeUser = Auth::id() === 1 || (($roomPermissionMap[\App\Support\PositionPermissionRegistry::USER_FREEZE] ?? false) === true);
                $hasUserModerationPermission = $canWarnUser || $canKickUser || $canMuteUser || $canFreezeUser;
                $hasPositionActions = Auth::user()->activePosition || $myLevel >= $superLevel;
            @endphp
            @if ($hasUserModerationPermission || $hasPositionActions)
                <div style="padding: 0 16px 12px;" x-show="userInfo.username !== window.chatContext.username">

                    {{-- 折叠标题 --}}
                    <div x-on:click="showAdminPanel = !showAdminPanel"
                         style="display: flex; align-items: center; justify-content: space-between;
                               padding: 6px 10px; background: #fef2f2; border: 1px solid #fecaca;
                               border-radius: 6px; cursor: pointer; user-select: none;">
                        <span style="font-size: 11px; color: #c00; font-weight: bold;">🔧 管理操作</span>
                        <span x-text="showAdminPanel ? '▲' : '▼'"
                              style="font-size: 10px; color: #c00; opacity: 0.6;"></span>
                    </div>

                    {{-- 折叠内容 --}}
                    <div x-show="showAdminPanel" x-transition style="display: none; margin-top: 6px;">

                        @if ($hasUserModerationPermission)
                            <div x-show="canManageTargetByDuty()">
                                <div style="font-size: 10px; color: #9ca3af; margin-bottom: 4px; padding-left: 2px;">
                                    管理员操作
                                </div>
                                <div style="display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px;">
                                    @if ($canWarnUser)
                                        <button
                                            style="flex:1; padding: 5px; border-radius: 4px; font-size: 11px; background: #fef3c7; border: 1px solid #f59e0b; cursor: pointer;"
                                            x-on:click="warnUser()">⚠️ 警告
                                        </button>
                                    @endif
                                    @if ($canKickUser)
                                        <button
                                            style="flex:1; padding: 5px; border-radius: 4px; font-size: 11px; background: #fee2e2; border: 1px solid #ef4444; cursor: pointer;"
                                            x-on:click="kickUser()">🚫 踢出
                                        </button>
                                    @endif
                                    @if ($canMuteUser)
                                        <button
                                            style="flex:1; padding: 5px; border-radius: 4px; font-size: 11px; background: #e0e7ff; border: 1px solid #6366f1; cursor: pointer;"
                                            x-on:click="isMuting = !isMuting">🔇 禁言
                                        </button>
                                    @endif
                                    @if ($canFreezeUser)
                                        <button
                                            style="flex:1; padding: 5px; border-radius: 4px; font-size: 11px; background: #dbeafe; border: 1px solid #3b82f6; cursor: pointer;"
                                            x-on:click="freezeUser()">🧊 冻结
                                        </button>
                                    @endif

                                    {{-- 职务奖励金币（凭空产生），仅有在职职务且 max_reward != 0 的人可见 --}}
                                    @if ($hasPositionActions)
                                        <button x-show="window.chatContext?.myMaxReward !== 0"
                                                style="flex:1; padding: 5px; border-radius: 4px; font-size: 11px; background: #fef3c7; border: 1px solid #f59e0b; cursor: pointer;"
                                                x-on:click="openRewardModal(userInfo.username)">💰 奖励金币
                                        </button>
                                    @endif
                                </div>
                            </div>
                        @endif

                        @if ($hasPositionActions)
                            <div>
                                <div style="font-size: 10px; color: #9ca3af; margin-bottom: 4px; padding-left: 2px;">
                                    职务操作
                                </div>
                                <div style="display: flex; gap: 6px; flex-wrap: wrap;">
                                    <template x-if="!userInfo.position_name">
                                        <button x-on:click="showAppointPanel = !showAppointPanel"
                                                style="flex:1; padding: 5px; border-radius: 4px; font-size: 11px; background: #f3e8ff; border: 1px solid #a855f7; cursor: pointer;">
                                            ✨
                                            任命职务
                                        </button>
                                    </template>
                                    <template x-if="userInfo.position_name">
                                        <button x-on:click="doRevoke()" :disabled="appointLoading"
                                                style="flex:1; padding: 5px; border-radius: 4px; font-size: 11px; background: #fef9c3; border: 1px solid #eab308; cursor: pointer;">
                                            🔧
                                            撤销职务
                                        </button>
                                    </template>
                                </div>
                                <div x-show="showAppointPanel" x-transition
                                     style="display:none; margin-top:8px; padding:10px; background:#faf5ff; border:1px solid #d8b4fe; border-radius:6px;">
                                    <div style="font-size:11px; color:#7c3aed; margin-bottom:6px;">选择职务：</div>
                                    <select x-model.number="selectedPositionId"
                                            style="width:100%; padding:4px; border:1px solid #c4b5fd; border-radius:4px; font-size:11px; margin-bottom:6px;">
                                        <template x-for="p in appointPositions" :key="p.id">
                                            <option :value="p.id"
                                                    x-text="(p.icon?p.icon+' ':'')+p.department+' · '+p.name"></option>
                                        </template>
                                    </select>
                                    <input type="text" x-model="appointRemark" placeholder="备注（如任命原因）"
                                           style="width:100%; padding:4px; border:1px solid #c4b5fd; border-radius:4px; font-size:11px; box-sizing:border-box; margin-bottom:6px;">
                                    <div style="display:flex; gap:6px;">
                                        <button x-on:click="doAppoint()"
                                                :disabled="appointLoading || !selectedPositionId"
                                                style="flex:1; padding:5px; background:#7c3aed; color:#fff; border:none; border-radius:4px; font-size:11px; cursor:pointer;">
                                            <span x-text="appointLoading?'处理中...':'✅ 确认任命'"></span>
                                        </button>
                                        <button x-on:click="showAppointPanel=false"
                                                style="padding:5px 10px; background:#fff; border:1px solid #ccc; border-radius:4px; font-size:11px; cursor:pointer;">
                                            取消
                                        </button>
                                    </div>
                                </div>
                            </div>
                        @endif

                    </div>{{-- /折叠内容 --}}

                    {{-- 禁言输入表单 --}}
                    <div x-show="isMuting" style="display:none; margin-top:6px;">
                        <div style="display:flex; gap:6px; align-items:center;">
                            <input type="number" x-model="muteDuration" min="1" max="1440"
                                   placeholder="分钟"
                                   style="width:60px; padding:4px; border:1px solid #ccc; border-radius:3px; font-size:11px;">
                            <span style="font-size:11px; color:#b86e00;">分钟</span>
                            <button x-on:click="muteUser()"
                                    style="padding:4px 12px; background:#6366f1; color:#fff; border:none; border-radius:3px; font-size:11px; cursor:pointer;">
                                执行
                            </button>
                        </div>
                    </div>

                </div>
            @endif

            {{-- 私信记录展示区（管理员查看） --}}
            <div x-show="showWhispers"
                 style="display: none; padding: 0 16px 12px; max-height: 200px; overflow-y: auto;">
                <div style="font-size: 11px; color: #666; margin-bottom: 4px;"
                     x-text="'最近 ' + whisperList.length + ' 条悄悄话：'"></div>
                <template x-for="w in whisperList" :key="w.id">
                    <div style="font-size: 11px; padding: 3px 0; border-bottom: 1px solid #f0f0f0;">
                        <span style="color: #6366f1;" x-text="w.from_user"></span>
                        → <span style="color: #059669;" x-text="w.to_user"></span>：
                        <span x-text="w.content"></span>
                        <span style="color: #aaa; font-size: 10px;" x-text="'(' + w.sent_at + ')'"></span>
                    </div>
                </template>
                <div x-show="whisperList.length === 0" style="font-size: 11px; color: #aaa;">暂无悄悄话记录</div>
            </div>
        </div>
    </div>

    {{-- 头像原图全屏大图预览灯箱 --}}
    <template x-if="userInfo">
        <div x-show="showOriginalLightbox"
             style="display: none; z-index: 10000; background: rgba(0,0,0,0.85); backdrop-filter: blur(5px);"
             class="modal-overlay" x-on:click.self="showOriginalLightbox = false" x-transition.opacity>
            <div
                style="position: absolute; top: 20px; right: 26px; color: rgba(255,255,255,0.7); font-size: 36px; cursor: pointer; transition: color 0.2s;"
                x-on:click="showOriginalLightbox = false" onmouseover="this.style.color='white'"
                onmouseout="this.style.color='rgba(255,255,255,0.7)'">&times;
            </div>
            <img
                :src="userInfo.headface_original ? userInfo.headface_original : ((userInfo.headface || '1.gif').startsWith('storage/') ? '/' + (userInfo.headface || '1.gif') : '/images/headface/' + (userInfo.headface || '1.gif'))"
                style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 90vw; max-height: 90vh; object-fit: contain; border-radius: 8px; box-shadow: 0 10px 40px rgba(0,0,0,0.5);">
        </div>
    </template>
</div>

{{-- ═══════════ 奖励金币独立弹窗 ═══════════ --}}
<div id="reward-modal-container" x-data="{
    show: false,
    targetUsername: '',
    amount: '',
    sending: false,
    loading: false,
    quota: { max_once: null, daily_limit: null, today_sent: 0, daily_remaining: null, recent_rewards: [] },

    fmt(v) {
        if (v === null) return '不限';
        if (v === 0) return '—';
        return v.toLocaleString() + ' 金币';
    },

    closeRelatedModals() {
        this.show = false;
        const userModalElement = document.getElementById('user-modal-container');
        if (!window.Alpine || !userModalElement) return;
        const userModalData = window.Alpine.$data(userModalElement);
        if (!userModalData) return;
        userModalData.showUserModal = false;
    },

    async open(username) {
        this.targetUsername = username;
        this.amount = '';
        this.sending = false;
        this.loading = true;
        this.show = true;
        try {
            const res = await fetch(window.chatContext.rewardQuotaUrl, {
                headers: { 'Accept': 'application/json' }
            });
            this.quota = await res.json();
            if (!this.quota.recent_rewards) this.quota.recent_rewards = [];
        } catch { this.quota = { max_once: null, daily_limit: null, today_sent: 0, daily_remaining: null, recent_rewards: [] }; }
        this.loading = false;
    },

    async send() {
        if (this.sending) return;
        const amt = parseInt(this.amount, 10);
        if (!amt || amt <= 0) { window.chatDialog.alert('请输入有效金额', '提示', '#f59e0b'); return; }
        const maxOnce = window.chatContext?.myMaxReward;
        if (maxOnce === 0) { window.chatDialog.alert('你的职务没有奖励发放权限', '无权限', '#cc4444'); return; }
        if (maxOnce > 0 && amt > maxOnce) { window.chatDialog.alert('超出单次上限 ' + maxOnce + ' 金币', '超出上限', '#cc4444'); return; }
        this.sending = true;
        try {
            const res = await fetch(window.chatContext.rewardUrl, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name=csrf-token]')?.content || '',
                    'Accept': 'application/json',
                },
                body: JSON.stringify({ username: this.targetUsername, room_id: window.chatContext.roomId, amount: amt }),
            });
            const data = await res.json();
            if (data.status === 'success') {
                this.quota.today_sent += amt;
                if (this.quota.daily_remaining !== null) {
                    this.quota.daily_remaining = Math.max(0, this.quota.daily_remaining - amt);
                }
                // 在历史记录头部插入
                const now = new Date();
                const mm = String(now.getMonth() + 1).padStart(2, '0');
                const dd = String(now.getDate()).padStart(2, '0');
                const hh = String(now.getHours()).padStart(2, '0');
                const mi = String(now.getMinutes()).padStart(2, '0');
                this.quota.recent_rewards.unshift({ target: this.targetUsername, amount: amt, created_at: mm + '-' + dd + ' ' + hh + ':' + mi });
                if (this.quota.recent_rewards.length > 10) this.quota.recent_rewards.pop();
                this.amount = '';
                this.closeRelatedModals();
                window.chatDialog.alert(data.message, '🎉 奖励发放成功', '#d97706');
            } else {
                window.chatDialog.alert(data.message || '发放失败', '操作失败', '#cc4444');
            }
        } catch { window.chatDialog.alert('网络异常，请稍后重试', '错误', '#cc4444'); }
        this.sending = false;
    }
}">
    <div x-show="show" style="display:none; position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:9900;"
         x-on:click.self="show = false">
        <div x-show="show"
             style="display:none; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
                   width:440px; max-width:95vw;
                   background: linear-gradient(135deg, #f59e0b, #ea580c, #c2410c);
                   border-radius: 20px; padding: 28px 36px;
                   box-shadow: 0 20px 60px rgba(0,0,0,0.4);
                   border: 2px solid rgba(255,255,255,0.25); backdrop-filter: blur(8px);
                   text-align: center; color: #fff;">

            {{-- 顶部图标与标题 --}}
            <div style="font-size:44px; margin-bottom:8px; text-shadow:0 4px 8px rgba(0,0,0,0.2);">💰</div>
            <div style="color:#fde68a; font-size:13px; font-weight:bold; letter-spacing:3px; margin-bottom:12px;">
                ══ 发放奖励金币 ══
            </div>
            <div
                style="color:white; font-size:20px; font-weight:900; text-shadow:0 2px 8px rgba(0,0,0,0.3); margin-bottom:20px;">
                发给：<span x-text="targetUsername"></span>
            </div>

            {{-- 额度四格 --}}
            <div x-show="loading" style="color:rgba(255,255,255,0.8); font-size:12px; padding:12px 0;">
                加载额度信息…
            </div>
            <div x-show="!loading">
                <div style="display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:20px;">
                    <div
                        style="background:rgba(255,255,255,0.15); border:1px solid rgba(255,255,255,0.2); border-radius:10px; padding:10px 4px;">
                        <div style="font-size:10px; color:rgba(255,255,255,0.7); margin-bottom:4px;">单次上限</div>
                        <div style="font-size:13px; font-weight:bold; color:#fff;" x-text="fmt(quota.max_once)"></div>
                    </div>
                    <div
                        style="background:rgba(255,255,255,0.15); border:1px solid rgba(255,255,255,0.2); border-radius:10px; padding:10px 4px;">
                        <div style="font-size:10px; color:rgba(255,255,255,0.7); margin-bottom:4px;">单日上限</div>
                        <div style="font-size:13px; font-weight:bold; color:#fff;"
                             x-text="fmt(quota.daily_limit)"></div>
                    </div>
                    <div
                        style="background:rgba(20,184,166,0.25); border:1px solid rgba(255,255,255,0.3); border-radius:10px; padding:10px 4px;">
                        <div style="font-size:10px; color:#a7f3d0; margin-bottom:4px;">今日已发</div>
                        <div style="font-size:13px; font-weight:bold; color:#fff;"
                             x-text="quota.today_sent.toLocaleString()"></div>
                    </div>
                    <div
                        style="background:rgba(20,184,166,0.25); border:1px solid rgba(255,255,255,0.3); border-radius:10px; padding:10px 4px;">
                        <div style="font-size:10px; color:#a7f3d0; margin-bottom:4px;">剩余额度</div>
                        <div style="font-size:13px; font-weight:bold; color:#fff;"
                             x-text="fmt(quota.daily_remaining)"></div>
                    </div>
                </div>
            </div>

            {{-- 输入区 --}}
            <div style="margin-bottom:18px;">
                <input type="number" x-model.number="amount"
                       :placeholder="quota.max_once ? '最多 ' + quota.max_once + ' 金币' : '请输入发放金额'"
                       :max="quota.max_once || 999999" min="1" x-on:keydown.enter="send()"
                       style="width:100%; padding:14px; border:none; border-radius:12px;
                           background:rgba(255,255,255,0.95); font-size:16px; color:#9a3412;
                           font-weight:bold; text-align:center; outline:none;
                           box-shadow:inset 0 2px 6px rgba(0,0,0,0.1);">
                <div style="margin-top:10px; font-size:11px; color:rgba(255,255,255,0.6);">
                    金币凭空产生并直接发放给对方，本操作记入你的履职记录。
                </div>
            </div>

            {{-- 操作按钮 --}}
            <div style="display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,0.85fr); gap:12px; width:min(100%, 360px); margin:0 auto 22px;">
                <button x-on:click="send()"
                        style="background: linear-gradient(135deg, #fef08a, #facc15 48%, #f59e0b); color:#7c2d12;
                           border:2px solid rgba(255,255,255,0.5); border-radius:14px;
                           padding:14px 22px; min-height:56px; font-size:18px; font-weight:900; letter-spacing:1px; cursor:pointer;
                           box-shadow: 0 14px 28px rgba(124,45,18,0.35), inset 0 1px 0 rgba(255,255,255,0.45);
                           transition:transform .12s, box-shadow .12s, opacity .12s, filter .12s;"
                        :style="(sending || !amount) ? 'opacity: 0.45; cursor: not-allowed; box-shadow: none; filter: grayscale(0.15);' : ''"
                        :disabled="sending || !amount"
                        onmouseover="if(!this.disabled) { this.style.transform='translateY(-3px) scale(1.01)'; this.style.boxShadow='0 18px 34px rgba(124,45,18,0.42), inset 0 1px 0 rgba(255,255,255,0.55)'; }"
                        onmouseout="if(!this.disabled) { this.style.transform=''; this.style.boxShadow='0 14px 28px rgba(124,45,18,0.35), inset 0 1px 0 rgba(255,255,255,0.45)'; }"
                        onmousedown="if(!this.disabled) this.style.transform='translateY(1px)'"
                        onmouseup="if(!this.disabled) { this.style.transform=''; this.style.boxShadow='0 14px 28px rgba(124,45,18,0.35), inset 0 1px 0 rgba(255,255,255,0.45)'; }">
                    <span x-text="sending ? '⏳ 发放中…' : '💰 立即发放'"></span>
                </button>
                <button x-on:click="show = false"
                        style="background:rgba(124,45,18,0.22); color:rgba(255,255,255,0.96); border:1px solid rgba(255,255,255,0.16); border-radius:14px;
                           padding:12px 18px; min-height:56px; font-size:15px; font-weight:800; cursor:pointer;
                           box-shadow:0 10px 20px rgba(0,0,0,0.18); transition:background .15s, transform .12s, opacity .12s;"
                        onmouseover="this.style.background='rgba(124,45,18,0.34)';this.style.transform='translateY(-1px)'"
                        onmouseout="this.style.background='rgba(124,45,18,0.22)';this.style.transform=''"
                        onmousedown="this.style.transform='translateY(1px)'"
                        onmouseup="this.style.transform=''">
                        取消
                </button>
            </div>

            {{-- 最近 10 条记录 --}}
            <div style="background:rgba(0,0,0,0.15); border-radius:12px; padding:12px 14px; text-align:left;">
                <div
                    style="color:rgba(255,255,255,0.7); font-size:11px; font-weight:bold; margin-bottom:8px; display:flex; align-items:center; justify-content:space-between;">
                    <span>📋 最近发放记录</span>
                    <span x-show="loading">加载中…</span>
                </div>
                <div x-show="!loading && quota.recent_rewards.length === 0"
                     style="font-size:12px; color:rgba(255,255,255,0.5); text-align:center; padding:10px 0;">
                    暂无发放记录
                </div>
                <div x-show="!loading"
                     style="max-height:120px; overflow-y:auto; display:flex; flex-direction:column; gap:6px; padding-right:4px;">
                    <template x-for="(r, i) in quota.recent_rewards" :key="i">
                        <div style="display:flex; align-items:center; justify-content:space-between;
                                    padding:6px 10px; border-radius:8px; background:rgba(255,255,255,0.1);">
                            <span style="font-size:12px; color:#fff;" x-text="r.target"></span>
                            <span style="font-size:12px; font-weight:bold; color:#fde68a;"
                                  x-text="'+' + r.amount.toLocaleString()"></span>
                            <span style="font-size:10px; color:rgba(255,255,255,0.5);" x-text="r.created_at"></span>
                        </div>
                    </template>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    /**
     * openRewardModal - 全局入口：打开奖励金币独立弹窗
     * @param {string} username  被奖励用户名
     */
    function openRewardModal(username) {
        const el = document.getElementById('reward-modal-container');
        if (!window.Alpine || !el) return;
        const data = window.Alpine.$data(el);
        if (data) {
            data.open(username);
        }
    }
</script>

{{-- ═══════════ 好友系统通知监听 ═══════════ --}}
{{-- 监听好友 WebSocket 事件，与好友操作逻辑集中在同一文件维护 --}}
<script>
    // ── 好友系统私有频道监听（仅本人可见） ────────────────
    /**
     * 监听当前用户的私有频道 `user.{id}`，
     * 收到 FriendAdded / FriendRemoved 事件时用弹窗通知。
     * FriendAdded   → 居中大卡弹窗（chatBanner 风格）
     * FriendRemoved → 右下角 Toast 通知
     */
    function setupFriendNotification() {
        if (!window.Echo || !window.chatContext) {
            setTimeout(setupFriendNotification, 500);
            return;
        }
        const myId = window.chatContext.userId;
        window.Echo.private(`user.${myId}`)
            .listen('.FriendAdded', (e) => {
                showFriendBanner(e.from_username, e.has_added_back);
            })
            .listen('.FriendRemoved', (e) => {
                if (e.had_added_back) {
                    window.chatToast.show({
                        title: '好友通知',
                        message: `<b>${e.from_username}</b> 已将你从好友列表移除。<br><span style="color:#6b7280; font-size:12px;">你的好友列表中仍保留对方，可点击同步移除。</span>`,
                        icon: '👥',
                        color: '#6b7280',
                        duration: 10000,
                        action: {
                            label: `🗑️ 同步移除 ${e.from_username}`,
                            onClick: async () => {
                                const url = `/friend/${encodeURIComponent(e.from_username)}/remove`;
                                const csrf = document.querySelector('meta[name="csrf-token"]')
                                    ?.content ?? '';
                                await fetch(url, {
                                    method: 'DELETE',
                                    headers: {
                                        'Content-Type': 'application/json',
                                        'X-CSRF-TOKEN': csrf,
                                        'Accept': 'application/json'
                                    },
                                    body: JSON.stringify({
                                        room_id: window.chatContext?.roomId
                                    }),
                                });
                            }
                        },
                    });
                } else {
                    window.chatToast.show({
                        title: '好友通知',
                        message: `<b>${e.from_username}</b> 已将你从他的好友列表移除。`,
                        icon: '👥',
                        color: '#9ca3af',
                    });
                }
            });
    }

    document.addEventListener('DOMContentLoaded', setupFriendNotification);

    // ── BannerNotification：通用大卡片通知监听 ──────────────────
    /**
     * 监听 BannerNotification 事件，渲染 chatBanner 大卡片。
     * 支持私有用户频道（单推）和房间频道（全员推送）。
     *
     * 安全说明：BannerNotification 仅由后端可信代码 broadcast，
     * 私有频道需鉴权，presence 频道需加入房间，均须服务端验证身份。
     */
    function setupBannerNotification() {
        if (!window.Echo || !window.chatContext) {
            setTimeout(setupBannerNotification, 500);
            return;
        }
        const myId = window.chatContext.userId;
        const roomId = window.chatContext.roomId;

        // 监听私有用户频道（单独推给某人）
        window.Echo.private(`user.${myId}`)
            .listen('.BannerNotification', (e) => {
                if (e.options && typeof e.options === 'object') {
                    window.chatBanner.show(e.options);
                }
            });

        // 监听房间频道（推给房间所有人）
        if (roomId) {
            window.Echo.join(`room.${roomId}`)
                .listen('.BannerNotification', (e) => {
                    if (e.options && typeof e.options === 'object') {
                        window.chatBanner.show(e.options);
                    }
                });
        }
    }

    document.addEventListener('DOMContentLoaded', setupBannerNotification);

    /**
     * 显示好友添加居中大卡弹窗（使用 chatBanner 公共组件）。
     * 互相好友 → 绿色渐变 + 互为好友文案
     * 单向添加 → 蓝绿渐变 + 提示回加 + [➕ 回加好友] 按钮
     *
     * @param {string}  fromUsername   添加者用户名
     * @param {boolean} hasAddedBack   接收方是否已将添加者加为好友
     */
    function showFriendBanner(fromUsername, hasAddedBack) {
        if (hasAddedBack) {
            window.chatBanner.show({
                id: 'friend-banner',
                icon: '🎉💚🎉',
                title: '好友通知',
                name: fromUsername,
                body: '将你加为好友了！',
                sub: '<strong style="color:#a7f3d0;">你们现在互为好友 🎊</strong>',
                gradient: ['#065f46', '#059669', '#10b981'],
                titleColor: '#a7f3d0',
                autoClose: 5000,
            });
        } else {
            window.chatBanner.show({
                id: 'friend-banner',
                icon: '💚📩',
                title: '好友申请',
                name: fromUsername,
                body: '将你加为好友了！',
                sub: '但你还没有回加对方为好友',
                gradient: ['#1e3a5f', '#1d4ed8', '#0891b2'],
                titleColor: '#bae6fd',
                autoClose: 0,
                buttons: [{
                    label: '➕ 回加好友',
                    color: '#10b981',
                    onClick: async (btn, close) => {
                        await quickFriendAction('add', fromUsername, btn);
                        if (btn.textContent.startsWith('✅')) {
                            setTimeout(close, 1500);
                        }
                    },
                },
                    {
                        label: '稍后再说',
                        color: 'rgba(255,255,255,0.15)',
                        onClick: (btn, close) => close(),
                    },
                ],
            });
        }
    }

    /**
     * 聊天区悄悄话内嵌链接的快捷好友操作。
     * 由后端生成的 onclick="quickFriendAction('add'/'remove', username, this)" 调用。
     *
     * @param {string}      act      'add' | 'remove'
     * @param {string}      username 目标用户名
     * @param {HTMLElement} el       被点击的 <a> 元素，用于更新显示状态
     */
    window.quickFriendAction = async function (act, username, el) {
        if (el.dataset.done) {
            return;
        }
        el.dataset.done = '1';

        el.textContent = '处理中…';
        el.style.pointerEvents = 'none';

        try {
            const method = act === 'add' ? 'POST' : 'DELETE';
            const url = `/friend/${encodeURIComponent(username)}/${act === 'add' ? 'add' : 'remove'}`;
            const csrf = document.querySelector('meta[name="csrf-token"]')?.content ?? '';
            const res = await fetch(url, {
                method,
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': csrf,
                    'Accept': 'application/json',
                },
                body: JSON.stringify({
                    room_id: window.chatContext?.roomId
                }),
            });
            const data = await res.json();
            if (data.status === 'success') {
                el.textContent = act === 'add' ? '✅ 已回加' : '✅ 已移除';
                el.style.color = '#16a34a';
                el.style.textDecoration = 'none';
            } else {
                el.textContent = '❌ ' + (data.message || '操作失败');
                el.style.color = '#cc4444';
            }
        } catch (e) {
            el.textContent = '❌ 网络错误';
            el.style.color = '#cc4444';
            delete el.dataset.done;
            el.style.pointerEvents = '';
        }
    };
</script>