<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>登录</title>
    <script>
        (function () {
            var token = localStorage.getItem('pb_manage_token') || ''
            var isLoggedIn = localStorage.getItem('pb_manage_logged_in') === '1'
            if (token && isLoggedIn) {
                window.location.replace('/pb/manage')
            }
        })()
    </script>
    <style>
        body {
            margin: 0;
            font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
            background: linear-gradient(180deg, #eff6ff 0%, #f8fafc 100%);
            color: #1f2937;
        }
        .wrap {
            max-width: 1440px;
            margin: 0 auto;
            padding: 34px 14px;
        }
        .card {
            max-width: 420px;
            margin: 0 auto;
            background: #fff;
            border: 1px solid #dbe3f0;
            border-radius: 18px;
            padding: 22px;
            box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
        }
        h1 { margin-top: 0; }
        p { line-height: 1.8; color: #4b5563; margin-bottom: 20px; }
        .field { margin-bottom: 14px; }
        .field label { display: block; margin-bottom: 8px; color: #334155; font-weight: 600; }
        .field input {
            width: 100%;
            border: 1px solid #cbd5e1;
            border-radius: 12px;
            padding: 10px 12px;
            font-size: 14px;
            box-sizing: border-box;
        }
        .btn {
            width: 100%;
            border: none;
            border-radius: 12px;
            padding: 11px 14px;
            font-size: 15px;
            font-weight: 700;
            background: #2563eb;
            color: #fff;
            cursor: pointer;
        }
        .status { margin-top: 12px; min-height: 22px; font-size: 14px; }
        .status.error { color: #b91c1c; }
        .status.success { color: #15803d; }
    </style>
    {{ template "theme_head" . }}
</head>
<body>
    <main class="wrap">
        <section class="card">
            <h1>后台登录</h1>
            <p>请输入平台账号（邮箱或手机号）与密码，登录成功后会自动跳转到管理首页。</p>
            <form id="loginForm">
                <div class="field">
                    <label for="account">登录账号</label>
                    <input id="account" name="account" placeholder="邮箱或手机号" required />
                </div>
                <div class="field">
                    <label for="password">密码</label>
                    <input id="password" name="password" type="password" placeholder="请输入密码" required />
                </div>
                <button class="btn" id="submitBtn" type="submit">登录</button>
            </form>
            <div id="status" class="status"></div>
        </section>
    </main>
    <script>
        (function () {
            var API_BASE = '/pb/api'
            var form = document.getElementById('loginForm')
            var accountInput = document.getElementById('account')
            var passwordInput = document.getElementById('password')
            var statusEl = document.getElementById('status')
            var submitBtn = document.getElementById('submitBtn')

            function setStatus(message, type) {
                statusEl.textContent = message || ''
                statusEl.className = 'status' + (type ? ' ' + type : '')
            }

            form.addEventListener('submit', async function (event) {
                event.preventDefault()

                var loginAccount = accountInput.value.trim()
                var password = passwordInput.value
                if (!loginAccount || !password) {
                    setStatus('请填写账号和密码', 'error')
                    return
                }

                submitBtn.disabled = true
                submitBtn.textContent = '登录中...'
                setStatus('正在登录，请稍候...', '')

                try {
                    var response = await fetch(API_BASE + '/platform/login', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                        },
                        body: JSON.stringify({
                            login_account: loginAccount,
                            password: password,
                        }),
                    })

                    var result = await response.json()
                    if (!response.ok || !result || result.code >= 400) {
                        throw new Error((result && result.msg) || '登录失败')
                    }

                    var token = result.token || (result.data && result.data.token) || ''
                    if (!token) {
                        throw new Error('登录成功但未获取到 token')
                    }

                    localStorage.setItem('pb_manage_token', token)
                    localStorage.setItem('pb_manage_logged_in', '1')
                    localStorage.setItem('pb_manage_login_account', loginAccount)
                    localStorage.setItem('pb_manage_login_time', new Date().toISOString())

                    setStatus('登录成功，正在跳转...', 'success')
                    window.location.replace('/pb/manage')
                } catch (error) {
                    localStorage.removeItem('pb_manage_token')
                    localStorage.removeItem('pb_manage_logged_in')
                    setStatus(error.message || '登录失败', 'error')
                } finally {
                    submitBtn.disabled = false
                    submitBtn.textContent = '登录'
                }
            })
        })()
    </script>
    {{ template "theme_body" . }}
</body>
</html>