import { scaleTime } from 'd3-scale';
import { fmtDate } from '@/lib/format';
import type { ChangeEvent } from '@/lib/types';
import { laneColor, laneOf, occurredAt, TIMELINE_LANES } from './lanes';

/**
 * Mobile counterpart of `TimelineLanes`: one lane, dots coloured by category and sized by importance (server-safe SVG,
 * no interaction — the list below is the interactive surface on small screens). Legend = the lanes present.
 */
export function MobileLaneStrip({ events, className }: { events: ChangeEvent[]; className?: string }) {
  const w = 360;
  const h = 58;
  const pad = { l: 8, r: 8, t: 8, b: 18 };
  const ts = events.map((e) => new Date(occurredAt(e)).getTime()).filter((t) => Number.isFinite(t));
  if (ts.length < 2) return null;
  const lo = Math.min(...ts);
  const hi = Math.max(...ts);
  const x = scaleTime()
    .domain([new Date(lo), new Date(hi === lo ? lo + 86400000 : hi)])
    .range([pad.l, w - pad.r]);
  const ticks = x.ticks(4);
  const present = new Set(events.map(laneOf));
  return (
    <figure className={className} data-mobile-lane-strip>
      <svg viewBox={`0 0 ${w} ${h}`} className="block w-full" role="img" aria-label="Events over time, coloured by category">
        <title>Events over time</title>
        <line x1={pad.l} x2={w - pad.r} y1={h / 2 - 4} y2={h / 2 - 4} stroke="var(--rule-strong)" />
        {ticks.map((t, i) => (
          <g key={i}>
            <line x1={x(t)} x2={x(t)} y1={pad.t} y2={h - pad.b} stroke="var(--rule)" strokeDasharray="2 3" />
            <text x={x(t)} y={h - 5} textAnchor="middle" fontSize={9} fill="var(--ink-3)">
              {t.toLocaleDateString('en-GB', { month: 'short', year: '2-digit', timeZone: 'UTC' })}
            </text>
          </g>
        ))}
        {events.map((e) => {
          const t = new Date(occurredAt(e)).getTime();
          if (!Number.isFinite(t)) return null;
          const jitter = ((e.id.charCodeAt(e.id.length - 1) + e.id.charCodeAt(e.id.length - 2)) % 7) - 3;
          return <circle key={e.id} cx={x(new Date(t))} cy={h / 2 - 4 + jitter} r={1.6 + Math.min(3, e.importance) * 0.9} fill={laneColor(laneOf(e))} fillOpacity={e.importance >= 3 ? 0.95 : 0.6} />;
        })}
      </svg>
      <figcaption className="mt-1 flex flex-wrap gap-x-3 gap-y-0.5 text-[11px] text-ink-3">
        {TIMELINE_LANES.filter((l) => present.has(l.key)).map((l) => (
          <span key={l.key} className="inline-flex items-center gap-1">
            <span className="inline-block size-2 rounded-full" style={{ background: l.color }} aria-hidden />
            {l.label}
          </span>
        ))}
        <span className="ml-auto tnum">
          {fmtDate(new Date(lo).toISOString())} → {fmtDate(new Date(hi).toISOString())}
        </span>
      </figcaption>
    </figure>
  );
}