import type { Metadata } from 'next';
import Link from 'next/link';
import { Suspense } from 'react';
import { FAMILIES } from '@rareindex/taxonomy';
import { PageHeader } from '@/components/ui/page-header';
import { Card, CardHeader, EmptyState, Table, th, td, tdNum, Badge, StatStrip } from '@/components/ui/primitives';
import { Tabs } from '@/components/ui/tabs';
import { FilterBar } from '@/components/ui/filter-bar';
import { Pagination } from '@/components/ui/pagination';
import { LotsIntelCards, LotsIntelTable } from '@/components/market/lots-table';
import { getLotOverview, listAuctionHouses, listAuctions, listLotsPaged, type LotSort } from '@/lib/queries/market-lists';
import { feeScheduleFor } from '@rareindex/valuation';
import { feeScheduleSummary, FeeConfidenceBadge } from '@/components/market/fee-schedule';
import { houseSlug, ENDING_WINDOWS, endingHours } from '@/lib/auction-house';
import { fmtDate, fmtNum, fmtRelative, cn } from '@/lib/format';
import { catName } from '@/lib/taxonomy';
import { sp1, spEnum, spInt, type SP } from '@/lib/search-params';

export const metadata: Metadata = { title: 'Auctions', description: 'Live and upcoming collectible auction lots with the buyer-pays all-in cost, the RareIndex Valuation and bid-vs-RIV, across auction houses worldwide.' };

const TABS = ['open', 'ending', 'below', 'results', 'houses'] as const;

