'use client';

import {
  usePrivy,
  useWallets,
  useCreateWallet,
  useSolanaWallets,
} from '@privy-io/react-auth';
import { Button } from '@/components/ui/button';
import { useDisconnect } from 'wagmi';
import { useRef, useState } from 'react';
import {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuItem,
  NavigationMenuList,
  NavigationMenuTrigger,
} from '@/components/ui/navigation-menu';
import { useAsyncEffect } from '@/lib/hooks/useAsyncEffect';

export default function ConnectWalletButton() {
  const { ready, authenticated, login, logout } = usePrivy();
  const { wallets: evmWallets, ready: evmWalletsReady } = useWallets();
  const { disconnect } = useDisconnect();
  const [isDisconnecting, setIsDisconnecting] = useState(false);
  const isCreatingSolanaWallet = useRef(false);

  const {
    createWallet: createSolanaWallet,
    ready: solanaWalletsReady,
    wallets: solanaWallets,
  } = useSolanaWallets();


  useAsyncEffect(async () => {
    if (!authenticated || !solanaWalletsReady) {
      return;
    }

    const solanaWallet = solanaWallets.find(
      (wallet) => wallet.connectorType === 'embedded',
    );

    if (!solanaWallet && !isCreatingSolanaWallet.current) {
      try {
        isCreatingSolanaWallet.current = true;
        await createSolanaWallet();
      } catch (error) {
        isCreatingSolanaWallet.current = false;
        console.log('Error creating solana wallet', error);
      }
    }
  }, [authenticated, solanaWalletsReady, solanaWallets]);

  const handleDisconnect = async () => {
    setIsDisconnecting(true);
    await disconnect();
    await logout();
    setIsDisconnecting(false);
    localStorage.removeItem('wagmi.io.metamask.disconnected');
  };

  const renderButton = () => {
    if (!ready || isDisconnecting || !evmWallets || !solanaWallets) {
      return (
        <Button className="w-[165px] h-[40px]" disabled>
          {isDisconnecting ? 'Disconnecting...' : 'Connecting...'}
        </Button>
      );
    }

    const evmWallet = evmWallets.find(
      (wallet) => wallet.connectorType === 'embedded',
    );

    const solanaWallet = solanaWallets.find(
      (wallet) => wallet.connectorType === 'embedded',
    );

    if (authenticated && (evmWallet || solanaWallet)) {
      const addressToDisplay = evmWallet?.address || solanaWallet?.address;

      return (
        <NavigationMenu>
          <NavigationMenuList>
            <NavigationMenuItem>
              <NavigationMenuTrigger className="w-[165px] h-[40px] rounded-sm font-superstar bg-primary text-primary-foreground hover:bg-primary/90 data-[state=open]:bg-primary/90 flex items-center justify-center">
                {addressToDisplay?.slice(0, 6)}...
                {addressToDisplay?.slice(-4)}
              </NavigationMenuTrigger>
              <NavigationMenuContent>
                <div className="flex flex-col p-2 w-[165px] bg-zinc-900 rounded-lg border-0 shadow-lg">
                  {/* <Button
                    variant="ghost"
                    className="w-full justify-start py-2 text-white hover:bg-zinc-800 hover:text-white font-superstar"
                    onClick={() => router.push(`/profile/${address}`)}
                  >
                    PROFILE
                  </Button> */}
                  <Button
                    variant="ghost"
                    className="w-full justify-start py-2 text-red-500 hover:bg-zinc-800 hover:text-red-400 font-superstar"
                    onClick={handleDisconnect}
                    disabled={isDisconnecting}
                  >
                    DISCONNECT
                  </Button>
                </div>
              </NavigationMenuContent>
            </NavigationMenuItem>
          </NavigationMenuList>
        </NavigationMenu>
      );
    }

    return (
      ready &&
      !authenticated && (
        <Button
          className="w-[165px] h-[40px] font-superstar"
          onClick={() => login({ loginMethods: ['farcaster'] })}
        >
          Login with Farcaster
        </Button>
      )
    );
  };

  return <div className="h-[40px] flex items-center">{renderButton()}</div>;
}