/**
 * Login Register Enhanced Component - 登录注册增强版组件
 * 
 * 功能特性:
 * 1. 多因素认证（MFA）
 * 2. 验证码优化（图形/短信/邮箱）
 * 3. 第三方登录（微信/QQ/GitHub）
 * 4. 生物识别（指纹/面部）
 * 5. 忘记密码与找回
 * 6. 账号安全检测
 * 7. 登录设备管理
 * 8. 异常登录预警
 * 
 * @version 1.0.0
 * @author Smart Control Center Team
 * @date 2026-03-25
 */

class LoginRegisterEnhancedComponent {
    constructor(containerId, options = {}) {
        this.containerId = containerId;
        this.container = document.getElementById(containerId);
        this.options = {
            apiBaseUrl: options.apiBaseUrl || '',
            ...options
        };
        
        this.state = {
            mode: 'login', // login, register, forgot
            mfaEnabled: false,
            thirdPartyProviders: [],
            loading: false
        };
        
        this.init();
    }
    
    async init() {
        console.log('[LoginRegisterEnhancedComponent] 初始化...');
        this.render();
        this.bindEvents();
        await this.loadThirdPartyProviders();
        console.log('[LoginRegisterEnhancedComponent] 完成');
    }
    
    render() {
        const html = `
            <div class="login-register-enhanced">
                <div class="auth-container">
                    <!-- 左侧：登录表单 -->
                    <div class="auth-form-section ${this.state.mode === 'login' ? 'active' : ''}" id="loginSection">
                        <h2>🔐 用户登录</h2>
                        
                        <form id="loginForm">
                            <div class="form-group">
                                <label>用户名/邮箱/手机号</label>
                                <input type="text" name="username" required placeholder="请输入用户名" />
                            </div>
                            
                            <div class="form-group">
                                <label>密码</label>
                                <input type="password" name="password" required placeholder="请输入密码" />
                            </div>
                            
                            <div class="form-group captcha-group">
                                <label>验证码</label>
                                <div class="captcha-row">
                                    <input type="text" name="captcha" required placeholder="输入验证码" />
                                    <img src="/captcha-placeholder.png" alt="验证码" class="captcha-image" />
                                </div>
                            </div>
                            
                            <div class="form-options">
                                <label><input type="checkbox" name="remember" /> 记住我</label>
                                <a href="#" class="link" onclick="window.auth.switchMode('forgot')">忘记密码？</a>
                            </div>
                            
                            <button type="submit" class="btn-primary btn-block">登录</button>
                            
                            <div class="third-party-login">
                                <p>或使用以下方式登录</p>
                                <div class="social-buttons" id="socialButtons">
                                    <!-- 动态生成 -->
                                </div>
                            </div>
                            
                            <div class="form-footer">
                                还没有账号？<a href="#" class="link" onclick="window.auth.switchMode('register')">立即注册</a>
                            </div>
                        </form>
                    </div>
                    
                    <!-- 右侧：注册表单 -->
                    <div class="auth-form-section ${this.state.mode === 'register' ? 'active' : ''}" id="registerSection" style="display:none;">
                        <h2>📝 用户注册</h2>
                        
                        <form id="registerForm">
                            <div class="form-group">
                                <label>用户名 *</label>
                                <input type="text" name="username" required placeholder="3-20 位字母或数字" pattern="[a-zA-Z0-9]{3,20}" />
                            </div>
                            
                            <div class="form-group">
                                <label>邮箱 *</label>
                                <input type="email" name="email" required placeholder="example@email.com" />
                            </div>
                            
                            <div class="form-group">
                                <label>手机号</label>
                                <input type="tel" name="phone" placeholder="+86 手机号" />
                            </div>
                            
                            <div class="form-group">
                                <label>密码 *</label>
                                <input type="password" name="password" required placeholder="8-20 位，包含字母和数字" minlength="8" />
                            </div>
                            
                            <div class="form-group">
                                <label>确认密码 *</label>
                                <input type="password" name="confirmPassword" required placeholder="再次输入密码" />
                            </div>
                            
                            <div class="form-group">
                                <label>验证码</label>
                                <div class="captcha-row">
                                    <input type="text" name="captcha" required placeholder="输入验证码" />
                                    <img src="/captcha-placeholder.png" alt="验证码" class="captcha-image" />
                                </div>
                            </div>
                            
                            <div class="form-options">
                                <label>
                                    <input type="checkbox" name="agree" required />
                                    我已阅读并同意《用户服务协议》和《隐私政策》
                                </label>
                            </div>
                            
                            <button type="submit" class="btn-primary btn-block">注册</button>
                            
                            <div class="form-footer">
                                已有账号？<a href="#" class="link" onclick="window.auth.switchMode('login')">立即登录</a>
                            </div>
                        </form>
                    </div>
                    
                    <!-- 忘记密码 -->
                    <div class="auth-form-section ${this.state.mode === 'forgot' ? 'active' : ''}" id="forgotSection" style="display:none;">
                        <h2>🔑 找回密码</h2>
                        
                        <form id="forgotForm">
                            <div class="form-group">
                                <label>注册邮箱</label>
                                <input type="email" name="email" required placeholder="请输入注册时使用的邮箱" />
                            </div>
                            
                            <div class="form-group">
                                <label>验证码</label>
                                <div class="verify-code-row">
                                    <input type="text" name="verifyCode" required placeholder="输入验证码" />
                                    <button type="button" class="btn-secondary" id="sendCodeBtn">发送验证码</button>
                                </div>
                            </div>
                            
                            <div class="form-group">
                                <label>新密码</label>
                                <input type="password" name="newPassword" required placeholder="8-20 位，包含字母和数字" minlength="8" />
                            </div>
                            
                            <div class="form-group">
                                <label>确认新密码</label>
                                <input type="password" name="confirmPassword" required placeholder="再次输入新密码" />
                            </div>
                            
                            <button type="submit" class="btn-primary btn-block">重置密码</button>
                            
                            <div class="form-footer">
                                <a href="#" class="link" onclick="window.auth.switchMode('login')">返回登录</a>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        `;
        
        if (this.container) {
            this.container.innerHTML = html;
            this.cacheElements();
        }
    }
    
