assetx/webapp/components/lending/repay/RepaySupplyCollateral.tsx

"use client";

import { useState, useEffect } from "react";
import Image from "next/image";
import { Button } from "@heroui/react";
import { useApp } from "@/contexts/AppContext";
import { buttonStyles } from "@/lib/buttonStyles";
import { useAccount } from "wagmi";
import { useLendingCollateral, useCollateralBalance, useWithdrawCollateral, useYTWalletBalance } from "@/hooks/useLendingCollateral";
import { useYTPrice } from "@/hooks/useCollateral";
import { notifySupplyCollateral, notifyWithdrawCollateral } from "@/lib/api/lending";
import { useAppKit } from "@reown/appkit/react";
import { toast } from "sonner";
import { getTxUrl } from "@/lib/contracts";
import { useTokenBySymbol } from "@/hooks/useTokenBySymbol";

const GRADIENT_COLORS: Record<string, string> = {
  'YT-A': 'linear-gradient(135deg, #FF8904 0%, #F54900 100%)',
  'YT-B': 'linear-gradient(135deg, #00BBA7 0%, #007A55 100%)',
  'YT-C': 'linear-gradient(135deg, #667EEA 0%, #764BA2 100%)',
};
const DEFAULT_GRADIENT = 'linear-gradient(135deg, #6B7280 0%, #374151 100%)';

interface RepaySupplyCollateralProps {
  tokenType: string;
  onCollateralChanged?: () => void;
}

