{% extends 'base.html' %}
{# SPDX-License-Identifier: GPL-3.0-only — cube client template #}
{% block title %}魔方 · Will's Blog{% endblock %}
{% block main_container %}container-fluid px-0{% endblock %}
{% block main_class %}cube-main{% endblock %}
{% block styles %}<link rel="stylesheet" href="{{ url_for('static', filename='css/cube.css') }}">{% endblock %}
{% block content %}
<div class="cube-page" id="cube-app" data-authenticated="{{ 'true' if current_user.is_authenticated else 'false' }}" data-api="{{ url_for('game.cube') }}/api" data-engine-url="{{ url_for('static', filename='js/cube/engine.js') }}">

    {# 左侧边栏 - 统计与历史 #}
    <aside class="cube-sidebar-left">
        {% if current_user.is_authenticated %}
        <div class="cube-user-card">
            <div class="cube-avatar">{{ current_user.username[0].upper() }}</div>
            <div class="cube-user-name">{{ current_user.username }}</div>
            <div class="cube-user-avg">平均: <strong id="cube-session-mean-top">—</strong></div>
        </div>

        <div class="cube-stats-block">
            <h3 class="cube-sidebar-title">统计数据</h3>
            <div class="cube-stat-row">
                <span class="cube-stat-label">完成次数</span>
                <strong class="cube-stat-value" id="cube-session-count">—</strong>
            </div>
            <div class="cube-stat-row">
                <span class="cube-stat-label">本轮平均</span>
                <strong class="cube-stat-value" id="cube-session-mean">—</strong>
            </div>
            <div class="cube-stat-row">
                <span class="cube-stat-label">最佳单次</span>
                <strong class="cube-stat-value" id="cube-session-best">—</strong>
            </div>
        </div>

        <div class="cube-recent-block">
            <h3 class="cube-sidebar-title">最近记录</h3>
            <div id="cube-history" class="cube-recent-list" aria-live="polite">正在加载…</div>
        </div>

        <div class="cube-leaderboard-block">
            <div class="cube-sidebar-header">
                <h3 class="cube-sidebar-title">全球排行</h3>
                <button type="button" id="cube-refresh" class="cube-icon-button" aria-label="刷新"><i class="bi bi-arrow-clockwise" aria-hidden="true"></i></button>
            </div>
            <p class="cube-sidebar-caption">前 50 名最佳单次</p>
            <div id="cube-leaderboard" class="cube-leaderboard-list" aria-live="polite">正在加载…</div>
        </div>
        {% endif %}
    </aside>

    {# 中间主区 - 计时工作台 #}
    <main class="cube-workspace">
        {# 当前打乱公式 #}
        <section class="cube-scramble-header">
            <div class="cube-scramble-title-row">
                <h2 class="cube-scramble-title">
                    <span class="cube-label">当前打乱</span>
                </h2>
                <div class="cube-scramble-meta">
                    <span class="cube-scramble-status" id="cube-scramble-status"></span>
                    <span class="cube-label"><span id="cube-scramble-total">25</span> 步</span>
                </div>
            </div>
            <ol id="cube-scramble" class="cube-scramble cube-scramble-inline" data-empty="true" aria-label="打乱步骤">
                <li class="cube-scramble-empty">连接魔方后获取打乱</li>
            </ol>
        </section>

        <p id="cube-message" class="cube-message" role="status" aria-live="polite">先连接魔方，再获取本局打乱。</p>

        {# 核心区：魔方视图 + 计时器 #}
        <div class="cube-focus-area">
            {# 魔方 3D 视图 #}
            <div class="cube-view-container">
                <div id="cube-net" class="cube-net" role="group" tabindex="0" aria-label="魔方三维视图" aria-describedby="cube-view-help"></div>
                <div class="cube-view-controls">
                    <span class="cube-view-hint" id="cube-view-help">拖动旋转 · Home 复位</span>
                    <button type="button" id="cube-view-reset" class="cube-text-button"><i class="bi bi-arrow-counterclockwise" aria-hidden="true"></i>重置视角</button>
                </div>
            </div>

            {# 计时器 #}
            <div class="cube-timer-container">
                <span id="cube-phase" class="cube-phase-badge">等待连接</span>
                <output id="cube-timer" class="cube-timer-display" aria-label="还原用时">0.000</output>
                <div class="cube-timer-metrics">
                    <span class="cube-metric"><strong id="cube-moves">0</strong> 步</span>
                    <span class="cube-metric-sep">·</span>
                    <span class="cube-metric"><strong id="cube-tps">0.00</strong> TPS</span>
                </div>
            </div>
        </div>

        {# 控制按钮 #}
        <div class="cube-controls">
            <button type="button" id="cube-new" class="cube-button"><i class="bi bi-shuffle" aria-hidden="true"></i>获取打乱</button>
            <button type="button" id="cube-stop" class="cube-button secondary" disabled><i class="bi bi-x" aria-hidden="true"></i>中止本局</button>
            {% if current_user.is_authenticated %}
            <button type="button" id="cube-retry" class="cube-button" hidden><i class="bi bi-arrow-repeat" aria-hidden="true"></i>重试提交</button>
            {% endif %}
        </div>

        <span id="cube-progress" class="cube-scramble-progress">以连接时的状态为基准，按打乱顺序转动。</span>
    </main>

    {# 右侧边栏 - 设备状态 #}
    <aside class="cube-sidebar-right">
        <div class="cube-device-panel">
            <h3 class="cube-sidebar-title">
                <span class="cube-bluetooth-icon" aria-hidden="true">⌘</span>
                设备状态
            </h3>

            <div class="cube-device-info">
                <div class="cube-connection-indicator">
                    <span class="cube-status-dot" aria-hidden="true"></span>
                    <span class="cube-connection-label">
                        <strong id="cube-device">尚未连接</strong>
                        <span id="cube-battery" class="cube-battery-info"></span>
                    </span>
                </div>
            </div>

            <div class="cube-device-actions">
                <button type="button" id="cube-connect" class="cube-button primary block"><i class="bi bi-bluetooth" aria-hidden="true"></i>连接蓝牙魔方</button>
                <button type="button" id="cube-disconnect" class="cube-button secondary block" disabled><i class="bi bi-plug" aria-hidden="true"></i>断开连接</button>
            </div>
        </div>

        <details class="cube-help-section">
            <summary>设备帮助</summary>
            <div class="cube-help-content">
                <p>兼容 GAN / MG / AiCube 智能魔方。需要支持 Web Bluetooth 的浏览器（桌面 Chrome/Edge 或 Android Chrome）。</p>
                <label for="cube-mac">MAC 地址（可选）</label>
                <input id="cube-mac" type="text" placeholder="AA:BB:CC:DD:EE:FF" maxlength="17" autocomplete="off" spellcheck="false">
                <p class="cube-help-note">自动识别失败时填写。地址仅保存在本地。</p>
                <p>蓝牙驱动来自 <a href="https://github.com/cs0x7f/cstimer" target="_blank" rel="noopener">csTimer</a> · <a href="{{ url_for('static', filename='vendor/cstimer-cube/LICENSE') }}">GPL-3.0</a> · <a href="{{ url_for('static', filename='vendor/cstimer-cube/cube-client-source.zip') }}">源码</a></p>
            </div>
        </details>

        <details class="cube-help-section">
            <summary>规则说明</summary>
            <div class="cube-help-content">
                <ul>
                    <li>{{ '服务端下发随机打乱' if current_user.is_authenticated else '本地生成练习打乱，不计入排行榜' }}，完成后自动准备</li>
                    <li>下一次转动开始计时，还原后自动停表</li>
                    <li>每局最多 10 分钟、2000 步</li>
                    <li>排行榜保留每人最佳单次成绩</li>
                </ul>
            </div>
        </details>
    </aside>

    {% if not current_user.is_authenticated %}
    <a id="cube-login" class="cube-button primary cube-login" href="{{ url_for('auth.login', next=url_for('cube.index')) }}"><i class="bi bi-box-arrow-in-right" aria-hidden="true"></i>登录</a>
    {% endif %}

</div>
{% endblock %}
{% block scripts %}
<script src="{{ url_for('static', filename='js/cube/compat.js') }}"></script>
<script src="{{ url_for('static', filename='vendor/cstimer-cube/sha256.js') }}"></script>
<script src="{{ url_for('static', filename='vendor/cstimer-cube/isaac.js') }}"></script>
<script src="{{ url_for('static', filename='vendor/cstimer-cube/mathlib.js') }}"></script>
<script src="{{ url_for('static', filename='vendor/cstimer-cube/lzstring.js') }}"></script>
<script src="{{ url_for('static', filename='vendor/cstimer-cube/bluetooth.js') }}"></script>
<script src="{{ url_for('static', filename='vendor/cstimer-cube/gancube.js') }}"></script>
<script type="module" src="{{ url_for('static', filename='js/cube/app.js') }}"></script>
{% endblock %}