// Login / Register page

function Auth({ go, mode = "login" }) {
  const [tab, setTab] = React.useState(mode);
  const { t, isZh } = window.useI18n ? window.useI18n() : { t: (key) => key, isZh: true };
  React.useEffect(() => setTab(mode), [mode]);

  return (
    <div className="auth-shell">
      <aside className="auth-aside">
        <div>
          <Brand dark />
          <h2 style={{ marginTop: 56 }}>
            让企业出海前，<br />
            先<em>看清市场</em>。
          </h2>
          <div className="quote">
            Know the market <br />before you go global.
          </div>
          <div className="auth-feature">
            {[
              "上传产品资料，AI 自动建立产品画像",
              "选择目标市场，生成结构化调研报告",
              "竞品 · 价格 · 物流 · 合规 一次到位",
              "1 / 3 / 5 年路线图与行动清单",
            ].map((t, i) => (
              <div key={i} className="row">
                <div className="check"><Icon name="check" size={12} /></div>
                <span>{t}</span>
              </div>
            ))}
          </div>
        </div>
        <div className="auth-foot">© 2026 Good Go Global · {isZh ? "中文 · 英文 · 法文" : "Chinese · English · French"}</div>
      </aside>

      <main className="auth-main">
        <div className="auth-main-top">
          <Brand small />
          <button className="btn btn-ghost btn-sm" onClick={() => go("landing")}>← 返回首页</button>
        </div>
        <div className="auth-form-wrap">
          {tab === "login" ? <LoginForm setTab={setTab} go={go} /> : tab === "register" ? <RegisterForm setTab={setTab} go={go} /> : <ForgotForm setTab={setTab} />}
        </div>
        <div className="auth-foot" style={{ color: "var(--muted)", textAlign: "center" }}>
          {t("继续即表示同意")} <a style={{ color: "var(--ocean)" }}>{t("服务条款")}</a> {isZh ? "与" : "and"} <a style={{ color: "var(--ocean)" }}>{t("隐私政策")}</a>
        </div>
      </main>
    </div>
  );
}

function LoginForm({ setTab, go }) {
  const [email, setEmail] = React.useState("");
  const [pwd, setPwd] = React.useState("");
  const [showPwd, setShowPwd] = React.useState(false);
  const [error, setError] = React.useState("");
  const [verificationRequired, setVerificationRequired] = React.useState(false);
  const submit = async (e) => {
    e.preventDefault();
    setError("");
    setVerificationRequired(false);
    const localError = validateAuthInput(email, pwd);
    if (localError) {
      setError(localError);
      return;
    }
    try {
      const data = await window.GGGApi.login(email.trim(), pwd);
      if (data.user?.onboardingRequired || data.snapshot?.onboarding?.companyProfileRequired) {
        go("company-profile");
      } else {
        go("dashboard");
      }
    } catch (err) {
      if (err.code === "email_not_verified") setVerificationRequired(true);
      setError(err.message || "登录失败，请检查邮箱和密码。");
    }
  };
  const resend = async () => {
    setError("");
    try {
      await window.GGGApi.resendVerification(email.trim(), pwd);
      setVerificationRequired(true);
    } catch (err) {
      setError(err.message || "验证邮件发送失败。");
    }
  };
  return (
    <form className="auth-form" onSubmit={submit}>
      <div className="auth-tabs">
        <button type="button" className="active">登录</button>
        <button type="button" onClick={() => setTab("register")}>注册</button>
      </div>
      <h3 style={{ marginTop: 22 }}>欢迎回来</h3>
      <p className="lead">使用已验证邮箱继续您的出海调研项目</p>

      <div className="fields" style={{ marginTop: 22 }}>
        <div className="field">
          <label className="field-label">邮箱</label>
          <div className="input-group">
            <span className="ico"><Icon name="mail" size={16} /></span>
            <input className="input" type="email" value={email} onChange={e => setEmail(e.target.value)} placeholder="you@company.com" required autoComplete="email" />
          </div>
        </div>
        <div className="field">
          <label className="field-label space-between">
            <span>密码</span>
            <a style={{ color: "var(--ocean)", fontSize: 12, cursor: "pointer" }} onClick={() => setTab("forgot")}>忘记密码？</a>
          </label>
          <div className="input-group">
            <span className="ico"><Icon name="lock" size={16} /></span>
            <input className="input" type={showPwd ? "text" : "password"} value={pwd} onChange={e => setPwd(e.target.value)} placeholder="至少 8 位，含字母和数字" style={{ paddingRight: 42 }} required minLength={8} autoComplete="current-password" />
            <button type="button" onClick={() => setShowPwd(s => !s)} style={{ position: "absolute", right: 10, top: "50%", transform: "translateY(-50%)", color: "var(--muted)", padding: 4 }}>
              <Icon name="eye" size={16} />
            </button>
          </div>
        </div>
        {error && <div className="form-alert"><Icon name="alert" size={15} /> {error}</div>}
        {verificationRequired && (
          <div className="verify-card-inline">
            <Icon name="mail" size={18} />
            <div>
              <b>邮箱尚未验证</b>
              <span>请打开验证邮件中的链接。没有收到时，可重新发送。</span>
            </div>
            <button type="button" className="btn btn-ghost btn-sm" onClick={resend}>重发</button>
          </div>
        )}
        <div className="check-row">
          <input type="checkbox" defaultChecked /> 30 天内保持登录
        </div>
        <button type="submit" className="btn btn-primary btn-block btn-lg">
          登录 <Icon name="arrow-right" size={14} />
        </button>
      </div>

      <div className="auth-foot-link">
        还没有账号？<a onClick={() => setTab("register")}>免费注册</a>
      </div>
    </form>
  );
}

