/**
 * LP 调试信息组件
 * 显示合约地址和管理员信息
 */

import { useChainId } from 'wagmi'
import { getContracts, getChainName } from '@/config/contracts'

interface LPDebugInfoProps {
  vaultGov?: string
  poolManagerGov?: string
  show: boolean
  onToggle: () => void
}

export function LPDebugInfo({
  vaultGov,
  poolManagerGov,
  show,
  onToggle,
}: LPDebugInfoProps) {
  // ===== 多链支持 =====
  const chainId = useChainId()
  const CONTRACTS = getContracts(chainId)
  const currentChainName = getChainName(chainId)

  const copyToClipboard = (text: string) => {
    navigator.clipboard.writeText(text)
  }

  const styles = {
    container: {
      marginTop: '16px',
      padding: '12px 16px',
      background: '#f9f9f9',
      borderRadius: '8px',
      border: '1px solid #e0e0e0',
    },
    header: {
      display: 'flex',
      justifyContent: 'space-between',
      alignItems: 'center',
      cursor: 'pointer',
    },
    title: {
      margin: 0,
      color: '#333',
      fontSize: '14px',
      fontWeight: 600,
    },
    content: {
      marginTop: '16px',
    },
    section: {
      marginBottom: '16px',
      background: '#fff',
      borderRadius: '6px',
      border: '1px solid #e8e8e8',
      overflow: 'hidden',
    },
    sectionTitle: {
      padding: '10px 12px',
      background: '#fafafa',
      borderBottom: '1px solid #e8e8e8',
      fontSize: '12px',
      fontWeight: 600,
      color: '#333',
    },
    sectionBody: {
      padding: '8px 0',
    },
    row: {
      display: 'flex',
      justifyContent: 'space-between',
      alignItems: 'center',
      padding: '6px 12px',
      fontSize: '12px',
    },
    label: {
      color: '#666',
      fontWeight: 500,
      minWidth: '120px',
    },
    address: {
      fontFamily: 'monospace',
      color: '#1890ff',
      cursor: 'pointer',
      fontSize: '11px',
      wordBreak: 'break-all' as const,
      textAlign: 'right' as const,
      flex: 1,
      marginLeft: '12px',
    },
    hint: {
      fontSize: '11px',
      color: '#999',
      textAlign: 'center' as const,
      padding: '8px',
    },
  }

  const AddressRow = ({ label, address }: { label: string; address?: string }) => (
    <div style={styles.row}>
      <span style={styles.label}>{label}</span>
      <span
        style={styles.address}
        onClick={() => address && copyToClipboard(address)}
        title={address ? '点击复制完整地址' : ''}
      >
        {address || 'Loading...'}
      </span>
    </div>
  )

  return (
    <div style={styles.container}>
      <div style={styles.header} onClick={onToggle}>
        <h4 style={styles.title}>{'调试信息'}</h4>
        <span style={{ color: '#999', fontSize: '12px' }}>{show ? '收起' : '展开'}</span>
      </div>

      {show && (
        <div style={styles.content}>
          {/* 合约地址 */}
          <div style={styles.section}>
            <div style={styles.sectionTitle}>合约地址</div>
            <div style={styles.sectionBody}>
              <AddressRow label="YTRewardRouter" address={CONTRACTS.YT_REWARD_ROUTER} />
              <AddressRow label="YTLPToken" address={CONTRACTS.YT_LP_TOKEN} />
              <AddressRow label="YTPoolManager" address={CONTRACTS.YT_POOL_MANAGER} />
              <AddressRow label="YTVault" address={CONTRACTS.YT_VAULT} />
              <AddressRow label="USDY" address={CONTRACTS.USDY} />
              <AddressRow label="USDC" address={CONTRACTS.USDC} />
            </div>
          </div>

          {/* 管理员地址 */}
          <div style={{ ...styles.section, marginBottom: 0 }}>
            <div style={styles.sectionTitle}>管理员地址</div>
            <div style={styles.sectionBody}>
              <AddressRow label="PoolManager Gov" address={poolManagerGov} />
              <AddressRow label="Vault Gov" address={vaultGov} />
            </div>
          </div>

          <div style={styles.hint}>点击地址可复制到剪贴板</div>
        </div>
      )}
    </div>
  )
}
