/**
 * LP 池子信息显示组件
 * 显示 ytLP 代币信息、池子数据、用户数据
 */

import { formatUnits } from 'viem'
import { useChainId } from 'wagmi'
import { getContracts, getDecimals } from '@/config/contracts'

interface LPPoolInfoProps {
  // ytLP 代币信息
  ytLPName?: string
  ytLPSymbol?: string
  ytLPDecimals?: number
  ytLPBalance?: bigint
  ytLPTotalSupply?: bigint
  ytLPPrice?: bigint
  // 池子数据
  aumInUsdy?: bigint
  accountValue?: bigint
  cooldownDuration?: bigint
  lastAddedAt?: bigint
  // 状态
  emergencyMode?: boolean
  swapEnabled?: boolean
  poolValue?: bigint
}

export function LPPoolInfo({
  ytLPName,
  ytLPSymbol,
  ytLPDecimals,
  ytLPBalance,
  ytLPTotalSupply,
  ytLPPrice,
  aumInUsdy,
  accountValue,
  cooldownDuration,
  lastAddedAt,
  emergencyMode,
  swapEnabled,
  poolValue,
}: LPPoolInfoProps) {
  // ===== 多链支持 =====
  const chainId = useChainId()
  const CONTRACTS = getContracts(chainId)
  const TOKEN_DECIMALS = getDecimals(chainId)

  // 计算冷却剩余时间
  const getCooldownRemaining = () => {
    if (!lastAddedAt || !cooldownDuration) return 0
    const cooldownEnd = Number(lastAddedAt) + Number(cooldownDuration)
    const now = Math.floor(Date.now() / 1000)
    return Math.max(0, cooldownEnd - now)
  }

  const formatCooldown = (seconds: number) => {
    if (seconds <= 0) return t('lp.noCooldown')
    const mins = Math.floor(seconds / 60)
    const secs = seconds % 60
    return `${mins}m ${secs}s`
  }

  return (
    <div className="pool-info" style={{ fontSize: '12px' }}>
      {/* ytLP 代币信息 */}
      <div style={{ display: 'flex', gap: '16px', marginBottom: '8px', flexWrap: 'wrap', padding: '8px', background: '#f8f9fa', borderRadius: '4px' }}>
        <span style={{ color: '#666' }}>名称: <strong>{ytLPName || 'ytLP'}</strong></span>
        <span style={{ color: '#666' }}>符号: <strong>{ytLPSymbol || 'ytLP'}</strong></span>
        <span style={{ color: '#666' }}>精度: <strong>{ytLPDecimals?.toString() || '18'}</strong></span>
        <span style={{ color: '#666' }}>合约: <code style={{ fontSize: '11px' }}>{CONTRACTS.YT_LP_TOKEN.slice(0, 8)}...{CONTRACTS.YT_LP_TOKEN.slice(-6)}</code></span>
      </div>

      {/* 池子数据 + 用户数据 - 网格布局 */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(150px, 1fr))', gap: '8px 16px', padding: '10px', background: '#f8f9fa', borderRadius: '6px' }}>
        <div title="管理资产总额，池中所有代币的总价值 / Assets Under Management, total value of all tokens in pool" style={{ cursor: 'help' }}>
          <span style={{ color: '#666' }}>AUM:</span> <strong>{aumInUsdy ? Number(formatUnits(aumInUsdy, TOKEN_DECIMALS.USDY)).toFixed(2) : '0'} USDY</strong>
        </div>
        <div title="ytLP代币价格 = AUM / ytLP总供应量 / ytLP token price = AUM / total supply" style={{ cursor: 'help' }}>
          <span style={{ color: '#666' }}>ytLP价格:</span> <strong>{ytLPPrice ? Number(formatUnits(ytLPPrice, TOKEN_DECIMALS.INTERNAL_PRICE)).toFixed(6) : '1'}</strong>
        </div>
        <div title="ytLP代币总发行量 / Total ytLP tokens minted" style={{ cursor: 'help' }}>
          <span style={{ color: '#666' }}>总供应:</span> <strong>{ytLPTotalSupply ? Number(formatUnits(ytLPTotalSupply, TOKEN_DECIMALS.YT_LP)).toFixed(2) : '0'}</strong>
        </div>
        <div title="你持有的ytLP代币数量 / Your ytLP token balance" style={{ cursor: 'help' }}>
          <span style={{ color: '#666' }}>你的ytLP:</span> <strong>{ytLPBalance ? Number(formatUnits(ytLPBalance, TOKEN_DECIMALS.YT_LP)).toFixed(2) : '0'}</strong>
        </div>
        <div title="添加流动性后的冷却时间，期间无法移除流动性 / Cooldown after adding liquidity, cannot remove during this period" style={{ cursor: 'help' }}>
          <span style={{ color: '#666' }}>冷却:</span> <strong>{formatCooldown(getCooldownRemaining())}</strong>
        </div>
        <div title="你的账户在池中的总价值（USD） / Your account value in the pool (USD)" style={{ cursor: 'help' }}>
          <span style={{ color: '#666' }}>账户价值:</span> <strong>${accountValue ? Number(formatUnits(accountValue, TOKEN_DECIMALS.INTERNAL_PRICE)).toFixed(6) : '0'}</strong>
        </div>
        <div title="紧急模式开启时，部分功能将被禁用 / When emergency mode is ON, some functions are disabled" style={{ cursor: 'help' }}>
          <span style={{ color: '#666' }}>紧急模式:</span>{' '}
          <strong style={{ color: emergencyMode ? '#f44336' : '#4caf50' }}>{emergencyMode ? 'ON' : '正常'}</strong>
        </div>
        <div title="Swap 功能开关 / Swap function toggle" style={{ cursor: 'help' }}>
          <span style={{ color: '#666' }}>Swap:</span>{' '}
          <strong style={{ color: swapEnabled ? '#4caf50' : '#f44336' }}>{swapEnabled ? '开启' : '关闭'}</strong>
        </div>
        <div title="池子价值 (USD) / Pool value (USD)" style={{ cursor: 'help' }}>
          <span style={{ color: '#666' }}>池价值:</span> <strong>${poolValue ? Number(formatUnits(poolValue, TOKEN_DECIMALS.INTERNAL_PRICE)).toFixed(2) : '0'}</strong>
        </div>
      </div>
    </div>
  )
}
