import { useRouter } from "next/router";
import { useEffect, useState } from "react";
import { getAccessToken, getEmbeddedConnectedWallet, usePrivy, useWallets, Google, Twitter, Discord } from "@privy-io/react-auth";
import Head from "next/head";
import { useBalance } from 'wagmi';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faDiscord, faGoogle, faMeta, faTwitter, faXTwitter } from "@fortawesome/free-brands-svg-icons";
import { faAdd, faFileExport, faLink, faTrash, faUnlink, faWallet } from "@fortawesome/free-solid-svg-icons";
import { useSetActiveWallet } from "@privy-io/wagmi";
import { encodeFunctionData, parseAbi } from 'viem';
import { gameDataABI } from "./data";
import { arbitrumSepolia, baseSepolia } from "viem/chains";

export default function DashboardPage() {
  const [verifyResult, setVerifyResult] = useState(0);
  const [username, setUsername] = useState('');
  const [vaultData, setVaultData] = useState({ prehp: "0", vc: "0" });
  const [showPopup, setShowPopup] = useState(false);
  const [ticketAmount, setTicketAmount] = useState(1);
  const router = useRouter();

  const { ready, authenticated, user, logout, exportWallet, linkWallet, unlinkWallet, linkDiscord, unlinkDiscord, linkTwitter, unlinkTwitter, linkGoogle, unlinkGoogle } = usePrivy();
  const { wallets } = useWallets();

  const [activeWallet, setActiveWallet] = useState(user?.wallet?.address);
  const [activeWalletObj, setActiveWalletObj] = useState(wallets[0]);
  const [ticketsCount, setTicketsCount] = useState(0);

  const { data: balanceData } = useBalance({
    address: activeWallet as `0x${string}`,
    token: "0x22b6c31c2beb8f2d0d5373146eed41ab9ede3caf"
  });

  const balance = balanceData?.formatted;
  const token = balanceData?.symbol;


  function ToggleDiscord() {
    if (user?.discord) {
      unlinkDiscord(user?.discord.subject);
    } else {
      linkDiscord();
    }
  }

  function ToggleTwitter() {
    if (user?.twitter) {
      unlinkTwitter(user?.twitter.subject);
    } else {
      linkTwitter();
    }
  }

  function ToggleGoogle() {
    if (user?.google) {
      unlinkGoogle(user?.google.subject);
    } else {
      linkGoogle();
    }
  }
  async function handleWalletClick(address: string) {
    setActiveWallet(address);
    const url = `http://vps.playpoolstudios.com/metahunt/api/launcher/set_wallet.php?id=${user?.id}&wallet=${address}`;
    const response = await fetch(url);
    console.log(url);

    wallets.forEach((element) => {
      if (element.address == address) {
        setActiveWalletObj(element);
        element.switchChain(chainId);
      }
    });

  }


  useEffect(() => {
    if (ready && !authenticated) {
      router.push("/");
    }
    if (ready) {
      if (username == "-1") {
        console.log(user?.id);
        router.push("/logincomplete");
      }
    }
  }, [ready, authenticated, router, username]);

  useEffect(() => {
    async function fetchUsername() {
      if (ready) {
        try {
          const response = await fetch(`https://vps.playpoolstudios.com/metahunt/api/launcher/get_display_name_public.php?id=${user?.id}`);
          const data = await response.text();
          setUsername(data);
        } catch (error) {
          console.error("Error fetching username:", error);
        }
      }
    }

    async function fetchVaultData() {
      if (user?.id) {
        try {
          const response = await fetch(`http://vps.playpoolstudios.com/metahunt/api/launcher/get_vault.php?id=${user?.id}`);
          const data = await response.json();
          setVaultData({ prehp: data.prehp, vc: data.vc });
        } catch (error) {
          console.error("Error fetching vault data:", error);
        }
      }
    }

    fetchUsername();
    fetchVaultData();
  }, [ready]);

  async function autoSetActiveWallet(){
    try {
      const response = await fetch(`http://vps.playpoolstudios.com/metahunt/api/launcher/get_active_wallet.php?id=${user?.id}`);
      const activeWalletString = await response.text();
      wallets.forEach((element)=>{
        if(element.address == activeWalletString){
          setActiveWallet(element.address);
          setActiveWalletObj(element);
        }
      });

      if(activeWalletString != activeWallet){
        setActiveWalletObj(wallets[0]);
      }
    } catch (error) {
      console.error("Error fetching vault data:", error);
    }

  }

  const chainId = arbitrumSepolia.id;

  useEffect(() => {
    setActiveWallet(getEmbeddedConnectedWallet(wallets)?.address);
    autoSetActiveWallet();
    getTickets();
  }, [wallets]);

  useEffect(() => {
    getTickets();
  }, [activeWalletObj]);


  const contractAddress = "0x7e06ae145dc3d73350c7da040355654EbF11f1bc";
  async function buyTicket(amount: number) {
    const isEmbedded = getEmbeddedConnectedWallet(wallets)?.address == activeWalletObj?.address;
    const provider = await activeWalletObj?.getEthereumProvider();
    if (!provider) {
      console.error("Ethereum provider not found");
      return;
    }

    const data = encodeFunctionData({
      abi: gameDataABI,
      functionName: 'buyTickets',
      args: [amount],
    });
    const value = 1000000000000 * amount;
    console.log(`isEmbbedded : ${isEmbedded}`)
    const transactionRequest = {
      from: activeWalletObj?.address,
      to: contractAddress,
      data: data,
      value: isEmbedded ? value : value.toString(),
    };

    try {
      const transactionHash = await provider.request({
        method: 'eth_sendTransaction',
        params: [transactionRequest],
      });
      // Polling for the transaction receipt
    const checkTransactionReceipt = async () => {
      const receipt = await provider.request({
        method: 'eth_getTransactionReceipt',
        params: [transactionHash],
      });

      if (receipt && receipt.status) {
        if (receipt.status === '0x1') { // Transaction was successful
          console.log('Transaction confirmed:', receipt);
          getTickets(); // Call getTickets() after the transaction is confirmed
          //setShowPopup(false); // Close the popup after successful transaction
        } else {
          console.error('Transaction failed:', receipt);
        }
      } else {
        // Retry after some delay if the receipt is not available yet
        setTimeout(checkTransactionReceipt, 2000); // Poll every 2 seconds
      }
    };

    checkTransactionReceipt(); 
      setShowPopup(false); // Close the popup after successful transaction
    } catch (error) {
      console.error('Transaction failed:', error);
    }
  }

  async function getTickets() {
    const provider = await activeWalletObj?.getEthereumProvider();
    if (!provider) {
      console.error("Ethereum provider not found");
      return;
    }

    try {
      const data = encodeFunctionData({
        abi: gameDataABI,
        functionName: 'balanceOf',
        args: [activeWalletObj?.address, 0],
      });

      const callRequest = {
        from: activeWalletObj?.address,
        to: contractAddress,
        data: data,
      };

      const result = await provider.request({
        method: 'eth_call',
        params: [callRequest],
      });

      const balanceHex = result;
      const balance = parseInt(balanceHex, 16);
      setTicketsCount(balance);
    } catch (error) {
      console.error('Call failed:', error);
    }
  }

  

  return (
    <>
      <Head>
        <title>W3B Games Dashboard</title>
      </Head>

      <main className="flex flex-col min-h-screen px-4 sm:px-20 py-6 sm:py-10 bg-gradient-to-br from-purple-900 to-blue-900 text-white">
        {ready && authenticated ? (
          <>
            <div className="flex flex-row justify-between items-center mb-8">
              <h1 className="text-3xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-blue-500">
                Welcome {username || "Crypto Warrior"},
              </h1>
              <button
                onClick={logout}
                className="text-sm bg-gradient-to-r from-red-500 to-pink-500 hover:from-red-600 hover:to-pink-600 py-2 px-6 rounded-full text-white font-semibold transform hover:scale-105 transition duration-300 ease-in-out"
              >
                Logout
              </button>
            </div>
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
              <div className="bg-gradient-to-br from-purple-800 to-indigo-900 rounded-2xl p-6 shadow-lg hover:shadow-2xl transition duration-300 ease-in-out transform hover:-translate-y-1">
                <h2 className="text-lg font-semibold mb-2 text-purple-300">Vault Credits</h2>
                <p className="text-4xl font-bold text-white">{vaultData.vc || "0"} <span className="text-2xl text-purple-300">VC</span></p>
              </div>
              <div className="bg-gradient-to-br from-blue-800 to-cyan-900 rounded-2xl p-6 shadow-lg hover:shadow-2xl transition duration-300 ease-in-out transform hover:-translate-y-1">
                <h2 className="text-lg font-semibold mb-2 text-blue-300">{token} Balance</h2>
                <p className="text-4xl font-bold text-white">{balance || 0} <span className="text-2xl text-blue-300">{token}</span></p>
                <p className="text-xs mt-2 text-blue-300 truncate">{activeWallet}</p>
              </div>
              <div className="bg-gradient-to-br from-green-800 to-teal-900 rounded-2xl p-6 shadow-lg hover:shadow-2xl transition duration-300 ease-in-out transform hover:-translate-y-1 flex flex-col justify-between">
                <div>
                  <h2 className="text-lg font-semibold mb-2 text-green-300">Hunt Tickets</h2>
                  <p className="text-4xl font-bold text-white">{ticketsCount || "0"}</p>
                </div>
                <div className="flex justify-end">
                  <button
                    onClick={() => setShowPopup(true)}
                    className="bg-gradient-to-r from-green-500 to-teal-500 hover:from-green-600 hover:to-teal-600 py-2 px-4 rounded-full text-white font-semibold transform hover:scale-105 transition duration-300 ease-in-out"
                  >
                    Buy Tickets
                  </button>
                </div>
              </div>
              <div className="bg-gradient-to-br from-yellow-800 to-orange-900 rounded-2xl p-6 shadow-lg hover:shadow-2xl transition duration-300 ease-in-out transform hover:-translate-y-1">
                <h2 className="text-lg font-semibold mb-2 text-yellow-300">Pre-hunt Points</h2>
                <p className="text-4xl font-bold text-white">{vaultData.prehp || "0"} <span className="text-2xl text-yellow-300">PHP</span></p>
              </div>
            </div>

            <div className="grid grid-cols-1 lg:grid-cols-2 gap-10 mt-10">
              <div className="bg-gradient-to-br from-gray-900 to-gray-800 rounded-3xl shadow-xl p-8">
                <h2 className="text-2xl font-bold mb-6 text-center text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-pink-500">Socials</h2>
                <div className="space-y-6">
                  {[
                    { icon: faXTwitter, name: 'Twitter', user: user?.twitter, toggle: ToggleTwitter },
                    { icon: faDiscord, name: 'Discord', user: user?.discord, toggle: ToggleDiscord },
                    { icon: faGoogle, name: 'Google', user: user?.google, toggle: ToggleGoogle }
                  ].map((social) => (
                    <div key={social.name} className="flex items-center justify-between bg-gray-800 rounded-xl p-4 hover:bg-gray-700 transition duration-300">
                      <div className="flex items-center space-x-4">
                        <div className="w-8 h-8 flex items-center justify-center">
                          <FontAwesomeIcon icon={social.icon} size="2x" className="text-blue-400" />
                        </div>
                        <span className="font-medium">{social.name}</span>
                      </div>
                      <div className="flex items-center space-x-4">
                      <span className={`px-3 py-1 rounded-full ${social.user ? 'bg-green-900 text-green-300' : 'bg-gray-700 text-gray-400'}`}>
                      {social.user ? (
  social.name === 'Google' 
    ? `@${(social.user as Google).email}` 
    : `@${(social.user as Twitter | Discord).username}`
) : 'Not linked'}
                      </span>
                        <button
                          onClick={social.toggle}
                          className={`rounded-full px-4 py-2 font-semibold transition duration-300 ${
                            social.user
                              ? 'bg-red-600 hover:bg-red-700 text-white'
                              : 'bg-green-600 hover:bg-green-700 text-white'
                          }`}
                        >
                          {social.user ? 'Unlink' : 'Link'}
                        </button>
                      </div>
                    </div>
                  ))}
                </div>
              </div>

              <div className="bg-gradient-to-br from-gray-900 to-gray-800 rounded-3xl shadow-xl p-8">
                <h2 className="text-2xl font-bold mb-6 text-center text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-cyan-500">Wallets</h2>
                <div className="space-y-4">
                  <div
                    className={`grid grid-cols-6 ${
                      activeWallet == getEmbeddedConnectedWallet(wallets)?.address
                        ? 'bg-gradient-to-r from-blue-700 to-purple-700'
                        : 'bg-gray-800'
                    } rounded-xl p-4 items-center cursor-pointer transition duration-300 hover:shadow-lg`}
                    onClick={() => handleWalletClick(getEmbeddedConnectedWallet(wallets)?.address ?? "")}
                  >
                    <FontAwesomeIcon icon={faLink} className="text-cyan-400 w-8 h-8" />
                    <div className="col-span-4">
                      <p className="font-semibold">W3B Wallet</p>
                      <p className="text-sm text-gray-400 truncate">
                        {getEmbeddedConnectedWallet(wallets)?.address}
                      </p>
                    </div>
                    <button
                      className="justify-self-end bg-purple-600 hover:bg-purple-700 rounded-full p-2 transition duration-300"
                      onClick={exportWallet}
                    >
                      <FontAwesomeIcon icon={faFileExport} className="w-4 h-4" />
                    </button>
                  </div>

                  {wallets.map((wallet) => {
                    if (wallet.connectorType == "embedded") return null;
                    const address = wallet.address;
                    return (
                      <div
                        key={address}
                        className={`grid grid-cols-6 ${
                          wallet.linked
                            ? address == activeWallet
                              ? 'bg-gradient-to-r from-blue-700 to-purple-700'
                              : 'bg-gray-800'
                            : 'bg-gray-900 bg-opacity-30'
                        } rounded-xl p-4 items-center cursor-pointer transition duration-300 hover:shadow-lg`}
                        onClick={() => handleWalletClick(address)}
                      >
                        <FontAwesomeIcon icon={faWallet} className={`${wallet.linked ? 'text-yellow-400' : 'text-gray-600'} w-8 h-8`} />
                        <div className="col-span-4">
                          <p className={`font-semibold ${wallet.linked ? 'text-white' : 'text-gray-600'}`}>{wallet.walletClientType}</p>
                          <p className={`text-sm ${wallet.linked ? 'text-gray-300' : 'text-gray-600'} truncate`}>{wallet.address}</p>
                        </div>
                        {wallet.linked ? (
                          <button
                            className="justify-self-end bg-red-600 hover:bg-red-700 rounded-full p-2 transition duration-300"
                            onClick={() => unlinkWallet(wallet.address)}
                          >
                            <FontAwesomeIcon icon={faUnlink} className="w-4 h-4" />
                          </button>
                        ) : (
                          <FontAwesomeIcon icon={faUnlink} className="w-4 h-4 text-gray-600 justify-self-end" />
                        )}
                      </div>
                    );
                  })}

                  <button
                    onClick={linkWallet}
                    className="bg-gradient-to-r from-green-500 to-blue-500 hover:from-green-600 hover:to-blue-600 text-white font-bold py-2 px-3 rounded-lg transition duration-300 ease-in-out flex items-center justify-center space-x-2 text-sm"
                  >
                    <FontAwesomeIcon icon={faAdd} className="w-4 h-4" />
                    <span>Connect New Wallet</span>
                  </button>
                </div>
              </div>
            </div>

            {showPopup && (
              <div className="fixed inset-0 bg-black bg-opacity-75 flex justify-center items-center z-50">
                <div className="bg-gradient-to-br from-gray-900 to-gray-800 p-8 rounded-2xl shadow-2xl max-w-md w-full">
                  <h2 className="text-2xl font-bold mb-6 text-center text-transparent bg-clip-text bg-gradient-to-r from-green-400 to-blue-500">Buy Hunt Tickets</h2>
                  <div className="flex items-center justify-center space-x-4 mb-6">
                    <button
                      onClick={() => setTicketAmount(Math.max(1, ticketAmount - 1))}
                      className={`text-2xl bg-gray-700 hover:bg-gray-600 text-white w-12 h-12 rounded-full transition duration-300 ${ticketAmount <= 1 ? 'opacity-50 cursor-not-allowed' : ''}`}
                      disabled={ticketAmount <= 1}
                    >
                      -
                    </button>
                    <div className="w-24 text-center text-2xl font-bold text-white bg-transparent border-b-2 border-blue-500">
                      {ticketAmount}
                    </div>
                    <button
                      onClick={() => setTicketAmount(ticketAmount + 1)}
                      className="text-2xl bg-gray-700 hover:bg-gray-600 text-white w-12 h-12 rounded-full transition duration-300"
                    >
                      +
                    </button>
                  </div>
                  <div className="flex justify-between space-x-4">
                    <button
                      onClick={() => buyTicket(ticketAmount)}
                      className="flex-1 bg-gradient-to-r from-green-500 to-blue-500 hover:from-green-600 hover:to-blue-600 text-white font-bold py-3 px-6 rounded-full transition duration-300 ease-in-out transform hover:scale-105"
                    >
                      Buy Tickets
                    </button>
                    <button
                      onClick={() => setShowPopup(false)}
                      className="flex-1 bg-gradient-to-r from-red-500 to-pink-500 hover:from-red-600 hover:to-pink-600 text-white font-bold py-3 px-6 rounded-full transition duration-300 ease-in-out transform hover:scale-105"
                    >
                      Cancel
                    </button>
                  </div>
                </div>
              </div>
            )}
          </>
        ) : (
          <div className="flex justify-center items-center h-screen">
            <div className="animate-spin rounded-full h-32 w-32 border-t-2 border-b-2 border-blue-500"></div>
          </div>
        )}
      </main>
    </>
  );
}
