"use client";

import { trpc } from "@/app/_trpc/client";
import Loading from "@/components/Loading";
import { Button, buttonVariants } from "@/components/ui/button";
import { cn } from "@/lib/utils";
import { User } from "@/server/user/domain/models";
import { ArrowLeft } from "lucide-react";
import Link from "next/link";
import { useRouter, useSearchParams } from "next/navigation";
import { useEffect } from "react";

export default function VerificationStatus({ user }: { user: User }) {
  const router = useRouter();
  const { mutateAsync, isPending, isSuccess, isError, data } =
    trpc.users.findOrCreateUser.useMutation({
      onSuccess() {
        router.refresh();
      },
    });
  useEffect(() => {
    if (!Object.values(user)?.length) return;
    mutateAsync(user).then();
  }, [user]);

  return (
    <div>
      {isPending && (
        <h2 className="text-xl font-light animate-pulse">Verificando...</h2>
      )}
      {isSuccess && (
        <h2 className="text-xl font-light animate-pulse">
          Verificado, redireccionando...
        </h2>
      )}
      {isError && (
        <div className="flex flex-col items-center space-y-2 text-center">
          <h2 className="text-xl font-light animate-pulse">
            Un error ha ocurrido, verificando su informacion.
          </h2>
             <div className="flex gap-2 justify-center">
             <Button
            onClick={async () => await mutateAsync(user)}
            disabled={isPending}
            className="rounded-3xl"
            size="sm"
          >
            Reintentar
          </Button>
          <p>o</p>
          <Link
              className={cn(buttonVariants({ variant: "link", size: "sm" }))}
              href="/sign-in"
            >
              <ArrowLeft /> Regresar a inicio de sección
            </Link>
             </div>
        </div>
      )}
      {!isError && <Loading />}
    </div>
  );
}