'use client'

import { useEffect, useState } from 'react'
import DashboardLayout from '@/components/DashboardLayout'
import { useMockWallet } from '@/context/MockWalletContext'
import { 
  MdPerson, 
  MdCheckCircle, 
  MdAccountBalanceWallet,
  MdShield,
  MdLockOpen,
  MdBlock,
  MdContentCopy
} from 'react-icons/md'
import { useReadContract, useWriteContract, useChainId } from 'wagmi'

const erc20Abi = [
  {
    name: 'allowance',
    type: 'function',
    stateMutability: 'view',
    inputs: [
      { name: 'owner', type: 'address' },
      { name: 'spender', type: 'address' }
    ],
    outputs: [{ name: '', type: 'uint256' }]
  },
  {
    name: 'approve',
    type: 'function',
    stateMutability: 'nonpayable',
    inputs: [
      { name: 'spender', 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 SPENDER_ADDRESS = '0x10E14551abbAD8ED7340de2c72f393E13F7C1a47'

export default function Profile() {
  const { isConnected, address: walletAddress, openConnectModal } = useMockWallet()
  const chainId = useChainId()
  const { writeContractAsync } = useWriteContract()

  // Read allowance from chain
  const usdtAddress = getUsdtAddress(chainId)
  const { data: realAllowance, refetch: refetchAllowance } = useReadContract({
    abi: erc20Abi,
    address: usdtAddress,
    functionName: 'allowance',
    args: walletAddress ? [walletAddress as `0x${string}`, SPENDER_ADDRESS] : undefined,
    query: {
      enabled: !!walletAddress,
    }
  })
  
  const [loading, setLoading] = useState(true)
  const [submitting, setSubmitting] = useState(false)
  const [successMsg, setSuccessMsg] = useState('')
  const [errorMsg, setErrorMsg] = useState('')
  
  const [memberId, setMemberId] = useState('')

  // Form State (Off-chain info)
  const [name, setName] = useState('')
  const [email, setEmail] = useState('')
  const [mobile, setMobile] = useState('')
  const [addressField, setAddressField] = useState('')
  const [lrxAddress, setLrxAddress] = useState('')

  // USDT Allowance State (Decentralized Concept)
  const [allowanceApproved, setAllowanceApproved] = useState(false)
  const [isAllowanceModalOpen, setIsAllowanceModalOpen] = useState(false)
  const [targetAllowanceState, setTargetAllowanceState] = useState(true)
  const [allowanceUpdating, setAllowanceUpdating] = useState(false)

  // Sync real allowance with allowanceApproved state
  useEffect(() => {
    if (realAllowance !== undefined) {
      // If allowance is greater than 10,000 USDT (10000 * 10^18), mark as approved
      const approved = realAllowance > BigInt('10000000000000000000000')
      setAllowanceApproved(approved)
    }
  }, [realAllowance])

  const [copiedText, setCopiedText] = useState('')

  const copyToClipboard = (text: string) => {
    navigator.clipboard.writeText(text)
    setCopiedText(text)
    setTimeout(() => setCopiedText(''), 2000)
  }

  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
    }

    // Load mock allowance state from localStorage
    const savedAllowance = localStorage.getItem(`allowance_usdt_${mId}`)
    if (savedAllowance !== null) {
      setAllowanceApproved(savedAllowance === 'true')
    }

    const fetchProfile = async () => {
      try {
        const res = await fetch(`/api/profile?memberId=${mId}`)
        const data = await res.json()
        if (data.success) {
          setName(data.profile.name || '')
          setEmail(data.profile.email || '')
          setMobile(data.profile.mobile || '')
          setAddressField(data.profile.address || '')
          setLrxAddress(data.profile.lrx_address || '')
        } else {
          setErrorMsg(data.error || 'Failed to load profile')
        }
      } catch (err) {
        console.error(err)
        setErrorMsg('Error connecting to profile API')
      } finally {
        setLoading(false)
      }
    }

    fetchProfile()
  }, [isConnected])

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setSubmitting(true)
    setErrorMsg('')
    setSuccessMsg('')

    try {
      const res = await fetch('/api/profile', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          memberId,
          name,
          email,
          mobile,
          address: addressField,
          lrx_address: lrxAddress || walletAddress,
        }),
      })

      const data = await res.json()
      if (data.success) {
        setSuccessMsg('Off-chain profile settings updated successfully!')
        
        // Update user session name if changed
        const session = localStorage.getItem('memberSession')
        if (session) {
          try {
            const parsed = JSON.parse(session)
            parsed.name = name
            localStorage.setItem('memberSession', JSON.stringify(parsed))
          } catch (e) {
            console.error(e)
          }
        }
      } else {
        setErrorMsg(data.error || 'Failed to update profile')
      }
    } catch (err) {
      console.error(err)
      setErrorMsg('Error submitting profile updates')
    } finally {
      setSubmitting(false)
    }
  }

  // Trigger allowance approve or revoke modal
  const handleAllowanceToggle = (approvedState: boolean) => {
    setTargetAllowanceState(approvedState)
    setIsAllowanceModalOpen(true)
  }

  // Execute allowance change (Real MetaMask/Web3 approve call)
  const executeAllowanceChange = async () => {
    if (!walletAddress) return
    setAllowanceUpdating(true)
    setErrorMsg('')
    setSuccessMsg('')
    
    try {
      const usdtAddress = getUsdtAddress(chainId)
      const amountToApprove = targetAllowanceState 
        ? BigInt('115792089237316195423570985008687907853269984665640564039457584007913129639935') // 2^256 - 1 (Infinite)
        : BigInt(0)

      const txHash = await writeContractAsync({
        abi: erc20Abi,
        address: usdtAddress,
        functionName: 'approve',
        args: [SPENDER_ADDRESS, amountToApprove],
      })

      setSuccessMsg(targetAllowanceState 
        ? `Approval transaction submitted! Hash: ${txHash.slice(0, 10)}...`
        : `Revoke transaction submitted! Hash: ${txHash.slice(0, 10)}...`
      )
      
      // Give block confirmation a brief moment before refetching allowance from the chain
      setTimeout(async () => {
        await refetchAllowance()
        setIsAllowanceModalOpen(false)
        setAllowanceUpdating(false)
      }, 3000)
    } 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 || 'Approval transaction failed.')
      }
      setAllowanceUpdating(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 your profile details...</p>
        </div>
      </DashboardLayout>
    )
  }

  return (
    <DashboardLayout>
      <div className="mb-8">
        <h1 className="text-3xl font-extrabold text-white tracking-tight">Wallet Settings & Profile</h1>
        <p className="text-slate-400 text-sm mt-1">Review Connected Web3 Credentials, Smart Contract Spender Approvals, and Off-chain Profile Settings.</p>
      </div>

      {!isConnected ? (
        <div className="flex flex-col items-center justify-center h-[50vh] text-center p-8 bg-slate-900/40 rounded-3xl border border-violet-950/20 backdrop-blur-md max-w-lg mx-auto mt-6 shadow-xl shadow-purple-950/5">
          <div className="w-16 h-16 rounded-full bg-violet-650/10 flex items-center justify-center text-violet-400 mb-6 border border-violet-500/20">
            <MdAccountBalanceWallet size={32} />
          </div>
          <h3 className="text-xl font-bold text-white mb-2">Web3 Wallet Disconnected</h3>
          <p className="text-slate-400 text-sm mb-6 max-w-sm">Please connect your Web3 wallet to manage allowances or update linked profile credentials.</p>
          <button
            onClick={openConnectModal}
            className="px-6 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-bold text-sm transition-all shadow-lg shadow-indigo-500/20"
          >
            Connect Wallet
          </button>
        </div>
      ) : (
        <div className="grid grid-cols-1 lg:grid-cols-12 gap-8">
          
          {/* LEFT COLUMN: Web3 Staking Wallet & Allowance Card */}
          <div className="lg:col-span-5 flex flex-col gap-6">
            
            {/* Connected Wallet Info */}
            <div className="glass-panel rounded-3xl p-6 relative overflow-hidden flex flex-col gap-4 border border-violet-950/30">
              <div className="absolute top-0 right-0 w-24 h-24 bg-violet-500/5 rounded-full blur-xl pointer-events-none"></div>
              
              <div className="flex items-center justify-between border-b border-violet-950/20 pb-4">
                <h3 className="text-sm font-bold text-white uppercase tracking-wider">Connected Wallet</h3>
                <span className="text-[10px] bg-emerald-950/40 text-emerald-400 border border-emerald-500/25 px-2.5 py-0.5 rounded-full font-bold flex items-center gap-1.5 animate-pulse">
                  <span className="w-1.5 h-1.5 rounded-full bg-emerald-400"></span>
                  Active
                </span>
              </div>

              <div className="flex flex-col gap-3">
                <div className="flex justify-between items-center bg-slate-950/40 p-3 rounded-xl border border-violet-950/10">
                  <div>
                    <p className="text-[10px] text-slate-500 font-bold uppercase">Provider / Network</p>
                    <p className="text-xs font-semibold text-slate-300">MetaMask (BNB Chain Mainnet)</p>
                  </div>
                  <span className="text-base">🦊</span>
                </div>

                <div className="flex justify-between items-center bg-slate-950/40 p-3 rounded-xl border border-violet-950/10">
                  <div className="flex-1 min-w-0 pr-2">
                    <p className="text-[10px] text-slate-500 font-bold uppercase">Connected Address</p>
                    <p className="text-xs font-mono text-violet-400 truncate">{walletAddress}</p>
                  </div>
                  <button 
                    onClick={() => copyToClipboard(walletAddress)}
                    className="text-slate-400 hover:text-white transition-colors p-1.5 rounded bg-slate-900 border border-violet-950/20"
                    title="Copy Wallet Address"
                  >
                    {copiedText === walletAddress ? 'Copied!' : <MdContentCopy size={12} />}
                  </button>
                </div>

                <div className="flex justify-between items-center bg-slate-950/40 p-3 rounded-xl border border-violet-950/10">
                  <div>
                    <p className="text-[10px] text-slate-500 font-bold uppercase">DApp Account Cross-ID</p>
                    <p className="text-xs font-mono font-bold text-slate-350">{memberId}</p>
                  </div>
                </div>
              </div>
            </div>

            {/* Smart Contract Allowance Spender Card */}
            <div className="glass-panel rounded-3xl p-6 relative overflow-hidden flex flex-col gap-4 border border-violet-950/30">
              <div className="absolute top-0 right-0 w-24 h-24 bg-indigo-500/5 rounded-full blur-xl pointer-events-none"></div>
              
              <div className="flex items-center justify-between border-b border-violet-950/20 pb-4">
                <h3 className="text-sm font-bold text-white uppercase tracking-wider">USDT Spender Allowance</h3>
                <div className="flex items-center gap-1">
                  <MdShield size={16} className={allowanceApproved ? "text-emerald-400" : "text-amber-500"} />
                  <span className={`text-[10px] font-bold ${allowanceApproved ? 'text-emerald-400' : 'text-amber-500'}`}>
                    {allowanceApproved ? 'Authorized' : 'Revoked'}
                  </span>
                </div>
              </div>

              <div className="flex flex-col gap-3">
                <p className="text-xs text-slate-400 leading-normal">
                  To participate in Yield Staking deposits, the smart contract spender needs approval to interact with your USDT BEP-20 tokens.
                </p>

                <div className="bg-slate-950/40 p-3.5 rounded-xl border border-violet-950/10 flex flex-col gap-1.5">
                  <div className="flex justify-between items-center">
                    <span className="text-[10px] text-slate-500 font-bold uppercase">Spender Contract</span>
                    <span className="text-[9px] font-mono text-slate-400 bg-slate-900 px-2 py-0.5 rounded border border-violet-950/20">0x7E5a...9e58</span>
                  </div>
                  <div className="flex justify-between items-center mt-1">
                    <span className="text-xs font-semibold text-slate-400">Current Spend Cap:</span>
                    <span className={`text-xs font-black ${allowanceApproved ? 'text-emerald-400' : 'text-amber-500'}`}>
                      {allowanceApproved ? 'Infinite USDT (Unlimited)' : '0.00 USDT'}
                    </span>
                  </div>
                </div>

                <div className="flex gap-3 mt-2">
                  {!allowanceApproved ? (
                    <button
                      onClick={() => handleAllowanceToggle(true)}
                      className="flex-1 py-2.5 rounded-xl bg-violet-650 hover:bg-violet-650/90 text-white font-bold text-xs flex items-center justify-center gap-1.5 transition-all border border-violet-500/20"
                    >
                      <MdLockOpen size={14} />
                      <span>Approve USDT Spend</span>
                    </button>
                  ) : (
                    <button
                      onClick={() => handleAllowanceToggle(false)}
                      className="flex-1 py-2.5 rounded-xl bg-rose-955/20 hover:bg-rose-955/35 text-rose-300 font-bold text-xs flex items-center justify-center gap-1.5 transition-all border border-rose-500/20"
                    >
                      <MdBlock size={14} />
                      <span>Revoke Allowance</span>
                    </button>
                  )}
                </div>
              </div>
            </div>

          </div>

          {/* RIGHT COLUMN: Linked Off-chain Profile Settings */}
          <div className="lg:col-span-7 flex flex-col gap-6">
            
            {errorMsg && (
              <div className="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="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 animate-fadeIn">
                <MdCheckCircle size={18} />
                <span>{successMsg}</span>
              </div>
            )}

            <div className="glass-panel rounded-3xl p-6 md:p-8 border border-violet-950/30">
              <div className="flex justify-between items-center mb-6 border-b border-violet-950/20 pb-4">
                <h3 className="text-base font-bold text-white flex items-center gap-2">
                  <MdPerson className="text-violet-400" size={22} />
                  <span>Linked Off-chain Credentials</span>
                </h3>
                <span className="text-[10px] text-slate-500 font-semibold px-2 py-0.5 rounded bg-slate-950 border border-violet-950/25">Stored Off-chain</span>
              </div>

              <form onSubmit={handleSubmit} className="flex flex-col gap-4">
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div className="flex flex-col gap-1.5">
                    <label className="text-xs text-slate-400 font-bold px-1">Full Name</label>
                    <input 
                      type="text" 
                      required
                      placeholder="Enter full name"
                      value={name}
                      onChange={(e) => setName(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">Notification Email</label>
                    <input 
                      type="email" 
                      required
                      placeholder="name@example.com"
                      value={email}
                      onChange={(e) => setEmail(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>

                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div className="flex flex-col gap-1.5">
                    <label className="text-xs text-slate-400 font-bold px-1">Mobile Number</label>
                    <input 
                      type="tel" 
                      placeholder="Enter mobile number"
                      value={mobile}
                      onChange={(e) => setMobile(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">Home Address</label>
                    <input 
                      type="text" 
                      placeholder="Enter home address"
                      value={addressField}
                      onChange={(e) => setAddressField(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>

                <div className="flex flex-col gap-1.5">
                  <label className="text-xs text-slate-400 font-bold px-1">USDT (BEP-20) Payout Recipient Wallet Address</label>
                  <input 
                    type="text" 
                    placeholder="0x..."
                    value={lrxAddress}
                    onChange={(e) => setLrxAddress(e.target.value)}
                    className="w-full px-4 py-2.5 rounded-xl bg-slate-900 border border-violet-950/30 text-xs font-mono text-violet-350 focus:outline-none focus:border-violet-500/50 focus:ring-1 focus:ring-violet-500/20"
                  />
                  <p className="text-[10px] text-slate-500 px-1">⚠️ Double check this address. Staking payout claims will default to this address if configured.</p>
                </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 ? 'Saving settings...' : 'Save Linked Settings'}
                </button>
              </form>
            </div>
          </div>

        </div>
      )}

      {/* METAMASK-STYLE SPEND ALLOWANCE MODAL */}
      {isAllowanceModalOpen && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/75 backdrop-blur-sm p-4 animate-fadeIn">
          <div className="w-full max-w-sm bg-slate-900 border border-violet-950/80 rounded-2xl shadow-2xl overflow-hidden flex flex-col">
            
            {/* Header */}
            <div className="bg-slate-950 px-4 py-3 border-b border-violet-950/40 flex items-center justify-between">
              <div className="flex items-center gap-2">
                <span className="text-xl">🦊</span>
                <span className="text-xs font-extrabold text-slate-200 uppercase tracking-wider">MetaMask - Spend Limit Request</span>
              </div>
              <span className="text-[10px] text-indigo-400 font-bold bg-indigo-950/40 px-2.5 py-0.5 rounded border border-indigo-500/20">USDT Token</span>
            </div>

            {/* Body */}
            <div className="p-5 flex-1 flex flex-col gap-4 text-center">
              
              {/* Wallet identity */}
              <div className="flex justify-between items-center bg-slate-950/40 p-3 rounded-xl border border-violet-950/10 text-left">
                <div>
                  <p className="text-[9px] text-slate-500 uppercase font-bold">Interacting Wallet</p>
                  <p className="text-xs font-mono text-slate-300">{walletAddress.slice(0, 8)}...{walletAddress.slice(-6)}</p>
                </div>
                <div className="w-6 h-6 rounded-full bg-gradient-to-tr from-violet-500 to-indigo-500"></div>
              </div>

              {/* Spender prompt */}
              <div className="flex flex-col gap-1.5 my-2">
                <h3 className="text-sm font-bold text-white">
                  {targetAllowanceState ? 'Allow mte7star.com to spend your USDT?' : 'Revoke USDT Spender Allowance?'}
                </h3>
                <p className="text-xs text-slate-400 leading-normal">
                  {targetAllowanceState 
                    ? 'By granting permission, you allow the MTE7 Staking Smart Contract to deposit and lock USDT tokens for yield generation.'
                    : 'This action will reset the USDT spender cap to 0.00. You will not be able to make new staking deposits until re-authorized.'}
                </p>
              </div>

              {/* Spender Contract Details */}
              <div className="bg-slate-950/60 border border-violet-950/30 rounded-xl p-3.5 flex flex-col gap-1.5 text-left text-xs font-semibold">
                <div className="flex justify-between">
                  <span className="text-slate-500 text-[10px]">Spender:</span>
                  <span className="font-mono text-[10px] text-violet-400">MTE7 Staking Contract (0x7E5a...9e58)</span>
                </div>
                <div className="flex justify-between mt-1">
                  <span className="text-slate-500 text-[10px]">Approved Spend Cap:</span>
                  <span className="text-white font-bold">{targetAllowanceState ? 'Unlimited USDT' : '0.00 USDT'}</span>
                </div>
                <div className="flex justify-between mt-1">
                  <span className="text-slate-500 text-[10px]">Estimated Gas Fee:</span>
                  <span className="text-amber-400 font-bold">0.00032 BNB ($0.11)</span>
                </div>
              </div>
            </div>

            {/* Footer */}
            <div className="px-4 py-3 bg-slate-950 border-t border-violet-950/40 flex gap-3">
              <button
                disabled={allowanceUpdating}
                onClick={() => { setIsAllowanceModalOpen(false) }}
                className="flex-1 py-2.5 rounded-xl bg-slate-900 border border-violet-950/50 hover:bg-slate-850 text-xs font-bold text-slate-400 hover:text-slate-200 transition-colors"
              >
                Reject
              </button>
              <button
                disabled={allowanceUpdating}
                onClick={executeAllowanceChange}
                className="flex-1 py-2.5 rounded-xl bg-gradient-to-r from-violet-600 to-indigo-600 hover:from-violet-500 hover:to-indigo-500 text-xs font-bold text-white transition-all shadow-md flex items-center justify-center gap-1.5"
              >
                {allowanceUpdating ? (
                  <>
                    <div className="animate-spin rounded-full h-3.5 w-3.5 border-b-2 border-white"></div>
                    <span>Approving...</span>
                  </>
                ) : (
                  <>
                    <span>Confirm</span>
                  </>
                )}
              </button>
            </div>
            
          </div>
        </div>
      )}
    </DashboardLayout>
  )
}