import { useCallback, useEffect, useState } from 'react'
import { Card } from '@/libs/frontend-ui-primitives/Card'
import Link from 'next/link'
import { blocksApi, type Block } from '@/services/api/blocks'
import {
  statsApi,
  type ExplorerRecentActivitySnapshot,
  type ExplorerStats,
  type ExplorerTransactionTrendPoint,
} from '@/services/api/stats'
import {
  missionControlApi,
  summarizeMissionControlRelay,
  type MissionControlBridgeStatusResponse,
  type MissionControlRelaySummary,
} from '@/services/api/missionControl'
import { loadDashboardData } from '@/utils/dashboard'
import EntityBadge from '@/components/common/EntityBadge'
import { formatRelativeAge, formatTimestamp, formatWeiAsEth } from '@/utils/format'
import { transactionsApi, type Transaction } from '@/services/api/transactions'
import { summarizeChainActivity } from '@/utils/activityContext'
import ActivityContextPanel from '@/components/common/ActivityContextPanel'
import FreshnessTrustNote from '@/components/common/FreshnessTrustNote'
import { Explain, useUiMode } from '@/components/common/UiModeContext'
import { resolveEffectiveFreshness, shouldExplainEmptyHeadBlocks } from '@/utils/explorerFreshness'

type HomeStats = ExplorerStats

interface HomePageProps {
  initialStats?: HomeStats | null
  initialRecentBlocks?: Block[]
  initialRecentTransactions?: Transaction[]
  initialTransactionTrend?: ExplorerTransactionTrendPoint[]
  initialActivitySnapshot?: ExplorerRecentActivitySnapshot | null
  initialBridgeStatus?: MissionControlBridgeStatusResponse | null
  initialRelaySummary?: MissionControlRelaySummary | null
}

function resolveRelaySeverityLabel(status?: string, tone?: 'normal' | 'warning' | 'danger') {
  const normalized = String(status || '').toLowerCase()
  if (normalized === 'down') return 'down'
  if (normalized === 'degraded' || normalized === 'stale' || normalized === 'stopped') return 'degraded'
  if (normalized === 'paused') return 'paused'
  if (['starting', 'unknown', 'snapshot-error'].includes(normalized) || tone === 'warning') return 'warning'
  return 'operational'
}

function resolveRelayBadgeTone(status?: string, tone?: 'normal' | 'warning' | 'danger'): 'success' | 'info' | 'warning' {
  const severity = resolveRelaySeverityLabel(status, tone)
  if (severity === 'operational') return 'success'
  if (severity === 'warning') return 'info'
  return 'warning'
}

function getLaneImpactNote(key: string, severity: string) {
  if (key === 'mainnet_weth' && severity === 'paused') {
    return 'New Mainnet WETH bridge deliveries are currently queued while this lane is paused. Core Chain 138 browsing remains available.'
  }
  if (key === 'avax' || key === 'avalanche' || key === 'avax_cw' || key === 'avax_to_138') {
    return severity === 'operational'
      ? 'Avalanche lane visibility is healthy.'
      : 'Affects Avalanche-connected bridge visibility and routing. Core Chain 138 browsing remains available.'
  }
  if (key.includes('mainnet')) {
    return severity === 'operational'
      ? 'Ethereum Mainnet relay visibility is healthy.'
      : 'Affects Mainnet bridge posture and route visibility more than core Chain 138 browsing.'
  }
  if (key.includes('bsc')) {
    return severity === 'operational'
      ? 'BSC relay visibility is healthy.'
      : 'Affects BSC-connected bridge posture and route visibility more than core Chain 138 browsing.'
  }
  return severity === 'operational'
    ? 'Relay lane visibility is healthy.'
    : 'Affects this relay lane more than core Chain 138 chain browsing.'
}

function formatObservabilityValue(value: number | null, formatter: (value: number) => string) {
  if (value == null) {
    return { value: 'Unknown', note: 'Not reported by the current public stats payload.' }
  }
  return { value: formatter(value), note: 'Current public stats payload.' }
}

function formatGasPriceGwei(value: number) {
  if (!Number.isFinite(value)) return 'Unknown'
  return `${value.toFixed(3)} gwei`
}

function compactStatNote(guided: string, expert: string, mode: 'guided' | 'expert') {
  return mode === 'guided' ? guided : expert
}

