'use client'

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

export default function GruDocsPage() {
  return (
    <div className="container mx-auto px-4 py-6 sm:py-8">
      <PageIntro
        eyebrow="Explorer Documentation"
        title="GRU Guide"
        description="A user-facing summary of the GRU standards, bridge posture, public-network representations, and x402 readiness model, with concrete places to inspect those signals on live token, address, and search pages."
        actions={[
          { href: '/tokens', label: 'Browse tokens' },
          { href: '/search?q=cUSDC', label: 'Search cUSDC' },
          { href: '/search?q=cUSDT', label: 'Search cUSDT' },
        ]}
      />

      <div className="space-y-6">
        <Card title="What The Explorer Is Showing You">
          <div className="space-y-4 text-sm text-gray-600 dark:text-gray-400">
            <p>
              The explorer now distinguishes between canonical GRU surfaces on Chain 138 and cW public-network representations used on bridge lanes.
              It also highlights when a token looks ready for x402-style payment flows.
            </p>
            <p>
              You can inspect these signals directly on live examples such as
              {' '}<Link href="/tokens/0x93E66202A11B1772E55407B32B44e5Cd8eda7f22" className="text-primary-600 hover:underline">cUSDT</Link>,
              {' '}<Link href="/tokens/0xf22258f57794CC8E06237084b353Ab30fFfa640b" className="text-primary-600 hover:underline">cUSDC</Link>,
              and related GRU-aware search results under
              {' '}<Link href="/search?q=cUSDT" className="text-primary-600 hover:underline">search</Link>.
            </p>
            <p>
              A practical verification path is: open a token page, confirm the GRU standards card, check the x402 and ISO-20022 posture badges,
              inspect the sibling-network entries under <strong>Other Networks</strong>, and then pivot into a related transaction to see how
              GRU-aware transfers are labeled in the transaction evidence flow.
            </p>
            <div className="flex flex-wrap gap-2">
              <EntityBadge label="GRU" tone="success" />
              <EntityBadge label="x402 ready" tone="info" />
              <EntityBadge label="forward canonical" tone="success" />
              <EntityBadge label="wrapped" tone="warning" />
            </div>
          </div>
        </Card>

        <Card title="Standards Summary">
          <div className="grid gap-4 md:grid-cols-2">
            <div className="rounded-xl border border-gray-200 bg-gray-50 p-4 text-sm dark:border-gray-700 dark:bg-gray-900/40 md:col-span-2">
              <div className="font-medium text-gray-900 dark:text-white">Public token language</div>
              <div className="mt-2 text-gray-600 dark:text-gray-400">
                The explorer follows the GRU monetary policy taxonomy: <strong>c</strong> means compliant instrument created by a regulated financial entity or institution,
                <strong> W</strong> means wrapped representation on a public network, <strong>XXX</strong> is the ISO-4217 currency code or ISO-style commodity code,
                <strong> C</strong> marks cash-tokenized electronic money, and <strong> T</strong> marks treasury or government bond exposure.
              </div>
            </div>
            <div className="rounded-xl border border-gray-200 bg-gray-50 p-4 text-sm dark:border-gray-700 dark:bg-gray-900/40">
              <div className="font-medium text-gray-900 dark:text-white">Base token profile</div>
              <div className="mt-2 text-gray-600 dark:text-gray-400">
                Canonical GRU v2 base tokens are expected to expose ERC-20, AccessControl, Pausable, EIP-712, ERC-2612, ERC-3009,
                ERC-5267, deterministic storage namespacing, and governance/supervision metadata.
              </div>
            </div>
            <div className="rounded-xl border border-gray-200 bg-gray-50 p-4 text-sm dark:border-gray-700 dark:bg-gray-900/40">
              <div className="font-medium text-gray-900 dark:text-white">x402 readiness</div>
              <div className="mt-2 text-gray-600 dark:text-gray-400">
                In explorer terms, x402 readiness means the contract exposes an EIP-712 domain plus ERC-5267 domain introspection and
                at least one signed payment surface such as ERC-2612 permit or ERC-3009 authorization transfers.
              </div>
            </div>
          </div>
        </Card>

        <Card title="Example Explorer Surfaces">
          <div className="space-y-3 text-sm text-gray-600 dark:text-gray-400">
            <div className="rounded-xl border border-gray-200 bg-gray-50 p-4 dark:border-gray-700 dark:bg-gray-900/40">
              <div className="font-medium text-gray-900 dark:text-white">Token detail</div>
              <div className="mt-2">
                Open <Link href="/tokens/0x93E66202A11B1772E55407B32B44e5Cd8eda7f22" className="text-primary-600 hover:underline">cUSDT</Link> or
                {' '}<Link href="/tokens/0xf22258f57794CC8E06237084b353Ab30fFfa640b" className="text-primary-600 hover:underline">cUSDC</Link>
                {' '}to inspect the GRU standards card, x402 posture, ISO-20022 posture, and sibling-network mappings.
              </div>
            </div>
            <div className="rounded-xl border border-gray-200 bg-gray-50 p-4 dark:border-gray-700 dark:bg-gray-900/40">
              <div className="font-medium text-gray-900 dark:text-white">Search</div>
              <div className="mt-2">
                Use <Link href="/search?q=cUSDT" className="text-primary-600 hover:underline">search for cUSDT</Link> to verify that direct token
                matches and curated posture cues are visible on first paint.
              </div>
            </div>
            <div className="rounded-xl border border-gray-200 bg-gray-50 p-4 dark:border-gray-700 dark:bg-gray-900/40">
              <div className="font-medium text-gray-900 dark:text-white">Transactions</div>
              <div className="mt-2">
                Open any recent transfer from the token page and look for GRU-aware transfer badges and the transaction evidence matrix on the transaction detail page.
              </div>
            </div>
          </div>
        </Card>

        <Card title="Chain 138 Practical Reading">
          <div className="space-y-3 text-sm text-gray-600 dark:text-gray-400">
            <p>
              A token can be forward-canonical and x402-ready even while older liquidity or bridge lanes still run on a prior version.
              That is why the explorer separates active liquidity posture from forward-canonical posture.
            </p>
            <p>
              The most important live examples today are the USD family promotions where the V2 contracts are the preferred payment and future-canonical surface,
              while some V1 liquidity still coexists operationally.
            </p>
            <p>
              On token pages, look for the GRU standards card, x402 posture badges, ISO-20022 badges, and sibling-network references. On transaction pages,
              look for GRU-aware transfer badges and the transaction evidence matrix.
            </p>
          </div>
        </Card>

        <Card title="Next Places To Look">
          <div className="flex flex-wrap gap-3 text-sm">
            <Link href="/search" className="text-primary-600 hover:underline">
              Search the explorer →
            </Link>
            <Link href="/tokens" className="text-primary-600 hover:underline">
              Inspect token pages →
            </Link>
            <Link href="/docs/transaction-review" className="text-primary-600 hover:underline">
              Transaction review guide →
            </Link>
            <Link href="/transactions" className="text-primary-600 hover:underline">
              Check transaction transfers →
            </Link>
            <Link href="/docs" className="text-primary-600 hover:underline">
              General documentation →
            </Link>
          </div>
        </Card>
      </div>
    </div>
  )
}