{{--
    文件功能：前台独立邮箱找回密码页面
    说明：提供邮箱输入、发送重置链接与返回首页入口，不使用弹窗
--}}
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>{{ $systemName }} - 邮箱找回密码</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700;900&family=Noto+Serif+SC:wght@700;900&display=swap" rel="stylesheet">
    <style>
        :root {
            --bg: #0c0d0c;
            --panel: rgba(20, 17, 14, 0.94);
            --panel-soft: rgba(255, 248, 236, 0.05);
            --text: #f4ebdc;
            --text-soft: rgba(244, 235, 220, 0.7);
            --border: rgba(198, 163, 91, 0.24);
            --red: #7d231c;
            --red-deep: #57140f;
            --gold: #c6a35b;
            --success: #34553e;
            --danger: #8f2e27;
        }

        * {
            box-sizing: border-box;
        }

        body {
            margin: 0;
            min-height: 100vh;
            display: grid;
            place-items: center;
            padding: 18px;
            background:
                radial-gradient(circle at 10% 16%, rgba(198, 163, 91, 0.12), transparent 24%),
                radial-gradient(circle at 90% 86%, rgba(125, 35, 28, 0.15), transparent 22%),
                linear-gradient(145deg, #090b09, #161915 46%, #0c0d0c 100%);
            color: var(--text);
            font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif;
        }

        .card {
            width: min(540px, 100%);
            border: 1px solid rgba(198, 163, 91, 0.28);
            background: var(--panel);
            box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
            position: relative;
            overflow: hidden;
        }

        .card::before {
            content: "";
            position: absolute;
            inset: 0 0 auto;
            height: 6px;
            background: linear-gradient(90deg, var(--red-deep), var(--gold), #55604c);
        }

        .content {
            padding: 28px 24px 22px;
        }

        .eyebrow {
            font-size: 12px;
            letter-spacing: 0.18em;
            color: rgba(198, 163, 91, 0.8);
        }

        h1 {
            margin: 10px 0 8px;
            font-family: "Noto Serif SC", serif;
            font-size: clamp(30px, 5vw, 40px);
            line-height: 1.15;
        }

        .lead {
            margin: 0 0 20px;
            color: var(--text-soft);
            line-height: 1.75;
            font-size: 14px;
        }

        .alert {
            display: none;
            margin-bottom: 16px;
            padding: 10px 12px;
            border-left: 4px solid transparent;
            line-height: 1.7;
            font-size: 13px;
        }

        .alert-error {
            background: rgba(143, 46, 39, 0.08);
            border-color: var(--danger);
            color: #f5cbc7;
        }

        .alert-success {
            background: rgba(52, 85, 62, 0.12);
            border-color: var(--success);
            color: #d8f0df;
        }

        label {
            display: block;
            margin-bottom: 8px;
            font-size: 13px;
            font-weight: 700;
        }

        input {
            width: 100%;
            height: 48px;
            padding: 0 14px;
            border: 1px solid var(--border);
            background: var(--panel-soft);
            color: var(--text);
            font-size: 14px;
        }

        input:focus {
            outline: none;
            border-color: rgba(198, 163, 91, 0.56);
            box-shadow: 0 0 0 3px rgba(198, 163, 91, 0.08);
        }

        .tip {
            margin-top: 10px;
            color: var(--text-soft);
            font-size: 12px;
            line-height: 1.75;
        }

        .actions {
            display: grid;
            grid-template-columns: minmax(0, 1fr) 120px;
            gap: 10px;
            margin-top: 18px;
        }

        button,
        .ghost-link {
            height: 50px;
            border: 1px solid transparent;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            text-decoration: none;
            font-weight: 700;
            font-size: 15px;
            cursor: pointer;
        }

        button {
            background: linear-gradient(90deg, var(--red-deep), var(--red), #8d342d);
            color: #f6eddc;
        }

        button:disabled {
            opacity: 0.65;
            cursor: not-allowed;
        }

        .ghost-link {
            border-color: var(--border);
            color: var(--text);
            background: var(--panel-soft);
        }

        .footer {
            margin-top: 18px;
            color: rgba(244, 235, 220, 0.6);
            font-size: 12px;
            line-height: 1.7;
        }

        @media (max-width: 640px) {
            .content {
                padding: 22px 18px 18px;
            }

            .actions {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>

<body>
    <main class="card">
        <section class="content">
            <div class="eyebrow">PASSWORD RECOVERY</div>
            <h1>邮箱找回密码</h1>
            <p class="lead">请输入账号已绑定的邮箱地址。系统会把重置密码链接发送到邮箱，您再进入独立页面设置新密码。</p>

            <div id="alert-box" class="alert" aria-live="polite"></div>

            <form id="password-recovery-form">
                <label for="email">绑定邮箱</label>
                <input
                    id="email"
                    name="email"
                    type="email"
                    maxlength="255"
                    placeholder="请输入账号绑定的邮箱地址"
                    autocomplete="email"
                    {{ $smtpEnabled ? '' : 'disabled' }}
                    required
                >
                <div class="tip">仅支持已绑定唯一邮箱的账号自助找回。重置链接默认 60 分钟内有效。</div>

                <div class="actions">
                    <button id="submit-btn" type="submit" {{ $smtpEnabled ? '' : 'disabled' }}>发送重置邮件</button>
                    <a class="ghost-link" href="{{ route('home') }}">返回首页</a>
                </div>
            </form>

            <div class="footer">
                @if ($smtpEnabled)
                    找回成功后，请回到首页使用原昵称和新密码登录聊天室。
                @else
                    当前系统尚未开启邮箱发信服务，暂时无法通过邮箱找回密码。
                @endif
            </div>
        </section>
    </main>

    <script>
        const form = document.getElementById('password-recovery-form');
        const submitButton = document.getElementById('submit-btn');
        const alertBox = document.getElementById('alert-box');

        function showAlert(message, type) {
            alertBox.textContent = message;
            alertBox.className = type === 'success' ? 'alert alert-success' : 'alert alert-error';
            alertBox.style.display = 'block';
        }

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

                submitButton.disabled = true;
                submitButton.innerText = '发送中...';
                alertBox.style.display = 'none';

                const data = Object.fromEntries(new FormData(form).entries());

                fetch('{{ route('password.email') }}', {
                    method: 'POST',
                    credentials: 'same-origin',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                        'Accept': 'application/json',
                    },
                    body: JSON.stringify(data),
                })
                    .then(function(response) {
                        return response.json().then(function(body) {
                            return {
                                status: response.status,
                                body: body,
                            };
                        });
                    })
                    .then(function(result) {
                        if (result.status === 200 && result.body.status === 'success') {
                            showAlert(result.body.message, 'success');
                            form.reset();
                            return;
                        }

                        const errorMessage =
                            result.body.message ||
                            (result.body.errors ? Object.values(result.body.errors)[0][0] : '邮件发送失败，请稍后重试。');

                        showAlert(errorMessage, 'error');
                    })
                    .catch(function() {
                        showAlert('网络或服务器异常，请稍后再试。', 'error');
                    })
                    .finally(function() {
                        submitButton.disabled = false;
                        submitButton.innerText = '发送重置邮件';
                    });
            });
        }
    </script>
</body>

</html>
