import { Search, X } from 'lucide-react';
import type { Metadata } from 'next';
import Link from 'next/link';
import { Chip, EntityBadge, OpennessBadge } from '@/components/ui/badges';
import { DataTable, EmptyRow, Td, Th } from '@/components/ui/data-table';
import { cheapestPrice, EntityLink, EntityRow, QualityMark } from '@/components/ui/entity';
import { Hint } from '@/components/ui/hint';
import { Pagination, withParams } from '@/components/ui/pagination';
import { Container, Note, PageHeader } from '@/components/ui/section';
import { EmptyState, Unavailable } from '@/components/ui/unavailable';
import { apiD3, safe } from '@/lib/api';
import { fmtDate, fmtInt, fmtParams, fmtTokens, num } from '@/lib/format';
import { EXAMPLE_QUERIES, exploreNav, PALETTE_PREFIXES, routes, typeLabel } from '@/lib/site';
import type { EntitySummary } from '@/lib/types';
import { compiledType, impliedColumns, toModelsParams, withoutSpan } from './compiled';

type SP = { q?: string; type?: string; offset?: string };
const LIMIT = 30;

export async function generateMetadata({ searchParams }: { searchParams: Promise<SP> }): Promise<Metadata> {
  const { q } = await searchParams;
  return { title: q ? `“${q}” — search` : 'Search', description: 'Plain-English search over the AI Atlas graph: the compiler turns your words into filters (organization, parameters, context, openness, licence, dates, price) and shows them back as removable chips.', robots: { index: false, follow: true }, alternates: { canonical: '/search' } };
}