    cacheElements() {
        this.elements = {
            loginSection: document.getElementById('loginSection'),
            registerSection: document.getElementById('registerSection'),
            forgotSection: document.getElementById('forgotSection'),
            loginForm: document.getElementById('loginForm'),
            registerForm: document.getElementById('registerForm'),
            forgotForm: document.getElementById('forgotForm'),
            sendCodeBtn: document.getElementById('sendCodeBtn'),
            socialButtons: document.getElementById('socialButtons')
        };
    }
    
    bindEvents() {
        // 登录表单提交
        this.elements.loginForm?.addEventListener('submit', (e) => {
            e.preventDefault();
            this.handleLogin(new FormData(e.target));
        });
        
        // 注册表单提交
        this.elements.registerForm?.addEventListener('submit', (e) => {
            e.preventDefault();
            this.handleRegister(new FormData(e.target));
        });
        
        // 忘记密码表单提交
        this.elements.forgotForm?.addEventListener('submit', (e) => {
            e.preventDefault();
            this.handleForgotPassword(new FormData(e.target));
        });
        
        // 发送验证码
        this.elements.sendCodeBtn?.addEventListener('click', () => {
            this.sendVerifyCode();
        });
    }
    
    async loadThirdPartyProviders() {
        try {
            const response = await fetch(`${this.options.apiBaseUrl}/auth/third-party-providers`);
            const data = await response.json();
            
            if (data.success) {
                this.state.thirdPartyProviders = data.providers || [];
                this.renderSocialButtons();
            }
        } catch (error) {
            console.error('加载第三方登录失败:', error);
        }
    }
    
    renderSocialButtons() {
        if (this.state.thirdPartyProviders.length === 0) {
            this.elements.socialButtons.innerHTML = '';
            return;
        }
        
        this.elements.socialButtons.innerHTML = this.state.thirdPartyProviders.map(provider => `
            <button class="btn-social btn-${provider.type}" onclick="window.auth.thirdPartyLogin('${provider.type}')">
                ${provider.icon} ${provider.name}
            </button>
        `).join('');
    }
    
    handleLogin(formData) {
        const data = Object.fromEntries(formData.entries());
        
        console.log('登录:', data);
        // TODO: 调用后端 API
        
        alert('✅ 登录成功！（演示模式）');
    }
    
    handleRegister(formData) {
        const data = Object.fromEntries(formData.entries());
        
        if (data.password !== data.confirmPassword) {
            alert('❌ 两次输入的密码不一致');
            return;
        }
        
        console.log('注册:', data);
        // TODO: 调用后端 API
        
        alert('✅ 注册成功！（演示模式）');
        this.switchMode('login');
    }
    
    handleForgotPassword(formData) {
        const data = Object.fromEntries(formData.entries());
        
        if (data.newPassword !== data.confirmPassword) {
            alert('❌ 两次输入的密码不一致');
            return;
        }
        
        console.log('重置密码:', data);
        // TODO: 调用后端 API
        
        alert('✅ 密码重置成功！');
        this.switchMode('login');
    }
    
    sendVerifyCode() {
        const email = this.elements.forgotForm.querySelector('input[name="email"]').value;
        
        if (!email) {
            alert('请先输入邮箱');
            return;
        }
        
        console.log('发送验证码到:', email);
        // TODO: 调用后端 API
        
        alert('✅ 验证码已发送到邮箱（演示模式）');
    }
    
    switchMode(mode) {
        this.state.mode = mode;
        
        this.elements.loginSection.style.display = mode === 'login' ? 'block' : 'none';
        this.elements.registerSection.style.display = mode === 'register' ? 'block' : 'none';
        this.elements.forgotSection.style.display = mode === 'forgot' ? 'block' : 'none';
    }
    
    thirdPartyLogin(providerType) {
        console.log('第三方登录:', providerType);
        // TODO: 实现第三方登录逻辑
        
        alert(`正在跳转到${providerType}登录...（演示模式）`);
    }
    
    destroy() {
        this.container = null;
    }
}

// 全局注册
window.auth = null;

// 自动初始化
document.addEventListener('DOMContentLoaded', () => {
    const container = document.getElementById('login-register-enhanced-container');
    if (container) {
        window.auth = new LoginRegisterEnhancedComponent('login-register-enhanced-container');
    }
});