{{--
    文件功能：百家乐前台弹窗组件

    聊天室内百家乐游戏面板：
    - 监听 WebSocket baccarat.opened 事件触发弹窗
    - 倒计时下注（大/小/豹子）
    - 监听 baccarat.settled 展示骰子动画 + 结果 + 个人赔付
    - 展示近10局历史趋势
--}}

{{-- 百家乐主面板 --}}
<div id="baccarat-panel" x-data="baccaratPanel()" x-show="show" x-cloak>
    <div x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 scale-95"
        x-transition:enter-end="opacity-100 scale-100" x-transition:leave="transition ease-in duration-200"
        x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-95"
        @click.self="close()"
        style="position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:9940;
                display:flex; align-items:center; justify-content:center;">

        <div
            style="width:460px; max-width:96vw; border-radius:8px; overflow:hidden;
                    box-shadow:0 8px 32px rgba(0,0,0,.3); font-family:'Microsoft YaHei',SimSun,sans-serif; background:#fff;">

            {{-- ─── 顶部标题 ─── --}}
            <div
                style="background:linear-gradient(135deg,#336699,#5a8fc0); padding:10px 16px;
                        display:flex; align-items:center; justify-content:space-between;">
                <div style="flex: 1;">
                    <div style="color:#fff; font-weight:bold; font-size:14px;">🎲 百家乐</div>
                    <div style="color:rgba(255,255,255,.75); font-size:11px; margin-top:1px;">
                        <span x-show="roundId">第 <span x-text="'#' + roundId"></span> 局</span>
                        <span x-show="!roundId" style="display:none;">等待开局中</span>
                    </div>
                </div>
                {{-- 金币余额 --}}
                <div
                    style="font-size:12px; color:#d0e8ff; display:flex; align-items:center; gap:3px; margin-right: 12px;
                            background:rgba(0,0,0,.2); padding:2px 8px; border-radius:10px;">
                    💰 <strong style="color:#ffe082; font-size:13px;" x-text="Number(window.chatContext?.userJjb || 0).toLocaleString()">--</strong> 金币
                </div>
                {{-- 倒计时 --}}
                <div x-show="phase === 'betting'" style="text-align:center;">
                    <div style="color:#fbbf24; font-size:28px; font-weight:900; line-height:1;" x-text="countdown">
                    </div>
                    <div style="color:rgba(255,255,255,.7); font-size:11px;">秒后截止</div>
                </div>
                {{-- 骰子结果 --}}
                <div x-show="phase === 'settled'" style="display:none; text-align:center;">
                    <div style="font-size:24px;" x-text="diceEmoji"></div>
                    <div style="color:#fbbf24; font-size:12px; font-weight:bold; margin-top:2px;" x-text="resultLabel">
                    </div>
                </div>
                <div x-show="phase === 'idle'" style="display:none; text-align:center;">
                    <div style="color:#dbeafe; font-size:11px; letter-spacing:3px;">未开始</div>
                </div>
            </div>

            {{-- 进度条 --}}
            <div x-show="phase === 'betting'" style="height:3px; background:rgba(255,255,255,.2);">
                <div style="height:100%; background:#fbbf24; transition:width 1s linear;"
                    :style="'width:' + Math.max(0, (countdown / totalSeconds * 100)) + '%'"></div>
            </div>

            {{-- ─── 历史趋势 ─── --}}
            <div
                style="background:#f0f6ff; padding:7px 14px; display:flex; gap:5px; align-items:center;
                        flex-wrap:wrap; border-bottom:1px solid #d0e4f5;">
                <span style="color:#99b0cc; font-size:11px; margin-right:2px;">近期</span>
                <template x-for="h in history" :key="h.id">
                    <span
                        style="width:22px; height:22px; border-radius:50%; font-size:11px; font-weight:bold;
                                 display:flex; align-items:center; justify-content:center; color:#fff;"
                        :style="h.result === 'big' ? 'background:#1d4ed8' :
                            h.result === 'small' ? 'background:#d97706' :
                            h.result === 'triple' ? 'background:#7c3aed' :
                            'background:#94a3b8'"
                        :title="'#' + h.id + ' ' + (h.result === 'big' ? '大' : h.result === 'small' ? '小' : h
                            .result === 'triple' ? '豹' : '☠')"
                        x-text="h.result === 'big' ? '大' : h.result === 'small' ? '小' : h.result === 'triple' ? '豹' : '☠'">
                    </span>
                </template>
                <span x-show="history.length === 0" style="color:#b0c4d8; font-size:11px;">暂无记录</span>
            </div>

            {{-- ─── 主体内容（白底） ─── --}}
            <div style="background:#fff; padding:14px 16px;">

                {{-- 未开局状态 --}}
                <div x-show="phase === 'idle'" style="display:none; text-align:center; padding:34px 12px 28px;">
                    <div
                        style="width:74px; height:74px; margin:0 auto 16px; border-radius:22px;
                                display:flex; align-items:center; justify-content:center;
                                background:linear-gradient(145deg,#eff6ff,#dbeafe);
                                border:1px solid #bfdbfe; box-shadow:0 10px 24px rgba(59,130,246,.16);">
                        <span style="font-size:34px;">🎲</span>
                    </div>
                    <div style="color:#1e3a5f; font-size:20px; font-weight:900; letter-spacing:1px;">游戏还没开启</div>
                    <div style="color:#7b93ad; font-size:13px; line-height:1.7; margin-top:10px;">
                        当前暂无进行中的百家乐局次
                        <br>
                        请等待系统开局后再来下注
                    </div>
                </div>

                {{-- 押注阶段 --}}
                <div x-show="phase === 'betting'">

                    {{-- 已下注后显示押注人数统计（未下注时隐藏，以免和下方按钮重复） --}}
                    <div x-show="myBet">
                        <div style="display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; margin-bottom:12px;">
                            <div style="background:#eff6ff; border:1px solid #bfdbfe; border-radius:8px; padding:12px 8px; text-align:center;">
                                <div style="color:#1d4ed8; font-size:13px; font-weight:bold;">
                                    押大
                                    <span x-text="'👤 ' + betCountBig" style="font-size:12px; font-weight:normal; opacity:0.85; margin-left:4px;"></span>
                                </div>
                            </div>
                            <div style="background:#fffbeb; border:1px solid #fde68a; border-radius:8px; padding:12px 8px; text-align:center;">
                                <div style="color:#d97706; font-size:13px; font-weight:bold;">
                                    押小
                                    <span x-text="'👤 ' + betCountSmall" style="font-size:12px; font-weight:normal; opacity:0.85; margin-left:4px;"></span>
                                </div>
                            </div>
                            <div style="background:#f5f3ff; border:1px solid #ddd6fe; border-radius:8px; padding:12px 8px; text-align:center;">
                                <div style="color:#7c3aed; font-size:13px; font-weight:bold;">
                                    押豹子
                                    <span x-text="'👤 ' + betCountTriple" style="font-size:12px; font-weight:normal; opacity:0.85; margin-left:4px;"></span>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- 已下注状态 --}}
                    <div x-show="myBet">
                        <div
                            style="background:#f0fdf4; border:1px solid #86efac; border-radius:10px;
                                    padding:10px 14px; text-align:center; margin-bottom:10px;">
                            <div style="color:#16a34a; font-weight:bold; font-size:13px;">
                                ✅ 已押注「<span x-text="betTypeLabel(myBetType)"></span>」
                                <span x-text="Number(myBetAmount).toLocaleString()"></span> 金币
                            </div>
                            <div style="color:#86a896; font-size:11px; margin-top:3px;">等待开奖中…</div>
                        </div>
                    </div>

                    {{-- 下注表单 --}}
                    <div x-show="!myBet">
                        {{-- 押注选项 --}}
                        <div style="display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; margin-bottom:12px;">
                            {{-- 大 --}}
                            <button x-on:click="selectedType='big'"
                                style="border-radius:10px; padding:12px 0; cursor:pointer; transition:all .15s; font-weight:bold; font-family:inherit;"
                                :style="selectedType === 'big'
                                    ?
                                    'border:2px solid #1d4ed8; background:#1d4ed8; color:#fff; transform:scale(1.05); box-shadow:0 4px 14px rgba(29,78,216,.3);' :
                                    'border:2px solid #bfdbfe; background:#eff6ff; color:#1d4ed8;'">
                                <div style="font-size:22px;">🔵</div>
                                <div style="font-size:13px; margin-top:4px; display:flex; align-items:center; justify-content:center; gap:4px;">
                                    <span>大</span>
                                    <span x-show="betCountBig > 0" x-text="'👤 ' + betCountBig" style="font-size:11px; opacity:0.85; font-weight:normal;"></span>
                                </div>
                                <div style="font-size:10px; margin-top:2px; opacity:.75;">11~17点 • 1:1</div>
                            </button>
                            {{-- 小 --}}
                            <button x-on:click="selectedType='small'"
                                style="border-radius:10px; padding:12px 0; cursor:pointer; transition:all .15s; font-weight:bold; font-family:inherit;"
                                :style="selectedType === 'small'
                                    ?
                                    'border:2px solid #d97706; background:#d97706; color:#fff; transform:scale(1.05); box-shadow:0 4px 14px rgba(217,119,6,.3);' :
                                    'border:2px solid #fde68a; background:#fffbeb; color:#b45309;'">
                                <div style="font-size:22px;">🟡</div>
                                <div style="font-size:13px; margin-top:4px; display:flex; align-items:center; justify-content:center; gap:4px;">
                                    <span>小</span>
                                    <span x-show="betCountSmall > 0" x-text="'👤 ' + betCountSmall" style="font-size:11px; opacity:0.85; font-weight:normal;"></span>
                                </div>
                                <div style="font-size:10px; margin-top:2px; opacity:.75;">4~10点 • 1:1</div>
                            </button>
                            {{-- 豹子 --}}
                            <button x-on:click="selectedType='triple'"
                                style="border-radius:10px; padding:12px 0; cursor:pointer; transition:all .15s; font-weight:bold; font-family:inherit;"
                                :style="selectedType === 'triple'
                                    ?
                                    'border:2px solid #7c3aed; background:#7c3aed; color:#fff; transform:scale(1.05); box-shadow:0 4px 14px rgba(124,58,237,.3);' :
                                    'border:2px solid #ddd6fe; background:#f5f3ff; color:#7c3aed;'">
                                <div style="font-size:22px;">💥</div>
                                <div style="font-size:13px; margin-top:4px; display:flex; align-items:center; justify-content:center; gap:4px;">
                                    <span>豹子</span>
                                    <span x-show="betCountTriple > 0" x-text="'👤 ' + betCountTriple" style="font-size:11px; opacity:0.85; font-weight:normal;"></span>
                                </div>
                                <div style="font-size:10px; margin-top:2px; opacity:.75;">三同 • 1:24</div>
                            </button>
                        </div>

                        {{-- 快捷金额 --}}
                        <div style="display:grid; grid-template-columns:repeat(5,1fr); gap:6px; margin-bottom:10px;">
                            <template x-for="preset in quickBetAmounts" :key="preset">
                                <button x-on:click="betAmount = preset"
                                    style="border-radius:20px; padding:8px 2px; font-size:13px; font-weight:bold;
                                           cursor:pointer; transition:all .15s; font-family:inherit; text-align:center;"
                                    :style="betAmount === preset ?
                                        'background:#336699; color:#fff; border:none; box-shadow:0 3px 10px rgba(51,102,153,.35); transform:translateY(-1px);' :
                                        'background:#fff; color:#336699; border:1.5px solid #c0d8ef;'"
                                    x-text="preset >= 10000 ? (preset/1000)+'k' : (preset >= 1000 ? (preset/1000)+'k' : preset)">
                                </button>
                            </template>
                        </div>

                        {{-- 自定义金额 (带有 id 和 name 防止 Bitwarden 等密码管理插件检索 DOM 时因属性为 null 报错) --}}
                        <input type="number" id="baccarat-bet-amount" name="bet_amount" x-model.number="betAmount" min="100" placeholder="自定义金额"
                            autocomplete="off" data-bwignore="true" data-lpignore="true" data-1p-ignore="true"
                            style="width:100%; background:#f6faff; border:1.5px solid #d0e4f5;
                                   border-radius:8px; padding:8px 12px; color:#225588; font-size:13px;
                                   box-sizing:border-box; margin-bottom:10px;"
                            x-on:focus="$event.target.select()">
                        
                        {{-- 下注按钮 --}}
                        <button x-on:click="submitBet()" :disabled="!roundId || !selectedType || betAmount < 100 || submitting"
                            :style="(!roundId || !selectedType || betAmount < 100 || submitting) ?
                            'display:block; width:100%; border:none; border-radius:12px; padding:13px 0; font-size:14px; font-weight:bold; cursor:not-allowed; transition:all .2s; background:#e0e8f0; color:#99a8b8; box-shadow:none; font-family:inherit;' :
                            'display:block; width:100%; border:none; border-radius:12px; padding:13px 0; font-size:14px; font-weight:bold; cursor:pointer; transition:all .2s; background:linear-gradient(135deg,#336699,#5a8fc0); color:#fff; box-shadow:0 4px 14px rgba(51,102,153,.3); font-family:inherit;'">
                            <span
                                x-text="!roundId ? '尚未开局' : (submitting ? '提交中…' : (!selectedType ? '请先选择大/小/豹子' : '🎲 押注「' + betTypeLabel(selectedType) + '」 ' + Number(betAmount).toLocaleString() + ' 金币'))"></span>
                        </button>
                    </div>

                    {{-- 规则提示 --}}
                    <div style="margin-top:10px; color:#99b0cc; font-size:10px; text-align:center;">
                        ☠️ 3点或18点为庄家收割，全灭无退款。豹子优先于大小判断。
                    </div>
                </div>

                {{-- 等待开奖阶段 --}}
                <div x-show="phase === 'waiting'" style="display:none; text-align:center; padding:20px 0;">
                    <div style="font-size:44px; animation:spin 1s linear infinite; display:inline-block;">🎲</div>
                    <div style="color:#5a8fc0; margin-top:10px; font-weight:bold;">正在摇骰子…</div>
                </div>

                {{-- 结算阶段 --}}
                <div x-show="phase === 'settled'" style="display:none;">

                    {{-- 骰子展示 --}}
                    <div style="display:flex; justify-content:center; gap:10px; margin-bottom:16px;">
                        <template x-for="(d, i) in settledDice" :key="i">
                            <div style="width:56px; height:56px; border-radius:12px; font-weight:900;
                                        display:flex; align-items:center; justify-content:center;
                                        font-size:26px; animation:dice-pop .4s ease-out both;
                                        color:#1e3a5f; background:linear-gradient(145deg,#ffffff,#e8f0fb);
                                        border:1.5px solid #d0e4f5; box-shadow:0 4px 14px rgba(51,102,153,.12);"
                                :style="'animation-delay:' + (i * 0.18) + 's'" x-text="d">
                            </div>
                        </template>
                    </div>

                    {{-- 结果标签 --}}
                    <div style="text-align:center; margin-bottom:14px;">
                        <div style="font-size:24px; font-weight:900; letter-spacing:2px;"
                            :style="settledResult === 'big' ? 'color:#1d4ed8' :
                                settledResult === 'small' ? 'color:#d97706' :
                                settledResult === 'triple' ? 'color:#7c3aed' :
                                settledResult === 'kill' ? 'color:#dc2626' : 'color:#336699'"
                            x-text="resultLabel"></div>
                        <div style="color:#99b0cc; font-size:12px; margin-top:4px;"
                            x-text="'骰子总点数：' + settledTotal + ' 点'"></div>
                    </div>

                    {{-- 个人结果卡片 --}}
                    <div x-show="myBet">
                        {{-- 中奖 --}}
                        <div x-show="myWon"
                            style="border-radius:12px; overflow:hidden; margin-bottom:4px;
                                    background:#f0fdf4; border:1px solid #86efac;">
                            <div style="padding:14px 16px; text-align:center;">
                                <div style="font-size:32px; margin-bottom:4px;">🎉</div>
                                <div style="color:#16a34a; font-size:18px; font-weight:900;">恭喜中奖！</div>
                                <div style="color:#15803d; font-size:24px; font-weight:bold; margin:6px 0;"
                                    x-text="'+' + Number(myPayout).toLocaleString() + ' 💰'"></div>
                                <div style="color:#86a896; font-size:11px;"
                                    x-text="'押「' + betTypeLabel(myBetType) + '」' + Number(myBetAmount).toLocaleString() + ' 金币 → 赢得 ' + Number(myPayout).toLocaleString() + ' 金币'">
                                </div>
                            </div>
                        </div>

                        {{-- 未中奖 --}}
                        <div x-show="!myWon"
                            style="border-radius:12px; overflow:hidden; margin-bottom:4px;
                                    background:#fff5f5; border:1px solid #fecaca;">
                            <div style="padding:14px 16px; text-align:center;">
                                <div style="font-size:28px; margin-bottom:4px;">😔</div>
                                <div style="color:#dc2626; font-size:16px; font-weight:bold; margin-bottom:8px;">本局未中奖
                                </div>
                                <div
                                    style="display:inline-flex; align-items:center; gap:8px;
                                            background:#fef2f2; border-radius:20px; padding:5px 14px; border:1px solid #fecaca;">
                                    <span style="color:#64748b; font-size:12px;">你押了</span>
                                    <span style="font-weight:bold; font-size:13px; color:#d97706;"
                                        x-text="betTypeLabel(myBetType)"></span>
                                    <span style="color:#d0d5db; font-size:11px;">·</span>
                                    <span style="color:#64748b; font-size:12px;">开了</span>
                                    <span style="font-weight:bold; font-size:13px;"
                                        :style="settledResult === 'big' ? 'color:#1d4ed8' :
                                            settledResult === 'small' ? 'color:#d97706' :
                                            settledResult === 'triple' ? 'color:#7c3aed' : 'color:#dc2626'"
                                        x-text="resultLabel"></span>
                                </div>
                                <div style="color:#94a3b8; font-size:11px; margin-top:8px;"
                                    x-text="'损失 ' + Number(myBetAmount).toLocaleString() + ' 金币'"></div>
                            </div>
                        </div>
                    </div>

                    {{-- 未下注但看结果 --}}
                    <div x-show="!myBet" style="text-align:center; color:#99b0cc; font-size:12px; padding:8px 0;">
                        本局未参与下注
                    </div>
                </div>
            </div>

            {{-- 底部关闭 --}}
            <div
                style="background:#fff; border-top:1px solid #d0e4f5; padding:12px 16px; display:flex; flex-direction:column; align-items:center; gap:6px;">
                <button x-on:click="close()"
                    style="padding:10px 48px; min-width:140px; background:#f0f6ff; border:1px solid #b0d0ee; border-radius:12px;
                           font-size:14px; font-weight:bold; color:#336699; cursor:pointer; transition:all .15s; font-family:inherit;"
                    onmouseover="this.style.background='#ddeeff'" onmouseout="this.style.background='#f0f6ff'">
                    关闭
                </button>
                {{-- 结算后显示自动关闭倒计时 --}}
                <div x-show="phase === 'settled' && autoCloseCountdown > 0" style="display:none;
                     color:#b0c4d8; font-size:11px;" x-text="autoCloseCountdown + ' 秒后自动关闭'"></div>
            </div>
        </div>
    </div>
