import Link from 'next/link';
import { fmtDate, fmtDateTime } from '@/lib/format';
import type { EventRow } from '@/lib/types';
import { Confidence, EntityLinks, EventTypeBadge, eventColor } from './event-badge';

function dayKey(iso: string): string {
  return iso.slice(0, 10);
}
function dayHeading(key: string, today: string): string {
  if (key === today) return `Today · ${fmtDate(key)}`;
  const y = new Date(`${today}T00:00:00Z`);
  y.setUTCDate(y.getUTCDate() - 1);
  if (key === y.toISOString().slice(0, 10)) return `Yesterday · ${fmtDate(key)}`;
  return fmtDate(key);
}
function timeOnly(iso: string): string {
  const d = new Date(iso);
  if (Number.isNaN(d.getTime())) return '—';
  return `${d.toLocaleTimeString('en-GB', { hour: '2-digit', minute: '2-digit', timeZone: 'UTC' })} UTC`;
}

/** One event row: time · type · title/summary/entities · source + confidence. Desktop = 4-column terminal grid; mobile = stacked. */
export function EventItem({ e, dense = false }: { e: EventRow; dense?: boolean }) {
  const href = `/events/${encodeURIComponent(e.id)}`;
  return (
    <li className="relative border-b border-rule py-3 md:grid md:grid-cols-[92px_150px_minmax(0,1fr)_180px] md:items-start md:gap-4 md:py-3.5">
      <span className="absolute -left-4 top-[18px] hidden size-1.5 rounded-full md:block" style={{ background: eventColor(e.type) }} aria-hidden />
      <div className="flex items-center justify-between gap-2 md:block">
        <time dateTime={e.event_time} className="mono text-xs text-ink-2" title={fmtDateTime(e.event_time)}>
          {timeOnly(e.event_time)}
        </time>
        <div className="md:hidden">
          <EventTypeBadge type={e.type} />
        </div>
      </div>
      <div className="hidden md:block">
        <EventTypeBadge type={e.type} />
      </div>
      <div className="mt-1.5 min-w-0 md:mt-0">
        <Link href={href} className="link text-sm font-medium leading-snug">
          {e.title}
        </Link>
        {e.summary && !dense && <p className="mt-0.5 line-clamp-2 text-xs leading-relaxed text-ink-3">{e.summary}</p>}
        <EntityLinks entities={e.entities} className="mt-1.5" />
      </div>
      <div className="mt-2 flex items-center justify-between gap-3 text-xs md:mt-0 md:block md:text-right">
        <span className="truncate text-ink-3" title={e.source_id ?? undefined}>
          {e.source_url ? (
            <a href={e.source_url} target="_blank" rel="noopener noreferrer" className="hover:text-accent">{e.source_name ?? e.source_id ?? 'Source'}</a>
          ) : (
            e.source_name ?? e.source_id ?? 'Source unavailable'
          )}
        </span>
        <span className="md:mt-0.5 md:block">
          <Confidence value={e.confidence} />
        </span>
      </div>
    </li>
  );
}

/** Events grouped visually by UTC day. */
export function EventTimeline({ events, dense = false }: { events: EventRow[]; dense?: boolean }) {
  const today = new Date().toISOString().slice(0, 10);
  const groups: { day: string; items: EventRow[] }[] = [];
  for (const e of events) {
    const k = dayKey(e.event_time);
    const last = groups[groups.length - 1];
    if (last && last.day === k) last.items.push(e);
    else groups.push({ day: k, items: [e] });
  }
  return (
    <div className="space-y-8">
      {groups.map((g) => (
        <section key={g.day} aria-label={fmtDate(g.day)}>
          <div className="mb-1 flex items-center gap-3">
            <h3 className="mono text-xs font-semibold uppercase tracking-wider text-ink-2">{dayHeading(g.day, today)}</h3>
            <span className="h-px flex-1 bg-rule" aria-hidden />
            <span className="mono text-[11px] text-ink-3">{g.items.length} event{g.items.length > 1 ? 's' : ''}</span>
          </div>
          <ol className="md:ml-4 md:border-l md:border-rule md:pl-4">
            {g.items.map((e) => (
              <EventItem key={e.id} e={e} dense={dense} />
            ))}
          </ol>
        </section>
      ))}
    </div>
  );
}