"use client";

import { useEffect, useState } from 'react';
import axios from 'axios';
import { PrivyProvider, usePrivy } from '@privy-io/react-auth';

const Home: React.FC = () => {
  const { login, ready, user } = usePrivy();

  useEffect(() => {
    
    const setResult = async (result: string, wallet:string) => {
      const params = new URLSearchParams(window.location.search);
      const requestIdFromUrl = params.get('request_id');
      try {
        await axios({
          method: 'get',
          url: `https://vps.playpoolstudios.com/metahunt/api/launcher/set_request_response.php`,
          withCredentials: false,
          params: {
            id: requestIdFromUrl,
            result: result
          },
        });
        console.log(`https://vps.playpoolstudios.com/metahunt/api/launcher/set_request_response.php?id=${requestIdFromUrl}&result=${result}`);
        await axios({
          method: 'get',
          url: `https://vps.playpoolstudios.com/metahunt/api/launcher/set_wallet.php`,
          withCredentials: false,
          params: {
            id: result,
            wallet: wallet
          },
        });
      } catch (error) {
        console.error('Error making GET request:', error);
      }
    };

    const requestIdFromUrl = new URLSearchParams(window.location.search).get('request_id');
    
    if(!ready){
      console.log("not ready yet");
    }
    else if (requestIdFromUrl) {
      setResult(user?.id ?? "", user?.wallet?.address ?? "no wallet"); // Replace 'some_result' with the actual result you want to send
    }
  }, [ready, user]);

  return (
    <div className='flex flex-col items-center justify-center h-full'>
      {user && ready ? (
        <div>
          <h1 className='neon-text mb-4 text-3xl'>Login Success. You may close this now.</h1>
          <h1>{ user.wallet?.address }</h1>
        </div>
        
      ) : (
        <>
          <h1 className='neon-text mb-4 text-3xl'>Complete W3B Wallet Login</h1>
          <button className='bg-green-700 rounded-full p-1 px-4 text-lg m-5' onClick={login}>Login</button>
        </>
      )}
    </div>
  );
};

const App: React.FC = () => {
  return (
    <PrivyProvider appId={process.env.NEXT_PUBLIC_PRIVY_APP_ID || 'clww47dl8012n33vqoc9xsy5o'}>
      <Home />
    </PrivyProvider>
  );
};

export default App;