import Link from 'next/link'
import { Card } from '@/libs/frontend-ui-primitives/Card'

const publicApiBase = '/token-aggregation/api/v1'

const livePools = [
  {
    pair: 'cUSDT / cUSDC',
    poolAddress: '0xff8d3b8fDF7B112759F076B69f4271D4209C0849',
    reserves: '10,000,000 / 10,000,000',
  },
  {
    pair: 'cUSDT / USDT',
    poolAddress: '0x6fc60DEDc92a2047062294488539992710b99D71',
    reserves: '10,000,000 / 10,000,000',
  },
  {
    pair: 'cUSDC / USDC',
    poolAddress: '0x0309178ae30302D83c76d6Dd402a684eF3160eec',
    reserves: '10,000,000 / 10,000,000',
  },
  {
    pair: 'cUSDT / cXAUC',
    poolAddress: '0x1AA55E2001E5651349AfF5A63FD7A7Ae44f0F1b0',
    reserves: '2,666,965 / 519.477000',
  },
  {
    pair: 'cUSDC / cXAUC',
    poolAddress: '0xEA9Ac6357CaCB42a83b9082B870610363B177cBa',
    reserves: '1,000,000 / 194.782554',
  },
  {
    pair: 'cEURT / cXAUC',
    poolAddress: '0xbA99bc1eAAC164569d5AcA96C806934DDaF970Cf',
    reserves: '1,000,000 / 225.577676',
  },
]

const publicEndpoints = [
  {
    name: 'Canonical route matrix',
    method: 'GET',
    href: `${publicApiBase}/routes/matrix`,
    notes: 'All live and optional non-live route inventory with counts and filters.',
  },
  {
    name: 'Live ingestion export',
    method: 'GET',
    href: `${publicApiBase}/routes/ingestion?family=LiFi`,
    notes: 'Flat live-route export for adapter ingestion and route discovery.',
  },
  {
    name: 'Partner payload templates',
    method: 'GET',
    href: `${publicApiBase}/routes/partner-payloads?partner=0x&amount=1000000&includeUnsupported=true`,
    notes: 'Builds exact 1inch, 0x, and LiFi request templates from live routes.',
  },
  {
    name: 'Resolve supported partner payloads',
    method: 'POST',
    href: `${publicApiBase}/routes/partner-payloads/resolve`,
    notes: 'Accepts partner, amount, and addresses and returns supported payloads by default.',
  },
  {
    name: 'Dispatch supported partner payload',
    method: 'POST',
    href: `${publicApiBase}/routes/partner-payloads/dispatch`,
    notes: 'Resolves then dispatches a single supported partner payload when the chain is supported.',
  },
  {
    name: 'Internal Chain 138 execution plan',
    method: 'POST',
    href: `${publicApiBase}/routes/internal-execution-plan`,
    notes: 'Returns the internal DODO PMM fallback plan when external partner support is unavailable.',
  },
]

const routeHighlights = [
  'Direct live routes: cUSDT <-> cUSDC, cUSDT <-> USDT, cUSDC <-> USDC, cUSDT <-> cXAUC, cUSDC <-> cXAUC, cEURT <-> cXAUC.',
  'Multi-hop public routes exist through cXAUC for cEURT <-> cUSDT, cEURT <-> cUSDC, and an alternate cUSDT <-> cUSDC path.',
  'Mainnet bridge discovery is live for cUSDT -> USDT and cUSDC -> USDC through the configured UniversalCCIPBridge lane.',
  'External partner templates are available for 1inch, 0x, and LiFi, but Chain 138 remains unsupported on those public partner networks today.',
  'When partner support is unavailable, the explorer can surface the internal DODO PMM execution plan instead of a dead end.',
]

const requestExamples = [
  {
    title: 'Inspect the full route matrix',
    code: `GET ${publicApiBase}/routes/matrix?includeNonLive=true`,
  },
  {
    title: 'Filter live same-chain swap routes on Chain 138',
    code: `GET ${publicApiBase}/routes/ingestion?fromChainId=138&routeType=swap`,
  },
  {
    title: 'Generate partner templates for review',
    code: `GET ${publicApiBase}/routes/partner-payloads?partner=LiFi&amount=1000000&includeUnsupported=true`,
  },
  {
    title: 'Resolve a dispatch candidate',
    code: `POST ${publicApiBase}/routes/partner-payloads/resolve`,
  },
  {
    title: 'Build the internal fallback plan',
    code: `POST ${publicApiBase}/routes/internal-execution-plan`,
  },
]

