import { useState } from "react";
import { Link } from "react-router";
import { Button } from "../components/ui/button";
import { Input } from "../components/ui/input";
import { Label } from "../components/ui/label";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "../components/ui/card";
import { useAuth } from "../../hooks/useAuth";

export function RegisterPage() {
  const { register, registerPending, registerError } = useAuth();
  const [form, setForm] = useState({
    username: "",
    email: "",
    password: "",
    tenantName: "",
  });

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    register({
      username: form.username,
      email: form.email,
      password: form.password,
      tenantName: form.tenantName || undefined,
    });
  };

  return (
    <div className="min-h-screen flex items-center justify-center bg-background px-4">
      <Card className="w-full max-w-sm">
        <CardHeader className="text-center">
          <CardTitle className="text-2xl">创建账号</CardTitle>
          <CardDescription>免费开始使用 Dramix</CardDescription>
        </CardHeader>
        <CardContent>
          <form onSubmit={handleSubmit} className="space-y-4">
            <div className="space-y-2">
              <Label htmlFor="username">用户名</Label>
              <Input
                id="username"
                placeholder="your-name"
                required
                value={form.username}
                onChange={(e) => setForm((f) => ({ ...f, username: e.target.value }))}
              />
            </div>
            <div className="space-y-2">
              <Label htmlFor="email">邮箱</Label>
              <Input
                id="email"
                type="email"
                placeholder="you@example.com"
                required
                value={form.email}
                onChange={(e) => setForm((f) => ({ ...f, email: e.target.value }))}
              />
            </div>
            <div className="space-y-2">
              <Label htmlFor="password">密码</Label>
              <Input
                id="password"
                type="password"
                placeholder="至少 8 位"
                required
                minLength={8}
                value={form.password}
                onChange={(e) => setForm((f) => ({ ...f, password: e.target.value }))}
              />
            </div>
            <div className="space-y-2">
              <Label htmlFor="tenantName">
                工作空间名称 <span className="text-muted-foreground text-xs">（可选）</span>
              </Label>
              <Input
                id="tenantName"
                placeholder="我的工作室"
                value={form.tenantName}
                onChange={(e) => setForm((f) => ({ ...f, tenantName: e.target.value }))}
              />
            </div>

            {registerError && (
              <p className="text-sm text-destructive">
                {registerError instanceof Error ? registerError.message : "注册失败"}
              </p>
            )}

            <Button type="submit" className="w-full" disabled={registerPending}>
              {registerPending ? "注册中..." : "注册"}
            </Button>

            <p className="text-center text-sm text-muted-foreground">
              已有账号？{" "}
              <Link to="/login" className="text-primary underline-offset-4 hover:underline">
                立即登录
              </Link>
            </p>
          </form>
        </CardContent>
      </Card>
    </div>
  );
}
