const PageDashboard = {
    _el: null,
    _currentCategory: 'all',
    _selectedGameId: null,
    _marketMode: false,
    _marketToken: null,

    init() {
        this._el = document.getElementById('page-dashboard');
        this._marketToken = localStorage.getItem('turbosu-market-token');
    },

    async render() {
        const cfg = await API.getConfig();
        this._selectedGameId = cfg.selected_game_id;
        this._el.innerHTML = this._template();
        await this._loadCategories();
        await this._loadThemes();
        this._bindEvents();
    },

    async _loadCategories() {
        try {
            const cats = await API.getCategories();
            const listEl = document.getElementById('dash-category-list');
            if (!listEl) return;

            const allItem = document.createElement('div');
            allItem.className = 'category-item active';
            allItem.textContent = '全部';
            allItem.dataset.cat = 'all';
            listEl.appendChild(allItem);

            cats.forEach(cat => {
                const item = document.createElement('div');
                item.className = 'category-item';
                item.textContent = cat;
                item.dataset.cat = cat;
                listEl.appendChild(item);
            });
        } catch (e) {
            console.error('Failed to load categories:', e);
        }
    },

    async _loadThemes() {
        const gridEl = document.getElementById('dash-theme-grid');
        if (!gridEl) return;
        gridEl.innerHTML = '<div style="text-align:center;padding:40px;color:var(--text-tertiary);">加载中...</div>';

        if (this._marketMode) {
            await this._loadMarket(gridEl);
            return;
        }

        try {
            let themes = await API.getDashboards(this._currentCategory);
            if (!themes || themes.length === 0) { gridEl.innerHTML = this._emptyHtml(); return; }
            if (this._selectedGameId) { themes = themes.filter(t => this._isGameSupported(t)); }
            const searchQuery = document.getElementById('dash-search')?.value?.toLowerCase() || '';
            if (searchQuery) { themes = themes.filter(t => (t.name||'').toLowerCase().includes(searchQuery) || (t.description||'').toLowerCase().includes(searchQuery) || (t.author||'').toLowerCase().includes(searchQuery)); }
            const sortBy = document.getElementById('dash-sort')?.value || 'name';
            themes.sort((a, b) => (a[sortBy]||'').localeCompare(b[sortBy]||''));
            if (themes.length === 0) { gridEl.innerHTML = this._emptyHtml('当前游戏没有兼容的仪表盘'); return; }
            gridEl.innerHTML = themes.map(t => this._themeCardHtml(t)).join('');
        } catch (e) { gridEl.innerHTML = '<div style="text-align:center;padding:40px;color:var(--danger);">加载失败</div>'; }
    },

    async _loadMarket(gridEl) {
        try {
            const res = await fetch('/api/market/dashboards');
            const data = await res.json();
            const items = data.items || [];
            if (!items.length) { gridEl.innerHTML = this._emptyHtml('市场暂无仪表盘'); return; }
            gridEl.innerHTML = items.map(d => {
                const icon = d.icon || '📦';
                return `<div class="glass-card theme-card" data-market-id="${d.id}">
                    <div class="theme-card-preview">${icon}</div>
                    <div class="theme-card-info">
                        <div class="theme-card-name">${d.name||'Unnamed'}</div>
                        <div class="theme-card-meta">
                            <span>${d.category||''}</span><span>v${d.version||'1.0'}</span>
                        </div>
                        <div class="theme-card-meta" style="margin-top:4px">
                            <span>${d.author||''}</span><span style="color:var(--text-tertiary)">${d.downloads||0} 次下载</span>
                        </div>
                        <button class="btn btn-sm btn-primary btn-market-install" data-id="${d.id}" data-file="${d.file||''}" style="margin-top:8px;width:100%">安装</button>
                    </div></div>`;
            }).join('');
        } catch (e) { gridEl.innerHTML = '<div style="text-align:center;padding:40px;color:var(--danger);">市场加载失败</div>'; }
    },

    _isGameSupported(theme) {
        const supported = theme.supported_games || 'all';
        if (supported === 'all') return true;
        const ids = supported.split(',').map(s => s.trim());
        return ids.includes(this._selectedGameId);
    },

    _emptyHtml(msg) {
        return `
        <div class="empty-state" style="grid-column:1/-1;">
            <svg viewBox="0 0 24 24" width="64" height="64"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm0-12c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4z" fill="currentColor"/></svg>
            <h4>${msg || '暂无仪表盘主题'}</h4>
            <p>创建或导入你的仪表盘主题</p>
        </div>`;
    },

    _bindEvents() {
        const categoryList = document.getElementById('dash-category-list');
        if (categoryList) {
            categoryList.addEventListener('click', (e) => {
                const item = e.target.closest('.category-item');
                if (!item) return;
                categoryList.querySelectorAll('.category-item').forEach(el => el.classList.remove('active'));
                item.classList.add('active');
                this._currentCategory = item.dataset.cat;
                this._loadThemes();
            });
        }

        const gridEl = document.getElementById('dash-theme-grid');
        if (gridEl) {
            gridEl.addEventListener('click', (e) => {
                const card = e.target.closest('.theme-card');
                if (!card) return;
                const themeId = card.dataset.themeId;
                if (themeId) this._openDashboard(themeId);

                const installBtn = e.target.closest('.btn-market-install');
                if (installBtn) this._installFromMarket(installBtn.dataset.id, installBtn.dataset.file);
            });
            gridEl.addEventListener('contextmenu', (e) => {
                const card = e.target.closest('.theme-card');
                if (!card || !card.dataset.themeId) return;
                e.preventDefault();
                this._exportDashboard(card.dataset.themeId);
            });
        }

        document.getElementById('dash-search')?.addEventListener('input', () => this._loadThemes());
        document.getElementById('dash-sort')?.addEventListener('change', () => this._loadThemes());

        document.getElementById('btn-new-dashboard')?.addEventListener('click', () => this._createNew());
        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 fd = new FormData(); fd.append('file', file);
                const res = await fetch('/api/dashboards/import', { method: 'POST', body: fd });
                const data = await res.json();
                if (data.ok) { Toast.show('导入成功', 'success'); this._loadThemes(); }
                else Toast.show('导入失败', 'error');
            }; input.click();
        });

        document.getElementById('btn-market-upload')?.addEventListener('click', () => this._showMarketUpload());
        document.getElementById('btn-market-login')?.addEventListener('click', () => this._showMarketLogin());
        document.getElementById('btn-market-tab')?.addEventListener('click', () => {
            document.getElementById('dash-category-list').querySelectorAll('.category-item').forEach(el => el.classList.remove('active'));
            document.getElementById('btn-market-tab').classList.add('active');
            this._marketMode = true;
            document.getElementById('dash-search-box').style.display = 'none';
            this._loadThemes();
        });

        this._updateMarketUI();
    },

    async _installFromMarket(id, filename) {
        try {
            const res = await fetch(`/api/market/install?id=${id}&filename=${filename}`);
            const data = await res.json();
            if (data.ok) { Toast.show('安装成功', 'success'); this._loadThemes(); }
            else Toast.show('安装失败', 'error');
        } catch (e) { Toast.show('安装失败', 'error'); }
    },

    _showMarketUpload() {
        if (!this._marketToken) {
            Toast.show('请先登录市场账户', 'info');
            this._showMarketLogin();
            return;
        }
        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 fd = new FormData(); fd.append('file', file);
            fd.append('name', file.name.replace('.tsd',''));
            fd.append('category', 'community');
            fd.append('author', 'TurboSu User');
            fd.append('token', this._marketToken);
            try {
                const res = await fetch('/api/market/upload', { method: 'POST', body: fd });
                const data = await res.json();
                Toast.show(data.error ? '上传失败: ' + data.error : '上传成功', data.error ? 'error' : 'success');
            } catch (e) { Toast.show('上传失败', 'error'); }
        }; input.click();
    },

    _showMarketLogin() {
        const overlay = document.createElement('div');
        overlay.className = 'modal-overlay';
        overlay.innerHTML = `<div class="modal" style="min-width:360px;max-width:400px">
            <h3>市场</h3>
            <div class="form-group"><label>邮箱</label><input id="ml-email" type="email"></div>
            <div class="form-group"><label>密码</label><input id="ml-pass" type="password"></div>
            <div class="modal-actions">
                <button class="btn btn-secondary btn-sm" id="ml-logout" style="display:none;margin-right:auto">退出</button>
                <button class="btn btn-secondary btn-sm" id="ml-register">注册</button>
                <button class="btn btn-primary btn-sm" id="ml-login">登录</button>
            </div></div>`;
        document.body.appendChild(overlay);

        if (this._marketToken) {
            overlay.querySelector('#ml-login').style.display = 'none';
            overlay.querySelector('#ml-register').style.display = 'none';
            overlay.querySelector('#ml-logout').style.display = '';
            overlay.querySelector('#ml-logout').addEventListener('click', () => {
                this._marketToken = null;
                localStorage.removeItem('turbosu-market-token');
                overlay.remove();
                this._updateMarketUI();
                Toast.show('已退出', 'info');
            });
        }

        overlay.addEventListener('click', (e) => { if (e.target === overlay) overlay.remove(); });
        overlay.querySelector('#ml-login').addEventListener('click', async () => {
            const email = document.getElementById('ml-email').value;
            const pass = document.getElementById('ml-pass').value;
            const res = await fetch('/api/market/auth', { method: 'POST', headers: {'Content-Type':'application/json'}, body: JSON.stringify({email, password}) });
            const data = await res.json();
            if (data.token) {
                this._marketToken = data.token;
                localStorage.setItem('turbosu-market-token', data.token);
                Toast.show('登录成功', 'success');
                overlay.remove();
                this._updateMarketUI();
            } else { Toast.show(data.message || '登录失败', 'error'); }
        });
        overlay.querySelector('#ml-register').addEventListener('click', async () => {
            const email = document.getElementById('ml-email').value;
            const pass = document.getElementById('ml-pass').value;
            const res = await fetch('/api/market/register', { method: 'POST', headers: {'Content-Type':'application/json'}, body: JSON.stringify({email, password: pass, passwordConfirm: pass}) });
            const data = await res.json();
            Toast.show(data.error ? '注册失败: ' + data.error : '注册成功，请查收验证邮件', data.error ? 'error' : 'success');
        });
    },

    _updateMarketUI() {
        const loginBtn = document.getElementById('btn-market-login');
        const uploadBtn = document.getElementById('btn-market-upload');
        if (!loginBtn || !uploadBtn) return;
        if (this._marketToken) {
            loginBtn.textContent = '已登录';
            loginBtn.className = 'btn btn-sm btn-secondary';
            uploadBtn.style.display = '';
        } else {
            loginBtn.textContent = '登录';
            loginBtn.className = 'btn btn-sm btn-primary';
            uploadBtn.style.display = 'none';
        }
    },

    _openDashboard(themeId) {
        const gameParam = this._selectedGameId ? `?game=${this._selectedGameId}` : '';
        const url = `${location.origin}/dashboard/${themeId}${gameParam}`;
        window.open(url, '_blank');
        navigator.clipboard.writeText(url).then(() => {
            Toast.show('链接已复制，可在局域网设备访问', 'success');
        }).catch(() => {
            Toast.show(`打开地址: ${url}`, 'info');
        });
    },

    _exportDashboard(themeId) {
        const a = document.createElement('a');
        a.href = `/api/dashboards/${themeId}/export`;
        a.download = `${themeId}.tsd`;
        a.click();
        Toast.show('正在下载 .tsd 文件...', 'info');
    },

    _themeCardHtml(theme) {
        const icon = theme.icon || '📊';
        const aspect = theme.aspect_ratio || 'auto';
        const supported = theme.supported_games || 'all';
        const isAll = supported === 'all';
        const compatLabel = isAll ? '全' : '限';
        const compatClass = isAll ? 'badge-info' : 'badge-warning';
        const preview = `/dashboard/${theme.id}/preview.jpg`;
        return `
        <div class="glass-card theme-card" data-theme-id="${theme.id}">
            <div class="theme-card-preview" style="background-image:url(${preview});background-size:cover;background-position:center">${icon}</div>
            <div class="theme-card-info">
                <div class="theme-card-name">${theme.name || 'Unnamed'}</div>
                <div class="theme-card-meta">
                    <span>${theme.category || 'basic'}</span>
                    <span>${aspect}</span>
                </div>
                <div class="theme-card-meta" style="margin-top:4px;">
                    <span>${theme.author || ''}</span>
                    <span class="badge ${compatClass}">${compatLabel}</span>
                </div>
            </div>
        </div>`;
    },

    async _createNew() {
        const name = prompt('仪表盘名称：', 'My Dashboard');
        if (!name) return;
        try {
            const html = '<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>TurboSu - ' + name + '</title><style>*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}html,body{width:100%;height:100%;overflow:hidden;background:#0a0a0f;color:#fff;font-family:sans-serif}#root{width:100%;height:100%;display:flex;align-items:center;justify-content:center}#box{position:relative;overflow:hidden}#box.contain{max-width:100vw;max-height:100vh}#box.cover{min-width:100vw;min-height:100vh}#box.fill{width:100vw;height:100vh}</style></head><body><div id="root"><div id="box" class="contain"><div data-bind="speed_kmh" style="font-size:80px;font-weight:200">0</div></div></div><script>const M={aspect_ratio:"auto",render_mode:"contain"};(function(){const b=document.getElementById("box"),p=location.protocol==="https:"?"wss:":"ws:";let w,r;function a(){const rt=M.aspect_ratio==="auto"?null:(c=>{const p=c.split(":");return p.length===2?+p[0]/+p[1]:null})(M.aspect_ratio),md=M.render_mode||"contain";if(!rt){b.style.width="100vw";b.style.height="100vh";b.className="fill";return}const vw=window.innerWidth,vh=window.innerHeight,vr=vw/vh;let cw,ch;if(md==="cover"){cw=vw;ch=vw/rt;b.className="cover"}else{b.className="contain";cw=vr>rt?vh*rt:vw;ch=vr>rt?vh:vw/rt}b.style.width=cw+"px";b.style.height=ch+"px"}function c(){w=new WebSocket(p+"//"+location.host+"/ws");w.onopen=()=>{if(r){clearTimeout(r);r=null}};w.onmessage=(e)=>{try{const m=JSON.parse(e.data);if(m.type==="telemetry")document.querySelectorAll("[data-bind]").forEach(el=>{const v=m.data[el.getAttribute("data-bind")];if(v!==undefined)el.textContent=typeof v==="number"?v.toFixed(1):v})}catch(e){}};w.onclose=()=>{r=setTimeout(c,2000)}}a();window.addEventListener("resize",a);c()})();<\/script></body></html>';
            const res = await fetch('/api/dashboards', {
                method: 'POST', headers: {'Content-Type': 'application/json'},
                body: JSON.stringify({name, category: 'custom', author: 'Local', config: {icon: '📊', aspect_ratio: 'auto', render_mode: 'contain'}, index_html: html})
            });
            const data = await res.json();
            if (data.id) { Toast.show('创建成功', 'success'); this._loadThemes(); }
            else Toast.show('创建失败', 'error');
        } catch (e) { Toast.show('创建失败', 'error'); }
    },

    _template() {
        return `
        <div class="dashboard-layout">
            <div class="dashboard-sub-sidebar">
                <div id="dash-category-list"></div>
                <div style="padding:8px 12px;margin-top:auto;display:flex;flex-direction:column;gap:4px">
                    <button id="btn-new-dashboard" class="btn btn-sm btn-primary" style="width:100%;">+ 新建</button>
                    <button id="btn-import-dashboard" class="btn btn-sm btn-secondary" style="width:100%;">导入 .tsd</button>
                </div>
            </div>
            <div class="dashboard-main">
                <div id="dash-search-box" style="display:flex;gap:8px;margin-bottom:12px;align-items:center">
                    <input id="dash-search" type="text" placeholder="搜索仪表盘..." style="flex:1;max-width:300px">
                    <select id="dash-sort" style="width:120px">
                        <option value="name">名称</option>
                        <option value="category">分类</option>
                        <option value="author">作者</option>
                    </select>
                </div>
                <div id="dash-theme-grid" class="theme-grid"></div>
            </div>
        </div>`;
    }
};

window.PageDashboard = PageDashboard;