export default async function SearchPage({ searchParams }: { searchParams: Promise<SP> }) {
  const sp = await searchParams;
  const q = (sp.q ?? '').trim();
  const type = sp.type ?? '';
  const offset = Math.max(0, Number(sp.offset) || 0);
  const res = q ? await safe(apiD3.search(q, { type: type || undefined, limit: LIMIT, offset })) : null;
  const query = res?.query;
  const compiled = query?.compiled ?? [];
  const cType = compiledType(query);
  const isModelTable = (type || cType) === 'model' && compiled.length > 0;
  const mapped = isModelTable ? toModelsParams(compiled, query?.residual) : null;
  const cols = impliedColumns(compiled, query?.sort);
  const current = { q, type };
  const unrec = query?.unrecognised ?? [];
  const exploreHref = mapped ? `/explore?type=model&${mapped.params.toString()}` : `/explore${cType ? `?type=${encodeURIComponent(cType)}` : ''}`;

  return (
    <Container wide>
      <PageHeader eyebrow="Search 3.0" title={q ? <>Results for <span className="text-ink-2">“{q}”</span></> : 'Search the atlas'} lede={!q ? 'Names, ids, providers, benchmarks — or a plain-English question. The compiler turns your words into filters and shows them back as chips you can remove.' : undefined}>
        <form action="/search" method="get" role="search" className="mt-5 flex max-w-3xl items-stretch border border-rule-strong bg-surface focus-within:border-accent">
          <span className="flex items-center pl-3 text-ink-3">
            <Search className="size-5" aria-hidden />
          </span>
          <input name="q" type="search" defaultValue={q} placeholder="open reasoning models over 30B released in 2026…" className="h-12 min-w-0 flex-1 bg-transparent px-3 text-[16px] text-ink placeholder:text-ink-3 focus:outline-none" autoComplete="off" aria-label="Search query" />
          {type && <input type="hidden" name="type" value={type} />}
          <button type="submit" className="bg-ink px-4 text-sm font-medium text-canvas hover:opacity-90">
            Search
          </button>
        </form>

        {q && res && (
          <section className="mt-4 border-y border-rule py-3" aria-label="Compiled query" data-compiled>
            <div className="flex flex-wrap items-start gap-x-6 gap-y-2">
              <div className="min-w-0 flex-1">
                <p className="eyebrow mb-1.5 flex items-center gap-1">
                  Compiled as
                  <Hint align="right" text="The search compiler (v2) recognises organizations, parameter and context bounds, openness, licences, dates, prices, modalities and sort hints. Each chip shows the words it came from; removing a chip re-runs the search without those words." />
                  {query?.semantic && <span className="ml-2 normal-case tracking-normal text-ink-3">· semantic ranking on</span>}
                </p>
                {compiled.length === 0 ? (
                  <p className="text-sm text-ink-2">
                    No structured filter recognised — full-text search for “{q}”{cType ? ` among ${typeLabel(cType, true).toLowerCase()}` : ''}.
                  </p>
                ) : (
                  <ul className="flex flex-wrap gap-1.5" data-compiled-chips>
                    {compiled.map((f, i) => {
                      const nextText = withoutSpan(q, f.source_span);
                      const removable = !!f.source_span && nextText !== q;
                      return (
                        <li key={`${f.filter}-${i}`} className="inline-flex h-8 items-stretch border border-rule bg-surface text-xs" data-compiled-chip={f.filter}>
                          <span className="flex items-center gap-1.5 px-2 text-ink" title={f.source_span ? `from “${f.source_span}”` : undefined}>
                            <span className="mono text-[10px] uppercase text-ink-3">{f.filter}</span>
                            {f.label}
                          </span>
                          {removable ? (
                            <Link href={nextText ? withParams('/search', current, { q: nextText, offset: undefined }) : routes.search('')} className="flex items-center border-l border-rule px-1.5 text-ink-3 hover:bg-surface-2 hover:text-danger" aria-label={`Remove ${f.label}`} title="Remove this filter (re-runs the search without its words)">
                              <X className="size-3" aria-hidden />
                            </Link>
                          ) : (
                            <span className="flex items-center border-l border-rule px-1.5 text-ink-3" title="Implicit — not tied to words in your query">
                              ·
                            </span>
                          )}
                        </li>
                      );
                    })}
                  </ul>
                )}
                <p className="mt-2 flex flex-wrap gap-x-4 gap-y-1 text-xs text-ink-3">
                  {query?.sort && (
                    <span>
                      Sort: <span className="text-ink-2">{query.sort}</span>
                    </span>
                  )}
                  {query?.residual?.trim() && (
                    <span>
                      Free text: <span className="text-ink-2">“{query.residual.trim()}”</span>
                    </span>
                  )}
                  {unrec.length > 0 && (
                    <span data-unrecognised>
                      Not understood: <span className="text-warning">{unrec.join(' · ')}</span>
                      <Hint align="right" text="Words the compiler could not turn into a filter (an organization name it does not know, a benchmark alias…) stay as free text and are matched against names and descriptions." />
                    </span>
                  )}
                  {query?.note && <span className="text-warning">{query.note}</span>}
                </p>
              </div>
              <div className="flex flex-wrap items-center gap-2 text-xs">
                {mapped && (
                  <Link href={`/models?${mapped.params.toString()}`} className="inline-flex h-9 items-center border border-rule px-2.5 text-ink-2 hover:border-rule-strong hover:text-ink">
                    Open in Models →
                  </Link>
                )}
                <Link href={exploreHref} className="inline-flex h-9 items-center border border-rule px-2.5 text-ink-2 hover:border-rule-strong hover:text-ink" data-open-builder>
                  Open in Explore builder →
                </Link>
                {mapped?.links.map((l) => (
                  <Link key={l.href} href={l.href} className="link">
                    {l.label}
                  </Link>
                ))}
              </div>
            </div>
            {mapped && mapped.unmapped.length > 0 && (
              <Note className="mt-2">
                Not expressible in /models: {mapped.unmapped.map((u, i) => (
                  <span key={i}>
                    {i > 0 && ' · '}
                    <span className="text-ink-2">{u.filter.label}</span> ({u.why})
                  </span>
                ))}
                .
              </Note>
            )}
          </section>
        )}

        {q && (
          <ul className="no-scrollbar -mx-4 mt-4 flex gap-1 overflow-x-auto px-4 md:mx-0 md:px-0" aria-label="Filter by type">
            {[{ label: 'All', type: '' }, ...exploreNav.map((n) => ({ label: n.label.replace(' & Pricing', ''), type: n.type }))].map((t) => {
              const on = t.type === type;
              return (
                <li key={t.type} className="shrink-0">
                  <Link href={withParams('/search', current, { type: t.type || undefined, offset: undefined })} className={`inline-flex h-9 items-center border px-3 text-sm ${on ? 'border-ink bg-ink text-canvas' : 'border-rule text-ink-2 hover:border-rule-strong hover:text-ink'}`} aria-current={on ? 'true' : undefined}>
                    {t.label}
                  </Link>
                </li>
              );
            })}
          </ul>
        )}
      </PageHeader>

      {!q ? (
        <div className="grid gap-10 pb-16 md:grid-cols-2">
          <div>
            <p className="eyebrow mb-2">Try</p>
            <ul className="flex flex-wrap gap-2">
              {[...EXAMPLE_QUERIES, 'open reasoning models over 30B released in 2026', 'cheapest models under $1/M output with 1M context', 'papers by DeepSeek'].map((ex) => (
                <li key={ex}>
                  <Link href={routes.search(ex)} className="inline-block border border-rule px-2.5 py-1.5 text-sm text-ink-2 hover:border-rule-strong hover:text-ink">
                    {ex}
                  </Link>
                </li>
              ))}
            </ul>
          </div>
          <div>
            <p className="eyebrow mb-2">Prefixes (also in the ⌘K palette)</p>
            <ul className="space-y-1 text-sm">
              {Object.entries(PALETTE_PREFIXES).map(([k, v]) => (
                <li key={k} className="flex items-center gap-3">
                  <span className="mono w-8 text-ink">{k}:</span>
                  <Link href={withParams('/search', {}, { type: v.types[0] })} className="text-ink-2 hover:text-ink">
                    {v.label}
                  </Link>
                </li>
              ))}
            </ul>
            <p className="mt-3 text-xs text-ink-3">
              Prefer a form? <Link href={routes.explore()} className="link">Open the Explore builder →</Link>
            </p>
          </div>
        </div>
      ) : !res ? (
        <Unavailable what="Search" className="mb-16" reason="The search service did not answer (rate limit or outage)." />
      ) : res.items.length === 0 ? (
        <EmptyState title={`Nothing matched “${q}”`} className="mb-16">
          Try fewer words, a provider's API id, or <Link href={routes.explore()} className="link">the builder</Link>.
          {compiled.length > 0 && (
            <>
              {' '}
              Remove a chip above to widen the search.
            </>
          )}
        </EmptyState>
      ) : (
        <div className="pb-16">
          <p className="tnum mb-2 text-xs text-ink-3">
            {fmtInt(res.total)} result{res.total === 1 ? '' : 's'}
            {isModelTable ? ' · dense model table (columns implied by the query)' : ''}
          </p>
          {isModelTable ? <ModelResults items={res.items} cols={cols} /> : (
            <ul className="border-t border-rule">
              {res.items.map((e) => (
                <EntityRow key={e.id} e={e} trailing={<EntityBadge type={e.entity_type} small className="md:hidden" />} />
              ))}
            </ul>
          )}
          <Pagination total={res.total} limit={LIMIT} offset={offset} makeHref={(o) => withParams('/search', current, { offset: o || undefined })} className="mt-4" />
        </div>
      )}
    </Container>
  );
}

