/**
 * MultiChainAdmin Component - Multi-chain admin management
 */

import { useState } from 'react'
import { useChainId, useSwitchChain } from 'wagmi'
import { CONTRACT_ADDRESSES } from '../../config/contracts'
import toast from 'react-hot-toast'
import { chain138 } from '../../config/networks'

interface ChainConfig {
  chainId: number
  name: string
  contractAddresses: {
    mainnetTether?: string
    transactionMirror?: string
  }
}

const CHAIN_CONFIGS: ChainConfig[] = [
  {
    chainId: 1,
    name: 'Ethereum Mainnet',
    contractAddresses: {
      mainnetTether: CONTRACT_ADDRESSES.mainnet.MAINNET_TETHER,
      transactionMirror: CONTRACT_ADDRESSES.mainnet.TRANSACTION_MIRROR,
    },
  },
  {
    chainId: chain138.id,
    name: chain138.name,
    contractAddresses: {},
  },
]

export default function MultiChainAdmin() {
  const chainId = useChainId()
  const { switchChain } = useSwitchChain()
  const [selectedChain, setSelectedChain] = useState(chainId)
  
  // Note: address removed from here but may be used in future for permission checks

  const currentChain = CHAIN_CONFIGS.find((c) => c.chainId === chainId)
  const targetChain = CHAIN_CONFIGS.find((c) => c.chainId === selectedChain)

  const handleSwitchChain = () => {
    if (selectedChain !== chainId) {
      switchChain({ chainId: selectedChain })
      toast(`Switching to ${targetChain?.name}...`, { icon: '🔄' })
    }
  }

  return (
    <div className="space-y-6">
      <div className="bg-black/20 rounded-xl p-6 border border-white/10">
        <h2 className="text-xl font-bold text-white mb-4">Multi-Chain Admin</h2>
        <p className="text-white/70 text-sm mb-4">
          Manage admin contracts across multiple chains.
        </p>

        <div className="space-y-4">
          <div>
            <label className="block text-white/70 text-sm mb-2">Current Chain</label>
            <div className="bg-blue-500/20 border border-blue-500/50 rounded-lg p-4">
              <p className="text-blue-200 font-semibold">{currentChain?.name || 'Unknown'}</p>
              <p className="text-blue-200/70 text-xs">Chain ID: {chainId}</p>
            </div>
          </div>

          <div>
            <label className="block text-white/70 text-sm mb-2">Switch to Chain</label>
            <select
              value={selectedChain}
              onChange={(e) => setSelectedChain(parseInt(e.target.value))}
              className="w-full px-4 py-2 bg-white/10 border border-white/20 rounded-lg text-white focus:outline-none focus:border-blue-500"
            >
              {CHAIN_CONFIGS.map((chain) => (
                <option key={chain.chainId} value={chain.chainId}>
                  {chain.name} (Chain ID: {chain.chainId})
                </option>
              ))}
            </select>
            {selectedChain !== chainId && (
              <button
                onClick={handleSwitchChain}
                className="w-full mt-2 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg font-semibold transition-colors"
              >
                Switch Chain
              </button>
            )}
          </div>
        </div>
      </div>

      <div className="bg-black/20 rounded-xl p-6 border border-white/10">
        <h3 className="text-lg font-bold text-white mb-4">Chain Configurations</h3>
        <div className="space-y-3">
          {CHAIN_CONFIGS.map((chain) => (
            <div key={chain.chainId} className="bg-white/5 rounded-lg p-4">
              <div className="flex justify-between items-start mb-2">
                <div>
                  <p className="text-white font-semibold">{chain.name}</p>
                  <p className="text-white/60 text-xs">Chain ID: {chain.chainId}</p>
                </div>
                {chain.chainId === chainId && (
                  <span className="px-2 py-1 bg-green-500/20 text-green-300 rounded text-xs">
                    Active
                  </span>
                )}
              </div>
              {chain.contractAddresses.mainnetTether && (
                <div className="mt-2">
                  <p className="text-white/70 text-xs mb-1">MainnetTether:</p>
                  <p className="text-white/60 text-xs font-mono">
                    {chain.contractAddresses.mainnetTether}
                  </p>
                </div>
              )}
              {chain.contractAddresses.transactionMirror && (
                <div className="mt-2">
                  <p className="text-white/70 text-xs mb-1">TransactionMirror:</p>
                  <p className="text-white/60 text-xs font-mono">
                    {chain.contractAddresses.transactionMirror}
                  </p>
                </div>
              )}
            </div>
          ))}
        </div>
      </div>
    </div>
  )
}