// login.jsx — Sign in / Sign up
const { useState: useStateLg, useEffect: useEffectLg, useRef: useRefLg } = React;

function LoginPage({ onPage, tweaks }) {
  const [mode, setMode] = useStateLg("signin"); // signin | signup
  const [step, setStep] = useStateLg("form"); // form | sent
  const [email, setEmail] = useStateLg("");
  const [pw, setPw] = useStateLg("");
  const [pwMode, setPwMode] = useStateLg("magic"); // magic | password
  const canvasRef = useRefLg(null);

  useEffectLg(() => {
    if (!canvasRef.current) return;
    const css = getComputedStyle(document.documentElement);
    const accent = css.getPropertyValue("--accent").trim() || "#5E6AD2";
    const accent2 = css.getPropertyValue("--accent-2").trim() || "#7C8CFF";
    const inst = window.Hero3D.init(canvasRef.current, {
      nodeCount: 160, accent, accent2, variant: "dynamic",
    });
    return () => inst.destroy();
  }, [tweaks.palette]);

  const isSignup = mode === "signup";
  const valid = /.+@.+\..+/.test(email);

  return (
    <div className="login-page">
      <div className="mesh-bg" />

      {/* LEFT — form side */}
      <div className="login-form-side">
        <div className="top" onClick={() => onPage("landing")}>
          <div className="brand-mark">N</div>
          <span>Nodeidea</span>
        </div>

        {step === "form" && (
          <div className="login-card">
            <div className="head">
              <h1>{isSignup ? "创建账号" : "欢迎回来"}</h1>
              <p>
                {isSignup
                  ? "加入 9.2k 学习者,以图谱组织你学过的每一个概念。"
                  : "继续探索你的图谱、Playground 与笔记。"}
              </p>
              <div className="switch">
                {isSignup ? "已有账号?" : "没有账号?"}{" "}
                <a onClick={() => setMode(isSignup ? "signin" : "signup")}>
                  {isSignup ? "立即登录" : "免费注册"}
                </a>
              </div>
            </div>

            {/* Email field */}
            <div className="field-group">
              <label htmlFor="email">邮箱</label>
              <input
                id="email"
                type="email"
                placeholder="you@example.com"
                value={email}
                onChange={e => setEmail(e.target.value)}
                autoFocus
              />
              {email.endsWith(".edu") && (
                <div className="hint" style={{ color: "var(--accent-fresh)" }}>
                  ✓ 检测到 .edu 邮箱——验证后可享 Pro 50% 学生折扣
                </div>
              )}
              {isSignup && !email.endsWith(".edu") && email.includes("@") && !valid && (
                <div className="err">邮箱格式不正确</div>
              )}
            </div>

            {/* Password field (when not magic) */}
            {pwMode === "password" && (
              <div className="field-group">
                <label htmlFor="pw">
                  密码
                  {!isSignup && <a style={{ cursor: "pointer" }}>忘记密码?</a>}
                </label>
                <input
                  id="pw"
                  type="password"
                  placeholder={isSignup ? "至少 12 位 · 含字母与数字" : "你的密码"}
                  value={pw}
                  onChange={e => setPw(e.target.value)}
                />
                {isSignup && pw.length > 0 && (
                  <PwStrength v={pw} />
                )}
              </div>
            )}

            {/* Primary CTA */}
            <button
              className="primary-cta accent"
              disabled={!valid || (pwMode === "password" && pw.length < (isSignup ? 12 : 6))}
              onClick={() => setStep("sent")}
            >
              {pwMode === "magic"
                ? "发送 magic link"
                : (isSignup ? "创建账号" : "登录")}
            </button>

            {/* Magic-link / password toggle */}
            <div style={{ textAlign: "center", fontSize: 12.5, color: "var(--text-dim)" }}>
              {pwMode === "magic"
                ? <span>更喜欢密码登录?{" "}
                    <a onClick={() => setPwMode("password")} style={{ color: "var(--text)", cursor: "pointer", fontWeight: 500 }}>
                      用密码继续
                    </a>
                  </span>
                : <span>不想记密码?{" "}
                    <a onClick={() => setPwMode("magic")} style={{ color: "var(--text)", cursor: "pointer", fontWeight: 500 }}>
                      发送 magic link
                    </a>
                  </span>
              }
            </div>

            <div className="divider-or">或者</div>

            {/* SSO */}
            <div className="sso-grid">
              <button className="sso-btn">
                <span className="ic"><GoogleIc /></span>
                继续使用 Google
              </button>
              <button className="sso-btn">
                <span className="ic"><AppleIc /></span>
                继续使用 Apple
              </button>
              <button className="sso-btn">
                <span className="ic"><GitHubIc /></span>
                继续使用 GitHub
              </button>
            </div>

            {/* ToS */}
            <div className="tos-note">
              {isSignup ? "注册即代表你同意" : "登录即代表你同意"}{" "}
              <a>服务条款</a> 与 <a>隐私政策</a>。
              {isSignup && <><br/>我们不会用你的数据训练模型。</>}
            </div>
          </div>
        )}

        {step === "sent" && (
          <div className="login-card">
            <div className="sent-state">
              <div className="icn"><Ic.Sparkle /></div>
              <h3>已发送 magic link</h3>
              <p>
                我们给 <strong style={{ color: "var(--text)" }}>{email}</strong> 发了一封含一次性登录链接的邮件。
                <br/>检查收件箱(可能在垃圾邮件)。
              </p>
              <div>
                <span className="resend" onClick={() => setStep("form")}>← 改个邮箱</span>
                <span style={{ margin: "0 12px", color: "var(--text-faint)" }}>·</span>
                <span className="resend">重新发送(30 秒后)</span>
              </div>
            </div>
            <div className="tos-note" style={{ marginTop: 8 }}>
              没收到?写信到 <a>support@nodeidea.app</a>
            </div>
          </div>
        )}

        <div className="bottom">
          <span>© 2026 Nodeidea Labs · 新加坡</span>
          <span style={{ display: "flex", gap: 14 }}>
            <a>支持</a>
            <a>隐私</a>
            <a>Status</a>
          </span>
        </div>
      </div>

      {/* RIGHT — testimonial / graph */}
      <aside className="login-aside">
        <canvas ref={canvasRef} />
        <div className="aside-topbar">
          <span>新用户?</span>
          <a onClick={() => setMode("signup")}>免费注册 →</a>
        </div>
        <div className="aside-content">
          <div className="quote">
            <p className="body">
              我以前的笔记散在 40 个 Notion 页面里。Nodeidea 让我第一次看清楚那些概念其实是同一片网。读懂一篇论文从此快了三倍。
            </p>
            <div className="who">
              <div className="av">LZ</div>
              <div>
                <strong>Linzhi Wang</strong> · NUS 应用数学博士在读
              </div>
            </div>
          </div>
        </div>
      </aside>
    </div>
  );
}

