"use client";

import { useMemo, type CSSProperties } from "react";
import type { CallRecord } from "@/lib/types";

const WINDOW_MS = 60 * 60 * 1000;
const MAX_ITEMS = 25;

function hhmm(iso: string): string {
  return new Date(iso).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit", hour12: false });
}

/**
 * Live radio transcripts, newest first, as a slow belt along the bottom of
 * the wall (mockup "Radio" ticker). Clicking an incident id drills into it.
 * Transcripts are machine output — the same text the call list already shows.
 */
export function TranscriptTicker({ calls, onSelectIncident }: { calls: CallRecord[]; onSelectIncident: (id: string) => void }) {
  const items = useMemo(() => {
    const cutoff = Date.now() - WINDOW_MS;
    return calls
      .filter((c) => !c.duplicate_of && (c.transcript_corrected || c.transcript) && new Date(c.started_at).getTime() >= cutoff)
      .sort((a, b) => b.started_at.localeCompare(a.started_at))
      .slice(0, MAX_ITEMS);
  }, [calls]);

  const belt = (copy: number) =>
    items.map((c) => {
      const text = (c.transcript_corrected || c.transcript || "").replace(/\s+/g, " ").trim();
      const inc = c.incident_ids?.[0] ?? c.incident_id ?? null;
      return (
        <span key={`${copy}-${c.call_id}`} className="inline-flex items-center gap-1.5 mr-8 whitespace-nowrap" aria-hidden={copy > 0}>
          <span className="font-mono text-ink-muted">{hhmm(c.started_at)}</span>
          {c.talkgroup_name && <span className="font-mono text-[10px] px-1 rounded bg-raised text-ink-2">{c.talkgroup_name}</span>}
          {inc && (
            <button type="button" tabIndex={copy > 0 ? -1 : 0} onClick={() => onSelectIncident(inc)}
              className="font-mono text-[10px] text-accent hover:underline">{inc.slice(0, 8)}</button>
          )}
          <span className="text-ink-2">{text.length > 160 ? `${text.slice(0, 157)}…` : text}</span>
        </span>
      );
    });

  return (
    <div className="h-9 shrink-0 flex items-center border-t border-line bg-surface/95 text-xs" aria-label="Live radio transcripts">
      <div className="px-3 shrink-0 font-semibold text-ink-2 uppercase tracking-wide text-[10px] flex items-center gap-1">
        <span className="text-accent">●</span>Radio
      </div>
      <div className="drb-ticker flex-1 min-w-0 overflow-hidden">
        {items.length === 0 ? (
          <span className="text-ink-muted">No transcribed calls in the last hour.</span>
        ) : (
          <div className="drb-ticker-belt inline-flex" style={{ "--drb-ticker-duration": `${Math.max(40, items.length * 8)}s` } as CSSProperties}>
            {belt(0)}
            {belt(1)}
          </div>
        )}
      </div>
      <span className="px-3 shrink-0 text-[10px] text-ink-muted hidden md:inline">machine transcripts · unverified</span>
    </div>
  );
}