'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 { ArrowDownUp, ChevronDown } from 'lucide-react';
import { useAccount } from 'wagmi';
import { useTokenDetails, useGetPoolsByToken, type TokenDetails } from '@/hooks/usePartyPlanner';
import { useSwapAmounts, useSwap, selectBestSwapRoute } from '@/hooks/usePartyPool';
import { formatUnits, parseUnits } from 'viem';
import { SwapReviewModal } from './swap-review-modal';

export function SwapForm() {
  const { t } = useTranslation();
  const { isConnected, address } = useAccount();
  const [fromAmount, setFromAmount] = useState('');
  const [toAmount, setToAmount] = useState('');
  const [selectedFromToken, setSelectedFromToken] = useState<TokenDetails | null>(null);
  const [selectedToToken, setSelectedToToken] = useState<TokenDetails | null>(null);
  const [isFromDropdownOpen, setIsFromDropdownOpen] = useState(false);
  const [isToDropdownOpen, setIsToDropdownOpen] = useState(false);
  const [slippage, setSlippage] = useState<number>(0.5); // Default 0.5%
  const [customSlippage, setCustomSlippage] = useState<string>('');
  const [isCustomSlippage, setIsCustomSlippage] = useState(false);
  const [isReviewModalOpen, setIsReviewModalOpen] = useState(false);
  const fromDropdownRef = useRef<HTMLDivElement>(null);
  const toDropdownRef = useRef<HTMLDivElement>(null);

  // Use the custom hook to get all token details with a single batched RPC call
  const { tokenDetails, loading } = useTokenDetails(address);

  // Get available tokens for the selected "from" token
  const { availableTokens } = useGetPoolsByToken(selectedFromToken?.address);

  // Only calculate swap amounts when both tokens are selected
  // Use useMemo to prevent creating a new array reference on every render
  const filteredAvailableTokens = useMemo(() => {
    if (selectedFromToken && selectedToToken && availableTokens) {
      return availableTokens.filter(token =>
        token.address.toLowerCase() === selectedToToken.address.toLowerCase()
      );
    }
    return null;
  }, [selectedFromToken, selectedToToken, availableTokens]);

  // Get the current slippage value (either custom or preset)
  const currentSlippage = isCustomSlippage ? parseFloat(customSlippage) || 0.5 : slippage;

  // Calculate swap amounts for the selected token pair only
  const { swapAmounts } = useSwapAmounts(
    filteredAvailableTokens,
    fromAmount,
    selectedFromToken?.decimals || 18,
    currentSlippage
  );

  // Initialize swap hook
  const { executeSwap, estimateGas, isSwapping, gasEstimate, isEstimatingGas } = useSwap();

  // Update "You Receive" amount when swap calculation completes
  useEffect(() => {
    if (swapAmounts && swapAmounts.length > 0 && selectedToToken) {
      const swapResult = swapAmounts[0]; // Get the first (and should be only) result
      const formattedAmount = formatUnits(swapResult.amountOut, selectedToToken.decimals);
      setToAmount(formattedAmount);
    }
  }, [swapAmounts, selectedToToken]);

  // Close dropdowns when clicking outside
  useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
      if (fromDropdownRef.current && !fromDropdownRef.current.contains(event.target as Node)) {
        setIsFromDropdownOpen(false);
      }
      if (toDropdownRef.current && !toDropdownRef.current.contains(event.target as Node)) {
        setIsToDropdownOpen(false);
      }
    };

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

  const handleSwap = async () => {
    if (!swapAmounts || swapAmounts.length === 0) {
      console.error('No swap amounts available');
      return;
    }

    if (!selectedFromToken || !selectedToToken) {
      console.error('Tokens not selected');
      return;
    }

    try {
      // Use the shared helper to select the best swap route
      const bestRoute = selectBestSwapRoute(swapAmounts);

      if (!bestRoute) {
        console.error('No valid swap route found');
        return;
      }

      // Convert fromAmount to Wei
      const maxAmountIn = parseUnits(fromAmount, selectedFromToken.decimals);

      // Execute the swap
      await executeSwap(
        bestRoute.poolAddress,
        selectedFromToken.address,
        bestRoute.inputTokenIndex,
        bestRoute.outputTokenIndex,
        maxAmountIn,
        currentSlippage
      );
    } catch (err) {
      console.error('Swap failed:', err);
    }
  };

  const switchTokens = () => {
    // Switch tokens logic
    setFromAmount(toAmount);
    setToAmount(fromAmount);
  };

  // Estimate gas when swap parameters change
  useEffect(() => {
    const estimateSwapGas = async () => {
      if (!swapAmounts || swapAmounts.length === 0 || !selectedFromToken || !selectedToToken || !fromAmount || !isConnected) {
        return;
      }

      await estimateGas();
    };

    estimateSwapGas();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [swapAmounts, selectedFromToken, selectedToToken, fromAmount, currentSlippage, isConnected]);

  return (
    <Card className="w-full max-w-md mx-auto">
      <CardHeader>
        <CardTitle>{t('swap.title')}</CardTitle>
      </CardHeader>
      <CardContent className="space-y-4">
        {/* From Token */}
        <div className="space-y-2">
          <div className="flex justify-between text-sm">
            <label className="text-muted-foreground">{t('swap.youPay')}</label>
            <span className="text-muted-foreground">
              {t('swap.balance')}: {selectedFromToken ? formatUnits(selectedFromToken.balance, selectedFromToken.decimals) : '0.00'}
            </span>
          </div>
          <div className="flex gap-2">
            <Input
              type="number"
              placeholder="0.0"
              value={fromAmount}
              onChange={(e) => setFromAmount(e.target.value)}
              className="text-2xl h-16"
            />
            <div className="relative min-w-[160px]" ref={fromDropdownRef}>
              <Button
                variant="secondary"
                className="w-full h-16 justify-between"
                onClick={() => setIsFromDropdownOpen(!isFromDropdownOpen)}
              >
                {selectedFromToken ? (
                  <span className="font-medium">{selectedFromToken.symbol}</span>
                ) : (
                  t('swap.selectToken')
                )}
                <ChevronDown className="h-4 w-4 ml-2" />
              </Button>
              {isFromDropdownOpen && (
                <div className="absolute z-50 w-full mt-2 bg-popover border rounded-md shadow-lg max-h-[300px] overflow-y-auto">
                  {tokenDetails && tokenDetails.length > 0 ? (
                    tokenDetails.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={() => {
                          setSelectedFromToken(token);
                          setIsFromDropdownOpen(false);
                        }}
                      >
                        <span className="font-medium">{token.symbol}</span>
                      </button>
                    ))
                  ) : (
                    <div className="px-4 py-3 text-sm text-muted-foreground">
                      {loading ? 'Loading tokens...' : 'No tokens available'}
                    </div>
                  )}
                </div>
              )}
            </div>
          </div>
        </div>

        {/* Switch Button */}
        <div className="flex justify-center">
          <Button
            variant="ghost"
            size="icon"
            onClick={switchTokens}
            className="rounded-full"
          >
            <ArrowDownUp className="h-4 w-4" />
          </Button>
        </div>

        {/* To Token */}
        <div className="space-y-2">
          <div className="flex justify-between text-sm">
            <label className="text-muted-foreground">{t('swap.youReceive')}</label>
            <span className="text-muted-foreground">
              {t('swap.balance')}: {selectedToToken ? formatUnits(selectedToToken.balance, selectedToToken.decimals) : '0.00'}
            </span>
          </div>
          <div className="flex gap-2">
            <Input
              type="number"
              placeholder="0.0"
              value={toAmount}
              onChange={(e) => setToAmount(e.target.value)}
              className="text-2xl h-16"
              disabled={!selectedFromToken}
            />
            <div className="relative min-w-[160px]" ref={toDropdownRef}>
              <Button
                variant="secondary"
                className="w-full h-16 justify-between"
                onClick={() => setIsToDropdownOpen(!isToDropdownOpen)}
                disabled={!selectedFromToken}
              >
                {selectedToToken ? (
                  <span className="font-medium">{selectedToToken.symbol}</span>
                ) : (
                  t('swap.selectToken')
                )}
                <ChevronDown className="h-4 w-4 ml-2" />
              </Button>
              {isToDropdownOpen && (
                <div className="absolute z-50 w-full mt-2 bg-popover border rounded-md shadow-lg max-h-[300px] overflow-y-auto">
                  {availableTokens && availableTokens.length > 0 && tokenDetails ? (
                    // Filter tokenDetails to only show tokens in availableTokens
                    tokenDetails
                      .filter((token) =>
                        availableTokens.some((availToken) =>
                          availToken.address.toLowerCase() === token.address.toLowerCase()
                        )
                      )
                      .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={() => {
                            setSelectedToToken(token);
                            setIsToDropdownOpen(false);
                          }}
                        >
                          <span className="font-medium">{token.symbol}</span>
                        </button>
                      ))
                  ) : selectedFromToken ? (
                    <div className="px-4 py-3 text-sm text-muted-foreground">
                      {loading ? 'Loading available tokens...' : 'No tokens available for swap'}
                    </div>
                  ) : (
                    <div className="px-4 py-3 text-sm text-muted-foreground">
                      Select a token in "You Pay" first
                    </div>
                  )}
                </div>
              )}
            </div>
          </div>
        </div>

        {/* Slippage Tolerance */}
        <div className="space-y-3 pt-2">
          <div className="flex justify-between items-center">
            <label className="text-sm font-medium">Slippage Tolerance</label>
            <span className="text-sm text-muted-foreground">
              {isCustomSlippage ? customSlippage || '0' : slippage}%
            </span>
          </div>
          <div className="flex gap-2 flex-wrap">
            {[0.1, 0.2, 0.3, 1, 2, 3].map((percent) => (
              <Button
                key={percent}
                variant={!isCustomSlippage && slippage === percent ? 'default' : 'outline'}
                size="sm"
                onClick={() => {
                  setSlippage(percent);
                  setIsCustomSlippage(false);
                }}
                className="flex-1 min-w-[60px]"
              >
                {percent}%
              </Button>
            ))}
            <div className="flex-1 min-w-[80px] relative">
              <Input
                type="number"
                placeholder="Custom"
                value={customSlippage}
                onChange={(e) => {
                  setCustomSlippage(e.target.value);
                  setIsCustomSlippage(true);
                }}
                onFocus={() => setIsCustomSlippage(true)}
                className={`h-9 pr-6 ${isCustomSlippage ? 'border-primary' : ''}`}
                step="0.01"
              />
              {isCustomSlippage && (
                <span className="absolute right-2 top-1/2 -translate-y-1/2 text-xs text-muted-foreground">
                  %
                </span>
              )}
            </div>
          </div>
        </div>

        {/* Gas Estimate */}
        {isConnected && fromAmount && toAmount && gasEstimate && !isEstimatingGas && (
          <div className="px-4 py-2 bg-muted/30 rounded-lg">
            <div className="flex justify-between text-sm">
              <span className="text-muted-foreground">Estimated Gas Cost:</span>
              <span className="font-medium">${gasEstimate.estimatedCostUsd}</span>
            </div>
          </div>
        )}
        {isConnected && fromAmount && toAmount && isEstimatingGas && (
          <div className="px-4 py-2 bg-muted/30 rounded-lg">
            <div className="flex justify-between text-sm">
              <span className="text-muted-foreground">Estimated Gas Cost:</span>
              <span className="text-muted-foreground">Calculating...</span>
            </div>
          </div>
        )}

        {/* Review Button */}
        <Button
          className="w-full h-14 text-lg"
          onClick={() => setIsReviewModalOpen(true)}
          disabled={!isConnected || !fromAmount || !toAmount}
        >
          {!isConnected
            ? t('swap.connectWalletToSwap')
            : 'Review'}
        </Button>
      </CardContent>

      {/* Review Modal */}
      <SwapReviewModal
        open={isReviewModalOpen}
        onOpenChange={setIsReviewModalOpen}
        fromToken={selectedFromToken}
        toToken={selectedToToken}
        fromAmount={fromAmount}
        toAmount={toAmount}
        slippage={currentSlippage}
        gasEstimate={gasEstimate}
        onConfirm={async () => {
          await handleSwap();
          setIsReviewModalOpen(false);
        }}
        isSwapping={isSwapping}
      />
    </Card>
  );
}