import type { Metadata } from "next";
import Link from "next/link";
import { EventRow } from "@/components/event-row";
import { LiveFeed } from "@/components/live-feed";
import { Badge, Chip, Empty, Flag, PageHeader, Panel, Score, StateLabelText } from "@/components/ui";
import { api, type Cluster, type EventItem } from "@/lib/api";
import { fmtOffset, relTime, typeLabel, utcTime } from "@/lib/format";

export const dynamic = "force-dynamic";
export const metadata: Metadata = { title: "Breaking", description: "Breaking now, developing, recently confirmed and watching — ranked by signal, velocity, novelty and confirmation, not by recency." };

/** Breaking desk (spec §34). */
export default async function BreakingPage() {
  const [desk, live] = await Promise.all([api.breakingDesk(), api.breaking(40)]);
  const d = desk ?? { breaking_now: [], developing: [], recently_confirmed: [], watching: [], generated_at: "" };
  return (
    <>
      <PageHeader kicker={<span className="flex items-center gap-2"><Badge kind="breaking" /> <span className="text-fg-subtle">Breaking is not recent: it needs strong signal, velocity, novelty, source quality, confirmation and cross-source activity.</span></span>} title="Breaking" />
      <div className="grid grid-cols-1 gap-4 xl:grid-cols-[1fr_1fr] [&>*]:min-w-0">
        <ClusterSection title="Breaking now" tone="hot" items={d.breaking_now} empty="Nothing is breaking right now." />
        <ClusterSection title="Developing" tone="high" items={d.developing} empty="No developing story: signals are not accumulating fast enough anywhere." />
      </div>
      <div className="mt-4 grid grid-cols-1 gap-4 xl:grid-cols-[1fr_1fr] [&>*]:min-w-0">
        <ClusterSection title="Recently confirmed" tone="ok" items={d.recently_confirmed} empty="No cluster reached independent confirmation in the last 48 h." />
        <Panel title="Watching · high signal, not yet breaking" dense>
          {d.watching.length ? d.watching.slice(0, 12).map((e) => <EventRow key={e.id} ev={e} />) : <Empty>Nothing to watch.</Empty>}
        </Panel>
      </div>
      <div className="mt-4">
        <LiveFeed initial={live.items} initialCursor={live.nextCursor} fixed="breaking" title="BREAKING · SIGNAL ≥ 80 · LIVE" showFilters={false} />
      </div>
    </>
  );
}

function ClusterSection({ title, tone, items, empty }: { title: string; tone: "hot" | "high" | "ok"; items: Cluster[]; empty: string }) {
  const color = tone === "hot" ? "text-hot" : tone === "high" ? "text-high" : "text-ok";
  return (
    <Panel title={<span className={color}>{title} <span className="font-mono text-fg-subtle">{items.length}</span></span>} dense>
      {items.length === 0 ? (
        <Empty>{empty}</Empty>
      ) : (
        <ul className="divide-y divide-line">
          {items.map((c) => {
            const e = c.event as EventItem | null | undefined;
            return (
              <li key={c.id} className={`px-3 py-2.5 ${tone === "hot" ? "border-l-2 border-l-hot/70" : tone === "high" ? "border-l-2 border-l-high/60" : "border-l-2 border-l-ok/50"}`}>
                <div className="flex flex-wrap items-center gap-x-2 gap-y-1 text-[11px] text-fg-subtle">
                  <StateLabelText state={c.state} />
                  {e?.source && <Link href={`/source/${e.source.id}`} className="font-mono uppercase text-fg-muted hover:text-fg">{e.source.name}</Link>}
                  {e?.country && <Flag code={e.country} />}
                  {e?.event_type && <Chip>{typeLabel(e.event_type)}</Chip>}
                  {e?.silent_change && <Badge kind="silent" compact />}
                  <span className="ml-auto font-mono tabular">{utcTime(c.last_at)} · {relTime(c.last_at)}</span>
                </div>
                <div className="mt-1 flex items-start gap-3">
                  <Score value={e?.signal_score ?? c.max_importance} kind="signal" />
                  <div className="min-w-0 flex-1">
                    <Link href={e?.slug ? `/event/${e.slug}` : `/cluster/${c.slug ?? c.id}`} className="block font-medium leading-snug hover:underline">{c.title}</Link>
                    {e?.summary && <p className="mt-0.5 line-clamp-2 text-[12.5px] text-fg-muted">{e.summary}</p>}
                    <div className="mt-1 flex flex-wrap items-center gap-1.5 text-[11px] text-fg-subtle">
                      <Link href={`/cluster/${c.slug ?? c.id}`} className="text-info hover:underline">{c.event_count} signal{c.event_count === 1 ? "" : "s"} · {c.source_count ?? 1} source{(c.source_count ?? 1) === 1 ? "" : "s"}</Link>
                      {(c.first_party_count ?? 0) > 0 && <Chip tone="signal">{c.first_party_count} first-party</Chip>}
                      {(c.external_count ?? 0) > 0 && <Chip>{c.external_count} external</Chip>}
                      {c.velocity !== undefined && c.velocity >= 40 && <Chip tone="high">velocity {Math.round(c.velocity)}</Chip>}
                      {c.lead_time_ms && c.lead_time_ms > 0 ? <Chip tone="ok" title="WebSensor detected the first-party signal this long before the first external report">lead {fmtOffset(c.lead_time_ms).replace("+", "")}</Chip> : null}
                      {c.sources && c.sources.length > 1 && <span className="min-w-0 max-w-full truncate">{c.sources.slice(0, 4).map((s) => s.name).join(" · ")}{c.sources.length > 4 ? ` +${c.sources.length - 4}` : ""}</span>}
                    </div>
                  </div>
                </div>
              </li>
            );
          })}
        </ul>
      )}
    </Panel>
  );
}