<!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:24px;
      text-align:center;
      font-size:30px;
      font-weight:800;
    }
    .sub {
      text-align:center;
      color:#666;
      font-size:14px;
      margin-bottom:24px;
    }
    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;
    }
    .home-link {
      margin-top:18px;
      text-align:center;
      font-size:14px;
    }
    .home-link a {
      color:#111;
      text-decoration:none;
    }
  
        .topbar {
            background: #111;
            color: #fff;
            padding: 14px 24px;
            border-bottom: 1px solid rgba(255,255,255,0.06);
        }

        .topbar-inner {
            width: 1200px;
            max-width: calc(100vw - 48px);
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 24px;
        }

        .topbar-brand a {
            color: #fff;
            font-size: 20px;
            font-weight: 800;
            letter-spacing: 0.2px;
            text-decoration: none;
            white-space: nowrap;
        }

        .topbar-links {
            display: flex;
            align-items: center;
            gap: 18px;
            flex-wrap: wrap;
            justify-content: flex-end;
        }

        .topbar-links a,
        .topbar-links span {
            color: #f3f3f3;
            font-size: 14px;
            line-height: 1;
            text-decoration: none;
            white-space: nowrap;
        }

        .topbar-links a:hover {
            color: #ffffff;
        }

        .topbar-user {
            padding: 8px 12px;
            background: rgba(255,255,255,0.08);
            border-radius: 999px;
        }

    </style>
</head>
<body>

    <div class="topbar">
        <div class="topbar-inner">
            <div class="topbar-brand">
                <a href="/">{{ site_branding.site_name }}</a>
            </div>
            <div class="topbar-links">
                <a href="/">首页</a>
                <a href="/products">全部商品</a>
                {% if session.get("biz_username") %}
                    <a href="/cart">购物车</a>
                    <a href="/orders">我的订单</a>
                    <a href="/wallet">我的钱包</a>
                    <a href="/addresses">地址管理</a>
                    <a href="/account">用户主页</a>
                    <span class="topbar-user">你好，{{ session.get("biz_username") }}</span>
                    <a href="/logout">退出</a>
                {% else %}
                    <a href="/login">登录</a>
                    <a href="/register">注册</a>
                {% endif %}
            </div>
        </div>
    </div>

  <div class="wrap">
    <h1>邮箱注册</h1>
    <div class="sub">注册成功后需要先验证邮箱，才能登录网站</div>

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

    <input id="email" type="email" placeholder="邮箱" />
    <input id="password" type="password" placeholder="密码" />
    <button id="registerBtn">注册</button>

    <div class="links">
      已有账号？<a href="/firebase-login">去登录</a>
    </div>

    <div class="home-link">
      <a href="/">返回首页</a>
    </div>
  </div>

  <script type="module">
  import { initializeApp } from "https://www.gstatic.com/firebasejs/10.12.5/firebase-app.js";
  import {
    getAuth,
    createUserWithEmailAndPassword,
    signInWithEmailAndPassword,
    sendEmailVerification,
    signOut
  } 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");
  const registerBtn = document.getElementById("registerBtn");

  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;
  }

  function setLoading(loading) {
    if (!registerBtn) return;
    registerBtn.disabled = !!loading;
    registerBtn.classList.toggle("loading", !!loading);
  }

  function normalizeFirebaseError(e) {
    const code = e?.code || "";
    if (code === "auth/email-already-in-use") return "该邮箱已注册。若你尚未完成邮箱验证，系统会尝试重新发送验证邮件。";
    if (code === "auth/invalid-email") return "邮箱格式不正确。";
    if (code === "auth/weak-password") return "密码强度不足，请至少使用 6 位并尽量包含更复杂字符。";
    if (code === "auth/invalid-credential") return "邮箱或密码不正确。";
    if (code === "auth/too-many-requests") return "请求过于频繁，请稍后再试。";
    return e?.message || "操作失败，请稍后重试。";
  }

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

    if (!email || !password) {
      showErr("请填写邮箱和密码");
      return;
    }

    setLoading(true);
    try {
      const cred = await createUserWithEmailAndPassword(auth, email, password);
      await sendEmailVerification(cred.user);
      await signOut(auth);
      showOk("注册成功，验证邮件已发送。请先去邮箱完成验证，再回来登录。");
      return;
    } catch (e) {
      if (e?.code === "auth/email-already-in-use") {
        try {
          const cred = await signInWithEmailAndPassword(auth, email, password);
          if (!cred.user.emailVerified) {
            await sendEmailVerification(cred.user);
            await signOut(auth);
            showOk("该邮箱已注册但尚未完成验证，系统已重新发送验证邮件，请去邮箱完成验证后再登录。");
            return;
          } else {
            await signOut(auth);
            showErr("该邮箱已注册并已验证，请直接前往登录页登录。");
            return;
          }
        } catch (signInErr) {
          showErr("该邮箱已被注册。若这是你的账号，请确认密码是否正确；若忘记密码，请使用重置密码功能。");
          return;
        }
      }

      showErr(normalizeFirebaseError(e));
    } finally {
      setLoading(false);
    }
  });
</script>
</body>
</html>