function RegisterForm({ setTab, go }) {
  const [name, setName] = React.useState("");
  const [email, setEmail] = React.useState("");
  const [pwd, setPwd] = React.useState("");
  const [confirmPwd, setConfirmPwd] = React.useState("");
  const [agreed, setAgreed] = React.useState(false);
  const [error, setError] = React.useState("");
  const [sent, setSent] = React.useState(null);
  const submit = async (e) => {
    e.preventDefault();
    setError("");
    const localError = validateAuthInput(email, pwd);
    if (localError) return setError(localError);
    if (pwd !== confirmPwd) return setError("两次输入的密码不一致。");
    if (!agreed) return setError("请先同意服务条款和隐私政策。");
    try {
      const data = await window.GGGApi.registerAccount({ email: email.trim(), password: pwd, name: name.trim(), preferredLanguage: "zh-CN" });
      setSent(data);
    } catch (err) {
      setError(err.message || "注册失败，请稍后重试。");
    }
  };
  if (sent) {
    return (
      <div className="auth-form">
        <div className="mail-success">
          <div className="mail-success-icon"><Icon name="mail" size={24} /></div>
          <h3>请验证邮箱</h3>
          <p className="lead">我们已向 <b>{email}</b> 发送验证邮件。完成验证后，系统会引导您填写公司信息。</p>
          <div className="mail-steps">
            <div><span>1</span>打开邮箱</div>
            <div><span>2</span>点击验证链接</div>
            <div><span>3</span>首次登录后补全公司资料</div>
          </div>
          <button className="btn btn-primary btn-block btn-lg" type="button" onClick={() => setTab("login")}>返回登录</button>
          <button className="btn btn-ghost btn-block" type="button" onClick={async () => setSent(await window.GGGApi.resendVerification(email.trim(), pwd))}>重新发送验证邮件</button>
        </div>
      </div>
    );
  }
  return (
    <form className="auth-form" onSubmit={submit}>
      <div className="auth-tabs">
        <button type="button" onClick={() => setTab("login")}>登录</button>
        <button type="button" className="active">注册</button>
      </div>
      <h3 style={{ marginTop: 22 }}>创建账户</h3>
      <p className="lead">先完成邮箱验证，再进入真实公司资料流程</p>

      <div className="fields" style={{ marginTop: 22 }}>
        <div className="field">
          <label className="field-label">您的姓名</label>
          <div className="input-group">
            <span className="ico"><Icon name="user" size={16} /></span>
            <input className="input" value={name} onChange={e => setName(e.target.value)} placeholder="联系人姓名" autoComplete="name" />
          </div>
        </div>
        <div className="field">
          <label className="field-label">邮箱</label>
          <div className="input-group">
            <span className="ico"><Icon name="mail" size={16} /></span>
            <input className="input" type="email" value={email} onChange={e => setEmail(e.target.value)} placeholder="you@company.com" required autoComplete="email" />
          </div>
        </div>
        <div className="field">
          <label className="field-label">设置密码</label>
          <div className="input-group">
            <span className="ico"><Icon name="lock" size={16} /></span>
            <input className="input" type="password" value={pwd} onChange={e => setPwd(e.target.value)} placeholder="至少 8 位，含字母和数字" required minLength={8} autoComplete="new-password" />
          </div>
          <div className="password-meter" data-level={passwordStrength(pwd)}>
            <span /><span /><span /><span />
          </div>
        </div>
        <div className="field">
          <label className="field-label">确认密码</label>
          <div className="input-group">
            <span className="ico"><Icon name="lock" size={16} /></span>
            <input className="input" type="password" value={confirmPwd} onChange={e => setConfirmPwd(e.target.value)} placeholder="再次输入密码" required minLength={8} autoComplete="new-password" />
          </div>
        </div>
        {error && <div className="form-alert"><Icon name="alert" size={15} /> {error}</div>}
        <div className="check-row">
          <input type="checkbox" checked={agreed} onChange={e => setAgreed(e.target.checked)} /> 我已阅读并同意服务条款和隐私政策，理解 AI 报告不构成法律、税务、移民、投资或专业报关意见。
        </div>
        <button type="submit" className="btn btn-primary btn-block btn-lg">
          创建账户 <Icon name="arrow-right" size={14} />
        </button>
      </div>

      <div className="auth-foot-link">
        已经有账号？<a onClick={() => setTab("login")}>立即登录</a>
      </div>
    </form>
  );
}

