import type { Metadata } from 'next';
import Link from 'next/link';
import { EXAMPLE_QUERIES, GroupedResults, Shortcuts } from '@/components/search/results';
import { SearchForm } from '@/components/search/search-form';
import { Container, PageHeader } from '@/components/ui/section';
import { Unavailable } from '@/components/ui/unavailable';
import { api, safe } from '@/lib/api';
import { fmtInt } from '@/lib/format';
import { routes, SITE_URL } from '@/lib/site';

export const dynamic = 'force-dynamic';

type SP = Promise<Record<string, string | string[] | undefined>>;

function readQ(sp: Record<string, string | string[] | undefined>): string {
  const raw = Array.isArray(sp.q) ? sp.q[0] : sp.q;
  return (raw ?? '').trim().slice(0, 120);
}

export async function generateMetadata({ searchParams }: { searchParams: SP }): Promise<Metadata> {
  const q = readQ(await searchParams);
  const title = q ? `Search results for “${q}”` : 'Search satellites, operators, constellations and launches';
  return {
    title,
    description: q ? `SatelliteIndex search results for “${q}”: satellites, constellations, operators, countries, launches and launch sites.` : 'Search the SatelliteIndex catalogue by satellite name, NORAD or COSPAR identifier, operator, constellation, country or launch.',
    alternates: { canonical: q ? routes.search(q) : '/search' },
    robots: q ? { index: false, follow: true } : { index: true, follow: true },
    openGraph: { title, url: `${SITE_URL}${routes.search(q || undefined)}`, type: 'website' },
  };
}

export default async function SearchPage({ searchParams }: { searchParams: SP }) {
  const q = readQ(await searchParams);
  const res = q ? await safe(api.search(q, 50)) : null;
  const payload = res?.data ?? null;
  const failed = Boolean(q) && res === null;

  return (
    <Container>
      <PageHeader eyebrow="Search" title={q ? <>Results for <span className="text-accent">“{q}”</span></> : 'Search the index'} lede={q ? undefined : 'Satellites by name, NORAD or COSPAR identifier; constellations, operators, countries, launches and launch sites. Press ⌘K anywhere for the quick search.'} />
      <SearchForm q={q} className="max-w-2xl" autoFocus={!q} />

      <div className="py-8 md:py-10">
        {!q ? (
          <div>
            <p className="eyebrow mb-3">Try</p>
            <ul className="flex flex-wrap gap-2">
              {EXAMPLE_QUERIES.map((ex) => (
                <li key={ex}>
                  <Link href={routes.search(ex)} className="inline-flex min-h-[40px] items-center rounded-full border border-rule bg-plane-2 px-3 text-sm text-ink-2 hover:border-rule-strong hover:text-ink">
                    {ex}
                  </Link>
                </li>
              ))}
            </ul>
            <p className="mt-6 max-w-xl text-sm leading-relaxed text-ink-3">
              Launch vehicles are not indexed yet — a query such as “Falcon 9” only matches objects whose catalogue name contains those words. Browse the{' '}
              <Link href={routes.launches()} className="link">launch log</Link> or <Link href={routes.satellites()} className="link">filter the catalogue</Link> instead.
            </p>
          </div>
        ) : failed ? (
          <Unavailable what="Search" />
        ) : payload ? (
          <>
            <Shortcuts items={payload.shortcuts} />
            {payload.results.length === 0 ? (
              <div className="rounded-lg border border-dashed border-rule-strong px-5 py-10 text-center">
                <p className="text-base text-ink">No results for “{q}”.</p>
                <p className="mx-auto mt-2 max-w-md text-sm leading-relaxed text-ink-3">
                  The index covers satellite names, NORAD and COSPAR identifiers, constellations, operators, countries, launches and launch sites. Launch vehicles (e.g. “Falcon 9”) are not indexed yet.
                </p>
                <div className="mt-5 flex flex-wrap justify-center gap-2">
                  <Link href={routes.satellites(`q=${encodeURIComponent(q)}`)} className="inline-flex min-h-[44px] items-center rounded-md border border-rule-strong px-4 text-sm text-ink hover:bg-plane-2">Filter the catalogue for “{q}”</Link>
                  <Link href={routes.explore()} className="inline-flex min-h-[44px] items-center rounded-md border border-rule px-4 text-sm text-ink-2 hover:bg-plane-2">Open the live globe</Link>
                </div>
              </div>
            ) : (
              <>
                <p className="tnum mb-6 text-xs text-ink-3">
                  {fmtInt(payload.results.length)} result{payload.results.length === 1 ? '' : 's'}
                  {payload.results.length >= 50 && ' (top 50 by relevance)'}
                </p>
                <GroupedResults results={payload.results} />
              </>
            )}
          </>
        ) : null}
      </div>
    </Container>
  );
}