import type { Metadata } from 'next';
import { Suspense } from 'react';
import { PageHeader } from '@/components/ui/page-header';
import { Segmented } from '@/components/ui/tabs';
import { FilterBar } from '@/components/ui/filter-bar';
import { Card, EmptyState, Badge } from '@/components/ui/primitives';
import { listAuctionHouses, listAuctions } from '@/lib/queries/market-lists';
import { fmtDate, fmtRelative } from '@/lib/format';
import { catName } from '@/lib/taxonomy';
import { FAMILIES } from '@rareindex/taxonomy';
import { sp1, spEnum, withParams, type SP } from '@/lib/search-params';

export const metadata: Metadata = { title: 'Auction calendar', description: 'Upcoming collectible auctions today, this week and this month, filterable by category, house and region.' };

export default async function CalendarPage({ searchParams }: { searchParams: Promise<SP> }) {
  const sp = await searchParams;
  const range = spEnum(sp, 'range', ['today', 'week', 'month'] as const, 'week');
  const category = sp1(sp, 'category') ?? null;
  const house = sp1(sp, 'house') ?? null;
  const now = new Date();
  const to = new Date(now.getTime() + (range === 'today' ? 1 : range === 'week' ? 7 : 31) * 86_400_000);
  const [auctions, houses] = await Promise.all([listAuctions({ from: now, to, category, house, limit: 200 }), listAuctionHouses()]);
  const byDay = new Map<string, typeof auctions>();
  for (const a of auctions) {
    const d = (a.endsAt ?? a.startsAt ?? now).toISOString().slice(0, 10);
    (byDay.get(d) ?? byDay.set(d, []).get(d)!).push(a);
  }
  const params = { category: category ?? undefined, house: house ?? undefined };
  return (
    <div>
      <PageHeader kicker="Auction houses" crumbs={[{ label: 'Auctions', href: '/auctions' }, { label: 'Calendar' }]} title="Auction calendar" description="Auctions closing in the selected window, grouped by day (UTC)." compact />
      <div className="mb-4 flex flex-wrap items-end justify-between gap-3">
        <Segmented active={range} options={[{ id: 'today', label: 'Today', href: withParams('/auctions/calendar', { ...params, range: 'today' }) }, { id: 'week', label: 'This week', href: withParams('/auctions/calendar', { ...params, range: 'week' }) }, { id: 'month', label: 'This month', href: withParams('/auctions/calendar', { ...params, range: 'month' }) }]} />
        <Suspense>
          <FilterBar fields={[{ name: 'category', label: 'Category', type: 'select', options: FAMILIES.map((f) => ({ value: f.slug, label: f.name })), width: 'w-44' }, { name: 'house', label: 'House', type: 'select', options: houses.map((h) => ({ value: h.house, label: h.house })), width: 'w-44' }]} />
        </Suspense>
      </div>
      {byDay.size ? (
        <div className="space-y-4">
          {[...byDay.entries()].sort(([a], [b]) => (a < b ? -1 : 1)).map(([day, items]) => (
            <Card key={day}>
              <div className="border-b border-border px-4 py-2 text-xs font-semibold">{fmtDate(day, { month: 'long' })}</div>
              <ul className="divide-y divide-border text-[12px]">
                {items.map((a) => (
                  <li key={a.id} className="flex flex-wrap items-center justify-between gap-2 px-4 py-2">
                    <div className="min-w-0">
                      <a href={a.url} target="_blank" rel="noopener nofollow" className="font-medium text-fg hover:underline">
                        {a.name}
                      </a>
                      <div className="text-[11px] text-muted">
                        {a.auctionHouse}
                        {a.location ? ` · ${a.location}` : ''}
                        {a.categorySlugs.length ? ` · ${a.categorySlugs.slice(0, 3).map(catName).join(', ')}` : ''}
                      </div>
                    </div>
                    <div className="flex items-center gap-2 text-[11px] text-muted">
                      <Badge tone={a.status === 'live' ? 'gain' : 'index'}>{a.status}</Badge>
                      <span>{a.endsAt ? `closes ${fmtDate(a.endsAt, { time: true })} (${fmtRelative(a.endsAt)})` : a.startsAt ? `starts ${fmtDate(a.startsAt, { time: true })}` : ''}</span>
                      <span>· {a.lotsTracked} lots</span>
                    </div>
                  </li>
                ))}
              </ul>
            </Card>
          ))}
        </div>
      ) : (
        <Card>
          <EmptyState title="No auctions in this window" description="Auctions appear once auction-house connectors publish catalogues. Try a wider range." />
        </Card>
      )}
    </div>
  );
}