import { zodResolver } from "@hookform/resolvers/zod";
import { useForm } from "react-hook-form";
import { FaGoogle } from "react-icons/fa";
import { z } from "zod";

import { authClient } from "@kan/auth";

import Button from "~/components/Button";
import Input from "~/components/Input";
import { api } from "~/utils/api";

interface FormValues {
  email: string;
}

interface AuthProps {
  setIsMagicLinkSent: (value: boolean, recipient: string) => void;
}

const EmailSchema = z.object({ email: z.string().email() });

export function Auth({ setIsMagicLinkSent }: AuthProps) {
  const {
    register,
    handleSubmit,
    watch,
    formState: { errors },
  } = useForm<FormValues>({
    resolver: zodResolver(EmailSchema),
  });

  const email = watch("email");

  const loginWithEmail = api.auth.loginWithEmail.useMutation({
    onSuccess: () => {
      setIsMagicLinkSent(true, email);
    },
  });

  const handleLoginWithEmail = async (email: string) => {
    const { data, error } = await authClient.signIn.magicLink({
      email,
      callbackURL: "/boards",
    });

    if (!error) {
      setIsMagicLinkSent(true, email);
    }
  };

  const onSubmit = async (values: FormValues) => {
    await handleLoginWithEmail(values.email);
  };

  return (
    <div className="space-y-6">
      <div>
        <Button
          onClick={() =>
            authClient.signIn.social({
              provider: "google",
              callbackURL: "/boards",
            })
          }
          iconLeft={<FaGoogle />}
          fullWidth
          size="lg"
        >
          Continue with Google
        </Button>
      </div>
      <form onSubmit={handleSubmit(onSubmit)}>
        <div className="mb-[1.5rem] flex w-full items-center gap-4">
          <div className="h-[1px] w-full bg-light-600 dark:bg-dark-600" />
          <span className="text-sm text-light-900 dark:text-dark-900">or</span>
          <div className="h-[1px] w-full bg-light-600 dark:bg-dark-600" />
        </div>
        <Input
          {...register("email", { required: true })}
          placeholder="Enter your email address"
        />
        {!loginWithEmail.error && errors.email && (
          <p className="mt-2 text-xs text-red-400">
            Please enter a valid email address
          </p>
        )}
        {loginWithEmail.error ? (
          <p className="mt-2 text-xs text-red-400">
            Something went wrong, please try again later or contact customer
            support.
          </p>
        ) : null}

        <div className="mt-[1.5rem]">
          <Button
            isLoading={loginWithEmail.isPending}
            fullWidth
            size="lg"
            variant="secondary"
          >
            Continue with email
          </Button>
        </div>
      </form>
    </div>
  );
}