import type { ReactNode } from 'react';
import { FilterBar } from '@/components/listing/filters';
import { EntityRow } from '@/components/ui/entity';
import { Pagination, withParams } from '@/components/ui/pagination';
import { Container, PageHeader } from '@/components/ui/section';
import { EmptyState, Unavailable } from '@/components/ui/unavailable';
import { api, safe } from '@/lib/api';
import { fmtInt } from '@/lib/format';
import type { EntitySummary, Page } from '@/lib/types';

const LIMIT = 40;

/**
 * Generic paged listing for a type with light filters (q, org, sort). `fetch` defaults to /explore/<type>;
 * pass a custom fetcher for typed endpoints (/papers, /hardware). Renders `EntityRow`s — dense, mobile-safe.
 */
export async function GenericListing({ type, basePath, title, eyebrow, lede, searchParams, fetch, sorts = [{ value: 'updated', label: 'Recently updated' }, { value: 'name', label: 'Name' }], extraFields = [], children, rowTrailing, headerAside }: { type: string; basePath: string; title: string; eyebrow: string; lede?: string; searchParams: Record<string, string | undefined>; fetch?: (q: Record<string, string | number | undefined>) => Promise<Page<EntitySummary>>; sorts?: { value: string; label: string }[]; extraFields?: Parameters<typeof FilterBar>[0]['fields']; children?: ReactNode; /** Optional per-row trailing node (e.g. a CompareButton). */ rowTrailing?: (e: EntitySummary) => ReactNode; /** Extra content in the page header aside, next to the total. */ headerAside?: ReactNode }) {
  const current: Record<string, string | undefined> = {};
  for (const k of ['q', 'org', 'sort', 'category', 'kind', 'manufacturer', 'since', 'offset']) if (searchParams[k]) current[k] = searchParams[k];
  const offset = Math.max(0, Number(current.offset) || 0);
  const query = { ...current, limit: LIMIT, offset };
  const page = await safe(fetch ? fetch(query) : api.explore(type, query));
  const href = (patch: Record<string, string | number | undefined | null>) => withParams(basePath, current, patch);
  return (
    <Container>
      <PageHeader eyebrow={eyebrow} title={title} lede={lede} aside={page || headerAside ? <div className="flex flex-col items-start gap-2 md:items-end">{page && <p className="tnum text-sm text-ink-3">{fmtInt(page.total)} total</p>}{headerAside}</div> : undefined}>
        <FilterBar action={basePath} className="mt-6" resetHref={basePath} fields={[{ kind: 'text', name: 'q', label: 'Name', value: current.q, placeholder: 'Search by name' }, ...extraFields]} sort={{ value: current.sort ?? sorts[0]?.value, options: sorts }} />
      </PageHeader>
      {children}
      <div className="pb-16">
        {!page ? (
          <Unavailable what={title} />
        ) : page.items.length === 0 ? (
          <EmptyState title={`No ${title.toLowerCase()} match`}>Try another name or remove filters.</EmptyState>
        ) : (
          <>
            <ul className="border-t border-rule">
              {page.items.map((e) => (
                <EntityRow key={e.id} e={e} showType={e.entity_type !== type} trailing={rowTrailing?.(e)} />
              ))}
            </ul>
            <Pagination total={page.total} limit={LIMIT} offset={offset} makeHref={(o) => href({ offset: o || undefined })} className="mt-4" />
          </>
        )}
      </div>
    </Container>
  );
}