'use client'

import Link from 'next/link'
import { Card } from '@/libs/frontend-ui-primitives'
import PageIntro from '@/components/common/PageIntro'
import PostureBadge from '@/components/common/PostureBadge'
import { postureGlossaryTerms } from '@/data/postureGlossary'

export default function PostureGlossaryDocsPage() {
  return (
    <div className="container mx-auto px-4 py-4 sm:py-6">
      <PageIntro
        compact
        eyebrow="Explorer Documentation"
        title="Posture glossary"
        description="First-read explanations for institutional posture badges shown on token, address, transaction, and search surfaces."
        actions={[
          { href: '/docs/gru', label: 'GRU guide' },
          { href: '/tokens', label: 'Browse tokens' },
          { href: '/search?q=cUSDC', label: 'Search cUSDC' },
        ]}
      />

      <div className="space-y-6">
        <Card title="How to use this glossary">
          <p className="text-sm leading-6 text-gray-600 dark:text-gray-400">
            Click any posture badge on a live token, address, or transaction page to open the same definitions in a drawer.
            This page is the canonical long-form reference for audit and policy reviewers.
          </p>
          <div className="mt-4 flex flex-wrap gap-2">
            <PostureBadge label="GRU" tone="success" />
            <PostureBadge label="x402 ready" tone="info" />
            <PostureBadge label="ISO-20022" tone="info" />
            <PostureBadge label="forward canonical" tone="success" />
            <PostureBadge label="reference asset" tone="info" />
          </div>
        </Card>

        {postureGlossaryTerms.map((term) => (
          <div key={term.id} id={term.id === 'transport-active' ? 'transportactive-config-compatibility' : undefined}>
            <Card title={term.title}>
            <div className="space-y-3 text-sm leading-6 text-gray-600 dark:text-gray-400">
              <p>{term.summary}</p>
              <div className="rounded-xl border border-sky-200 bg-sky-50/70 p-4 text-sky-950 dark:border-sky-900/50 dark:bg-sky-950/20 dark:text-sky-100">
                <p className="text-xs font-semibold uppercase tracking-wide text-sky-700 dark:text-sky-300">Methodology</p>
                <p className="mt-2">{term.methodology}</p>
              </div>
              {term.id === 'transport-active' ? (
                <p>
                  Planned v2 aliases: <code className="rounded bg-gray-100 px-1.5 py-0.5 text-xs dark:bg-gray-900">publicNetworkActive</code>
                  {' '}and{' '}
                  <code className="rounded bg-gray-100 px-1.5 py-0.5 text-xs dark:bg-gray-900">livePublicNetworkAssets</code>.
                </p>
              ) : null}
            </div>
          </Card>
          </div>
        ))}

        <Card title="Related references">
          <ul className="list-disc space-y-2 pl-5 text-sm leading-6 text-gray-600 dark:text-gray-400">
            <li>
              <Link href="/docs/gru" className="text-primary-600 hover:underline">
                GRU guide
              </Link>
            </li>
            <li>
              <Link href="/docs/public-api-access" className="text-primary-600 hover:underline">
                Public API access
              </Link>
            </li>
            <li>
              Public machine config at{' '}
              <a href="/config/DUAL_CHAIN_TOKEN_LIST.tokenlist.json" className="text-primary-600 hover:underline">
                /config/DUAL_CHAIN_TOKEN_LIST.tokenlist.json
              </a>
            </li>
          </ul>
        </Card>
      </div>
    </div>
  )
}
