import type { Metadata } from 'next';
import Link from 'next/link';
import { PageHeader } from '@/components/ui/page-header';
import { Card, CardHeader, EmptyState, Table, th, td, tdNum } from '@/components/ui/primitives';
import { BarChart } from '@/components/charts/bar-chart';
import { getDbGraders, getGradePremiums, getGraderActivity } from '@/lib/queries/market-lists';
import { fmtMoney, fmtNum, fmtRelative, cn } from '@/lib/format';
import { catName } from '@/lib/taxonomy';

export const metadata: Metadata = { title: 'Grading', description: 'Grading companies, scales, empirical grade premiums and population data. PSA 10, BGS 10 and CGC 10 are never assumed equivalent.' };
export const revalidate = 600;

export default async function GradingPage() {
  const [graders, premiums, activity] = await Promise.all([getDbGraders(), getGradePremiums(), getGraderActivity()]);
  const act = new Map(activity.map((a) => [a.grader, a]));
  const byCat = new Map<string, typeof premiums>();
  for (const p of premiums) (byCat.get(p.categorySlug) ?? byCat.set(p.categorySlug, []).get(p.categorySlug)!).push(p);
  return (
    <div>
      <PageHeader kicker="Reference" title="Grading" description="Grades are tracked per grading company. A market multiplier is measured empirically from sales of the same asset in different grades (§118): PSA 10 ≠ BGS 10 ≠ CGC 10 until the data says otherwise." />
      <Card className="overflow-hidden">
        <CardHeader title="Grading companies" subtitle="Scale, categories and observed activity in RareIndex" />
        <Table>
          <thead>
            <tr>
              <th className={th}>Grader</th>
              <th className={th}>Scale</th>
              <th className={th}>Categories</th>
              <th className={cn(th, 'text-right')}>Graded sales</th>
              <th className={cn(th, 'text-right')}>Assets</th>
              <th className={cn(th, 'text-right')}>Median sale</th>
              <th className={cn(th, 'text-right')}>Pop reports</th>
              <th className={th}>Links</th>
            </tr>
          </thead>
          <tbody>
            {graders.map((g) => {
              const a = act.get(g.slug);
              return (
                <tr key={g.slug} className="hover:bg-sunken">
                  <td className={cn(td, 'font-medium')}>{g.name}</td>
                  <td className={cn(td, 'text-muted')}>
                    {g.scale.type}
                    {g.scale.top ? ` · top ${g.scale.top}` : ''}
                    {g.scale.values.length ? ` · ${g.scale.values.length} steps` : ''}
                  </td>
                  <td className={cn(td, 'max-w-[260px] truncate text-muted')}>{g.categorySlugs.map(catName).join(', ') || '—'}</td>
                  <td className={tdNum}>{fmtNum(a?.sales ?? 0)}</td>
                  <td className={tdNum}>{fmtNum(a?.assets ?? 0)}</td>
                  <td className={tdNum}>{a?.medianUsd != null ? fmtMoney(a.medianUsd) : '—'}</td>
                  <td className={tdNum}>{fmtNum(a?.populationReports ?? 0)}</td>
                  <td className={cn(td, 'text-[11px]')}>
                    {g.populationUrl ? (
                      <a href={g.populationUrl} target="_blank" rel="noopener nofollow" className="mr-2 text-muted hover:text-fg">
                        Population ↗
                      </a>
                    ) : null}
                    {g.verifyUrl ? (
                      <a href={g.verifyUrl.replace('{cert}', '')} target="_blank" rel="noopener nofollow" className="text-muted hover:text-fg">
                        Verify ↗
                      </a>
                    ) : null}
                  </td>
                </tr>
              );
            })}
          </tbody>
        </Table>
      </Card>

      <Card className="mt-4">
        <CardHeader title="Empirical grade premiums" subtitle="Market multiplier vs the category's raw/base price, with sample size; recomputed by the valuation worker" />
        {byCat.size ? (
          <div className="grid gap-6 p-4 lg:grid-cols-2">
            {[...byCat.entries()].map(([cat, rows]) => (
              <div key={cat}>
                <h3 className="mb-2 text-xs font-semibold">
                  <Link href={`/markets/${cat}`} className="hover:underline">
                    {catName(cat)}
                  </Link>
                  <span className="ml-2 text-[11px] font-normal text-subtle">updated {fmtRelative(rows[0]!.computedAt)}</span>
                </h3>
                <BarChart ariaLabel={`Grade premiums for ${catName(cat)}`} data={rows.slice(0, 14).map((r) => ({ label: `${r.grader.toUpperCase()} ${r.grade}`, value: r.marketMultiplier, sublabel: `n=${r.sampleSize}` }))} maxBars={14} />
              </div>
            ))}
          </div>
        ) : (
          <EmptyState title="No premiums computed yet" description="Premiums require the same asset to have sold in several grades; they appear as sales accumulate." />
        )}
      </Card>
      <p className="mt-3 text-[11px] leading-relaxed text-subtle">RareIndex does not grade or authenticate items. Certification numbers shown on sales and listings are as published by the source; verify them with the grading company.</p>
    </div>
  );
}