import Link from "next/link";
import type { Cluster, EventItem, TrendingItem } from "@/lib/api";
import { fmtOffset, fmtScore, relTime } from "@/lib/format";
import { Badge, Chip, Empty, Mark, Panel, Score, StateLabelText } from "./ui";

export function TrendingPanel({ items, title = "Trending entities", hours = 24 }: { items: TrendingItem[]; title?: string; hours?: number }) {
  return (
    <Panel title={`${title} · ${hours} h`} dense action={<Link href="/explore?tab=trending" className="text-[11px] text-fg-subtle hover:text-fg">all →</Link>}>
      {items.length === 0 ? (
        <Empty>Trending is computed from the last {hours} h of events.</Empty>
      ) : (
        <ol className="divide-y divide-line">
          {items.map((t, i) => (
            <li key={t.id} className="grid grid-cols-[1.25rem_1.25rem_1fr_auto] items-center gap-2 px-3 py-1.5 text-[13px]">
              <span className="font-mono text-[11px] text-fg-subtle tabular">{i + 1}</span>
              <Mark name={t.name} />
              <div className="min-w-0">
                <Link href={`/entity/${t.id}`} className="block truncate font-medium hover:underline">{t.name}</Link>
                <div className="truncate text-[11px] text-fg-subtle">
                  {t.events} signals · {t.sources} source{t.sources === 1 ? "" : "s"}{t.first_party ? ` · ${t.first_party} first-party` : ""}{t.silent ? ` · ${t.silent} silent` : ""}
                </div>
              </div>
              <span className={`font-mono text-[12px] font-semibold tabular ${t.direction === "up" ? "text-signal" : t.direction === "down" ? "text-fg-subtle" : "text-fg-muted"}`} title={`trend score ${fmtScore(t.score)} · ${t.events} vs ${t.prev_events} in the previous window`}>
                {t.direction === "up" ? "↑" : t.direction === "down" ? "↓" : "→"} {fmtScore(t.score)}
              </span>
            </li>
          ))}
        </ol>
      )}
    </Panel>
  );
}

export function ClustersPanel({ items, title = "Event clusters" }: { items: Cluster[]; title?: string }) {
  const multi = items.filter((c) => c.event_count > 1).slice(0, 8);
  return (
    <Panel title={title} dense action={<Link href="/explore?tab=clusters" className="text-[11px] text-fg-subtle hover:text-fg">all →</Link>}>
      {multi.length === 0 ? (
        <Empty>Related observations are grouped into clusters as they arrive.</Empty>
      ) : (
        <ul className="divide-y divide-line">
          {multi.map((c) => (
            <li key={c.id} className="flex items-start gap-2 px-3 py-1.5 text-[13px]">
              <Score value={c.max_importance} size="sm" />
              <div className="min-w-0 flex-1">
                <Link href={`/cluster/${c.slug ?? c.id}`} className="line-clamp-2 font-medium hover:underline">{c.title}</Link>
                <div className="flex flex-wrap items-center gap-x-2 text-[11px] text-fg-subtle">
                  <StateLabelText state={c.state} />
                  <span>{c.event_count} signals</span>
                  {c.source_count && c.source_count > 1 && <span>{c.source_count} sources</span>}
                  {(c.first_party_count ?? 0) > 0 && <span className="text-signal">{c.first_party_count} 1st-party</span>}
                  {c.lead_time_ms && c.lead_time_ms > 0 ? <span title="WebSensor lead time before the first external report">lead {fmtOffset(c.lead_time_ms).replace("+", "")}</span> : null}
                  <span>{relTime(c.last_at)}</span>
                </div>
              </div>
            </li>
          ))}
        </ul>
      )}
    </Panel>
  );
}