export default function LiquidityPage() {
  return (
    <main className="container mx-auto px-4 py-8">
      <div className="mb-8 max-w-4xl">
        <div className="mb-3 inline-flex rounded-full border border-amber-200 bg-amber-50 px-3 py-1 text-xs font-semibold uppercase tracking-[0.2em] text-amber-700">
          Chain 138 Liquidity Access
        </div>
        <h1 className="mb-3 text-4xl font-bold text-gray-900 dark:text-white">
          Public liquidity, route discovery, and execution access points
        </h1>
        <p className="text-lg leading-8 text-gray-600 dark:text-gray-400">
          This explorer page pulls together the live public DODO PMM liquidity on Chain 138 and the
          token-aggregation endpoints that DEX aggregators, integrators, and operators can use for
          route discovery, payload generation, and internal fallback execution planning.
        </p>
      </div>

      <div className="mb-8 grid gap-4 md:grid-cols-3">
        <Card>
          <div className="text-sm text-gray-500 dark:text-gray-400">Live public pools</div>
          <div className="mt-2 text-3xl font-bold text-gray-900 dark:text-white">6</div>
          <div className="mt-2 text-sm text-gray-600 dark:text-gray-400">
            Verified public DODO PMM pools on Chain 138.
          </div>
        </Card>
        <Card>
          <div className="text-sm text-gray-500 dark:text-gray-400">Public access path</div>
          <div className="mt-2 text-lg font-bold text-gray-900 dark:text-white">/token-aggregation/api/v1</div>
          <div className="mt-2 text-sm text-gray-600 dark:text-gray-400">
            Explorer-hosted proxy path for route, quote, and reporting APIs.
          </div>
        </Card>
        <Card>
          <div className="text-sm text-gray-500 dark:text-gray-400">Partner status</div>
          <div className="mt-2 text-3xl font-bold text-gray-900 dark:text-white">Fallback Ready</div>
          <div className="mt-2 text-sm text-gray-600 dark:text-gray-400">
            Mainnet stable bridge routing is live; 1inch, 0x, and LiFi templates remain available for partner integrations, with internal fallback for unsupported Chain 138 execution.
          </div>
        </Card>
      </div>

      <div className="mb-8 grid gap-6 lg:grid-cols-[1.2fr_0.8fr]">
        <Card title="Live Pool Snapshot">
          <div className="space-y-4">
            {livePools.map((pool) => (
              <div
                key={pool.poolAddress}
                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-col gap-2 md:flex-row md:items-center md:justify-between">
                  <div>
                    <div className="text-base font-semibold text-gray-900 dark:text-white">{pool.pair}</div>
                    <div className="mt-1 break-all text-xs text-gray-500 dark:text-gray-400">
                      Pool: {pool.poolAddress}
                    </div>
                  </div>
                  <div className="text-sm font-medium text-gray-700 dark:text-gray-300">
                    Reserves: {pool.reserves}
                  </div>
                </div>
              </div>
            ))}
          </div>
        </Card>

        <Card title="What Integrators Need To Know">
          <div className="space-y-3 text-sm leading-6 text-gray-600 dark:text-gray-400">
            {routeHighlights.map((item) => (
              <p key={item}>{item}</p>
            ))}
          </div>
        </Card>
      </div>

      <div className="mb-8">
        <Card title="Explorer Access Points">
          <div className="grid gap-4 md:grid-cols-2">
            {publicEndpoints.map((endpoint) => (
              <a
                key={endpoint.href}
                href={endpoint.href}
                target="_blank"
                rel="noopener noreferrer"
                className="rounded-2xl border border-gray-200 bg-white p-5 transition hover:border-primary-400 hover:shadow-md dark:border-gray-700 dark:bg-gray-800"
              >
                <div className="flex items-center justify-between gap-3">
                  <div className="text-base font-semibold text-gray-900 dark:text-white">{endpoint.name}</div>
                  <span 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">
                    {endpoint.method}
                  </span>
                </div>
                <div className="mt-3 break-all rounded-xl bg-gray-50 p-3 text-xs text-gray-700 dark:bg-gray-900 dark:text-gray-300">
                  {endpoint.href}
                </div>
                <div className="mt-3 text-sm leading-6 text-gray-600 dark:text-gray-400">{endpoint.notes}</div>
              </a>
            ))}
          </div>
        </Card>
      </div>

      <div className="mb-8 grid gap-6 lg:grid-cols-[1fr_1fr]">
        <Card title="Quick Request Examples">
          <div className="space-y-4">
            {requestExamples.map((example) => (
              <div key={example.title} className="rounded-2xl border border-gray-200 bg-gray-50 p-4 dark:border-gray-700 dark:bg-gray-900/40">
                <div className="mb-2 text-sm font-semibold text-gray-900 dark:text-white">{example.title}</div>
                <code className="block break-all text-xs leading-6 text-gray-700 dark:text-gray-300">
                  {example.code}
                </code>
              </div>
            ))}
          </div>
        </Card>

        <Card title="Related Explorer Tools">
          <div className="space-y-4 text-sm leading-6 text-gray-600 dark:text-gray-400">
            <p>
              Use the wallet page for network onboarding and the explorer token list URL, then use this
              page for route and execution discovery.
            </p>
            <p>
              The route APIs complement the existing route decision tree and market-data APIs already
              proxied through the explorer.
            </p>
            <div className="flex flex-wrap gap-3">
              <Link
                href="/wallet"
                className="rounded-full bg-primary-600 px-4 py-2 text-sm font-medium text-white transition hover:bg-primary-700"
              >
                Open wallet tools
              </Link>
              <a
                href={`${publicApiBase}/routes/tree?chainId=138&amountIn=1000000`}
                target="_blank"
                rel="noopener noreferrer"
                className="rounded-full border border-gray-300 px-4 py-2 text-sm font-medium text-gray-700 transition hover:border-primary-400 hover:text-primary-700 dark:border-gray-600 dark:text-gray-300 dark:hover:text-primary-300"
              >
                Route tree API
              </a>
              <a
                href="/docs.html"
                className="rounded-full border border-gray-300 px-4 py-2 text-sm font-medium text-gray-700 transition hover:border-primary-400 hover:text-primary-700 dark:border-gray-600 dark:text-gray-300 dark:hover:text-primary-300"
              >
                Explorer docs
              </a>
            </div>
          </div>
        </Card>
      </div>
    </main>
  )
}
