import type { Metadata } from "next";
import Link from "next/link";
import { InstrumentTable } from "@/components/market/instrument-table";
import { Empty, Page, PageHeader, Section } from "@/components/ui/section";
import { StatusBadge } from "@/components/ui/status-badge";
import { api } from "@/lib/api";
import { ASSET_CLASS_LABEL } from "@/lib/format";
import type { InstrumentWithQuote, SearchResult } from "@/lib/types";

export const metadata: Metadata = { title: "Search", robots: { index: false } };
export const dynamic = "force-dynamic";

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() : "";
  const res = q ? await api<SearchResult>(`/v1/search?q=${encodeURIComponent(q)}&limit=50`) : null;
  const groups = res?.groups ?? {};
  const instrumentGroups = Object.entries(groups).filter(([g]) => g !== "EXCHANGE" && g !== "COUNTRY");
  return (
    <Page wide>
      <PageHeader kicker="Search" title={q ? `Results for “${q}”` : "Search"} lead="Symbols, names, aliases, exchanges and countries. Instruments with a canonical quote rank first." />
      <form action="/search" className="mb-6 flex gap-2">
        <input name="q" defaultValue={q} placeholder="AAPL, Bitcoin, S&P 500, TSX, Canada, US 10Y…" className="h-12 flex-1 rounded-md border border-rule bg-surface px-3 text-[15px] outline-none focus:border-rule-strong" autoFocus />
        <button type="submit" className="h-12 rounded-md bg-ink px-4 text-sm font-medium text-canvas">
          Search
        </button>
      </form>
      {q && !res?.results.length && <Empty>No results for “{q}”.</Empty>}
      {(groups.EXCHANGE as Array<Record<string, string>> | undefined)?.length ? (
        <Section title="Exchanges">
          <ul className="grid grid-cols-1 [&>*]:min-w-0 gap-2 sm:grid-cols-2 lg:grid-cols-3">
            {(groups.EXCHANGE as Array<Record<string, string>>).map((e) => (
              <li key={e.id} className="rounded-md border border-rule bg-surface px-3 py-2">
                <Link href={`/exchanges/${e.id}`} className="font-medium hover:underline">
                  {e.name}
                </Link>
                <div className="mt-0.5 flex items-center gap-2 text-xs text-ink-3">
                  <StatusBadge status={e.status} /> {e.mic ?? ""} · {e.country}
                </div>
              </li>
            ))}
          </ul>
        </Section>
      ) : null}
      {(groups.COUNTRY as Array<Record<string, string>> | undefined)?.length ? (
        <Section title="Countries">
          <ul className="flex flex-wrap gap-2">
            {(groups.COUNTRY as Array<Record<string, string>>).map((c) => (
              <li key={c.code}>
                <Link href={`/countries/${c.code}`} className="inline-flex h-9 items-center rounded-md border border-rule bg-surface px-3 text-sm hover:border-rule-strong">
                  {c.name} <span className="mono ml-2 text-xs text-ink-3">{c.code}</span>
                </Link>
              </li>
            ))}
          </ul>
        </Section>
      ) : null}
      {instrumentGroups.map(([g, items]) => (
        <Section key={g} title={ASSET_CLASS_LABEL[g] ?? g} hint={`${(items as unknown[]).length} match${(items as unknown[]).length === 1 ? "" : "es"}`}>
          <InstrumentTable rows={items as InstrumentWithQuote[]} compact showExchange />
        </Section>
      ))}
    </Page>
  );
}