const ConfigPage = {
    providers: [],
    personalities: [],

    async init() {
        // 检查认证和管理员权限
        const token = Storage.getToken();
        if (!token) {
            window.location.href = '/login.php';
            return;
        }
        
        try {
            // 验证管理员权限
            const userRes = await api.get('/auth/me');
            if (userRes.data.role !== 'admin') {
                window.location.href = '/chat.php';
                return;
            }
        } catch (err) {
            window.location.href = '/login.php';
            return;
        }

        await this.loadProviders();
        await this.loadPersonalities();
    },

    async loadProviders() {
        try {
            const res = await api.get('/config');
            this.providers = res.data.providers || [];
            this.renderProviders();
        } catch (err) {
            this.showMessage('加载供应商配置失败: ' + err.message, 'error');
        }
    },

    renderProviders() {
        const list = document.getElementById('providerList');
        if (this.providers.length === 0) {
            list.innerHTML = '<p class="config-empty">暂无供应商配置</p>';
            return;
        }
        
        list.innerHTML = this.providers.map((p, i) => `
            <div class="config-provider-card">
                <div class="config-provider-header">
                    <strong>${this.escapeHtml(p.name)}</strong>
                    <div>
                        <label class="toggle-switch">
                            <input type="checkbox" ${p.enabled ? 'checked' : ''} onchange="ConfigPage.toggleProvider(${i}, this.checked)">
                            <span class="slider"></span>
                        </label>
                        <button class="btn btn-danger btn-sm" onclick="ConfigPage.deleteProvider(${i})">删除</button>
                    </div>
                </div>
                <div class="form-group">
                    <label>API URL</label>
                    <input type="text" value="${this.escapeHtml(p.apiUrl || '')}" onchange="ConfigPage.updateProvider(${i}, 'apiUrl', this.value)">
                </div>
                <div class="form-group">
                    <label>API Key</label>
                    <input type="password" value="${this.escapeHtml(p.apiKey || '')}" onchange="ConfigPage.updateProvider(${i}, 'apiKey', this.value)" placeholder="API 密钥">
                </div>
                <div class="form-group">
                    <label>可用模型（逗号分隔）</label>
                    <input type="text" value="${this.escapeHtml((p.models || []).join(', '))}" onchange="ConfigPage.updateProviderModels(${i}, this.value)">
                </div>
                <div class="form-group">
                    <label>供应商类型</label>
                    <select onchange="ConfigPage.updateProvider(${i}, 'type', this.value)">
                        <option value="newapi" ${p.type === 'newapi' ? 'selected' : ''}>OpenAI 兼容</option>
                        <option value="openai" ${p.type === 'openai' ? 'selected' : ''}>OpenAI 官方</option>
                        <option value="claude" ${p.type === 'claude' ? 'selected' : ''}>Claude (Anthropic)</option>
                    </select>
                </div>
            </div>
        `).join('');
    },

    addProvider() {
        this.providers.push({
            name: '新供应商',
            apiUrl: '',
            apiKey: '',
            models: [],
            type: 'newapi',
            enabled: true
        });
        this.renderProviders();
        this.saveProviders();
    },

    updateProvider(index, field, value) {
        this.providers[index][field] = value;
        this.saveProviders();
    },

    updateProviderModels(index, value) {
        this.providers[index].models = value.split(',').map(m => m.trim()).filter(m => m);
        this.saveProviders();
    },

    toggleProvider(index, enabled) {
        this.providers[index].enabled = enabled;
        this.saveProviders();
    },

    deleteProvider(index) {
        if (!confirm('确定要删除供应商 "' + this.providers[index].name + '" 吗？')) return;
        this.providers.splice(index, 1);
        this.renderProviders();
        this.saveProviders();
    },

    async saveProviders() {
        try {
            await api.put('/config', { providers: this.providers });
            this.showMessage('供应商配置已保存', 'success');
        } catch (err) {
            this.showMessage('保存失败: ' + err.message, 'error');
        }
    },

    async loadPersonalities() {
        try {
            const res = await api.get('/personalities');
            this.personalities = res.data || [];
            this.renderPersonalities();
        } catch (err) {
            this.showMessage('加载人格列表失败: ' + err.message, 'error');
        }
    },

    renderPersonalities() {
        const list = document.getElementById('personalityList');
        if (this.personalities.length === 0) {
            list.innerHTML = '<p class="config-empty">暂无人格</p>';
            return;
        }
        
        list.innerHTML = this.personalities.map(p => `
            <div class="personality-item">
                <div>
                    <span>${p.icon ? '<span class="personality-icon">' + this.escapeHtml(p.icon) + '</span>' : ''}${this.escapeHtml(p.name)}</span>
                    ${p.is_preset ? '<span class="personality-badge preset">预设</span>' : '<span class="personality-badge custom">自定义</span>'}
                </div>
                ${!p.is_preset ? '<button class="btn btn-danger btn-sm" onclick="ConfigPage.deletePersonality(' + p.id + ')">删除</button>' : ''}
            </div>
        `).join('');
    },

    async createPersonality() {
        const name = document.getElementById('newPersonalityName').value.trim();
        const prompt = document.getElementById('newPersonalityPrompt').value.trim();
        const icon = document.getElementById('newPersonalityIcon').value.trim();
        const description = document.getElementById('newPersonalityDesc').value.trim();
        
        if (!name || !prompt) {
            this.showMessage('名称和提示词不能为空', 'error');
            return;
        }
        
        try {
            await api.post('/personalities', { name, prompt, icon, description });
            this.showMessage('人格创建成功', 'success');
            // 清空表单
            document.getElementById('newPersonalityName').value = '';
            document.getElementById('newPersonalityPrompt').value = '';
            document.getElementById('newPersonalityIcon').value = '';
            document.getElementById('newPersonalityDesc').value = '';
            await this.loadPersonalities();
        } catch (err) {
            this.showMessage('创建失败: ' + err.message, 'error');
        }
    },

    async deletePersonality(id) {
        if (!confirm('确定要删除这个人格吗？')) return;
        try {
            await api.delete('/personalities/' + id);
            this.showMessage('人格已删除', 'success');
            await this.loadPersonalities();
        } catch (err) {
            this.showMessage('删除失败: ' + err.message, 'error');
        }
    },

    showMessage(text, type) {
        const el = document.getElementById('configMessage');
        el.innerHTML = `<div class="alert alert-${type === 'error' ? 'error' : 'success'} toast-message">${this.escapeHtml(text)}</div>`;
        setTimeout(() => { el.innerHTML = ''; }, 3000);
    },

    escapeHtml(text) {
        const div = document.createElement('div');
        div.textContent = text;
        return div.innerHTML;
    }
};

ConfigPage.init();