/**
 * BlockchainBadge Component
 *
 * Visual indicator showing that a bet is backed by blockchain.
 *
 * Features:
 * - Shows "On-Chain ⛓️" badge
 * - Links to blockchain explorer (Etherscan, Polygonscan)
 * - Different states: confirmed, pending, failed
 * - Tooltip with transaction details
 */

import { FC } from 'react'

interface BlockchainBadgeProps {
  status?: 'confirmed' | 'pending' | 'failed'
  txHash?: string
  chainId?: number
  variant?: 'default' | 'compact'
}

export const BlockchainBadge: FC<BlockchainBadgeProps> = ({
  status = 'confirmed',
  txHash,
  chainId = 11155111, // Sepolia default
  variant = 'default'
}) => {
  /**
   * Get block explorer URL based on chain ID
   */
  const getExplorerUrl = (hash: string) => {
    const explorers: Record<number, string> = {
      1: 'https://etherscan.io',
      11155111: 'https://sepolia.etherscan.io',
      137: 'https://polygonscan.com',
      80001: 'https://mumbai.polygonscan.com'
    }

    const baseUrl = explorers[chainId] || explorers[11155111]
    return `${baseUrl}/tx/${hash}`
  }

  /**
   * Render badge based on status
   */
  if (status === 'pending') {
    return (
      <span className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800 border border-yellow-300">
        <svg className="animate-spin h-3 w-3" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
          <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
          <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
        </svg>
        {variant === 'compact' ? 'Pending' : 'Transaction Pending'}
      </span>
    )
  }

  if (status === 'failed') {
    return (
      <span className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium bg-red-100 text-red-800 border border-red-300">
        <svg className="h-3 w-3" fill="currentColor" viewBox="0 0 20 20">
          <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clipRule="evenodd" />
        </svg>
        Failed
      </span>
    )
  }

  // Confirmed status
  return (
    <div className="inline-flex items-center gap-1.5">
      <span className="inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800 border border-green-300">
        {variant === 'compact' ? (
          <>
            <span>⛓️</span>
          </>
        ) : (
          <>
            <svg className="h-3 w-3" fill="currentColor" viewBox="0 0 20 20">
              <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
            </svg>
            <span>On-Chain ⛓️</span>
          </>
        )}
      </span>

      {txHash && (
        <a
          href={getExplorerUrl(txHash)}
          target="_blank"
          rel="noopener noreferrer"
          className="inline-flex items-center gap-1 text-xs text-blue-600 hover:text-blue-800 underline"
          onClick={(e) => e.stopPropagation()} // Prevent parent click events
        >
          <svg className="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
          </svg>
          {variant === 'compact' ? 'View' : 'View on Explorer'}
        </a>
      )}
    </div>
  )
}

/**
 * Compact version for use in lists
 */
export const BlockchainBadgeCompact: FC<Omit<BlockchainBadgeProps, 'variant'>> = (props) => {
  return <BlockchainBadge {...props} variant="compact" />
}

/**
 * Truncate transaction hash for display
 */
export const truncateHash = (hash: string, startChars = 6, endChars = 4): string => {
  if (hash.length <= startChars + endChars) {
    return hash
  }
  return `${hash.substring(0, startChars)}...${hash.substring(hash.length - endChars)}`
}

/**
 * Badge with transaction hash display
 */
export const BlockchainBadgeWithHash: FC<BlockchainBadgeProps> = (props) => {
  if (!props.txHash) {
    return <BlockchainBadge {...props} />
  }

  return (
    <div className="inline-flex items-center gap-2">
      <BlockchainBadge {...props} />
      <code className="text-xs text-gray-600 bg-gray-100 px-2 py-0.5 rounded font-mono">
        {truncateHash(props.txHash)}
      </code>
    </div>
  )
}
