{% extends "base.html" %}
{% block title %}遊戲首頁｜{{ app_name }}{% endblock %}
{% block body %}
<header class="topbar">
    <div>
        <div class="site-title">YD GAME DEMO</div>
        <div class="site-subtitle">Python 唯讀 API 測試站點</div>
    </div>
    <div class="member-area">
        <span>用戶：<strong>{{ account.raw_username or username }}</strong></span>
        <span class="status-badge {{ account.status }}">
            {{ "已凍結" if account.status == "locked" else "正常" }}
        </span>
        <form
            method="post"
            action="{{ url_for('logout') }}"
            onsubmit="return window.resetChatwootBeforeLogout ? window.resetChatwootBeforeLogout(this) : true;"
        >
            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
            <button class="logout-button" type="submit">登出</button>
        </form>
    </div>
</header>

<main class="page">
    {% if warning %}
        <div class="alert alert-error">帳戶資料讀取失敗：{{ warning }}</div>
    {% endif %}

    {% if account.status == "locked" %}
        <div class="alert alert-warning">
            <strong>帳戶已凍結</strong>
            {% if account.locked_reason %}｜凍結原因：{{ account.locked_reason }}{% endif %}
        </div>
    {% endif %}

    <section class="hero">
        <div>
            <span class="eyebrow">PYTHON TEST ENVIRONMENT</span>
            <h1>歡迎進入遊戲站點模擬首頁</h1>
            <p>登入會員：{{ account.username_clean or username }}。本頁只用於驗證會員資料、充值、提款與客服 API。</p>
        </div>
        <a class="service-entry" href="{{ url_for('customer_service') }}">
            <span class="service-icon">🎧</span>
            <span><strong>在線客服</strong><small>查詢充值與提款資料</small></span>
        </a>
    </section>

    <section class="account-grid">
        <div class="metric-card"><span>UID</span><strong>{{ account.uid or "NA" }}</strong></div>
        <div class="metric-card"><span>VIP 等級</span><strong>{{ account.vip_level or "NA" }}</strong></div>
        <div class="metric-card"><span>會員餘額</span><strong>{{ account.balance or "0.0000" }}</strong></div>
        <div class="metric-card"><span>凍結餘額</span><strong>{{ account.frozen_balance or "0.0000" }}</strong></div>
    </section>

    <section>
        <div class="section-heading"><h2>熱門遊戲</h2><span>畫面模擬，不執行真實投注</span></div>
        <div class="game-grid">
            {% for game in games %}
                <article class="game-card">
                    <div class="game-icon">{{ game.icon }}</div>
                    <div><h3>{{ game.name }}</h3><p>{{ game.category }}</p></div>
                    <button type="button" disabled>模擬遊戲</button>
                </article>
            {% endfor %}
        </div>
    </section>
</main>
<a class="floating-service" href="{{ url_for('customer_service') }}">🎧 客服</a>
{% endblock %}

{% block integrations %}
{% include "_chatwoot.html" %}
{% endblock %}