/** Breaking now rail (spec §94): primary event of each breaking / developing cluster. */
export function BreakingRail({ items, developing }: { items: Cluster[]; developing?: Cluster[] }) {
  const all = [...items.map((c) => ({ c, state: "breaking" })), ...(developing ?? []).map((c) => ({ c, state: "developing" }))].slice(0, 8);
  return (
    <Panel title={<span className="text-hot">Breaking now</span>} dense action={<Link href="/breaking" className="text-[11px] text-fg-subtle hover:text-fg">desk →</Link>}>
      {all.length === 0 ? (
        <Empty>Nothing is breaking right now. Breaking requires strong signal, freshness and confirmation — not just recency.</Empty>
      ) : (
        <ul className="divide-y divide-line">
          {all.map(({ c, state }) => {
            const e = c.event as EventItem | null | undefined;
            return (
              <li key={c.id} className={`px-3 py-2 text-[13px] ${state === "breaking" ? "border-l-2 border-l-hot/70" : "border-l-2 border-l-high/60"}`}>
                <div className="flex items-center gap-1.5">
                  <Badge kind={state as "breaking" | "developing"} compact />
                  <span className="truncate font-mono text-[10.5px] uppercase text-fg-subtle">{e?.source?.name ?? c.source?.name ?? ""}</span>
                  <span className="ml-auto font-mono text-[10.5px] text-fg-subtle">{relTime(c.last_at)}</span>
                </div>
                <Link href={e?.slug ? `/event/${e.slug}` : `/cluster/${c.slug ?? c.id}`} className="mt-0.5 line-clamp-2 font-medium hover:underline">{c.title}</Link>
                <div className="mt-0.5 flex flex-wrap items-center gap-1 text-[11px] text-fg-subtle">
                  <Score value={e?.signal_score ?? c.max_importance} size="sm" kind="signal" />
                  <span>{c.event_count} signal{c.event_count === 1 ? "" : "s"} · {c.source_count ?? 1} source{(c.source_count ?? 1) === 1 ? "" : "s"}</span>
                  {(c.first_party_count ?? 0) > 0 && <Chip tone="signal">{c.first_party_count} first-party</Chip>}
                </div>
              </li>
            );
          })}
        </ul>
      )}
    </Panel>
  );
}

export function AnomalyRail({ items }: { items: { id: string; name: string; domain: string; changes_2h: number; baseline_per_day: number; activity_score: number; pct_vs_baseline?: number | null }[] }) {
  const top = items.filter((s) => s.activity_score >= 45).slice(0, 6);
  return (
    <Panel title="Anomalous activity" dense action={<Link href="/radar" className="text-[11px] text-fg-subtle hover:text-fg">radar →</Link>}>
      {top.length === 0 ? (
        <Empty>No source is far above its baseline right now.</Empty>
      ) : (
        <ul className="divide-y divide-line">
          {top.map((s) => (
            <li key={s.id} className="px-3 py-1.5 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 tabular ${s.activity_score >= 70 ? "text-hot" : "text-high"}`}>{s.pct_vs_baseline !== null && s.pct_vs_baseline !== undefined ? `+${Math.min(9999, Math.round(s.pct_vs_baseline)).toLocaleString()}%` : fmtScore(s.activity_score)}</span>
              </div>
              <div className="text-[11px] text-fg-subtle">{s.changes_2h} changes in 2 h · baseline {s.baseline_per_day}/day</div>
            </li>
          ))}
        </ul>
      )}
    </Panel>
  );
}

export function SilentRail({ items }: { items: EventItem[] }) {
  return (
    <Panel title={<span className="text-silent">Silent changes</span>} dense action={<Link href="/silent" className="text-[11px] text-fg-subtle hover:text-fg">all →</Link>}>
      {items.length === 0 ? (
        <Empty>No silent change in this window.</Empty>
      ) : (
        <ul className="divide-y divide-line">
          {items.slice(0, 6).map((e) => (
            <li key={e.id} className="px-3 py-1.5 text-[13px]">
              <div className="flex items-center gap-2 text-[11px] text-fg-subtle">
                <span className="truncate font-mono uppercase">{e.source?.name}</span>
                <span className="ml-auto">{relTime(e.detected_at)}</span>
              </div>
              <Link href={`/event/${e.slug}`} className="line-clamp-2 hover:underline">{e.title}</Link>
              {e.field_changes?.[0] && (
                <div className="mt-0.5 truncate font-mono text-[11px] text-fg-muted">
                  {e.field_changes[0].label}: <span className="diff-line-del rounded px-0.5">{e.field_changes[0].before ?? "∅"}</span> → <span className="diff-line-add rounded px-0.5">{e.field_changes[0].after ?? "∅"}</span>
                </div>
              )}
            </li>
          ))}
        </ul>
      )}
    </Panel>
  );
}