'use client'

import { useEffect, useState } from 'react'
import DashboardLayout from '@/components/DashboardLayout'
import { useMockWallet } from '@/context/MockWalletContext'
import { 
  MdAccountBalanceWallet, 
  MdArrowUpward, 
  MdCheckCircle, 
  MdPerson, 
  MdGroupAdd, 
  MdHistory,
  MdStar
} from 'react-icons/md'
import { useWriteContract, useChainId, useReadContract } from 'wagmi'
import { parseUnits, createPublicClient, http, formatEther } from 'viem'
import { bscTestnet } from 'viem/chains'
import toast from 'react-hot-toast'

const testnetClient = createPublicClient({
  chain: bscTestnet,
  transport: http('https://data-seed-prebsc-1-s1.binance.org:8545/')
})

const erc20Abi = [
  {
    name: 'transfer',
    type: 'function',
    stateMutability: 'nonpayable',
    inputs: [
      { name: 'recipient', type: 'address' },
      { name: 'amount', type: 'uint256' }
    ],
    outputs: [{ name: '', type: 'bool' }]
  }
] as const

const getUsdtAddress = (chainId: number) => {
  if (chainId === 56) return '0x55d398326f99059ff775485246999027b3197955' // BSC Mainnet USDT
  return '0x337610d27c682E347C9cD60BD4b3b107C9d34dDd' // BSC Testnet USDT
}

const VAULT_ADDRESS = '0xf62a0d7778E817DF41570c4a830b1495E6eA5F5b'

// Core ecosystem contracts for on-chain staking
const MTCTOKEN_ADDRESS = '0xA7E60EAFc976C46ee168939a0b4f85d659f8C5d7'
const POSITION_MANAGER_ADDRESS = '0x78BDa7316ff3f024DeCAbdb9182d94aca3C42404'
const DISTRIBUTION_ENGINE_ADDRESS = '0xee06347D046701A746BcFB2eE9AAa71DAcEa16D2'

const mtcTokenAbi = [
  {
    name: 'approve',
    type: 'function',
    stateMutability: 'nonpayable',
    inputs: [
      { name: 'spender', type: 'address' },
      { name: 'amount', type: 'uint256' }
    ],
    outputs: [{ name: '', type: 'bool' }]
  }
] as const

const positionManagerAbi = [
  {
    name: 'createPosition',
    type: 'function',
    stateMutability: 'nonpayable',
    inputs: [
      { name: 'amount', type: 'uint256' },
      { name: 'sponsor', type: 'address' }
    ],
    outputs: []
  }
] as const