</div>



<script>
    /**
     * 百家乐骨骰悬浮按钮 Alpine 组件（拖动 + localStorage 位置持久化）
     */
    function baccaratFab() {
        const STORAGE_KEY = 'baccarat_fab_pos';
        const saved = JSON.parse(localStorage.getItem(STORAGE_KEY) || 'null');
        return {
            visible: false,
            posX: saved?.x ?? 18,
            posY: saved?.y ?? 90,
            dragging: false,
            _startX: 0,
            _startY: 0,
            _origX: 0,
            _origY: 0,
            _moved: false,

            startDrag(e) {
                this.dragging = true;
                this._moved = false;
                this._startX = e.clientX;
                this._startY = e.clientY;
                this._origX = this.posX;
                this._origY = this.posY;
                e.currentTarget.setPointerCapture?.(e.pointerId);
            },

            onDrag(e) {
                if (!this.dragging) return;
                const dx = e.clientX - this._startX;
                const dy = e.clientY - this._startY;
                if (Math.abs(dx) > 3 || Math.abs(dy) > 3) this._moved = true;
                this.posX = Math.max(4, Math.min(window.innerWidth - 60, this._origX - dx));
                this.posY = Math.max(4, Math.min(window.innerHeight - 60, this._origY + dy));
            },

            endDrag(e) {
                if (!this.dragging) return;
                this.dragging = false;
                localStorage.setItem(STORAGE_KEY, JSON.stringify({
                    x: this.posX,
                    y: this.posY
                }));
                if (!this._moved) this.openPanel();
            },

            openPanel() {
                const panel = document.getElementById('baccarat-panel');
                if (!panel) {
                    return;
                }
                const p = Alpine.$data(panel);
                p.show = true;
                p.loadCurrentRound();
                if (p.phase === 'betting' && p.countdown > 0 && !p.countdownTimer) {
                    p.startCountdown();
                }
            },
        };
    }