export default function RepaySupplyCollateral({ tokenType, onCollateralChanged }: RepaySupplyCollateralProps) {
  const { t } = useApp();
  const { isConnected } = useAccount();
  const { open } = useAppKit();
  const [mounted, setMounted] = useState(false);
  const [activeTab, setActiveTab] = useState<'deposit' | 'withdraw'>('deposit');
  const [amount, setAmount] = useState('');

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

  // On-chain data
  const ytToken = useTokenBySymbol(tokenType);
  const { formattedBalance, refetch: refetchBalance } = useCollateralBalance(ytToken);
  const { formattedBalance: walletBalance, refetch: refetchWalletBalance } = useYTWalletBalance(ytToken);
  const { formattedPrice } = useYTPrice(ytToken);
  const collateralUsd = (parseFloat(formattedBalance) * parseFloat(formattedPrice)).toFixed(2);

  // Deposit hook
  const {
    status: depositStatus,
    error: depositError,
    isLoading: isDepositing,
    approveHash: depositApproveHash,
    supplyHash,
    executeApproveAndSupply,
    reset: resetDeposit,
  } = useLendingCollateral();

  // Withdraw hook
  const {
    status: withdrawStatus,
    error: withdrawError,
    isLoading: isWithdrawing,
    withdrawHash,
    executeWithdrawCollateral,
    reset: resetWithdraw,
  } = useWithdrawCollateral();

  const DEPOSIT_TOAST_ID = 'collateral-deposit-tx';
  const WITHDRAW_TOAST_ID = 'collateral-withdraw-tx';

  // Deposit approve 交易提交 toast
  useEffect(() => {
    if (depositApproveHash && depositStatus === 'approving') {
      toast.loading(t("repay.toast.approvalSubmitted"), {
        id: DEPOSIT_TOAST_ID,
        description: t("repay.toast.waitingConfirmation"),
        action: { label: t("repay.toast.viewTx"), onClick: () => window.open(getTxUrl(depositApproveHash), '_blank') },
      });
    }
  }, [depositApproveHash, depositStatus]);

  // Deposit 交易提交 toast
  useEffect(() => {
    if (supplyHash && depositStatus === 'supplying') {
      toast.loading(t("repay.toast.depositSubmitted"), {
        id: DEPOSIT_TOAST_ID,
        description: t("repay.toast.depositingNow"),
        action: { label: t("repay.toast.viewTx"), onClick: () => window.open(getTxUrl(supplyHash), '_blank') },
      });
    }
  }, [supplyHash, depositStatus]);

  // Withdraw 交易提交 toast
  useEffect(() => {
    if (withdrawHash && withdrawStatus === 'withdrawing') {
      toast.loading(t("repay.toast.withdrawSubmitted"), {
        id: WITHDRAW_TOAST_ID,
        description: t("repay.toast.withdrawingNow"),
        action: { label: t("repay.toast.viewTx"), onClick: () => window.open(getTxUrl(withdrawHash), '_blank') },
      });
    }
  }, [withdrawHash, withdrawStatus]);

  // Notify backend after successful tx
  useEffect(() => {
    if (depositStatus === 'success' && supplyHash && amount) {
      toast.success(t("repay.toast.depositSuccess"), {
        id: DEPOSIT_TOAST_ID,
        description: t("repay.toast.depositSuccessDesc"),
        duration: 5000,
      });
      notifySupplyCollateral(tokenType, amount, supplyHash);
      refetchBalance();
      refetchWalletBalance();
      onCollateralChanged?.();
      setAmount('');
      setTimeout(resetDeposit, 3000);
    }
  }, [depositStatus]);

  useEffect(() => {
    if (withdrawStatus === 'success' && withdrawHash && amount) {
      toast.success(t("repay.toast.withdrawSuccess"), {
        id: WITHDRAW_TOAST_ID,
        description: t("repay.toast.withdrawSuccessDesc"),
        duration: 5000,
      });
      notifyWithdrawCollateral(tokenType, amount, withdrawHash);
      refetchBalance();
      setAmount('');
      setTimeout(resetWithdraw, 3000);
    }
  }, [withdrawStatus]);

  // 错误提示
  useEffect(() => {
    if (depositError) {
      if (depositError === 'Transaction cancelled') {
        toast.dismiss(DEPOSIT_TOAST_ID);
      } else {
        toast.error(t("repay.toast.depositFailed"), { id: DEPOSIT_TOAST_ID, duration: 5000 });
      }
    }
  }, [depositError]);

  useEffect(() => {
    if (withdrawError) {
      if (withdrawError === 'Transaction cancelled') {
        toast.dismiss(WITHDRAW_TOAST_ID);
      } else {
        toast.error(t("repay.toast.withdrawFailed"), { id: WITHDRAW_TOAST_ID, duration: 5000 });
      }
    }
  }, [withdrawError]);

  const inputDecimals = ytToken?.onChainDecimals ?? ytToken?.decimals ?? 18;
  const displayDecimals = Math.min(inputDecimals, 6);
  const truncateDecimals = (s: string, d: number) => { const p = s.split('.'); return p.length > 1 ? `${p[0]}.${p[1].slice(0, d)}` : s; };
  const isValidAmount = (v: string) => v !== '' && !isNaN(parseFloat(v)) && parseFloat(v) > 0;

  const handleAmountChange = (value: string) => {
    if (value === '') { setAmount(value); return; }
    if (!/^\d*\.?\d*$/.test(value)) return;
    const parts = value.split('.');
    if (parts.length > 1 && parts[1].length > displayDecimals) return;
    const maxBalance = activeTab === 'deposit' ? parseFloat(walletBalance) : parseFloat(formattedBalance);
    if (parseFloat(value) > maxBalance) {
      setAmount(truncateDecimals(activeTab === 'deposit' ? walletBalance : formattedBalance, displayDecimals));
      return;
    }
    setAmount(value);
  };

  const handleAction = () => {
    if (!amount || parseFloat(amount) <= 0 || !ytToken) return;
    if (activeTab === 'deposit') {
      executeApproveAndSupply(ytToken, amount);
    } else {
      executeWithdrawCollateral(ytToken, amount);
    }
  };

  const handleMax = () => {
    if (activeTab === 'deposit') {
      setAmount(truncateDecimals(walletBalance, displayDecimals));
    } else {
      setAmount(truncateDecimals(formattedBalance, displayDecimals));
    }
  };

  const isLoading = isDepositing || isWithdrawing;
  const currentStatus = activeTab === 'deposit' ? depositStatus : withdrawStatus;

  const getButtonLabel = () => {
    if (!isConnected) return t("common.connectWallet");
    if (currentStatus === 'approving') return t("common.approving");
    if (currentStatus === 'approved') return t("repay.confirmedDepositing");
    if (currentStatus === 'supplying') return t("repay.depositing");
    if (currentStatus === 'withdrawing') return t("repay.withdrawing");
    if (currentStatus === 'success') return t("common.success");
    if (currentStatus === 'error') return t("common.failed");
    if (amount && !isValidAmount(amount)) return t("common.invalidAmount");
    return activeTab === 'deposit' ? t("repay.deposit") : t("repay.withdraw");
  };

  return (
    <div className="bg-bg-surface dark:bg-gray-800 rounded-3xl border border-border-gray dark:border-gray-700 p-4 md:p-8 flex flex-col gap-6 flex-1 shadow-md">
      {/* Title */}
      <h3 className="text-body-large font-bold text-text-primary dark:text-white leading-[150%]">
        {t("repay.supplyCollateral")}
      </h3>

      {/* Token Info and Value */}
      <div className="flex items-center gap-3 min-w-0">
        <div
          className="w-10 h-10 rounded-full flex items-center justify-center text-white text-sm font-bold shadow-md overflow-hidden flex-shrink-0"
          style={{ background: GRADIENT_COLORS[tokenType] ?? DEFAULT_GRADIENT }}
        >
          {ytToken?.iconUrl ? (
            <Image src={ytToken.iconUrl} alt={tokenType} width={40} height={40} className="w-full h-full object-cover" />
          ) : (
            tokenType.replace('YT-', '')
          )}
        </div>
        <div className="flex flex-col min-w-0">
          <div className="flex items-baseline gap-1">
            <span className="text-heading-h4 font-bold text-text-primary dark:text-white leading-[130%] tracking-[-0.005em] truncate">
              {!mounted ? '--' : parseFloat(formattedBalance).toLocaleString('en-US', { maximumFractionDigits: displayDecimals })}
            </span>
            <span className="text-body-small font-bold text-text-tertiary dark:text-gray-400 flex-shrink-0">{tokenType}</span>
          </div>
          <span className="text-caption-tiny font-bold text-text-tertiary dark:text-gray-400 leading-[150%] tracking-[0.01em]">
            {!mounted ? '--' : `$${parseFloat(collateralUsd).toLocaleString('en-US', { maximumFractionDigits: 2 })}`}
          </span>
        </div>
      </div>

      {/* Tab Switcher */}
      <div className="flex rounded-xl bg-fill-secondary-click dark:bg-gray-700 p-1">
        <button
          className={`flex-1 rounded-lg py-2 text-body-small font-bold transition-all ${
            activeTab === 'deposit'
              ? 'bg-white dark:bg-gray-600 text-text-primary dark:text-white shadow-sm'
              : 'text-text-tertiary dark:text-gray-400'
          }`}
          onClick={() => { setActiveTab('deposit'); setAmount(''); resetDeposit(); }}
        >
          {t("repay.deposit")}
        </button>
        <button
          className={`flex-1 rounded-lg py-2 text-body-small font-bold transition-all ${
            activeTab === 'withdraw'
              ? 'bg-white dark:bg-gray-600 text-text-primary dark:text-white shadow-sm'
              : 'text-text-tertiary dark:text-gray-400'
          }`}
          onClick={() => { setActiveTab('withdraw'); setAmount(''); resetWithdraw(); }}
        >
          {t("repay.withdraw")}
        </button>
      </div>

      {/* Amount Input */}
      <div className="flex flex-col gap-2">
        <div className="flex items-center justify-between">
          <span className="text-caption-tiny font-medium text-text-tertiary dark:text-gray-400">
            {t("repay.amount")}
          </span>
          {activeTab === 'deposit' && mounted && (
            <button
              onClick={handleMax}
              className="text-caption-tiny font-bold text-[#ff6900] hover:opacity-80"
            >
              {t("common.max")}: {parseFloat(walletBalance).toLocaleString('en-US', { maximumFractionDigits: displayDecimals })} {tokenType}
            </button>
          )}
          {activeTab === 'withdraw' && mounted && (
            <button
              onClick={handleMax}
              className="text-caption-tiny font-bold text-[#ff6900] hover:opacity-80"
            >
              {t("common.max")}: {parseFloat(formattedBalance).toLocaleString('en-US', { maximumFractionDigits: displayDecimals })} {tokenType}
            </button>
          )}
        </div>
        <div className="flex items-center bg-bg-subtle dark:bg-gray-700 rounded-xl px-4 h-[52px] gap-2">
          <input
            type="text" inputMode="decimal"
            placeholder="0.00"
            value={amount}
            onChange={(e) => handleAmountChange(e.target.value)}
            className="flex-1 bg-transparent text-body-default font-bold text-text-primary dark:text-white outline-none"
          />
          <span className="text-body-small font-bold text-text-tertiary dark:text-gray-400">
            {tokenType}
          </span>
        </div>
      </div>

      {/* Action Button */}
      <Button
        isDisabled={!mounted || (isConnected && (!isValidAmount(amount) || isLoading || currentStatus === 'success'))}
        color="default"
        className={buttonStyles({ intent: "theme" })}
        onPress={() => !isConnected ? open() : handleAction()}
      >
        {!mounted ? 'Loading...' : getButtonLabel()}
      </Button>
    </div>
  );
}