'use client'

import { useCallback, useEffect, useMemo, useState } from 'react'
import Link from 'next/link'
import { useRouter } from 'next/router'
import { Address, Card, Table } from '@/libs/frontend-ui-primitives'
import { tokensApi, type TokenHolder, type TokenProfile, type TokenProvenance } from '@/services/api/tokens'
import type { AddressTokenTransfer } from '@/services/api/addresses'
import type { MissionControlLiquidityPool } from '@/services/api/routes'
import PageIntro from '@/components/common/PageIntro'
import { DetailRow } from '@/components/common/DetailRow'
import EntityBadge from '@/components/common/EntityBadge'
import PostureBadge from '@/components/common/PostureBadge'
import GruStandardsCard from '@/components/common/GruStandardsCard'
import TokenSigningSurfaceCard from '@/components/common/TokenSigningSurfaceCard'
import MarketEvidenceNote from '@/components/common/MarketEvidenceNote'
import HoBackingSummaryCard from '@/components/common/HoBackingSummaryCard'
import AddTokenToWalletButton from '@/components/wallet/AddTokenToWalletButton'
import TokenLiquidityStack from '@/components/wallet/TokenLiquidityStack'
import PaginationControls from '@/components/common/PaginationControls'
import SectionTabs, { TabPanel, type SectionTab } from '@/components/common/SectionTabs'
import { useDetailTabQuery } from '@/utils/useDetailTabQuery'

const TOKEN_DETAIL_TABS_ID = 'token-detail'
import { formatInteger, formatTokenAmount, formatTimestamp } from '@/utils/format'
import { useDisplayCurrency } from '@/components/common/DisplayCurrencyContext'
import { getGruStandardsProfileSafe, type GruStandardsProfile } from '@/services/api/gru'
import { getGruExplorerMetadata } from '@/services/api/gruExplorerData'
import { contractsApi, type ContractProfile } from '@/services/api/contracts'
import { tokenAggregationApi, type TokenAggregationTokenSnapshot } from '@/services/api/tokenAggregation'
import { formatUsdValue, getSecondaryDisplayValue } from '@/utils/displayCurrency'
import {
  formatCashInBankLabel,
  formatHoReserveCoverageLabel,
  formatTotalSupplyHoBackingLabel,
  resolveDisplayedCashInBankUsd,
} from '@/utils/tokenMarket'

function isValidAddress(value: string) {
  return /^0x[a-fA-F0-9]{40}$/.test(value)
}

function toNumeric(value: string | number | null | undefined): number | null {
  if (typeof value === 'number' && Number.isFinite(value)) return value
  if (typeof value === 'string' && value.trim() !== '') {
    const parsed = Number(value)
    if (Number.isFinite(parsed)) return parsed
  }
  return null
}

function formatUsd(value: string | number | null | undefined): string {
  const numeric = toNumeric(value)
  if (numeric == null) return 'Unavailable'
  return formatUsdValue(numeric)
}

