import type { Metadata } from 'next';
import Link from 'next/link';
import { ActiveFilters, type FacetGroup, Facets, FilterBar, ListingLayout } from '@/components/listing/filters';
import { BreadcrumbLd } from '@/components/meta/breadcrumb-ld';
import { DataTable, EmptyRow, Td, Th } from '@/components/ui/data-table';
import { EntityBadge } from '@/components/ui/badges';
import { EntityLink, QualityMark } from '@/components/ui/entity';
import { Hint } from '@/components/ui/hint';
import { Pagination, withParams } from '@/components/ui/pagination';
import { Container, PageHeader } from '@/components/ui/section';
import { Unavailable } from '@/components/ui/unavailable';
import { api, safe } from '@/lib/api';
import { fmtInt, num, titleCase } from '@/lib/format';
import { routes, SITE_NAME } from '@/lib/site';

export const metadata: Metadata = {
  title: 'Organizations — companies, labs and universities building AI',
  description: 'Every organization in the atlas — companies, research labs, universities — with country, kind, canonical model count and papers, each attribute backed by a source.',
  alternates: { canonical: '/companies' },
};
export const revalidate = 300;

type SP = Record<string, string | undefined>;
const LIMIT = 50;
const KEYS = ['q', 'country', 'kind', 'sort', 'order', 'offset'] as const;
const SORTS = [
  { value: 'models', label: 'Most models' },
  { value: 'name', label: 'Name' },
  { value: 'updated', label: 'Recently updated' },
  { value: 'quality', label: 'Data quality' },
];

export default async function CompaniesPage({ searchParams }: { searchParams: Promise<SP> }) {
  const sp = await searchParams;
  const current: Record<string, string | undefined> = {};
  for (const k of KEYS) if (sp[k]) current[k] = sp[k];
  const offset = Math.max(0, Number(current.offset) || 0);
  const sort = current.sort ?? 'models';
  const [page, stats] = await Promise.all([safe(api.companies({ ...current, sort, limit: LIMIT, offset, facets: 1 })), safe(api.stats())]);
  const href = (patch: Record<string, string | number | undefined | null>) => withParams('/companies', current, patch);
  const facetGroups: FacetGroup[] = [
    { key: 'country', label: 'Country', items: (page?.facets?.countries ?? []).map((x) => ({ value: x.value, count: x.count })) },
    { key: 'kind', label: 'Kind', items: (page?.facets?.kinds ?? []).map((x) => ({ value: x.value, label: titleCase(x.value), count: x.count })) },
  ];
  const sortHref = (s: string) => href({ sort: s, order: sort === s && current.order !== 'asc' ? 'asc' : undefined, offset: undefined });
  const definition = stats?.definitions?.organizations_total ?? 'Organizations = companies, labs and universities (entity types company, organization, lab, university); merged duplicates excluded.';
  const SortTh = ({ s, children, num: n }: { s: string; children: React.ReactNode; num?: boolean }) => (
    <Th num={n} aria-sort={sort === s ? (current.order === 'asc' ? 'ascending' : 'descending') : undefined}>
      <Link href={sortHref(s)} className={sort === s ? 'text-ink' : 'hover:text-ink'}>
        {children}
        {sort === s && <span aria-hidden> {current.order === 'asc' ? '↑' : '↓'}</span>}
      </Link>
    </Th>
  );

  return (
    <Container wide>
      <BreadcrumbLd items={[{ name: SITE_NAME, href: '/' }, { name: 'Organizations', href: '/companies' }]} />
      <PageHeader
        eyebrow="Organizations"
        title="Companies, labs & universities"
        lede="Who builds, serves and studies AI. Model counts are canonical releases; paper counts are stated publisher relations. Every organization page separates corporate news from model events."
        aside={
          page ? (
            <p className="tnum flex items-center gap-1 text-sm text-ink-3">
              {fmtInt(page.total)} organizations <span className="text-ink-3">(companies, labs, universities)</span>
              <Hint text={definition} align="right" />
            </p>
          ) : undefined
        }
      >
        <FilterBar
          action="/companies"
          className="mt-6"
          resetHref={routes.companies()}
          fields={[
            { kind: 'text', name: 'q', label: 'Name', value: current.q, placeholder: 'e.g. Anthropic' },
            { kind: 'text', name: 'country', label: 'Country (ISO-2)', value: current.country, placeholder: 'US, FR, CN…' },
            ...(current.kind ? [{ kind: 'hidden' as const, name: 'kind', value: current.kind }] : []),
          ]}
          sort={{ value: sort, options: SORTS }}
        />
        <ActiveFilters current={current} labels={{ q: 'query', country: 'country', kind: 'kind' }} makeHref={(p) => href(p)} className="mt-3" />
      </PageHeader>
      <div className="pb-16">
        <ListingLayout facets={<Facets groups={facetGroups} current={current} makeHref={(p) => href(p)} />}>
          {!page ? (
            <Unavailable what="Organizations" />
          ) : (
            <>
              <DataTable caption="Organizations">
                <thead>
                  <tr>
                    <SortTh s="name">Organization</SortTh>
                    <Th>Type</Th>
                    <Th>Country</Th>
                    <Th>Kind</Th>
                    <Th>Founded</Th>
                    <SortTh s="models" num>
                      Models
                    </SortTh>
                    <Th num>Papers</Th>
                    <SortTh s="quality" num>
                      Quality
                    </SortTh>
                  </tr>
                </thead>
                <tbody>
                  {page.items.length === 0 && <EmptyRow cols={8}>No organizations match these filters.</EmptyRow>}
                  {page.items.map((c) => {
                    const a = c.attributes ?? {};
                    return (
                      <tr key={c.id}>
                        <Td primary>
                          <EntityLink e={c} />
                          {c.description && <span className="block max-w-md truncate text-xs text-ink-3">{c.description}</span>}
                        </Td>
                        <Td label="Type">
                          <EntityBadge type={c.entity_type} small />
                        </Td>
                        <Td label="Country" className="mono text-ink-2">{typeof a.country === 'string' ? a.country : <span className="text-ink-3">—</span>}</Td>
                        <Td label="Kind" className="text-ink-2">{typeof a.org_kind === 'string' ? titleCase(a.org_kind) : <span className="text-ink-3">—</span>}</Td>
                        <Td label="Founded" className="tnum text-ink-2">{a.founded ? String(a.founded).slice(0, 4) : <span className="text-ink-3">—</span>}</Td>
                        <Td num label="Models" className="tnum">
                          {num(c.model_count) ? (
                            <Link href={`/models?org=${encodeURIComponent(c.slug)}`} className="hover:text-accent">
                              {fmtInt(c.model_count)}
                            </Link>
                          ) : (
                            <span className="text-ink-3">0</span>
                          )}
                        </Td>
                        <Td num label="Papers" className="tnum">{num(c.paper_count) ? fmtInt(c.paper_count) : <span className="text-ink-3">0</span>}</Td>
                        <Td num label="Quality">
                          <QualityMark q={c.quality?.score} />
                        </Td>
                      </tr>
                    );
                  })}
                </tbody>
              </DataTable>
              <Pagination total={page.total} limit={LIMIT} offset={offset} makeHref={(o) => href({ offset: o || undefined })} className="mt-4" />
            </>
          )}
        </ListingLayout>
      </div>
    </Container>
  );
}