import Link from 'next/link';
import { ConfBar, StatusDot } from '@/components/ui/primitives';
import { fmt, fmtDuration, fmtInt } from '@/lib/format';
import { pressureColor } from '@/lib/pressure';
import { Time } from '@/lib/time';
import type { Incident } from '@/lib/types';

export const TYPE_LABEL: Record<string, string> = {
  regional_latency: 'Latency anomaly',
  dns_disruption: 'DNS disruption',
  routing_instability: 'Routing instability',
  service_degradation: 'Service degradation',
  availability_loss: 'Availability loss',
  path_instability: 'Path instability',
  global_pressure: 'Global pressure',
};

export function IncidentRow({ inc, compact = false }: { inc: Incident; compact?: boolean }) {
  return (
    <li className="grid gap-x-5 gap-y-1.5 py-3 md:grid-cols-[auto_1fr_auto]">
      <div className="num flex items-baseline gap-3 md:w-20 md:flex-col md:items-end md:gap-0">
        <span className="text-[24px] leading-none" style={{ color: pressureColor(inc.current_pressure) }}>
          {fmt(inc.current_pressure)}
        </span>
        <span className="text-[10.5px] text-ink-3">peak {fmt(inc.peak_pressure)}</span>
      </div>
      <div className="min-w-0">
        <div className="flex flex-wrap items-baseline gap-x-3 gap-y-1">
          <Link href={`/event/${inc.slug}`} className="text-[14px] font-medium text-ink hover:text-accent">
            {inc.title}
          </Link>
          <StatusDot status={inc.status} />
          <span className="label">{TYPE_LABEL[inc.type] ?? inc.type}</span>
        </div>
        {!compact && <p className="mt-1 text-[12.5px] text-ink-2">{inc.summary}</p>}
        <p className="num mt-1 text-[11px] text-ink-3">
          {inc.scope_label} · started <Time ts={inc.started_at} /> · {fmtDuration(inc.duration_s)} · {fmtInt(inc.affected_probes)} probes · {fmtInt(inc.affected_targets)} targets
          {inc.affected_asns.length ? ` · AS${inc.affected_asns.slice(0, 3).join(', AS')}` : ''}
        </p>
      </div>
      <div className="md:text-right">
        <ConfBar value={inc.confidence} />
      </div>
    </li>
  );
}