export default function TokenDetailPage() {
  const router = useRouter()
  const { currency, setCurrency } = useDisplayCurrency()
  const address = typeof router.query.address === 'string' ? router.query.address : ''
  const isValidTokenAddress = address !== '' && isValidAddress(address)

  const [token, setToken] = useState<TokenProfile | null>(null)
  const [provenance, setProvenance] = useState<TokenProvenance | null>(null)
  const [holders, setHolders] = useState<TokenHolder[]>([])
  const [transfers, setTransfers] = useState<AddressTokenTransfer[]>([])
  const [pools, setPools] = useState<MissionControlLiquidityPool[]>([])
  const [gruProfile, setGruProfile] = useState<GruStandardsProfile | null>(null)
  const [contractProfile, setContractProfile] = useState<ContractProfile | null>(null)
  const [aggregationMarket, setAggregationMarket] = useState<TokenAggregationTokenSnapshot | null>(null)
  const [loading, setLoading] = useState(true)
  const [holderPage, setHolderPage] = useState(1)
  const [transferPage, setTransferPage] = useState(1)
  const [poolPage, setPoolPage] = useState(1)
  const pageSize = 8

  const loadToken = useCallback(async () => {
    setLoading(true)
    try {
      const [tokenResult, provenanceResult, holdersResult, transfersResult, poolsResult, contractResult, aggregationResult] = await Promise.all([
        tokensApi.getSafe(address),
        tokensApi.getProvenanceSafe(address),
        tokensApi.getHoldersSafe(address, 1, 10),
        tokensApi.getTransfersSafe(address, 1, 10),
        tokensApi.getRelatedPoolsSafe(address),
        contractsApi.getProfileSafe(address),
        tokenAggregationApi.getTokenSafe(138, address),
      ])

      setToken(tokenResult.ok ? tokenResult.data : null)
      setProvenance(provenanceResult.ok ? provenanceResult.data : null)
      setHolders(holdersResult.ok ? holdersResult.data : [])
      setTransfers(transfersResult.ok ? transfersResult.data : [])
      setPools(poolsResult.ok ? poolsResult.data : [])
      setAggregationMarket(aggregationResult.ok ? aggregationResult.data : null)
      const resolvedContractProfile = contractResult.ok ? contractResult.data : null
      setContractProfile(resolvedContractProfile)
      if (tokenResult.ok && tokenResult.data) {
        const gruResult = await getGruStandardsProfileSafe({
          address,
          symbol: tokenResult.data.symbol,
          tags: provenanceResult.ok ? provenanceResult.data?.tags || [] : [],
          contractProfile: resolvedContractProfile,
        })
        setGruProfile(gruResult.ok ? gruResult.data : null)
      } else {
        setGruProfile(null)
      }
    } catch {
      setToken(null)
      setProvenance(null)
      setHolders([])
      setTransfers([])
      setPools([])
      setGruProfile(null)
      setContractProfile(null)
      setAggregationMarket(null)
    } finally {
      setLoading(false)
    }
  }, [address])

  useEffect(() => {
    if (!router.isReady || !address) {
      setLoading(router.isReady ? false : true)
      return
    }
    if (!isValidTokenAddress) {
      setLoading(false)
      setToken(null)
      setContractProfile(null)
      setAggregationMarket(null)
      return
    }
    void loadToken()
  }, [address, isValidTokenAddress, loadToken, router.isReady])

  const provenanceTags = useMemo(() => {
    const tags = [...(provenance?.tags || [])]
    if (provenance?.listed && !tags.includes('listed')) {
      tags.unshift('listed')
    }
    return tags
  }, [provenance])

  const holderConcentration = useMemo(() => {
    if (!token?.total_supply || holders.length === 0) return null
    const topHolder = holders[0]
    if (!topHolder) return null

    const supply = BigInt(token.total_supply)
    if (supply === 0n) return null
    const topBalance = BigInt(topHolder.value || '0')
    return Number((topBalance * 10000n) / supply) / 100
  }, [holders, token?.total_supply])

  const liquiditySummary = useMemo(() => {
    const poolCount = pools.length
    const totalTvl = pools.reduce((sum, pool) => sum + (pool.tvl || 0), 0)
    return {
      poolCount,
      totalTvl,
    }
  }, [pools])

  const transferFlowSummary = useMemo(() => {
    const uniqueSenders = new Set(transfers.map((transfer) => transfer.from_address.toLowerCase())).size
    const uniqueRecipients = new Set(transfers.map((transfer) => transfer.to_address.toLowerCase())).size
    return {
      sampleSize: transfers.length,
      uniqueSenders,
      uniqueRecipients,
    }
  }, [transfers])

  const trustSummary = useMemo(() => {
    const signals: string[] = []
    if (provenance?.listed) signals.push('listed in the Chain 138 registry')
    if (provenanceTags.includes('compliant')) signals.push('marked compliant')
    if (provenanceTags.includes('bridge')) signals.push('bridge-linked asset')
    if (liquiditySummary.poolCount > 0) signals.push(`${liquiditySummary.poolCount} related liquidity pool${liquiditySummary.poolCount === 1 ? '' : 's'}`)
    if ((token?.holders || 0) > 0) signals.push(`${formatInteger(token?.holders ?? 0)} indexed holders`)
    return signals
  }, [liquiditySummary.poolCount, provenance?.listed, provenanceTags, token?.holders])

  const trustProfile = useMemo(() => {
    if (provenance?.listed && provenanceTags.includes('compliant')) {
      return {
        label: 'high confidence',
        tone: 'success' as const,
        summary: 'Curated registry coverage plus standards and policy metadata make this one of the explorer’s better-understood assets.',
      }
    }
    if (provenance?.listed || provenanceTags.includes('bridge') || liquiditySummary.poolCount > 0) {
      return {
        label: 'moderate confidence',
        tone: 'info' as const,
        summary: 'There are enough public signals to treat this as a known asset, but not enough to confuse that with blanket safety.',
      }
    }
    return {
      label: 'limited confidence',
      tone: 'warning' as const,
      summary: 'The explorer can see the token, but curated provenance and broader trust signals remain thin.',
    }
  }, [liquiditySummary.poolCount, provenance?.listed, provenanceTags])

  const gruExplorerMetadata = useMemo(
    () => getGruExplorerMetadata({ address: token?.address || address, symbol: token?.symbol }),
    [address, token?.address, token?.symbol],
  )
  const aggregationMarketData = aggregationMarket?.market ?? null
  const tabs = useMemo<SectionTab<'intelligence' | 'standards' | 'holders' | 'transfers' | 'liquidity'>[]>(
    () => [
      { id: 'intelligence', label: 'Intelligence' },
      ...(gruProfile || gruExplorerMetadata ? [{ id: 'standards' as const, label: 'Standards' }] : []),
      { id: 'holders', label: 'Holders', count: holders.length },
      { id: 'transfers', label: 'Transfers', count: transfers.length },
      { id: 'liquidity', label: 'Liquidity', count: pools.length },
    ],
    [gruExplorerMetadata, gruProfile, holders.length, pools.length, transfers.length],
  )
  const tokenTabIds = useMemo(
    () => tabs.map((tab) => tab.id),
    [tabs],
  )
  const { activeTab, setActiveTab } = useDetailTabQuery(tokenTabIds, 'intelligence', address)
  const holderPageCount = Math.max(1, Math.ceil(holders.length / pageSize))
  const transferPageCount = Math.max(1, Math.ceil(transfers.length / pageSize))
  const poolPageCount = Math.max(1, Math.ceil(pools.length / pageSize))
  const pagedHolders = useMemo(
    () => holders.slice((holderPage - 1) * pageSize, holderPage * pageSize),
    [holderPage, holders],
  )
  const pagedTransfers = useMemo(
    () => transfers.slice((transferPage - 1) * pageSize, transferPage * pageSize),
    [transferPage, transfers],
  )
  const pagedPools = useMemo(
    () => pools.slice((poolPage - 1) * pageSize, poolPage * pageSize),
    [poolPage, pools],
  )

  useEffect(() => {
    setHolderPage(1)
    setTransferPage(1)
    setPoolPage(1)
  }, [address])

  const renderAmountWithDisplayCurrency = useCallback(
    (rawAmount: string | number | null | undefined, decimals: number, symbol?: string | null) => {
      const primaryAmount = formatTokenAmount(rawAmount, decimals, symbol)
      const secondaryAmount = getSecondaryDisplayValue({
        rawAmount,
        decimals,
        exchangeRate: token?.exchange_rate,
        displayCurrency: currency,
      })

      if (!secondaryAmount) return primaryAmount

      return (
        <div className="space-y-1">
          <div>{primaryAmount}</div>
          <div className="text-xs text-gray-500 dark:text-gray-400">Approx. {secondaryAmount}</div>
        </div>
      )
    },
    [currency, token?.exchange_rate],
  )

  const holderColumns = [
    {
      header: 'Holder',
      accessor: (holder: TokenHolder) => (
        <Link href={`/addresses/${holder.address}`} className="text-primary-600 hover:underline">
          {holder.label || <Address address={holder.address} truncate showCopy={false} />}
        </Link>
      ),
    },
    {
      header: 'Balance',
      accessor: (holder: TokenHolder) => renderAmountWithDisplayCurrency(holder.value, token?.decimals || holder.token_decimals, token?.symbol),
    },
  ]

  const transferColumns = [
    {
      header: 'Hash',
      accessor: (transfer: AddressTokenTransfer) => (
        <Link href={`/transactions/${transfer.transaction_hash}`} className="text-primary-600 hover:underline">
          <Address address={transfer.transaction_hash} truncate showCopy={false} />
        </Link>
      ),
    },
    {
      header: 'Posture',
      accessor: (transfer: AddressTokenTransfer) => {
        const gruMetadata = getGruExplorerMetadata({
          address: transfer.token_address,
          symbol: transfer.token_symbol,
        })
        if (!gruMetadata) {
          return <span className="text-gray-500 dark:text-gray-400">Generic token</span>
        }
        return (
          <div className="flex flex-wrap gap-2">
            <EntityBadge label="GRU" tone="success" />
            {gruMetadata.x402Ready ? <PostureBadge label="x402 ready" tone="info" /> : null}
            {gruMetadata.iso20022Ready ? <PostureBadge label="ISO-20022" tone="info" /> : null}
          </div>
        )
      },
    },
    {
      header: 'From',
      accessor: (transfer: AddressTokenTransfer) => (
        <Link href={`/addresses/${transfer.from_address}`} className="text-primary-600 hover:underline">
          {transfer.from_label || <Address address={transfer.from_address} truncate showCopy={false} />}
        </Link>
      ),
    },
    {
      header: 'To',
      accessor: (transfer: AddressTokenTransfer) => (
        <Link href={`/addresses/${transfer.to_address}`} className="text-primary-600 hover:underline">
          {transfer.to_label || <Address address={transfer.to_address} truncate showCopy={false} />}
        </Link>
      ),
    },
    {
      header: 'Amount',
      accessor: (transfer: AddressTokenTransfer) => renderAmountWithDisplayCurrency(transfer.value, transfer.token_decimals, transfer.token_symbol),
    },
    {
      header: 'When',
      accessor: (transfer: AddressTokenTransfer) => formatTimestamp(transfer.timestamp),
    },
  ]

  const poolColumns = [
    {
      header: 'Pool',
      accessor: (pool: MissionControlLiquidityPool) => (
        <Link href={`/addresses/${pool.address}`} className="text-primary-600 hover:underline">
          <Address address={pool.address} truncate showCopy={false} />
        </Link>
      ),
    },
    {
      header: 'DEX',
      accessor: (pool: MissionControlLiquidityPool) => pool.dex || 'Unknown',
    },
    {
      header: 'Pair',
      accessor: (pool: MissionControlLiquidityPool) => `${pool.token0?.symbol || 'Token 0'} / ${pool.token1?.symbol || 'Token 1'}`,
    },
    {
      header: 'TVL',
      accessor: (pool: MissionControlLiquidityPool) => pool.tvl != null ? `$${formatInteger(Math.round(pool.tvl))}` : 'N/A',
    },
  ]

  return (
    <div className="container mx-auto px-4 py-4 sm:py-6">
      <PageIntro
        compact
        eyebrow="Token Detail"
        title={token?.symbol || token?.name || provenance?.symbol || provenance?.name || 'Token'}
        description="Supply, holders, transfers, standards, and liquidity on Chain 138."
        actions={[
          { href: '/tokens', label: 'Token index' },
          { href: '/liquidity', label: 'Liquidity' },
        ]}
      />

      <div className="mb-4 flex flex-wrap gap-3 text-sm">
        <Link href="/tokens" className="text-primary-600 hover:underline">
          Back to tokens
        </Link>
        {address && (
          <Link href={`/addresses/${address}`} className="text-primary-600 hover:underline">
            Open contract address
          </Link>
        )}
      </div>

      {!router.isReady || loading ? (
        <Card>
          <p className="text-sm text-gray-600 dark:text-gray-400">Loading token...</p>
        </Card>
      ) : !isValidTokenAddress ? (
        <Card>
          <p className="text-sm text-gray-600 dark:text-gray-400">Invalid token address. Please use a full 42-character 0x-prefixed address.</p>
        </Card>
      ) : !token ? (
        <div className="space-y-6">
          <Card>
            <p className="text-sm text-gray-600 dark:text-gray-400">
              Token details were not found for this address from the token index APIs. If this is a contract, verification metadata and ERC-5267 may still be available below.
            </p>
          </Card>
          <TokenSigningSurfaceCard address={address} contractProfile={contractProfile} />
        </div>
      ) : (
        <div className="space-y-6">
          {!provenance?.listed ? (
            <Card className="border border-amber-200 bg-amber-50/70 dark:border-amber-900/50 dark:bg-amber-950/20">
              <div className="flex flex-wrap items-center gap-2">
                <PostureBadge label="Non-canonical indexed token" tone="warning" />
              </div>
              <p className="mt-3 text-sm leading-6 text-amber-950 dark:text-amber-100">
                This contract is indexed by Blockscout but is not in the curated Chain 138 token registry. Prefer canonical addresses from the{' '}
                <Link href="/tokens" className="font-medium text-primary-600 hover:underline">token index</Link>
                {' '}and the posture glossary for trading, liquidity, and bridge routing.
              </p>
            </Card>
          ) : null}
          <Card title="Token Overview">
            <div className="mb-4 border-b border-gray-200 pb-4 dark:border-gray-700">
              <AddTokenToWalletButton
                address={token.address}
                symbol={token.symbol || provenance?.symbol || 'TOKEN'}
                decimals={token.decimals}
                name={token.name || provenance?.name}
                logoURI={provenance?.logoURI || token.icon_url || undefined}
                chainId={138}
              />
            </div>
            <dl className="space-y-4">
              <DetailRow label="Name">{token.name || provenance?.name || 'Unknown'}</DetailRow>
              <DetailRow label="Symbol">{token.symbol || provenance?.symbol || 'Unknown'}</DetailRow>
              <DetailRow label="Address">
                <Address address={token.address} />
              </DetailRow>
              <DetailRow label="Type">{token.type || 'Unknown'}</DetailRow>
              <DetailRow label="Decimals">{token.decimals}</DetailRow>
              <DetailRow label="Display Currency">
                <div className="space-y-2">
                  <label className="inline-flex items-center gap-2 text-sm text-gray-700 dark:text-gray-300">
                    <span className="sr-only">Display currency</span>
                    <select
                      value={currency}
                      onChange={(event) => setCurrency(event.target.value === 'usd' ? 'usd' : 'native')}
                      className="rounded-xl border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 shadow-sm focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-200 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 dark:focus:ring-primary-900"
                    >
                      <option value="native">Native token amounts</option>
                      <option value="usd">USD estimate</option>
                    </select>
                  </label>
                  <div className="text-xs text-gray-500 dark:text-gray-400">
                    USD estimates use the explorer&apos;s current indicative token price and appear as a secondary line when available.
                  </div>
                </div>
              </DetailRow>
              {token.total_supply && (
                <DetailRow label="Total Supply">
                  <div className="space-y-1">
                    <div>{renderAmountWithDisplayCurrency(token.total_supply, token.decimals, token.symbol)}</div>
                    {aggregationMarketData?.totalSupplyUsd != null ? (
                      <div className="text-xs text-gray-500 dark:text-gray-400">
                        {formatTotalSupplyHoBackingLabel(
                          aggregationMarketData.totalSupplyUsd,
                          aggregationMarketData.supplyNostroMatch,
                        )}
                      </div>
                    ) : null}
                  </div>
                </DetailRow>
              )}
              {aggregationMarketData?.hoReserveCoverage ? (
                <DetailRow label="HO reserve coverage">
                  <div className="space-y-1 text-sm">
                    <div>{formatHoReserveCoverageLabel(aggregationMarketData.hoReserveCoverage)}</div>
                    <div className="text-xs text-gray-500 dark:text-gray-400">
                      Aggregate issued c* vs HO GL {aggregationMarketData.hoReserveCoverage.reserveAssetGlCodes?.join('+') ?? '1000+1050'} reserve assets (M0). Not correspondent nostro cash.
                    </div>
                    {aggregationMarketData.hoReserveCoverage.reserveAssetsUsd != null ? (
                      <div className="text-xs text-gray-500 dark:text-gray-400">
                        Reserve assets {formatUsdValue(aggregationMarketData.hoReserveCoverage.reserveAssetsUsd)} · required{' '}
                        {formatUsdValue(aggregationMarketData.hoReserveCoverage.requiredReserveUsd)} · issued c*{' '}
                        {formatUsdValue(aggregationMarketData.hoReserveCoverage.issuedCStarUsd)}
                      </div>
                    ) : null}
                  </div>
                </DetailRow>
              ) : null}
              {aggregationMarketData?.cashInBankUsd != null ? (
                <DetailRow label="HO cash-in-bank">
                  <div className="space-y-1 text-sm">
                    <div>
                      {formatCashInBankLabel(
                        resolveDisplayedCashInBankUsd(aggregationMarketData),
                        aggregationMarketData.cashInBankAudit,
                        aggregationMarketData.supplyNostroMatch,
                      )}
                    </div>
                    <div className="text-xs text-gray-500 dark:text-gray-400">
                      Head Office external nostro (GL 13010). Total supply USD should equal{' '}
                      {aggregationMarketData.supplyNostroMatch?.multiplier ?? 1.2}× this amount.
                    </div>
                  </div>
                </DetailRow>
              ) : null}
              {token.holders != null && (
                <DetailRow label="Holders">{formatInteger(token.holders)}</DetailRow>
              )}
              <DetailRow label="Provenance" valueClassName="flex flex-wrap gap-2">
                {provenanceTags.length > 0 ? provenanceTags.map((tag) => (
                  <EntityBadge key={tag} label={tag} />
                )) : <span className="text-gray-500">No curated provenance metadata yet</span>}
              </DetailRow>
              <DetailRow label="Listing">
                {provenance?.listed ? 'Listed in the Chain 138 token registry' : 'Not present in the curated Chain 138 token registry'}
              </DetailRow>
              <DetailRow label="Trust Posture">
                <div className="space-y-2">
                  <EntityBadge label={trustProfile.label} tone={trustProfile.tone} />
                  <div className="text-sm text-gray-600 dark:text-gray-400">{trustProfile.summary}</div>
                </div>
              </DetailRow>
            </dl>
          </Card>

          <TokenSigningSurfaceCard address={token.address} contractProfile={contractProfile} />

          <SectionTabs
            tabs={tabs}
            activeTab={activeTab}
            onChange={setActiveTab}
            className="mb-6"
            idPrefix={TOKEN_DETAIL_TABS_ID}
            ariaLabel="Token details"
          />

          <TabPanel idPrefix={TOKEN_DETAIL_TABS_ID} tabId="intelligence" activeTab={activeTab}>
          {aggregationMarketData?.hoReserveCoverage || aggregationMarketData?.cashInBankUsd != null ? (
            <div className="mb-6">
              <HoBackingSummaryCard market={aggregationMarketData} />
            </div>
          ) : null}
          <Card title="Token Intelligence">
            <div className="grid gap-4 lg:grid-cols-2">
              <div className="rounded-2xl border border-gray-200 bg-gray-50 p-4 dark:border-gray-700 dark:bg-gray-900/40">
                <div className="text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">Market Context</div>
                <div className="mt-3 space-y-2 text-sm text-gray-700 dark:text-gray-300">
                  <div>Current price: {formatUsd(token.exchange_rate)}</div>
                  <div>24h volume: {formatUsd(token.volume_24h)}</div>
                  <div>Market cap: {formatUsd(token.circulating_market_cap)}</div>
                  <div>Visible liquidity: {formatUsd(token.liquidity_usd)}</div>
                  <TokenLiquidityStack market={aggregationMarketData ?? {}} verboseCashInBank />
                  {aggregationMarketData?.supplyNostroMatch ? (
                    <div>
                      {formatTotalSupplyHoBackingLabel(
                        aggregationMarketData.totalSupplyUsd,
                        aggregationMarketData.supplyNostroMatch,
                      )}
                    </div>
                  ) : null}
                  <div>Valuation source: {token.price_source === 'token-aggregation' ? 'live token aggregation' : token.price_source || 'unavailable'}</div>
                  <div>Market snapshot: {token.market_updated_at ? formatTimestamp(token.market_updated_at) : 'Unavailable'}</div>
                  <MarketEvidenceNote
                    source={token.price_source}
                    lastUpdated={token.market_updated_at}
                    method="Merged Blockscout token profile with token aggregation price, volume, and visible-liquidity fields where available."
                  />
                </div>
              </div>
              <div className="rounded-2xl border border-gray-200 bg-gray-50 p-4 dark:border-gray-700 dark:bg-gray-900/40">
                <div className="text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">Liquidity & Distribution</div>
                <div className="mt-3 space-y-2 text-sm text-gray-700 dark:text-gray-300">
                  <div>Related pools: {formatInteger(liquiditySummary.poolCount)}</div>
                  <div>Total visible TVL: {formatUsd(liquiditySummary.totalTvl)}</div>
                  <div>Largest visible holder: {holderConcentration != null ? `${holderConcentration}% of supply` : 'Unavailable'}</div>
                </div>
              </div>
              <div className="rounded-2xl border border-gray-200 bg-gray-50 p-4 dark:border-gray-700 dark:bg-gray-900/40">
                <div className="text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">Transfer Activity</div>
                <div className="mt-3 space-y-2 text-sm text-gray-700 dark:text-gray-300">
                  <div>Recent transfer sample: {formatInteger(transferFlowSummary.sampleSize)}</div>
                  <div>Unique senders: {formatInteger(transferFlowSummary.uniqueSenders)}</div>
                  <div>Unique recipients: {formatInteger(transferFlowSummary.uniqueRecipients)}</div>
                </div>
              </div>
              <div className="rounded-2xl border border-gray-200 bg-gray-50 p-4 dark:border-gray-700 dark:bg-gray-900/40">
                <div className="text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">Trust Signals</div>
                <div className="mt-3 flex flex-wrap gap-2">
                  {trustSummary.length > 0 ? trustSummary.map((signal) => (
                    <EntityBadge key={signal} label={signal} tone="info" className="normal-case tracking-normal" />
                  )) : (
                    <span className="text-sm text-gray-600 dark:text-gray-400">No strong trust signals are available yet beyond the base token profile.</span>
                  )}
                </div>
              </div>
            </div>
          </Card>
          </TabPanel>

          <TabPanel idPrefix={TOKEN_DETAIL_TABS_ID} tabId="standards" activeTab={activeTab}>
          {gruProfile ? <GruStandardsCard profile={gruProfile} /> : null}

          {gruExplorerMetadata ? (
            <Card title="x402 And ISO-20022 Posture">
              <div className="grid gap-4 lg:grid-cols-2">
                <div className="rounded-2xl border border-gray-200 bg-gray-50 p-4 dark:border-gray-700 dark:bg-gray-900/40">
                  <div className="text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">x402 readiness</div>
                  <div className="mt-3 flex flex-wrap gap-2">
                    <PostureBadge label={gruExplorerMetadata.x402Ready ? 'x402 ready' : 'x402 not ready'} tone={gruExplorerMetadata.x402Ready ? 'success' : 'warning'} />
                    {gruExplorerMetadata.x402PreferredVersion ? <EntityBadge label={`preferred ${gruExplorerMetadata.x402PreferredVersion}`} tone="info" /> : null}
                    {gruExplorerMetadata.canonicalForwardVersion ? <PostureBadge label={`forward ${gruExplorerMetadata.canonicalForwardVersion}`} tone="success" /> : null}
                  </div>
                  <div className="mt-3 text-sm text-gray-600 dark:text-gray-400">
                    {gruExplorerMetadata.x402Ready
                      ? 'This asset is modeled as payment-ready in the GRU explorer posture, meaning the preferred version exposes the signature and domain surfaces needed for x402-style settlement flows.'
                      : 'This asset is not currently marked as x402-ready in the local explorer intelligence layer.'}
                  </div>
                </div>
                <div className="rounded-2xl border border-gray-200 bg-gray-50 p-4 dark:border-gray-700 dark:bg-gray-900/40">
                  <div className="text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">ISO-20022 and governance</div>
                  <div className="mt-3 flex flex-wrap gap-2">
                    <PostureBadge label={gruExplorerMetadata.iso20022Ready ? 'ISO-20022 aligned' : 'ISO-20022 unclear'} tone={gruExplorerMetadata.iso20022Ready ? 'success' : 'warning'} />
                    {gruExplorerMetadata.currencyCode ? <EntityBadge label={gruExplorerMetadata.currencyCode} tone="neutral" /> : null}
                  </div>
                  <div className="mt-3 text-sm text-gray-600 dark:text-gray-400">
                    {gruExplorerMetadata.iso20022Ready
                      ? 'The local GRU metadata for this asset treats it as part of the ISO-20022-aligned settlement model, with governance, supervision, disclosure, and reporting posture expected around the token surface.'
                      : 'The explorer does not currently have a strong ISO-20022 posture signal for this asset.'}
                  </div>
                  <div className="mt-3 flex flex-wrap gap-3 text-sm">
                    <Link href="/docs/posture-glossary" className="text-primary-600 hover:underline">
                      Posture glossary →
                    </Link>
                    <Link href="/docs/gru" className="text-primary-600 hover:underline">
                      GRU guide →
                    </Link>
                    <Link href="/docs/transaction-review" className="text-primary-600 hover:underline">
                      Transaction review guide →
                    </Link>
                    <Link href="/docs" className="text-primary-600 hover:underline">
                      General docs →
                    </Link>
                  </div>
                </div>
              </div>
            </Card>
          ) : null}

          {gruExplorerMetadata && gruExplorerMetadata.otherNetworks.length > 0 ? (
            <Card title="Other Networks">
              <div className="space-y-4">
                <p className="text-sm text-gray-600 dark:text-gray-400">
                  These are sibling representations or settlement counterparts for the same GRU asset family on other networks, drawn from the local public-network overlay and mapping posture used by this workspace.
                </p>
                <div className="space-y-3">
                  {gruExplorerMetadata.otherNetworks.map((network) => (
                    <div key={`${network.chainId}-${network.symbol}-${network.address}`} className="rounded-2xl border border-gray-200 bg-gray-50 p-4 dark:border-gray-700 dark:bg-gray-900/40">
                      <div className="flex flex-wrap items-center gap-2">
                        <EntityBadge label={network.chainName} tone="neutral" className="normal-case tracking-normal" />
                        <EntityBadge label={network.symbol} tone="info" />
                        <EntityBadge label={`chain ${network.chainId}`} tone="warning" />
                      </div>
                      <div className="mt-3 break-all text-sm text-gray-900 dark:text-white">{network.address}</div>
                      {network.notes ? <div className="mt-2 text-sm text-gray-600 dark:text-gray-400">{network.notes}</div> : null}
                      <div className="mt-3 flex flex-wrap gap-3 text-sm">
                        {network.explorerUrl ? (
                          <a href={network.explorerUrl} target="_blank" rel="noopener noreferrer" className="text-primary-600 hover:underline">
                            Open network explorer →
                          </a>
                        ) : null}
                        <Link href={`/search?q=${encodeURIComponent(network.symbol)}`} className="text-primary-600 hover:underline">
                          Search symbol →
                        </Link>
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            </Card>
          ) : null}
          </TabPanel>

          <TabPanel idPrefix={TOKEN_DETAIL_TABS_ID} tabId="holders" activeTab={activeTab}>
          <Card title="Top Holders">
            <Table
              layout="tabular"
              columns={holderColumns}
              data={pagedHolders}
              emptyMessage="No holder data was available for this token."
              keyExtractor={(holder) => holder.address}
            />
            <PaginationControls page={holderPage} pageCount={holderPageCount} onPageChange={setHolderPage} label="Holders" />
          </Card>
          </TabPanel>

          <TabPanel idPrefix={TOKEN_DETAIL_TABS_ID} tabId="transfers" activeTab={activeTab}>
          <Card title="Recent Transfers">
            {gruExplorerMetadata ? (
              <div className="mb-4 flex flex-wrap items-center gap-3 text-sm text-gray-600 dark:text-gray-400">
                <span>
                  This token is tracked with GRU posture, so the transfer sample below can be read alongside its standards and transaction review guidance.
                </span>
                <Link href="/docs/gru" className="text-primary-600 hover:underline">
                  GRU guide →
                </Link>
                <Link href="/docs/transaction-review" className="text-primary-600 hover:underline">
                  Transaction review guide →
                </Link>
              </div>
            ) : null}
            <Table
              columns={transferColumns}
              data={pagedTransfers}
              emptyMessage="No recent token transfers were available."
              keyExtractor={(transfer) => `${transfer.transaction_hash}-${transfer.value}-${transfer.from_address}`}
            />
            <PaginationControls page={transferPage} pageCount={transferPageCount} onPageChange={setTransferPage} label="Transfers" />
          </Card>
          </TabPanel>

          <TabPanel idPrefix={TOKEN_DETAIL_TABS_ID} tabId="liquidity" activeTab={activeTab}>
          <Card title="Related Liquidity">
            <Table
              columns={poolColumns}
              data={pagedPools}
              emptyMessage="No related liquidity pools were exposed through mission control for this token."
              keyExtractor={(pool) => pool.address}
            />
            <PaginationControls page={poolPage} pageCount={poolPageCount} onPageChange={setPoolPage} label="Pools" />
          </Card>
          </TabPanel>
        </div>
      )}
    </div>
  )
}
