import type { Metadata } from 'next';
import { unstable_cache } from 'next/cache';

import Link from 'next/link';
import { readFile } from 'node:fs/promises';
import path from 'node:path';
import { PageHeader } from '@/components/ui/page-header';
import { Card, CardHeader, Table, th, td, tdNum, Badge, EmptyState, Stat } from '@/components/ui/primitives';
import { getSiteStats } from '@/lib/queries/site';
import { getConnectorCoverage, getFxCoverage } from '@/lib/queries/market-lists';
import { getMarketRows } from '@/lib/queries/markets';
import { fmtNum, fmtRelative, cn } from '@/lib/format';
import { catName, humanize } from '@/lib/taxonomy';

export const metadata: Metadata = { title: 'Data & methodology', description: 'Coverage by category, source and connector; RareIndex methodology; exports and API access.' };
// Coverage aggregates over millions of rows take ~70 s: prerender at build (staticPageGenerationTimeout raised), then hourly ISR.
// Rendered on demand and cached for an hour at runtime: the coverage aggregates run over millions of
// rows and exceeded the 240 s prerender budget at build time, which broke deployments.
export const dynamic = 'force-dynamic';
const loadDataPage = unstable_cache(async () => Promise.all([getSiteStats(), getConnectorCoverage(), getFxCoverage(), getMarketRows()]), ['data-page-v1'], { revalidate: 3600 });

async function loadMethodology(): Promise<string> {
  const candidates = [path.resolve(process.cwd(), '../../docs/METHODOLOGY.md'), path.resolve(process.cwd(), 'docs/METHODOLOGY.md'), path.resolve(process.cwd(), '../docs/METHODOLOGY.md')];
  for (const p of candidates) {
    try {
      return await readFile(p, 'utf8');
    } catch {
      /* try next */
    }
  }
  return '';
}

/** Minimal markdown → JSX for headings, paragraphs and bullet lists (methodology doc is controlled content). */
function Markdown({ text }: { text: string }) {
  const blocks = text.split(/\n{2,}/);
  return (
    <div className="prose-ri space-y-3 text-[13px] leading-relaxed text-muted">
      {blocks.map((b, i) => {
        const t = b.trim();
        if (!t) return null;
        if (t.startsWith('# ')) return <h2 key={i} className="text-lg font-semibold text-fg">{t.slice(2)}</h2>;
        if (t.startsWith('## ')) return <h3 key={i} id={t.slice(3).toLowerCase().replace(/[^a-z0-9]+/g, '-')} className="pt-2 text-sm font-semibold text-fg">{t.slice(3)}</h3>;
        if (t.startsWith('### ')) return <h4 key={i} id={t.slice(4).toLowerCase().replace(/[^a-z0-9]+/g, '-')} className="pt-1 text-[12px] font-semibold uppercase tracking-wider text-subtle">{t.slice(4)}</h4>;
        if (t.startsWith('- ')) return <ul key={i} className="list-disc space-y-1 pl-5">{t.split('\n').map((l, j) => <li key={j} dangerouslySetInnerHTML={{ __html: inline(l.replace(/^- /, '')) }} />)}</ul>;
        return <p key={i} dangerouslySetInnerHTML={{ __html: inline(t.replace(/\n/g, ' ')) }} />;
      })}
    </div>
  );
}
function inline(s: string): string {
  return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/\*\*(.+?)\*\*/g, '<strong class="text-fg">$1</strong>').replace(/\*(.+?)\*/g, '<em>$1</em>').replace(/`(.+?)`/g, '<code class="rounded-sm bg-inset px-1">$1</code>');
}

