import React from "react";
import icons from "../../icons";
import { IconLabel } from "../common";

export default function UserPortalAuthSection({
  isAuthFlow,
  oauthStandalone = false,
  user,
  mode,
  setMode,
  account,
  setAccount,
  password,
  setPassword,
  loading,
  error,
  setError,
  handleLogin,
  registerForm,
  handleRegisterChange,
  registerSent,
  registerExpiresAt,
  registerLoading,
  registerError,
  registerMessage,
  handleSendCode,
  handleVerifyRegister,
  setRegisterError,
  setRegisterMessage,
  registrationRequireInvite,
  inviteRegisterReward = 10,
  registrationAccountMin = 3,
  registrationAccountMax = 32,
  resetRegisterFlow,
  resetForm,
  handleResetChange,
  resetSent,
  resetExpiresAt,
  resetLoading,
  resetError,
  resetMessage,
  handleSendReset,
  handleResetPassword,
  setResetError,
  setResetMessage
}) {
  return (
    <>
      {!user && mode === "login" && (
        <form className="card form auth-card" onSubmit={handleLogin}>
          <div className="auth-form-head">
            <h2>登录</h2>
            <p className="auth-form-lead">使用萌芽统一账户进入用户中心</p>
            {isAuthFlow && oauthStandalone && (
              <div className="hint auth-form-hint">登录成功后，需在下一页确认向第三方应用授予的权限，再返回应用。</div>
            )}
            {isAuthFlow && !oauthStandalone && (
              <div className="hint auth-form-hint">你正在通过统一登录为外部应用授权。</div>
            )}
          </div>
          <div className="auth-form-body">
            <label className="auth-field">
              <IconLabel icon={icons.account} text="账户" />
              <input
                value={account}
                onChange={(e) => setAccount(e.target.value)}
                placeholder="请输入账户"
                autoComplete="username"
                name="account"
              />
            </label>
            <label className="auth-field">
              <IconLabel icon={icons.password} text="密码" />
              <input
                type="password"
                value={password}
                onChange={(e) => setPassword(e.target.value)}
                placeholder="请输入密码"
                autoComplete="current-password"
                name="password"
              />
            </label>
            {error && <div className="error auth-form-alert" role="alert">{error}</div>}
          </div>
          <div className="auth-form-actions">
            <button type="submit" className="primary auth-submit" disabled={loading}>
              {loading ? "登录中…" : "登录"}
            </button>
          </div>
          <div className="auth-form-footer">
            <button
              type="button"
              className="auth-footer-link"
              onClick={() => { setMode("register"); setError(""); resetRegisterFlow?.(); setRegisterError(""); setRegisterMessage(""); }}
            >
              注册账号
            </button>
            <span className="auth-footer-sep" aria-hidden />
            <button type="button" className="auth-footer-link" onClick={() => { setMode("reset"); setError(""); }}>
              忘记密码
            </button>
          </div>
        </form>
      )}

      {!user && mode === "register" && (
        <form className="card form auth-card" onSubmit={registerSent ? handleVerifyRegister : handleSendCode}>
          <div className="auth-form-head">
            <h2>注册账号</h2>
            <p className="auth-form-lead">创建萌芽统一账户，验证码将发送至你的邮箱</p>
          </div>
          <div className="auth-form-body">
            <label className="auth-field">
              <IconLabel
                icon={icons.account}
                text="账户"
                hint={`（${registrationAccountMin}–${registrationAccountMax} 位小写字母与数字）`}
              />
              <input
                value={registerForm.account}
                onChange={(e) => handleRegisterChange("account", e.target.value)}
                placeholder="已随机生成，可改写"
                autoComplete="off"
              />
            </label>
            <label className="auth-field">
              <IconLabel icon={icons.password} text="密码" />
              <input type="password" value={registerForm.password} onChange={(e) => handleRegisterChange("password", e.target.value)} placeholder="请输入密码" />
            </label>
            <label className="auth-field">
              <IconLabel icon={icons.username} text="用户名" />
              <input value={registerForm.username} onChange={(e) => handleRegisterChange("username", e.target.value)} placeholder="可选" />
            </label>
            <label className="auth-field">
              <IconLabel icon={icons.email} text="邮箱" />
              <input value={registerForm.email} onChange={(e) => handleRegisterChange("email", e.target.value)} placeholder="用于接收验证码" />
            </label>
            {(registrationRequireInvite || !registerSent) && (
              <label className="auth-field">
                <IconLabel
                  icon={icons.token}
                  text="邀请码"
                  hint={registrationRequireInvite ? "（必填）" : "（选填）"}
                />
                <input
                  value={registerForm.inviteCode || ""}
                  onChange={(e) => handleRegisterChange("inviteCode", e.target.value)}
                  placeholder={registrationRequireInvite ? "请输入管理员发放的邀请码" : "有邀请码可填写，无则留空"}
                  disabled={registerSent}
                  autoCapitalize="characters"
                />
              </label>
            )}
            {!registerSent && inviteRegisterReward > 0 && (
              <div className="hint">使用有效邀请码完成注册后，将获得 {inviteRegisterReward} 萌芽币。</div>
            )}
            {registerSent && (
              <label className="auth-field">
                <IconLabel icon={icons.token} text="邮箱验证码" />
                <input value={registerForm.code} onChange={(e) => handleRegisterChange("code", e.target.value)} placeholder="6 位验证码" />
              </label>
            )}
            {registerExpiresAt && <div className="hint">验证码有效期至：{registerExpiresAt}</div>}
            {registerError && <div className="error auth-form-alert" role="alert">{registerError}</div>}
            {registerMessage && <div className="success auth-form-alert">{registerMessage}</div>}
          </div>
          <div className="auth-form-actions">
            <button type="submit" className="primary auth-submit" disabled={registerLoading}>
              {registerLoading ? "处理中…" : registerSent ? "完成注册" : "发送验证码"}
            </button>
            <button
              type="button"
              className="auth-footer-back"
              onClick={() => { setMode("login"); resetRegisterFlow?.(); setRegisterError(""); setRegisterMessage(""); }}
            >
              返回登录
            </button>
          </div>
        </form>
      )}

      {!user && mode === "reset" && (
        <form className="card form auth-card" onSubmit={resetSent ? handleResetPassword : handleSendReset}>
          <div className="auth-form-head">
            <h2>重置密码</h2>
            <p className="auth-form-lead">通过注册邮箱接收验证码，设置新密码</p>
          </div>
          <div className="auth-form-body">
            <label className="auth-field">
              <IconLabel icon={icons.account} text="账户" />
              <input value={resetForm.account} onChange={(e) => handleResetChange("account", e.target.value)} placeholder="请输入账户" />
            </label>
            <label className="auth-field">
              <IconLabel icon={icons.email} text="邮箱" />
              <input value={resetForm.email} onChange={(e) => handleResetChange("email", e.target.value)} placeholder="请输入注册邮箱" />
            </label>
            {resetSent && (
              <>
                <label className="auth-field">
                  <IconLabel icon={icons.token} text="邮箱验证码" />
                  <input value={resetForm.code} onChange={(e) => handleResetChange("code", e.target.value)} placeholder="6 位验证码" />
                </label>
                <label className="auth-field">
                  <IconLabel icon={icons.password} text="新密码" />
                  <input type="password" value={resetForm.newPassword} onChange={(e) => handleResetChange("newPassword", e.target.value)} placeholder="输入新密码" />
                </label>
              </>
            )}
            {resetExpiresAt && <div className="hint">验证码有效期至：{resetExpiresAt}</div>}
            {resetError && <div className="error auth-form-alert" role="alert">{resetError}</div>}
            {resetMessage && <div className="success auth-form-alert">{resetMessage}</div>}
          </div>
          <div className="auth-form-actions">
            <button type="submit" className="primary auth-submit" disabled={resetLoading}>
              {resetLoading ? "处理中…" : resetSent ? "确认重置" : "发送重置邮件"}
            </button>
            <button
              type="button"
              className="auth-footer-back"
              onClick={() => { setMode("login"); setResetError(""); setResetMessage(""); }}
            >
              返回登录
            </button>
          </div>
        </form>
      )}
    </>
  );
}
