import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { useMutation, useQueryClient } from "@tanstack/react-query";
import { useNavigate, Link } from "@tanstack/react-router";
import { signupSchema, type SignupInput } from "@pijulab/shared";
import { api } from "../api/client";
import { Button } from "../components/ui/Button";
import { Input } from "../components/ui/Input";
import { Card, CardBody } from "../components/ui/Card";

export function SignupPage() {
  const navigate = useNavigate();
  const queryClient = useQueryClient();

  const {
    register,
    handleSubmit,
    formState: { errors },
    setError,
  } = useForm<SignupInput>({ resolver: zodResolver(signupSchema) });

  const signup = useMutation({
    mutationFn: api.auth.signup,
    onSuccess: (user) => {
      queryClient.setQueryData(["me"], user);
      navigate({ to: "/" });
    },
    onError: (err) => {
      setError("root", { message: err.message });
    },
  });

  return (
    <div className="min-h-screen flex items-center justify-center px-4">
      <div className="w-full max-w-sm">
        <div className="text-center mb-8">
          <div className="text-4xl mb-3">◆</div>
          <h1 className="text-[28px] font-semibold text-[#1d1d1f] tracking-tight">
            Create your account
          </h1>
          <p className="text-[15px] text-[#6e6e73] mt-1">
            Start hosting your Pijul repositories
          </p>
        </div>

        <Card>
          <CardBody>
            <form onSubmit={handleSubmit((data) => signup.mutate(data))} className="flex flex-col gap-4">
              <Input
                label="Username"
                placeholder="masak1yu"
                autoComplete="username"
                {...register("username")}
                error={errors.username?.message}
              />
              <Input
                label="Email"
                type="email"
                placeholder="you@example.com"
                autoComplete="email"
                {...register("email")}
                error={errors.email?.message}
              />
              <Input
                label="Password"
                type="password"
                placeholder="8+ characters"
                autoComplete="new-password"
                {...register("password")}
                error={errors.password?.message}
              />
              {errors.root && (
                <p className="text-[13px] text-red-500">{errors.root.message}</p>
              )}
              <Button type="submit" loading={signup.isPending} className="w-full mt-1">
                Create account
              </Button>
            </form>
          </CardBody>
        </Card>

        <p className="text-center text-[13px] text-[#6e6e73] mt-5">
          Already have an account?{" "}
          <Link to="/login" className="text-[#0071e3] hover:underline">
            Sign in
          </Link>
        </p>
      </div>
    </div>
  );
}