import type { Metadata } from "next";
import Link from "next/link";
import { EventRow } from "@/components/market/event-row";
import { Empty, Page, PageHeader } from "@/components/ui/section";
import { api } from "@/lib/api";
import { cx, EVENT_TYPE_LABEL } from "@/lib/format";
import type { MarketEvent } from "@/lib/types";

export const metadata: Metadata = { title: "Events", description: "Canonical market events: halts, filings, price moves, volatility, market opens and source incidents.", alternates: { canonical: "/events" } };
export const dynamic = "force-dynamic";

const TYPES = ["PRICE_CHANGE", "SESSION_HIGH", "SESSION_LOW", "VOLATILITY_SPIKE", "TRADING_HALT", "TRADING_RESUME", "FILING_PUBLISHED", "MARKET_OPEN", "MARKET_CLOSE", "SOURCE_DIVERGENCE", "SOURCE_FAILURE", "SCHEMA_DRIFT", "DOCUMENT_CHANGED"];
const SEVS = ["INFO", "NOTICE", "WARNING", "CRITICAL"];

export default async function EventsPage({ searchParams }: { searchParams: Promise<Record<string, string | string[] | undefined>> }) {
  const sp = await searchParams;
  const type = typeof sp.type === "string" ? sp.type : "";
  const severity = typeof sp.severity === "string" ? sp.severity : "";
  const instrument = typeof sp.instrument === "string" ? sp.instrument : "";
  const country = typeof sp.country === "string" ? sp.country : "";
  const before = typeof sp.before === "string" ? sp.before : "";
  const q = new URLSearchParams({ limit: "100" });
  if (type) q.set("type", type);
  if (severity) q.set("severity", severity);
  if (instrument) q.set("instrument", instrument);
  if (country) q.set("country", country);
  if (before) q.set("before", before);
  const events = await api<MarketEvent[]>(`/v1/events?${q}`);
  const link = (patch: Record<string, string>) => {
    const u = new URLSearchParams();
    for (const [k, v] of Object.entries({ type, severity, instrument, country, ...patch })) if (v) u.set(k, v);
    const s = u.toString();
    return s ? `/events?${s}` : "/events";
  };
  const last = events[events.length - 1];
  const lastTs = last ? (typeof last.timestamp === "number" ? new Date(last.timestamp).toISOString() : String(last.timestamp).replace(" ", "T")) : null;
  return (
    <Page wide>
      <PageHeader kicker="Events" title="Market events" lead="Deduplicated, source-attributed events derived from observations (price moves, session extremes, volatility), venue feeds (halts), regulators (filings) and Market Atlas' own monitoring (source incidents)." actions={<Link href="/live" className="text-sm text-accent hover:underline">Watch live →</Link>} />
      <div className="mb-3 flex flex-wrap gap-1.5">
        <Link href={link({ type: "" })} className={cx("inline-flex h-8 items-center rounded-full border px-3 text-xs", !type ? "border-ink bg-ink text-canvas" : "border-rule text-ink-2 hover:border-rule-strong")}>
          All types
        </Link>
        {TYPES.map((t) => (
          <Link key={t} href={link({ type: t })} className={cx("inline-flex h-8 items-center rounded-full border px-3 text-xs", type === t ? "border-ink bg-ink text-canvas" : "border-rule text-ink-2 hover:border-rule-strong")}>
            {EVENT_TYPE_LABEL[t] ?? t}
          </Link>
        ))}
      </div>
      <div className="mb-4 flex flex-wrap items-center gap-1.5 text-xs">
        <span className="text-ink-3">Severity:</span>
        <Link href={link({ severity: "" })} className={cx("rounded-full border px-2.5 py-1", !severity ? "border-ink bg-ink text-canvas" : "border-rule text-ink-2")}>
          any
        </Link>
        {SEVS.map((s) => (
          <Link key={s} href={link({ severity: s })} className={cx("rounded-full border px-2.5 py-1", severity === s ? "border-ink bg-ink text-canvas" : "border-rule text-ink-2")}>
            {s.toLowerCase()}
          </Link>
        ))}
        {(instrument || country) && (
          <span className="ml-2 text-ink-3">
            filtered by {instrument ? `instrument ${instrument}` : `country ${country}`} ·{" "}
            <Link href={link({ instrument: "", country: "" })} className="text-accent hover:underline">
              clear
            </Link>
          </span>
        )}
      </div>
      {events.length ? (
        <ul className="rounded-md border border-rule bg-surface px-3">
          {events.map((e) => (
            <EventRow key={e.id} e={e} />
          ))}
        </ul>
      ) : (
        <Empty>No events match these filters.</Empty>
      )}
      {events.length >= 100 && lastTs && (
        <div className="mt-3 text-right text-xs">
          <Link href={link({ before: lastTs })} className="text-accent hover:underline">
            Older →
          </Link>
        </div>
      )}
    </Page>
  );
}