'use client'

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

const quickSearches = [
  { label: 'cUSDT', description: 'Canonical bridged USDT liquidity and address results.' },
  { label: 'cUSDC', description: 'Canonical bridged USDC routes and address coverage.' },
  { label: 'cXAUC', description: 'Gold-backed cXAUC pools and token references.' },
  { label: 'cXAUT', description: 'Gold-backed cXAUT references and search coverage.' },
  { label: 'cEURT', description: 'EUR liquidity and cXAUC-connected route coverage.' },
  { label: 'USDT', description: 'Native-side USDT routes and address discovery.' },
]

function normalizeAddress(value: string) {
  const trimmed = value.trim()
  return /^0x[a-fA-F0-9]{40}$/.test(trimmed) ? trimmed : ''
}

export default function TokensPage() {
  const router = useRouter()
  const [query, setQuery] = useState('')

  const handleSubmit = (event: React.FormEvent) => {
    event.preventDefault()
    const normalized = normalizeAddress(query)
    router.push(normalized ? `/addresses/${normalized}` : `/search?q=${encodeURIComponent(query.trim())}`)
  }

  return (
    <div className="container mx-auto px-4 py-8">
      <h1 className="text-3xl font-bold mb-6">Tokens</h1>

      <Card className="mb-6" title="Find A Token">
        <form onSubmit={handleSubmit} className="flex flex-col gap-3 md:flex-row">
          <input
            type="text"
            value={query}
            onChange={(event) => setQuery(event.target.value)}
            placeholder="Token symbol, name, or contract address"
            className="flex-1 rounded-lg border border-gray-300 px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary-500"
          />
          <button
            type="submit"
            disabled={!query.trim()}
            className="rounded-lg bg-primary-600 px-6 py-2 text-white hover:bg-primary-700 disabled:opacity-50"
          >
            Search
          </button>
        </form>
      </Card>

      <div className="grid gap-6 lg:grid-cols-3">
        <Card title="Search Index">
          <p className="text-sm text-gray-600 dark:text-gray-400">
            Search token symbols, contract addresses, transaction hashes, and block numbers from the explorer index.
          </p>
          <div className="mt-4">
            <Link href="/search" className="text-primary-600 hover:underline">
              Open search →
            </Link>
          </div>
        </Card>
        <Card title="Wallet Discovery">
          <p className="text-sm text-gray-600 dark:text-gray-400">
            Add Chain 138 and supported token metadata to MetaMask directly from the explorer wallet tools.
          </p>
          <div className="mt-4">
            <Link href="/wallet" className="text-primary-600 hover:underline">
              Open wallet tools →
            </Link>
          </div>
        </Card>
        <Card title="Liquidity Routes">
          <p className="text-sm text-gray-600 dark:text-gray-400">
            Review canonical PMM routes, partner payload templates, and token-routing examples for supported pools.
          </p>
          <div className="mt-4">
            <Link href="/liquidity" className="text-primary-600 hover:underline">
              Open liquidity access →
            </Link>
          </div>
        </Card>
      </div>

      <div className="mt-8">
        <Card title="Common token searches">
          <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
            {quickSearches.map((token) => (
              <Link
                key={token.label}
                href={`/search?q=${encodeURIComponent(token.label)}`}
                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">{token.label}</div>
                <p className="mt-2 text-sm text-gray-600 dark:text-gray-400">{token.description}</p>
              </Link>
            ))}
          </div>
        </Card>
      </div>
    </div>
  )
}
