import type { Metadata } from 'next';
import Link from 'next/link';
import { HBars } from '@/components/charts/charts';
import { DEFAULT_METRIC, findMetric, METRICS, type Row } from '@/components/stats/rankings-config';
import { Chips, Derived, InlineRank, Note } from '@/components/stats/shared';
import { Container, PageHeader, Section } from '@/components/ui/section';
import { Unavailable } from '@/components/ui/unavailable';
import { api, safe } from '@/lib/api';
import { fmtAgo, fmtInt } from '@/lib/format';
import { routes, SITE_NAME, SITE_URL } from '@/lib/site';

export const revalidate = 600;

type Search = Promise<{ metric?: string | string[] }>;

function pick(v: string | string[] | undefined): string | undefined {
  return Array.isArray(v) ? v[0] : v;
}

export async function generateMetadata({ searchParams }: { searchParams: Search }): Promise<Metadata> {
  const m = findMetric(pick((await searchParams).metric) ?? DEFAULT_METRIC);
  const url = `${SITE_URL}${m.key === DEFAULT_METRIC ? routes.rankings() : routes.rankings(m.key)}`;
  const title = `${m.title} — Rankings`;
  return {
    title,
    description: m.description,
    alternates: { canonical: url },
    openGraph: { title: `${title} | ${SITE_NAME}`, description: m.description, url, type: 'website', siteName: SITE_NAME },
    twitter: { card: 'summary_large_image', title: `${title} | ${SITE_NAME}`, description: m.description },
  };
}

export default async function RankingsPage({ searchParams }: { searchParams: Search }) {
  const metricKey = pick((await searchParams).metric) ?? DEFAULT_METRIC;
  const m = findMetric(metricKey);
  const res = await safe(api.rankings(m.key, 50));
  const rows: Row[] = res?.data.rows ?? [];
  const top = rows.slice(0, 10).map((r) => ({ label: m.name(r), value: m.primary(r), href: m.href(r) ?? undefined }));
  const chips = METRICS.map((x) => ({ href: x.key === DEFAULT_METRIC ? routes.rankings() : routes.rankings(x.key), label: x.label, active: x.key === m.key }));
  const hasDerived = m.columns.some((c) => c.derived);

  return (
    <Container>
      <PageHeader eyebrow="Rankings" title={m.title} lede={m.description}>
        <div className="mt-6">
          <Chips items={chips} ariaLabel="Ranking metric" />
        </div>
      </PageHeader>

      {m.warn && <Note tone="warn" className="mb-6">{m.warn}</Note>}

      {!res ? (
        <div className="py-6">
          <Unavailable what="Ranking" />
        </div>
      ) : rows.length === 0 ? (
        <div className="py-6">
          <Unavailable what="Ranking rows" />
        </div>
      ) : (
        <>
          <Section eyebrow="Top 10" title={m.primaryLabel} className="pt-0 md:pt-0">
            <HBars data={top} valueFormat={m.primaryFormat ?? fmtInt} />
          </Section>

          <Section eyebrow={`${fmtInt(rows.length)} rows`} title="Full ranking" className="pt-0 md:pt-0">
            <div className="overflow-x-hidden">
              <table className="data-table stack text-sm">
                <thead>
                  <tr>
                    {m.columns.map((c) => (
                      <th key={c.key} className={c.num ? 'num' : undefined}>
                        {c.label}
                        {c.derived && <Derived className="ml-1.5 normal-case" />}
                      </th>
                    ))}
                  </tr>
                </thead>
                <tbody>
                  {rows.map((r, i) => (
                    <tr key={`${m.key}-${i}`}>
                      {m.columns.map((c, ci) => (
                        <td key={c.key} data-label={ci === 0 ? undefined : c.label} className={[c.num ? 'num tnum' : '', ci === 0 ? 'primary' : ''].join(' ').trim() || undefined}>
                          {ci === 0 ? (
                            <div className="flex items-start">
                              <InlineRank n={i + 1} />
                              {c.render(r)}
                            </div>
                          ) : (
                            c.render(r)
                          )}
                        </td>
                      ))}
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
            {(m.note || hasDerived) && (
              <Note className="mt-4">
                {m.note ?? (
                  <>
                    Columns marked <Derived className="mx-1" /> are computed by SatelliteIndex.
                  </>
                )}{' '}
                <Link href={routes.methodology()} className="text-accent hover:underline">Methodology</Link>
              </Note>
            )}
            <p className="mono mt-3 text-xs text-ink-3">Generated {fmtAgo(res.meta.generated_at)} · limit 50 · source: SatelliteIndex canonical catalogue (CelesTrak SATCAT + GP)</p>
          </Section>
        </>
      )}
    </Container>
  );
}