function ModelResults({ items, cols }: { items: (EntitySummary & { rank: number })[]; cols: Set<string> }) {
  return (
    <DataTable caption="Models matching the compiled query" compact scroll>
      <thead>
        <tr>
          <Th>Model</Th>
          <Th>Organization</Th>
          {cols.has('params') && <Th num>Params</Th>}
          {cols.has('context') && <Th num>Context</Th>}
          {cols.has('price') && <Th num>Cheapest input</Th>}
          {cols.has('openness') && <Th>Openness · licence</Th>}
          {cols.has('reasoning') && <Th>Reasoning</Th>}
          {cols.has('modalities') && <Th>Modalities</Th>}
          {cols.has('released') && <Th>Released</Th>}
          <Th num>Quality</Th>
        </tr>
      </thead>
      <tbody>
        {items.length === 0 && <EmptyRow cols={10}>No rows.</EmptyRow>}
        {items.map((e) => {
          const a = e.attributes ?? {};
          const ap = num(a.active_parameter_count);
          const p = num(a.parameter_count);
          return (
            <tr key={e.id}>
              <Td primary>
                <EntityLink e={e} />
                {e.entity_type !== 'model' && <EntityBadge type={e.entity_type} small className="ml-2" />}
              </Td>
              <Td label="Organization" className="text-ink-2">
                {e.organization ? <Link href={routes.entity({ entity_type: 'company', slug: e.organization.slug })} className="hover:text-accent">{e.organization.name}</Link> : <span className="text-ink-3">—</span>}
              </Td>
              {cols.has('params') && (
                <Td num label="Params" className="tnum">
                  {p === null ? <span className="text-ink-3">—</span> : ap !== null && ap !== p ? `${fmtParams(p)} · ${fmtParams(ap)} active` : fmtParams(p)}
                </Td>
              )}
              {cols.has('context') && <Td num label="Context" className="tnum">{num(a.context_length) === null ? <span className="text-ink-3">—</span> : fmtTokens(a.context_length)}</Td>}
              {cols.has('price') && <Td num label="Cheapest input" className="tnum text-accent-2">{cheapestPrice(e) ?? <span className="text-ink-3">—</span>}</Td>}
              {cols.has('openness') && (
                <Td label="Openness">
                  <span className="inline-flex flex-wrap items-center gap-1">
                    {typeof a.openness === 'string' ? <OpennessBadge openness={a.openness} /> : <span className="text-ink-3">—</span>}
                    {typeof a.license === 'string' && <Chip>{a.license}</Chip>}
                  </span>
                </Td>
              )}
              {cols.has('reasoning') && <Td label="Reasoning" className="text-ink-2">{a.reasoning === true ? 'yes' : a.reasoning === false ? 'no' : <span className="text-ink-3">—</span>}</Td>}
              {cols.has('modalities') && <Td label="Modalities" className="text-xs text-ink-2">{Array.isArray(a.modalities) && a.modalities.length ? (a.modalities as unknown[]).map(String).join(', ') : <span className="text-ink-3">—</span>}</Td>}
              {cols.has('released') && <Td label="Released" className="tnum text-ink-2">{typeof a.release_date === 'string' ? fmtDate(a.release_date) : <span className="text-ink-3">—</span>}</Td>}
              <Td num label="Quality">
                <QualityMark q={e.quality?.score} />
              </Td>
            </tr>
          );
        })}
      </tbody>
    </DataTable>
  );
}