explorer-monorepo/frontend/src/pages/docs/public-api-access.tsx

'use client'

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

export default function PublicApiAccessDocsPage() {
  return (
    <div className="container mx-auto px-4 py-4 sm:py-6">
      <PageIntro
        compact
        eyebrow="Explorer Documentation"
        title="Public API access"
        description="How integrators use read-only explorer APIs today, how managed RPC keys work on /access, and the planned path if public rate limits require API keys."
        actions={[
          { href: '/access', label: 'Account access' },
          { href: '/wallet', label: 'Wallet tools' },
          { href: '/operations', label: 'Operations hub' },
        ]}
      />

      <div className="space-y-6">
        <Card title="Decision summary (2026-05-23)">
          <ul className="list-disc space-y-2 pl-5 text-sm leading-6 text-gray-600 dark:text-gray-400">
            <li>
              <strong>Blockscout read API</strong> (<code>/api/v2/*</code>) and the public JSON surfaces listed below remain{' '}
              <strong>unauthenticated</strong> for integrators on the public explorer domain.
            </li>
            <li>
              <strong>Managed RPC product keys</strong> are issued through wallet-authenticated{' '}
              <Link href="/access" className="text-primary-600 hover:underline">
                Account access
              </Link>{' '}
              (Core RPC / thirdweb-rpc products). These keys gate managed RPC endpoints — not the public Blockscout read layer.
            </li>
            <li>
              If abuse or rate limits require change, the preferred near-term path is <strong>Option B</strong>: nginx/API-gateway
              throttling with optional <code>X-API-Key</code> for higher quotas. A full external developer portal remains optional.
            </li>
          </ul>
        </Card>

        <Card title="Read-only public endpoints (no key)">
          <ul className="space-y-3 text-sm">
            {explorerPublicApiLinks.map((link) => (
              <li key={link.href}>
                <a href={link.href} className="font-medium text-primary-600 hover:underline" target="_blank" rel="noopener noreferrer">
                  {link.label}
                </a>
                <p className="mt-0.5 text-gray-600 dark:text-gray-400">{link.description}</p>
              </li>
            ))}
            <li>
              <span className="font-medium text-gray-900 dark:text-white">Blockscout v2</span>
              <p className="mt-0.5 text-gray-600 dark:text-gray-400">
                Same-origin <code>/api/v2/stats</code>, blocks, transactions, tokens, and address endpoints proxied to Blockscout.
              </p>
            </li>
          </ul>
        </Card>

        <Card title="Requesting higher limits or RPC keys">
          <div className="space-y-3 text-sm leading-6 text-gray-600 dark:text-gray-400">
            <p>
              For managed RPC access, connect a wallet on{' '}
              <Link href="/wallet" className="text-primary-600 hover:underline">
                Wallet tools
              </Link>{' '}
              then open{' '}
              <Link href="/access" className="text-primary-600 hover:underline">
                Account access
              </Link>{' '}
              to create scoped keys with tier, product, expiry, and optional monthly quota.
            </p>
            <p>
              For integrator questions about public JSON endpoints or future Blockscout key policy, email{' '}
              <a href="mailto:support@d-bis.org" className="text-primary-600 hover:underline">
                support@d-bis.org
              </a>
              .
            </p>
          </div>
        </Card>
      </div>
    </div>
  )
}