<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录 - 浙江欧众定价计算器</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        
        :root {
            --primary: #005BFF;
            --primary-dark: #0040CC;
            --danger: #ef4444;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }
        
        .login-container {
            background: white;
            border-radius: 24px;
            padding: 48px;
            width: 100%;
            max-width: 420px;
            box-shadow: 0 20px 60px rgba(0,0,0,0.3);
        }
        
        .logo {
            text-align: center;
            margin-bottom: 32px;
        }
        
        .logo-icon {
            width: 72px;
            height: 72px;
            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
            border-radius: 50%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 36px;
            margin-bottom: 16px;
        }
        
        .logo h1 {
            font-size: 24px;
            color: #1a1a2e;
            font-weight: 700;
        }
        
        .logo p {
            font-size: 14px;
            color: #6b7280;
            margin-top: 8px;
        }
        
        .tabs {
            display: flex;
            gap: 0;
            margin-bottom: 28px;
            border-bottom: 2px solid #e5e7eb;
        }
        
        .tab {
            flex: 1;
            padding: 12px;
            text-align: center;
            font-size: 15px;
            font-weight: 600;
            color: #9ca3af;
            cursor: pointer;
            border: none;
            background: none;
            border-bottom: 2px solid transparent;
            margin-bottom: -2px;
            transition: all 0.2s;
        }
        
        .tab.active {
            color: var(--primary);
            border-bottom-color: var(--primary);
        }
        
        .form-panel { display: none; }
        .form-panel.active { display: block; }
        
        .form-group {
            margin-bottom: 20px;
        }
        
        .form-label {
            display: block;
            font-size: 13px;
            font-weight: 600;
            color: #374151;
            margin-bottom: 8px;
        }
        
        .form-input {
            width: 100%;
            padding: 14px 16px;
            border: 2px solid #e5e7eb;
            border-radius: 12px;
            font-size: 15px;
            transition: all 0.2s;
            outline: none;
        }
        
        .form-input:focus {
            border-color: var(--primary);
            box-shadow: 0 0 0 4px rgba(0, 91, 255, 0.1);
        }
        
        .form-input::placeholder {
            color: #9ca3af;
        }
        
        .pw-wrap {
            position: relative;
        }
        
        .pw-wrap input {
            width: 100%;
            padding-right: 48px;
        }
        
        .pw-toggle {
            position: absolute;
            right: 16px;
            top: 50%;
            transform: translateY(-50%);
            cursor: pointer;
            color: #9ca3af;
            font-size: 18px;
            user-select: none;
        }
        
        .error-msg {
            padding: 12px 16px;
            background: #fef2f2;
            border: 1px solid #fecaca;
            border-radius: 10px;
            color: var(--danger);
            font-size: 13px;
            margin-bottom: 20px;
            display: none;
        }
        
        .error-msg.show { display: block; }
        
        .submit-btn {
            width: 100%;
            padding: 16px;
            border: none;
            border-radius: 12px;
            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
            color: white;
            font-size: 16px;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.2s;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }
        
        .submit-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 24px rgba(0, 91, 255, 0.3);
        }
        
        .submit-btn:active {
            transform: translateY(0);
        }
        
        .submit-btn:disabled {
            opacity: 0.6;
            cursor: not-allowed;
            transform: none;
        }
        
        .spinner {
            width: 20px;
            height: 20px;
            border: 2px solid rgba(255,255,255,0.3);
            border-top-color: white;
            border-radius: 50%;
            animation: spin 0.6s linear infinite;
        }
        
        @keyframes spin { to { transform: rotate(360deg); } }
        
        .tip {
            text-align: center;
            margin-top: 24px;
            font-size: 13px;
            color: #6b7280;
        }
        
        .tip a {
            color: var(--primary);
            text-decoration: none;
            font-weight: 600;
        }
        
        .tip a:hover {
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <div class="login-container">
        <div class="logo">
            <div class="logo-icon">🐻</div>
            <h1>OZON记账助手</h1>
            <p>精准掌控Ozon店铺利润</p>
        </div>
        
        <div class="tabs">
            <button class="tab active" onclick="switchTab('login')">登录</button>
            <button class="tab" onclick="switchTab('register')">注册</button>
        </div>
        
        <div class="error-msg" id="loginError"></div>
        
        <div class="form-panel active" id="loginPanel">
            <div class="form-group">
                <label class="form-label">手机号</label>
                <input type="tel" class="form-input" id="loginPhone" placeholder="请输入手机号" maxlength="11">
            </div>
            <div class="form-group">
                <label class="form-label">密码</label>
                <div class="pw-wrap">
                    <input type="password" class="form-input" id="loginPassword" placeholder="请输入密码">
                    <span class="pw-toggle" onclick="togglePassword('loginPassword')">👁</span>
                </div>
            </div>
            <button class="submit-btn" id="loginBtn" onclick="doLogin()">
                登录
            </button>
        </div>
        
        <div class="form-panel" id="registerPanel">
            <div class="form-group">
                <label class="form-label">激活码</label>
                <input type="text" class="form-input" id="regCode" placeholder="请输入激活码">
            </div>
            <div class="form-group">
                <label class="form-label">手机号</label>
                <input type="tel" class="form-input" id="regPhone" placeholder="请输入手机号" maxlength="11">
            </div>
            <div class="form-group">
                <label class="form-label">密码</label>
                <div class="pw-wrap">
                    <input type="password" class="form-input" id="regPassword" placeholder="请输入密码（至少6位）">
                    <span class="pw-toggle" onclick="togglePassword('regPassword')">👁</span>
                </div>
            </div>
            <button class="submit-btn" id="regBtn" onclick="doRegister()">
                注册
            </button>
        </div>
        
        <div class="tip">
            <a href="https://www.ku9.top" target="_blank">访问官网</a> · 
            忘记密码请联系客服
        </div>
    </div>
    
    <script>
        const API_BASE = 'api/';
        
        function switchTab(tab) {
            document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
            document.querySelectorAll('.form-panel').forEach(p => p.classList.remove('active'));
            
            if (tab === 'login') {
                document.querySelector('.tab:nth-child(1)').classList.add('active');
                document.getElementById('loginPanel').classList.add('active');
            } else {
                document.querySelector('.tab:nth-child(2)').classList.add('active');
                document.getElementById('registerPanel').classList.add('active');
            }
            
            hideError();
        }
        
        function togglePassword(id) {
            const input = document.getElementById(id);
            input.type = input.type === 'password' ? 'text' : 'password';
        }
        
        function showError(msg) {
            const el = document.getElementById('loginError');
            el.textContent = msg;
            el.classList.add('show');
        }
        
        function hideError() {
            document.getElementById('loginError').classList.remove('show');
        }
        
        function setLoading(btnId, loading) {
            const btn = document.getElementById(btnId);
            if (loading) {
                btn.disabled = true;
                btn.innerHTML = '<div class="spinner"></div>处理中...';
            } else {
                btn.disabled = false;
                btn.innerHTML = btnId === 'loginBtn' ? '登录' : '注册';
            }
        }
        
        async function doLogin() {
            const phone = document.getElementById('loginPhone').value.trim();
            const password = document.getElementById('loginPassword').value;
            
            hideError();
            
            if (!phone || !password) {
                showError('请输入手机号和密码');
                return;
            }
            
            if (!/^1[3-9]\d{9}$/.test(phone)) {
                showError('请输入正确的手机号格式');
                return;
            }
            
            setLoading('loginBtn', true);
            
            try {
                const response = await fetch(API_BASE + 'auth.php', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ username: phone, password })
                });
                
                const data = await response.json();
                
                if (data.code === 200 && data.data) {
                    localStorage.setItem('token', data.data.token);
                    localStorage.setItem('user', JSON.stringify(data.data));
                    window.location.href = 'index.html';
                } else {
                    showError(data.msg || '登录失败，请检查手机号和密码');
                }
            } catch (e) {
                console.error('登录请求失败:', e);
                showError('网络错误，请稍后重试（' + e.message + '）');
            } finally {
                setLoading('loginBtn', false);
            }
        }
        
        async function doRegister() {
            const code = document.getElementById('regCode').value.trim();
            const phone = document.getElementById('regPhone').value.trim();
            const password = document.getElementById('regPassword').value;
            
            hideError();
            
            if (!code) {
                showError('请输入激活码');
                return;
            }
            
            if (!phone) {
                showError('请输入手机号');
                return;
            }
            
            if (!/^1[3-9]\d{9}$/.test(phone)) {
                showError('请输入正确的手机号格式');
                return;
            }
            
            if (!password || password.length < 6) {
                showError('密码至少6位');
                return;
            }
            
            setLoading('regBtn', true);
            
            try {
                const response = await fetch(API_BASE + 'auth.php', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({
                        activationCode: code,
                        adminUsername: phone,
                        adminPassword: password
                    })
                });
                
                const data = await response.json();
                
                if (data.code === 200 && data.data) {
                    localStorage.setItem('token', data.data.token);
                    localStorage.setItem('user', JSON.stringify(data.data));
                    window.location.href = 'index.html';
                } else {
                    showError(data.msg || '注册失败');
                }
            } catch (e) {
                console.error('注册请求失败:', e);
                showError('网络错误，请稍后重试（' + e.message + '）');
            } finally {
                setLoading('regBtn', false);
            }
        }
        
        if (localStorage.getItem('token')) {
            window.location.href = 'index.html';
        }
    </script>
</body>
</html>