export default async function DataPage() {
  const [[stats, connectors, fx, rows], md] = await Promise.all([loadDataPage(), loadMethodology()]);
  const active = rows.filter((r) => r.counts.assets > 0);
  return (
    <div>
      <PageHeader kicker="Transparency" title="Data" description="What RareIndex covers today, where it comes from, and how the numbers are computed. Coverage figures are live counts." />
      <section className="grid grid-cols-2 gap-px overflow-hidden rounded-md border border-border bg-border sm:grid-cols-4 lg:grid-cols-8">
        {[
          ['Assets', fmtNum(stats.assets)],
          ['Sales', fmtNum(stats.sales)],
          ['Observations', fmtNum(stats.observations)],
          ['Active listings', fmtNum(stats.activeListings)],
          ['Sources', fmtNum(stats.sources)],
          ['Connectors', fmtNum(stats.connectors)],
          ['Categories with data', `${active.length}/${rows.length}`],
          ['FX rates', fx.rows ? `${fmtNum(fx.rows)} · ${fx.first}→${fx.last}` : '—'],
        ].map(([k, v]) => (
          <div key={k} className="bg-elevated px-3 py-2.5">
            <Stat label={k} value={v} />
          </div>
        ))}
      </section>

      <Card className="mt-4 overflow-hidden">
        <CardHeader title="Connectors & sources" subtitle="Every source, what it contributes and its health. Trust scores weight sources in valuations." />
        {connectors.length ? (
          <Table>
            <thead>
              <tr>
                <th className={th}>Connector</th>
                <th className={th}>Source</th>
                <th className={th}>Type</th>
                <th className={th}>Contributes</th>
                <th className={th}>Categories</th>
                <th className={cn(th, 'text-right')}>Trust</th>
                <th className={cn(th, 'text-right')}>Raw</th>
                <th className={cn(th, 'text-right')}>Sales</th>
                <th className={cn(th, 'text-right')}>Listings</th>
                <th className={cn(th, 'text-right')}>Observations</th>
                <th className={th}>Health</th>
                <th className={th}>Last success</th>
              </tr>
            </thead>
            <tbody>
              {connectors.map((c) => (
                <tr key={c.id} className="hover:bg-sunken">
                  <td className={cn(td, 'font-medium')}>{c.displayName}</td>
                  <td className={td}>
                    {c.sourceUrl ? (
                      <a href={c.sourceUrl} target="_blank" rel="noopener nofollow" className="text-muted hover:text-fg">
                        {c.sourceName} ↗
                      </a>
                    ) : (
                      c.sourceName
                    )}
                  </td>
                  <td className={cn(td, 'text-muted')}>{humanize(c.sourceType)}</td>
                  <td className={cn(td, 'text-[11px] text-muted')}>{[c.supportsSold && 'sales', c.supportsListings && 'listings', c.supportsCatalog && 'catalog', c.supportsAuctions && 'auctions', c.supportsPopulation && 'population'].filter(Boolean).join(' · ') || '—'}</td>
                  <td className={cn(td, 'max-w-[220px] truncate text-[11px] text-muted')} title={c.categories.map(catName).join(', ')}>
                    {c.categories.map(catName).join(', ')}
                  </td>
                  <td className={tdNum}>{Math.round(c.trustScore * 100)}%</td>
                  <td className={tdNum}>{fmtNum(c.rawRecords)}</td>
                  <td className={tdNum}>{fmtNum(c.sales)}</td>
                  <td className={tdNum}>{fmtNum(c.listings)}</td>
                  <td className={tdNum}>{fmtNum(c.observations)}</td>
                  <td className={td}>
                    <Badge tone={c.healthStatus === 'healthy' ? 'gain' : c.healthStatus === 'degraded' ? 'alert' : c.healthStatus === 'failing' ? 'loss' : 'neutral'}>{c.healthStatus ?? c.status}</Badge>
                  </td>
                  <td className={cn(td, 'text-muted')}>{c.lastSuccessAt ? fmtRelative(c.lastSuccessAt) : 'never'}</td>
                </tr>
              ))}
            </tbody>
          </Table>
        ) : (
          <EmptyState title="No connectors registered yet" description="Connectors are declared in the registry and mirrored here after seeding." />
        )}
      </Card>

      <Card className="mt-4 overflow-hidden">
        <CardHeader title="Coverage by category" subtitle="Live counts from canonical tables" />
        <Table>
          <thead>
            <tr>
              <th className={th}>Category</th>
              <th className={cn(th, 'text-right')}>Assets</th>
              <th className={cn(th, 'text-right')}>Priced</th>
              <th className={cn(th, 'text-right')}>Sales</th>
              <th className={cn(th, 'text-right')}>Listings</th>
              <th className={cn(th, 'text-right')}>Observations</th>
              <th className={th}>Last sale</th>
            </tr>
          </thead>
          <tbody>
            {[...rows].sort((a, b) => b.counts.assets - a.counts.assets).map((r) => (
              <tr key={r.node.slug} className={cn('hover:bg-sunken', r.counts.assets === 0 && 'text-subtle')}>
                <td className={td}>
                  <Link href={`/markets/${r.node.slug}`} className="hover:underline">
                    {r.node.name}
                  </Link>
                  <Badge className="ml-2">P{r.node.phase}</Badge>
                </td>
                <td className={tdNum}>{fmtNum(r.counts.assets)}</td>
                <td className={tdNum}>{fmtNum(r.counts.priced)}</td>
                <td className={tdNum}>{fmtNum(r.counts.sales)}</td>
                <td className={tdNum}>{fmtNum(r.counts.listings)}</td>
                <td className={tdNum}>{fmtNum(r.counts.observations)}</td>
                <td className={cn(td, 'text-muted')}>{r.counts.lastSaleAt ? fmtRelative(r.counts.lastSaleAt) : '—'}</td>
              </tr>
            ))}
          </tbody>
        </Table>
      </Card>

      <div className="mt-4 grid gap-4 lg:grid-cols-[2fr_1fr]">
        <Card className="p-5" as="article">
          <div id="methodology" />
          {md ? <Markdown text={md} /> : <EmptyState title="Methodology document not found" />}
        </Card>
        <Card className="p-5 self-start">
          <h2 className="text-sm font-semibold">Exports & API</h2>
          <p className="mt-1 text-[12px] leading-relaxed text-muted">Professional and research users can export comparable sales, price histories and index series as CSV or JSON through the public API. Each export carries source attribution and the timestamp of the underlying observations.</p>
          <ul className="mt-3 space-y-1 text-[12px]">
            <li>
              <code className="rounded-sm bg-inset px-1">GET /v1/assets/:id/sales?format=csv</code>
            </li>
            <li>
              <code className="rounded-sm bg-inset px-1">GET /v1/assets/:id/history?format=csv</code>
            </li>
            <li>
              <code className="rounded-sm bg-inset px-1">GET /v1/indices/:ticker/history?format=json</code>
            </li>
          </ul>
          <Link href="/api-docs" className="mt-3 inline-block text-xs font-medium text-fg underline">
            API documentation →
          </Link>
          <h3 className="mt-5 text-sm font-semibold">Corrections</h3>
          <p className="mt-1 text-[12px] leading-relaxed text-muted">Spotted a misidentified item, a duplicate or a wrong price? Every record links to its source; write to data@rareindex.io with the asset URL and we will review it against the audit log.</p>
        </Card>
      </div>
    </div>
  );
}