"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import Link from "next/link";
import { apiRegister } from "@/lib/api";

export default function RegisterPage() {
  const router = useRouter();
  const [username, setUsername] = useState("");
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [error, setError] = useState("");
  const [loading, setLoading] = useState(false);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setError("");
    setLoading(true);
    try {
      const res = await apiRegister(username, email, password);
      if (res.id) {
        router.push("/login");
      } else {
        setError(res.error || "注册失败");
      }
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="max-w-md mx-auto mt-12">
      <h1 className="text-2xl font-bold mb-6 text-center">注册</h1>
      <form onSubmit={handleSubmit} className="space-y-4">
        {error && (
          <div className="p-3 rounded-lg bg-red-50 text-red-600 text-sm">{error}</div>
        )}
        <div>
          <label className="block text-sm mb-1" style={{ color: "var(--text-secondary)" }}>用户名</label>
          <input
            type="text"
            value={username}
            onChange={(e) => setUsername(e.target.value)}
            required
            minLength={3}
            maxLength={32}
            className="w-full px-3 py-2 rounded-lg border"
            style={{ borderColor: "var(--border)", background: "var(--bg)", color: "var(--text)" }}
          />
        </div>
        <div>
          <label className="block text-sm mb-1" style={{ color: "var(--text-secondary)" }}>邮箱（可选）</label>
          <input
            type="email"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
            className="w-full px-3 py-2 rounded-lg border"
            style={{ borderColor: "var(--border)", background: "var(--bg)", color: "var(--text)" }}
          />
        </div>
        <div>
          <label className="block text-sm mb-1" style={{ color: "var(--text-secondary)" }}>密码</label>
          <input
            type="password"
            value={password}
            onChange={(e) => setPassword(e.target.value)}
            required
            minLength={6}
            className="w-full px-3 py-2 rounded-lg border"
            style={{ borderColor: "var(--border)", background: "var(--bg)", color: "var(--text)" }}
          />
        </div>
        <button
          type="submit"
          disabled={loading}
          className="w-full py-2 rounded-lg text-white disabled:opacity-50"
          style={{ background: "var(--primary)" }}
        >
          {loading ? "注册中..." : "注册"}
        </button>
      </form>
      <p className="text-center mt-4 text-sm" style={{ color: "var(--text-secondary)" }}>
        已有账号？<Link href="/login" className="hover:underline" style={{ color: "var(--primary)" }}>去登录</Link>
      </p>
    </div>
  );
}