import type { Metadata } from "next";
import Link from "next/link";
import { LiveFeed } from "@/components/live-feed";
import { filtersFromParams } from "@/lib/feed-filters";
import { PageHeader } from "@/components/ui";
import { api, type EventQuery } from "@/lib/api";
import { SAVED_VIEWS, feedHref } from "@/lib/format";

export const dynamic = "force-dynamic";
export const metadata: Metadata = { title: "Live", description: "Every meaningful change detected on the public web, live. Filters persist in the URL and can be shared." };

/** Full-width live feed with URL-persisted filters (spec §99) and saved views (spec §100). */
export default async function LivePage({ searchParams }: { searchParams: Promise<Record<string, string | undefined>> }) {
  const sp = await searchParams;
  const f = filtersFromParams(sp);
  const q: EventQuery = { ...f, limit: 60 };
  const events = await api.events(q);
  const activeView = SAVED_VIEWS.find((v) => Object.entries(v.query).every(([k, val]) => String(sp[k] ?? "") === String(val)) && Object.keys(sp).length === Object.keys(v.query).length);
  return (
    <>
      <PageHeader
        compact
        kicker="Live feed"
        title={activeView ? activeView.label : "Live"}
        description="Everything WebSensor detects, as it happens. Filters live in the URL — share the link to share the view."
        actions={
          <div className="flex flex-wrap gap-1">
            {SAVED_VIEWS.map((v) => (
              <Link key={v.key} href={feedHref(v.query, "/live")} className={`rounded-md border px-2 py-1 text-[11.5px] ${activeView?.key === v.key ? "border-signal/50 bg-signal-soft text-signal" : "border-line text-fg-muted hover:text-fg"}`}>
                {v.label}
              </Link>
            ))}
          </div>
        }
      />
      <LiveFeed key={JSON.stringify(f)} initial={events.items} initialCursor={events.nextCursor} initialFilters={f} syncUrl showTabs={!f.category} title="LIVE WEB" />
    </>
  );
}