export default function Topup() {
  const { isConnected, address, isDemo } = useMockWallet()
  const { writeContractAsync } = useWriteContract()
  const chainId = useChainId()

  const [memberId, setMemberId] = useState('')
  const [cwallet, setCwallet] = useState(0)
  const [sponsorAddress, setSponsorAddress] = useState('')
  
  const [activeTab, setActiveTab] = useState<'deposit' | 'self' | 'others' | 'self_mtc' | 'others_mtc' | 'history'>('deposit')
  const [loading, setLoading] = useState(true)
  const [submitting, setSubmitting] = useState(false)
  const [successMsg, setSuccessMsg] = useState('')
  const [errorMsg, setErrorMsg] = useState('')

  // MTC balance hooks
  const { data: mtcRawBalance } = useReadContract({
    address: '0xA7E60EAFc976C46ee168939a0b4f85d659f8C5d7',
    abi: [
      {
        name: 'balanceOf',
        type: 'function',
        stateMutability: 'view',
        inputs: [{ name: 'owner', type: 'address' }],
        outputs: [{ name: '', type: 'uint256' }]
      }
    ] as const,
    functionName: 'balanceOf',
    args: address ? [address as `0x${string}`] : undefined,
    query: {
      enabled: !!address,
      refetchInterval: 5000
    }
  })

  const mtcBalance = mtcRawBalance ? Number(formatEther(mtcRawBalance)) : 0
  const [demoMtcBalance, setDemoMtcBalance] = useState(100.00)

  useEffect(() => {
    if (isDemo && typeof window !== 'undefined' && memberId) {
      const key = `demoMtcBalance_${memberId}`
      const stored = localStorage.getItem(key)
      if (!stored) {
        localStorage.setItem(key, '100.00')
        setDemoMtcBalance(100.00)
      } else {
        setDemoMtcBalance(Number(stored))
      }
    }
  }, [isDemo, memberId])

  const displayMtcBalance = isDemo ? demoMtcBalance : mtcBalance
  // Deposit state
  const [depositAmount, setDepositAmount] = useState('')
  
  // Self activation state
  const [selfAmount, setSelfAmount] = useState('')
  const [selfPassword, setSelfPassword] = useState('')
  
  // Others activation state
  const [othersTargetId, setOthersTargetId] = useState('')
  const [othersAmount, setOthersAmount] = useState('')
  const [othersPassword, setOthersPassword] = useState('')

  // Self MTC staking state
  const [selfAmountMtc, setSelfAmountMtc] = useState('')
  const [selfPasswordMtc, setSelfPasswordMtc] = useState('')

  // Others MTC staking state
  const [othersTargetIdMtc, setOthersTargetIdMtc] = useState('')
  const [othersAmountMtc, setOthersAmountMtc] = useState('')
  const [othersPasswordMtc, setOthersPasswordMtc] = useState('')

  // History state
  const [history, setHistory] = useState<any[]>([])

  const fetchWalletDetails = async (mId: string) => {
    try {
      const res = await fetch(`/api/dashboard?memberId=${mId}`)
      const data = await res.json()
      if (data.success) {
        setCwallet(data.wallets?.cwallet || 0)
        setSponsorAddress(data.member?.sponsorAddress || '')
      }
    } catch (e) {
      console.error(e)
    }
  }

  const fetchHistoryLogs = async (mId: string) => {
    try {
      const res = await fetch(`/api/income?memberId=${mId}`)
      const data = await res.json()
      if (data.success) {
        // Filter history to C-Wallet logs only
        const filtered = data.walletLogs.filter((log: any) => log.walletType === 'C-Wallet')
        setHistory(filtered)
      }
    } catch (e) {
      console.error(e)
    }
  }

  useEffect(() => {
    const session = localStorage.getItem('memberSession')
    if (!session) {
      window.location.href = '/'
      return
    }

    let mId = ''
    try {
      mId = JSON.parse(session).memberId
      setMemberId(mId)
    } catch (e) {
      console.error(e)
      setLoading(false)
      return
    }

    Promise.all([fetchWalletDetails(mId), fetchHistoryLogs(mId)]).finally(() => {
      setLoading(false)
    })
  }, [])

  const handleDeposit = async (e: React.FormEvent) => {
    e.preventDefault()
    if (!isConnected || !address || !depositAmount) {
      setErrorMsg('Please connect your Web3 wallet first.')
      return
    }

    const amount = Number(depositAmount)
    if (amount <= 0) {
      setErrorMsg('Please enter a valid deposit amount.')
      return
    }

    setSubmitting(true)
    setErrorMsg('')
    setSuccessMsg('')

    try {
      let hash
      if (isDemo) {
        // Generate mock transaction hash for testing
        const randHex = Array.from({ length: 56 }, () => Math.floor(Math.random() * 16).toString(16)).join('')
        hash = `0xdummy${randHex}`
        // Simulate a slight delay to look like smart contract interaction
        await new Promise((resolve) => setTimeout(resolve, 1500))
      } else {
        const usdtAddress = getUsdtAddress(chainId)
        // Request real Web3 transfer of USDT using the user's wallet
        hash = await writeContractAsync({
          abi: erc20Abi,
          address: usdtAddress,
          functionName: 'transfer',
          args: [
            VAULT_ADDRESS,
            parseUnits(depositAmount, 18),
          ],
        })
      }

      // Send transaction hash to backend to record in the database
      const res = await fetch('/api/topup', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          action: 'deposit',
          memberId,
          amount: depositAmount,
          transactionHash: hash,
          walletAddress: address,
        }),
      })

      const data = await res.json()
      if (data.success) {
        setSuccessMsg(`Deposit successful! $${depositAmount} has been credited to your Topup Wallet. Transaction Hash: ${hash.slice(0, 10)}...${hash.slice(-8)}`)
        setDepositAmount('')
        await fetchWalletDetails(memberId)
        await fetchHistoryLogs(memberId)
      } else {
        setErrorMsg(data.error || 'Failed to sync deposit with ecosystem database')
      }
    } catch (err: any) {
      console.error(err)
      if (err.message && err.message.includes('User rejected')) {
        setErrorMsg('Transaction rejected in your wallet.')
      } else {
        setErrorMsg(err.shortMessage || err.message || 'Transaction execution failed.')
      }
    } finally {
      setSubmitting(false)
    }
  }

  const handleSelfActivation = async (e: React.FormEvent) => {
    e.preventDefault()
    if (!selfAmount || !selfPassword) return

    if (!isDemo && (!isConnected || !address)) {
      setErrorMsg('Please connect your Web3 wallet first.')
      return
    }

    setSubmitting(true)
    setErrorMsg('')
    setSuccessMsg('')

    try {
      let hash = ''
      if (isDemo) {
        const randHex = Array.from({ length: 56 }, () => Math.floor(Math.random() * 16).toString(16)).join('')
        hash = `0xdummy${randHex}`
        await new Promise((resolve) => setTimeout(resolve, 1500))
      } else {
        const parsedAmount = parseUnits(selfAmount, 18)
        
        toast.loading('Approving MTC spending for Staking...', { id: 'staking-flow' })
        const approveHash = await writeContractAsync({
          abi: mtcTokenAbi,
          address: MTCTOKEN_ADDRESS,
          functionName: 'approve',
          args: [DISTRIBUTION_ENGINE_ADDRESS, parsedAmount]
        })
        await testnetClient.waitForTransactionReceipt({ hash: approveHash })

        toast.loading('Executing Staking on-chain...', { id: 'staking-flow' })
        
        let activeSponsor = sponsorAddress
        if (!activeSponsor && typeof window !== 'undefined') {
          const storedRef = localStorage.getItem('sponsorRefId')
          if (storedRef) {
            try {
              const refRes = await fetch(`/api/dashboard?memberId=${storedRef}`)
              const refData = await refRes.json()
              if (refData.success) {
                activeSponsor = refData.member?.walletAddress || refData.member?.lrx_address || ''
              }
            } catch (err) {
              console.error('Failed to resolve stored sponsorRefId wallet:', err)
            }
          }
        }
        
        if (!activeSponsor) {
          activeSponsor = '0x3282fbBF190A080dE8c0dED506961631c78B4393'
        }

        hash = await writeContractAsync({
          abi: positionManagerAbi,
          address: POSITION_MANAGER_ADDRESS,
          functionName: 'createPosition',
          args: [parsedAmount, activeSponsor as `0x${string}`]
        })
        toast.success('Staking transaction sent!', { id: 'staking-flow' })
      }

      const res = await fetch('/api/topup', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          action: 'activate',
          memberId,
          jnMemberId: memberId,
          amount: selfAmount,
          password: selfPassword,
          transactionHash: hash,
          walletAddress: address
        }),
      })

      const data = await res.json()
      if (data.success) {
        setSuccessMsg(`Package activated successfully! $${selfAmount} Staking completed. Hash: ${hash.slice(0, 10)}...${hash.slice(-8)}`)
        setSelfAmount('')
        setSelfPassword('')
        await fetchWalletDetails(memberId)
        await fetchHistoryLogs(memberId)
      } else {
        setErrorMsg(data.error || 'Failed to process self topup')
      }
    } catch (err: any) {
      console.error(err)
      setErrorMsg(err.shortMessage || err.message || 'Error processing topup request')
    } finally {
      setSubmitting(false)
    }
  }

  const handleOthersActivation = async (e: React.FormEvent) => {
    e.preventDefault()
    if (!othersTargetId || !othersAmount || !othersPassword) return

    if (!isDemo && (!isConnected || !address)) {
      setErrorMsg('Please connect your Web3 wallet first.')
      return
    }

    setSubmitting(true)
    setErrorMsg('')
    setSuccessMsg('')

    try {
      let hash = ''
      if (isDemo) {
        const randHex = Array.from({ length: 56 }, () => Math.floor(Math.random() * 16).toString(16)).join('')
        hash = `0xdummy${randHex}`
        await new Promise((resolve) => setTimeout(resolve, 1500))
      } else {
        const parsedAmount = parseUnits(othersAmount, 18)
        
        toast.loading('Approving MTC spending for partner Staking...', { id: 'staking-flow' })
        const approveHash = await writeContractAsync({
          abi: mtcTokenAbi,
          address: MTCTOKEN_ADDRESS,
          functionName: 'approve',
          args: [DISTRIBUTION_ENGINE_ADDRESS, parsedAmount]
        })
        await testnetClient.waitForTransactionReceipt({ hash: approveHash })

        toast.loading('Executing partner Staking on-chain...', { id: 'staking-flow' })
        // Fetch target's sponsor address from backend or default to root
        let targetSponsor = '0x3282fbBF190A080dE8c0dED506961631c78B4393'
        try {
          const profileRes = await fetch(`/api/dashboard?memberId=${othersTargetId}`)
          const profileData = await profileRes.json()
          if (profileData.success && profileData.member?.sponsorAddress) {
            targetSponsor = profileData.member.sponsorAddress
          }
        } catch (e) {
          console.error('Failed to resolve partner sponsor, using default root:', e)
        }

        hash = await writeContractAsync({
          abi: positionManagerAbi,
          address: POSITION_MANAGER_ADDRESS,
          functionName: 'createPosition',
          args: [parsedAmount, targetSponsor as `0x${string}`]
        })
        toast.success('Staking transaction sent!', { id: 'staking-flow' })
      }

      const res = await fetch('/api/topup', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          action: 'activate',
          memberId,
          jnMemberId: othersTargetId,
          amount: othersAmount,
          password: othersPassword,
          transactionHash: hash,
          walletAddress: address
        }),
      })

      const data = await res.json()
      if (data.success) {
        setSuccessMsg(`Account topup completed for ${othersTargetId}! Amount: $${othersAmount}. Hash: ${hash.slice(0, 10)}...${hash.slice(-8)}`)
        setOthersTargetId('')
        setOthersAmount('')
        setOthersPassword('')
        await fetchWalletDetails(memberId)
        await fetchHistoryLogs(memberId)
      } else {
        setErrorMsg(data.error || 'Failed to process member topup')
      }
    } catch (err: any) {
      console.error(err)
      setErrorMsg(err.shortMessage || err.message || 'Error processing topup request')
    } finally {
      setSubmitting(false)
    }
  }

  const handleSelfStakeMtc = async (e: React.FormEvent) => {
    e.preventDefault()
    if (!selfAmountMtc || !selfPasswordMtc) return

    const mtcVal = Number(selfAmountMtc)
    if (mtcVal <= 0) {
      setErrorMsg('Please enter a valid MTC amount.')
      return
    }

    if (mtcVal > displayMtcBalance) {
      setErrorMsg('Coin Unavailable')
      return
    }

    const usdVal = mtcVal / 10
    if (usdVal < 100) {
      setErrorMsg('Minimum Stake value is 1000 MTC ($100)')
      return
    }

    if (!isDemo && (!isConnected || !address)) {
      setErrorMsg('Please connect your Web3 wallet first.')
      return
    }

    setSubmitting(true)
    setErrorMsg('')
    setSuccessMsg('')

    try {
      let hash = ''
      if (isDemo) {
        const randHex = Array.from({ length: 56 }, () => Math.floor(Math.random() * 16).toString(16)).join('')
        hash = `0xdummy${randHex}`
        
        // Deduct from demo MTC balance
        const key = `demoMtcBalance_${memberId}`
        const newBal = displayMtcBalance - mtcVal
        localStorage.setItem(key, newBal.toFixed(2))
        setDemoMtcBalance(newBal)

        await new Promise((resolve) => setTimeout(resolve, 1500))
      } else {
        const parsedAmount = parseUnits(selfAmountMtc, 18)
        
        toast.loading('Approving MTC spending for Staking...', { id: 'staking-flow' })
        const approveHash = await writeContractAsync({
          abi: mtcTokenAbi,
          address: MTCTOKEN_ADDRESS,
          functionName: 'approve',
          args: [DISTRIBUTION_ENGINE_ADDRESS, parsedAmount]
        })
        await testnetClient.waitForTransactionReceipt({ hash: approveHash })

        toast.loading('Executing Staking on-chain...', { id: 'staking-flow' })
        
        let activeSponsor = sponsorAddress
        if (!activeSponsor && typeof window !== 'undefined') {
          const storedRef = localStorage.getItem('sponsorRefId')
          if (storedRef) {
            try {
              const refRes = await fetch(`/api/dashboard?memberId=${storedRef}`)
              const refData = await refRes.json()
              if (refData.success) {
                activeSponsor = refData.member?.walletAddress || refData.member?.lrx_address || ''
              }
            } catch (err) {
              console.error('Failed to resolve stored sponsorRefId wallet:', err)
            }
          }
        }
        
        if (!activeSponsor) {
          activeSponsor = '0x3282fbBF190A080dE8c0dED506961631c78B4393'
        }

        hash = await writeContractAsync({
          abi: positionManagerAbi,
          address: POSITION_MANAGER_ADDRESS,
          functionName: 'createPosition',
          args: [parsedAmount, activeSponsor as `0x${string}`]
        })
        toast.success('Staking transaction sent!', { id: 'staking-flow' })
      }

      const res = await fetch('/api/topup', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          action: 'activate',
          isMtcStaking: true,
          memberId,
          jnMemberId: memberId,
          amount: String(usdVal),
          password: selfPasswordMtc,
          transactionHash: hash,
          walletAddress: address
        }),
      })

      const data = await res.json()
      if (data.success) {
        setSuccessMsg(`MTC Staking successful! ${selfAmountMtc} MTC staked successfully. Hash: ${hash.slice(0, 10)}...${hash.slice(-8)}`)
        setSelfAmountMtc('')
        setSelfPasswordMtc('')
        await fetchWalletDetails(memberId)
        await fetchHistoryLogs(memberId)
      } else {
        setErrorMsg(data.error || 'Failed to process self MTC staking')
      }
    } catch (err: any) {
      console.error(err)
      setErrorMsg(err.shortMessage || err.message || 'Error processing staking request')
    } finally {
      setSubmitting(false)
    }
  }

  const handleOthersStakeMtc = async (e: React.FormEvent) => {
    e.preventDefault()
    if (!othersTargetIdMtc || !othersAmountMtc || !othersPasswordMtc) return

    const mtcVal = Number(othersAmountMtc)
    if (mtcVal <= 0) {
      setErrorMsg('Please enter a valid MTC amount.')
      return
    }

    if (mtcVal > displayMtcBalance) {
      setErrorMsg('Coin Unavailable')
      return
    }

    const usdVal = mtcVal / 10
    if (usdVal < 100) {
      setErrorMsg('Minimum Stake value is 1000 MTC ($100)')
      return
    }

    if (!isDemo && (!isConnected || !address)) {
      setErrorMsg('Please connect your Web3 wallet first.')
      return
    }

    setSubmitting(true)
    setErrorMsg('')
    setSuccessMsg('')

    try {
      let hash = ''
      if (isDemo) {
        const randHex = Array.from({ length: 56 }, () => Math.floor(Math.random() * 16).toString(16)).join('')
        hash = `0xdummy${randHex}`
        
        // Deduct from demo MTC balance
        const key = `demoMtcBalance_${memberId}`
        const newBal = displayMtcBalance - mtcVal
        localStorage.setItem(key, newBal.toFixed(2))
        setDemoMtcBalance(newBal)

        await new Promise((resolve) => setTimeout(resolve, 1500))
      } else {
        const parsedAmount = parseUnits(othersAmountMtc, 18)
        
        toast.loading('Approving MTC spending for partner Staking...', { id: 'staking-flow' })
        const approveHash = await writeContractAsync({
          abi: mtcTokenAbi,
          address: MTCTOKEN_ADDRESS,
          functionName: 'approve',
          args: [DISTRIBUTION_ENGINE_ADDRESS, parsedAmount]
        })
        await testnetClient.waitForTransactionReceipt({ hash: approveHash })

        toast.loading('Executing partner Staking on-chain...', { id: 'staking-flow' })
        let targetSponsor = '0x3282fbBF190A080dE8c0dED506961631c78B4393'
        try {
          const profileRes = await fetch(`/api/dashboard?memberId=${othersTargetIdMtc}`)
          const profileData = await profileRes.json()
          if (profileData.success && profileData.member?.sponsorAddress) {
            targetSponsor = profileData.member.sponsorAddress
          }
        } catch (e) {
          console.error('Failed to resolve partner sponsor, using default root:', e)
        }

        hash = await writeContractAsync({
          abi: positionManagerAbi,
          address: POSITION_MANAGER_ADDRESS,
          functionName: 'createPosition',
          args: [parsedAmount, targetSponsor as `0x${string}`]
        })
        toast.success('Staking transaction sent!', { id: 'staking-flow' })
      }

      const res = await fetch('/api/topup', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          action: 'activate',
          isMtcStaking: true,
          memberId,
          jnMemberId: othersTargetIdMtc,
          amount: String(usdVal),
          password: othersPasswordMtc,
          transactionHash: hash,
          walletAddress: address
        }),
      })

      const data = await res.json()
      if (data.success) {
        setSuccessMsg(`MTC Staking successful for ${othersTargetIdMtc}! ${othersAmountMtc} MTC staked. Hash: ${hash.slice(0, 10)}...${hash.slice(-8)}`)
        setOthersTargetIdMtc('')
        setOthersAmountMtc('')
        setOthersPasswordMtc('')
        await fetchWalletDetails(memberId)
        await fetchHistoryLogs(memberId)
      } else {
        setErrorMsg(data.error || 'Failed to process member MTC staking')
      }
    } catch (err: any) {
      console.error(err)
      setErrorMsg(err.shortMessage || err.message || 'Error processing staking request')
    } finally {
      setSubmitting(false)
    }
  }

  if (loading) {
    return (
      <DashboardLayout>
        <div className="flex flex-col items-center justify-center h-[60vh] text-slate-400">
          <div className="animate-spin rounded-full h-10 w-10 border-b-2 border-violet-500 mb-4"></div>
          <p className="text-sm">Loading Topup utilities...</p>
        </div>
      </DashboardLayout>
    )
  }

  return (
    <DashboardLayout>
      <div className="mb-8">
        <h1 className="text-3xl font-extrabold text-white tracking-tight">Deposit & Topup</h1>
        <p className="text-slate-400 text-sm mt-1">Add funds using Web3 USDT or activate packages for yourself and downlines.</p>
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-12 gap-8">
        {/* LEFT COLUMN: Tab Navigation & Current Balance */}
        <div className="lg:col-span-4 flex flex-col gap-6">
          {/* Topup Wallet Balance Card */}
          <div className="glass-panel-glow rounded-3xl p-6 relative overflow-hidden">
            <div className="absolute top-0 right-0 w-32 h-32 bg-violet-600/10 rounded-full blur-xl pointer-events-none"></div>
            <div className="flex items-center gap-3 mb-4">
              <div className="p-2.5 rounded-xl bg-violet-500/10 text-violet-400 border border-violet-500/20">
                <MdAccountBalanceWallet size={20} />
              </div>
              <span className="text-xs uppercase font-bold text-violet-400 tracking-wider">Topup Wallet Balance</span>
            </div>
            <h2 className="text-3xl font-black text-white">${cwallet.toLocaleString(undefined, { minimumFractionDigits: 2 })}</h2>
            <p className="text-[10px] text-slate-400 mt-1">Usable for activations and packages</p>
          </div>

          {/* Vertical Tabs navigation */}
          <div className="glass-panel rounded-3xl p-4 flex flex-col gap-1.5">
            <button 
              onClick={() => { setActiveTab('deposit'); setErrorMsg(''); setSuccessMsg('') }}
              className={`flex items-center gap-3 px-4 py-3.5 rounded-xl text-sm font-semibold transition-all border ${
                activeTab === 'deposit' 
                  ? 'bg-violet-600/15 text-violet-300 border-violet-500/20 shadow-md shadow-violet-500/5' 
                  : 'text-slate-400 border-transparent hover:bg-violet-950/20 hover:text-slate-200'
              }`}
            >
              <MdArrowUpward size={18} />
              <span>Deposit Web3 Funds</span>
            </button>
            
            <button 
              onClick={() => { setActiveTab('self'); setErrorMsg(''); setSuccessMsg('') }}
              className={`flex items-center gap-3 px-4 py-3.5 rounded-xl text-sm font-semibold transition-all border ${
                activeTab === 'self' 
                  ? 'bg-violet-600/15 text-violet-300 border-violet-500/20 shadow-md shadow-violet-500/5' 
                  : 'text-slate-400 border-transparent hover:bg-violet-950/20 hover:text-slate-200'
              }`}
            >
              <MdPerson size={18} />
              <span>Stake USDT (Self)</span>
            </button>
            
            <button 
              onClick={() => { setActiveTab('others'); setErrorMsg(''); setSuccessMsg('') }}
              className={`flex items-center gap-3 px-4 py-3.5 rounded-xl text-sm font-semibold transition-all border ${
                activeTab === 'others' 
                  ? 'bg-violet-600/15 text-violet-300 border-violet-500/20 shadow-md shadow-violet-500/5' 
                  : 'text-slate-400 border-transparent hover:bg-violet-950/20 hover:text-slate-200'
              }`}
            >
              <MdGroupAdd size={18} />
              <span>Stake USDT (For Downline)</span>
            </button>

            <button 
              onClick={() => { setActiveTab('self_mtc'); setErrorMsg(''); setSuccessMsg('') }}
              className={`flex items-center gap-3 px-4 py-3.5 rounded-xl text-sm font-semibold transition-all border ${
                activeTab === 'self_mtc' 
                  ? 'bg-amber-500/15 text-amber-300 border-amber-500/20 shadow-md shadow-amber-500/5' 
                  : 'text-slate-400 border-transparent hover:bg-amber-950/20 hover:text-slate-200'
              }`}
            >
              <MdStar size={18} className="text-amber-400" />
              <span>Stake MTC (Self)</span>
            </button>
            
            <button 
              onClick={() => { setActiveTab('others_mtc'); setErrorMsg(''); setSuccessMsg('') }}
              className={`flex items-center gap-3 px-4 py-3.5 rounded-xl text-sm font-semibold transition-all border ${
                activeTab === 'others_mtc' 
                  ? 'bg-amber-500/15 text-amber-300 border-amber-500/20 shadow-md shadow-amber-500/5' 
                  : 'text-slate-400 border-transparent hover:bg-amber-950/20 hover:text-slate-200'
              }`}
            >
              <MdStar size={18} className="text-amber-400" />
              <span>Stake MTC (For Downline)</span>
            </button>
            
            <button 
              onClick={() => { setActiveTab('history'); setErrorMsg(''); setSuccessMsg('') }}
              className={`flex items-center gap-3 px-4 py-3.5 rounded-xl text-sm font-semibold transition-all border ${
                activeTab === 'history' 
                  ? 'bg-violet-600/15 text-violet-300 border-violet-500/20 shadow-md shadow-violet-500/5' 
                  : 'text-slate-400 border-transparent hover:bg-violet-950/20 hover:text-slate-200'
              }`}
            >
              <MdHistory size={18} />
              <span>Staking History</span>
            </button>
          </div>
        </div>

        {/* RIGHT COLUMN: Active Form Container */}
        <div className="lg:col-span-8">
          {errorMsg && (
            <div className="mb-6 p-4 rounded-2xl bg-rose-500/10 border border-rose-500/20 text-rose-300 text-xs font-semibold text-center">
              {errorMsg}
            </div>
          )}
          
          {successMsg && (
            <div className="mb-6 p-4 rounded-2xl bg-emerald-500/10 border border-emerald-500/20 text-emerald-400 text-xs font-semibold text-center flex items-center justify-center gap-2">
              <MdCheckCircle size={18} />
              <span>{successMsg}</span>
            </div>
          )}

          {/* TAB 1: DEPOSIT FUND */}
          {activeTab === 'deposit' && (
            <div className="glass-panel rounded-3xl p-6 md:p-8">
              <h3 className="text-lg font-bold text-white mb-2">Deposit BEP20 USDT</h3>
              <p className="text-xs text-slate-400 mb-6">Send USDT from your connected wallet directly to the admin vault. Your Topup Wallet balance is instantly credited upon transaction confirmation.</p>

              <form onSubmit={handleDeposit} className="flex flex-col gap-4">
                <div className="flex flex-col gap-1.5">
                  <label className="text-xs text-slate-400 font-bold px-1">Ecosystem Vault Receiver</label>
                  <input 
                    type="text" 
                    readOnly
                    value={VAULT_ADDRESS}
                    className="w-full px-4 py-2.5 rounded-xl bg-slate-900 border border-violet-950/30 text-xs text-violet-400 font-mono focus:outline-none"
                  />
                </div>

                <div className="flex flex-col gap-1.5">
                  <label className="text-xs text-slate-400 font-bold px-1">Deposit Amount (USDT)</label>
                  <input 
                    type="number" 
                    required
                    min="1"
                    placeholder="Enter deposit amount in USD"
                    value={depositAmount}
                    onChange={(e) => setDepositAmount(e.target.value)}
                    className="w-full px-4 py-2.5 rounded-xl bg-slate-900 border border-violet-950/30 text-sm focus:outline-none focus:border-violet-500/50 focus:ring-1 focus:ring-violet-500/20 text-white"
                  />
                </div>

                <button 
                  type="submit"
                  disabled={submitting}
                  className="w-full mt-4 py-3 rounded-xl bg-gradient-to-r from-violet-600 to-indigo-600 hover:from-violet-500 hover:to-indigo-500 text-white font-semibold text-sm transition-all shadow-lg shadow-indigo-500/20 disabled:opacity-50"
                >
                  {submitting ? 'Confirming Wallet Transaction...' : 'Initiate USDT Transfer'}
                </button>
              </form>
            </div>
          )}

          {/* TAB 2: SELF ACTIVATION */}
          {activeTab === 'self' && (
            <div className="glass-panel rounded-3xl p-6 md:p-8">
              <h3 className="text-lg font-bold text-white mb-2">Stake USDT (Self)</h3>
              <p className="text-xs text-slate-400 mb-6">Stake investment capital on-chain to activate yield earnings. Minimum stake is $100.</p>

              <form onSubmit={handleSelfActivation} className="flex flex-col gap-4">
                <div className="flex flex-col gap-1.5">
                  <label className="text-xs text-slate-400 font-bold px-1">Your Wallet Address</label>
                  <input 
                    type="text" 
                    readOnly
                    value={address || ''}
                    className="w-full px-4 py-2.5 rounded-xl bg-slate-900 border border-violet-950/30 text-xs font-mono text-slate-450 focus:outline-none"
                  />
                </div>

                <div className="flex flex-col gap-1.5">
                  <label className="text-xs text-slate-400 font-bold px-1">Staking Amount (USDT)</label>
                  <input 
                    type="number" 
                    required
                    min="100"
                    placeholder="Minimum $100"
                    value={selfAmount}
                    onChange={(e) => setSelfAmount(e.target.value)}
                    className="w-full px-4 py-2.5 rounded-xl bg-slate-900 border border-violet-950/30 text-sm focus:outline-none focus:border-violet-500/50 focus:ring-1 focus:ring-violet-500/20 text-white"
                  />
                </div>

                <div className="flex flex-col gap-1.5">
                  <label className="text-xs text-slate-400 font-bold px-1">Account Sign-in Password</label>
                  <input 
                    type="password" 
                    required
                    placeholder="Enter password to authorize transaction"
                    value={selfPassword}
                    onChange={(e) => setSelfPassword(e.target.value)}
                    className="w-full px-4 py-2.5 rounded-xl bg-slate-900 border border-violet-950/30 text-sm focus:outline-none focus:border-violet-500/50 focus:ring-1 focus:ring-violet-500/20 text-white"
                  />
                </div>

                <button 
                  type="submit"
                  disabled={submitting}
                  className="w-full mt-4 py-3 rounded-xl bg-gradient-to-r from-violet-600 to-indigo-600 hover:from-violet-500 hover:to-indigo-500 text-white font-semibold text-sm transition-all shadow-lg shadow-indigo-500/20 disabled:opacity-50"
                >
                  {submitting ? 'Processing Staking Transaction...' : 'Stake USDT'}
                </button>
              </form>
            </div>
          )}

          {/* TAB 3: TOPUP OTHERS */}
          {activeTab === 'others' && (
            <div className="glass-panel rounded-3xl p-6 md:p-8">
              <h3 className="text-lg font-bold text-white mb-2">Stake USDT (For Downline)</h3>
              <p className="text-xs text-slate-400 mb-6">Stake investment capital for another downline wallet address to activate their yield earnings.</p>

              <form onSubmit={handleOthersActivation} className="flex flex-col gap-4">
                <div className="flex flex-col gap-1.5">
                  <label className="text-xs text-slate-400 font-bold px-1">Target Wallet Address or Member ID</label>
                  <input 
                    type="text" 
                    required
                    placeholder="e.g. 0x71C... or MTE854227"
                    value={othersTargetId}
                    onChange={(e) => setOthersTargetId(e.target.value)}
                    className="w-full px-4 py-2.5 rounded-xl bg-slate-900 border border-violet-950/30 text-sm focus:outline-none focus:border-violet-500/50 focus:ring-1 focus:ring-violet-500/20 text-white font-mono"
                  />
                </div>

                <div className="flex flex-col gap-1.5">
                  <label className="text-xs text-slate-400 font-bold px-1">Staking Amount (USDT)</label>
                  <input 
                    type="number" 
                    required
                    min="100"
                    placeholder="Minimum $100"
                    value={othersAmount}
                    onChange={(e) => setOthersAmount(e.target.value)}
                    className="w-full px-4 py-2.5 rounded-xl bg-slate-900 border border-violet-950/30 text-sm focus:outline-none focus:border-violet-500/50 focus:ring-1 focus:ring-violet-500/20 text-white"
                  />
                </div>

                <div className="flex flex-col gap-1.5">
                  <label className="text-xs text-slate-400 font-bold px-1">Account Sign-in Password</label>
                  <input 
                    type="password" 
                    required
                    placeholder="Enter password to authorize transaction"
                    value={othersPassword}
                    onChange={(e) => setOthersPassword(e.target.value)}
                    className="w-full px-4 py-2.5 rounded-xl bg-slate-900 border border-violet-950/30 text-sm focus:outline-none focus:border-violet-500/50 focus:ring-1 focus:ring-violet-500/20 text-white"
                  />
                </div>

                <button 
                  type="submit"
                  disabled={submitting}
                  className="w-full mt-4 py-3 rounded-xl bg-gradient-to-r from-violet-600 to-indigo-600 hover:from-violet-500 hover:to-indigo-500 text-white font-semibold text-sm transition-all shadow-lg shadow-indigo-500/20 disabled:opacity-50"
                >
                  {submitting ? 'Processing Staking Transaction...' : 'Stake for Partner'}
                </button>
              </form>
            </div>
          )}

          {/* TAB 4: STAKE MTC (SELF) */}
          {activeTab === 'self_mtc' && (
            <div className="glass-panel rounded-3xl p-6 md:p-8 border-amber-500/20">
              <h3 className="text-lg font-bold text-white mb-2 flex items-center gap-2">
                <MdStar className="text-amber-400" />
                <span>Stake MTC (Self)</span>
              </h3>
              <p className="text-xs text-slate-400 mb-6">Stake MTC Coin directly from your balance to activate MLM package. Minimum stake is 1000 MTC ($100 equivalent).</p>

              <div className="flex justify-between items-center bg-slate-900/50 border border-amber-500/10 p-4 rounded-2xl mb-5">
                <span className="text-xs text-slate-400 font-semibold">Available MTC Balance</span>
                <span className="text-sm font-black text-amber-400 font-mono">{displayMtcBalance.toFixed(2)} MTC</span>
              </div>

              <form onSubmit={handleSelfStakeMtc} className="flex flex-col gap-4">
                <div className="flex flex-col gap-1.5">
                  <label className="text-xs text-slate-400 font-bold px-1">Your Wallet Address</label>
                  <input 
                    type="text" 
                    readOnly
                    value={address || ''}
                    className="w-full px-4 py-2.5 rounded-xl bg-slate-900 border border-violet-950/30 text-xs font-mono text-slate-450 focus:outline-none"
                  />
                </div>

                <div className="flex flex-col gap-1.5">
                  <div className="flex justify-between items-center px-1">
                    <label className="text-xs text-slate-400 font-bold">Staking Amount (MTC)</label>
                    {selfAmountMtc && !isNaN(Number(selfAmountMtc)) && (
                      <span className="text-[10px] text-slate-500 font-bold font-mono">
                        ≈ ${(Number(selfAmountMtc) / 10).toFixed(2)} USD
                      </span>
                    )}
                  </div>
                  <input 
                    type="number" 
                    required
                    min="1000"
                    placeholder="Minimum 1000 MTC"
                    value={selfAmountMtc}
                    onChange={(e) => setSelfAmountMtc(e.target.value)}
                    className="w-full px-4 py-2.5 rounded-xl bg-slate-900 border border-violet-950/30 text-sm focus:outline-none focus:border-amber-500/50 focus:ring-1 focus:ring-amber-500/20 text-white"
                  />
                </div>

                <div className="flex flex-col gap-1.5">
                  <label className="text-xs text-slate-400 font-bold px-1">Account Sign-in Password</label>
                  <input 
                    type="password" 
                    required
                    placeholder="Enter password to authorize transaction"
                    value={selfPasswordMtc}
                    onChange={(e) => setSelfPasswordMtc(e.target.value)}
                    className="w-full px-4 py-2.5 rounded-xl bg-slate-900 border border-violet-950/30 text-sm focus:outline-none focus:border-amber-500/50 focus:ring-1 focus:ring-amber-500/20 text-white"
                  />
                </div>

                <button 
                  type="submit"
                  disabled={submitting || Number(selfAmountMtc) > displayMtcBalance}
                  className="w-full mt-4 py-3 rounded-xl bg-gradient-to-r from-amber-600 to-yellow-600 hover:from-amber-500 hover:to-yellow-500 text-white font-semibold text-sm transition-all shadow-lg shadow-amber-500/20 disabled:opacity-50 cursor-pointer"
                >
                  {submitting ? 'Processing Staking Transaction...' : 'Stake MTC Coin'}
                </button>
              </form>
            </div>
          )}

          {/* TAB 5: STAKE MTC (FOR DOWNLINE) */}
          {activeTab === 'others_mtc' && (
            <div className="glass-panel rounded-3xl p-6 md:p-8 border-amber-500/20">
              <h3 className="text-lg font-bold text-white mb-2 flex items-center gap-2">
                <MdStar className="text-amber-400" />
                <span>Stake MTC (For Downline)</span>
              </h3>
              <p className="text-xs text-slate-400 mb-6">Stake MTC Coin for another downline wallet address to activate their MLM package. Minimum stake is 1000 MTC ($100 equivalent).</p>

              <div className="flex justify-between items-center bg-slate-900/50 border border-amber-500/10 p-4 rounded-2xl mb-5">
                <span className="text-xs text-slate-400 font-semibold">Available MTC Balance</span>
                <span className="text-sm font-black text-amber-400 font-mono">{displayMtcBalance.toFixed(2)} MTC</span>
              </div>

              <form onSubmit={handleOthersStakeMtc} className="flex flex-col gap-4">
                <div className="flex flex-col gap-1.5">
                  <label className="text-xs text-slate-400 font-bold px-1">Target Wallet Address or Member ID</label>
                  <input 
                    type="text" 
                    required
                    placeholder="e.g. 0x71C... or MTE854227"
                    value={othersTargetIdMtc}
                    onChange={(e) => setOthersTargetIdMtc(e.target.value)}
                    className="w-full px-4 py-2.5 rounded-xl bg-slate-900 border border-violet-950/30 text-sm focus:outline-none focus:border-amber-500/50 focus:ring-1 focus:ring-amber-500/20 text-white font-mono"
                  />
                </div>

                <div className="flex flex-col gap-1.5">
                  <div className="flex justify-between items-center px-1">
                    <label className="text-xs text-slate-400 font-bold">Staking Amount (MTC)</label>
                    {othersAmountMtc && !isNaN(Number(othersAmountMtc)) && (
                      <span className="text-[10px] text-slate-500 font-bold font-mono">
                        ≈ ${(Number(othersAmountMtc) / 10).toFixed(2)} USD
                      </span>
                    )}
                  </div>
                  <input 
                    type="number" 
                    required
                    min="1000"
                    placeholder="Minimum 1000 MTC"
                    value={othersAmountMtc}
                    onChange={(e) => setOthersAmountMtc(e.target.value)}
                    className="w-full px-4 py-2.5 rounded-xl bg-slate-900 border border-violet-950/30 text-sm focus:outline-none focus:border-amber-500/50 focus:ring-1 focus:ring-amber-500/20 text-white"
                  />
                </div>

                <div className="flex flex-col gap-1.5">
                  <label className="text-xs text-slate-400 font-bold px-1">Account Sign-in Password</label>
                  <input 
                    type="password" 
                    required
                    placeholder="Enter password to authorize transaction"
                    value={othersPasswordMtc}
                    onChange={(e) => setOthersPasswordMtc(e.target.value)}
                    className="w-full px-4 py-2.5 rounded-xl bg-slate-900 border border-violet-950/30 text-sm focus:outline-none focus:border-amber-500/50 focus:ring-1 focus:ring-amber-500/20 text-white"
                  />
                </div>

                <button 
                  type="submit"
                  disabled={submitting || Number(othersAmountMtc) > displayMtcBalance}
                  className="w-full mt-4 py-3 rounded-xl bg-gradient-to-r from-amber-600 to-yellow-600 hover:from-amber-500 hover:to-yellow-500 text-white font-semibold text-sm transition-all shadow-lg shadow-amber-500/20 disabled:opacity-50 cursor-pointer"
                >
                  {submitting ? 'Processing Staking Transaction...' : 'Stake MTC for Partner'}
                </button>
              </form>
            </div>
          )}

          {/* TAB 4: TRANSACTION HISTORY */}
          {activeTab === 'history' && (
            <div className="glass-panel rounded-3xl overflow-hidden shadow-xl">
              <div className="p-6 border-b border-violet-950/30 bg-slate-950/15">
                <h3 className="text-base font-bold text-white">Topup Wallet History</h3>
              </div>
              <div className="overflow-x-auto">
                <table className="w-full text-left border-collapse">
                  <thead>
                    <tr className="bg-slate-950/40 text-slate-400 text-xs border-b border-violet-950/20 uppercase tracking-wider font-bold">
                      <th className="px-6 py-4">Transaction ID</th>
                      <th className="px-6 py-4">Date / Time</th>
                      <th className="px-6 py-4">Remark</th>
                      <th className="px-6 py-4">Type</th>
                      <th className="px-6 py-4 text-right">Amount</th>
                    </tr>
                  </thead>
                  <tbody className="text-sm">
                    {history.length > 0 ? (
                      history.map((row) => (
                        <tr key={row.id} className="border-b border-violet-950/10 hover:bg-violet-950/5">
                          <td className="px-6 py-4 font-mono text-xs text-slate-400">TXN{row.id}</td>
                          <td className="px-6 py-4 text-slate-300 font-medium">{row.date} {row.time !== 'N' ? row.time : ''}</td>
                          <td className="px-6 py-4 text-slate-300 font-medium">{row.remark}</td>
                          <td className="px-6 py-4">
                            <span className={`px-2 py-0.5 rounded text-[10px] font-bold ${
                              row.type === 'cridet' ? 'bg-emerald-950 text-emerald-300' : 'bg-rose-950 text-rose-300'
                            }`}>
                              {row.type === 'cridet' ? 'Credit' : 'Debit'}
                            </span>
                          </td>
                          <td className={`px-6 py-4 text-right font-bold ${
                            row.type === 'cridet' ? 'text-emerald-400' : 'text-slate-200'
                          }`}>
                            {row.type === 'cridet' ? '+' : '-'}${row.amount.toFixed(2)}
                          </td>
                        </tr>
                      ))
                    ) : (
                      <tr>
                        <td colSpan={5} className="text-center py-8 text-slate-500 text-xs">No transactions logged.</td>
                      </tr>
                    )}
                  </tbody>
                </table>
              </div>
            </div>
          )}
        </div>
      </div>
    </DashboardLayout>
  )
}