const PageHome = {
    _el: null,
    _refreshTimer: null,

    init() {
        this._el = document.getElementById('page-home');
    },

    async render() {
        this._el.innerHTML = this._template();
        this._startRefresh();
        await this._refreshCards();
    },

    async _refreshCards() {
        try {
            const status = await API.getStatus();
            this._updateCard('card-server', status.server_running ? '运行中' : '已停止', status.server_running ? 'success' : 'danger');
            this._updateCard('card-telemetry', status.telemetry_running ? '监听中' : '未启动', status.telemetry_running ? 'success' : 'warning');
            this._updateCard('card-game', status.selected_game_id || '未选择', 'info');
            this._updateCard('card-connections', `${status.ws_clients} 个客户端`, status.ws_clients > 0 ? 'success' : 'secondary');
            this._updateCard('card-packets', `${status.packet_count} 包`, status.packet_count > 0 ? 'success' : 'secondary');

            const lastTime = status.last_packet_time;
            if (lastTime > 0) {
                const ago = Math.round((Date.now() / 1000) - lastTime);
                this._updateCard('card-last-packet', `${ago}秒前`, ago < 5 ? 'success' : 'warning');
            } else {
                this._updateCard('card-last-packet', '暂无数据', 'secondary');
            }

            const td = status.latest_data;
            if (td) {
                this._updateCard('card-speed', `${(td.speed_kmh || 0).toFixed(1)} km/h`, 'primary');
                this._updateCard('card-rpm', `${(td.rpm || 0).toFixed(0)} RPM`, 'primary');
                this._updateCard('card-gear', `档位 ${td.gear || 'N'}`, 'primary');
            }
        } catch (e) {
            console.error('Failed to refresh status:', e);
        }
    },

    _updateCard(id, value, type) {
        const el = document.getElementById(id);
        if (!el) return;
        const valEl = el.querySelector('.status-card-value');
        if (valEl) valEl.textContent = value;
        const badgeEl = el.querySelector('.badge');
        if (badgeEl) {
            badgeEl.className = `badge badge-${type}`;
        }
    },

    _startRefresh() {
        if (this._refreshTimer) clearInterval(this._refreshTimer);
        this._refreshTimer = setInterval(() => this._refreshCards(), 2000);
    },

    cleanup() {
        if (this._refreshTimer) {
            clearInterval(this._refreshTimer);
            this._refreshTimer = null;
        }
    },

    _template() {
        return `
        <div class="animated">
            <h2 style="font-size:24px;font-weight:700;margin-bottom:8px;">系统概览</h2>
            <p style="color:var(--text-secondary);margin-bottom:24px;">实时监控 TurboSu 运行状态与游戏遥测连接</p>
        </div>
        <div class="status-grid animated" style="animation-delay:0.1s">
            ${this._cardHtml('card-server', '服务器状态', '运行中', 'success')}
            ${this._cardHtml('card-telemetry', '遥测监听', '未启动', 'warning')}
            ${this._cardHtml('card-connections', 'WebSocket 连接', '0 个客户端', 'secondary')}
            ${this._cardHtml('card-packets', '数据包接收', '0 包', 'secondary')}
            ${this._cardHtml('card-last-packet', '最后数据包', '暂无数据', 'secondary')}
            ${this._cardHtml('card-game', '当前游戏', '未选择', 'info')}
        </div>
        <div class="status-grid animated" style="animation-delay:0.2s">
            ${this._cardHtml('card-speed', '实时速度', '-- km/h', 'primary')}
            ${this._cardHtml('card-rpm', '实时转速', '-- RPM', 'primary')}
            ${this._cardHtml('card-gear', '当前档位', 'N', 'primary')}
        </div>`;
    },

    _cardHtml(id, title, value, type) {
        return `
        <div class="glass-card status-card" id="${id}">
            <div class="status-card-header">
                <span class="status-card-title">${title}</span>
                <span class="badge badge-${type}">●</span>
            </div>
            <div class="status-card-value">${value}</div>
        </div>`;
    }
};

window.PageHome = PageHome;