import type { Metadata } from 'next';
import Link from 'next/link';
import { PageHeader } from '@/components/ui/page-header';
import { Card, CardHeader, Table, th, td, Badge } from '@/components/ui/primitives';

export const metadata: Metadata = { title: 'API', description: 'RareIndex public API: assets, sales, listings, price history, categories, indices, markets and trending — with tiers and rate limits.' };

const ENDPOINTS: Array<{ method: string; path: string; desc: string; params?: string; tier: string }> = [
  { method: 'GET', path: '/v1/assets/search', desc: 'Hybrid search over canonical assets with natural-language filters.', params: 'q, category, grader, grade, min, max, limit, offset', tier: 'free' },
  { method: 'GET', path: '/v1/assets/:id', desc: 'Canonical asset with variants, RIV, scores and evidence (sample size, confidence, updated_at).', tier: 'free' },
  { method: 'GET', path: '/v1/assets/:id/sales', desc: 'Verified sales with source attribution, native currency and USD at historical FX.', params: 'variant, from, to, limit, offset, format=json|csv', tier: 'hobby' },
  { method: 'GET', path: '/v1/assets/:id/listings', desc: 'Active listings with discount to RIV.', params: 'variant, availability, limit', tier: 'hobby' },
  { method: 'GET', path: '/v1/assets/:id/history', desc: 'Daily price snapshots (RIV, median, lowest ask, volume, listings).', params: 'variant, from, to, format', tier: 'hobby' },
  { method: 'GET', path: '/v1/categories', desc: 'The taxonomy tree with live coverage counts.', tier: 'free' },
  { method: 'GET', path: '/v1/indices', desc: 'All indices with latest value, period returns and build status.', tier: 'free' },
  { method: 'GET', path: '/v1/indices/:ticker/history', desc: 'Daily index values with coverage, transactions and liquidity.', params: 'from, to, format', tier: 'professional' },
  { method: 'GET', path: '/v1/markets', desc: 'Category market rows: index, changes, sales, volume, listings, market cap estimate + confidence.', params: 'parent', tier: 'free' },
  { method: 'GET', path: '/v1/trending', desc: 'Trending assets and categories with momentum breakdown.', params: 'category, limit', tier: 'free' },
];

const TIERS = [
  ['free', '60 req/min · 1,000 req/day', 'Search, asset overview, categories, indices, markets, trending'],
  ['hobby', '120 req/min · 10,000 req/day', '+ sales, listings, history; CSV exports'],
  ['professional', '600 req/min · 100,000 req/day', '+ index history, bulk comps, webhooks (alerts)'],
  ['research', 'custom', 'Historical backfills, raw provenance, academic use'],
  ['enterprise', 'custom', 'SLA, dedicated support, custom connectors'],
];

export default function ApiDocsPage() {
  return (
    <div>
      <PageHeader kicker="Developers" title="API" description="Programmatic access to the same data that powers the site. Every response includes evidence fields (sample size, confidence, updated_at) and source attribution — never a bare number." />
      <Card className="p-5">
        <h2 className="text-sm font-semibold">Base URL & authentication</h2>
        <pre className="mt-2 overflow-x-auto rounded-md bg-sunken p-3 text-[12px] leading-relaxed"><code>{`https://www.rareindex.io/api/v1        # same-origin path
https://api.rareindex.io/v1            # dedicated host (when enabled)

Authorization: Bearer ri_live_xxxxxxxxxxxxxxxxxxxx

curl -s "https://www.rareindex.io/api/v1/assets/search?q=1999+charizard+psa+10&limit=5" \\
  -H "Authorization: Bearer $RAREINDEX_API_KEY"`}</code></pre>
        <p className="mt-2 text-[12px] text-muted">
          Keys are created from your account (
          <Link href="/account" className="underline">
            Account → API keys
          </Link>
          ). Rate limits are enforced per key and returned in <code className="rounded-sm bg-inset px-1">X-RateLimit-*</code> headers. All timestamps are ISO-8601 UTC; monetary fields carry <code className="rounded-sm bg-inset px-1">currency</code> and <code className="rounded-sm bg-inset px-1">price_usd</code>.
        </p>
      </Card>
      <Card className="mt-4 overflow-hidden">
        <CardHeader title="Endpoints" subtitle="v1 — stable contract; fields are only ever added" />
        <Table>
          <thead>
            <tr>
              <th className={th}>Method</th>
              <th className={th}>Path</th>
              <th className={th}>Description</th>
              <th className={th}>Query params</th>
              <th className={th}>Tier</th>
            </tr>
          </thead>
          <tbody>
            {ENDPOINTS.map((e) => (
              <tr key={e.path}>
                <td className={td}>
                  <Badge tone="index">{e.method}</Badge>
                </td>
                <td className={td}>
                  <code className="text-[12px]">{e.path}</code>
                </td>
                <td className={`${td} whitespace-normal text-muted`}>{e.desc}</td>
                <td className={`${td} whitespace-normal text-[11px] text-subtle`}>{e.params ?? '—'}</td>
                <td className={td}>
                  <Badge>{e.tier}+</Badge>
                </td>
              </tr>
            ))}
          </tbody>
        </Table>
      </Card>
      <div className="mt-4 grid gap-4 lg:grid-cols-2">
        <Card className="overflow-hidden">
          <CardHeader title="Tiers" subtitle="Limits are configurable per key" />
          <Table>
            <thead>
              <tr>
                <th className={th}>Tier</th>
                <th className={th}>Limits</th>
                <th className={th}>Access</th>
              </tr>
            </thead>
            <tbody>
              {TIERS.map(([t, l, a]) => (
                <tr key={t}>
                  <td className={`${td} font-medium`}>{t}</td>
                  <td className={`${td} text-muted`}>{l}</td>
                  <td className={`${td} whitespace-normal text-muted`}>{a}</td>
                </tr>
              ))}
            </tbody>
          </Table>
        </Card>
        <Card className="p-5">
          <h2 className="text-sm font-semibold">Response shape</h2>
          <pre className="mt-2 overflow-x-auto rounded-md bg-sunken p-3 text-[11px] leading-relaxed"><code>{`{
  "data": {
    "id": "rare_…", "slug": "…", "title": "…",
    "category": "pokemon",
    "valuation": {
      "riv_usd": 8450, "low_usd": 7600, "high_usd": 9300,
      "confidence": 0.82, "confidence_label": "high",
      "sample_size": 37, "updated_at": "2026-09-07T10:12:00Z"
    },
    "scores": { "liquidity": 71, "rarity": 64, "momentum_30d": 0.04 }
  },
  "meta": { "source_attribution": [...], "generated_at": "…" }
}`}</code></pre>
          <p className="mt-2 text-[12px] leading-relaxed text-muted">Missing evidence is returned as <code className="rounded-sm bg-inset px-1">null</code> with a reason, never as a fabricated value. Valuations are estimates; listing prices are not confirmed transactions.</p>
        </Card>
      </div>
    </div>
  );
}