import type { Metadata } from 'next';
import Link from 'next/link';
import { PageHeader } from '@/components/ui/page-header';
import { Badge } from '@/components/ui/primitives';
import { getCategoryCounts } from '@/lib/queries/markets';
import { getCategoryThumbnails } from '@/lib/queries/assets';
import { Thumb } from '@/components/market/bits';
import { FAMILIES, getCategory } from '@rareindex/taxonomy';
import { fmtNum } from '@/lib/format';
import { INDICES } from '@rareindex/taxonomy';

export const metadata: Metadata = { title: 'Categories', description: 'The RareIndex collectible taxonomy: every family and subcategory tracked, with launch phase and live coverage.' };
export const revalidate = 300;

export default async function CategoriesPage() {
  const counts = await getCategoryCounts();
  const thumbs = await getCategoryThumbnails(FAMILIES.flatMap((f) => [f.slug, ...f.children]));
  const total = (slugs: string[]) => slugs.reduce((a, s) => a + (counts.get(s)?.assets ?? 0), 0);
  const groups = [1, 2, 3].map((phase) => ({ phase, families: FAMILIES.filter((f) => f.phase === phase) }));
  return (
    <div>
      <PageHeader kicker="Taxonomy" title="Categories" description={`An extensible taxonomy of ${FAMILIES.length} collectible families. Phase 1 is the launch wedge; every family is architected for data from day one. New categories are proposed automatically from market data and approved by an editor.`} />
      {groups.map((g) => (
        <section key={g.phase} className="mb-8">
          <h2 className="mb-3 flex items-center gap-2 text-sm font-semibold">
            Phase {g.phase}
            <span className="text-xs font-normal text-muted">{g.phase === 1 ? 'Launch wedge' : g.phase === 2 ? 'Next expansion' : 'Full universe'}</span>
            <span className="num text-xs font-normal text-subtle">{g.families.length} families</span>
          </h2>
          <div className="grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
            {g.families.map((f) => {
              const assets = total([f.slug, ...f.children.flatMap((c) => [c, ...(getCategory(c)?.children ?? [])])]);
              const idx = INDICES.find((i) => i.ticker === f.index);
              return (
                <div key={f.slug} className="card flex flex-col p-3">
                  <div className="flex items-start justify-between gap-2">
                    <Link href={`/markets/${f.slug}`} className="flex min-w-0 items-center gap-2 text-[13px] font-semibold text-fg hover:underline">
                      <Thumb src={thumbs.get(f.slug) ?? f.children.map((c) => thumbs.get(c)).find(Boolean)} alt="" size={28} rounded="rounded-md" />
                      <span className="truncate">{f.name}</span>
                    </Link>
                    {idx ? (
                      <Link href={`/rareindex/${idx.ticker}`} className="shrink-0">
                        <Badge tone="index">{idx.ticker}</Badge>
                      </Link>
                    ) : null}
                  </div>
                  {f.description ? <p className="mt-1 line-clamp-2 text-[11px] text-muted">{f.description}</p> : null}
                  {f.children.length ? (
                    <ul className="mt-2 flex flex-wrap gap-1">
                      {f.children.map((c) => {
                        const n = getCategory(c)!;
                        const cnt = counts.get(c)?.assets ?? 0;
                        return (
                          <li key={c}>
                            <Link href={`/markets/${c}`} className="rounded-sm bg-inset px-1.5 py-0.5 text-[11px] text-muted hover:text-fg">
                              {n.name}
                              {cnt ? <span className="num ml-1 text-subtle">{fmtNum(cnt, { compact: true })}</span> : null}
                            </Link>
                          </li>
                        );
                      })}
                    </ul>
                  ) : null}
                  <div className="mt-auto flex items-center justify-between pt-2 text-[11px] text-subtle">
                    <span className="num">{assets ? `${fmtNum(assets)} assets` : 'no data yet'}</span>
                    {assets ? (
                      <Link href={`/markets/${f.slug}#assets`} className="text-muted hover:text-fg">
                        Browse →
                      </Link>
                    ) : (
                      <span>{f.conditionScale ? `scale: ${f.conditionScale}` : ''}</span>
                    )}
                  </div>
                </div>
              );
            })}
          </div>
        </section>
      ))}
    </div>
  );
}