'use client';

import { useState, useEffect, useRef, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Input } from '@/components/ui/input';
import { Button } from '@/components/ui/button';
import { ChevronDown, CheckCircle, XCircle, Loader2, ArrowDownUp } from 'lucide-react';
import { useAccount, usePublicClient } from 'wagmi';
import { useGetAllPools, useTokenDetails, useSwapMintAmounts, useBurnSwapAmounts, useLPTokenBalance, useBurnAmounts, type PoolDetails, type TokenDetails, type BurnSwapAmounts } from '@/hooks/usePartyPlanner';
import { useSwapMint, useBurnSwap, useBurn, type ActualSwapMintAmounts, type ActualBurnSwapAmounts, type ActualBurnAmounts } from '@/hooks/usePartyPool';
import { formatUnits, parseUnits } from 'viem';
import IPartyPoolABI from '@/contracts/IPartyPoolABI';
import { ERC20ABI } from '@/contracts/ERC20ABI';

type TransactionStatus = 'idle' | 'pending' | 'success' | 'error';
type Mode = 'stake' | 'unstake';

interface StakeFormProps {
  defaultMode?: Mode;
}

interface TokenInfo {
  address: `0x${string}`;
  symbol: string;
  decimals: number;
}

export function StakeForm({ defaultMode = 'stake' }: StakeFormProps) {
  const { t } = useTranslation();
  const { isConnected, address } = useAccount();
  const publicClient = usePublicClient();
  const [mode, setMode] = useState<Mode>(defaultMode);
  const [stakeAmount, setStakeAmount] = useState('');
  const [selectedPool, setSelectedPool] = useState<PoolDetails | null>(null);
  const [selectedToken, setSelectedToken] = useState<TokenDetails | null>(null);
  const [isPoolDropdownOpen, setIsPoolDropdownOpen] = useState(false);
  const [isTokenDropdownOpen, setIsTokenDropdownOpen] = useState(false);
  const [transactionStatus, setTransactionStatus] = useState<TransactionStatus>('idle');
  const [transactionError, setTransactionError] = useState<string | null>(null);
  const [actualSwapMintAmounts, setActualSwapMintAmounts] = useState<ActualSwapMintAmounts | null>(null);
  const [actualBurnSwapAmounts, setActualBurnSwapAmounts] = useState<ActualBurnSwapAmounts | null>(null);
  const [actualBurnAmounts, setActualBurnAmounts] = useState<ActualBurnAmounts | null>(null);
  const [redeemAll, setRedeemAll] = useState(false);
  const [poolTokens, setPoolTokens] = useState<TokenInfo[]>([]);
  const poolDropdownRef = useRef<HTMLDivElement>(null);
  const tokenDropdownRef = useRef<HTMLDivElement>(null);

  // Fetch all pools using the new hook
  const { poolDetails, loading: poolsLoading } = useGetAllPools();

  // Get token details for the user
  const { tokenDetails, loading: tokensLoading } = useTokenDetails(address);

  // Initialize swap mint and burn swap hooks
  const { executeSwapMint, isSwapMinting } = useSwapMint();
  const { executeBurnSwap, isBurnSwapping } = useBurnSwap();
  const { executeBurn, isBurning } = useBurn();

  // Fetch LP token balance (for unstake mode) - must be before isAmountExceedingBalance
  const { lpBalance } = useLPTokenBalance(
    mode === 'unstake' ? selectedPool?.address : undefined,
    address
  );

  // Get available tokens for staking based on selected pool (for unstake mode)
  const availableTokensForPool = selectedPool && tokenDetails
    ? tokenDetails.filter(token =>
        selectedPool.tokens.some(poolToken =>
          poolToken.toLowerCase() === token.address.toLowerCase()
        )
      )
    : [];

  // Get available pools for staking based on selected token (for stake mode)
  const availablePoolsForToken = selectedToken && poolDetails
    ? poolDetails.filter(pool =>
        pool.tokens.some(poolToken =>
          poolToken.toLowerCase() === selectedToken.address.toLowerCase()
        )
      )
    : [];

  // Check if amount exceeds balance
  const isAmountExceedingBalance = useMemo(() => {
    if (!stakeAmount) return false;

    try {
      if (mode === 'stake') {
        if (!selectedToken) return false;
        const amountInWei = parseUnits(stakeAmount, selectedToken.decimals);
        return amountInWei > selectedToken.balance;
      } else {
        // Unstake mode - check against LP balance
        if (!lpBalance) return false;
        const amountInWei = parseUnits(stakeAmount, 18); // LP tokens have 18 decimals
        return amountInWei > lpBalance;
      }
    } catch {
      // If parseUnits fails (invalid input), don't show error
      return false;
    }
  }, [stakeAmount, selectedToken, mode, lpBalance]);

  // Get the input token index in the selected pool
  const inputTokenIndex = useMemo(() => {
    if (!selectedPool || !selectedToken) return undefined;

    const index = selectedPool.tokens.findIndex(
      token => token.toLowerCase() === selectedToken.address.toLowerCase()
    );

    return index !== -1 ? index : undefined;
  }, [selectedPool, selectedToken]);

  // Parse the stake amount to Wei
  const maxAmountIn = useMemo(() => {
    if (!stakeAmount) return undefined;

    try {
      // For unstake mode, LP tokens always have 18 decimals
      if (mode === 'unstake') {
        return parseUnits(stakeAmount, 18);
      }
      if (!selectedToken) return undefined;
      return parseUnits(stakeAmount, selectedToken.decimals);
    } catch {
      return undefined;
    }
  }, [stakeAmount, selectedToken, mode]);

  // Fetch swap mint amounts (for stake mode)
  const { swapMintAmounts, loading: swapMintLoading } = useSwapMintAmounts(
    mode === 'stake' ? selectedPool?.address : undefined,
    mode === 'stake' ? inputTokenIndex : undefined,
    mode === 'stake' ? maxAmountIn : undefined
  );

  // Fetch burn swap amounts (for unstake mode, only when not redeeming all)
  const { burnSwapAmounts, loading: burnSwapLoading } = useBurnSwapAmounts(
    mode === 'unstake' && !redeemAll ? selectedPool?.address : undefined,
    mode === 'unstake' && !redeemAll ? maxAmountIn : undefined,
    mode === 'unstake' && !redeemAll ? inputTokenIndex : undefined
  );

  // Fetch burn amounts (for unstake mode when redeeming all)
  const { burnAmounts, loading: burnAmountsLoading } = useBurnAmounts(
    mode === 'unstake' && redeemAll ? selectedPool?.address : undefined,
    mode === 'unstake' && redeemAll ? maxAmountIn : undefined
  );

  // Fetch token details for the selected pool when Redeem All is active
  useEffect(() => {
    if (!publicClient || !selectedPool || mode !== 'unstake' || !redeemAll) {
      setPoolTokens([]);
      return;
    }

    const fetchTokenDetails = async () => {
      const tokenInfos: TokenInfo[] = [];

      for (const tokenAddress of selectedPool.tokens) {
        try {
          const [symbol, decimals] = await Promise.all([
            publicClient.readContract({
              address: tokenAddress as `0x${string}`,
              abi: ERC20ABI,
              functionName: 'symbol',
            }) as Promise<string>,
            publicClient.readContract({
              address: tokenAddress as `0x${string}`,
              abi: ERC20ABI,
              functionName: 'decimals',
            }) as Promise<number>,
          ]);

          tokenInfos.push({
            address: tokenAddress as `0x${string}`,
            symbol,
            decimals,
          });
        } catch (err) {
          console.error(`Error fetching token details for ${tokenAddress}:`, err);
        }
      }

      setPoolTokens(tokenInfos);
    };

    fetchTokenDetails();
  }, [publicClient, selectedPool, mode, redeemAll]);

  // Close dropdowns when clicking outside
  useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
      if (poolDropdownRef.current && !poolDropdownRef.current.contains(event.target as Node)) {
        setIsPoolDropdownOpen(false);
      }
      if (tokenDropdownRef.current && !tokenDropdownRef.current.contains(event.target as Node)) {
        setIsTokenDropdownOpen(false);
      }
    };

    document.addEventListener('mousedown', handleClickOutside);
    return () => document.removeEventListener('mousedown', handleClickOutside);
  }, []);

  const handleStake = async () => {
    if (!selectedPool || !stakeAmount || !maxAmountIn) {
      console.error('Missing required parameters');
      return;
    }
    if (mode === 'unstake' && !redeemAll) {
      if (!selectedToken || inputTokenIndex === undefined) {
        console.error('Missing required unstake parameters');
        return;
      }
    }

    setTransactionStatus('pending');
    setTransactionError(null);

    try {
      if (mode === 'stake') {
        if (!selectedToken || inputTokenIndex === undefined) throw new Error('Missing stake parameters');
        // Execute the swap mint transaction and capture actual amounts
        const result = await executeSwapMint(
          selectedPool.address,
          selectedToken.address,
          inputTokenIndex,
          maxAmountIn
        );

        // Store actual swap mint amounts if available
        if (result?.actualSwapMintAmounts) {
          setActualSwapMintAmounts(result.actualSwapMintAmounts);
        }
      } else if (redeemAll) {
        // Execute full burn (redeem all tokens from the pool)
        const result = await executeBurn(
          selectedPool.address,
          maxAmountIn,
          false // unwrap = false by default
        );
        if (result?.actualBurnAmounts) {
          setActualBurnAmounts(result.actualBurnAmounts);
        }
      } else {
        // Execute the burn swap transaction and capture actual amounts
        if (inputTokenIndex === undefined) throw new Error('Missing input token index');
        const result = await executeBurnSwap(
          selectedPool.address,
          maxAmountIn,
          inputTokenIndex,
          false // unwrap = false by default
        );

        // Store actual burn swap amounts if available
        if (result?.actualBurnSwapAmounts) {
          setActualBurnSwapAmounts(result.actualBurnSwapAmounts);
        }
      }

      setTransactionStatus('success');
    } catch (err) {
      console.error(`${mode === 'stake' ? 'Stake' : redeemAll ? 'Redeem' : 'Unstake'} failed:`, err);
      setTransactionError(err instanceof Error ? err.message : 'Transaction failed');
      setTransactionStatus('error');
    }
  };

  const handleCloseModal = () => {
    if (transactionStatus === 'success') {
      // Clear the form after successful stake
      setStakeAmount('');
      setSelectedPool(null);
      setSelectedToken(null);
      setRedeemAll(false);
      setActualBurnAmounts(null);
      setActualBurnSwapAmounts(null);
      setActualSwapMintAmounts(null);
    }
    setTransactionStatus('idle');
    setTransactionError(null);
  };

  const toggleMode = () => {
    setMode(mode === 'stake' ? 'unstake' : 'stake');
    // Clear selections when switching modes
    setStakeAmount('');
    setSelectedPool(null);
    setSelectedToken(null);
    setRedeemAll(false);
    setActualBurnAmounts(null);
    setActualBurnSwapAmounts(null);
    setActualSwapMintAmounts(null);
  };

  return (
    <Card className="w-full max-w-md mx-auto relative">
      <CardHeader>
        <div className="flex justify-between items-center">
          <CardTitle>{mode === 'stake' ? 'Stake' : 'Unstake'}</CardTitle>
        </div>
      </CardHeader>
      <CardContent className="space-y-4">
        {/* First Selection - depends on mode */}
        {mode === 'stake' ? (
          /* Pool Selection (Stake Mode) */
          <div className="space-y-2">
            <div className="text-sm">
              <label className="text-muted-foreground">{t('stake.selectPool')}</label>
            </div>
            <div className="relative" ref={poolDropdownRef}>
              <Button
                variant="secondary"
                className="w-full h-16 justify-between"
                onClick={() => setIsPoolDropdownOpen(!isPoolDropdownOpen)}
              >
                {selectedPool ? (
                  <div className="flex flex-col items-start">
                    <span className="font-medium">{selectedPool.symbol}</span>
                    <span className="text-xs text-muted-foreground">{selectedPool.name}</span>
                  </div>
                ) : (
                  t('stake.selectPool')
                )}
                <ChevronDown className="h-4 w-4 ml-2" />
              </Button>
              {isPoolDropdownOpen && (
                <div className="absolute z-50 w-full mt-2 bg-popover border rounded-md shadow-lg max-h-[300px] overflow-y-auto">
                  {poolDetails && poolDetails.length > 0 ? (
                    poolDetails.map((pool) => (
                      <button
                        key={pool.address}
                        className="w-full px-4 py-3 text-left hover:bg-accent focus:bg-accent focus:outline-none"
                        onClick={() => {
                          setSelectedPool(pool);
                          setIsPoolDropdownOpen(false);
                          setSelectedToken(null);
                        }}
                      >
                        <div className="flex flex-col">
                          <span className="font-medium">{pool.symbol}</span>
                          <span className="text-xs text-muted-foreground">{pool.name}</span>
                        </div>
                      </button>
                    ))
                  ) : (
                    <div className="px-4 py-3 text-sm text-muted-foreground">
                      {poolsLoading ? 'Loading pools...' : 'No pools available'}
                    </div>
                  )}
                </div>
              )}
            </div>
          </div>
        ) : (
          /* Pool Selection (Unstake Mode) */
          <div className="space-y-2">
            <div className="text-sm">
              <label className="text-muted-foreground">{t('stake.selectPool')}</label>
            </div>
            <div className="relative" ref={poolDropdownRef}>
              <Button
                variant="secondary"
                className="w-full h-16 justify-between"
                onClick={() => setIsPoolDropdownOpen(!isPoolDropdownOpen)}
              >
                {selectedPool ? (
                  <div className="flex flex-col items-start">
                    <span className="font-medium">{selectedPool.symbol}</span>
                    <span className="text-xs text-muted-foreground">{selectedPool.name}</span>
                  </div>
                ) : (
                  t('stake.selectPool')
                )}
                <ChevronDown className="h-4 w-4 ml-2" />
              </Button>
              {isPoolDropdownOpen && (
                <div className="absolute z-50 w-full mt-2 bg-popover border rounded-md shadow-lg max-h-[300px] overflow-y-auto">
                  {poolDetails && poolDetails.length > 0 ? (
                    poolDetails.map((pool) => (
                      <button
                        key={pool.address}
                        className="w-full px-4 py-3 text-left hover:bg-accent focus:bg-accent focus:outline-none"
                        onClick={() => {
                          setSelectedPool(pool);
                          setIsPoolDropdownOpen(false);
                          setSelectedToken(null);
                        }}
                      >
                        <div className="flex flex-col">
                          <span className="font-medium">{pool.symbol}</span>
                          <span className="text-xs text-muted-foreground">{pool.name}</span>
                        </div>
                      </button>
                    ))
                  ) : (
                    <div className="px-4 py-3 text-sm text-muted-foreground">
                      {poolsLoading ? 'Loading pools...' : 'No pools available'}
                    </div>
                  )}
                </div>
              )}
            </div>
          </div>
        )}

        {/* Toggle Button */}
        <div className="flex justify-center">
          <Button
            variant="ghost"
            size="icon"
            onClick={toggleMode}
            className="rounded-full"
            title={mode === 'stake' ? 'Switch to Unstake' : 'Switch to Stake'}
          >
            <ArrowDownUp className="h-4 w-4" />
          </Button>
        </div>

        {/* Second Selection - depends on mode */}
        {mode === 'stake' ? (
          /* Token Selection (Stake Mode) */
          <div className="space-y-2">
            <div className="text-sm">
              <label className="text-muted-foreground">{t('stake.selectToken')}</label>
            </div>
            <div className="relative" ref={tokenDropdownRef}>
              <Button
                variant="secondary"
                className="w-full h-16 justify-between"
                onClick={() => setIsTokenDropdownOpen(!isTokenDropdownOpen)}
                disabled={!selectedPool}
              >
                {selectedToken ? (
                  <span className="font-medium">{selectedToken.symbol}</span>
                ) : (
                  t('stake.selectToken')
                )}
                <ChevronDown className="h-4 w-4 ml-2" />
              </Button>
              <div className="text-xs text-muted-foreground text-right mt-1">
                {t('swap.balance')}: {selectedToken ? formatUnits(selectedToken.balance, selectedToken.decimals) : '0.00'}
              </div>
              {isTokenDropdownOpen && (
                <div className="absolute z-50 w-full mt-2 bg-popover border rounded-md shadow-lg max-h-[300px] overflow-y-auto">
                  {availableTokensForPool.length > 0 ? (
                    availableTokensForPool.map((token) => (
                      <button
                        key={token.address}
                        className="w-full px-4 py-3 text-left hover:bg-accent focus:bg-accent focus:outline-none"
                        onClick={() => {
                          setSelectedToken(token);
                          setIsTokenDropdownOpen(false);
                        }}
                      >
                        <span className="font-medium">{token.symbol}</span>
                      </button>
                    ))
                  ) : selectedPool ? (
                    <div className="px-4 py-3 text-sm text-muted-foreground">
                      {tokensLoading ? 'Loading tokens...' : 'No tokens available for this pool'}
                    </div>
                  ) : (
                    <div className="px-4 py-3 text-sm text-muted-foreground">
                      Select a pool first
                    </div>
                  )}
                </div>
              )}
            </div>
          </div>
        ) : (
          /* Token Selection (Unstake Mode) */
          <div className="space-y-2">
            <div className="text-sm">
              <label className="text-muted-foreground">{t('stake.selectToken')}</label>
            </div>
            <div className="relative" ref={tokenDropdownRef}>
              <Button
                variant="secondary"
                className="w-full h-16 justify-between"
                onClick={() => setIsTokenDropdownOpen(!isTokenDropdownOpen)}
                disabled={!selectedPool || redeemAll}
              >
                {redeemAll ? (
                  <span className="font-medium">All Tokens (Redeem All)</span>
                ) : selectedToken ? (
                  <span className="font-medium">{selectedToken.symbol}</span>
                ) : (
                  t('stake.selectToken')
                )}
                <ChevronDown className="h-4 w-4 ml-2" />
              </Button>
              <div className="text-xs text-muted-foreground text-right mt-1">
                {t('swap.balance')}: {lpBalance !== null && selectedPool ? formatUnits(lpBalance, 18) : '0.00'} {selectedPool?.symbol || 'LP'}
              </div>
              {!redeemAll && isTokenDropdownOpen && (
                <div className="absolute z-50 w-full mt-2 bg-popover border rounded-md shadow-lg max-h-[300px] overflow-y-auto">
                  {availableTokensForPool.length > 0 ? (
                    availableTokensForPool.map((token) => (
                      <button
                        key={token.address}
                        className="w-full px-4 py-3 text-left hover:bg-accent focus:bg-accent focus:outline-none"
                        onClick={() => {
                          setSelectedToken(token);
                          setIsTokenDropdownOpen(false);
                        }}
                      >
                        <span className="font-medium">{token.symbol}</span>
                      </button>
                    ))
                  ) : selectedPool ? (
                    <div className="px-4 py-3 text-sm text-muted-foreground">
                      {tokensLoading ? 'Loading tokens...' : 'No tokens available for this pool'}
                    </div>
                  ) : (
                    <div className="px-4 py-3 text-sm text-muted-foreground">
                      Select a pool first
                    </div>
                  )}
                </div>
              )}
            </div>
          </div>
        )}

        {/* Amount Input */}
        <div className="space-y-2">
          <div className="flex justify-between items-center text-sm">
            <label className="text-muted-foreground">{t('stake.amount')}</label>
            <div className="flex gap-2">
              {mode === 'unstake' && (
                <Button
                  variant={redeemAll ? 'default' : 'outline'}
                  size="sm"
                  className="h-6 px-2 text-xs"
                  onClick={() => {
                    setRedeemAll(!redeemAll);
                    if (!redeemAll && lpBalance !== null) {
                      setStakeAmount(formatUnits(lpBalance, 18));
                    }
                  }}
                  disabled={!selectedPool}
                  title="Burn entire LP token and receive all underlying tokens"
                >
                  {redeemAll ? 'Redeem All: ON' : 'Redeem All'}
                </Button>
              )}
              <Button
                variant="ghost"
                size="sm"
                className="h-6 px-2 text-xs"
                onClick={() => {
                  if (mode === 'stake' && selectedToken) {
                    setStakeAmount(formatUnits(selectedToken.balance, selectedToken.decimals));
                  } else if (mode === 'unstake' && lpBalance !== null) {
                    setStakeAmount(formatUnits(lpBalance, 18));
                  }
                }}
                disabled={!selectedPool || (mode === 'stake' ? !selectedToken : lpBalance === null)}
              >
                MAX
              </Button>
            </div>
          </div>
          <Input
            type="number"
            placeholder="0.0"
            value={stakeAmount}
            onChange={(e) => setStakeAmount(e.target.value)}
            className="text-2xl h-16"
            disabled={!selectedPool || (mode === 'stake' && !selectedToken)}
          />
          {isAmountExceedingBalance && (
            <p className="text-sm text-destructive">
              {t('stake.insufficientBalance')}
            </p>
          )}
        </div>

        {/* Swap Mint Amounts Display (Stake Mode) */}
        {mode === 'stake' && swapMintAmounts && selectedToken && !isAmountExceedingBalance && (
          <div className="px-4 py-3 bg-muted/30 rounded-lg space-y-2">
            <div className="flex justify-between text-sm">
              <span className="text-muted-foreground">{t('stake.amountUsed')}:</span>
              <span className="font-medium">
                {swapMintLoading ? 'Calculating...' : `${formatUnits(swapMintAmounts.amountInUsed, selectedToken.decimals)} ${selectedToken.symbol}`}
              </span>
            </div>
            <div className="flex justify-between text-sm">
              <span className="text-muted-foreground">{t('stake.fee')}:</span>
              <span className="font-medium">
                {swapMintLoading ? 'Calculating...' : `${formatUnits(swapMintAmounts.fee, selectedToken.decimals)} ${selectedToken.symbol}`}
              </span>
            </div>
            <div className="flex justify-between text-sm">
              <span className="text-muted-foreground">{t('stake.lpMinted')}:</span>
              <span className="font-medium">
                {swapMintLoading ? 'Calculating...' : `${formatUnits(swapMintAmounts.lpMinted, 18)} ${selectedPool?.symbol || 'LP'}`}
              </span>
            </div>
          </div>
        )}

        {/* Burn Swap Amounts Display (Unstake Mode) */}
        {mode === 'unstake' && !redeemAll && burnSwapAmounts && selectedToken && !isAmountExceedingBalance && (
          <div className="px-4 py-3 bg-muted/30 rounded-lg space-y-2">
            <div className="flex justify-between text-sm">
              <span className="text-muted-foreground">{t('stake.amountOut')}:</span>
              <span className="font-medium">
                {burnSwapLoading ? 'Calculating...' : `${Number(formatUnits(burnSwapAmounts.amountOut, selectedToken.decimals)).toLocaleString('en-US', { maximumFractionDigits: 6 })} ${selectedToken.symbol}`}
              </span>
            </div>
            <div className="flex justify-between text-sm">
              <span className="text-muted-foreground">{t('stake.fee')}:</span>
              <span className="font-medium">
                {burnSwapLoading ? 'Calculating...' : `${Number(formatUnits(burnSwapAmounts.outFee, selectedToken.decimals)).toLocaleString('en-US', { maximumFractionDigits: 6 })} ${selectedToken.symbol}`}
              </span>
            </div>
          </div>
        )}

        {/* Redeem All Tokens Display */}
        {mode === 'unstake' && redeemAll && poolTokens.length > 0 && !isAmountExceedingBalance && (
          <div className="px-4 py-3 bg-muted/30 rounded-lg space-y-2">
            <div className="text-sm font-medium mb-2">You will receive:</div>
            <div className="space-y-1">
              {poolTokens.map((token, index) => (
                <div key={token.address} className="text-sm flex justify-between">
                  <span className="text-muted-foreground">{token.symbol}:</span>
                  <span className="font-medium">
                    {burnAmountsLoading ? 'Calculating...' : burnAmounts && burnAmounts[index]
                      ? `${Number(formatUnits(burnAmounts[index], token.decimals)).toLocaleString('en-US', { maximumFractionDigits: 6 })}`
                      : '(proportional to pool composition)'
                    }
                  </span>
                </div>
              ))}
            </div>
          </div>
        )}

        {/* Stake/Unstake Button */}
        <Button
          className="w-full h-14 text-lg"
          onClick={handleStake}
          disabled={
            !isConnected ||
            !stakeAmount ||
            !selectedPool ||
            isAmountExceedingBalance ||
            (mode === 'stake'
              ? (!selectedToken || isSwapMinting)
              : (redeemAll
                  ? isBurning
                  : (!selectedToken || inputTokenIndex === undefined || isBurnSwapping)))
          }
        >
          {!isConnected
            ? t('swap.connectWalletToSwap')
            : (mode === 'stake' && isSwapMinting)
            ? 'Staking...'
            : (mode === 'unstake' && (isBurnSwapping || isBurning))
            ? (redeemAll ? 'Redeeming...' : 'Unstaking...')
            : mode === 'stake'
            ? t('stake.stakeButton')
            : (redeemAll ? 'Redeem All' : 'Unstake')}
        </Button>
      </CardContent>

      {/* Transaction Modal Overlay */}
      {transactionStatus !== 'idle' && (
        <div className="absolute inset-0 bg-background/80 backdrop-blur-sm flex items-center justify-center z-50 rounded-lg">
          <div className="bg-card border rounded-lg p-8 max-w-sm w-full mx-4 shadow-lg">
            {transactionStatus === 'pending' && (
              <div className="flex flex-col items-center space-y-4">
                <Loader2 className="h-16 w-16 animate-spin text-primary" />
                <h3 className="text-xl font-semibold text-center">
                  {mode === 'stake' ? 'Approving Stake' : redeemAll ? 'Approving Redeem All' : 'Approving Unstake'}
                </h3>
                <p className="text-sm text-muted-foreground text-center">
                  {mode === 'stake'
                    ? `Staking ${stakeAmount} ${selectedToken?.symbol} to ${selectedPool?.symbol}`
                    : redeemAll
                      ? `Redeeming ${stakeAmount} ${selectedPool?.symbol} LP for all pool tokens`
                      : `Unstaking ${stakeAmount} ${selectedPool?.symbol} LP for ${selectedToken?.symbol}`
                  }
                </p>
                <p className="text-xs text-muted-foreground text-center">
                  Please confirm the transactions in your wallet
                </p>
              </div>
            )}

            {transactionStatus === 'success' && (
              <div className="flex flex-col items-center space-y-4">
                <CheckCircle className="h-16 w-16 text-green-500" />
                <h3 className="text-xl font-semibold text-center">
                  {mode === 'stake' ? 'Stake Confirmed!' : redeemAll ? 'Redeem Confirmed!' : 'Unstake Confirmed!'}
                </h3>

                {/* Display actual amounts or estimates */}
                {mode === 'stake' ? (
                  // Stake mode success message
                  <div className="w-full space-y-3">
                    {actualSwapMintAmounts && selectedToken && selectedPool ? (
                      // Show actual amounts from transaction
                      <>
                        <div className="flex justify-between text-sm">
                          <span className="text-muted-foreground">Token Used:</span>
                          <span className="font-medium">{formatUnits(actualSwapMintAmounts.amountInUsed, selectedToken.decimals)} {selectedToken.symbol}</span>
                        </div>
                        <div className="flex justify-between text-sm">
                          <span className="text-muted-foreground">LP Received:</span>
                          <span className="font-medium">{formatUnits(actualSwapMintAmounts.lpMinted, 18)} {selectedPool.symbol}</span>
                        </div>
                        <div className="flex justify-between text-sm">
                          <span className="text-muted-foreground">LP Fee:</span>
                          <span className="font-medium">{formatUnits(actualSwapMintAmounts.lpFee, selectedToken.decimals)} {selectedToken.symbol}</span>
                        </div>
                        <div className="flex justify-between text-sm">
                          <span className="text-muted-foreground">Protocol Fee:</span>
                          <span className="font-medium">{formatUnits(actualSwapMintAmounts.protocolFee, selectedToken.decimals)} {selectedToken.symbol}</span>
                        </div>
                      </>
                    ) : (
                      // Fallback to estimates
                      <>
                        <p className="text-sm text-muted-foreground text-center">
                          Successfully staked {stakeAmount} {selectedToken?.symbol} to {selectedPool?.symbol}
                          <br />
                          <span className="text-xs italic opacity-70">
                            *Disclaimer: This is an estimate from the protocol. The actual amounts might be slightly different due to slippage.
                          </span>
                        </p>
                      </>
                    )}
                  </div>
                ) : redeemAll ? (
                  // Redeem All mode success message
                  <div className="w-full space-y-3">
                    {actualBurnAmounts && selectedPool ? (
                      // Show actual amounts from transaction
                      <>
                        <div className="flex justify-between text-sm">
                          <span className="text-muted-foreground">LP Burned:</span>
                          <span className="font-medium">{formatUnits(actualBurnAmounts.lpBurned, 18)} {selectedPool.symbol}</span>
                        </div>
                        <div className="text-sm font-medium mt-3 mb-2">Tokens Received:</div>
                        {actualBurnAmounts.withdrawAmounts.map((amount, index) => {
                          const token = poolTokens[index];
                          if (!token) return null;

                          return (
                            <div key={index} className="flex justify-between text-sm pl-2">
                              <span className="text-muted-foreground">{token.symbol}:</span>
                              <span className="font-medium">
                                {formatUnits(amount, token.decimals)}
                              </span>
                            </div>
                          );
                        })}
                      </>
                    ) : (
                      // Fallback to estimates
                      <>
                        <p className="text-sm text-muted-foreground text-center">
                          Successfully redeemed {stakeAmount} {selectedPool?.symbol} LP for all pool tokens
                          <br />
                          <span className="text-xs italic opacity-70">
                            *Disclaimer: This is an estimate from the protocol. The actual amounts might be slightly different due to slippage.
                          </span>
                        </p>
                      </>
                    )}
                  </div>
                ) : (
                  // Unstake mode success message
                  <div className="w-full space-y-3">
                    {actualBurnSwapAmounts && selectedToken && selectedPool ? (
                      // Show actual amounts from transaction
                      <>
                        <div className="flex justify-between text-sm">
                          <span className="text-muted-foreground">LP Burned:</span>
                          <span className="font-medium">{formatUnits(actualBurnSwapAmounts.amountIn, 18)} {selectedPool.symbol}</span>
                        </div>
                        <div className="flex justify-between text-sm">
                          <span className="text-muted-foreground">Token Received:</span>
                          <span className="font-medium">{formatUnits(actualBurnSwapAmounts.amountOut, selectedToken.decimals)} {selectedToken.symbol}</span>
                        </div>
                        <div className="flex justify-between text-sm">
                          <span className="text-muted-foreground">LP Fee:</span>
                          <span className="font-medium">{formatUnits(actualBurnSwapAmounts.lpFee, selectedToken.decimals)} {selectedToken.symbol}</span>
                        </div>
                        <div className="flex justify-between text-sm">
                          <span className="text-muted-foreground">Protocol Fee:</span>
                          <span className="font-medium">{formatUnits(actualBurnSwapAmounts.protocolFee, selectedToken.decimals)} {selectedToken.symbol}</span>
                        </div>
                      </>
                    ) : (
                      // Fallback to estimates
                      <>
                        <p className="text-sm text-muted-foreground text-center">
                          Successfully unstaked {stakeAmount} {selectedPool?.symbol} LP for {selectedToken?.symbol}
                          <br />
                          <span className="text-xs italic opacity-70">
                            *Disclaimer: This is an estimate from the protocol. The actual amounts might be slightly different due to slippage.
                          </span>
                        </p>
                      </>
                    )}
                  </div>
                )}

                <Button
                  onClick={handleCloseModal}
                  className="w-full mt-4"
                >
                  Close
                </Button>
              </div>
            )}

            {transactionStatus === 'error' && (
              <div className="flex flex-col items-center space-y-4">
                <XCircle className="h-16 w-16 text-destructive" />
                <h3 className="text-xl font-semibold text-center">
                  {mode === 'stake' ? 'Stake Failed' : 'Unstake Failed'}
                </h3>
                <p className="text-sm text-muted-foreground text-center break-words">
                  {transactionError || 'Transaction failed'}
                </p>
                <Button
                  onClick={handleCloseModal}
                  variant="outline"
                  className="w-full mt-4"
                >
                  Close
                </Button>
              </div>
            )}
          </div>
        </div>
      )}
    </Card>
  );
}