"use client";

import * as React from "react";
import { useSignUp, useUser } from "@clerk/nextjs";
import { useSearchParams, useRouter } from "next/navigation";
import { Button, buttonVariants } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { useToast } from "@/components/ui/use-toast";
import useRegisterUserInvitation from "@/hooks/useRegisterUserInvitation";
import Link from "next/link";
import { ArrowLeft } from "lucide-react";
import { cn } from "@/lib/utils";
import { trpc } from "@/app/_trpc/client";

export default function Page() {
  const { user } = useUser();
  const router = useRouter();
  const  {token,handleSubmit,isRegistering}=useRegisterUserInvitation();

  React.useEffect(() => {
    if (user?.id) {
      router.push("/");
    }
  }, [user]);


  if (!token) {
    return <p>No invitation token found.</p>;
  }

  return (
    <section className="relative grid  space-y-2 place-content-center min-h-svh px-5 py-3">
      <div className="absolute top-2 left-2">
        <Link className={cn(buttonVariants({variant:"link",size:'sm'}))} href="/sign-in"><ArrowLeft/> Regresar a inicio de sección</Link>
      </div>
      <form
        className="space-y-2 px-10 py-5 border-xl shadow-xl rounded-xl bg-white min-w-[400px]"
        onSubmit={handleSubmit}
      >
        <header>
          <h1 className="text-xl mb-2 text-center font-semibold">
          ¡Bienvenido a TaskManagment!
          </h1>
          <p className="text-sm font-light text-center text-gray-500">
            {" "}
            ¿Cómo te gustaría que te llamáramos?
          </p>
        </header>
        <div>
          <Label htmlFor="firstName">Nombre</Label>
          <Input
            id="firstName"
            type="text"
            name="firstName"
            placeholder="Ej: Pablo"
            required
          />
        </div>
        <div>
          <Label htmlFor="lastName">Apellido</Label>
          <Input
            id="lastName"
            type="text"
            name="lastName"
            placeholder="Ej:Rodriguez"
            required
          />
        </div>
        <div className="m-auto pt-2">
          <Button disabled={isRegistering}  size="sm" className="rounded-md w-full" type="submit">
            Continuar
          </Button>
        </div>
      </form>
    </section>
  );
}