'use client'

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

const poolCards = [
  {
    title: 'Canonical PMM routes',
    description: 'Review the public Chain 138 DODO PMM route matrix, live pool freshness, and payload examples.',
    href: '/liquidity',
    label: 'Open liquidity access',
  },
  {
    title: 'Wallet Funding Path',
    description: 'Open wallet tools first if you need Chain 138 setup, token import links, or a quick route into supported assets.',
    href: '/wallet',
    label: 'Open wallet tools',
  },
  {
    title: 'Explorer Docs',
    description: 'Static documentation covers the live pool map, expected web content, and route access details.',
    href: '/docs.html',
    label: 'Open docs landing page',
    external: true,
  },
]

const shortcutCards = [
  {
    title: 'cUSDT / USDT',
    description: 'Open the canonical direct stable route coverage and compare the live pool snapshot.',
    href: '/liquidity',
  },
  {
    title: 'cUSDC / USDC',
    description: 'Check the public stable bridge route and inspect the live reserves block.',
    href: '/liquidity',
  },
  {
    title: 'cUSDT / cXAUC',
    description: 'Review one of the live gold-backed route families from the liquidity access page.',
    href: '/liquidity',
  },
]

export default function PoolsPage() {
  return (
    <div className="container mx-auto px-4 py-8">
      <h1 className="text-3xl font-bold mb-6">Pools</h1>

      <div className="grid gap-6 lg:grid-cols-3">
        {poolCards.map((card) => (
          <Card key={card.title} title={card.title}>
            <p className="text-sm text-gray-600 dark:text-gray-400">{card.description}</p>
            <div className="mt-4">
              {card.external ? (
                <a href={card.href} className="text-primary-600 hover:underline">
                  {card.label} →
                </a>
              ) : (
                <Link href={card.href} className="text-primary-600 hover:underline">
                  {card.label} →
                </Link>
              )}
            </div>
          </Card>
        ))}
      </div>

      <div className="mt-8">
        <Card title="Pool operation shortcuts">
          <div className="grid gap-4 md:grid-cols-3">
            {shortcutCards.map((card) => (
              <Link
                key={card.title}
                href={card.href}
                className="rounded-lg border border-gray-200 p-4 transition hover:border-primary-400 hover:shadow-sm dark:border-gray-700"
              >
                <div className="text-sm font-semibold text-gray-900 dark:text-white">{card.title}</div>
                <p className="mt-2 text-sm text-gray-600 dark:text-gray-400">{card.description}</p>
              </Link>
            ))}
          </div>
        </Card>
      </div>
    </div>
  )
}