export default async function AuctionsPage({ searchParams }: { searchParams: Promise<SP> }) {
  const sp = await searchParams;
  const tab = spEnum(sp, 'tab', TABS, 'open');
  const category = sp1(sp, 'category') ?? null;
  const house = sp1(sp, 'house') ?? null;
  const ending = sp1(sp, 'ending') ?? null;
  const below = sp1(sp, 'below') === '1' || tab === 'below';
  const sort = spEnum(sp, 'sort', ['ending', 'value', 'discount', 'bids'] as const, tab === 'below' ? 'discount' : 'ending') as LotSort;
  const page = spInt(sp, 'page');
  const hours = tab === 'ending' ? (endingHours(ending) ?? 72) : endingHours(ending);

  const [overview, houses, auctions, lots] = await Promise.all([
    getLotOverview(),
    listAuctionHouses(),
    tab === 'houses' ? Promise.resolve([]) : listAuctions({ limit: 40, house }),
    tab === 'houses'
      ? Promise.resolve({ items: [], total: 0, page: 1, pageSize: 50 })
      : listLotsPaged({
          open: tab !== 'results',
          status: tab === 'results' ? 'ended' : null,
          endingWithinHours: hours,
          category,
          house,
          maxVsRiv: below ? -0.1 : null,
          sort: tab === 'results' ? (sort === 'ending' ? 'value' : sort) : sort,
          page,
          pageSize: 50,
        }),
  ]);

  const params = { tab, category: category ?? undefined, house: house ?? undefined, ending: ending ?? undefined, below: below && tab !== 'below' ? '1' : undefined, sort: sort !== 'ending' ? sort : undefined };
  const q = (extra: Record<string, string | undefined>) => {
    const u = new URLSearchParams();
    for (const [k, v] of Object.entries({ ...params, ...extra })) if (v) u.set(k, v);
    const s = u.toString();
    return `/auctions${s ? `?${s}` : ''}`;
  };

  return (
    <div>
      <PageHeader
        kicker="Auction intelligence"
        title="Auctions"
        description="Live and upcoming lots from auction-house connectors with the buyer-pays cost and the RareIndex Valuation side by side. All-in = hammer + buyer's premium from the house's published or estimated schedule; VAT/duties/shipping not included. Model analytics, not advice."
        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>
        }
      />
      <StatStrip
        className="mb-4"
        items={[
          { label: 'Open lots', value: fmtNum(overview.open), sub: 'live + upcoming' },
          { label: 'Ending 24 h', value: fmtNum(overview.ending24h), href: q({ tab: 'ending', ending: '24h' }) },
          { label: 'With bids', value: fmtNum(overview.withBids) },
          { label: 'Below RIV', value: fmtNum(overview.belowRiv), sub: overview.assessed ? `of ${fmtNum(overview.assessed)} assessed` : 'not assessed yet', href: q({ tab: 'below' }) },
          { label: 'Houses', value: fmtNum(overview.houses), href: q({ tab: 'houses' }) },
        ]}
      />
      <Tabs
        active={tab}
        tabs={[
          { id: 'open', label: 'Open lots', href: q({ tab: 'open' }) },
          { id: 'ending', label: 'Ending soon', href: q({ tab: 'ending' }) },
          { id: 'below', label: 'Below RIV', count: overview.belowRiv || null, href: q({ tab: 'below' }) },
          { id: 'results', label: 'Results', href: q({ tab: 'results' }) },
          { id: 'houses', label: 'Auction houses', count: houses.length, href: q({ tab: 'houses' }) },
        ]}
        className="mb-4"
      />

      {tab === 'houses' ? (
        <Card className="overflow-hidden">
          <CardHeader title="Auction houses" subtitle="Sources with auction connectors · buyer's premium schedule on file when known" />
          {houses.length ? (
            <Table>
              <thead>
                <tr>
                  <th className={th}>House</th>
                  <th className={th}>Buyer&apos;s premium</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) => {
                  const s = feeScheduleFor(h.house);
                  return (
                    <tr key={h.house} className="hover:bg-sunken">
                      <td className={cn(td, 'font-medium')}>
                        <Link href={`/auctions/house/${houseSlug(h.house)}`} className="hover:underline">
                          {h.house}
                        </Link>
                      </td>
                      <td className={cn(td, 'text-muted')}>
                        {s ? (
                          <span className="inline-flex flex-wrap items-center gap-1.5">
                            <span className="num">{feeScheduleSummary(s)}</span>
                            <FeeConfidenceBadge confidence={s.confidence} />
                          </span>
                        ) : (
                          <FeeConfidenceBadge confidence="default" />
                        )}
                      </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 connector roadmap." />
          )}
        </Card>
      ) : (
        <>
          <div className="mb-3 flex flex-wrap items-center justify-between gap-2">
            <Suspense>
              <FilterBar
                resetKeys={['page']}
                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' },
                  ...(tab === 'results' ? [] : [{ name: 'ending', label: 'Ending within', type: 'select' as const, options: ENDING_WINDOWS.map((w) => ({ value: w.id, label: w.label })), placeholder: tab === 'ending' ? '72 h' : 'Any', width: 'w-32' }]),
                  { name: 'sort', label: 'Sort', type: 'select', options: [{ value: 'ending', label: 'Ending soonest' }, { value: 'discount', label: 'Most below RIV' }, { value: 'bids', label: 'Most bids' }, { value: 'value', label: 'Highest value' }], placeholder: tab === 'below' ? 'Most below RIV' : 'Ending soonest', width: 'w-40' },
                  ...(tab === 'below' || tab === 'results' ? [] : [{ name: 'below', label: 'Below RIV only', type: 'select' as const, options: [{ value: '1', label: 'Yes' }], placeholder: 'No', width: 'w-32' }]),
                ]}
              />
            </Suspense>
            <p className="text-[11px] text-subtle">
              {fmtNum(lots.total)} lot{lots.total === 1 ? '' : 's'}
              {tab === 'ending' ? ` · ending within ${hours} h` : ''}
              {below ? ' · assessed all-in bid or estimate ≥ 10 % below the RIV of the same variant' : ''}
            </p>
          </div>
          <div className="grid gap-4 xl:grid-cols-[3fr_1fr]">
            <Card className="overflow-hidden">
              <CardHeader
                title={tab === 'ending' ? `Lots ending in the next ${hours} hours` : tab === 'below' ? 'Lots below the RareIndex Valuation' : tab === 'results' ? 'Recorded results' : 'Open lots'}
                subtitle={tab === 'below' ? 'Gated exactly like listings: transaction-based RIV of the same variant, ≥ 5 sales, medium+ confidence; opening prices without a bid use the low estimate (“est.”). Deeper than −50 % is held for review.' : 'Estimates and bids are the house’s own figures; all-in adds the buyer’s premium.'}
              />
              <div className="md:hidden">
                <LotsIntelCards items={lots.items} />
                {!lots.items.length ? <EmptyState title="No lots" description={tab === 'below' ? 'No assessed lot is below its RIV right now — the auctions worker assesses open lots hourly.' : 'Lots appear once auction-house connectors publish catalogues.'} /> : null}
              </div>
              <div className="hidden md:block">
                <LotsIntelTable items={lots.items} emptyDescription={tab === 'below' ? 'No assessed lot is below its RIV right now — the auctions worker assesses open lots hourly.' : undefined} />
              </div>
              <Pagination page={lots.page} pageSize={lots.pageSize} total={lots.total} basePath="/auctions" params={params} className="border-t border-border px-4 py-3" />
            </Card>
            <Card className="overflow-hidden">
              <CardHeader title="Auctions" subtitle="Catalogues tracked" />
              {auctions.length ? (
                <ul className="divide-y divide-border text-[12px]">
                  {auctions.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>
                        <Link href={`/auctions/house/${houseSlug(a.auctionHouse)}`} className="hover:text-fg">
                          {a.auctionHouse}
                        </Link>
                        <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>
  );
}