"use client";

import Link from "next/link";
import type { MouseEvent } from "react";
import type { EventItem } from "@/lib/api";
import { relTime, utcTime, utcDate, utcDateTime, localDateTime } from "@/lib/format";
import { useEventDrawer } from "./event-drawer";
import { FieldChangeInline } from "./field-changes";
import { usePrefs } from "./prefs";
import { Badge, Chip, Flag, Score, TypeChip } from "./ui";

const CHANNEL_GROUPS: Record<string, string[]> = { finance: ["finance", "payments", "crypto", "commerce"], health: ["health", "pharma"], government: ["government", "statistics"], science: ["science", "space"], products: ["consumer-tech", "automotive", "semiconductors", "enterprise"], infrastructure: ["cloud", "developer", "internet", "standards"], news: ["news", "media"] };
function sameChannel(a: string, b: string): boolean {
  return CHANNEL_GROUPS[a]?.includes(b) ?? false;
}

/**
 * Feed row (spec §31): TIME · ENTITY/SOURCE · SIGNAL · TYPE · TITLE · STATUS · TAGS, with badges
 * BREAKING / DEVELOPING / SILENT / FIRST PARTY / CONFIRMED / ANOMALOUS. Density comes from CSS
 * variables (spec §32). Clicking the title opens the intelligence drawer (spec §33); the link keeps
 * a real href so middle-click / crawlers / no-JS still reach the permanent page.
 */
export function EventRow({ ev, flash = false, showDate = false, now, fresh = false, replayed = false }: { ev: EventItem; flash?: boolean; showDate?: boolean; now?: number; fresh?: boolean; replayed?: boolean }) {
  const { open } = useEventDrawer();
  const { exactTime, density, mounted } = usePrefs();
  const iso = (() => {
    const d = new Date(ev.detected_at);
    return Number.isNaN(d.getTime()) ? ev.detected_at : d.toISOString();
  })();
  const cats = (ev.categories ?? []).filter((c) => !Object.keys(CHANNEL_GROUPS).includes(c) || !ev.categories.some((x) => x !== c && sameChannel(c, x))).slice(0, density === "compact" ? 1 : 2);
  const signal = ev.signal_score ?? ev.importance;
  const state = ev.cluster?.state;
  const isBreaking = state === "breaking" || (signal >= 80 && !state);
  const isDeveloping = state === "developing";
  const anomalous = (ev.anomaly_score ?? 0) >= 60;
  const clusterHref = ev.cluster?.slug ? `/cluster/${ev.cluster.slug}` : ev.cluster_id ? `/cluster/${ev.cluster_id}` : null;
  const onClick = (e: MouseEvent<HTMLAnchorElement>): void => {
    if (e.metaKey || e.ctrlKey || e.shiftKey || e.button !== 0) return;
    e.preventDefault();
    open(ev.slug, ev);
  };
  return (
    <article className={`row-dense offscreen-ok grid grid-cols-[auto_1fr] gap-x-3 px-3 hairline sm:grid-cols-[6.25rem_1fr_auto] ${flash || fresh ? "animate-row-in" : ""} ${isBreaking ? "border-l-2 border-l-hot/70" : isDeveloping ? "border-l-2 border-l-high/60" : ev.silent_change ? "border-l-2 border-l-silent/60" : "border-l-2 border-l-transparent"}`}>
      <div className="flex flex-col font-mono meta leading-4 text-fg-subtle tabular">
        <time dateTime={iso} title={mounted ? localDateTime(ev.detected_at) : utcDateTime(ev.detected_at)} suppressHydrationWarning className="text-fg-muted">{utcTime(ev.detected_at)}</time>
        <span suppressHydrationWarning>{showDate ? utcDate(ev.detected_at) : exactTime ? "UTC" : relTime(ev.detected_at, now)}</span>
      </div>
      <div className="min-w-0 sm:col-start-2">
        <div className="flex flex-wrap items-center gap-x-2 gap-y-0.5">
          <Link href={`/source/${ev.source?.id ?? ev.source_id}`} className="font-mono meta font-semibold uppercase tracking-wide text-fg-muted hover:text-fg">
            {ev.source?.name ?? ev.source_id}
          </Link>
          {ev.country && <Flag code={ev.country} className="text-[11px]" />}
          <span className="sm:hidden">
            <Score value={signal} size="sm" kind="signal" />
          </span>
          {isBreaking && <Badge kind="breaking" compact={density === "compact"} />}
          {isDeveloping && <Badge kind="developing" compact={density === "compact"} />}
          {ev.silent_change && <Badge kind="silent" compact={density === "compact"} />}
          {ev.first_party === false && <Badge kind="external" compact />}
          {ev.evidence_label === "CONFIRMED" && <Badge kind="confirmed" compact={density === "compact"} />}
          {anomalous && <Badge kind="anomalous" compact />}
          {replayed && <Badge kind="replayed" compact />}
        </div>
        <Link href={`/event/${ev.slug}`} onClick={onClick} className={`mt-0.5 block font-medium leading-snug text-fg hover:underline [overflow-wrap:anywhere] ${density === "compact" ? "truncate" : ""}`}>
          {ev.title}
        </Link>
        {density !== "compact" && ev.field_changes && ev.field_changes.length > 0 && (
          <div className="mt-0.5">
            <FieldChangeInline items={ev.field_changes} max={density === "comfortable" ? 3 : 2} />
          </div>
        )}
        {density === "comfortable" && ev.summary && <p className="mt-0.5 line-clamp-2 text-[12.5px] text-fg-muted">{ev.summary}</p>}
        <div className="mt-1 flex flex-wrap items-center gap-1">
          <TypeChip type={ev.event_type} href={`/live?event_type=${ev.event_type}`} />
          {cats.map((c) => (
            <Chip key={c} href={`/category/${c}`}>{c}</Chip>
          ))}
          {ev.entities?.filter((x) => x.role === "subject").slice(0, 1).map((x) => (
            <Chip key={x.id} href={`/entity/${x.id}`} tone="default" className="!text-fg-muted">{x.name}</Chip>
          ))}
          {ev.cluster_size && ev.cluster_size > 1 && clusterHref && (
            <Chip tone="info" href={clusterHref} title="Signals in this event cluster">
              {ev.cluster_size} signals{ev.cluster?.source_count && ev.cluster.source_count > 1 ? ` · ${ev.cluster.source_count} sources` : ""}
            </Chip>
          )}
        </div>
      </div>
      <div className="hidden items-start pt-0.5 sm:flex">
        <Score value={signal} kind="signal" title={`Signal ${Math.round(signal)} · importance ${Math.round(ev.importance)} · confidence ${Math.round(ev.confidence)}`} />
      </div>
    </article>
  );
}