import Link from 'next/link';
import { Search } from 'lucide-react';
import type { CategoryNode } from '@rareindex/taxonomy';
import { AssetList } from '@/components/market/asset-list';
import { Pagination } from '@/components/ui/pagination';
import { Card, CardHeader } from '@/components/ui/primitives';
import { attachGuidePrices, exploreAssets, getScopeCounts, categoryScope, type ExploreSort, type HasFilter } from '@/lib/queries/assets';
import { fmtNum, cn } from '@/lib/format';
import { sp1, spEnum, spInt, withParams, type SP } from '@/lib/search-params';

/**
 * Paginated, filterable browser over canonical assets for a market, set or brand. Lists every
 * catalogued asset — with or without valuation — and states plainly how many are priced yet.
 */
export interface BrowserScope {
  category?: string | null;
  set?: string | null;
  brand?: string | null;
}

const SORTS: ExploreSort[] = ['relevance', 'riv', 'sales', 'latest_sale', 'change30d', 'newest', 'number', 'name'];
const SORT_LABEL: Record<string, string> = { relevance: 'Most data', riv: 'Valuation', sales: 'Sales', latest_sale: 'Last sale', change30d: '30D change', newest: 'Newest', number: 'Set · number', name: 'Name' };
const HAS: Array<{ id: HasFilter | ''; label: string }> = [
  { id: '', label: 'All' },
  { id: 'sales', label: 'With sales' },
  { id: 'valuation', label: 'With valuation' },
  { id: 'listings', label: 'With listings' },
  { id: 'observations', label: 'With guide price' },
  { id: 'images', label: 'With image' },
];
export const BROWSER_KEYS = ['sort', 'has', 'sub', 'bq', 'view', 'page'];

