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

export const dynamic = "force-dynamic";
export const metadata: Metadata = { title: "Radar", description: "Weak signals that are not yet breaking: unusual source activity, clusters of silent changes, documentation and repository bursts, fresh status changes." };

/** Radar (spec §101): indicators, not facts. */
export default async function RadarPage() {
  const r = await api.radar();
  if (!r) return <Empty>Radar is warming up.</Empty>;
  return (
    <>
      <PageHeader compact kicker={<Chip tone="warn">Indicators, not facts</Chip>} title="Radar" description="What might become important next. Each item is a pattern in raw observations — a source far above its baseline, several silent changes around one entity, a burst of documentation or repository edits, a fresh status change — that has not (yet) produced a high-importance event." />
      <div className="grid grid-cols-1 gap-4 lg:grid-cols-2 xl:grid-cols-3 [&>*]:min-w-0">
        <Panel title="Unusual source activity · 3 h" dense>
          {r.unusual_source_activity.length ? (
            <ul className="divide-y divide-line">
              {r.unusual_source_activity.map((s) => (
                <li key={s.id} className="px-3 py-2 text-[13px]">
                  <div className="flex items-center gap-2">
                    <Link href={`/source/${s.id}`} className="min-w-0 flex-1 truncate font-medium hover:underline">{s.name}</Link>
                    <span className="font-mono text-[12px] font-semibold text-high tabular">×{s.ratio}</span>
                  </div>
                  <div className="text-[11px] text-fg-subtle">{s.changes_3h} raw changes in 3 h · baseline {s.baseline_per_day}/day · no high-importance event yet</div>
                  <div className="mt-1 flex flex-wrap gap-1">{(s.categories ?? []).slice(0, 3).map((c) => <Chip key={c} href={`/category/${c}`}>{c}</Chip>)}</div>
                </li>
              ))}
            </ul>
          ) : (
            <Empty>No source is quietly bursting above its baseline.</Empty>
          )}
        </Panel>
        <Panel title="Silent-change clusters · 24 h" dense>
          {r.silent_clusters.length ? (
            <ul className="divide-y divide-line">
              {r.silent_clusters.map((e) => (
                <li key={e.id} className="px-3 py-2 text-[13px]">
                  <div className="flex items-center gap-2">
                    <Link href={`/entity/${e.id}?tab=silent`} className="min-w-0 flex-1 truncate font-medium hover:underline">{e.name}</Link>
                    <span className="font-mono text-[12px] font-semibold text-silent tabular">{e.silent_24h} silent</span>
                  </div>
                  <div className="mt-1 flex flex-wrap gap-1">{e.types.slice(0, 4).map((t) => <Chip key={t} tone="silent">{typeLabel(t)}</Chip>)}<span className="text-[11px] text-fg-subtle">{relTime(e.last_at)}</span></div>
                </li>
              ))}
            </ul>
          ) : (
            <Empty>No entity accumulated several silent changes.</Empty>
          )}
        </Panel>
        <Panel title="Developing clusters" dense>
          {r.developing.length ? (
            <ul className="divide-y divide-line">
              {r.developing.map((c) => (
                <li key={c.id} className="flex items-start gap-2 px-3 py-2 text-[13px]">
                  <Score value={c.max_importance} size="sm" />
                  <div className="min-w-0">
                    <Link href={`/cluster/${c.slug ?? c.id}`} className="line-clamp-2 font-medium hover:underline">{c.title}</Link>
                    <div className="flex flex-wrap gap-x-2 text-[11px] text-fg-subtle"><StateLabelText state={c.state} /><span>{c.event_count} signals · {c.source_count} sources · velocity {Math.round(c.velocity ?? 0)}</span><span>{relTime(c.last_at)}</span></div>
                  </div>
                </li>
              ))}
            </ul>
          ) : (
            <Empty>No developing cluster.</Empty>
          )}
        </Panel>
        <Panel title="Documentation & API bursts · 6 h" dense>
          {r.documentation_bursts.length ? (
            <ul className="divide-y divide-line">
              {r.documentation_bursts.map((s) => (
                <li key={s.id} className="px-3 py-2 text-[13px]">
                  <div className="flex items-center gap-2">
                    <Link href={`/source/${s.id}`} className="min-w-0 flex-1 truncate font-medium hover:underline">{s.name}</Link>
                    <span className="font-mono text-[12px] tabular">{s.doc_changes_6h} edits</span>
                  </div>
                  <div className="mt-1 flex flex-wrap gap-1">{s.types.map((t) => <Chip key={t}>{typeLabel(t)}</Chip>)}<span className="text-[11px] text-fg-subtle">{relTime(s.last_at)}</span></div>
                </li>
              ))}
            </ul>
          ) : (
            <Empty>No documentation burst. A launch often starts with several doc/API edits in a short window.</Empty>
          )}
        </Panel>
        <Panel title="Repository bursts · 6 h" dense>
          {r.repository_bursts.length ? (
            <ul className="divide-y divide-line">
              {r.repository_bursts.map((s) => (
                <li key={s.id} className="flex items-center gap-2 px-3 py-2 text-[13px]">
                  <Link href={`/source/${s.id}`} className="min-w-0 flex-1 truncate font-medium hover:underline">{s.name}</Link>
                  <span className="font-mono text-[12px] tabular">{s.repo_events_6h} releases/commits</span>
                  <span className="text-[11px] text-fg-subtle">{relTime(s.last_at)}</span>
                </li>
              ))}
            </ul>
          ) : (
            <Empty>No repository burst.</Empty>
          )}
        </Panel>
        <Panel title="New coverage lighting up · 24 h" dense>
          {r.new_coverage.length ? (
            <ul className="divide-y divide-line">
              {r.new_coverage.map((s) => (
                <li key={s.id} className="flex items-center gap-2 px-3 py-2 text-[13px]">
                  <div className="min-w-0 flex-1">
                    <Link href={`/sensor/${s.id}`} className="block truncate font-medium hover:underline">{s.name}</Link>
                    <div className="truncate text-[11px] text-fg-subtle">{s.source_name} · first event {relTime(s.first_event_at)}</div>
                  </div>
                  <span className="font-mono text-[12px] tabular">{s.events}</span>
                </li>
              ))}
            </ul>
          ) : (
            <Empty>No sensor produced its first event today.</Empty>
          )}
        </Panel>
      </div>
      <Panel title="Fresh status changes below the breaking bar · 3 h" dense className="mt-4">
        {r.status_changes.length ? r.status_changes.map((e) => <EventRow key={e.id} ev={e} />) : <Empty>No fresh status-page change.</Empty>}
      </Panel>
      <p className="mt-3 text-[11px] text-fg-subtle">{r.disclaimer} Generated {relTime(r.generated_at)}.</p>
    </>
  );
}