function ForgotForm({ setTab }) {
  const [email, setEmail] = React.useState("");
  const [token] = React.useState(() => new URLSearchParams(window.location.search).get("token") || "");
  const [tokenInfo, setTokenInfo] = React.useState(null);
  const [pwd, setPwd] = React.useState("");
  const [confirmPwd, setConfirmPwd] = React.useState("");
  const [error, setError] = React.useState("");
  const [done, setDone] = React.useState(false);

  React.useEffect(() => {
    if (!token) return;
    window.GGGApi.validatePasswordResetToken(token)
      .then(setTokenInfo)
      .catch((err) => setError(err.message || "密码重置链接无效。"));
  }, [token]);

  const submitReset = async (event) => {
    event.preventDefault();
    setError("");
    const localError = validateAuthInput(tokenInfo?.email || "reset@goodgoglobal.com", pwd);
    if (localError) return setError(localError);
    if (pwd !== confirmPwd) return setError("两次输入的密码不一致。");
    try {
      await window.GGGApi.completePasswordReset(token, pwd);
      setDone(true);
    } catch (err) {
      setError(err.message || "密码重置失败。");
    }
  };

  if (token) {
    if (done) {
      return (
        <div className="auth-form">
          <div className="mail-success">
            <div className="mail-success-icon"><Icon name="check" size={24} /></div>
            <h3>密码已重置</h3>
            <p className="lead">请使用新密码登录您的 Good Go Global 账户。</p>
            <button className="btn btn-primary btn-block btn-lg" type="button" onClick={() => setTab("login")}>返回登录</button>
          </div>
        </div>
      );
    }
    return (
      <form className="auth-form" onSubmit={submitReset}>
        <h3>设置新密码</h3>
        <p className="lead">{tokenInfo?.email ? `正在为 ${tokenInfo.email} 重置密码。` : "正在校验密码重置链接。"}</p>
        <div className="fields" style={{ marginTop: 22 }}>
          <div className="field">
            <label className="field-label">新密码</label>
            <div className="input-group">
              <span className="ico"><Icon name="lock" size={16} /></span>
              <input className="input" type="password" value={pwd} onChange={e => setPwd(e.target.value)} placeholder="至少 8 位，含字母和数字" required minLength={8} autoComplete="new-password" />
            </div>
            <div className="password-meter" data-level={passwordStrength(pwd)}>
              <span /><span /><span /><span />
            </div>
          </div>
          <div className="field">
            <label className="field-label">确认新密码</label>
            <div className="input-group">
              <span className="ico"><Icon name="lock" size={16} /></span>
              <input className="input" type="password" value={confirmPwd} onChange={e => setConfirmPwd(e.target.value)} placeholder="再次输入密码" required minLength={8} autoComplete="new-password" />
            </div>
          </div>
          {error && <div className="form-alert"><Icon name="alert" size={15} /> {error}</div>}
          <button className="btn btn-primary btn-block btn-lg" type="submit" disabled={!tokenInfo || Boolean(error && !tokenInfo)}>
            保存新密码 <Icon name="arrow-right" size={14} />
          </button>
          <button className="btn btn-ghost btn-block" type="button" onClick={() => setTab("login")}>← 返回登录</button>
        </div>
      </form>
    );
  }

  return (
    <form className="auth-form" onSubmit={(e) => { e.preventDefault(); }}>
      <h3>找回密码</h3>
      <p className="lead">密码重置邮件能力将接入同一套 Resend 邮件服务。当前请联系管理员处理密码重置。</p>
      <div className="fields" style={{ marginTop: 22 }}>
        <div className="field">
          <label className="field-label">邮箱</label>
          <div className="input-group">
            <span className="ico"><Icon name="mail" size={16} /></span>
            <input className="input" type="email" value={email} onChange={e => setEmail(e.target.value)} placeholder="you@company.com" />
          </div>
        </div>
        <div className="form-alert neutral"><Icon name="info" size={15} /> 当前版本不发送模拟重置邮件。</div>
        <button className="btn btn-ghost btn-block" type="button" onClick={() => setTab("login")}>
          ← 返回登录
        </button>
      </div>
    </form>
  );
}

