'use client'

import { useEffect, useState } from 'react'
import DashboardLayout from '@/components/DashboardLayout'
import { useMockWallet } from '@/context/MockWalletContext'
import { 
  MdAccountBalanceWallet, 
  MdArrowDownward, 
  MdSwapHoriz, 
  MdHistory, 
  MdCheckCircle,
  MdOpenInNew,
  MdContentCopy,
  MdLockOutline
} from 'react-icons/md'
import { useSignMessage } from 'wagmi'

export default function Withdrawal() {
  const { isConnected, address: walletAddress, openConnectModal, isDemo } = useMockWallet()
  const { signMessageAsync } = useSignMessage()
  
  const [activeTab, setActiveTab] = useState<'withdraw' | 'transfer' | 'logs'>('withdraw')
  const [loading, setLoading] = useState(true)
  const [submitting, setSubmitting] = useState(false)
  const [successMsg, setSuccessMsg] = useState('')
  const [errorMsg, setErrorMsg] = useState('')
  
  // User profile / wallet details
  const [memberId, setMemberId] = useState('')
  const [profile, setProfile] = useState<{ email: string; lrx_address: string; name: string } | null>(null)
  const [balances, setBalances] = useState({ ewallet: 0, cwallet: 0 })

  // Withdraw Form State
  const [withdrawAmount, setWithdrawAmount] = useState('')

  // Transfer Form State
  const [transferType, setTransferType] = useState<'income' | 'topup'>('income')
  const [transferTargetAddress, setTransferTargetAddress] = useState('')
  const [transferAmount, setTransferAmount] = useState('')

  // Logs state
  const [withdrawLogs, setWithdrawLogs] = useState<any[]>([])

  // MetaMask Signature Modal State
  const [isSignModalOpen, setIsSignModalOpen] = useState(false)
  const [signing, setSigning] = useState(false)
  const [signPayload, setSignPayload] = useState<{
    action: 'withdraw' | 'transfer'
    title: string
    amount: string
    target: string
    message: string
  } | null>(null)

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

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

  const loadData = async (mId: string) => {
    try {
      // 1. Load Profile
      const pRes = await fetch(`/api/profile?memberId=${mId}`)
      const pData = await pRes.json()
      if (pData.success) {
        setProfile(pData.profile)
      }

      // 2. Load Balances
      const bRes = await fetch(`/api/dashboard?memberId=${mId}`)
      const bData = await bRes.json()
      if (bData.success) {
        setBalances({
          ewallet: bData.wallets.ewallet,
          cwallet: bData.wallets.cwallet,
        })
      }

      // 3. Load Withdrawal Logs
      const wRes = await fetch(`/api/withdrawal?memberId=${mId}`)
      const wData = await wRes.json()
      if (wData.success) {
        setWithdrawLogs(wData.withdrawals)
      }
    } 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
    }

    loadData(mId).finally(() => {
      setLoading(false)
    })
  }, [isConnected])

  // Open signature modal for withdrawal
  const triggerWithdrawSign = (e: React.FormEvent) => {
    e.preventDefault()
    setErrorMsg('')
    setSuccessMsg('')

    const amt = Number(withdrawAmount)
    if (isNaN(amt) || amt < 10) {
      setErrorMsg('Minimum claim amount is $10.')
      return
    }

    if (amt > balances.ewallet) {
      setErrorMsg('Insufficient yield balance in Staking Wallet.')
      return
    }

    const linkedAddress = profile?.lrx_address || walletAddress
    setSignPayload({
      action: 'withdraw',
      title: 'Claim Staking Yield (Payout)',
      amount: withdrawAmount,
      target: linkedAddress,
      message: `MTE7 Smart Contract Portal Request:\n\nDomain: mte7star.com\nMethod: claimYield\nAsset: USDT (BEP-20)\nAmount: ${withdrawAmount} USDT\nClaim Recipient: ${linkedAddress}\nNonce: ${Math.floor(100000 + Math.random() * 900000)}\nEstimated Gas: 0.00041 BNB\n\nSigning this message authorizes the smart contract to release USDT to your wallet.`
    })
    setIsSignModalOpen(true)
  }

  // Open signature modal for transfer
  const triggerTransferSign = (e: React.FormEvent) => {
    e.preventDefault()
    setErrorMsg('')
    setSuccessMsg('')

    const amt = Number(transferAmount)
    if (isNaN(amt) || amt < 10) {
      setErrorMsg('Minimum transfer amount is $10.')
      return
    }

    if (transferType === 'income' && amt > balances.ewallet) {
      setErrorMsg('Insufficient Staking Yield balance to transfer.')
      return
    }

    if (transferType === 'topup' && amt > balances.cwallet) {
      setErrorMsg('Insufficient Topup Wallet balance to transfer.')
      return
    }

    if (transferType === 'topup' && !transferTargetAddress) {
      setErrorMsg('Recipient wallet address is required.')
      return
    }

    const targetVal = transferType === 'income' ? walletAddress : transferTargetAddress
    const desc = transferType === 'income' 
      ? 'Self Transfer (Staking Yield to Topup Capital)'
      : 'P2P Staking Capital Transfer'

    setSignPayload({
      action: 'transfer',
      title: desc,
      amount: transferAmount,
      target: targetVal,
      message: transferType === 'income'
        ? `MTE7 Smart Contract Portal Request:\n\nDomain: mte7star.com\nMethod: convertYieldToCapital\nAsset: USDT (BEP-20)\nAmount: ${transferAmount} USDT\nFee: 5% Admin Spender Fee\nTarget Recipient: ${targetVal}\n\nSigning this message confirms the yield conversion.`
        : `MTE7 Smart Contract Portal Request:\n\nDomain: mte7star.com\nMethod: p2pTransferCapital\nAsset: USDT (BEP-20)\nAmount: ${transferAmount} USDT\nTarget Recipient: ${targetVal}\nNonce: ${Math.floor(100000 + Math.random() * 900000)}\n\nSigning this message authorizes the P2P transfer.`
    })
    setIsSignModalOpen(true)
  }

  // Handle actual submit after signing
  const executeSignedAction = async () => {
    if (!signPayload) return
    setSigning(true)
    setErrorMsg('')
    setSuccessMsg('')

    try {
      let realSig
      if (isDemo) {
        // Generate mock signature for testing
        const randHex = Array.from({ length: 120 }, () => Math.floor(Math.random() * 16).toString(16)).join('')
        realSig = `0xdummySignature${randHex}`
        // Simulate a slight delay to look like smart contract interaction
        await new Promise((resolve) => setTimeout(resolve, 1500))
      } else {
        // Request real Web3 cryptographic signature from the connected wallet
        realSig = await signMessageAsync({
          message: signPayload.message,
        })
      }
      if (signPayload.action === 'withdraw') {
        const res = await fetch('/api/withdrawal', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({
            action: 'withdraw',
            memberId,
            amount: signPayload.amount,
            signature: realSig,
            message: signPayload.message,
          }),
        })

        const data = await res.json()
        if (data.success) {
          setSuccessMsg(`Yield Claim of $${signPayload.amount} USDT successfully authorized and logged.`)
          setWithdrawAmount('')
          setIsSignModalOpen(false)
          await loadData(memberId)
        } else {
          setErrorMsg(data.error || 'USDT claim smart contract execution failed.')
          setIsSignModalOpen(false)
        }
      } else {
        // P2P Transfer
        const res = await fetch('/api/withdrawal', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({
            action: 'transfer',
            memberId,
            amount: signPayload.amount,
            signature: realSig,
            targetWalletAddress: transferType === 'topup' ? transferTargetAddress : undefined,
            transferType,
            message: signPayload.message,
          }),
        })

        const data = await res.json()
        if (data.success) {
          setSuccessMsg(data.message || 'Transfer completed successfully.')
          setTransferAmount('')
          setTransferTargetAddress('')
          setIsSignModalOpen(false)
          await loadData(memberId)
        } else {
          setErrorMsg(data.error || 'Staking capital transfer failed.')
          setIsSignModalOpen(false)
        }
      }
    } catch (err) {
      console.error(err)
      setErrorMsg('Smart contract interaction failed. Verify your internet connection.')
      setIsSignModalOpen(false)
    } finally {
      setSigning(false)
      setSignPayload(null)
    }
  }

  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 staking portals...</p>
        </div>
      </DashboardLayout>
    )
  }

  return (
    <DashboardLayout>
      <div className="mb-8">
        <h1 className="text-3xl font-extrabold text-white tracking-tight">Yield Claim & Transfer</h1>
        <p className="text-slate-400 text-sm mt-1">Claim accrued staking yield or transfer staking capital (Topup Wallet) to another staker.</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 (MetaMask, Trust Wallet, or SafePal) to claim yield or perform transfers.</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: Balances and Tabs */}
          <div className="lg:col-span-4 flex flex-col gap-6">
            
            {/* Staking Yield wallet display 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-indigo-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-indigo-500/10 text-indigo-400 border border-indigo-500/20">
                  <MdAccountBalanceWallet size={20} />
                </div>
                <span className="text-xs uppercase font-bold text-indigo-400 tracking-wider">Staking Yield Balance</span>
              </div>
              <h2 className="text-3xl font-black text-white">${balances.ewallet.toLocaleString(undefined, { minimumFractionDigits: 2 })}</h2>
              <p className="text-[10px] text-slate-400 mt-1">Earned staking ROI, level yield, and royalties</p>
            </div>

            {/* Navigation vertical list */}
            <div className="glass-panel rounded-3xl p-4 flex flex-col gap-1.5">
              <button 
                onClick={() => { setActiveTab('withdraw'); setErrorMsg(''); setSuccessMsg('') }}
                className={`flex items-center gap-3 px-4 py-3.5 rounded-xl text-sm font-semibold transition-all border ${
                  activeTab === 'withdraw' 
                    ? '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'
                }`}
              >
                <MdArrowDownward size={18} />
                <span>Claim Yield / Earnings</span>
              </button>
              
              <button 
                onClick={() => { setActiveTab('transfer'); setErrorMsg(''); setSuccessMsg('') }}
                className={`flex items-center gap-3 px-4 py-3.5 rounded-xl text-sm font-semibold transition-all border ${
                  activeTab === 'transfer' 
                    ? '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'
                }`}
              >
                <MdSwapHoriz size={18} />
                <span>Transfer Staking Capital</span>
              </button>
              
              <button 
                onClick={() => { setActiveTab('logs'); setErrorMsg(''); setSuccessMsg('') }}
                className={`flex items-center gap-3 px-4 py-3.5 rounded-xl text-sm font-semibold transition-all border ${
                  activeTab === 'logs' 
                    ? '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>Transaction History</span>
              </button>
            </div>
          </div>

          {/* RIGHT COLUMN: Working Panel */}
          <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: CLAIM YIELD */}
            {activeTab === 'withdraw' && (
              <div className="glass-panel rounded-3xl p-6 md:p-8">
                <h3 className="text-lg font-bold text-white mb-2">Claim BEP20 USDT Staking Yield</h3>
                <p className="text-xs text-slate-400 mb-6">Withdraw from your Staking Yield. A 10% smart contract processing fee applies. Funds are claimed directly to your linked wallet address.</p>

                <form onSubmit={triggerWithdrawSign} 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">Linked Wallet Address</label>
                    <div className="flex items-center gap-2 w-full px-4 py-2.5 rounded-xl bg-slate-900 border border-violet-950/30 text-xs text-violet-400 font-mono">
                      <span className="truncate flex-1">{profile?.lrx_address || walletAddress}</span>
                      <button 
                        type="button"
                        onClick={() => copyToClipboard(profile?.lrx_address || walletAddress)}
                        className="text-slate-400 hover:text-white transition-colors"
                        title="Copy Address"
                      >
                        {copiedText === (profile?.lrx_address || walletAddress) ? 'Copied!' : <MdContentCopy size={14} />}
                      </button>
                    </div>
                  </div>

                  <div className="flex flex-col gap-1.5">
                    <label className="text-xs text-slate-400 font-bold px-1">Claim Amount (USDT)</label>
                    <input 
                      type="number" 
                      required
                      min="10"
                      placeholder="Minimum 10 USDT"
                      value={withdrawAmount}
                      onChange={(e) => setWithdrawAmount(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"
                    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 flex items-center justify-center gap-2"
                  >
                    <MdLockOutline size={16} />
                    <span>Authorize & Sign Claim</span>
                  </button>
                </form>
              </div>
            )}

            {/* TAB 2: TRANSFER FUNDS */}
            {activeTab === 'transfer' && (
              <div className="glass-panel rounded-3xl p-6 md:p-8">
                <h3 className="text-lg font-bold text-white mb-2">Perform Staking Capital Transfer</h3>
                <p className="text-xs text-slate-400 mb-6">Convert Staking Yield to Topup Capital (5% fee) or transfer Topup Capital to another staker wallet (0% fee).</p>

                <form onSubmit={triggerTransferSign} 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">Transfer Mode</label>
                    <select 
                      value={transferType}
                      onChange={(e: any) => setTransferType(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 text-white"
                    >
                      <option value="income">Self Conversion (Yield to Topup Wallet)</option>
                      <option value="topup">Peer-to-Peer Transfer (Topup to Topup)</option>
                    </select>
                  </div>

                  {transferType === 'topup' && (
                    <div className="flex flex-col gap-1.5">
                      <label className="text-xs text-slate-400 font-bold px-1">Recipient Wallet Address or Member ID</label>
                      <input 
                        type="text" 
                        required
                        placeholder="0x... or Sponsor ID"
                        value={transferTargetAddress}
                        onChange={(e) => setTransferTargetAddress(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 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">Transfer Amount (USDT)</label>
                    <input 
                      type="number" 
                      required
                      min="10"
                      placeholder="Minimum 10 USDT"
                      value={transferAmount}
                      onChange={(e) => setTransferAmount(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"
                    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 flex items-center justify-center gap-2"
                  >
                    <MdLockOutline size={16} />
                    <span>Authorize & Sign Transfer</span>
                  </button>
                </form>
              </div>
            )}

            {/* TAB 3: TRANSACTION LOGS */}
            {activeTab === 'logs' && (
              <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">Smart Contract Claim Logs</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 Hash</th>
                        <th className="px-6 py-4">Date Claimed</th>
                        <th className="px-6 py-4">Payout Wallet</th>
                        <th className="px-6 py-4">Status</th>
                        <th className="px-6 py-4 text-right">Net Claim (USDT)</th>
                      </tr>
                    </thead>
                    <tbody className="text-sm">
                      {withdrawLogs.length > 0 ? (
                        withdrawLogs.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">
                              <a 
                                href={`https://bscscan.com/tx/${row.txHash}`} 
                                target="_blank" 
                                rel="noopener noreferrer"
                                className="flex items-center gap-1 hover:text-indigo-400 underline decoration-indigo-500/20"
                              >
                                <span>{row.txHash.slice(0, 6)}...{row.txHash.slice(-4)}</span>
                                <MdOpenInNew size={12} />
                              </a>
                            </td>
                            <td className="px-6 py-4 text-slate-300 font-medium">{row.date}</td>
                            <td className="px-6 py-4 font-mono text-xs text-violet-400 select-all cursor-help" title={row.walletAddress}>
                              {row.walletAddress.slice(0, 6)}...{row.walletAddress.slice(-4)}
                            </td>
                            <td className="px-6 py-4">
                              <span className={`px-2 py-0.5 rounded text-[10px] font-bold ${
                                row.status === 'y' 
                                  ? 'bg-emerald-950 text-emerald-300' 
                                  : row.status === 'Declined' 
                                    ? 'bg-rose-950 text-rose-300' 
                                    : 'bg-amber-950 text-amber-300'
                              }`}>
                                {row.status === 'y' ? 'Success' : row.status === 'Declined' ? 'Declined' : 'Pending'}
                              </span>
                            </td>
                            <td className="px-6 py-4 text-right font-bold text-white">
                              ${row.amount.toFixed(2)} <span className="text-[10px] text-slate-500 font-normal">(${row.requestedAmount} gross)</span>
                            </td>
                          </tr>
                        ))
                      ) : (
                        <tr>
                          <td colSpan={5} className="text-center py-8 text-slate-500 text-xs">No claiming records found.</td>
                        </tr>
                      )}
                    </tbody>
                  </table>
                </div>
              </div>
            )}
          </div>
        </div>
      )}

      {/* METAMASK-STYLE SIGNATURE REQUEST POPUP */}
      {isSignModalOpen && signPayload && (
        <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 - Sign Request</span>
              </div>
              <span className="text-[10px] text-emerald-400 font-bold bg-emerald-950/40 px-2 py-0.5 rounded border border-emerald-500/20">BNB Chain</span>
            </div>

            {/* Body */}
            <div className="p-5 flex-1 flex flex-col gap-4">
              
              {/* Account info */}
              <div className="flex justify-between items-center bg-slate-950/40 p-3 rounded-xl border border-violet-950/20">
                <div>
                  <p className="text-[10px] text-slate-500 font-bold uppercase">Account</p>
                  <p className="text-xs font-mono text-slate-350">{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>

              {/* Origin info */}
              <div className="text-center">
                <p className="text-[10px] text-slate-500 font-bold uppercase">Origin</p>
                <p className="text-sm font-bold text-white tracking-tight">mte7star.com (Portal)</p>
              </div>

              {/* Transaction payload scrollbox */}
              <div className="flex flex-col gap-1">
                <p className="text-[10px] text-slate-500 font-bold uppercase px-1">Message to Sign</p>
                <div className="bg-slate-950/80 border border-violet-950/30 rounded-xl p-3 max-h-40 overflow-y-auto font-mono text-[10px] text-violet-300/90 whitespace-pre-wrap leading-normal select-text">
                  {signPayload.message}
                </div>
              </div>

              {/* Security info alert */}
              <p className="text-[9px] text-slate-500 leading-normal px-1 text-center bg-violet-950/10 py-2 rounded-lg border border-violet-950/20">
                ⚠️ Signing does not cost gas. Only sign if you trust the source application.
              </p>
            </div>

            {/* Footer */}
            <div className="px-4 py-3 bg-slate-950 border-t border-violet-950/40 flex gap-3">
              <button
                disabled={signing}
                onClick={() => { setIsSignModalOpen(false); setSignPayload(null) }}
                className="flex-1 py-2 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"
              >
                Cancel
              </button>
              <button
                disabled={signing}
                onClick={executeSignedAction}
                className="flex-1 py-2 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"
              >
                {signing ? (
                  <>
                    <div className="animate-spin rounded-full h-3.5 w-3.5 border-b-2 border-white"></div>
                    <span>Signing...</span>
                  </>
                ) : (
                  <>
                    <span>Approve & Sign</span>
                  </>
                )}
              </button>
            </div>
            
          </div>
        </div>
      )}
    </DashboardLayout>
  )
}