<?php viewLoad('public/header'); ?>
<style>
body { display: flex; align-items: center; justify-content: center; background: #f0f3f7; font-family: "Microsoft YaHei", Arial, sans-serif; }
.login-box { width: 340px; padding: 32px; background: #fff; border-radius: 6px; box-shadow: 0 4px 20px rgba(0,0,0,.08); }
.login-box h1 { margin: 0 0 20px; font-size: 20px; color: #0C6C9E; text-align: center; }
.login-field { margin-bottom: 14px; }
.login-field input[type="text"], .login-field input[type="password"] {
    width: 100%; box-sizing: border-box; padding: 8px 10px; border: 1px solid #ccc; border-radius: 4px; font-size: 14px;
}
.captcha-row { display: flex; gap: 8px; }
.captcha-row input { flex: 1; }
.captcha-row img { height: 36px; cursor: pointer; border: 1px solid #ccc; border-radius: 4px; }
.login-row-between { display: flex; justify-content: space-between; align-items: center; font-size: 13px; margin-bottom: 14px; }
.login-submit { width: 100%; padding: 9px; background: #0C6C9E; color: #fff; border: none; border-radius: 4px; font-size: 15px; cursor: pointer; }
.login-submit:hover { background: #095580; }
.login-error { color: #d0312d; font-size: 13px; margin-bottom: 10px; text-align: center; }
.login-lang { text-align: right; font-size: 13px; margin-bottom: 8px; }
.login-lang a { color: #0C6C9E; text-decoration: none; margin-left: 8px; }
.forgot-link { color: #0C6C9E; cursor: pointer; }
.dx-popup-content { padding: 16px; }
</style>

<div class="login-box">
    <div class="login-lang">
        <a href="?lang=zh-CN">中文</a>
        <a href="?lang=en">English</a>
    </div>
    <h1>PDC <?=lg('系统登录')?></h1>

    <?php
    $error = $_GET['error'] ?? '';
    $errorMap = [
        'captcha'     => lg('验证码错误'),
        'credentials' => lg('用户名或密码错误'),
        'disabled'    => lg('账号已禁用'),
        'locked'      => lg('密码连续错误次数过多，该IP已被临时锁定，请{minutes}分钟后再试'),
    ];
    if ($error === 'locked') {
        $errorMap['locked'] = str_replace('{minutes}', (string) ($_GET['minutes'] ?? ''), $errorMap['locked']);
    }
    ?>
    <?php if (isset($errorMap[$error])): ?>
        <div class="login-error"><?=htmlspecialchars($errorMap[$error])?></div>
    <?php endif; ?>

    <form method="post" action="<?=HOST?>/login/doLogin" autocomplete="on">
        <div class="login-field">
            <input type="text" name="username" placeholder="<?=lg('用户名')?>" autocomplete="username" required>
        </div>
        <div class="login-field">
            <input type="password" name="password" placeholder="<?=lg('密码')?>" autocomplete="current-password" required>
        </div>
        <?php if ($requireCaptcha): ?>
        <div class="login-field captcha-row">
            <input type="text" name="captcha" placeholder="<?=lg('验证码')?>" autocomplete="off" required>
            <img id="captchaImg" src="<?=HOST?>/login/captcha" title="<?=lg('点击刷新验证码')?>">
        </div>
        <?php endif; ?>
        <div class="login-row-between">
            <label><input type="checkbox" name="remember" value="1"> <?=lg('记住我')?></label>
            <span class="forgot-link" id="forgotLink"><?=lg('忘记密码')?></span>
        </div>
        <button type="submit" class="login-submit"><?=lg('登录')?></button>
    </form>
</div>

<script>
$(function () {
    $('#captchaImg').on('click', function () {
        $(this).attr('src', '<?=HOST?>/login/captcha?_=' + Date.now());
    });

    var lang = {
        forgotTitle: <?=json_encode(lg('忘记密码'), JSON_UNESCAPED_UNICODE)?>,
        usernameOrEmail: <?=json_encode(lg('用户名或邮箱'), JSON_UNESCAPED_UNICODE)?>,
        send: <?=json_encode(lg('发送'), JSON_UNESCAPED_UNICODE)?>,
        cancel: <?=json_encode(lg('取消'), JSON_UNESCAPED_UNICODE)?>,
        sentTip: <?=json_encode(lg('如该账号存在，重置密码邮件已发送，请查看邮箱'), JSON_UNESCAPED_UNICODE)?>,
        pleaseInput: <?=json_encode(lg('请输入用户名或邮箱'), JSON_UNESCAPED_UNICODE)?>
    };

    $('#forgotLink').on('click', function () {
        var value = '';
        var $container = $('<div>').css('padding', '4px');
        var $input = $('<div>').appendTo($container);
        var $tip = $('<div>').css({ color: '#999', fontSize: '12px', marginTop: '8px' }).appendTo($container);

        $input.dxTextBox({
            placeholder: lang.usernameOrEmail,
            onValueChanged: function (e) { value = e.value; }
        });

        var $popup = $('<div>').appendTo('body').dxPopup({
            title: lang.forgotTitle,
            visible: true,
            width: 320,
            height: 180,
            showCloseButton: true,
            contentTemplate: function () { return $container; },
            toolbarItems: [
                {
                    widget: 'dxButton', location: 'after', toolbar: 'bottom',
                    options: {
                        text: lang.send,
                        onClick: function () {
                            if (!value) {
                                $tip.text(lang.pleaseInput);
                                return;
                            }
                            $.ajax({
                                url: '<?=HOST?>/login/forgotPassword',
                                method: 'POST',
                                contentType: 'application/json',
                                data: JSON.stringify({ usernameOrEmail: value })
                            }).then(function () {
                                $tip.text(lang.sentTip);
                            });
                        }
                    }
                },
                {
                    widget: 'dxButton', location: 'after', toolbar: 'bottom',
                    options: { text: lang.cancel, onClick: function () { $popup.dxPopup('instance').hide(); } }
                }
            ],
            onHidden: function () {
                $popup.dxPopup('instance').dispose();
                $popup.remove();
            }
        });
    });
});
</script>
<?php viewLoad('public/footer'); ?>
