import Link from "next/link";
import { RelativeTime } from "@/components/ui/freshness";
import { StatusBadge } from "@/components/ui/status-badge";
import { cx, EVENT_TYPE_LABEL, instrumentHref } from "@/lib/format";
import type { MarketEvent } from "@/lib/types";

const TYPE_TONE: Record<string, string> = {
  TRADING_HALT: "text-negative",
  SCHEMA_DRIFT: "text-negative",
  SOURCE_FAILURE: "text-warning",
  SOURCE_DIVERGENCE: "text-warning",
  VOLATILITY_SPIKE: "text-warning",
  MARKET_OPEN: "text-positive",
  TRADING_RESUME: "text-positive",
  SOURCE_RECOVERY: "text-positive",
  FILING_PUBLISHED: "text-accent",
  DOCUMENT_CHANGED: "text-accent",
};

export function EventRow({ e, dense, className }: { e: MarketEvent; dense?: boolean; className?: string }) {
  const first = e.instruments?.[0];
  const url = typeof e.data?.url === "string" ? (e.data.url as string) : null;
  return (
    <li className={cx("flex gap-3 border-b border-rule py-2.5 last:border-0", dense && "py-1.5", className)}>
      <div className="w-[76px] shrink-0 pt-0.5 text-right">
        <RelativeTime value={e.timestamp} className="mono text-[11px] text-ink-3" />
      </div>
      <div className="min-w-0 flex-1">
        <div className="flex flex-wrap items-center gap-x-2 gap-y-1">
          <span className={cx("text-[10.5px] font-medium uppercase tracking-wide", TYPE_TONE[e.type] ?? "text-ink-3")}>{EVENT_TYPE_LABEL[e.type] ?? e.type.replace(/_/g, " ").toLowerCase()}</span>
          {(e.severity === "WARNING" || e.severity === "CRITICAL") && <StatusBadge status={e.severity} />}
          {first?.symbol && (
            <Link href={instrumentHref(first.id)} className="mono text-xs font-medium text-accent hover:underline">
              {first.symbol}
            </Link>
          )}
        </div>
        <Link href={`/events/${e.id}`} className="mt-0.5 block text-sm leading-snug hover:underline">
          {e.title}
        </Link>
        {!dense && e.summary && <div className="mt-0.5 truncate text-xs text-ink-3">{e.summary}</div>}
        <div className="mt-0.5 flex flex-wrap items-center gap-x-3 text-[11px] text-ink-3">
          <span>
            {e.source_count} source{e.source_count === 1 ? "" : "s"}
            {e.sources?.length ? ` · ${e.sources.slice(0, 3).join(", ")}` : ""}
          </span>
          <span className="mono">confidence {Math.round(e.confidence * 100)}%</span>
          {url && (
            <a href={url} target="_blank" rel="noopener noreferrer" className="text-accent hover:underline">
              document ↗
            </a>
          )}
        </div>
      </div>
    </li>
  );
}