import Link from 'next/link'
import { Card } from '@/libs/frontend-ui-primitives'
import type { CheckpointMainnetAttestationLink } from '@/services/api/tokenAggregation'

function shortHash(hash: string): string {
  if (hash.length < 20) return hash
  return `${hash.slice(0, 10)}…${hash.slice(-8)}`
}

export interface MainnetAttestationPanelProps {
  batchId: string
  batchTotalUsd?: string
  links: CheckpointMainnetAttestationLink[]
}

export default function MainnetAttestationPanel({
  batchId,
  batchTotalUsd,
  links,
}: MainnetAttestationPanelProps) {
  return (
    <Card title="Ethereum mainnet attestation">
      <p className="text-sm text-gray-600 dark:text-gray-400">
        This Chain 138 transaction is included in checkpoint batch #{batchId}
        {batchTotalUsd ? ` · USD ref ${batchTotalUsd}` : ''}.
      </p>

      {links.length === 0 ? (
        <p className="mt-3 text-sm text-gray-500 dark:text-gray-400">
          Attested on mainnet; Etherscan transaction links are indexing. Refresh in a minute or open the
          checkpoint contracts on Etherscan.
        </p>
      ) : (
        <ul className="mt-4 space-y-3">
          {links.map((link) => (
            <li
              key={`${link.layer}:${link.mainnetTxHash}`}
              className="rounded-2xl border border-primary-200/60 bg-primary-50/40 p-4 dark:border-primary-500/20 dark:bg-primary-950/20"
            >
              <div className="flex flex-wrap items-center gap-x-3 gap-y-2">
                <span className="text-sm font-medium text-gray-900 dark:text-white">
                  {link.label || link.layer}
                </span>
                <Link
                  href={link.mainnetExplorerUrl}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="font-mono text-sm text-primary-600 hover:underline dark:text-primary-400"
                >
                  {shortHash(link.mainnetTxHash)} ↗
                </Link>
              </div>
              {(link.meta?.role || link.meta?.uetr) && (
                <div className="mt-2 flex flex-wrap gap-3 text-xs text-gray-500 dark:text-gray-400">
                  {link.meta.role ? <span>role: {link.meta.role}</span> : null}
                  {link.meta.uetr ? <span>UETR: {link.meta.uetr}</span> : null}
                </div>
              )}
            </li>
          ))}
        </ul>
      )}
    </Card>
  )
}
