import Link from "next/link";
import type { EventItem } from "@/lib/api";
import { dayHeader, utcDate, utcTime, typeLabel } from "@/lib/format";
import { Empty, Score, SilentBadge } from "./ui";

/** Git-log style timeline grouped by UTC day (spec §21). */
export function Timeline({ events, showSource = false }: { events: EventItem[]; showSource?: boolean }) {
  if (!events.length) return <Empty>No events recorded yet.</Empty>;
  const groups = new Map<string, EventItem[]>();
  for (const e of events) {
    const d = utcDate(e.detected_at);
    if (!groups.has(d)) groups.set(d, []);
    groups.get(d)!.push(e);
  }
  return (
    <div>
      {[...groups.entries()].map(([day, evs]) => (
        <div key={day}>
          <div className="sticky top-12 z-10 border-y border-line bg-panel-2/95 px-3 py-1 font-mono text-[11px] font-semibold tracking-wider text-fg-muted backdrop-blur">{dayHeader(evs[0]!.detected_at)}</div>
          {evs.map((e) => (
            <div key={e.id} className="grid grid-cols-[3.2rem_1fr_auto] items-start gap-x-3 px-3 py-1.5 hairline text-[13px]">
              <span className="font-mono text-[12px] text-fg-subtle tabular">{utcTime(e.detected_at, false)}</span>
              <div className="min-w-0">
                <div className="flex flex-wrap items-center gap-x-2 text-[11px] text-fg-subtle">
                  {showSource && <span className="font-mono uppercase text-fg-muted">{e.source?.name}</span>}
                  <span>{typeLabel(e.event_type)}</span>
                  {e.silent_change && <SilentBadge compact />}
                </div>
                <Link href={`/event/${e.slug}`} className="block truncate font-medium hover:underline">{e.title}</Link>
              </div>
              <Score value={e.importance} size="sm" />
            </div>
          ))}
        </div>
      ))}
    </div>
  );
}