import React, { useState, useEffect } from 'react';
import Web3 from 'web3';
import { useAuthUser } from "react-auth-kit";
import PurchaseToken from './PurchaseToken'; // Assuming this is the path to your PurchaseToken component
import LeumasTokenABI from "../../../assets/LeumasToken.json"; // Adjust path as needed

// Assuming you have environment variables set for these or define them directly
const TOKEN_ADDRESS = import.meta.env.REACT_APP_LEUMAS_TOKEN_ADDRESS;

const LeumasWallet = () => {
  const [web3, setWeb3] = useState(null);
  const [account, setAccount] = useState(null);
  const [tokenContract, setTokenContract] = useState(null);
  const [userBalance, setUserBalance] = useState(0);
  const [loading, setLoading] = useState(false);

  const auth = useAuthUser();
  const userToken = auth()?.token;

  useEffect(() => {
    const loadBlockchainData = async () => {
      if (window.ethereum) {
        setLoading(true);
        const web3 = new Web3(window.ethereum);
        setWeb3(web3);

        const accounts = await window.ethereum.request({ method: 'eth_accounts' });
        setAccount(accounts[0]);

        const contract = new web3.eth.Contract(LeumasTokenABI, TOKEN_ADDRESS);
        setTokenContract(contract);

        const balance = await contract.methods.balanceOf(accounts[0]).call();
        setUserBalance(web3.utils.fromWei(balance, 'ether'));

        setLoading(false);
      } else {
        alert('Please install MetaMask to use this feature.');
      }
    };

    loadBlockchainData();
  }, [userToken]);

  return (
    <div className="bg-gray-900 text-white p-4 rounded-lg shadow-lg">
      <h2 className="text-2xl font-bold mb-4">Leumas Wallet</h2>
      {loading ? (
        <p>Loading wallet information...</p>
      ) : (
        <>
          <div className="mb-4">
            <p>Account: {account}</p>
            <p>Balance: {userBalance} LMS Tokens</p>
          </div>
          <PurchaseToken web3={web3} account={account} tokenContract={tokenContract} onBalanceUpdate={setUserBalance} />
        </>
      )}
    </div>
  );
};

export default LeumasWallet;