const PageSettings = {
    _el: null,

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

    async render() {
        const cfg = await API.getConfig();
        const games = await API.getGames();
        this._el.innerHTML = this._template(cfg, games);
        this._bindEvents();
    },

    _bindEvents() {
        document.getElementById('settings-telemetry-port')?.addEventListener('change', async (e) => {
            await API.updateConfig({ telemetry_port: parseInt(e.target.value) || 20777 });
            Toast.show('遥测端口已更新，重启监听后生效', 'info');
        });

        document.getElementById('settings-restart-telemetry')?.addEventListener('click', async () => {
            await API.stopTelemetry();
            await API.startTelemetry();
            Toast.show('遥测监听已重启', 'success');
        });

        document.getElementById('btn-import-plugin')?.addEventListener('click', () => {
            const input = document.createElement('input');
            input.type = 'file';
            input.accept = '.tsp';
            input.onchange = async (e) => {
                const file = e.target.files[0];
                if (!file) return;
                const formData = new FormData();
                formData.append('file', file);
                try {
                    const res = await fetch('/api/games/install', { method: 'POST', body: formData });
                    const data = await res.json();
                    if (data.ok) { Toast.show('游戏插件安装成功', 'success'); this.render(); }
                    else Toast.show('安装失败', 'error');
                } catch (err) { Toast.show('安装失败', 'error'); }
            };
            input.click();
        });

        document.getElementById('btn-reload-plugins')?.addEventListener('click', async () => {
            await API.reloadGamePlugins();
            Toast.show('插件已重新加载', 'success');
            this.render();
        });

        document.getElementById('settings-game-list')?.addEventListener('click', async (e) => {
            const exportBtn = e.target.closest('.btn-export-plugin');
            const removeBtn = e.target.closest('.btn-remove-plugin');
            if (exportBtn) {
                const pluginId = exportBtn.dataset.pluginId;
                const a = document.createElement('a');
                a.href = `/api/games/${pluginId}/export`;
                a.download = `${pluginId}.tsp`;
                a.click();
                Toast.show('正在下载 .tsp 文件...', 'info');
            }
            if (removeBtn) {
                const pluginId = removeBtn.dataset.pluginId;
                if (confirm('确定移除这个游戏插件？')) {
                    await API.removeGamePlugin(pluginId);
                    Toast.show('插件已移除', 'info');
                    this.render();
                }
            }
        });

        document.getElementById('btn-import-dashboard')?.addEventListener('click', () => {
            const input = document.createElement('input');
            input.type = 'file';
            input.accept = '.tsd';
            input.onchange = async (e) => {
                const file = e.target.files[0];
                if (!file) return;
                const formData = new FormData();
                formData.append('file', file);
                try {
                    const res = await fetch('/api/dashboards/import', { method: 'POST', body: formData });
                    const data = await res.json();
                    if (data.ok) Toast.show('仪表盘导入成功', 'success');
                    else Toast.show('导入失败', 'error');
                } catch (err) { Toast.show('导入失败', 'error'); }
            };
            input.click();
        });
    },

    _gamePluginListHtml(games) {
        if (!games || games.length === 0) {
            return '<p style="color:var(--text-tertiary);font-size:13px;">暂无游戏插件</p>';
        }
        return games.map(g => `
            <div class="glass-card" style="padding:16px;margin-bottom:10px;display:flex;align-items:center;justify-content:space-between;">
                <div>
                    <div style="font-weight:600;">${g.name}</div>
                    <div style="font-size:12px;color:var(--text-tertiary);">
                        ${g.description || ''} | v${g.version} | ${g.author || ''}
                        <span class="badge ${g.is_builtin ? 'badge-info' : 'badge-success'}" style="margin-left:6px;">
                            ${g.is_builtin ? '内置' : '社区'}
                        </span>
                    </div>
                </div>
                <div style="display:flex;gap:6px;">
                    <button class="btn btn-sm btn-secondary btn-export-plugin" data-plugin-id="${g.id}">导出 .tsp</button>
                    ${!g.is_builtin ? `<button class="btn btn-sm btn-danger btn-remove-plugin" data-plugin-id="${g.id}">移除</button>` : ''}
                </div>
            </div>
        `).join('');
    },

    _template(cfg, games) {
        return `
        <div class="animated">
            <h2 style="font-size:24px;font-weight:700;margin-bottom:24px;">设置</h2>

            <div class="settings-section">
                <h3>连接设置</h3>
                <div class="settings-row">
                    <div>
                        <div class="settings-label">遥测监听端口</div>
                        <div class="settings-desc">游戏内设置的数据输出端口 (默认 20777)</div>
                    </div>
                    <div class="settings-control">
                        <input type="number" id="settings-telemetry-port" value="${cfg.telemetry_port || 20777}" min="1024" max="65535">
                    </div>
                </div>
                <div class="settings-row">
                    <div>
                        <div class="settings-label">重启遥测监听</div>
                        <div class="settings-desc">修改端口或切换游戏后需要重启</div>
                    </div>
                    <div class="settings-control">
                        <button id="settings-restart-telemetry" class="btn btn-secondary btn-sm">重启监听</button>
                    </div>
                </div>
            </div>

            <div class="settings-section">
                <h3>仪表盘管理</h3>
                <div style="display:flex;gap:8px;margin-bottom:16px;">
                    <button id="btn-import-dashboard" class="btn btn-secondary btn-sm">导入 .tsd</button>
                    <span style="font-size:12px;color:var(--text-tertiary);display:flex;align-items:center;">
                        右键点击仪表盘卡片即可导出
                    </span>
                </div>
            </div>

            <div class="settings-section">
                <h3>游戏插件管理</h3>
                <div style="display:flex;gap:8px;margin-bottom:16px;">
                    <button id="btn-import-plugin" class="btn btn-secondary btn-sm">导入 .tsp</button>
                    <button id="btn-reload-plugins" class="btn btn-secondary btn-sm">重新加载</button>
                </div>
                <div id="settings-game-list">
                    ${this._gamePluginListHtml(games)}
                </div>
                <div class="glass-card" style="padding:16px;margin-top:12px;font-size:12px;color:var(--text-tertiary);line-height:1.6;">
                    <strong style="color:var(--text-secondary);">社区插件开发指南：</strong><br>
                    1. 创建包含 <code>manifest.json</code> + <code>parser.py</code> 的文件夹<br>
                    2. <code>manifest.json</code> 定义元信息，<code>parser.py</code> 需有 <code>get_parser()</code> 函数<br>
                    3. 返回对象实现 <code>game_id()</code> 和 <code>parse(data, addr)</code> 方法<br>
                    4. 打包时只需要 zip 这两个文件，重命名后缀为 <code>.tsp</code> 即可导入<br>
                    5. 完整的 <code>TelemetryData</code> 字段参考见 <code>server/telemetry/data.py</code>
                </div>
            </div>

            <div class="settings-section">
                <h3>关于</h3>
                <div class="settings-row">
                    <div>
                        <div class="settings-label">TurboSu</div>
                        <div class="settings-desc">赛车遥测仪表盘 v1.0.0 · Yei.J. (AskaEth)</div>
                    </div>
                </div>
            </div>
        </div>`;
    }
};

window.PageSettings = PageSettings;