import type { Metadata } from "next";
import Link from "next/link";
import { FieldChanges } from "@/components/field-changes";
import { LiveFeed } from "@/components/live-feed";
import { Badge, Chip, Empty, Flag, PageHeader, Panel, Score } from "@/components/ui";
import { api } from "@/lib/api";
import { agoIso, relTime, typeLabel, utcDateTime } from "@/lib/format";

export const dynamic = "force-dynamic";
export const metadata: Metadata = { title: "Silent changes", description: "Pricing, terms, API limits, documentation and product pages that changed quietly — no announcement matched. Previous state, current state, exact diff." };

/** Dedicated silent-change experience (spec §23). */
export default async function SilentPage() {
  const [top, recent, count24] = await Promise.all([api.events({ silent_change: true, limit: 12, order: "signal", after: agoIso(48 * 3600e3) }), api.events({ silent_change: true, limit: 60 }), api.eventCount({ silent_change: true, after: agoIso(24 * 3600e3) })]);
  const byType = new Map<string, number>();
  for (const e of recent.items) byType.set(e.event_type, (byType.get(e.event_type) ?? 0) + 1);
  return (
    <>
      <PageHeader
        kicker={<span className="flex items-center gap-2"><Badge kind="silent" /> <span className="text-fg-subtle">{count24.count} in the last 24 h · first-party pages only · importance ≥ 45 · no matching announcement within 12 h</span></span>}
        title="Silent changes"
        description="Something was modified without an obvious public announcement: a price quietly changed, documentation rewritten, a feature removed, terms edited, an API limit adjusted, a product page gone. Each item shows the previous state, the current state and the exact diff."
        actions={<div className="flex flex-wrap gap-1">{[...byType.entries()].sort((a, b) => b[1] - a[1]).slice(0, 8).map(([t, n]) => <Chip key={t} href={`/live?silent_change=true&event_type=${t}`}>{typeLabel(t)} <span className="font-mono text-fg-subtle">{n}</span></Chip>)}</div>}
      />
      <Panel title="Most significant · 48 h" dense className="mb-4">
        {top.items.length === 0 ? (
          <Empty>No silent change detected in this period.</Empty>
        ) : (
          <ul className="grid gap-px bg-line md:grid-cols-2 xl:grid-cols-3">
            {top.items.map((e) => (
              <li key={e.id} className="flex flex-col gap-2 bg-panel p-3">
                <div className="flex items-center gap-2 text-[11px] text-fg-subtle">
                  <Link href={`/source/${e.source?.id ?? e.source_id}`} className="truncate font-mono uppercase text-fg-muted hover:text-fg">{e.source?.name}</Link>
                  {e.country && <Flag code={e.country} />}
                  <Chip>{typeLabel(e.event_type)}</Chip>
                  <span className="ml-auto whitespace-nowrap font-mono tabular" title={utcDateTime(e.detected_at)}>{relTime(e.detected_at)}</span>
                </div>
                <div className="flex items-start gap-2">
                  <Score value={e.signal_score ?? e.importance} kind="signal" size="sm" />
                  <Link href={`/event/${e.slug}`} className="font-medium leading-snug hover:underline">{e.title}</Link>
                </div>
                {e.field_changes?.length ? <FieldChanges items={e.field_changes} compact max={3} /> : <p className="line-clamp-3 text-[12px] text-fg-muted">{e.summary}</p>}
                <div className="mt-auto flex items-center gap-2 text-[11px]">
                  <Link href={`/event/${e.slug}#diff`} className="text-info hover:underline">exact diff</Link>
                  {e.old_snapshot_id && e.new_snapshot_id && <Link href={`/compare?a=${e.old_snapshot_id}&b=${e.new_snapshot_id}`} className="text-info hover:underline">before / after</Link>}
                  <span className="ml-auto text-fg-subtle">{e.evidence_label}</span>
                </div>
              </li>
            ))}
          </ul>
        )}
      </Panel>
      <LiveFeed initial={recent.items} initialCursor={recent.nextCursor} fixed="silent" title="SILENT CHANGES · LIVE" showFilters={false} />
    </>
  );
}