<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <link rel="icon" href="{{ site_branding.favicon_url }}">
  <title>重置密码 - {{ site_branding.browser_title }}</title>
  <style>
    * { box-sizing: border-box; }
    body {
      margin: 0;
      font-family: Arial, "Microsoft YaHei", sans-serif;
      background: #f5f5f7;
      color: #222;
    }
    .wrap {
      width: 460px;
      margin: 80px auto;
      background: #fff;
      padding: 32px;
      border-radius: 18px;
      box-shadow: 0 2px 12px rgba(0,0,0,.08);
    }
    h1 {
      margin-top: 0;
      margin-bottom: 8px;
      text-align: center;
      font-size: 30px;
      font-weight: 800;
    }
    .sub {
      text-align: center;
      color: #666;
      font-size: 14px;
      margin-bottom: 24px;
      line-height: 1.8;
    }
    input {
      width: 100%;
      height: 46px;
      margin-bottom: 14px;
      padding: 0 12px;
      border: 1px solid #ddd;
      border-radius: 10px;
      font-size: 15px;
      outline: none;
    }
    input:focus { border-color: #111; }
    button {
      width: 100%;
      height: 46px;
      border: none;
      border-radius: 10px;
      background: #111;
      color: #fff;
      cursor: pointer;
      font-size: 15px;
      font-weight: 700;
    }
    .msg {
      margin: 12px 0;
      padding: 10px 12px;
      border-radius: 10px;
      font-size: 14px;
      display: none;
      line-height: 1.7;
    }
    .ok { background: #f2fff4; color: #157a28; }
    .err { background: #fff3f3; color: #c40000; }
    .links {
      margin-top: 18px;
      text-align: center;
      font-size: 14px;
      color: #666;
    }
    .links a {
      color: #111;
      text-decoration: none;
      font-weight: 700;
    }
  </style>
</head>
<body>
  <div class="topbar" style="background:#111;color:#fff;padding:14px 24px;border-bottom:1px solid rgba(255,255,255,0.06);">
    <div class="topbar-inner" style="width:1200px;max-width:calc(100vw - 48px);margin:0 auto;display:flex;justify-content:space-between;align-items:center;gap:24px;">
      <div class="topbar-brand">
        <a href="/" style="color:#fff;font-size:20px;font-weight:800;text-decoration:none;">{{ site_branding.site_name }}</a>
      </div>
      <div class="topbar-links" style="display:flex;align-items:center;gap:18px;flex-wrap:wrap;justify-content:flex-end;">
        <a href="/" style="color:#f3f3f3;font-size:14px;text-decoration:none;">首页</a>
        <a href="/login" style="color:#f3f3f3;font-size:14px;text-decoration:none;">登录</a>
      </div>
    </div>
  </div>
  <div class="wrap">
    <h1>重置密码</h1>
    <div class="sub">
      请输入注册邮箱。<br>
      如果这是 Firebase 邮箱账号，系统会发送重置密码邮件。
    </div>

    <div id="ok" class="msg ok"></div>
    <div id="err" class="msg err"></div>

    <input id="email" type="email" placeholder="请输入注册邮箱" />
    <button id="resetBtn">发送重置邮件</button>

    <div class="links">
      <a href="/login">返回登录</a>
    </div>
  </div>

  <script type="module">
    import { initializeApp } from "https://www.gstatic.com/firebasejs/10.12.5/firebase-app.js";
    import { getAuth, sendPasswordResetEmail } from "https://www.gstatic.com/firebasejs/10.12.5/firebase-auth.js";

    const firebaseConfig = {{ firebase_config|tojson }};
    const app = initializeApp(firebaseConfig);
    const auth = getAuth(app);

    const okBox = document.getElementById("ok");
    const errBox = document.getElementById("err");

    function showOk(msg) {
      okBox.style.display = "block";
      errBox.style.display = "none";
      okBox.textContent = msg;
    }

    function showErr(msg) {
      errBox.style.display = "block";
      okBox.style.display = "none";
      errBox.textContent = msg;
    }

    document.getElementById("resetBtn").addEventListener("click", async () => {
      const email = document.getElementById("email").value.trim();

      if (!email) {
        showErr("请输入邮箱");
        return;
      }

      try {
        await sendPasswordResetEmail(auth, email);
        showOk("重置密码邮件已发送，请到邮箱查收。");
      } catch (e) {
        showErr("发送失败：该邮箱可能不是 Firebase 注册账号，或邮箱不存在。");
      }
    });
  </script>
</body>
</html>