function PwStrength({ v }) {
  const score =
    (v.length >= 12 ? 1 : 0) +
    (/[A-Z]/.test(v) ? 1 : 0) +
    (/[a-z]/.test(v) ? 1 : 0) +
    (/[0-9]/.test(v) ? 1 : 0) +
    (/[^A-Za-z0-9]/.test(v) ? 1 : 0);
  const labels = ["太弱", "较弱", "一般", "良好", "强", "很强"];
  const colors = ["var(--accent-warm)", "var(--accent-warm)", "var(--accent-hi)", "var(--accent-hi)", "var(--accent-fresh)", "var(--accent-fresh)"];
  return (
    <div style={{ display: "flex", gap: 6, alignItems: "center", marginTop: 4 }}>
      <div style={{ display: "flex", gap: 3, flex: 1 }}>
        {[0,1,2,3,4].map(i => (
          <span key={i} style={{
            flex: 1, height: 3, borderRadius: 2,
            background: i < score ? colors[score] : "var(--surface-3)",
            transition: "background .15s",
          }}/>
        ))}
      </div>
      <span style={{ fontSize: 11, color: colors[score], minWidth: 30 }}>{labels[score]}</span>
    </div>
  );
}

const GoogleIc = () => (
  <svg viewBox="0 0 16 16" width="16" height="16">
    <path fill="#4285F4" d="M14.7 8.16c0-.49-.04-.96-.13-1.41H8v2.67h3.76c-.16.87-.65 1.61-1.4 2.1v1.74h2.27c1.33-1.22 2.07-3.02 2.07-5.1z"/>
    <path fill="#34A853" d="M8 15c1.89 0 3.48-.62 4.63-1.69l-2.27-1.74c-.62.42-1.43.67-2.36.67-1.81 0-3.34-1.22-3.89-2.86H1.78v1.79C2.93 13.41 5.27 15 8 15z"/>
    <path fill="#FBBC05" d="M4.11 9.37a4.18 4.18 0 010-2.74V4.84H1.78a6.99 6.99 0 000 6.32l2.33-1.79z"/>
    <path fill="#EA4335" d="M8 3.74c1.02 0 1.94.35 2.66 1.04l2-2c-1.21-1.13-2.79-1.82-4.66-1.82C5.27 1 2.93 2.59 1.78 4.84l2.33 1.79C4.66 4.99 6.19 3.74 8 3.74z"/>
  </svg>
);
const AppleIc = () => (
  <svg viewBox="0 0 16 16" width="16" height="16" fill="currentColor">
    <path d="M11.2 8.5c0-1.5 1.2-2.2 1.3-2.3-.7-1-1.8-1.2-2.2-1.2-.9-.1-1.8.6-2.3.6s-1.2-.5-2-.5c-1 0-2 .6-2.5 1.5-1.1 1.9-.3 4.6.7 6.1.5.7 1.1 1.6 1.9 1.5.8 0 1-.5 1.9-.5s1.1.5 1.9.5c.8 0 1.3-.7 1.8-1.5.6-.9.8-1.7.8-1.7s-1.4-.5-1.4-2.1zM9.4 4c.4-.5.7-1.2.6-1.9-.6 0-1.3.4-1.8.9-.4.5-.7 1.2-.6 1.9.7 0 1.4-.4 1.8-.9z"/>
  </svg>
);
const GitHubIc = () => (
  <svg viewBox="0 0 16 16" width="16" height="16" fill="currentColor">
    <path d="M8 .2C3.6.2 0 3.8 0 8.2c0 3.5 2.3 6.5 5.5 7.5.4.1.5-.2.5-.4v-1.4c-2.2.5-2.7-1-2.7-1-.4-.9-.9-1.2-.9-1.2-.7-.5.1-.5.1-.5.8 0 1.2.8 1.2.8.7 1.2 1.9.9 2.4.7 0-.5.3-.9.5-1.1-1.8-.2-3.6-.9-3.6-3.9 0-.9.3-1.6.8-2.1-.1-.2-.4-1 .1-2.1 0 0 .7-.2 2.2.8.6-.2 1.3-.3 2-.3.7 0 1.4.1 2 .3 1.5-1 2.2-.8 2.2-.8.4 1.1.1 1.9.1 2.1.5.5.8 1.2.8 2.1 0 3-1.8 3.7-3.6 3.9.3.2.5.7.5 1.5v2.2c0 .2.1.5.6.4C13.7 14.7 16 11.7 16 8.2 16 3.8 12.4.2 8 .2z"/>
  </svg>
);

window.LoginPage = LoginPage;