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, Badge } from '@/components/ui/primitives';
import { Tabs } from '@/components/ui/tabs';
import { LotsTable } from '@/components/market/sales-table';
import { listAuctionHouses, listAuctions, listLots } from '@/lib/queries/market-lists';
import { fmtDate, fmtNum, fmtRelative, cn } from '@/lib/format';
import { catName } from '@/lib/taxonomy';
import { spEnum, type SP } from '@/lib/search-params';

export const metadata: Metadata = { title: 'Auctions', description: 'Auction houses, live and upcoming lots, ending-soon lots and results across the collectibles market.' };

export default async function AuctionsPage({ searchParams }: { searchParams: Promise<SP> }) {
  const sp = await searchParams;
  const tab = spEnum(sp, 'tab', ['ending', 'live', 'upcoming', 'results', 'houses'] as const, 'ending');
  const [houses, ending, lots, auctions] = await Promise.all([
    listAuctionHouses(),
    listLots({ endingWithinHours: 72, limit: 60 }),
    tab === 'results' ? listLots({ status: 'ended', limit: 60, sort: 'value' }) : tab === 'live' ? listLots({ status: 'live', limit: 60 }) : tab === 'upcoming' ? listLots({ status: 'upcoming', limit: 60 }) : Promise.resolve([]),
    listAuctions({ limit: 100 }),
  ]);
  return (
    <div>
      <PageHeader kicker="Auction houses"
        title="Auctions"
        description="Lots aggregated from auction-house connectors. Estimates and bids are the house’s own figures; hammer prices flow into Sales once an auction ends and the lot is matched to a canonical asset."
        compact
        actions={
          <Link href="/auctions/calendar" className="rounded-md border border-border px-2.5 py-1.5 text-xs font-medium hover:bg-inset">
            Auction calendar →
          </Link>
        }
      />
      <Tabs
        active={tab}
        tabs={[
          { id: 'ending', label: 'Ending soon', count: ending.length, href: '/auctions?tab=ending' },
          { id: 'live', label: 'Live', href: '/auctions?tab=live' },
          { id: 'upcoming', label: 'Upcoming', href: '/auctions?tab=upcoming' },
          { id: 'results', label: 'Results', href: '/auctions?tab=results' },
          { id: 'houses', label: 'Auction houses', count: houses.length, href: '/auctions?tab=houses' },
        ]}
        className="mb-4"
      />
      {tab === 'houses' ? (
        <Card className="overflow-hidden">
          <CardHeader title="Auction houses" subtitle="Sources with auction connectors" />
          {houses.length ? (
            <Table>
              <thead>
                <tr>
                  <th className={th}>House</th>
                  <th className={cn(th, 'text-right')}>Auctions</th>
                  <th className={cn(th, 'text-right')}>Lots tracked</th>
                  <th className={cn(th, 'text-right')}>Open</th>
                </tr>
              </thead>
              <tbody>
                {houses.map((h) => (
                  <tr key={h.house}>
                    <td className={cn(td, 'font-medium')}>{h.house}</td>
                    <td className={tdNum}>{fmtNum(h.auctions)}</td>
                    <td className={tdNum}>{fmtNum(h.lots)}</td>
                    <td className={tdNum}>{fmtNum(h.upcoming)}</td>
                  </tr>
                ))}
              </tbody>
            </Table>
          ) : (
            <EmptyState title="No auction houses connected yet" description="Auction-house connectors (results and catalogues) are part of the Phase 1 connector roadmap." />
          )}
        </Card>
      ) : (
        <div className="grid gap-4 xl:grid-cols-[2fr_1fr]">
          <Card className="overflow-hidden">
            <CardHeader title={tab === 'ending' ? 'Lots ending in the next 72 hours' : tab === 'results' ? 'Recent results by value' : `${tab[0]!.toUpperCase()}${tab.slice(1)} lots`} />
            <LotsTable items={tab === 'ending' ? ending : lots} />
          </Card>
          <Card className="overflow-hidden">
            <CardHeader title="Auctions" subtitle="Catalogues tracked" />
            {auctions.length ? (
              <ul className="divide-y divide-border text-[12px]">
                {auctions.slice(0, 40).map((a) => (
                  <li key={a.id} className="px-4 py-2">
                    <a href={a.url} target="_blank" rel="noopener nofollow" className="font-medium text-fg hover:underline">
                      {a.name}
                    </a>
                    <div className="mt-0.5 flex flex-wrap items-center gap-1.5 text-[11px] text-muted">
                      <Badge tone={a.status === 'live' ? 'gain' : a.status === 'upcoming' ? 'index' : 'neutral'}>{a.status}</Badge>
                      <span>{a.auctionHouse}</span>
                      <span>· {a.endsAt ? `ends ${fmtDate(a.endsAt)} (${fmtRelative(a.endsAt)})` : a.startsAt ? `starts ${fmtDate(a.startsAt)}` : 'dates n/a'}</span>
                      <span>· {a.lotsTracked} lots{a.lotCount ? ` / ${a.lotCount}` : ''}</span>
                      {a.categorySlugs.slice(0, 2).map((c) => (
                        <span key={c}>· {catName(c)}</span>
                      ))}
                    </div>
                  </li>
                ))}
              </ul>
            ) : (
              <EmptyState title="No auctions tracked" className="py-8" />
            )}
          </Card>
        </div>
      )}
    </div>
  );
}