/**
 * AuthManagerComponent - 认证授权管理组件
 * 
 * 功能特性:
 * - JWT Token 管理
 * - API Key 生成和撤销
 * - OAuth 客户端管理
 * - 角色和权限管理
 * - 登录日志查看
 * - 会话管理
 * 
 * @example
 * const authManager = new AuthManagerComponent('#auth-manager-container', {
 *     apiBaseUrl: '',  // ✅ 修改为相对路径，通过同域名 nginx 转发到后端 8001 端口
 *     onRoleCreate: async (role) => {
 *         await authAPIAdapter.post('/roles', role);
 *     },
 *     onApiKeyGenerate: async (userId, permissions) => {
 *         await authAPIAdapter.post('/api-keys', { user_id: userId, permissions });
 *     }
 * });
 */

(function(global) {
    'use strict';
    
    class AuthManagerComponent {
        constructor(containerSelector, options = {}) {
            // 容器选择器
            this.container = typeof containerSelector === 'string' 
                ? document.querySelector(containerSelector) 
                : containerSelector;
            
            if (!this.container) {
                console.error(`AuthManager: 未找到容器 ${containerSelector}`);
                return;
            }
            
            // 配置项
            this.options = {
                apiBaseUrl: options.apiBaseUrl || '',  // ✅ 修改为相对路径（通过同域名 nginx 转发到后端 8001 端口）
                onRoleCreate: options.onRoleCreate || null,
                onApiKeyGenerate: options.onApiKeyGenerate || null
            };
            
            // 状态
            this.roles = [];
            this.apiKeys = [];
            this.oauthClients = [];
            this.loginLogs = [];
            
            // DOM 元素
            this.element = null;
            
            // 初始化
            this.initialize();
        }
        
        /**
         * 初始化组件
         */
        async initialize() {
            this.render();
            this.bindEvents();
            await this.loadRoles();
            await this.loadApiKeys();
            await this.loadLoginLogs();
        }
        
        /**
         * 渲染组件
         */
        render() {
            this.container.innerHTML = `
                <div class="auth-manager" style="background: #f5f7fa; border-radius: 8px; padding: 20px;">
                    <!-- 标签页导航 -->
                    <div class="tabs-nav" style="
                        background: white;
                        border-radius: 8px;
                        padding: 15px 20px;
                        margin-bottom: 20px;
                        display: flex;
                        gap: 15px;
                        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
                    "></div>
                    
                    <!-- 内容区域 -->
                    <div class="tab-content" style="
                        background: white;
                        border-radius: 8px;
                        padding: 20px;
                        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
                    "></div>
                </div>
            `;
            
            this.element = this.container.querySelector('.auth-manager');
        }
        
        /**
         * 绑定事件
         */
        bindEvents() {
            // 委托标签页切换
            this.container.querySelector('.tabs-nav').addEventListener('click', (e) => {
                const tabBtn = e.target.closest('.tab-btn');
                if (tabBtn) {
                    this.switchTab(tabBtn.dataset.tab);
                }
            });
            
            // 委托操作按钮
            this.container.addEventListener('click', (e) => {
                if (e.target.classList.contains('btn-create-role')) {
                    this.createRole();
                }
                
                if (e.target.classList.contains('btn-generate-key')) {
                    this.generateApiKey();
                }
                
                if (e.target.classList.contains('btn-revoke-key')) {
                    const keyId = e.target.dataset.keyId;
                    this.revokeApiKey(keyId);
                }
            });
        }
        
        /**
         * 加载角色列表
         */
        async loadRoles() {
            try {
                // TODO: API 调用
                // const response = await authAPIAdapter.get('/roles');
                // this.roles = response.data.roles;
                
                this.roles = [
                    { id: 1, name: '超级管理员', code: 'super_admin', users: 3, permissions: ['all'] },
                    { id: 2, name: '系统管理员', code: 'system_admin', users: 8, permissions: ['system.manage', 'users.view'] },
                    { id: 3, name: '普通用户', code: 'user', users: 156, permissions: ['dashboard.view'] },
                    { id: 4, name: '访客', code: 'guest', users: 45, permissions: ['public.view'] }
                ];
                
                if (!this.currentTab) {
                    this.currentTab = 'roles';
                    this.renderTabsNav();
                    this.renderRolesTab();
                }
            } catch (error) {
                console.error('加载角色失败:', error);
            }
        }
        
        /**
         * 加载 API Keys
         */
        async loadApiKeys() {
            try {
                // TODO: API 调用
                // const response = await authAPIAdapter.get('/api-keys');
                // this.apiKeys = response.data.keys;
                
                this.apiKeys = Array.from({ length: 10 }, (_, i) => ({
                    id: `key_${i + 1}`,
                    name: `API Key ${i + 1}`,
                    key_prefix: `sk_${Math.random().toString(36).substring(2, 8)}...`,
                    owner: `用户${i + 1}`,
                    permissions: ['read', 'write', 'delete'].slice(0, Math.floor(Math.random() * 3) + 1),
                    created_at: `2026-03-${String(1 + i % 15).padStart(2, '0')}`,
                    last_used: `2026-03-${String(10 + i % 6).padStart(2, '0')} 14:30:00`,
                    status: ['active', 'revoked'][i % 2]
                }));
                
                if (this.currentTab === 'api-keys') {
                    this.renderApiKeysTab();
                }
            } catch (error) {
                console.error('加载 API Keys 失败:', error);
            }
        }
        
        /**
         * 加载登录日志
         */
        async loadLoginLogs() {
            try {
                // TODO: API 调用
                // const response = await authAPIAdapter.get('/login-logs');
                // this.loginLogs = response.data.logs;
                
                this.loginLogs = Array.from({ length: 50 }, (_, i) => ({
                    id: i + 1,
                    user: `用户${i + 1}`,
                    ip: `192.168.${Math.floor(Math.random() * 255)}.${Math.floor(Math.random() * 255)}`,
                    location: '北京',
                    browser: ['Chrome', 'Firefox', 'Safari', 'Edge'][i % 4],
                    os: ['Windows', 'macOS', 'Linux'][i % 3],
                    status: ['success', 'failed'][i % 5],
                    time: `2026-03-${String(1 + i % 15).padStart(2, '0')} ${String(8 + i % 12).padStart(2, '0')}:00:00`
                }));
                
                if (this.currentTab === 'login-logs') {
                    this.renderLoginLogsTab();
                }
            } catch (error) {
                console.error('加载登录日志失败:', error);
            }
        }
        
        /**
         * 渲染标签页导航
         */
        renderTabsNav() {
            const container = this.container.querySelector('.tabs-nav');
            const tabs = [
                { id: 'roles', label: '🔐 角色管理' },
                { id: 'api-keys', label: '🔑 API Keys' },
                { id: 'oauth', label: '🌐 OAuth 应用' },
                { id: 'login-logs', label: '📋 登录日志' }
            ];
            
            container.innerHTML = tabs.map(tab => `
                <button class="tab-btn ${tab.id === this.currentTab ? 'active' : ''}" 
                    data-tab="${tab.id}"
                    style="
                        padding: 10px 20px;
                        border: none;
                        background: ${tab.id === this.currentTab ? '#667eea' : 'transparent'};
                        color: ${tab.id === this.currentTab ? 'white' : '#666'};
                        border-radius: 6px;
                        cursor: pointer;
                        font-size: 14px;
                        font-weight: 500;
                        transition: all 0.2s;
                    "
                >${tab.label}</button>
            `).join('');
        }
        
        /**
         * 切换标签页
         */
        switchTab(tabName) {
            this.currentTab = tabName;
            this.renderTabsNav();
            
            const contentContainer = this.container.querySelector('.tab-content');
            contentContainer.innerHTML = '';
            
            switch(tabName) {
                case 'roles':
                    this.renderRolesTab();
                    break;
                case 'api-keys':
                    this.renderApiKeysTab();
                    break;
                case 'oauth':
                    this.renderOauthTab();
                    break;
                case 'login-logs':
                    this.renderLoginLogsTab();
                    break;
            }
        }
        
        /**
         * 渲染角色管理标签页
         */
        renderRolesTab() {
            const container = this.container.querySelector('.tab-content');
            
            container.innerHTML = `
                <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
                    <h3 style="margin: 0; font-size: 18px; color: #333;">角色列表</h3>
                    <button class="btn-create-role" style="
                        padding: 10px 20px;
                        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
                        color: white;
                        border: none;
                        border-radius: 6px;
                        cursor: pointer;
                        font-size: 14px;
                        font-weight: 500;
                    ">➕ 创建角色</button>
                </div>
                
                <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px;">
                    ${this.roles.map(role => `
                        <div style="
                            background: white;
                            border: 2px solid #e0e0e0;
                            border-radius: 8px;
                            padding: 20px;
                            transition: transform 0.2s, border-color 0.2s;
                        " onmouseover="this.style.transform='translateY(-2px)'; this.style.borderColor='#667eea';" onmouseout="this.style.transform='translateY(0)'; this.style.borderColor='#e0e0e0';">
                            <div style="display: flex; justify-content: space-between; align-items: start; margin-bottom: 15px;">
                                <div>
                                    <h4 style="margin: 0; font-size: 18px; color: #333;">${role.name}</h4>
                                    <div style="font-size: 12px; color: #999; margin-top: 4px;">代码：${role.code}</div>
                                </div>
                                <span style="
                                    background: #667eea;
                                    color: white;
                                    padding: 4px 12px;
                                    border-radius: 12px;
                                    font-size: 12px;
                                    font-weight: 500;
                                ">${role.users} 人</span>
                            </div>
                            
                            <div style="margin-bottom: 15px;">
                                <div style="font-size: 13px; color: #666; margin-bottom: 8px;">权限:</div>
                                <div style="display: flex; flex-wrap: wrap; gap: 6px;">
                                    ${role.permissions.slice(0, 3).map(perm => `
                                        <span style="
                                            background: #f5f7fa;
                                            padding: 4px 10px;
                                            border-radius: 4px;
                                            font-size: 12px;
                                            color: #666;
                                        ">${perm}</span>
                                    `).join('')}
                                    ${role.permissions.length > 3 ? `<span style="color: #999; font-size: 12px;">+${role.permissions.length - 3} 更多</span>` : ''}
                                </div>
                            </div>
                            
                            <button style="
                                width: 100%;
                                padding: 8px;
                                background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
                                color: white;
                                border: none;
                                border-radius: 6px;
                                cursor: pointer;
                                font-size: 13px;
                                font-weight: 500;
                            ">编辑权限</button>
                        </div>
                    `).join('')}
                </div>
            `;
        }
        
        /**
         * 渲染 API Keys 标签页
         */
        renderApiKeysTab() {
            const container = this.container.querySelector('.tab-content');
            
            container.innerHTML = `
                <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
                    <h3 style="margin: 0; font-size: 18px; color: #333;">API Keys 管理</h3>
                    <button class="btn-generate-key" style="
                        padding: 10px 20px;
                        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
                        color: white;
                        border: none;
                        border-radius: 6px;
                        cursor: pointer;
                        font-size: 14px;
                        font-weight: 500;
                    ">🔑 生成新 Key</button>
                </div>
                
                <table style="width: 100%; border-collapse: collapse;">
                    <thead style="background: #f5f7fa;">
                        <tr>
                            <th style="padding: 15px; text-align: left;">名称</th>
                            <th style="padding: 15px; text-align: left;">Key</th>
                            <th style="padding: 15px; text-align: left;">所有者</th>
                            <th style="padding: 15px; text-align: left;">权限</th>
                            <th style="padding: 15px; text-align: left;">创建时间</th>
                            <th style="padding: 15px; text-align: left;">最后使用</th>
                            <th style="padding: 15px; text-align: left;">状态</th>
                            <th style="padding: 15px; text-align: left;">操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        ${this.apiKeys.map(key => {
                            const statusConfig = {
                                'active': { label: '有效', color: '#28a745', bg: '#d4edda' },
                                'revoked': { label: '已撤销', color: '#dc3545', bg: '#f8d7da' }
                            };
                            const status = statusConfig[key.status];
                            
                            return `
                                <tr style="border-bottom: 1px solid #f0f0f0;">
                                    <td style="padding: 15px; font-weight: 500; color: #333;">${key.name}</td>
                                    <td style="padding: 15px; font-family: monospace; color: #666;">${key.key_prefix}</td>
                                    <td style="padding: 15px; color: #666;">${key.owner}</td>
                                    <td style="padding: 15px;">
                                        ${key.permissions.map(p => `
                                            <span style="
                                                display: inline-block;
                                                padding: 2px 8px;
                                                background: #f0f0f0;
                                                border-radius: 4px;
                                                font-size: 12px;
                                                margin-right: 4px;
                                            ">${p}</span>
                                        `).join('')}
                                    </td>
                                    <td style="padding: 15px; color: #666;">${key.created_at}</td>
                                    <td style="padding: 15px; color: #666;">${key.last_used}</td>
                                    <td style="padding: 15px;">
                                        <span style="
                                            display: inline-block;
                                            padding: 4px 12px;
                                            border-radius: 12px;
                                            font-size: 12px;
                                            font-weight: 500;
                                            background: ${status.bg};
                                            color: ${status.color};
                                        ">${status.label}</span>
                                    </td>
                                    <td style="padding: 15px;">
                                        ${key.status === 'active' ? `
                                            <button class="btn-revoke-key" data-key-id="${key.id}" style="
                                                padding: 6px 12px;
                                                border: none;
                                                background: #dc3545;
                                                color: white;
                                                border-radius: 4px;
                                                cursor: pointer;
                                                font-size: 13px;
                                            ">撤销</button>
                                        ` : '<span style="color: #999;">已失效</span>'}
                                    </td>
                                </tr>
                            `;
                        }).join('')}
                    </tbody>
                </table>
            `;
        }
        
        /**
         * 渲染 OAuth 应用标签页
         */
        renderOauthTab() {
            const container = this.container.querySelector('.tab-content');
            
            container.innerHTML = `
                <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
                    <h3 style="margin: 0; font-size: 18px; color: #333;">OAuth 应用管理</h3>
                    <button style="
                        padding: 10px 20px;
                        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
                        color: white;
                        border: none;
                        border-radius: 6px;
                        cursor: pointer;
                        font-size: 14px;
                        font-weight: 500;
                    ">➕ 创建应用</button>
                </div>
                
                <div style="text-align: center; padding: 60px 20px; color: #999;">
                    <div style="font-size: 48px; margin-bottom: 20px;">🌐</div>
                    <div style="font-size: 16px;">暂无 OAuth 应用</div>
                    <div style="font-size: 14px; margin-top: 10px;">点击"创建应用"开始配置第三方接入</div>
                </div>
            `;
        }
        
        /**
         * 渲染登录日志标签页
         */
        renderLoginLogsTab() {
            const container = this.container.querySelector('.tab-content');
            
            container.innerHTML = `
                <div style="margin-bottom: 20px; display: flex; gap: 15px; align-items: center;">
                    <input type="text" placeholder="搜索用户名、IP..." style="
                        flex: 1;
                        max-width: 300px;
                        padding: 10px 15px;
                        border: 1px solid #ddd;
                        border-radius: 6px;
                        font-size: 14px;
                    " />
                    <select style="
                        padding: 10px 15px;
                        border: 1px solid #ddd;
                        border-radius: 6px;
                        font-size: 14px;
                        background: white;
                    ">
                        <option value="">全部状态</option>
                        <option value="success">成功</option>
                        <option value="failed">失败</option>
                    </select>
                </div>
                
                <table style="width: 100%; border-collapse: collapse;">
                    <thead style="background: #f5f7fa;">
                        <tr>
                            <th style="padding: 15px; text-align: left;">用户</th>
                            <th style="padding: 15px; text-align: left;">IP 地址</th>
                            <th style="padding: 15px; text-align: left;">地点</th>
                            <th style="padding: 15px; text-align: left;">浏览器/系统</th>
                            <th style="padding: 15px; text-align: left;">状态</th>
                            <th style="padding: 15px; text-align: left;">时间</th>
                        </tr>
                    </thead>
                    <tbody>
                        ${this.loginLogs.map(log => {
                            const statusConfig = {
                                'success': { label: '成功', color: '#28a745', bg: '#d4edda' },
                                'failed': { label: '失败', color: '#dc3545', bg: '#f8d7da' }
                            };
                            const status = statusConfig[log.status];
                            
                            return `
                                <tr style="border-bottom: 1px solid #f0f0f0;">
                                    <td style="padding: 15px; color: #333;">${log.user}</td>
                                    <td style="padding: 15px; font-family: monospace; color: #666;">${log.ip}</td>
                                    <td style="padding: 15px; color: #666;">${log.location}</td>
                                    <td style="padding: 15px; color: #666;">${log.browser} / ${log.os}</td>
                                    <td style="padding: 15px;">
                                        <span style="
                                            display: inline-block;
                                            padding: 4px 12px;
                                            border-radius: 12px;
                                            font-size: 12px;
                                            font-weight: 500;
                                            background: ${status.bg};
                                            color: ${status.color};
                                        ">${status.label}</span>
                                    </td>
                                    <td style="padding: 15px; color: #666; font-size: 13px;">${log.time}</td>
                                </tr>
                            `;
                        }).join('')}
                    </tbody>
                </table>
            `;
        }
        
        /**
         * 创建角色
         */
        async createRole() {
            if (global.Dialog) {
                try {
                    await Dialog.show({
                        title: '创建角色',
                        content: `
                            <form style="line-height: 2;">
                                <div>
                                    <label style="display: block; margin-bottom: 5px;">角色名称</label>
                                    <input type="text" placeholder="例如：内容管理员" style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px;" />
                                </div>
                                <div style="margin-top: 15px;">
                                    <label style="display: block; margin-bottom: 5px;">角色代码</label>
                                    <input type="text" placeholder="例如：content_manager" style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px;" />
                                </div>
                                <div style="margin-top: 15px;">
                                    <label style="display: block; margin-bottom: 5px;">权限选择</label>
                                    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px;">
                                        <label><input type="checkbox" /> 用户管理</label>
                                        <label><input type="checkbox" /> 内容审核</label>
                                        <label><input type="checkbox" /> 系统配置</label>
                                        <label><input type="checkbox" /> 数据分析</label>
                                    </div>
                                </div>
                            </form>
                        `
                    });
                    
                    if (this.options.onRoleCreate) {
                        await this.options.onRoleCreate({});
                    }
                    
                    if (global.showToast) {
                        showToast.success('角色创建成功!');
                    }
                } catch (error) {
                    if (error !== 'cancelled') {
                        console.error('创建角色失败:', error);
                    }
                }
            }
        }
        
        /**
         * 生成 API Key
         */
        async generateApiKey() {
            if (global.Dialog) {
                try {
                    const result = await Dialog.prompt('请输入 Key 名称', {
                        placeholder: '例如：生产环境 API Key'
                    });
                    
                    if (this.options.onApiKeyGenerate) {
                        await this.options.onApiKeyGenerate(result, []);
                    }
                    
                    if (global.showToast) {
                        showToast.success('API Key 生成成功!');
                    }
                    
                    // 重新加载列表
                    await this.loadApiKeys();
                } catch (error) {
                    if (error !== 'cancelled') {
                        console.error('生成 API Key 失败:', error);
                    }
                }
            }
        }
        
        /**
         * 撤销 API Key
         */
        async revokeApiKey(keyId) {
            if (confirm('确定要撤销这个 API Key 吗？撤销后将无法恢复。')) {
                try {
                    // TODO: API 调用
                    // await authAPIAdapter.delete(`/api-keys/${keyId}`);
                    
                    // 更新本地状态
                    const key = this.apiKeys.find(k => k.id === keyId);
                    if (key) {
                        key.status = 'revoked';
                        this.renderApiKeysTab();
                    }
                    
                    if (global.showToast) {
                        showToast.success('API Key 已撤销');
                    }
                } catch (error) {
                    console.error('撤销 API Key 失败:', error);
                    if (global.showToast) {
                        showToast.error('操作失败：' + error.message);
                    }
                }
            }
        }
        
        /**
         * 销毁组件
         */
        destroy() {
            this.container.innerHTML = '';
        }
    }
    
    // 导出到全局
    global.AuthManagerComponent = AuthManagerComponent;
    
})(typeof window !== 'undefined' ? window : this);