import type { Metadata } from 'next';
import Link from 'next/link';
import { CompanyTable } from '@/components/company/company-table';
import { Pagination, withParams } from '@/components/ui/pagination';
import { Container, PageHeader, Unavailable } from '@/components/ui/section';
import { api, safe } from '@/lib/api';
import { cn } from '@/lib/cn';
import { fmtInt } from '@/lib/format';
import { flat, int, str, type SP } from '@/lib/params';

export const metadata: Metadata = { title: 'Companies', description: 'Directory of monitored companies with activity, hiring momentum, AI adoption, sensors and event counts.' };
export const revalidate = 120;

const SORTS = [
  ['activity', 'Activity'],
  ['events', 'Events'],
  ['hiring', 'Hiring'],
  ['recent', 'Most recent event'],
  ['importance', 'Importance'],
  ['name', 'Name'],
] as const;

export default async function CompaniesPage({ searchParams }: { searchParams: Promise<SP> }) {
  const sp = await searchParams;
  const cur = flat(sp);
  const page = int(sp.page, 1);
  const query = { q: str(sp.q), country: str(sp.country), industry: str(sp.industry), tier: str(sp.tier), public: str(sp.public), has_events: str(sp.has_events), sort: str(sp.sort) ?? 'activity', page, per_page: 50, sparkline: 1 };
  const [data, countries, industries] = await Promise.all([safe(api.companies(query)), safe(api.countries()), safe(api.industries())]);
  const href = (patch: Record<string, string | number | undefined | null>) => withParams('/companies', cur, patch);
  return (
    <Container wide>
      <PageHeader eyebrow="Directory" title="Companies" lede={data ? `${fmtInt(data.total)} monitored companies. Each row links to the profile with its sensors, timeline and historical page versions.` : 'Monitored companies.'} />
      <form method="get" action="/companies" className="mb-4 grid gap-2 sm:grid-cols-[minmax(0,2fr)_repeat(3,minmax(0,1fr))_auto]">
        <input type="search" name="q" defaultValue={str(sp.q)} placeholder="Search name, domain, alias…" className="field" aria-label="Search companies" />
        <select name="country" defaultValue={str(sp.country) ?? ''} className="field" aria-label="Country">
          <option value="">All countries</option>
          {(countries?.items ?? []).map((c) => (
            <option key={c.code} value={c.code}>
              {c.name} ({c.companies})
            </option>
          ))}
        </select>
        <select name="industry" defaultValue={str(sp.industry) ?? ''} className="field" aria-label="Industry">
          <option value="">All industries</option>
          {(industries?.items ?? []).map((i) => (
            <option key={i.slug} value={i.slug}>
              {i.name} ({i.companies})
            </option>
          ))}
        </select>
        <select name="tier" defaultValue={str(sp.tier) ?? ''} className="field" aria-label="Tier">
          <option value="">All tiers</option>
          {[1, 2, 3, 4].map((t) => (
            <option key={t} value={t}>
              Tier {t}
            </option>
          ))}
        </select>
        <input type="hidden" name="sort" value={query.sort} />
        <button type="submit" className="btn btn-primary">
          Filter
        </button>
      </form>
      <div className="mb-3 flex flex-wrap items-center gap-2 text-xs">
        <span className="text-ink-3">Sort</span>
        {SORTS.map(([id, label]) => (
          <Link key={id} href={href({ sort: id === 'activity' ? undefined : id })} className="chip-btn" data-on={query.sort === id}>
            {label}
          </Link>
        ))}
        <Link href={href({ public: str(sp.public) === '1' ? undefined : '1' })} className={cn('chip-btn ml-2')} data-on={str(sp.public) === '1'}>
          Public companies
        </Link>
        <Link href={href({ has_events: str(sp.has_events) === '1' ? undefined : '1' })} className="chip-btn" data-on={str(sp.has_events) === '1'}>
          With events
        </Link>
        {(str(sp.q) || str(sp.country) || str(sp.industry) || str(sp.tier) || str(sp.public) || str(sp.has_events)) && (
          <Link href="/companies" className="text-ink-3 underline-offset-2 hover:underline">
            Clear
          </Link>
        )}
      </div>
      {!data ? (
        <Unavailable what="The directory" />
      ) : (
        <>
          <CompanyTable items={data.items} />
          <Pagination total={data.total} page={data.page} pages={data.pages} perPage={data.per_page} makeHref={(p) => href({ page: p > 1 ? p : undefined })} className="mt-4" />
        </>
      )}
    </Container>
  );
}