import Link from "next/link";
import type { Metadata } from "next";
import { EventRow } from "@/components/event-row";
import { Badge, Chip, Empty, Flag, Kbd, PageHeader, Panel, Score, StateBadge, TierBadge } from "@/components/ui";
import { api } from "@/lib/api";
import { relTime, typeLabel, utcDateTime } from "@/lib/format";

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

const SYNTAX: { key: string; example: string; help: string }[] = [
  { key: "entity", example: "entity:openai", help: "events linked to an entity" },
  { key: "type", example: "type:pricing_change", help: "event type" },
  { key: "after", example: "after:7d", help: "detected after (7d, 24h, 2026-09-01)" },
  { key: "silent", example: "silent:true", help: "silent changes only" },
  { key: "importance", example: "importance:>70", help: "minimum importance" },
  { key: "country", example: "country:CA", help: "source country" },
  { key: "first_party", example: "first_party:true", help: "first-party evidence only" },
];

function fmtFilter(k: string, v: unknown): string {
  if (v === null || v === undefined) return "";
  if (typeof v === "string" && /^\d{4}-\d{2}-\d{2}T/.test(v)) return utcDateTime(v);
  if (Array.isArray(v)) return v.join(", ");
  return String(v);
}

/** Search (spec §30): full-text + structured filters, results across events, clusters, entities, sources and URLs. */
export default async function SearchPage({ searchParams }: { searchParams: Promise<{ q?: string }> }) {
  const { q = "" } = await searchParams;
  const query = q.trim();
  const r = query.length >= 2 ? await api.search(query) : null;
  const filters = Object.entries(r?.parsed?.filters ?? {}).filter(([, v]) => v !== undefined && v !== null && v !== "");
  const text = r?.parsed?.text?.trim() ?? "";
  const clusters = r?.clusters ?? [];
  const total = r ? r.events.length + clusters.length + r.entities.length + r.sources.length + r.urls.length : 0;
  return (
    <>
      <PageHeader compact kicker="Search everything" title={query ? <span>Results for “{query}”</span> : "Search"} description="Events, clusters, entities, sources and URLs. Full-text over titles, summaries and keywords; structured filters narrow the event set." />
      <form action="/search" className="mb-2 flex gap-2">
        <input name="q" defaultValue={q} autoFocus placeholder="OpenAI, CVE-2026, pricing, status.…" aria-label="Search" className="h-9 w-full min-w-0 max-w-2xl rounded-md border border-line bg-panel px-3 font-mono text-[13px] placeholder:text-fg-subtle" />
        <button type="submit" className="h-9 rounded-md border border-line bg-panel-2 px-3 text-[13px] hover:border-line-strong">Search</button>
      </form>
      <div className="mb-4 flex flex-wrap items-center gap-x-2 gap-y-1 text-[11.5px] text-fg-subtle">
        <span>Syntax</span>
        {SYNTAX.map((s) => (
          <Link key={s.key} href={`/search?q=${encodeURIComponent(`${query ? query + " " : ""}${s.example}`)}`} title={s.help} className="rounded-sm border border-line bg-panel-2 px-1.5 py-px font-mono text-[10.5px] text-fg-muted hover:text-fg">{s.example}</Link>
        ))}
        <span className="hidden items-center gap-1 sm:inline-flex"><Kbd>⌘K</Kbd> anywhere</span>
      </div>

      {r && (
        <>
          <div className="mb-4 flex flex-wrap items-center gap-1.5 text-[12px]">
            <span className="text-fg-subtle">{total} result{total === 1 ? "" : "s"}</span>
            {text && <Chip tone="default" title="Full-text term">“{text}”</Chip>}
            {filters.map(([k, v]) => (
              <Chip key={k} tone="info" className="font-mono" title={`Filter ${k}`}>{k}: {fmtFilter(k, v)}</Chip>
            ))}
            {filters.length > 0 && <Link href={`/search?q=${encodeURIComponent(text)}`} className="text-[11px] text-fg-subtle hover:text-fg">clear filters</Link>}
          </div>
          <div className="grid gap-4 xl:grid-cols-[1fr_360px]">
            <div className="flex min-w-0 flex-col gap-4">
              <Panel title={`Events · ${r.events.length}`} dense action={r.events.length ? <Link href={`/live?q=${encodeURIComponent(text || query)}`} className="text-[11px] text-fg-subtle hover:text-fg">live →</Link> : undefined}>
                {r.events.length ? r.events.map((e) => <EventRow key={e.id} ev={e} showDate />) : <Empty>No event matches{filters.length ? " these filters" : ""}. Try a broader term, remove a filter, or extend the window with <span className="font-mono">after:30d</span>.</Empty>}
              </Panel>
              <Panel title={`Clusters · ${clusters.length}`} dense>
                {clusters.length ? (
                  <ul className="divide-y divide-line">
                    {clusters.map((c) => (
                      <li key={c.id} className="grid grid-cols-[auto_1fr] items-start gap-x-3 px-3 py-2 text-[13px]">
                        <Score value={c.max_importance} size="sm" />
                        <div className="min-w-0">
                          <div className="flex flex-wrap items-center gap-x-2 text-[11px] text-fg-subtle">
                            <StateBadge state={c.state} />
                            <span>{c.event_count} signal{c.event_count === 1 ? "" : "s"} · {c.source_count} source{c.source_count === 1 ? "" : "s"}</span>
                            <span className="ml-auto font-mono tabular">{relTime(c.last_at)}</span>
                          </div>
                          <Link href={`/cluster/${c.slug ?? c.id}`} className="mt-0.5 block font-medium leading-snug hover:underline">{c.title}</Link>
                        </div>
                      </li>
                    ))}
                  </ul>
                ) : (
                  <Empty>No cluster matches. Clusters group related signals across sources.</Empty>
                )}
              </Panel>
            </div>
            <aside className="flex min-w-0 flex-col gap-4">
              <Panel title={`Entities · ${r.entities.length}`} dense>
                {r.entities.length ? (
                  <ul className="divide-y divide-line">
                    {r.entities.map((e) => (
                      <li key={e.id} className="flex items-center gap-2 px-3 py-1.5 text-[13px]">
                        <div className="min-w-0 flex-1">
                          <Link href={`/entity/${e.id}`} className="block truncate font-medium hover:underline">{e.name}</Link>
                          <div className="truncate font-mono text-[10.5px] text-fg-subtle">{e.domain ?? e.id}{e.event_count ? ` · ${e.event_count} ev` : ""}</div>
                        </div>
                        <Chip>{e.type.replace(/_/g, " ")}</Chip>
                      </li>
                    ))}
                  </ul>
                ) : (
                  <Empty>No entity matches.</Empty>
                )}
              </Panel>
              <Panel title={`Sources · ${r.sources.length}`} dense>
                {r.sources.length ? (
                  <ul className="divide-y divide-line">
                    {r.sources.map((s) => (
                      <li key={s.id} className="flex items-center gap-2 px-3 py-1.5 text-[13px]">
                        <TierBadge tier={s.tier} />
                        <div className="min-w-0 flex-1">
                          <Link href={`/source/${s.id}`} className="block truncate font-medium hover:underline">{s.name}</Link>
                          <Link href={`/domain/${s.domain}`} className="block truncate font-mono text-[10.5px] text-fg-subtle hover:underline">{s.domain}</Link>
                        </div>
                        {s.country && <Flag code={s.country} className="text-[12px]" />}
                        {s.first_party === false ? <Badge kind="external" compact /> : <Badge kind="first-party" compact />}
                      </li>
                    ))}
                  </ul>
                ) : (
                  <Empty>No source matches.</Empty>
                )}
              </Panel>
              <Panel title={`URLs · ${r.urls.length}`} dense>
                {r.urls.length ? (
                  <ul className="divide-y divide-line">
                    {r.urls.map((u) => (
                      <li key={u.url} className="px-3 py-1.5 text-[12px]">
                        <Link href={`/url?u=${encodeURIComponent(u.url)}`} className="block truncate font-mono hover:underline" title={u.url}>{u.url}</Link>
                        <span className="flex items-center gap-2 text-[11px] text-fg-subtle">
                          <span>{u.change_count} change{u.change_count === 1 ? "" : "s"}</span>
                          <span>·</span>
                          <span>{relTime(u.last_seen_at)}</span>
                          {u.status && u.status !== "active" && <Chip tone="warn" className="font-mono">{typeLabel(u.status)}</Chip>}
                        </span>
                      </li>
                    ))}
                  </ul>
                ) : (
                  <Empty>No monitored URL matches.</Empty>
                )}
              </Panel>
            </aside>
          </div>
        </>
      )}
      {!r && query.length > 0 && query.length < 2 && <Empty>Type at least two characters.</Empty>}
    </>
  );
}