function validateAuthInput(email, password) {
  const normalized = String(email || "").trim();
  if (!/^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/.test(normalized)) return "请输入有效邮箱地址。";
  const domain = normalized.split("@")[1]?.toLowerCase() || "";
  if (/\.(local|test|invalid|example)$/.test(domain) || domain === "localhost" || domain.startsWith("example.")) {
    return "请输入可接收验证邮件的真实邮箱域名。";
  }
  if (!password || password.length < 8) return "密码至少需要 8 位。";
  if (!/[A-Za-z]/.test(password) || !/\d/.test(password)) return "密码需要同时包含字母和数字。";
  return "";
}

function passwordStrength(password) {
  let score = 0;
  if (password.length >= 8) score += 1;
  if (/[A-Za-z]/.test(password) && /\d/.test(password)) score += 1;
  if (/[^A-Za-z0-9]/.test(password)) score += 1;
  if (password.length >= 12) score += 1;
  return score;
}

function GoogleG() {
  return (
    <svg width="16" height="16" viewBox="0 0 24 24">
      <path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" />
      <path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" />
      <path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" />
      <path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" />
    </svg>
  );
}
function AppleA() {
  return (
    <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
      <path d="M17.05 12.04c-.03-3.04 2.49-4.5 2.6-4.57-1.42-2.07-3.62-2.36-4.4-2.39-1.87-.19-3.66 1.1-4.6 1.1-.96 0-2.42-1.08-3.99-1.05-2.05.03-3.94 1.19-4.99 3.02-2.13 3.7-.54 9.16 1.52 12.16 1.01 1.47 2.21 3.1 3.78 3.04 1.52-.06 2.09-.98 3.92-.98s2.35.98 3.95.95c1.63-.03 2.66-1.48 3.66-2.96 1.15-1.69 1.62-3.34 1.65-3.42-.04-.02-3.17-1.22-3.2-4.83zM14.18 3.94c.84-1.02 1.41-2.43 1.25-3.84-1.21.05-2.68.81-3.55 1.83-.78.9-1.46 2.34-1.28 3.72 1.35.1 2.74-.69 3.58-1.71z" />
    </svg>
  );
}

window.Auth = Auth;