import type { FacilityFilters, SearchHit, SearchResponse } from "@dci/core";
import { Map as MapIcon, Search } from "lucide-react";
import type { Metadata } from "next";
import Link from "next/link";
import { FacilityTable } from "@/components/facility-table";
import { HeroSearch } from "@/components/home/hero";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Page, PageHeader, Section } from "@/components/ui/card";
import { EmptyState, OfflineNotice } from "@/components/ui/states";
import { api } from "@/lib/api";
import { fmtInt, fmtMw } from "@/lib/format";
import { SEARCH_GROUP_LABEL, STATUS_LABEL, TYPE_LABEL } from "@/lib/labels";
import { filtersToQuery } from "@/lib/query";
import { routes } from "@/lib/routes";

export const revalidate = 120;

export async function generateMetadata({ searchParams }: { searchParams: Promise<Record<string, string | string[] | undefined>> }): Promise<Metadata> {
  const sp = await searchParams;
  const q = typeof sp.q === "string" ? sp.q : "";
  return { title: q ? `“${q}” — search` : "Search", robots: { index: false, follow: true }, alternates: { canonical: "/search" } };
}

const GROUPS: SearchHit["type"][] = ["facility", "operator", "country", "metro", "city", "cloud_region", "project", "ixp"];

export default async function SearchPage({ searchParams }: { searchParams: Promise<Record<string, string | string[] | undefined>> }) {
  const sp = await searchParams;
  const q = (typeof sp.q === "string" ? sp.q : "").trim();

  if (!q) {
    return (
      <Page>
        <PageHeader eyebrow="Search" title="Search the index" description="Data centers, operators, markets, countries, cloud regions, projects and internet exchanges. Natural filters work too: “hyperscale in Ireland”, “> 100 MW under construction”." />
        <HeroSearch />
      </Page>
    );
  }

  const r = await api.search(q);
  const data: SearchResponse | null = r.ok ? r.data : null;
  const hits = data?.hits ?? [];
  const facilities = data?.facilities ?? null;
  const interp = data?.interpreted;

  const interpFilters: FacilityFilters = {};
  if (interp?.countryIso2) interpFilters.country = interp.countryIso2;
  if (interp?.operator) interpFilters.operator = interp.operator;
  if (interp?.status) interpFilters.status = interp.status;
  if (interp?.minMw !== undefined) interpFilters.min_mw = interp.minMw;
  if (interp?.facilityType) interpFilters.type = interp.facilityType;
  if (interp?.text) interpFilters.q = interp.text;
  const mapQs = filtersToQuery(Object.keys(interpFilters).length ? interpFilters : { q });

  const grouped = new Map<SearchHit["type"], SearchHit[]>();
  for (const h of hits.filter((h) => h.type !== "facility" || !facilities)) {
    if (!grouped.has(h.type)) grouped.set(h.type, []);
    grouped.get(h.type)!.push(h);
  }
  const nothing = r.ok && hits.length === 0 && (!facilities || facilities.total === 0);

  return (
    <Page>
      <PageHeader
        eyebrow="Search"
        title={
          <>
            Results for <span className="text-ink-2">“{q}”</span>
          </>
        }
        description={r.ok ? `${fmtInt(hits.length + (facilities?.total ?? 0))} matches across the index.` : undefined}
        aside={
          <Button href={routes.map(mapQs)} size="sm">
            <MapIcon className="size-4" strokeWidth={1.75} /> Open in map
          </Button>
        }
      />
      {!r.ok && <OfflineNotice detail={r.error} className="mb-4" />}

      {interp && Object.keys(interp).length > 0 && (
        <div className="mb-5 flex flex-wrap items-center gap-1.5 text-[12px] text-ink-3">
          <span>Interpreted as</span>
          {interp.text && <Badge tone="outline">text: {interp.text}</Badge>}
          {interp.countryIso2 && <Badge tone="outline">country: {interp.countryIso2}</Badge>}
          {interp.operator && <Badge tone="outline">operator: {interp.operator}</Badge>}
          {interp.status && <Badge tone="outline">status: {STATUS_LABEL[interp.status]}</Badge>}
          {interp.facilityType && <Badge tone="outline">type: {TYPE_LABEL[interp.facilityType]}</Badge>}
          {interp.minMw !== undefined && <Badge tone="outline">≥ {fmtMw(interp.minMw)}</Badge>}
          <Link href={routes.datacenters(filtersToQuery(interpFilters))} className="ml-1 text-ink-2 underline decoration-hair-2 hover:text-ink">
            Apply as filters
          </Link>
        </div>
      )}

      {nothing && <EmptyState icon={<Search className="size-5" strokeWidth={1.5} />} title={`Nothing matched “${q}”`} description="Try a shorter query, an operator name, a city or a country code." action={<Button href={routes.map()}>Browse the map</Button>} />}

      <div className="grid gap-x-8 gap-y-6 lg:grid-cols-[minmax(0,2fr)_minmax(0,1fr)]">
        {(facilities || (!r.ok && true)) && (
          <Section title="Data centers" description={facilities ? `${fmtInt(facilities.total)} facilities` : undefined} className="lg:order-1">
            <FacilityTable items={facilities?.items ?? []} basePath={routes.search(q)} columns={["operator", "country", "status", "mw", "type"]} emptyTitle={r.ok ? "No facilities match" : "Facilities unavailable"} emptyDescription={r.ok ? "Try another spelling or browse the index." : "The index API is not reachable right now."} />
            {facilities && facilities.total > facilities.items.length && (
              <div className="border-t border-hair py-3 text-[12.5px] text-ink-3">
                Showing {fmtInt(facilities.items.length)} of {fmtInt(facilities.total)} —{" "}
                <Link href={routes.datacenters(filtersToQuery(Object.keys(interpFilters).length ? interpFilters : { q }))} className="text-ink-2 underline decoration-hair-2 hover:text-ink">
                  see all in the index
                </Link>
              </div>
            )}
          </Section>
        )}
        <div className="flex flex-col gap-6 lg:order-2">
          {GROUPS.filter((g) => grouped.has(g)).map((g) => (
            <Section key={g} title={SEARCH_GROUP_LABEL[g] ?? g} level={3} aside={<span className="figure text-[11.5px] text-ink-3">{grouped.get(g)!.length}</span>}>
              <ul className="divide-y divide-hair">
                {grouped.get(g)!.map((h) => (
                  <li key={h.id}>
                    <Link href={h.href || routes.search(h.title)} className="group flex min-h-11 items-center justify-between gap-3 py-2">
                      <span className="min-w-0">
                        <span className="block truncate text-[13.5px] font-medium text-ink group-hover:text-accent">{h.title}</span>
                        {h.subtitle && <span className="block truncate text-[11.5px] text-ink-3">{h.subtitle}</span>}
                      </span>
                      {h.meta && typeof h.meta.mw === "number" && <span className="figure shrink-0 text-[12px] text-ink-3">{fmtMw(h.meta.mw)}</span>}
                      {h.meta && typeof h.meta.facilityCount === "number" && <span className="figure shrink-0 text-[12px] text-ink-3">{fmtInt(h.meta.facilityCount)} DC</span>}
                    </Link>
                  </li>
                ))}
              </ul>
            </Section>
          ))}
          {r.ok && grouped.size === 0 && !nothing && <EmptyState compact title="No entities matched" description="Only facilities matched this query." />}
        </div>
      </div>
    </Page>
  );
}