"use client";

import { useState, useEffect, useCallback } from "react";
import Image from "next/image";
import { Button } from "@heroui/react";
import { useApp } from "@/contexts/AppContext";
import { buttonStyles } from "@/lib/buttonStyles";
import { useAccount, useReadContract, useGasPrice } from 'wagmi';
import { formatUnits, parseUnits } from 'viem';
import { useTokenBalance } from '@/hooks/useBalance';
import { useSwap } from '@/hooks/useSwap';
import { abis, getContractAddress } from '@/lib/contracts';
import { useTokenDecimalsFromAddress } from '@/hooks/useTokenDecimals';
import Toast from "@/components/common/Toast";
import TokenSelector from '@/components/common/TokenSelector';
import { Token } from '@/lib/api/tokens';

interface TradePanelProps {
  showHeader?: boolean;
  title?: string;
  subtitle?: string;
}

export default function TradePanel({
  showHeader = false,
  title = "",
  subtitle = "",
}: TradePanelProps) {
  const { t } = useApp();
  const [sellAmount, setSellAmount] = useState<string>("");
  const [buyAmount, setBuyAmount] = useState<string>("");
  const [mounted, setMounted] = useState(false);
  const [tokenIn, setTokenIn] = useState<string>('');
  const [tokenInObj, setTokenInObj] = useState<Token | undefined>();
  const [tokenOut, setTokenOut] = useState<string>('');
  const [tokenOutObj, setTokenOutObj] = useState<Token | undefined>();
  const [toast, setToast] = useState<{ message: string; type: "success" | "error" | "info" | "warning" } | null>(null);
  const [slippage, setSlippage] = useState<number>(0.5);
  const SLIPPAGE_OPTIONS = [0.3, 0.5, 1, 3];

  useEffect(() => {
    setMounted(true);
  }, []);

  const { address, isConnected, chainId } = useAccount();

  // 从合约地址读取精度（tokenIn / tokenOut）
  const sellInputDecimals = useTokenDecimalsFromAddress(
    tokenInObj?.contractAddress,
    tokenInObj?.decimals ?? 18
  );
  const buyInputDecimals = useTokenDecimalsFromAddress(
    tokenOutObj?.contractAddress,
    tokenOutObj?.decimals ?? 18
  );
  const sellDisplayDecimals = Math.min(sellInputDecimals, 6);
  const truncateDecimals = (s: string, d: number) => { const p = s.split('.'); return p.length > 1 ? `${p[0]}.${p[1].slice(0, d)}` : s; };
  const isValidSellAmount = (v: string) => v !== '' && !isNaN(parseFloat(v)) && parseFloat(v) > 0;

  const handleSellAmountChange = (value: string) => {
    if (value === '') { setSellAmount(value); return; }
    if (!/^\d*\.?\d*$/.test(value)) return;
    const parts = value.split('.');
    if (parts.length > 1 && parts[1].length > sellDisplayDecimals) return;
    const maxBalance = truncateDecimals(tokenInBalance, sellDisplayDecimals);
    if (parseFloat(value) > parseFloat(maxBalance)) { setSellAmount(maxBalance); return; }
    setSellAmount(value);
  };

  // 余额：通过合约地址动态查询
  const { formattedBalance: tokenInBalance, isLoading: isBalanceLoading, refetch: refetchTokenIn } = useTokenBalance(
    tokenInObj?.contractAddress,
    sellInputDecimals
  );
  const { formattedBalance: tokenOutBalance, refetch: refetchTokenOut } = useTokenBalance(
    tokenOutObj?.contractAddress,
    buyInputDecimals
  );

  // 查询池子流动性：YTVault.usdyAmounts(tokenOutAddress)
  const vaultAddress = chainId ? getContractAddress('YTVault', chainId) : undefined;
  const tokenInAddress = tokenInObj?.contractAddress;
  const tokenOutAddress = tokenOutObj?.contractAddress;

  const { data: poolLiquidityRaw, refetch: refetchPool } = useReadContract({
    address: vaultAddress,
    abi: abis.YTVault,
    functionName: 'usdyAmounts',
    args: tokenOutAddress ? [tokenOutAddress as `0x${string}`] : undefined,
    query: {
      enabled: !!vaultAddress && !!tokenOutAddress,
    }
  });
  const poolLiquidityOut = poolLiquidityRaw ? formatUnits(poolLiquidityRaw as bigint, buyInputDecimals) : '0';

  // 查询实际兑换数量：getSwapAmountOut(tokenIn, tokenOut, amountIn)
  const sellAmountWei = (() => {
    if (!sellAmount || !isValidSellAmount(sellAmount)) return undefined;
    try { return parseUnits(sellAmount, sellInputDecimals); } catch { return undefined; }
  })();
  const { data: swapAmountOutRaw } = useReadContract({
    address: vaultAddress,
    abi: abis.YTVault,
    functionName: 'getSwapAmountOut',
    args: tokenInAddress && tokenOutAddress && sellAmountWei !== undefined
      ? [tokenInAddress as `0x${string}`, tokenOutAddress as `0x${string}`, sellAmountWei]
      : undefined,
    query: {
      enabled: !!vaultAddress && !!tokenInAddress && !!tokenOutAddress && sellAmountWei !== undefined && tokenIn !== tokenOut,
    },
  });
  // 返回 [amountOut, amountOutAfterFees, feeBasisPoints]
  const swapRaw = swapAmountOutRaw as [bigint, bigint, bigint] | undefined;
  const swapAmountOut = swapRaw ? formatUnits(swapRaw[1], buyInputDecimals) : '';
  const swapFeeBps = swapRaw ? Number(swapRaw[2]) : 0;

  // 读取 vault 基础 swap fee (bps)
  const { data: baseFeeRaw } = useReadContract({
    address: vaultAddress,
    abi: abis.YTVault,
    functionName: 'swapFeeBasisPoints',
    query: { enabled: !!vaultAddress },
  });
  const baseBps = baseFeeRaw ? Number(baseFeeRaw as bigint) : 0;

  // Gas price for network cost estimate
  const { data: gasPriceWei } = useGasPrice({ chainId });
  const GAS_ESTIMATE = 500_000n;
  const networkCostWei = gasPriceWei ? GAS_ESTIMATE * gasPriceWei : 0n;
  const networkCostNative = networkCostWei > 0n ? parseFloat(formatUnits(networkCostWei, 18)) : 0;
  const nativeToken = chainId === 97 ? 'BNB' : 'ETH';

  // Fee & Price Impact 计算
  const feeAmountBigInt = swapRaw ? swapRaw[0] - swapRaw[1] : 0n;
  const feeAmountFormatted = feeAmountBigInt > 0n ? truncateDecimals(formatUnits(feeAmountBigInt, buyInputDecimals), 6) : '0';
  const feePercent = swapFeeBps / 100;
  const impactBps = Math.max(0, swapFeeBps - baseBps);
  const impactPercent = impactBps / 100;

  const {
    status: swapStatus,
    error: swapError,
    isLoading: isSwapLoading,
    executeApproveAndSwap,
    reset: resetSwap,
  } = useSwap();

  // 买入数量由合约 getSwapAmountOut 决定
  useEffect(() => {
    if (swapAmountOut && isValidSellAmount(sellAmount)) {
      setBuyAmount(truncateDecimals(swapAmountOut, 6));
    } else {
      setBuyAmount("");
    }
  }, [swapAmountOut, sellAmount]);

  // 交易成功后刷新余额
  useEffect(() => {
    if (swapStatus === 'success') {
      setToast({ message: `${t('swap.successMsg')} ${tokenIn} ${t('swap.to')} ${tokenOut}!`, type: "success" });
      refetchTokenIn();
      refetchTokenOut();
      refetchPool();
      setTimeout(() => {
        resetSwap();
        setSellAmount("");
        setBuyAmount("");
      }, 3000);
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [swapStatus]);

  // 显示错误提示
  useEffect(() => {
    if (swapError) {
      setToast({ message: swapError, type: swapError === 'Transaction cancelled' ? "warning" : "error" });
      refetchTokenIn();
      refetchTokenOut();
      refetchPool();
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [swapError]);

  // 处理 tokenIn 选择
  const handleTokenInSelect = useCallback((token: Token) => {
    if (tokenInObj && token.symbol === tokenIn) return;
    if (token.symbol === tokenOut) {
      setTokenOut(tokenIn);
      setTokenOutObj(tokenInObj);
    }
    setTokenInObj(token);
    setTokenIn(token.symbol);
    setSellAmount("");
    setBuyAmount("");
  }, [tokenIn, tokenOut, tokenInObj]);

  // 处理 tokenOut 选择
  const handleTokenOutSelect = useCallback((token: Token) => {
    if (tokenOutObj && token.symbol === tokenOut) return;
    if (token.symbol === tokenIn) {
      setTokenIn(tokenOut);
      setTokenInObj(tokenOutObj);
    }
    setTokenOutObj(token);
    setTokenOut(token.symbol);
    setSellAmount("");
    setBuyAmount("");
  }, [tokenIn, tokenOut, tokenOutObj]);

  // 切换交易方向
  const handleSwapDirection = () => {
    const tempSymbol = tokenIn;
    const tempObj = tokenInObj;
    setTokenIn(tokenOut);
    setTokenInObj(tokenOutObj);
    setTokenOut(tempSymbol);
    setTokenOutObj(tempObj);
    setSellAmount("");
    setBuyAmount("");
  };

  // 百分比按钮处理
  const handlePercentage = (percentage: number) => {
    const balance = parseFloat(tokenInBalance);
    if (balance > 0) {
      const raw = (balance * percentage / 100).toString();
      setSellAmount(truncateDecimals(raw, sellDisplayDecimals));
    }
  };

  return (
    <div className={`flex flex-col gap-6 ${showHeader ? "w-full md:w-full md:max-w-[600px]" : "w-full"}`}>
      {/* Header Section - Optional */}
      {showHeader && (
        <div className="flex flex-col gap-2">
          <h1 className="text-heading-h2 font-bold text-text-primary dark:text-white text-center">
            {title}
          </h1>
          <p className="text-body-default font-medium text-text-secondary dark:text-gray-400 text-center">
            {subtitle}
          </p>
        </div>
      )}

      {/* Trade Panel */}
      <div className="bg-bg-surface dark:bg-gray-800 rounded-3xl border border-border-gray dark:border-gray-700 p-6">
        <div className="flex flex-col gap-4">
          {/* SELL and BUY Container with Exchange Icon */}
          <div className="flex flex-col gap-2 relative">
            {/* SELL Section */}
            <div className="bg-bg-subtle dark:bg-gray-700 rounded-2xl p-4 flex flex-col gap-4">
              {/* Label and Buttons */}
              <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
                <span className="text-body-small font-bold text-text-secondary dark:text-gray-300">
                  {t("alp.sell")}
                </span>
                <div className="flex items-center gap-1.5">
                  {[25, 50, 75].map(pct => (
                    <button
                      key={pct}
                      onClick={() => handlePercentage(pct)}
                      className="flex-1 sm:flex-none bg-[#e5e7eb] dark:bg-gray-600 rounded-full px-2 sm:px-3 h-[22px] text-[10px] font-medium text-text-primary dark:text-white border-none hover:bg-[#d1d5db] dark:hover:bg-gray-500 transition-colors"
                    >
                      {pct}%
                    </button>
                  ))}
                  <button
                    onClick={() => handlePercentage(100)}
                    className="flex-1 sm:flex-none bg-[#e5e7eb] dark:bg-gray-600 rounded-full px-2 sm:px-3 h-[22px] text-[10px] font-medium text-text-primary dark:text-white border-none hover:bg-[#d1d5db] dark:hover:bg-gray-500 transition-colors"
                  >
                    {t("mintSwap.max")}
                  </button>
                </div>
              </div>

              {/* Input Row */}
              <div className="flex items-center justify-between gap-2 min-h-[60px] md:h-[70px]">
                <div className="flex flex-col items-start justify-between flex-1 h-full">
                  <input
                    type="text" inputMode="decimal"
                    placeholder="0.00"
                    value={sellAmount}
                    onChange={(e) => handleSellAmountChange(e.target.value)}
                    className="w-full text-left text-2xl md:text-[32px] font-bold leading-[130%] tracking-[-0.01em] text-text-primary dark:text-white placeholder:text-[#d1d5db] dark:placeholder:text-gray-500 bg-transparent border-none outline-none"
                  />
                  <span className="text-body-small font-medium text-text-tertiary dark:text-gray-400">
                    {sellAmount ? `≈ $${sellAmount}` : '--'}
                  </span>
                </div>
                <div className="flex flex-col items-end justify-between gap-1 h-full">
                  <TokenSelector
                    selectedToken={tokenInObj}
                    onSelect={handleTokenInSelect}
                    filterTypes={['stablecoin', 'yield-token']}
                    defaultSymbol="YT-A"
                  />
                  <span className="text-caption-tiny font-medium text-text-secondary dark:text-gray-400">
                    {!mounted ? `0 ${tokenIn}` : (isBalanceLoading ? '...' : `${parseFloat(truncateDecimals(tokenInBalance, sellDisplayDecimals)).toLocaleString('en-US', { maximumFractionDigits: sellDisplayDecimals })} ${tokenIn}`)}
                  </span>
                </div>
              </div>
            </div>

            {/* Exchange Icon */}
            <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 z-10">
              <button
                onClick={handleSwapDirection}
                className="bg-bg-surface dark:bg-gray-700 rounded-full w-10 h-10 flex items-center justify-center hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors cursor-pointer"
                style={{
                  boxShadow: "0px 1px 2px -1px rgba(0, 0, 0, 0.1), 0px 1px 3px 0px rgba(0, 0, 0, 0.1)",
                }}
              >
                <Image
                  src="/components/common/icon-swap-diagonal.svg"
                  alt="Exchange"
                  width={18}
                  height={18}
                />
              </button>
            </div>

            {/* BUY Section */}
            <div className="bg-bg-subtle dark:bg-gray-700 rounded-2xl p-4 flex flex-col gap-4">
              {/* Label */}
              <div className="flex flex-col gap-1">
                <div className="flex items-center justify-between">
                  <span className="text-body-small font-bold text-text-secondary dark:text-gray-300">
                    {t("alp.buy")}
                  </span>
                  <div className="flex items-center gap-1">
                    <Image src="/icons/ui/wallet-icon.svg" alt="" width={12} height={12} />
                    <span className="text-caption-tiny font-medium text-text-secondary dark:text-gray-400">
                      {!mounted ? `0 ${tokenOut}` : `${parseFloat(tokenOutBalance).toLocaleString()} ${tokenOut}`}
                    </span>
                  </div>
                </div>
                <div className="flex items-center justify-end gap-1">
                  <span className="text-caption-tiny font-medium text-text-tertiary dark:text-gray-500">
                    {t('swap.pool')}: {!mounted ? '...' : `${parseFloat(poolLiquidityOut).toLocaleString()} ${tokenOut}`}
                  </span>
                </div>
              </div>

              {/* Input Row */}
              <div className="flex items-center justify-between gap-2 min-h-[60px] md:h-[70px]">
                <div className="flex flex-col items-start justify-between flex-1 h-full">
                  <input
                    type="text"
                    placeholder="0.00"
                    value={buyAmount}
                    readOnly
                    className="w-full text-left text-2xl md:text-[32px] font-bold leading-[130%] tracking-[-0.01em] text-text-primary dark:text-white placeholder:text-[#d1d5db] dark:placeholder:text-gray-500 bg-transparent border-none outline-none cursor-default"
                  />
                  <span className="text-body-small font-medium text-text-tertiary dark:text-gray-400">
                    {buyAmount ? `≈ $${buyAmount}` : '--'}
                  </span>
                </div>
                <div className="flex flex-col items-end justify-between gap-1 h-full">
                  <TokenSelector
                    selectedToken={tokenOutObj}
                    onSelect={handleTokenOutSelect}
                    filterTypes={['stablecoin', 'yield-token']}
                    defaultSymbol="YT-B"
                  />
                </div>
              </div>
            </div>
          </div>


          {/* Slippage Tolerance */}
          <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between px-1">
            <span className="text-body-small font-medium text-text-secondary dark:text-gray-400">
              {t("swap.slippageTolerance")}
            </span>
            <div className="flex items-center gap-1">
              {SLIPPAGE_OPTIONS.map((opt) => (
                <button
                  key={opt}
                  onClick={() => setSlippage(opt)}
                  className={`flex-1 sm:flex-none px-2 sm:px-3 h-7 rounded-full text-[12px] font-semibold transition-colors ${
                    slippage === opt
                      ? "bg-foreground text-background"
                      : "bg-[#e5e7eb] dark:bg-gray-600 text-text-primary dark:text-white hover:bg-[#d1d5db] dark:hover:bg-gray-500"
                  }`}
                >
                  {opt}%
                </button>
              ))}
            </div>
          </div>

          {/* Submit Button */}
          {(() => {
            const inputAmt = parseFloat(sellAmount) || 0;
            const balance  = parseFloat(tokenInBalance) || 0;
            const poolAmt  = parseFloat(poolLiquidityOut) || 0;
            const insufficientBalance = inputAmt > 0 && inputAmt > balance;
            const insufficientPool = inputAmt > 0 && poolAmt > 0 && inputAmt > poolAmt;
            const buttonDisabled = !mounted || !isConnected || !isValidSellAmount(sellAmount) || isSwapLoading || tokenIn === tokenOut || insufficientBalance || insufficientPool || !tokenInObj || !tokenOutObj;
            const buttonLabel = (() => {
              if (!mounted || !isConnected) return t('common.connectWallet');
              if (swapStatus === 'idle' && !!sellAmount && !isValidSellAmount(sellAmount)) return t('common.invalidAmount');
              if (insufficientBalance) return t('supply.insufficientBalance');
              if (insufficientPool) return t('swap.insufficientLiquidity');
              if (swapStatus === 'approving') return t('common.approving');
              if (swapStatus === 'approved') return t('swap.approved');
              if (swapStatus === 'swapping') return t('swap.swapping');
              if (swapStatus === 'success') return t('common.success');
              if (swapStatus === 'error') return t('common.failed');
              return `${t('swap.swapBtn')} ${tokenIn} ${t('swap.to')} ${tokenOut}`;
            })();
            const minOut = swapAmountOut && isValidSellAmount(sellAmount)
              ? (parseFloat(swapAmountOut) * (1 - slippage / 100)).toFixed(buyInputDecimals)
              : '0';
            return (
              <Button
                isDisabled={buttonDisabled}
                color="default"
                className={buttonStyles({ intent: "theme" })}
                onPress={() => {
                  if (!insufficientBalance && !insufficientPool && isValidSellAmount(sellAmount) && tokenIn !== tokenOut && tokenInObj && tokenOutObj) {
                    setToast(null);
                    resetSwap();
                    executeApproveAndSwap(
                      tokenInObj.contractAddress,
                      sellInputDecimals,
                      tokenOutObj.contractAddress,
                      buyInputDecimals,
                      sellAmount,
                      minOut
                    );
                  }
                }}
              >
                {buttonLabel}
              </Button>
            );
          })()}

          {/* Rate & Info Section */}
          <div className="bg-bg-subtle dark:bg-gray-700 rounded-xl border border-border-gray dark:border-gray-600 px-4 py-3 flex flex-col gap-2">
            {/* Exchange Rate */}
            <div className="flex items-center justify-between">
              <span className="text-body-small font-medium text-text-secondary dark:text-gray-300">
                {swapAmountOut && isValidSellAmount(sellAmount)
                  ? `1 ${tokenIn} ≈ ${truncateDecimals((parseFloat(swapAmountOut) / parseFloat(sellAmount)).toString(), 6)} ${tokenOut}`
                  : `1 ${tokenIn} = -- ${tokenOut}`}
              </span>
            </div>
            {/* Divider */}
            <div className="border-t border-border-gray dark:border-gray-600" />
            {/* Network Cost */}
            <div className="flex items-center justify-between">
              <span className="text-caption-tiny font-medium text-text-tertiary dark:text-gray-400">{t('swap.networkCost')}</span>
              <span className="text-caption-tiny font-medium text-text-secondary dark:text-gray-300">
                {networkCostNative > 0 ? `~${networkCostNative.toFixed(6)} ${nativeToken}` : '--'}
              </span>
            </div>
            {/* Max Slippage */}
            <div className="flex items-center justify-between">
              <span className="text-caption-tiny font-medium text-text-tertiary dark:text-gray-400">{t('swap.maxSlippage')}</span>
              <span className="text-caption-tiny font-medium text-text-secondary dark:text-gray-300">{slippage}%</span>
            </div>
            {/* Price Impact */}
            <div className="flex items-center justify-between">
              <span className="text-caption-tiny font-medium text-text-tertiary dark:text-gray-400">{t('swap.priceImpact')}</span>
              <span className={`text-caption-tiny font-medium ${
                isValidSellAmount(sellAmount) && swapAmountOut
                  ? impactPercent > 1 ? 'text-red-500' : impactPercent > 0.3 ? 'text-amber-500' : 'text-text-secondary dark:text-gray-300'
                  : 'text-text-secondary dark:text-gray-300'
              }`}>
                {isValidSellAmount(sellAmount) && swapAmountOut ? `${impactPercent.toFixed(2)}%` : '--'}
              </span>
            </div>
            {/* Fee */}
            <div className="flex items-center justify-between">
              <span className="text-caption-tiny font-medium text-text-tertiary dark:text-gray-400">{t('swap.fee')}</span>
              <span className="text-caption-tiny font-medium text-text-secondary dark:text-gray-300">
                {swapFeeBps > 0 && isValidSellAmount(sellAmount) && swapAmountOut
                  ? `${feePercent.toFixed(2)}% (≈${feeAmountFormatted} ${tokenOut})`
                  : '--'}
              </span>
            </div>
          </div>
        </div>
      </div>

      {/* Toast Notification */}
      {toast && (
        <Toast
          message={toast.message}
          type={toast.type}
          isOpen={!!toast}
          onClose={() => setToast(null)}
        />
      )}
    </div>
  );
}