import type { ReactNode } from 'react';
import { CompareButton } from '@/components/compare/compare-button';
import { CompareTrayBar } from '@/components/compare/compare-tray-bar';
import { FilterBar, type FilterField } from '@/components/listing/filters';
import { DataTable, EmptyRow, Td, Th } from '@/components/ui/data-table';
import { Pagination, withParams } from '@/components/ui/pagination';
import { Container, Note, PageHeader } from '@/components/ui/section';
import { EmptyState, Unavailable } from '@/components/ui/unavailable';
import { safe } from '@/lib/api';
import { fmtInt } from '@/lib/format';
import type { EntitySummary, Page } from '@/lib/types';

/*
  Intelligence listing: the typed table used by /agents /tools /datasets /frameworks. Same URL contract as `TypedListing`
  (q · org · sort · offset, GET FilterBar) but with an optional per-page `enrich(items)` step that fetches extra facts for the
  rows shown (relations, metric history…) and passes them to the column renderers, plus honest empty states:
  no filters → "No X recorded yet — connectors: …"; filters → "No X match these filters".
*/
export type IntelColumn<X> = {
  key: string;
  label: string;
  num?: boolean;
  primary?: boolean;
  wide?: boolean;
  hideStack?: boolean;
  className?: string;
  render: (e: EntitySummary, extra: X | undefined) => ReactNode;
};

const LIMIT = 40;
const PARAM_KEYS = ['q', 'org', 'sort', 'order', 'category', 'kind', 'since', 'until', 'manufacturer', 'offset'];

export async function IntelListing<X = never>({
  title,
  eyebrow,
  lede,
  basePath,
  searchParams,
  fetch,
  columns,
  sorts,
  filters = [],
  enrich,
  connectors,
  emptyHint,
  note,
  compare = false,
  headerAside,
  children,
  caption,
}: {
  title: string;
  eyebrow: string;
  lede?: ReactNode;
  basePath: string;
  searchParams: Record<string, string | undefined>;
  fetch: (q: Record<string, string | number | undefined>) => Promise<Page<EntitySummary>>;
  columns: IntelColumn<X>[];
  sorts: { value: string; label: string }[];
  filters?: FilterField[];
  /** Fetch extra facts for the rows on this page (keyed by slug). Failures per row are tolerated (undefined). */
  enrich?: (items: EntitySummary[]) => Promise<Map<string, X>>;
  /** Connector names that feed this type (for the honest empty state). */
  connectors?: string[];
  emptyHint?: ReactNode;
  note?: ReactNode;
  compare?: boolean;
  headerAside?: ReactNode;
  children?: ReactNode;
  caption?: string;
}) {
  const current: Record<string, string | undefined> = {};
  for (const k of PARAM_KEYS) if (searchParams[k]) current[k] = searchParams[k];
  const offset = Math.max(0, Number(current.offset) || 0);
  const sort = current.sort ?? sorts[0]?.value;
  const page = await safe(fetch({ ...current, sort, limit: LIMIT, offset }));
  const extras = page && enrich && page.items.length ? await enrich(page.items).catch(() => new Map<string, X>()) : new Map<string, X>();
  const href = (patch: Record<string, string | number | undefined | null>) => withParams(basePath, current, patch);
  const filtered = Object.keys(current).some((k) => !['sort', 'order', 'offset'].includes(k));
  const cols = columns.length + (compare ? 1 : 0);
  const lower = title.toLowerCase();
  return (
    <Container wide>
      <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' }, ...filters]} sort={{ value: sort, options: sorts }} />
      </PageHeader>
      {children}
      <div className="pb-16">
        {!page ? (
          <Unavailable what={title} />
        ) : page.items.length === 0 && !offset ? (
          filtered ? (
            <EmptyState title={`No ${lower} match these filters`}>{emptyHint ?? 'Remove a filter or search for another name.'}</EmptyState>
          ) : (
            <EmptyState title={`No ${lower} recorded yet`} className="[&_p]:max-w-2xl [&_p]:mx-auto">
              {emptyHint}
              {connectors && connectors.length > 0 && (
                <span className="mt-1 block">
                  Connectors that will populate this type: <span className="mono text-ink-2">{connectors.join(' · ')}</span>. Nothing is listed until a source has been crawled.
                </span>
              )}
            </EmptyState>
          )
        ) : (
          <>
            <div className="md:overflow-x-auto">
            <DataTable caption={caption ?? title}>
              <thead>
                <tr>
                  {columns.map((c) => (
                    <Th key={c.key} num={c.num}>
                      {c.label}
                    </Th>
                  ))}
                  {compare && <Th className="w-24" aria-label="Compare" />}
                </tr>
              </thead>
              <tbody>
                {page.items.length === 0 && <EmptyRow cols={cols}>No rows on this page.</EmptyRow>}
                {page.items.map((e) => (
                  <tr key={e.id}>
                    {columns.map((c) => (
                      <Td key={c.key} label={c.primary ? undefined : c.label} num={c.num} primary={c.primary} wide={c.wide} hideStack={c.hideStack} className={c.className}>
                        {c.render(e, extras.get(e.slug))}
                      </Td>
                    ))}
                    {compare && (
                      <Td className="text-right">
                        <CompareButton e={e} size="sm" />
                      </Td>
                    )}
                  </tr>
                ))}
              </tbody>
            </DataTable>
            </div>
            <Pagination total={page.total} limit={LIMIT} offset={offset} makeHref={(o) => href({ offset: o || undefined })} className="mt-4" />
            {note && <Note className="mt-3">{note}</Note>}
          </>
        )}
      </div>
      {compare && <CompareTrayBar />}
    </Container>
  );
}

export function Dash() {
  return <span className="text-ink-3">—</span>;
}
export function str(v: unknown): string | null {
  return typeof v === 'string' && v.trim() ? v : null;
}
export function list(v: unknown): string[] {
  return Array.isArray(v) ? v.filter((x) => x !== null && x !== undefined).map(String) : [];
}