'use client';
import Link from 'next/link';
import { useMemo, useState } from 'react';
import { ChangeRow } from '@/components/changes/change-row';
import { TimelineLanes, type LaneEvent } from '@/components/charts';
import { Hint } from '@/components/ui/hint';
import { fmtDate, fmtInt, fmtMonth } from '@/lib/format';
import { eventLabel, routes } from '@/lib/site';
import type { ChangeEvent } from '@/lib/types';
import { laneOf, occurredAt, TIMELINE_LANES } from './lanes';
import { MobileLaneStrip } from './mobile-lane-strip';

/**
 * Timeline 2.0 body (client): lanes chart (brushable) → the list below is filtered to the brushed range; month headings
 * stick under the header; per-month anchor nav. Everything rendered comes from the events the page fetched.
 */
export function TimelineWorkbench({ events, semantics, backfill }: { events: ChangeEvent[]; semantics?: Record<string, string> | null; backfill: boolean }) {
  const [range, setRange] = useState<{ from: number; to: number } | null>(null);
  const lanes = useMemo(() => {
    const present = new Set(events.map(laneOf));
    return TIMELINE_LANES.filter((l) => present.has(l.key)).map(({ key, label, color }) => ({ key, label, color }));
  }, [events]);
  const laneEvents: LaneEvent[] = useMemo(
    () =>
      events.map((e) => ({
        id: e.id,
        lane: laneOf(e),
        at: occurredAt(e),
        importance: e.importance,
        label: e.summary,
        sub: e.entity ? `${eventLabel(e.event_type)} · ${e.entity.name}` : eventLabel(e.event_type),
        href: e.entity ? routes.entity(e.entity) : undefined,
      })),
    [events],
  );
  const [domFrom, domTo] = useMemo(() => {
    const ts = events.map((e) => new Date(occurredAt(e)).getTime()).filter((t) => Number.isFinite(t));
    if (!ts.length) return [undefined, undefined] as const;
    const lo = Math.min(...ts);
    const hi = Math.max(...ts);
    // Deterministic domain (no Date.now()): pad a single-day span by one day on each side so SSR and hydration agree.
    return hi - lo < 86400000 ? ([lo - 86400000, lo + 86400000] as const) : ([lo, hi] as const);
  }, [events]);
  const filtered = useMemo(() => {
    if (!range) return events;
    return events.filter((e) => {
      const t = new Date(occurredAt(e)).getTime();
      return t >= range.from && t <= range.to;
    });
  }, [events, range]);
  const months = useMemo(() => {
    const map = new Map<string, ChangeEvent[]>();
    for (const e of filtered) {
      const m = occurredAt(e).slice(0, 7);
      (map.get(m) ?? map.set(m, []).get(m)!).push(e);
    }
    return [...map.entries()].sort((a, b) => (a[0] < b[0] ? 1 : -1)).map(([month, items]) => ({ month, items }));
  }, [filtered]);

  return (
    <div className="space-y-6" data-timeline-workbench>
      <section aria-label="Lanes">
        <div className="mb-1.5 flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-ink-3">
          <span className="eyebrow">
            Lanes <span className="normal-case tracking-normal text-ink-3">· dots sized by importance · drag to select a range</span>
          </span>
          <span className="inline-flex items-center gap-1">
            occurred vs observed vs recorded
            <Hint
              align="right"
              text={
                <span className="block space-y-1 text-left">
                  <span className="block">
                    <b>Occurred</b> — {semantics?.occurred_at ?? 'coalesce(effective_at, observed_at): when the change happened (effective date when a source states it).'}
                  </span>
                  <span className="block">
                    <b>Observed</b> — {semantics?.observed_at ?? 'when AI Atlas first saw the change.'}
                  </span>
                  <span className="block">
                    <b>Recorded</b> — {semantics?.recorded_at ?? 'when the row was written.'}
                  </span>
                  <span className="block">
                    <b>Backfill</b> — {semantics?.is_backfill ?? 'history imported when a source is first crawled; never shown as “today”.'}
                  </span>
                </span>
              }
            />
          </span>
          {backfill && <span className="rounded-[3px] bg-surface-2 px-1.5 text-[10px] uppercase tracking-wide">including historical backfill</span>}
        </div>
        <div className="hidden md:block">
          <TimelineLanes lanes={lanes} events={laneEvents} from={domFrom} to={domTo} brushable onRange={(a, b) => setRange({ from: a.getTime(), to: b.getTime() })} title="Events by lane" />
        </div>
        <div className="md:hidden">
          <MobileLaneStrip events={events} />
        </div>
        <p className="tnum mt-1 flex flex-wrap items-center gap-x-3 text-xs text-ink-3">
          {range ? (
            <>
              <span className="text-ink-2">
                Range {fmtDate(new Date(range.from).toISOString())} → {fmtDate(new Date(range.to).toISOString())} · {fmtInt(filtered.length)} of {fmtInt(events.length)} loaded events
              </span>
              <button type="button" onClick={() => setRange(null)} className="link">
                Clear range
              </button>
            </>
          ) : (
            <span>{fmtInt(events.length)} events loaded · every dot is one event; hover for its summary</span>
          )}
        </p>
      </section>

      <div className="grid gap-x-10 lg:grid-cols-[10rem_minmax(0,1fr)]">
        <nav aria-label="Months" className="no-scrollbar -mx-4 mb-4 flex gap-1 overflow-x-auto px-4 lg:sticky lg:top-[calc(var(--header-h)+1rem)] lg:mx-0 lg:mb-0 lg:block lg:max-h-[70vh] lg:space-y-0.5 lg:self-start lg:overflow-y-auto lg:px-0">
          {months.map((m) => (
            <a key={m.month} href={`#m-${m.month}`} className="tnum flex h-9 shrink-0 items-center justify-between gap-2 border border-rule px-2 text-xs text-ink-2 hover:text-ink lg:h-8 lg:border-0 lg:px-1">
              <span>{fmtMonth(m.month)}</span>
              <span className="text-ink-3">{fmtInt(m.items.length)}</span>
            </a>
          ))}
        </nav>
        <div className="min-w-0">
          {months.length === 0 && <p className="border-y border-rule py-8 text-center text-sm text-ink-3">No events in the selected range.</p>}
          {months.map((m) => (
            <section key={m.month} id={`m-${m.month}`} className="scroll-mt-24 pb-8">
              <h2 className="eyebrow sticky top-[var(--header-h)] z-10 -mx-4 flex items-baseline justify-between bg-canvas/95 px-4 py-2 backdrop-blur md:mx-0 md:px-0">
                <span>
                  {fmtMonth(m.month)} <span className="tnum text-ink-3">{fmtInt(m.items.length)}</span>
                </span>
                <Link href={routes.changesDay(`${m.month}-01`)} className="normal-case tracking-normal text-ink-3 hover:text-ink">
                  digest →
                </Link>
              </h2>
              <ul className="border-t border-rule">
                {m.items.map((e) => (
                  <ChangeRow key={e.id} e={e} showDate live={false} />
                ))}
              </ul>
            </section>
          ))}
        </div>
      </div>
    </div>
  );
}