ai-rpg/frontend/src/pages/RegisterPage.tsx

import { useState, type FormEvent } from "react";
import { useNavigate, Link } from "react-router-dom";
import { useTranslation } from "react-i18next";
import { useAuthStore } from "@/stores/authStore";
import { useToastStore } from "@/stores/toastStore";
import { ApiError } from "@/lib/api";
import { Button } from "@/components/ui/Button";
import { Input } from "@/components/ui/Input";
import { Card } from "@/components/ui/Card";

export function RegisterPage() {
  const { t } = useTranslation();
  const navigate = useNavigate();
  const register = useAuthStore((s) => s.register);
  const pushToast = useToastStore((s) => s.push);

  const [email, setEmail] = useState("");
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");
  const [passwordConfirm, setPasswordConfirm] = useState("");
  const [submitting, setSubmitting] = useState(false);
  const [errors, setErrors] = useState<Record<string, string>>({});

  const validate = (): boolean => {
    const next: Record<string, string> = {};
    if (!email.includes("@")) next.email = t("errors.validation");
    if (username.trim().length < 3) next.username = t("errors.validation");
    if (password.length < 8) next.password = t("errors.validation");
    if (password !== passwordConfirm) next.password_confirm = t("errors.validation");
    setErrors(next);
    return Object.keys(next).length === 0;
  };

  const handleSubmit = async (e: FormEvent) => {
    e.preventDefault();
    if (!validate()) return;
    setSubmitting(true);
    try {
      await register({
        email: email.trim(),
        username: username.trim(),
        password,
        password_confirm: passwordConfirm,
      });
      pushToast("success", t("auth.register_success"));
      navigate("/login");
    } catch (err) {
      const msg = err instanceof ApiError ? err.message : t("auth.register_failed");
      pushToast("error", msg);
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <div className="mx-auto flex min-h-[calc(100vh-3.5rem)] max-w-md items-center p-4">
      <Card className="w-full" title={t("auth.register_title")}>
        <form onSubmit={handleSubmit} className="space-y-3">
          <Input
            label={t("auth.email")}
            type="email"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
            autoComplete="email"
            required
            error={errors.email}
          />
          <Input
            label={t("auth.username")}
            value={username}
            onChange={(e) => setUsername(e.target.value)}
            autoComplete="username"
            required
            error={errors.username}
          />
          <Input
            label={t("auth.password")}
            type="password"
            value={password}
            onChange={(e) => setPassword(e.target.value)}
            autoComplete="new-password"
            required
            error={errors.password}
          />
          <Input
            label={t("auth.password_confirm")}
            type="password"
            value={passwordConfirm}
            onChange={(e) => setPasswordConfirm(e.target.value)}
            autoComplete="new-password"
            required
            error={errors.password_confirm}
          />
          <Button type="submit" loading={submitting} fullWidth>
            {t("auth.register_button")}
          </Button>
          <p className="text-center text-sm text-fg-muted">
            <Link to="/login" className="text-accent hover:underline">
              {t("auth.have_account")}
            </Link>
          </p>
        </form>
      </Card>
    </div>
  );
}