mnote/wolai-frontend/src/app/(auth)/auth/page.tsx

"use client";

import { useConvexAuth, useMutation, useQuery } from "convex/react";
import { useAuthActions } from "@convex-dev/auth/react";
import { useState, useCallback, useEffect } from "react";
import { useRouter } from "next/navigation";
import { isConvexEnabled } from "@/lib/convex/enabled";
import { api } from "@/lib/convex/api";

type AuthStep = "signIn" | "signUp";

// 测试账号凭据常量
const TEST_CREDENTIALS = {
  email: "test@example.com",
  password: "Test123456",
} as const;

/**
 * Convex Auth 登录/注册页面
 *
 * 支持功能：
 * - 邮箱密码登录
 * - 邮箱密码注册
 */
export default function AuthPage() {
  const { isLoading, isAuthenticated } = useConvexAuth();
  const { signIn } = useAuthActions();
  const setMyUsername = useMutation(api.users.setMyUsername);
  const router = useRouter();

  const currentUser = useQuery(api.users.currentUser, isAuthenticated ? {} : "skip");

  useEffect(() => {
    if (isLoading) return;
    if (!isAuthenticated) return;
    if (currentUser === undefined) return;
    if (currentUser && currentUser.name) {
      router.replace("/");
    }
  }, [currentUser, isAuthenticated, isLoading, router]);

  const [flow, setFlow] = useState<AuthStep>("signIn");
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [username, setUsername] = useState("");
  const [message, setMessage] = useState<{
    type: "success" | "error" | "info";
    text: string;
  } | null>(null);

  // 执行登录的核心逻辑
  const performSignIn = useCallback(async (email: string, password: string, flow: AuthStep) => {
    setMessage(null);

    try {
      if (flow === "signUp" && !username.trim()) {
        setMessage({ type: "error", text: "用户名不能为空" });
        return;
      }

      const formData = new FormData();
      formData.append("email", email);
      formData.append("password", password);
      formData.append("flow", flow);

      const result = await signIn("password", formData);

      if (result.signingIn) {
        if (flow === "signUp") {
          try {
            await setMyUsername({ username });
          } catch (e: any) {
            // 说明：注册已成功，但用户名可能重复；此时保持登录状态，转入“设置用户名”步骤继续处理。
            setMessage({ type: "error", text: e?.message ?? "用户名设置失败，请重试" });
            return;
          }
        }
        setMessage({ type: "success", text: flow === "signIn" ? "登录成功！" : "注册成功！" });
        setTimeout(() => router.push("/"), 500);
        return;
      }

      // 说明：部分认证方式会返回 redirect（例如 OAuth）；密码模式一般不会走到这里。
      if (result.redirect) {
        setMessage({ type: "info", text: "正在跳转..." });
        router.push(result.redirect.toString());
        return;
      }

      setMessage({ type: "error", text: "操作失败，请重试" });
    } catch (error: any) {
      setMessage({ type: "error", text: error.message || "操作失败，请重试" });
    }
  }, [router, setMyUsername, signIn, username]);

  const handleSubmit = useCallback(async (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    await performSignIn(email, password, flow);
  }, [email, password, flow, performSignIn]);

  // 检查是否启用了 Convex
  const isConvex = isConvexEnabled();
  if (!isConvex) {
    return (
      <div className="min-h-screen flex items-center justify-center bg-gray-50">
        <div className="text-center">
          <h1 className="text-2xl font-bold text-red-600 mb-4">认证功能不可用</h1>
          <p className="text-gray-600">请启用 Convex 后端后再试</p>
        </div>
      </div>
    );
  }

  if (isLoading) {
    return (
      <div className="min-h-screen flex items-center justify-center bg-gray-50">
        <div className="text-center">
          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto mb-4"></div>
          <p className="text-gray-600">加载中...</p>
        </div>
      </div>
    );
  }

  if (isAuthenticated && currentUser && currentUser.name) {
    return (
      <div className="min-h-screen flex items-center justify-center bg-gray-50">
        <div className="text-center">
          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto mb-4"></div>
          <p className="text-gray-600">正在跳转...</p>
        </div>
      </div>
    );
  }

  if (isAuthenticated) {
    if (currentUser === undefined) {
      return (
        <div className="min-h-screen flex items-center justify-center bg-gray-50">
          <div className="text-center">
            <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto mb-4"></div>
            <p className="text-gray-600">加载中...</p>
          </div>
        </div>
      );
    }

    const saveUsername = async () => {
      setMessage(null);
      try {
        await setMyUsername({ username });
        setMessage({ type: "success", text: "用户名已保存！" });
        router.replace("/");
      } catch (error: any) {
        setMessage({ type: "error", text: error.message || "保存失败，请重试" });
      }
    };

    return (
      <div className="min-h-screen flex items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
        <div className="max-w-md w-full space-y-8">
          <div>
            <h2 className="mt-6 text-center text-3xl font-extrabold text-gray-900">设置用户名</h2>
            <p className="mt-2 text-center text-sm text-gray-600">用于分享功能的用户查找（全局唯一）</p>
          </div>

          {message && (
            <div className={`rounded-md p-4 ${
              message.type === "success" ? "bg-green-50 text-green-800" :
              message.type === "error" ? "bg-red-50 text-red-800" :
              "bg-blue-50 text-blue-800"
            }`}>
              <p className="text-sm">{message.text}</p>
            </div>
          )}

          <div className="space-y-4">
            <div>
              <label htmlFor="username" className="sr-only">用户名</label>
              <input
                id="username"
                name="username"
                type="text"
                autoComplete="username"
                required
                value={username}
                onChange={(e) => setUsername(e.target.value)}
                className="appearance-none rounded-md relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
                placeholder="用户名（2-32 位，不含空格）"
              />
            </div>
            <button
              type="button"
              onClick={() => void saveUsername()}
              className="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
            >
              保存并继续
            </button>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="min-h-screen flex items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
      <div className="max-w-md w-full space-y-8">
        <div>
          <h2 className="mt-6 text-center text-3xl font-extrabold text-gray-900">
            {flow === "signIn" ? "登录账户" : "创建账户"}
          </h2>
          <p className="mt-2 text-center text-sm text-gray-600">
            使用 Convex Auth
          </p>
        </div>

        {message && (
          <div className={`rounded-md p-4 ${
            message.type === "success" ? "bg-green-50 text-green-800" :
            message.type === "error" ? "bg-red-50 text-red-800" :
            "bg-blue-50 text-blue-800"
          }`}>
            <p className="text-sm">{message.text}</p>
          </div>
        )}

        <form className="mt-8 space-y-6" onSubmit={handleSubmit}>
          <div className="rounded-md shadow-sm -space-y-px">
            <div>
              <label htmlFor="email" className="sr-only">邮箱地址</label>
              <input
                id="email"
                name="email"
                type="email"
                autoComplete="email"
                required
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                className="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-t-md focus:outline-none focus:ring-blue-500 focus:border-blue-500 focus:z-10 sm:text-sm"
                placeholder="邮箱地址"
              />
            </div>
            {flow === "signUp" && (
              <div>
                <label htmlFor="username" className="sr-only">用户名</label>
                <input
                  id="username"
                  name="username"
                  type="text"
                  autoComplete="username"
                  required
                value={username}
                onChange={(e) => setUsername(e.target.value)}
                className="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 focus:outline-none focus:ring-blue-500 focus:border-blue-500 focus:z-10 sm:text-sm"
                placeholder="用户名（2-32 位，不含空格）"
              />
            </div>
            )}
            <div>
              <label htmlFor="password" className="sr-only">密码</label>
              <input
                id="password"
                name="password"
                type="password"
                autoComplete={flow === "signIn" ? "current-password" : "new-password"}
                required
                value={password}
                onChange={(e) => setPassword(e.target.value)}
                className="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-blue-500 focus:border-blue-500 focus:z-10 sm:text-sm"
                placeholder="密码（至少 8 位）"
              />
            </div>
          </div>

          <div>
            <button
              type="submit"
              className="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
            >
              {flow === "signIn" ? "登录" : "注册"}
            </button>
          </div>

          {flow === "signIn" && (
            <div>
              <button
                type="button"
                onClick={() => {
                  setEmail(TEST_CREDENTIALS.email);
                  setPassword(TEST_CREDENTIALS.password);
                  // 直接调用登录逻辑
                  performSignIn(TEST_CREDENTIALS.email, TEST_CREDENTIALS.password, "signIn");
                }}
                className="group relative w-full flex justify-center py-2 px-4 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500"
              >
                测试账号快速登录
              </button>
            </div>
          )}

          <div className="text-center">
            <button
              type="button"
              onClick={() => {
                setFlow(flow === "signIn" ? "signUp" : "signIn");
                setMessage(null);
              }}
              className="text-blue-600 hover:text-blue-500 text-sm"
            >
              {flow === "signIn" ? "还没有账户？立即注册" : "已有账户？去登录"}
            </button>
          </div>
        </form>
      </div>
    </div>
  );
}