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 { loginSchema, type LoginInput } 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 LoginPage() {
  const navigate = useNavigate();
  const queryClient = useQueryClient();

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

  const login = useMutation({
    mutationFn: api.auth.login,
    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">
            Sign in to Pijulab
          </h1>
        </div>

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

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