export async function AssetBrowser({ scope, sp, basePath, title = 'Assets in this market', subcategories = [], pageSize = 48, anchor = 'assets' }: { scope: BrowserScope; sp: SP; basePath: string; title?: string; subcategories?: CategoryNode[]; pageSize?: number; anchor?: string }) {
  const sort = spEnum<ExploreSort>(sp, 'sort', SORTS, 'relevance');
  const has = (sp1(sp, 'has') as HasFilter | undefined) ?? null;
  const sub = sp1(sp, 'sub') ?? null;
  const q = sp1(sp, 'bq') ?? null;
  const page = spInt(sp, 'page');
  const view = spEnum(sp, 'view', ['table', 'grid'] as const, 'table');
  const categorySlugs = sub && subcategories.some((c) => c.slug === sub) ? categoryScope(sub) : scope.category ? categoryScope(scope.category) : null;
  const filters = { scope: categorySlugs, set: scope.set ?? null, brand: scope.brand ?? null, has: HAS.some((h) => h.id === has) ? has : null, q, sort, page, pageSize };
  const [res, counts] = await Promise.all([exploreAssets(filters), getScopeCounts({ scope: scope.category ? categoryScope(scope.category) : null, set: scope.set ?? null, brand: scope.brand ?? null })]);
  await attachGuidePrices(res.items);
  const params: Record<string, string | undefined> = { sort: sort === 'relevance' ? undefined : sort, has: has ?? undefined, sub: sub ?? undefined, bq: q ?? undefined, view: view === 'table' ? undefined : view };
  const link = (patch: Record<string, string | null | undefined>) => `${withParams(basePath, { ...params, ...patch, page: null })}#${anchor}`;
  const inProgress = counts.assets > 0 && counts.priced < counts.assets;
  const summary = [
    `${fmtNum(counts.assets)} assets`,
    `${fmtNum(counts.priced)} with valuation`,
    counts.withSales ? `${fmtNum(counts.withSales)} with sales` : null,
    counts.withObservations ? `${fmtNum(counts.withObservations)} with guide prices` : null,
    counts.listings ? `${fmtNum(counts.listings)} live listings` : null,
  ].filter(Boolean).join(' · ');
  const columns = sort === 'change30d' ? (['riv', 'change7d', 'change30d', 'latestSale', 'sales'] as const) : (['riv', 'latestSale', 'change30d', 'sales', 'listings'] as const);

  return (
    <Card as="section" className="overflow-hidden" id={anchor}>
      <CardHeader
        title={title}
        subtitle={
          <span className="num">
            {summary}
            {inProgress ? <span className="ml-1 text-subtle">· valuations in progress</span> : null}
          </span>
        }
        action={
          <form action={basePath} method="get" role="search" className="relative hidden sm:block">
            {Object.entries(params).map(([k, v]) => (v && k !== 'bq' ? <input key={k} type="hidden" name={k} value={v} /> : null))}
            <Search className="pointer-events-none absolute left-2 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-subtle" />
            <input name="bq" defaultValue={q ?? ''} placeholder="Filter by name, number, set…" className="h-7 w-52 rounded-md border border-border bg-sunken pl-7 pr-2 text-[12px] text-fg placeholder:text-subtle focus:border-border-strong focus:outline-none" aria-label="Filter assets" />
          </form>
        }
      />
      <div className="flex flex-col gap-1.5 border-b border-border px-4 py-2 text-[11px]">
        {subcategories.length ? (
          <div className="rail sm:mx-0 sm:flex-wrap sm:px-0 sm:[&>*]:flex-initial items-center gap-1">
            <span className="mr-1 text-subtle">Subcategory</span>
            <Chip href={link({ sub: null })} active={!sub}>
              All
            </Chip>
            {subcategories.map((c) => (
              <Chip key={c.slug} href={link({ sub: c.slug })} active={sub === c.slug}>
                {c.name}
              </Chip>
            ))}
          </div>
        ) : null}
        <div className="rail sm:mx-0 sm:flex-wrap sm:px-0 sm:[&>*]:flex-initial items-center gap-1">
          <span className="mr-1 text-subtle">Show</span>
          {HAS.map((h) => (
            <Chip key={h.id || 'all'} href={link({ has: h.id || null })} active={(has ?? '') === h.id}>
              {h.label}
            </Chip>
          ))}
        </div>
        <div className="rail sm:mx-0 sm:flex-wrap sm:px-0 sm:[&>*]:flex-initial items-center gap-1">
          <span className="mr-1 text-subtle">Sort</span>
          {SORTS.map((s) => (
            <Chip key={s} href={link({ sort: s === 'relevance' ? null : s })} active={sort === s}>
              {SORT_LABEL[s]}
            </Chip>
          ))}
          <span className="ml-auto inline-flex gap-1">
            <Chip href={link({ view: null })} active={view === 'table'}>
              Table
            </Chip>
            <Chip href={link({ view: 'grid' })} active={view === 'grid'}>
              Cards
            </Chip>
          </span>
        </div>
        {q ? (
          <p className="text-muted">
            Filtering by “{q}” ·{' '}
            <Link href={link({ bq: null })} className="underline hover:text-fg">
              clear
            </Link>
          </p>
        ) : null}
      </div>
      {view === 'grid' ? (
        <div className="p-3">
          <AssetList items={res.items} metric="latestSale" forceCards emptyTitle="No assets match these filters" emptyDescription="Clear a filter or pick another sort. Catalog records appear here as soon as connectors ingest them." />
        </div>
      ) : (
        <AssetList items={res.items} columns={[...columns]} rank startRank={(res.page - 1) * res.pageSize + 1} metric="latestSale" emptyTitle="No assets match these filters" emptyDescription="Clear a filter or pick another sort. Catalog records appear here as soon as connectors ingest them." />
      )}
      <div className="px-4 pb-3">
        <Pagination page={res.page} pageSize={res.pageSize} total={res.total} basePath={basePath} params={params} />
      </div>
    </Card>
  );
}

function Chip({ href, active, children }: { href: string; active: boolean; children: React.ReactNode }) {
  return (
    <Link href={href} scroll={false} className={cn('chip h-7 text-[11px]', active && 'chip-active')}>
      {children}
    </Link>
  );
}