import { useEffect, useMemo, useState } from 'react'
import Link from 'next/link'
import { Card } from '@/libs/frontend-ui-primitives'
import { explorerFeaturePages } from '@/data/explorerOperations'
import {
  routesApi,
  type ExplorerNetwork,
  type MissionControlLiquidityPool,
  type RouteMatrixRoute,
  type RouteMatrixResponse,
} from '@/services/api/routes'
import { missionControlApi, type MissionControlBridgeStatusResponse } from '@/services/api/missionControl'
import { statsApi, type ExplorerStats } from '@/services/api/stats'
import { summarizeChainActivity } from '@/utils/activityContext'
import ActivityContextPanel from '@/components/common/ActivityContextPanel'
import FreshnessTrustNote from '@/components/common/FreshnessTrustNote'
import SubsystemPosturePanel from '@/components/common/SubsystemPosturePanel'
import { resolveEffectiveFreshness } from '@/utils/explorerFreshness'

interface RoutesMonitoringPageProps {
  initialRouteMatrix?: RouteMatrixResponse | null
  initialNetworks?: ExplorerNetwork[]
  initialPools?: MissionControlLiquidityPool[]
  initialStats?: ExplorerStats | null
  initialBridgeStatus?: MissionControlBridgeStatusResponse | null
}

const canonicalLiquidityToken = '0x93E66202A11B1772E55407B32B44e5Cd8eda7f22'

function relativeAge(isoString?: string): string {
  if (!isoString) return 'Unknown'
  const parsed = Date.parse(isoString)
  if (!Number.isFinite(parsed)) return 'Unknown'
  const seconds = Math.max(0, Math.round((Date.now() - parsed) / 1000))
  if (seconds < 60) return `${seconds}s ago`
  const minutes = Math.round(seconds / 60)
  if (minutes < 60) return `${minutes}m ago`
  const hours = Math.round(minutes / 60)
  return `${hours}h ago`
}

function compactAddress(value?: string): string {
  if (!value) return 'Unspecified'
  if (value.length <= 14) return value
  return `${value.slice(0, 6)}...${value.slice(-4)}`
}

function formatUsd(value?: number): string {
  if (typeof value !== 'number' || !Number.isFinite(value)) return 'Unknown'
  return new Intl.NumberFormat('en-US', {
    style: 'currency',
    currency: 'USD',
    maximumFractionDigits: 0,
  }).format(value)
}

function protocolList(route: RouteMatrixRoute): string {
  const protocols = Array.from(
    new Set((route.legs || []).map((leg) => leg.protocol || leg.executor || '').filter(Boolean))
  )
  return protocols.length > 0 ? protocols.join(', ') : 'Unspecified'
}

function routeAssetPair(route: RouteMatrixRoute): string {
  if (route.routeType === 'bridge') {
    return route.assetSymbol || 'Bridge asset'
  }
  return [route.tokenInSymbol, route.tokenOutSymbol].filter(Boolean).join(' -> ') || 'Swap route'
}

function ActionLink({
  href,
  label,
  external,
}: {
  href: string
  label: string
  external?: boolean
}) {
  const className = 'inline-flex items-center text-sm font-semibold text-primary-600 hover:underline'
  const text = `${label} ->`

  if (external) {
    return (
      <a href={href} className={className} target="_blank" rel="noopener noreferrer">
        {text}
      </a>
    )
  }

  return (
    <Link href={href} className={className}>
      {text}
    </Link>
  )
}

