import type { Metadata } from 'next';
import { PageHeader } from '@/components/ui/page-header';
import { Tabs } from '@/components/ui/tabs';
import { Card, EmptyState, Badge } from '@/components/ui/primitives';
import { Pagination } from '@/components/ui/pagination';
import { listNews } from '@/lib/queries/market-lists';
import { fmtDate } from '@/lib/format';
import { catName, humanize } from '@/lib/taxonomy';
import { sp1, spInt, type SP } from '@/lib/search-params';

export const metadata: Metadata = { title: 'Market news', description: 'Collectibles market news: auction results, record sales, grading changes, releases, trends, discoveries and events, summarised with links to the source.' };

const TYPES = ['auction_results', 'record_sales', 'grading', 'releases', 'trends', 'discoveries', 'events'];

export default async function NewsPage({ searchParams }: { searchParams: Promise<SP> }) {
  const sp = await searchParams;
  const type = sp1(sp, 'type') ?? null;
  const category = sp1(sp, 'category') ?? null;
  const page = spInt(sp, 'page');
  const res = await listNews({ type, category, page, limit: 40 });
  return (
    <div>
      <PageHeader kicker="Editorial" title="News" description="Aggregated from public sources with attribution. AI summaries, when present, always link to the original article and never replace it (§156)." compact />
      <Tabs active={type ?? 'all'} tabs={[{ id: 'all', label: 'All', href: '/news' }, ...TYPES.map((t) => ({ id: t, label: humanize(t), href: `/news?type=${t}` }))]} className="mb-4" />
      {res.items.length ? (
        <>
          <ul className="grid grid-cols-1 gap-2 md:grid-cols-2">
            {res.items.map((n) => (
              <li key={n.id} className="card p-3">
                <div className="flex items-center gap-2 text-[11px] text-muted">
                  {n.newsType ? <Badge>{humanize(n.newsType)}</Badge> : null}
                  <span>{n.sourceName}</span>
                  <span>· {n.publishedAt ? fmtDate(n.publishedAt) : 'undated'}</span>
                </div>
                <a href={n.url} target="_blank" rel="noopener nofollow" className="mt-1 block text-[14px] font-medium text-fg hover:underline">
                  {n.title}
                </a>
                {n.aiSummary || n.summary ? <p className="mt-1 line-clamp-3 text-[12px] leading-relaxed text-muted">{n.aiSummary ?? n.summary}</p> : null}
                {n.categorySlugs.length ? <div className="mt-1.5 text-[11px] text-subtle">{n.categorySlugs.map(catName).join(' · ')}</div> : null}
              </li>
            ))}
          </ul>
          <Pagination page={page} pageSize={40} total={res.total} basePath="/news" params={{ type: type ?? undefined, category: category ?? undefined }} />
        </>
      ) : (
        <Card>
          <EmptyState title="No news indexed yet" description="News connectors are not yet publishing. Nothing is shown until real articles are ingested." />
        </Card>
      )}
    </div>
  );
}