</script>

<style>
    @keyframes spin {
        to {
            transform: rotate(360deg);
        }
    }

    @keyframes dice-pop {
        0% {
            transform: scale(0) rotate(-20deg);
            opacity: 0;
        }

        70% {
            transform: scale(1.15) rotate(5deg);
        }

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

    @keyframes pulse-fab {

        0%,
        100% {
            box-shadow: 0 4px 20px rgba(51, 102, 153, .4);
        }

        50% {
            box-shadow: 0 4px 30px rgba(51, 102, 153, .8);
        }
    }
</style>

<script>
    /**
     * 百家乐游戏面板 Alpine 组件
     */
    function baccaratPanel() {
        return {
            show: false,
            phase: 'idle', // idle | betting | waiting | settled

            roundId: null,
            totalSeconds: 60,
            countdown: 60,
            countdownTimer: null,

            // 下注池统计
            totalBetBig: 0,
            totalBetSmall: 0,
            totalBetTriple: 0,
            
            // 押注人数统计
            betCountBig: 0,
            betCountSmall: 0,
            betCountTriple: 0,

            // 本人下注
            myBet: false,
            myBetType: '',
            myBetAmount: 0,

            // 下注表单
            selectedType: '',
            betAmount: 100,
            minBet: 100,
            maxBet: 50000,
            submitting: false,

            // 结算结果
            settledDice: [],
            settledTotal: 0,
            settledResult: '',
            resultLabel: '',
            diceEmoji: '',
            myWon: false,
            myPayout: 0,

            // 历史记录
            history: [],

            // 结算后定时自动关闭
            autoCloseTimer: null,
            autoCloseCountdown: 0,

            /**
             * 同步全局聊天上下文中的金币余额，供弹窗右上角与其他面板共用。
             */
            syncUserGold(jjb) {
                if (jjb === undefined || jjb === null) return;
                if (!window.chatContext) return;
                window.chatContext.userJjb = Number(jjb);
                window.chatContext.myGold = Number(jjb);
            },

            /**
             * 获取快捷下注金额数组
             */
            get quickBetAmounts() {
                const min = this.minBet || 100;
                const max = this.maxBet || 50000;
                
                // 预设候选倍数，尽量生成美观的数字
                const candidates = [1, 2, 5, 10, 20, 50, 100, 200, 500, 1000];
                let steps = candidates.map(m => min * m).filter(v => v >= min && v < max);
                steps.push(max);
                steps = [...new Set(steps)].sort((a, b) => a - b);

                if (steps.length >= 5) {
                    // 如果候选值足够多，均匀采样，确保首尾是最小值和最大值
                    return [
                        steps[0],
                        steps[Math.floor((steps.length - 1) * 0.25)],
                        steps[Math.floor((steps.length - 1) * 0.5)],
                        steps[Math.floor((steps.length - 1) * 0.75)],
                        steps[steps.length - 1]
                    ];
                } else {
                    // 如果候选值不足5个（范围太小），通过线性插值补齐
                    while (steps.length < 5) {
                        let maxGap = 0;
                        let insertIdx = -1;
                        for (let i = 0; i < steps.length - 1; i++) {
                            if (steps[i+1] - steps[i] > maxGap) {
                                maxGap = steps[i+1] - steps[i];
                                insertIdx = i;
                            }
                        }
                        if (insertIdx === -1) break;
                        let newVal = Math.floor((steps[insertIdx] + steps[insertIdx+1]) / 2);
                        if (newVal > 100) newVal = Math.floor(newVal / 10) * 10; // 简单取整
                        steps.splice(insertIdx + 1, 0, newVal);
                    }
                    return steps;
                }
            },

            /**
             * 从大厅或通知点击打开
             */
            openFromHall() {
                this.show = true;
                this.loadCurrentRound();
            },

            /**
             * 自动重置为未开局空状态
             */
            setIdleState() {
                clearInterval(this.countdownTimer);
                clearInterval(this.autoCloseTimer);
                this.phase = 'idle';
                this.roundId = null;
                this.countdown = 0;
                this.autoCloseCountdown = 0;
                this.totalBetBig = 0;
                this.totalBetSmall = 0;
                this.totalBetTriple = 0;
                this.betCountBig = 0;
                this.betCountSmall = 0;
                this.betCountTriple = 0;
                this.myBet = false;
                this.myBetType = '';
                this.myBetAmount = 0;
                this.selectedType = '';
                this.settledDice = [];
                this.settledTotal = 0;
                this.settledResult = '';
                this.resultLabel = '';
                this.diceEmoji = '';
                this.myWon = false;
                this.myPayout = 0;
                this.updateFab(false);
            },

            /**
             * 开局：填充局次数据并开始倒计时
             */
            openRound(data) {
                this.phase = 'betting';
                this.roundId = data.round_id;
                this.countdown = data.bet_seconds || 60;
                this.totalSeconds = this.countdown;
                this.myBet = false;
                this.myBetType = '';
                this.myBetAmount = 0;
                this.settledDice = [];
                this.selectedType = '';
                this.betAmount = 100;
                this.betCountBig = 0;
                this.betCountSmall = 0;
                this.betCountTriple = 0;
                this.show = true;

                this.loadCurrentRound();
                this.startCountdown();
                this.updateFab(true);
            },

            /**
             * 从接口获取当前局的状态（我的下注、投注池）
             */
            async loadCurrentRound() {
                try {
                    const res = await fetch('/baccarat/current');
                    const data = await res.json();
                    // 每次打开或刷新局次信息时，都用服务端最新金币覆盖右上角余额。
                    this.syncUserGold(data.jjb);
                    if (data.round && (data.round.seconds_left || 0) > 0) {
                        this.phase = 'betting';
                        this.roundId = data.round.id;
                        this.countdown = data.round.seconds_left || this.countdown || 0;
                        this.totalBetBig = data.round.total_bet_big;
                        this.totalBetSmall = data.round.total_bet_small;
                        this.totalBetTriple = data.round.total_bet_triple;
                        this.betCountBig = data.round.bet_count_big;
                        this.betCountSmall = data.round.bet_count_small;
                        this.betCountTriple = data.round.bet_count_triple;
                        this.minBet = data.round.min_bet || 100;
                        this.maxBet = data.round.max_bet || 50000;
                        if (data.round.my_bet) {
                            this.myBet = true;
                            this.myBetType = data.round.my_bet.bet_type;
                            this.myBetAmount = data.round.my_bet.amount;
                        } else {
                            this.myBet = false;
                            this.myBetType = '';
                            this.myBetAmount = 0;
                        }
                    } else {
                        this.setIdleState();
                    }
                } catch {
                    this.setIdleState();
                }
            },

            /**
             * 启动倒计时
             */
            startCountdown() {
                clearInterval(this.countdownTimer);
                this.countdownTimer = setInterval(() => {
                    this.countdown--;
                    if (this.countdown <= 0) {
                        clearInterval(this.countdownTimer);
                        this.phase = 'waiting';
                    }
                }, 1000);
            },

            /**
             * 提交下注
             */
            async submitBet() {
                if (!this.roundId || !this.selectedType || this.betAmount < 100 || this.submitting) return;
                this.submitting = true;

                try {
                    const res = await fetch('/baccarat/bet', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'Accept': 'application/json',
                            'X-CSRF-TOKEN': document.querySelector('meta[name=csrf-token]')?.content,
                        },
                        body: JSON.stringify({
                            round_id: this.roundId,
                            bet_type: this.selectedType,
                            amount: this.betAmount,
                        }),
                    });
                    const data = await res.json();

                    if (res.ok && data.ok) {
                        this.myBet = true;
                        this.myBetType = data.bet_type;
                        this.myBetAmount = data.amount;
                    } else if (res.status === 422 && data.errors) {
                        // 取出第一条 Laravel 验证失败原因
                        const firstError = Object.values(data.errors)[0][0];
                        window.chatDialog?.alert(firstError, '下注验证失败', '#ef4444');
                    } else {
                        window.chatDialog?.alert(data.message || '下注失败', '提示', '#ef4444');
                    }
                } catch {
                    window.chatDialog?.alert('网络异常，请稍后重试。', '错误', '#ef4444');
                }

                this.submitting = false;
            },

            /**
             * 显示开奖结果动画
             */
            showResult(data) {
                clearInterval(this.countdownTimer);
                this.settledDice = data.dice;
                this.settledTotal = data.total_points;
                this.settledResult = data.result;
                this.resultLabel = data.result_label;
                this.phase = 'settled';
                // 只有本局有押注的用户才弹出结算面板
                if (this.myBet) {
                    this.show = true;
                }

                // 判断本人是否中奖（从后端拿到的 result 与我的下注 type 比较）
                if (this.myBet && this.myBetType === data.result && data.result !== 'kill') {
                    this.myWon = true;
                    // 简单计算前端显示赔付（实际赔付以后端为准）
                    const payoutRate = data.result === 'triple' ? 24 : 1;
                    this.myPayout = this.myBetAmount * (payoutRate + 1);
                } else {
                    this.myWon = false;
                    this.myPayout = 0;
                }

                this.updateFab(false);
                this.loadHistory();

                // 结算后 10 秒自动关闭
                this.autoCloseCountdown = 10;
                clearInterval(this.autoCloseTimer);
                this.autoCloseTimer = setInterval(() => {
                    this.autoCloseCountdown--;
                    if (this.autoCloseCountdown <= 0) {
                        clearInterval(this.autoCloseTimer);
                        this.close();
                    }
                }, 1000);
            },

            /**
             * 加载历史趋势
             */
            async loadHistory() {
                try {
                    const res = await fetch('/baccarat/history');
                    const data = await res.json();
                    this.history = (data.history || []).reverse();
                } catch {}
            },

            /**
             * 更新悬浮按钮显示状态
             */
            updateFab(visible) {
                const fab = document.getElementById('baccarat-fab');
                if (fab) Alpine.$data(fab).visible = visible;
            },

            /**
             * 关闭面板
             */
            close() {
                // 手动关闭时清除自动关闭定时器
                clearInterval(this.autoCloseTimer);
                this.autoCloseCountdown = 0;
                this.show = false;
                if (this.phase === 'betting') {
                    this.updateFab(true); // 还在下注阶段时保留悬浮按钮
                }
            },

            /**
             * 押注类型中文标签
             */
            betTypeLabel(type) {
                return {
                    big: '大',
                    small: '小',
                    triple: '豹子'
                } [type] || '';
            },
        };
    }

    // ─── WebSocket 监听 ──────────────────────────────────────────────

    /** 收到开局事件：弹出押注面板 */
    window.addEventListener('chat:baccarat.opened', (e) => {
        const panel = document.getElementById('baccarat-panel');
        if (panel) Alpine.$data(panel).openRound(e.detail);
    });

    /** 收到结算事件：展示骰子动画和结果 */
    window.addEventListener('chat:baccarat.settled', (e) => {
        const panel = document.getElementById('baccarat-panel');
        if (panel) Alpine.$data(panel).showResult(e.detail);
    });

    /** 收到下注池更新：更新押注人数 */
    window.addEventListener('chat:baccarat.pool_updated', (e) => {
        const panel = document.getElementById('baccarat-panel');
        if (panel) {
            const pd = Alpine.$data(panel);
            const data = e.detail;
            // 判断 round_id 是否一致
            if (pd.roundId === data.round_id) {
                pd.betCountBig = data.bet_count_big;
                pd.betCountSmall = data.bet_count_small;
                pd.betCountTriple = data.bet_count_triple;
            }
        }
    });

    /** 页面空闲时：检查是否有进行中的局，有则自动恢复面板 */
    document.addEventListener('DOMContentLoaded', () => window.deferChatGameBootstrap(async () => {
        try {
            // 先加载历史趋势
            const histRes = await fetch('/baccarat/history');
            const histData = await histRes.json();
            const panel = document.getElementById('baccarat-panel');
            if (panel) {
                Alpine.$data(panel).history = (histData.history || []).reverse();
            }

            // 再检查是否有正在进行的局
            const curRes = await fetch('/baccarat/current');
            const curData = await curRes.json();
            if (panel) {
                Alpine.$data(panel).syncUserGold(curData.jjb);
            }

            if (curData.round && panel) {
                const round = curData.round;
                const seconds = round.seconds_left || 0;
                const panelData = Alpine.$data(panel);

                if (seconds > 0) {
                    // 有进行中的局且还在押注时间内 → 恢复押注面板
                    panelData.phase = 'betting';
                    panelData.roundId = round.id;
                    panelData.totalSeconds = 60; // 服务端配置的窗口
                    panelData.countdown = seconds;
                    panelData.totalBetBig = round.total_bet_big;
                    panelData.totalBetSmall = round.total_bet_small;
                    panelData.totalBetTriple = round.total_bet_triple;
                    panelData.betCountBig = round.bet_count_big;
                    panelData.betCountSmall = round.bet_count_small;
                    panelData.betCountTriple = round.bet_count_triple;

                    if (round.my_bet) {
                        panelData.myBet = true;
                        panelData.myBetType = round.my_bet.bet_type;
                        panelData.myBetAmount = round.my_bet.amount;
                    }

                    // 只显示悬浮按钮，不自动弹出全屏（避免打扰刚进入的用户）
                    panelData.updateFab(true);
                } else {
                    panelData.setIdleState();
                }
            } else if (panel) {
                Alpine.$data(panel).setIdleState();
            }
        } catch (e) {
            console.warn('[百家乐] 初始化失败', e);
        }
    }));
</script>