export default function RoutesMonitoringPage({
  initialRouteMatrix = null,
  initialNetworks = [],
  initialPools = [],
  initialStats = null,
  initialBridgeStatus = null,
}: RoutesMonitoringPageProps) {
  const [routeMatrix, setRouteMatrix] = useState<RouteMatrixResponse | null>(initialRouteMatrix)
  const [networks, setNetworks] = useState<ExplorerNetwork[]>(initialNetworks)
  const [pools, setPools] = useState<MissionControlLiquidityPool[]>(initialPools)
  const [stats, setStats] = useState<ExplorerStats | null>(initialStats)
  const [bridgeStatus, setBridgeStatus] = useState<MissionControlBridgeStatusResponse | null>(initialBridgeStatus)
  const [loadingError, setLoadingError] = useState<string | null>(null)
  const page = explorerFeaturePages.routes

  useEffect(() => {
    let cancelled = false

    const load = async () => {
      const [matrixResult, networksResult, poolsResult, statsResult, bridgeResult] = await Promise.allSettled([
        routesApi.getRouteMatrix(),
        routesApi.getNetworks(),
        routesApi.getTokenPools(canonicalLiquidityToken),
        statsApi.get(),
        missionControlApi.getBridgeStatus(),
      ])

      if (cancelled) return

      if (matrixResult.status === 'fulfilled') {
        setRouteMatrix(matrixResult.value)
      }
      if (networksResult.status === 'fulfilled') {
        setNetworks(networksResult.value.networks || [])
      }
      if (poolsResult.status === 'fulfilled') {
        setPools(poolsResult.value.pools || [])
      }
      if (statsResult.status === 'fulfilled') {
        setStats(statsResult.value)
      }
      if (bridgeResult.status === 'fulfilled') {
        setBridgeStatus(bridgeResult.value)
      }

      if (
        matrixResult.status === 'rejected' &&
        networksResult.status === 'rejected' &&
        poolsResult.status === 'rejected' &&
        statsResult.status === 'rejected' &&
        bridgeResult.status === 'rejected'
      ) {
        setLoadingError('Live route inventory is temporarily unavailable.')
      }
    }

    load().catch((error) => {
      if (!cancelled) {
        setLoadingError(
          error instanceof Error ? error.message : 'Live route inventory is temporarily unavailable.'
        )
      }
    })

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

  const liveRoutes = useMemo(() => routeMatrix?.liveRoutes || [], [routeMatrix?.liveRoutes])
  const plannedRoutes = useMemo(
    () => routeMatrix?.blockedOrPlannedRoutes || [],
    [routeMatrix?.blockedOrPlannedRoutes]
  )

  const familyCount = useMemo(() => {
    return new Set(liveRoutes.flatMap((route) => route.aggregatorFamilies || [])).size
  }, [liveRoutes])

  const topRoutes = useMemo(() => {
    const ordered = [...liveRoutes].sort((left, right) => {
      if ((left.routeType || '') !== (right.routeType || '')) {
        return left.routeType === 'bridge' ? -1 : 1
      }
      return (left.label || '').localeCompare(right.label || '')
    })
    return ordered.slice(0, 8)
  }, [liveRoutes])

  const highlightedNetworks = useMemo(() => {
    return networks
      .filter((network) => [138, 1, 651940, 56, 43114].includes(network.chainIdDecimal || 0))
      .sort((left, right) => (left.chainIdDecimal || 0) - (right.chainIdDecimal || 0))
  }, [networks])
  const activityContext = useMemo(
    () =>
      summarizeChainActivity({
        blocks: [],
        transactions: [],
        latestBlockNumber: stats?.latest_block,
        latestBlockTimestamp: null,
        freshness: resolveEffectiveFreshness(stats, bridgeStatus),
        diagnostics: stats?.diagnostics ?? bridgeStatus?.data?.diagnostics ?? null,
      }),
    [bridgeStatus, stats],
  )

  return (
    <div className="container mx-auto px-4 py-6 sm:py-8">
      <div className="mb-6 max-w-4xl sm:mb-8">
        <div className="mb-3 inline-flex rounded-full border border-emerald-200 bg-emerald-50 px-3 py-1 text-xs font-semibold uppercase tracking-[0.2em] text-emerald-700">
          {page.eyebrow}
        </div>
        <h1 className="mb-3 text-3xl font-bold text-gray-900 dark:text-white sm:text-4xl">
          {page.title}
        </h1>
        <p className="text-base leading-7 text-gray-600 dark:text-gray-400 sm:text-lg sm:leading-8">
          {page.description}
        </p>
      </div>

      {page.note ? (
        <Card className="mb-6 border border-amber-200 bg-amber-50/70 dark:border-amber-900/50 dark:bg-amber-950/20">
          <p className="text-sm leading-6 text-amber-950 dark:text-amber-100">
            {page.note}
          </p>
        </Card>
      ) : null}

      {loadingError ? (
        <Card className="mb-6 border border-red-200 bg-red-50/70 dark:border-red-900/50 dark:bg-red-950/20">
          <p className="text-sm leading-6 text-red-900 dark:text-red-100">{loadingError}</p>
        </Card>
      ) : null}

      <div className="mb-6">
        <ActivityContextPanel context={activityContext} title="Routes Freshness Context" />
        <FreshnessTrustNote
          className="mt-3"
          context={activityContext}
          stats={stats}
          bridgeStatus={bridgeStatus}
          scopeLabel="Route availability reflects the current public route matrix and the same explorer freshness model used on the core explorer pages"
        />
        <SubsystemPosturePanel
          className="mt-3"
          subsystems={bridgeStatus?.data?.subsystems}
          title="Route Subsystem Posture"
          preferredKeys={['rpc_head', 'tx_index', 'stats_summary', 'freshness_queries']}
          scopeLabel="Route inventory is read against the same backend freshness signals used to explain whether route posture is limited by head visibility, transaction indexing, or stale summary data."
        />
      </div>

      <div className="mb-6 grid gap-4 md:grid-cols-2 xl:grid-cols-4">
        <Card className="border border-emerald-200 bg-emerald-50/70 dark:border-emerald-900/50 dark:bg-emerald-950/20">
          <div className="text-sm font-semibold uppercase tracking-wide text-emerald-800 dark:text-emerald-100">
            Live Swap Routes
          </div>
          <div className="mt-2 text-3xl font-bold text-gray-900 dark:text-white">
            {routeMatrix?.counts?.liveSwapRoutes ?? liveRoutes.filter((route) => route.routeType === 'swap').length}
          </div>
          <div className="mt-2 text-sm text-gray-700 dark:text-gray-300">
            Planner-visible same-chain routes on Chain 138.
          </div>
        </Card>

        <Card className="border border-sky-200 bg-sky-50/70 dark:border-sky-900/50 dark:bg-sky-950/20">
          <div className="text-sm font-semibold uppercase tracking-wide text-sky-800 dark:text-sky-100">
            Live Bridge Routes
          </div>
          <div className="mt-2 text-3xl font-bold text-gray-900 dark:text-white">
            {routeMatrix?.counts?.liveBridgeRoutes ?? liveRoutes.filter((route) => route.routeType === 'bridge').length}
          </div>
          <div className="mt-2 text-sm text-gray-700 dark:text-gray-300">
            Bridge routes exposed through the current route matrix.
          </div>
        </Card>

        <Card className="border border-gray-200 dark:border-gray-700">
          <div className="text-sm font-semibold uppercase tracking-wide text-gray-700 dark:text-gray-300">
            Network Catalog
          </div>
          <div className="mt-2 text-3xl font-bold text-gray-900 dark:text-white">
            {networks.length}
          </div>
          <div className="mt-2 text-sm text-gray-600 dark:text-gray-400">
            Published networks available through the explorer config surface.
          </div>
        </Card>

        <Card className="border border-gray-200 dark:border-gray-700">
          <div className="text-sm font-semibold uppercase tracking-wide text-gray-700 dark:text-gray-300">
            cUSDT Pool View
          </div>
          <div className="mt-2 text-3xl font-bold text-gray-900 dark:text-white">
            {pools.length}
          </div>
          <div className="mt-2 text-sm text-gray-600 dark:text-gray-400">
            Live mission-control pools for the canonical cUSDT token.
          </div>
        </Card>
      </div>

      <div className="mb-8 grid gap-6 lg:grid-cols-[1.1fr_0.9fr]">
        <Card title="Route Matrix Summary">
          <div className="grid gap-4 md: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-sm text-gray-500 dark:text-gray-400">Generated</div>
              <div className="mt-1 text-lg font-semibold text-gray-900 dark:text-white">
                {relativeAge(routeMatrix?.generatedAt)}
              </div>
              <div className="mt-2 text-sm text-gray-600 dark:text-gray-400">
                Matrix version {routeMatrix?.version || 'unknown'}
              </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-sm text-gray-500 dark:text-gray-400">Updated Source</div>
              <div className="mt-1 text-lg font-semibold text-gray-900 dark:text-white">
                {relativeAge(routeMatrix?.updated)}
              </div>
              <div className="mt-2 text-sm text-gray-600 dark:text-gray-400">
                {familyCount} partner families surfaced in live routes.
              </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-sm text-gray-500 dark:text-gray-400">Filtered Live Routes</div>
              <div className="mt-1 text-lg font-semibold text-gray-900 dark:text-white">
                {routeMatrix?.counts?.filteredLiveRoutes ?? liveRoutes.length}
              </div>
              <div className="mt-2 text-sm text-gray-600 dark:text-gray-400">
                Includes swap and bridge lanes currently in the public matrix.
              </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-sm text-gray-500 dark:text-gray-400">Planned / Blocked</div>
              <div className="mt-1 text-lg font-semibold text-gray-900 dark:text-white">
                {routeMatrix?.counts?.blockedOrPlannedRoutes ?? plannedRoutes.length}
              </div>
              <div className="mt-2 text-sm text-gray-600 dark:text-gray-400">
                Remaining lanes still waiting on pools, funding, or routing support.
              </div>
            </div>
          </div>
        </Card>

        <Card title="Highlighted Networks">
          <div className="space-y-3">
            {highlightedNetworks.map((network) => (
              <div
                key={`${network.chainIdDecimal}-${network.chainName}`}
                className="rounded-2xl border border-gray-200 bg-gray-50 p-4 dark:border-gray-700 dark:bg-gray-900/40"
              >
                <div className="text-base font-semibold text-gray-900 dark:text-white">
                  {network.chainName || 'Unknown chain'}
                </div>
                <div className="mt-1 text-sm text-gray-600 dark:text-gray-400">
                  Chain ID {network.chainIdDecimal ?? 'Unknown'} · {network.shortName || 'n/a'}
                </div>
              </div>
            ))}
          </div>
        </Card>
      </div>

      <div className="mb-8 grid gap-6 lg:grid-cols-[1.1fr_0.9fr]">
        <Card title="Live Route Snapshot">
          <div className="grid gap-4 lg:grid-cols-2">
            {topRoutes.map((route) => (
              <div
                key={route.routeId}
                className="rounded-2xl border border-gray-200 bg-white p-4 dark:border-gray-700 dark:bg-gray-800"
              >
                <div className="flex items-start justify-between gap-3">
                  <div>
                    <div className="text-base font-semibold text-gray-900 dark:text-white">
                      {route.label || route.routeId}
                    </div>
                    <div className="mt-1 text-sm text-gray-600 dark:text-gray-400">
                      {routeAssetPair(route)}
                    </div>
                  </div>
                  <div className="rounded-full bg-primary-50 px-2.5 py-1 text-xs font-semibold uppercase tracking-wide text-primary-700 dark:bg-primary-900/30 dark:text-primary-300">
                    {route.routeType || 'route'}
                  </div>
                </div>
                <div className="mt-3 text-sm text-gray-600 dark:text-gray-400">
                  {`${route.fromChainId} -> ${route.toChainId} · ${route.hopCount ?? 0} hop${
                    (route.hopCount ?? 0) === 1 ? '' : 's'
                  }`}
                </div>
                <div className="mt-1 text-sm text-gray-600 dark:text-gray-400">
                  Protocols: {protocolList(route)}
                </div>
              </div>
            ))}
          </div>
        </Card>

        <Card title="cUSDT Mission-Control Pools">
          <div className="space-y-4">
            {pools.map((pool) => (
              <div
                key={pool.address}
                className="rounded-2xl border border-gray-200 bg-gray-50 p-4 dark:border-gray-700 dark:bg-gray-900/40"
              >
                <div className="text-base font-semibold text-gray-900 dark:text-white">
                  {(pool.token0?.symbol || '?') + ' / ' + (pool.token1?.symbol || '?')}
                </div>
                <div className="mt-1 text-sm text-gray-600 dark:text-gray-400">
                  {pool.dex || 'Unknown DEX'} · TVL {formatUsd(pool.tvl)}
                </div>
                <div className="mt-1 text-sm text-gray-600 dark:text-gray-400">
                  Pool {compactAddress(pool.address)}
                </div>
              </div>
            ))}
          </div>
        </Card>
      </div>

      <div className="mb-8">
        <Card title="Planned Route Backlog">
          <div className="grid gap-4 lg:grid-cols-2">
            {plannedRoutes.slice(0, 6).map((route) => (
              <div
                key={route.routeId}
                className="rounded-2xl border border-amber-200 bg-amber-50/70 p-4 dark:border-amber-900/50 dark:bg-amber-950/20"
              >
                <div className="text-base font-semibold text-gray-900 dark:text-white">
                  {route.routeId}
                </div>
                <div className="mt-2 text-sm text-gray-700 dark:text-gray-300">
                  {(route.tokenInSymbols || []).join(' / ') || routeAssetPair(route)}
                </div>
                <div className="mt-2 text-sm leading-6 text-gray-600 dark:text-gray-400">
                  {route.reason || 'Pending additional deployment or routing work.'}
                </div>
              </div>
            ))}
          </div>
        </Card>
      </div>

      <div className="grid gap-4 lg:grid-cols-2">
        {page.actions.map((action) => (
          <Card key={`${action.title}-${action.href}`} className="border border-gray-200 dark:border-gray-700">
            <div className="flex h-full flex-col">
              <div className="text-base font-semibold text-gray-900 dark:text-white">
                {action.title}
              </div>
              <p className="mt-2 flex-1 text-sm leading-6 text-gray-600 dark:text-gray-400">
                {action.description}
              </p>
              <div className="mt-4">
                <ActionLink
                  href={action.href}
                  label={action.label}
                  external={Boolean((action as { external?: boolean }).external)}
                />
              </div>
            </div>
          </Card>
        ))}
      </div>
    </div>
  )
}