export default function Home({
  initialStats = null,
  initialRecentBlocks = [],
  initialRecentTransactions = [],
  initialTransactionTrend = [],
  initialActivitySnapshot = null,
  initialBridgeStatus = null,
  initialRelaySummary = null,
}: HomePageProps) {
  const { mode } = useUiMode()
  const [stats, setStats] = useState<HomeStats | null>(initialStats)
  const [recentBlocks, setRecentBlocks] = useState<Block[]>(initialRecentBlocks)
  const [transactionTrend, setTransactionTrend] = useState<ExplorerTransactionTrendPoint[]>(initialTransactionTrend)
  const [recentTransactions, setRecentTransactions] = useState<Transaction[]>(initialRecentTransactions)
  const [activitySnapshot, setActivitySnapshot] = useState<ExplorerRecentActivitySnapshot | null>(initialActivitySnapshot)
  const [bridgeStatus, setBridgeStatus] = useState<MissionControlBridgeStatusResponse | null>(initialBridgeStatus)
  const [relaySummary, setRelaySummary] = useState<MissionControlRelaySummary | null>(initialRelaySummary)
  const [missionExpanded, setMissionExpanded] = useState(false)
  const [relayExpanded, setRelayExpanded] = useState(false)
  const [relayPage, setRelayPage] = useState(1)
  const [relayFeedState, setRelayFeedState] = useState<'connecting' | 'live' | 'fallback'>(
    initialRelaySummary || initialBridgeStatus ? 'fallback' : 'connecting'
  )
  const chainId = parseInt(process.env.NEXT_PUBLIC_CHAIN_ID || '138')
  const latestBlock = stats?.latest_block ?? recentBlocks[0]?.number ?? null

  const loadDashboard = useCallback(async () => {
    const dashboardData = await loadDashboardData({
      loadStats: () => statsApi.get(),
      loadRecentTransactionTrend: () => statsApi.getTransactionTrend(),
      loadRecentBlocks: async () => {
        const response = await blocksApi.list({
          chain_id: chainId,
          page: 1,
          page_size: 10,
        })
        return response.data
      },
      onError: (scope, error) => {
        if (process.env.NODE_ENV !== 'production') {
          console.warn(`Failed to load dashboard ${scope}:`, error)
        }
      },
    })

    setStats((current) => dashboardData.stats ?? current)
    setRecentBlocks((current) => (dashboardData.recentBlocks.length > 0 ? dashboardData.recentBlocks : current))
    setTransactionTrend((current) =>
      (dashboardData.recentTransactionTrend || []).length > 0 ? dashboardData.recentTransactionTrend : current,
    )
  }, [chainId])

  useEffect(() => {
    loadDashboard()
  }, [loadDashboard])

  useEffect(() => {
    let cancelled = false

    statsApi.getRecentActivitySnapshot().then((snapshot) => {
      if (!cancelled) {
        setActivitySnapshot(snapshot)
      }
    }).catch((error) => {
      if (!cancelled && process.env.NODE_ENV !== 'production') {
        console.warn('Failed to load recent activity snapshot:', error)
      }
    })

    return () => {
      cancelled = true
    }
  }, [])

  useEffect(() => {
    let cancelled = false

    if (recentTransactions.length > 0) {
      return () => {
        cancelled = true
      }
    }

    transactionsApi.listSafe(chainId, 1, 5)
      .then(({ ok, data }) => {
        if (!cancelled && ok && data.length > 0) {
          setRecentTransactions(data)
        }
      })
      .catch((error) => {
        if (!cancelled && process.env.NODE_ENV !== 'production') {
          console.warn('Failed to load recent transactions for activity context:', error)
        }
      })

    return () => {
      cancelled = true
    }
  }, [chainId, recentTransactions.length])

  useEffect(() => {
    let cancelled = false

    const loadSnapshot = async () => {
      try {
        const status = await missionControlApi.getBridgeStatus()
        if (!cancelled) {
          setBridgeStatus(status)
          setRelaySummary(summarizeMissionControlRelay(status))
        }
      } catch (error) {
        if (!cancelled && process.env.NODE_ENV !== 'production') {
          console.warn('Failed to load mission control relay summary:', error)
        }
      }
    }

    loadSnapshot()

    const unsubscribe = missionControlApi.subscribeBridgeStatus(
      (status) => {
        if (!cancelled) {
          setBridgeStatus(status)
          setRelaySummary(summarizeMissionControlRelay(status))
          setRelayFeedState('live')
        }
      },
      (error) => {
        if (!cancelled) {
          setRelayFeedState('fallback')
        }
        if (process.env.NODE_ENV !== 'production') {
          console.warn('Mission control live stream update issue:', error)
        }
      }
    )

    return () => {
      cancelled = true
      unsubscribe()
    }
  }, [])

  const relayToneClasses =
    relaySummary?.tone === 'danger'
      ? 'border-red-200 bg-red-50 text-red-900 dark:border-red-900/60 dark:bg-red-950/40 dark:text-red-100'
      : relaySummary?.tone === 'warning'
        ? 'border-amber-200 bg-amber-50 text-amber-900 dark:border-amber-900/60 dark:bg-amber-950/40 dark:text-amber-100'
        : 'border-sky-200 bg-sky-50 text-sky-900 dark:border-sky-900/60 dark:bg-sky-950/40 dark:text-sky-100'
  const latestTrendPoint = transactionTrend[0] || null
  const peakTrendPoint = transactionTrend.reduce<ExplorerTransactionTrendPoint | null>(
    (best, point) => (!best || point.transaction_count > best.transaction_count ? point : best),
    null,
  )
  const averageBlockTimeSeconds =
    stats?.average_block_time_ms != null ? Math.round(stats.average_block_time_ms / 1000) : null
  const averageGasPriceGwei = stats?.average_gas_price_gwei ?? null
  const transactionsToday = stats?.transactions_today ?? null
  const networkUtilization =
    stats?.network_utilization_percentage != null ? Math.round(stats.network_utilization_percentage) : null
  const relayAttentionCount = relaySummary?.items.filter((item) => item.tone !== 'normal').length || 0
  const relayOperationalCount = relaySummary?.items.filter((item) => item.tone === 'normal').length || 0
  const relayPageSize = 4
  const relayPageCount = relaySummary?.items.length ? Math.max(1, Math.ceil(relaySummary.items.length / relayPageSize)) : 1
  const relayVisibleItems = relaySummary?.items.slice((relayPage - 1) * relayPageSize, relayPage * relayPageSize) || []
  const chainStatus = bridgeStatus?.data?.chains?.['138'] || (bridgeStatus?.data?.chains ? Object.values(bridgeStatus.data.chains)[0] : null)
  const checkedAt = bridgeStatus?.data?.checked_at || null
  const missionHeadline = relaySummary
    ? relaySummary.tone === 'danger'
      ? 'Relay lanes need attention'
      : relaySummary.tone === 'warning'
        ? 'Relay lanes are degraded'
        : 'Relay lanes are operational'
    : chainStatus?.status === 'operational'
      ? 'Chain 138 public health is operational'
      : chainStatus?.status
        ? `Chain 138 public health is ${chainStatus.status}`
        : 'Mission control snapshot available'
  const missionDescription = (() => {
    const parts: string[] = []
    if (checkedAt) parts.push(`Last checked ${formatTimestamp(checkedAt)}`)
    if (chainStatus?.head_age_sec != null) parts.push(`head age ${Math.round(chainStatus.head_age_sec)}s`)
    if (chainStatus?.latency_ms != null) parts.push(`RPC latency ${Math.round(chainStatus.latency_ms)}ms`)
    if (relaySummary?.items.length) {
      parts.push(`${relayOperationalCount} operational lanes`)
      if (relayAttentionCount > 0) parts.push(`${relayAttentionCount} flagged lanes`)
    } else {
      parts.push('relay inventory unavailable in the current snapshot')
    }
    return parts.join(' · ')
  })()
  const snapshotAgeLabel = checkedAt ? formatRelativeAge(checkedAt) : 'Unknown'
  const chainVisibilityState =
    chainStatus?.head_age_sec != null
      ? chainStatus.head_age_sec <= 30
        ? 'current'
        : chainStatus.head_age_sec <= 120
          ? 'slightly delayed'
          : 'stale'
      : 'unknown'
  const snapshotReason =
    relayFeedState === 'fallback'
      ? 'Live indexing or relay streaming is not currently attached to this homepage card.'
      : relayFeedState === 'live'
        ? 'Receiving named live mission-control events.'
        : 'Negotiating the mission-control event stream.'
  const snapshotScope =
    bridgeStatus?.data?.mode?.scope
      ? bridgeStatus.data.mode.scope.replaceAll('_', ' ')
      : relayFeedState === 'fallback'
        ? 'This primarily affects relay-lane freshness on the homepage card. Core explorer pages and public RPC health can still be current.'
        : relayFeedState === 'live'
          ? 'Relay and chain status are arriving through live mission-control events.'
          : 'Homepage status is waiting for the mission-control stream to settle.'
  const missionImpact = relayAttentionCount > 0
    ? 'Some cross-chain relay lanes are degraded. Core Chain 138 operation remains visible through the public RPC and explorer surfaces.'
    : 'Core Chain 138 operation and the visible relay lanes are currently healthy.'
  const activityContext = summarizeChainActivity({
    blocks: recentBlocks,
    transactions: recentTransactions,
    latestBlockNumber: latestBlock,
    latestBlockTimestamp: recentBlocks[0]?.timestamp ?? null,
    freshness: resolveEffectiveFreshness(stats, bridgeStatus),
    diagnostics: stats?.diagnostics ?? bridgeStatus?.data?.diagnostics ?? null,
  })
  const txCompleteness = stats?.completeness?.transactions_feed || bridgeStatus?.data?.subsystems?.tx_index?.completeness || null
  const blockCompleteness = stats?.completeness?.blocks_feed || null
  const statsGeneratedAt = stats?.sampling?.stats_generated_at || null
  const missionMode = bridgeStatus?.data?.mode || null
  const freshnessIssues = Object.entries({
    ...(bridgeStatus?.data?.sampling?.issues || {}),
    ...(stats?.sampling?.issues || {}),
  })
  const latestTransactionAgeLabel = activityContext.latest_transaction_timestamp
    ? formatRelativeAge(activityContext.latest_transaction_timestamp)
    : 'Unknown'
  const latestTransactionFreshness =
    activityContext.latest_transaction_age_seconds == null
      ? 'Latest transaction freshness is unavailable.'
      : activityContext.latest_transaction_age_seconds <= 15 * 60
        ? 'Recent visible transactions are close to the chain head.'
        : activityContext.latest_transaction_age_seconds <= 3 * 60 * 60
          ? 'The chain head is current, but visible transactions are older than the current tip.'
          : 'The chain head is current, but visible transactions are substantially older than the current tip.'
  const severityBreakdown = {
    down: relaySummary?.items.filter((item) => item.status === 'down').length || 0,
    degraded: relaySummary?.items.filter((item) => item.status === 'degraded').length || 0,
    warning:
      relaySummary?.items.filter((item) => ['paused', 'starting', 'unknown', 'snapshot-error'].includes(item.status)).length || 0,
  }
  const avgBlockTimeSummary = formatObservabilityValue(
    averageBlockTimeSeconds,
    (value) => `${value}s`,
  )
  const avgGasPriceSummary = formatObservabilityValue(
    averageGasPriceGwei,
    formatGasPriceGwei,
  )
  const transactionsTodaySummary = formatObservabilityValue(
    transactionsToday,
    (value) => value.toLocaleString(),
  )
  const networkUtilizationSummary =
    networkUtilization == null
      ? { value: 'Unknown', note: 'Utilization is not reported by the current public stats payload.' }
      : networkUtilization === 0
        ? { value: '0%', note: 'No utilization was reported in the latest visible stats sample.' }
        : { value: `${networkUtilization}%`, note: 'Current public stats payload.' }
  const missionCollapsedSummary = relaySummary
    ? `${missionHeadline} · ${relayOperationalCount} operational`
    : `${missionHeadline}${chainStatus?.status ? ` · chain 138 ${chainStatus.status}` : ''}`
  const primaryMetricCards = [
    {
      label: 'Latest Block',
      value: latestBlock != null ? latestBlock.toLocaleString() : 'Unavailable',
      note: activityContext.latest_block_timestamp
        ? compactStatNote(
            `Head freshness ${formatRelativeAge(activityContext.latest_block_timestamp)}${blockCompleteness ? ` · ${blockCompleteness}` : ''}`,
            formatRelativeAge(activityContext.latest_block_timestamp),
            mode,
          )
        : compactStatNote('Head freshness unavailable.', 'Unavailable', mode),
    },
    {
      label: 'Total Blocks',
      value: stats ? stats.total_blocks.toLocaleString() : 'Unavailable',
      note: compactStatNote('Visible public explorer block count.', 'Explorer block count', mode),
    },
    {
      label: 'Total Transactions',
      value: stats ? stats.total_transactions.toLocaleString() : 'Unavailable',
      note: compactStatNote('Visible indexed explorer transaction count.', 'Indexed tx count', mode),
    },
    {
      label: 'Total Addresses',
      value: stats ? stats.total_addresses.toLocaleString() : 'Unavailable',
      note: compactStatNote('Current public explorer address count.', 'Address count', mode),
    },
  ]
  const secondaryMetricCards = [
    {
      label: 'Avg Block Time',
      value: avgBlockTimeSummary.value,
      note: compactStatNote(avgBlockTimeSummary.note, averageBlockTimeSeconds != null ? 'Reported' : 'Unavailable', mode),
    },
    {
      label: 'Avg Gas Price',
      value: avgGasPriceSummary.value,
      note: compactStatNote(avgGasPriceSummary.note, averageGasPriceGwei != null ? 'Reported' : 'Unavailable', mode),
    },
    {
      label: 'Transactions Today',
      value: transactionsTodaySummary.value,
      note: compactStatNote(transactionsTodaySummary.note, transactionsToday != null ? 'Reported' : 'Unavailable', mode),
    },
    {
      label: 'Network Utilization',
      value: networkUtilizationSummary.value,
      note: compactStatNote(networkUtilizationSummary.note, networkUtilization != null ? 'Latest stats sample' : 'Unavailable', mode),
    },
  ]
  const activityMetricCards = [
    {
      label: 'Latest Transaction',
      value: activityContext.latest_transaction_block_number != null ? `#${activityContext.latest_transaction_block_number}` : 'Unknown',
      note: latestTransactionAgeLabel,
      detail: `Latest visible transaction freshness${txCompleteness ? ` · ${txCompleteness}` : ''}.`,
    },
    {
      label: 'Last Non-Empty Block',
      value: activityContext.last_non_empty_block_number != null ? `#${activityContext.last_non_empty_block_number}` : 'Unknown',
      note: formatRelativeAge(activityContext.last_non_empty_block_timestamp),
      detail:
        activityContext.latest_transaction_block_number != null &&
        activityContext.last_non_empty_block_number != null &&
        activityContext.latest_transaction_block_number === activityContext.last_non_empty_block_number
          ? 'Matches the latest visible transaction block.'
          : 'Most recent block with at least one indexed transaction.',
    },
    {
      label: 'Block Gap',
      value:
        activityContext.block_gap_to_latest_transaction != null
          ? activityContext.block_gap_to_latest_transaction.toLocaleString()
          : 'Unknown',
      note:
        activityContext.block_gap_to_latest_transaction != null
          ? `${activityContext.block_gap_to_latest_transaction.toLocaleString()} blocks behind tip`
          : 'Gap unavailable',
      detail: 'Difference between the current tip and the latest visible transaction block.',
    },
  ]

  useEffect(() => {
    setRelayPage(1)
  }, [relaySummary?.items.length])

  useEffect(() => {
    if (relayPage > relayPageCount) {
      setRelayPage(relayPageCount)
    }
  }, [relayPage, relayPageCount])

  return (
    <main className="container mx-auto px-4 py-6 sm:py-8">
      {(relaySummary || bridgeStatus) && (
        <Card
          className={`border shadow-sm ${relayToneClasses} ${missionExpanded ? 'mb-6' : 'mb-4 !p-2 sm:!p-2'}`}
        >
          <div className={missionExpanded ? 'flex flex-col gap-5' : 'flex'}>
            <button
              type="button"
              onClick={() => setMissionExpanded((current) => !current)}
              aria-expanded={missionExpanded}
              className={`flex w-full items-center justify-between text-left shadow-sm backdrop-blur transition hover:bg-white/70 dark:border-white/10 dark:bg-black/10 dark:hover:bg-black/20 ${
                missionExpanded
                  ? 'gap-3 rounded-xl border border-white/40 bg-white/55 px-4 py-2.5'
                  : 'gap-2 rounded-lg border border-white/35 bg-white/50 px-3 py-2'
              }`}
            >
              <div className={`min-w-0 opacity-90 ${missionExpanded ? 'text-sm leading-6 sm:text-base' : 'text-sm leading-5'}`}>
                <span className="font-semibold uppercase tracking-[0.22em] opacity-75">Mission Control</span>
                <span className={missionExpanded ? 'mx-2 opacity-40' : 'mx-1.5 opacity-40'}>•</span>
                <span>{missionCollapsedSummary}</span>
              </div>
              <div
                className={`shrink-0 font-semibold opacity-80 ${mode === 'guided' ? 'text-sm' : 'text-lg leading-none'}`}
                aria-label={missionExpanded ? 'Hide details' : 'Show details'}
                title={missionExpanded ? 'Hide details' : 'Show details'}
              >
                {mode === 'guided' ? (missionExpanded ? 'Hide details' : 'Show details') : (missionExpanded ? '\u2303' : '\u2304')}
              </div>
            </button>

            {missionExpanded ? (
              <>
                <div className="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
                  <div className="max-w-3xl">
                    <div className="mt-2 text-xl font-semibold sm:text-2xl">{missionHeadline}</div>
                    <p className="mt-2 text-sm leading-6 opacity-90 sm:text-base">
                      {missionDescription}.
                      {mode === 'guided'
                        ? ' This surface summarizes the public chain and relay posture in a compact operator-friendly format.'
                        : ' Public chain and relay posture.'}
                    </p>
                    <p className="mt-2 text-sm leading-6 opacity-90 sm:text-base">
                      {missionImpact}
                    </p>
                    <Explain>
                      <p className="mt-2 text-sm leading-6 opacity-90 sm:text-base">
                        {latestTransactionFreshness}
                      </p>
                    </Explain>
                    <div className="mt-4 flex flex-wrap gap-2">
                      <EntityBadge
                        label={relayFeedState === 'live' ? 'live sse' : relayFeedState === 'fallback' ? 'snapshot' : 'connecting'}
                        tone={relayFeedState === 'fallback' ? 'warning' : relayFeedState === 'connecting' ? 'info' : 'success'}
                      />
                      {relaySummary ? (
                        <EntityBadge
                          label={relaySummary.tone === 'danger' ? 'attention needed' : relaySummary.tone === 'warning' ? 'degraded' : 'operational'}
                          tone={relaySummary.tone === 'danger' ? 'warning' : relaySummary.tone === 'warning' ? 'info' : 'success'}
                        />
                      ) : null}
                      {chainStatus?.status ? (
                        <EntityBadge
                          label={`chain 138 ${chainStatus.status}`}
                          tone={chainStatus.status === 'operational' ? 'success' : 'warning'}
                        />
                      ) : null}
                      <EntityBadge label={`${relayOperationalCount} operational`} tone="success" />
                      {severityBreakdown.down > 0 ? <EntityBadge label={`${severityBreakdown.down} down`} tone="warning" /> : null}
                      {severityBreakdown.degraded > 0 ? <EntityBadge label={`${severityBreakdown.degraded} degraded`} tone="info" /> : null}
                      {severityBreakdown.warning > 0 ? <EntityBadge label={`${severityBreakdown.warning} warning`} tone="warning" /> : null}
                    </div>
                  </div>

                  <div className="grid min-w-[220px] gap-3 sm:grid-cols-2 lg:w-[290px] lg:grid-cols-1">
                    <div className="rounded-2xl border border-white/40 bg-white/50 p-4 shadow-sm backdrop-blur dark:border-white/10 dark:bg-black/10">
                      <div className="text-xs font-semibold uppercase tracking-wide opacity-70">Live Feed</div>
                      <div className="mt-2 text-lg font-semibold">
                        {missionMode?.kind === 'live'
                          ? 'Streaming'
                          : missionMode?.kind === 'snapshot' || relayFeedState === 'fallback'
                            ? 'Snapshot mode'
                            : 'Connecting'}
                      </div>
                      <div className="mt-1 text-sm opacity-80">
                        {`${statsGeneratedAt ? `Snapshot updated ${formatRelativeAge(statsGeneratedAt)}.` : `Snapshot updated ${snapshotAgeLabel}.`} ${
                          missionMode?.reason ? missionMode.reason.replaceAll('_', ' ') : snapshotReason
                        }`}
                      </div>
                      <div className="mt-2 text-xs opacity-75">
                        {snapshotScope}
                      </div>
                      {freshnessIssues.length > 0 ? (
                        <div className="mt-2 text-xs opacity-75">
                          Freshness diagnostics: {freshnessIssues.map(([key]) => key.replaceAll('_', ' ')).join(', ')}.
                        </div>
                      ) : null}
                    </div>
                    <div className="flex flex-col gap-2">
                      <Link
                        href="/bridge"
                        className="inline-flex items-center justify-center rounded-xl bg-gray-900 px-4 py-2.5 text-sm font-semibold text-white hover:bg-black dark:bg-white dark:text-gray-900 dark:hover:bg-gray-100"
                      >
                        Open bridge monitoring
                      </Link>
                      <Link
                        href="/operations"
                        className="inline-flex items-center justify-center rounded-xl border border-current/20 px-4 py-2.5 text-sm font-semibold hover:bg-white/40 dark:hover:bg-black/10"
                      >
                        Open operations hub
                      </Link>
                    </div>
                  </div>
                </div>

                {chainStatus ? (
                  <div className="grid gap-3 md:grid-cols-3">
                    <div className="rounded-2xl border border-white/40 bg-white/55 p-4 shadow-sm backdrop-blur dark:border-white/10 dark:bg-black/10">
                      <div className="text-xs font-semibold uppercase tracking-wide opacity-70">Chain 138 Status</div>
                      <div className="mt-2 text-lg font-semibold">{chainStatus.status || 'unknown'}</div>
                      <div className="mt-1 text-sm opacity-80">{chainStatus.name || 'Defi Oracle Meta Mainnet'}</div>
                    </div>
                    <div className="rounded-2xl border border-white/40 bg-white/55 p-4 shadow-sm backdrop-blur dark:border-white/10 dark:bg-black/10">
                      <div className="text-xs font-semibold uppercase tracking-wide opacity-70">Head Age</div>
                      <div className="mt-2 text-lg font-semibold">
                        {chainStatus.head_age_sec != null ? `${Math.round(chainStatus.head_age_sec)}s` : 'Unknown'}
                      </div>
                      <div className="mt-1 text-sm opacity-80">Latest public RPC head freshness.</div>
                      <div className="mt-2 text-xs opacity-75">Chain visibility is currently {chainVisibilityState}.</div>
                    </div>
                    <div className="rounded-2xl border border-white/40 bg-white/55 p-4 shadow-sm backdrop-blur dark:border-white/10 dark:bg-black/10">
                      <div className="text-xs font-semibold uppercase tracking-wide opacity-70">RPC Latency</div>
                      <div className="mt-2 text-lg font-semibold">
                        {chainStatus.latency_ms != null ? `${Math.round(chainStatus.latency_ms)}ms` : 'Unknown'}
                      </div>
                      <div className="mt-1 text-sm opacity-80">Public Chain 138 RPC probe latency.</div>
                    </div>
                  </div>
                ) : null}

                {relaySummary?.items.length ? (
                  <div className="space-y-3">
                    <button
                      type="button"
                      onClick={() => setRelayExpanded((current) => !current)}
                      aria-expanded={relayExpanded}
                      className="flex w-full items-center justify-between gap-4 rounded-2xl border border-white/40 bg-white/55 p-4 text-left shadow-sm backdrop-blur transition hover:bg-white/70 dark:border-white/10 dark:bg-black/10 dark:hover:bg-black/20"
                    >
                      <div>
                        <div className="text-sm font-semibold">Relay lane status</div>
                        <p className="mt-1 text-sm leading-6 opacity-90">
                          {relaySummary.text}. {relaySummary.items.length} configured lanes.
                        </p>
                      </div>
                      <div className="shrink-0 text-sm font-semibold opacity-80">
                        {relayExpanded ? 'Hide lanes' : 'Show lanes'}
                      </div>
                    </button>

                    {relayExpanded ? (
                      <>
                        <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-2">
                          {relayVisibleItems.map((item) => (
                            <div
                              key={item.key}
                              className="rounded-2xl border border-white/40 bg-white/55 p-4 shadow-sm backdrop-blur dark:border-white/10 dark:bg-black/10"
                            >
                              <div className="flex items-start justify-between gap-3">
                                <div>
                                  <div className="text-sm font-semibold">{item.label}</div>
                                  <div className="mt-1 text-xs uppercase tracking-wide opacity-70">{item.status}</div>
                                </div>
                                <EntityBadge label={resolveRelaySeverityLabel(item.status, item.tone)} tone={resolveRelayBadgeTone(item.status, item.tone)} />
                              </div>
                              <p className="mt-3 text-sm leading-6 opacity-90">{item.text}</p>
                              <p className="mt-2 text-xs opacity-75">
                                {getLaneImpactNote(item.key, resolveRelaySeverityLabel(item.status, item.tone))}
                              </p>
                            </div>
                          ))}
                        </div>

                        {relayPageCount > 1 ? (
                          <div className="flex items-center justify-between gap-3 rounded-2xl border border-white/40 bg-white/40 px-4 py-3 text-sm shadow-sm backdrop-blur dark:border-white/10 dark:bg-black/10">
                            <button
                              type="button"
                              onClick={() => setRelayPage((current) => Math.max(1, current - 1))}
                              disabled={relayPage === 1}
                              className="rounded-lg border border-current/20 px-3 py-2 font-semibold disabled:cursor-not-allowed disabled:opacity-40"
                            >
                              Previous
                            </button>
                            <div className="text-center opacity-80">
                              Page {relayPage} of {relayPageCount}
                            </div>
                            <button
                              type="button"
                              onClick={() => setRelayPage((current) => Math.min(relayPageCount, current + 1))}
                              disabled={relayPage === relayPageCount}
                              className="rounded-lg border border-current/20 px-3 py-2 font-semibold disabled:cursor-not-allowed disabled:opacity-40"
                            >
                              Next
                            </button>
                          </div>
                        ) : null}
                      </>
                    ) : null}
                  </div>
                ) : (
                  <div className="rounded-2xl border border-white/40 bg-white/55 p-4 text-sm opacity-90 shadow-sm backdrop-blur dark:border-white/10 dark:bg-black/10">
                    The current mission-control snapshot does not include per-lane relay inventory. Chain health is still shown above, and the bridge monitoring page remains the canonical operator view.
                  </div>
                )}
                {relaySummary ? (
                  <div className="flex flex-wrap gap-2 text-sm opacity-80">
                    {severityBreakdown.down > 0 ? <EntityBadge label={`${severityBreakdown.down} down`} tone="warning" /> : null}
                    {severityBreakdown.degraded > 0 ? <EntityBadge label={`${severityBreakdown.degraded} degraded`} tone="info" /> : null}
                    {severityBreakdown.warning > 0 ? <EntityBadge label={`${severityBreakdown.warning} warning`} tone="warning" /> : null}
                  </div>
                ) : null}
              </>
            ) : null}
          </div>
        </Card>
      )}

      {stats && (
        <div className="mb-8 space-y-4">
          <div className="grid grid-cols-1 gap-3 sm:gap-4 md:grid-cols-4">
            {primaryMetricCards.map((card) => (
              <Card key={card.label}>
                <div className="text-sm text-gray-600 dark:text-gray-400">{card.label}</div>
                <div className="text-xl font-bold sm:text-2xl">{card.value}</div>
                <div className="mt-2 text-xs text-gray-500 dark:text-gray-400">{card.note}</div>
              </Card>
            ))}
          </div>

          <div className="grid grid-cols-1 gap-3 sm:gap-4 md:grid-cols-3">
            {activityMetricCards.map((card) => (
              <Card key={card.label}>
                <div className="text-sm text-gray-600 dark:text-gray-400">{card.label}</div>
                <div className="text-xl font-bold sm:text-2xl">{card.value}</div>
                <div className="mt-2 text-sm text-gray-700 dark:text-gray-300">{card.note}</div>
                <div className="mt-2 text-xs text-gray-500 dark:text-gray-400">{card.detail}</div>
              </Card>
            ))}
          </div>

          {mode === 'guided' ? (
            <div className="grid grid-cols-1 gap-3 sm:gap-4 md:grid-cols-4">
              {secondaryMetricCards.map((card) => (
                <Card key={card.label}>
                  <div className="text-sm text-gray-600 dark:text-gray-400">{card.label}</div>
                  <div className="text-xl font-bold sm:text-2xl">{card.value}</div>
                  <div className="mt-2 text-xs text-gray-500 dark:text-gray-400">{card.note}</div>
                </Card>
              ))}
            </div>
          ) : (
            <Card>
              <div className="flex flex-col gap-3 lg:flex-row lg:items-start lg:justify-between">
                <div>
                  <div className="text-sm font-semibold text-gray-900 dark:text-white">Telemetry Snapshot</div>
                  <div className="mt-1 text-xs text-gray-500 dark:text-gray-400">
                    Secondary public stats in a denser expert layout.
                  </div>
                </div>
                <div className="grid flex-1 gap-3 sm:grid-cols-2 xl:grid-cols-4">
                  {secondaryMetricCards.map((card) => (
                    <div key={card.label} className="rounded-2xl border border-gray-200 bg-gray-50/70 px-4 py-3 dark:border-gray-800 dark:bg-gray-900/40">
                      <div className="text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">{card.label}</div>
                      <div className="mt-1 text-lg font-semibold text-gray-900 dark:text-white">{card.value}</div>
                      <div className="mt-1 text-xs text-gray-500 dark:text-gray-400">{card.note}</div>
                    </div>
                  ))}
                </div>
              </div>
            </Card>
          )}
        </div>
      )}

      <div className="mb-8">
        <ActivityContextPanel
          context={activityContext}
          title="Freshness Interpretation"
          compact
        />
        <FreshnessTrustNote
          className="mt-3"
          context={activityContext}
          stats={stats}
          bridgeStatus={bridgeStatus}
          scopeLabel={
            mode === 'guided'
              ? 'Homepage status combines chain freshness, transaction visibility, and mission-control posture.'
              : 'Homepage freshness view aligns chain, transaction, and mission-control posture.'
          }
        />
      </div>

      {!stats && (
        <Card className="mb-8">
          <p className="text-sm text-gray-600 dark:text-gray-400">
            Live network stats are temporarily unavailable. Recent blocks and explorer tools are still available below.
          </p>
        </Card>
      )}

      <Card title="Recent Blocks">
        {recentBlocks.length === 0 ? (
          <p className="text-sm text-gray-600 dark:text-gray-400">
            Recent blocks are unavailable right now.
          </p>
        ) : (
          <div className="space-y-2">
            {shouldExplainEmptyHeadBlocks(recentBlocks, activityContext) ? (
              <p className="rounded-xl border border-amber-200 bg-amber-50/70 px-3 py-2 text-sm text-amber-900 dark:border-amber-900/40 dark:bg-amber-950/20 dark:text-amber-100">
                Recent head blocks are currently empty; use the latest transaction block for recent visible activity.
              </p>
            ) : null}
            {recentBlocks.map((block) => (
              <div key={block.number} className="flex flex-col gap-1.5 border-b border-gray-200 py-2 last:border-0 dark:border-gray-700 sm:flex-row sm:items-center sm:justify-between">
                <div>
                  <Link href={`/blocks/${block.number}`} className="text-primary-600 hover:underline">
                    Block #{block.number}
                  </Link>
                  <div className="mt-1 text-xs text-gray-500 dark:text-gray-400">
                    Mined by{' '}
                    <Link href={`/addresses/${block.miner}`} className="text-primary-600 hover:underline">
                      {block.miner.slice(0, 10)}...{block.miner.slice(-6)}
                    </Link>
                  </div>
                </div>
                <div className="text-sm text-gray-600 dark:text-gray-400 sm:text-right">
                  <div>{block.transaction_count} transactions</div>
                  <div className="text-xs">{formatTimestamp(block.timestamp)}</div>
                </div>
              </div>
            ))}
          </div>
        )}
        <div className="mt-4">
          <Link href="/blocks" className="text-primary-600 hover:underline">
            View all blocks →
          </Link>
        </div>
      </Card>

      <div className="mt-8 grid grid-cols-1 gap-4 lg:grid-cols-2">
        <Card title="Activity Pulse">
          <p className="text-sm leading-6 text-gray-600 dark:text-gray-400">
            {mode === 'guided'
              ? 'A concise public view of chain activity, index coverage, and recent execution patterns.'
              : 'Public chain activity and index posture.'}
          </p>
          <div className="mt-4 grid gap-3 sm: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">Latest Daily Volume</div>
              <div className="mt-2 text-xl font-semibold text-gray-900 dark:text-white">
                {latestTrendPoint ? latestTrendPoint.transaction_count.toLocaleString() : 'Unknown'}
              </div>
              <div className="mt-1 text-sm text-gray-600 dark:text-gray-400">{latestTrendPoint?.date || 'Trend feed unavailable'}</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">Recent Success Rate</div>
              <div className="mt-2 text-xl font-semibold text-gray-900 dark:text-white">
                {activitySnapshot ? `${Math.round(activitySnapshot.success_rate * 100)}%` : 'Unknown'}
              </div>
              <div className="mt-1 text-sm text-gray-600 dark:text-gray-400">
                {activitySnapshot ? `${activitySnapshot.sample_size} sampled transactions` : 'Recent activity snapshot unavailable'}
              </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">Avg Recent Fee</div>
              <div className="mt-2 text-xl font-semibold text-gray-900 dark:text-white">
                {activitySnapshot ? formatWeiAsEth(Math.round(activitySnapshot.average_fee_wei).toString(), 6) : 'Unknown'}
              </div>
              <div className="mt-1 text-sm text-gray-600 dark:text-gray-400">Average fee from the recent public sample.</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">Peak Charted Day</div>
              <div className="mt-2 text-xl font-semibold text-gray-900 dark:text-white">
                {peakTrendPoint ? peakTrendPoint.transaction_count.toLocaleString() : 'Unknown'}
              </div>
              <div className="mt-1 text-sm text-gray-600 dark:text-gray-400">{peakTrendPoint?.date || 'No trend data yet'}</div>
            </div>
          </div>
          <div className="mt-4">
            <Link href="/analytics" className="text-primary-600 hover:underline">
              Open full analytics →
            </Link>
          </div>
        </Card>
        <Card title="Explorer Shortcuts">
          <p className="text-sm leading-6 text-gray-600 dark:text-gray-400">
            Go directly to the explorer surfaces that provide the strongest operational and discovery context.
          </p>
          <div className="mt-4 flex flex-wrap gap-3 text-sm">
            <Link href="/search" className="text-primary-600 hover:underline">
              Search →
            </Link>
            <Link href="/transactions" className="text-primary-600 hover:underline">
              Transactions →
            </Link>
            <Link href="/tokens" className="text-primary-600 hover:underline">
              Tokens →
            </Link>
            <Link href="/addresses" className="text-primary-600 hover:underline">
              Addresses →
            </Link>
            <Link href="/analytics" className="text-primary-600 hover:underline">
              Analytics →
            </Link>
          </div>
        </Card>
        <Card title="Liquidity & Routes">
          <p className="text-sm leading-6 text-gray-600 dark:text-gray-400">
            Explore the public Chain 138 DODO PMM liquidity mesh, the canonical route matrix, and the
            partner payload endpoints exposed through the explorer.
          </p>
          <div className="mt-4">
            <Link href="/routes" className="text-primary-600 hover:underline">
              Open routes and liquidity →
            </Link>
          </div>
        </Card>
        <Card title="Wallet & Token Discovery">
          <p className="text-sm leading-6 text-gray-600 dark:text-gray-400">
            Add Chain 138, Ethereum Mainnet, and ALL Mainnet to MetaMask, then use the explorer token
            list URL so supported tokens appear automatically.
          </p>
          <div className="mt-4">
            <Link href="/wallet" className="text-primary-600 hover:underline">
              Open wallet tools →
            </Link>
          </div>
        </Card>
        <Card title="Bridge & Relay Monitoring">
          <p className="text-sm leading-6 text-gray-600 dark:text-gray-400">
            Open the public bridge monitoring surface for relay status, mission-control links, bridge trace tooling,
            and the visual command center entry points.
          </p>
          <div className="mt-4">
            <Link href="/bridge" className="text-primary-600 hover:underline">
              Open bridge monitoring →
            </Link>
          </div>
        </Card>
        <Card title="Operations Hub">
          <p className="text-sm leading-6 text-gray-600 dark:text-gray-400">
            Open the public operations surface for wrapped-asset references, analytics shortcuts, operator links,
            system topology views, and other Chain 138 support tools.
          </p>
          <div className="mt-4">
            <Link href="/operations" className="text-primary-600 hover:underline">
              Open operations hub →
            </Link>
          </div>
        </Card>
      </div>
    </main>
  )
}
