import { Button } from '@/components/ui/button';
import { Label } from '@/components/ui/label';
import Image from 'next/image';
import {
  SignInButton,
  SignedIn,
  SignedOut,
  useClerk,
  useUser,
} from '@clerk/nextjs';
import { useEffect, useState } from 'react';
import { useAsyncEffect } from '@/lib/hooks/useAsyncEffect';
import { env } from '@/lib/config/env';
import { ClipLoader } from 'react-spinners';
import { usePostHog } from 'posthog-js/react';
import {
  isClerkAPIResponseError,
  isEmailLinkError,
} from '@clerk/nextjs/errors';

export default function SelectSocialLogin({
  onNext,
}: {
  onNext: (hasFid: boolean) => void;
}) {
  const { isSignedIn, user } = useUser();
  const [isLoading, setIsLoading] = useState(false);
  const postHog = usePostHog();

  useEffect(() => {
    postHog.capture('ext_onboard_10');
  }, []);

  useAsyncEffect(async () => {
    if (!isSignedIn) {
      return;
    }

    setIsLoading(true);

    const body = JSON.stringify({
      social_login: 'twitter',
      username: user.username,
      email: user.emailAddresses[0].emailAddress,
      pfp_url: user.imageUrl,
      display_name: user.firstName,
      clerk_user_id: user.id,
    });

    const url = new URL(`${env.NEXT_PUBLIC_APP_BASE_URL}/auth/register`);

    const options = {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body,
    };

    try {
      const response = await fetch(url, options);

      if (!response.ok) {
        setIsLoading(false);
        onNext(false);
        return;
      }

      const data = await response.json();
      const fid = data.data.fid;

      setIsLoading(false);
      onNext(fid !== null);
    } catch (error) {
      setIsLoading(false);
      onNext(false);
    }
  }, [isSignedIn, user]);

  return (
    <div className="flex flex-col items-center bg-[#2f2f2f] rounded-lg w-[488px] py-10 gap-10 px-4">
      <Label className="text-[#c4c8cc] text-[28px] font-normal leading-9 uppercase text-center">
        Connect your X and Farcaster Accounts to get started
      </Label>
      <SignedOut>
        <SignInButton>
          <Button
            disabled={isLoading}
            className="bg-[#3A3A3A] hover:bg-[#3A3A3A]/20 rounded-[14.45px] border-2 border-[#434343] py-6 w-[380px]"
          >
            {isLoading ? (
              <div className="flex items-center justify-center gap-2">
                <ClipLoader color="#fff" size={15} />
                <Label className="leading-9 tracking-tight text-lg">
                  SIGNING IN...
                </Label>
              </div>
            ) : (
              <>
                <Image
                  src="/twitter-icon.svg"
                  alt="twitter-icon"
                  className="size-5 mr-2"
                  width={0}
                  height={0}
                />
                <Label className="leading-9 tracking-tight text-lg cursor-pointer">
                  SIGN INTO X
                </Label>
              </>
            )}
          </Button>
        </SignInButton>
      </SignedOut>
      <SignedIn>
        <Button
          disabled={true}
          className="bg-[#3A3A3A] hover:bg-[#3A3A3A]/20 rounded-[14.45px] border-2 border-[#434343] py-6 w-[380px]"
        >
          <div className="flex items-center justify-center gap-2">
            <ClipLoader color="#fff" size={15} />
            <Label className="leading-9 tracking-tight text-lg">
              SIGNING IN...
            </Label>
          </div>
        </Button>
      </SignedIn>
    </div>
  );
}