fire-planner/frontend/src/components/EventGantt.tsx

/**
 * Interactive Gantt of life events (Wave 2 chart-first redesign).
 *
 * Visualises every life event as a horizontal bar over the scenario
 * horizon. Bar color encodes spending category. Drag the middle to slide
 * the whole event. Drag the left/right edge handles to resize. Click an
 * empty slot to create a new event at that year. Click an existing bar
 * to edit it inline via a popover. Persists every interaction through
 * the existing life-events CRUD endpoints (PATCH for moves/resizes,
 * POST for create, DELETE from the popover).
 *
 * Source-of-truth pattern: this chart IS the editor. The list-form
 * fallback under the drawer remains for bulk edits and accessibility.
 */
import { useEffect, useMemo, useRef, useState } from 'react';
import { useMutation, useQueryClient } from '@tanstack/react-query';
import { ParentSize } from '@visx/responsive';
import { scaleBand, scaleLinear } from '@visx/scale';
import { Group } from '@visx/group';
import { AxisBottom } from '@visx/axis';
import { localPoint } from '@visx/event';

import {
  lifeEventsApi,
  type LifeEvent,
  type LifeEventCreateBody,
  type LifeEventPatchBody,
  type SpendingCategory,
} from '@/api/client';
import { gbp } from '@/lib/format';
import { emojiFor } from '@/lib/milestone';

interface Props {
  scenarioId: number;
  events: LifeEvent[];
  horizonYears: number;
  height?: number;
}

const CATEGORY_FILL: Record<SpendingCategory, string> = {
  essential: 'rgb(16, 185, 129)',     // emerald-500
  discretionary: 'rgb(245, 158, 11)', // amber-500
  not_spending: 'rgb(100, 116, 139)', // slate-500
};

const CATEGORY_BORDER: Record<SpendingCategory, string> = {
  essential: 'rgb(5, 150, 105)',
  discretionary: 'rgb(217, 119, 6)',
  not_spending: 'rgb(71, 85, 105)',
};

type DragMode = 'move' | 'left' | 'right';

interface DragState {
  eventId: number;
  mode: DragMode;
  startMouseX: number;
  origYearStart: number;
  origYearEnd: number;
}

interface PopoverState {
  // Either editing an existing event, or creating one at year_start=N
  kind: 'edit' | 'create';
  x: number;
  y: number;
  event?: LifeEvent;
  createYear?: number;
}

export function EventGantt(props: Props) {
  return (
    <ParentSize>
      {({ width }) => (width > 0 ? <Inner {...props} width={width} /> : null)}
    </ParentSize>
  );
}

function Inner({
  scenarioId,
  events,
  horizonYears,
  width,
  height = 220,
}: Props & { width: number }) {
  const margin = { top: 12, right: 24, bottom: 28, left: 96 };
  const innerW = Math.max(0, width - margin.left - margin.right);
  const sortedEvents = useMemo(
    () => [...events].sort((a, b) => a.year_start - b.year_start || a.id - b.id),
    [events],
  );
  const rowHeight = 22;
  const minRows = Math.max(sortedEvents.length, 1);
  const innerH = Math.max(rowHeight * minRows + 32, height - margin.top - margin.bottom);

  const xScale = useMemo(
    () =>
      scaleLinear<number>({
        domain: [0, Math.max(1, horizonYears - 1)],
        range: [0, innerW],
      }),
    [horizonYears, innerW],
  );

  const yScale = useMemo(
    () =>
      scaleBand<number>({
        domain: sortedEvents.map((e) => e.id),
        range: [0, rowHeight * sortedEvents.length],
        padding: 0.2,
      }),
    [sortedEvents],
  );

  const qc = useQueryClient();
  const invalidate = () =>
    qc.invalidateQueries({
      queryKey: ['scenarios', scenarioId, 'life-events'],
    });
  const invalidateProfile = () =>
    qc.invalidateQueries({
      queryKey: ['spending-profile', scenarioId],
    });

  const patchMut = useMutation({
    mutationFn: ({ id, body }: { id: number; body: LifeEventPatchBody }) =>
      lifeEventsApi.patch(id, body),
    onSuccess: () => {
      invalidate();
      invalidateProfile();
    },
  });
  const createMut = useMutation({
    mutationFn: (body: LifeEventCreateBody) =>
      lifeEventsApi.create(scenarioId, body),
    onSuccess: () => {
      invalidate();
      invalidateProfile();
    },
  });
  const deleteMut = useMutation({
    mutationFn: (id: number) => lifeEventsApi.delete(id),
    onSuccess: () => {
      invalidate();
      invalidateProfile();
    },
  });

  // Drag state lives in a ref so mousemove handlers don't re-render.
  const drag = useRef<DragState | null>(null);
  // Pixel-level offset applied during drag (without committing).
  const [dragOffset, setDragOffset] = useState<{ id: number; dx: number; mode: DragMode } | null>(null);
  const [popover, setPopover] = useState<PopoverState | null>(null);

  useEffect(() => {
    const onMove = (e: MouseEvent) => {
      if (!drag.current) return;
      setDragOffset({
        id: drag.current.eventId,
        dx: e.clientX - drag.current.startMouseX,
        mode: drag.current.mode,
      });
    };
    const onUp = (e: MouseEvent) => {
      if (!drag.current) return;
      const dx = e.clientX - drag.current.startMouseX;
      const dyears = pxToYears(dx, xScale, horizonYears);
      const { eventId, mode, origYearStart, origYearEnd } = drag.current;
      drag.current = null;
      setDragOffset(null);
      if (Math.abs(dyears) < 1) return;  // sub-year drag = ignore
      let body: LifeEventPatchBody = {};
      if (mode === 'move') {
        const newStart = clamp(origYearStart + dyears, 0, horizonYears - 1);
        const span = origYearEnd - origYearStart;
        body = {
          year_start: newStart,
          year_end: clamp(newStart + span, newStart, horizonYears - 1),
        };
      } else if (mode === 'left') {
        body = {
          year_start: clamp(origYearStart + dyears, 0, origYearEnd),
        };
      } else if (mode === 'right') {
        body = {
          year_end: clamp(origYearEnd + dyears, origYearStart, horizonYears - 1),
        };
      }
      patchMut.mutate({ id: eventId, body });
    };
    window.addEventListener('mousemove', onMove);
    window.addEventListener('mouseup', onUp);
    return () => {
      window.removeEventListener('mousemove', onMove);
      window.removeEventListener('mouseup', onUp);
    };
  }, [horizonYears, patchMut, xScale]);

  const startDrag = (e: React.MouseEvent, ev: LifeEvent, mode: DragMode) => {
    e.stopPropagation();
    const yearEnd = ev.year_end ?? ev.year_start;
    drag.current = {
      eventId: ev.id,
      mode,
      startMouseX: e.clientX,
      origYearStart: ev.year_start,
      origYearEnd: yearEnd,
    };
    setDragOffset({ id: ev.id, dx: 0, mode });
  };

  const onBackgroundClick = (e: React.MouseEvent<SVGRectElement>) => {
    const point = localPoint(e);
    if (!point) return;
    const x = point.x - margin.left;
    const year = Math.round(xScale.invert(Math.max(0, Math.min(innerW, x))));
    setPopover({
      kind: 'create',
      x: point.x,
      y: point.y,
      createYear: year,
    });
  };

  const onBarClick = (e: React.MouseEvent, ev: LifeEvent) => {
    e.stopPropagation();
    const point = localPoint(e);
    if (!point) return;
    setPopover({ kind: 'edit', x: point.x, y: point.y, event: ev });
  };

  return (
    <div className="relative">
      <svg width={width} height={Math.max(height, innerH + margin.top + margin.bottom)}>
        <Group left={margin.left} top={margin.top}>
          {/* Faint year gridlines */}
          {Array.from({ length: horizonYears }).map((_, i) => {
            const x = xScale(i) ?? 0;
            return (
              <line
                key={i}
                x1={x}
                x2={x}
                y1={0}
                y2={innerH}
                stroke={i % 5 === 0 ? '#cbd5e1' : '#e2e8f0'}
                strokeWidth={1}
              />
            );
          })}
          {/* Background click capture — drawn before bars so they win
              z-order, but `pointerEvents=all` ensures the empty regions
              between bars still bubble clicks here. */}
          <rect
            x={0}
            y={0}
            width={innerW}
            height={innerH}
            fill="white"
            fillOpacity={0}
            pointerEvents="all"
            onClick={onBackgroundClick}
            style={{ cursor: 'crosshair' }}
          />
          {/* Bars */}
          {sortedEvents.map((ev) => {
            const yearEnd = ev.year_end ?? ev.year_start;
            const offsetDx =
              dragOffset && dragOffset.id === ev.id ? dragOffset.dx : 0;
            const dyears = pxToYears(offsetDx, xScale, horizonYears);
            const isMove = dragOffset?.id === ev.id && dragOffset.mode === 'move';
            const isLeft = dragOffset?.id === ev.id && dragOffset.mode === 'left';
            const isRight = dragOffset?.id === ev.id && dragOffset.mode === 'right';
            const startY = isMove
              ? ev.year_start + dyears
              : isLeft
                ? ev.year_start + dyears
                : ev.year_start;
            const endY = isMove
              ? yearEnd + dyears
              : isRight
                ? yearEnd + dyears
                : yearEnd;
            const x = xScale(Math.max(0, startY)) ?? 0;
            const w = Math.max(8, (xScale(Math.max(startY + 0.5, endY)) ?? 0) - x);
            const y = yScale(ev.id) ?? 0;
            const h = yScale.bandwidth();
            const fill = CATEGORY_FILL[ev.category] ?? CATEGORY_FILL.essential;
            const border =
              CATEGORY_BORDER[ev.category] ?? CATEGORY_BORDER.essential;
            // Edge handles are only useful on multi-year ranges. For
            // single-year (point) events the bar is too narrow to
            // distinguish "edge" from "middle" so the whole bar
            // moves and the user resizes via the popover.
            const showHandles = w >= 24 && yearEnd > ev.year_start;
            const handleW = Math.min(8, w / 4);
            return (
              <g
                key={ev.id}
                opacity={ev.enabled ? 1 : 0.4}
                onClick={(e) => onBarClick(e, ev)}
                style={{ cursor: 'grab' }}
              >
                <rect
                  x={x}
                  y={y}
                  width={w}
                  height={h}
                  fill={fill}
                  stroke={border}
                  strokeWidth={1}
                  rx={3}
                  onMouseDown={(e) => startDrag(e, ev, 'move')}
                />
                {showHandles && (
                  <>
                    <rect
                      x={x - 1}
                      y={y}
                      width={handleW}
                      height={h}
                      fill="rgba(0,0,0,0.25)"
                      rx={3}
                      onMouseDown={(e) => startDrag(e, ev, 'left')}
                      style={{ cursor: 'ew-resize' }}
                    />
                    <rect
                      x={x + w - handleW + 1}
                      y={y}
                      width={handleW}
                      height={h}
                      fill="rgba(0,0,0,0.25)"
                      rx={3}
                      onMouseDown={(e) => startDrag(e, ev, 'right')}
                      style={{ cursor: 'ew-resize' }}
                    />
                  </>
                )}
                <text
                  x={x + 6}
                  y={y + h / 2}
                  fill="#fff"
                  fontSize={11}
                  dominantBaseline="middle"
                  pointerEvents="none"
                  style={{ userSelect: 'none' }}
                >
                  {emojiFor(ev.kind)} {ev.name}
                </text>
              </g>
            );
          })}
          <AxisBottom
            top={innerH}
            scale={xScale}
            numTicks={Math.min(10, horizonYears)}
            tickFormat={(v) => `y${Math.round(Number(v))}`}
            tickStroke="#94a3b8"
            stroke="#94a3b8"
            tickLabelProps={{ fill: '#64748b', fontSize: 10, textAnchor: 'middle' }}
          />
        </Group>
        {/* Row labels */}
        <Group left={0} top={margin.top}>
          {sortedEvents.map((ev) => {
            const y = (yScale(ev.id) ?? 0) + yScale.bandwidth() / 2;
            return (
              <text
                key={ev.id}
                x={margin.left - 8}
                y={y}
                fill="#475569"
                fontSize={11}
                textAnchor="end"
                dominantBaseline="middle"
              >
                {ev.kind}
              </text>
            );
          })}
        </Group>
      </svg>

      {sortedEvents.length === 0 && (
        <div className="absolute top-12 left-0 right-0 text-center text-xs text-slate-500 pointer-events-none">
          Click anywhere on the timeline to add a life event.
        </div>
      )}

      {popover && (
        <EventPopover
          state={popover}
          onClose={() => setPopover(null)}
          onCreate={(body) => {
            createMut.mutate(body);
            setPopover(null);
          }}
          onPatch={(id, body) => {
            patchMut.mutate({ id, body });
            setPopover(null);
          }}
          onDelete={(id) => {
            deleteMut.mutate(id);
            setPopover(null);
          }}
          horizonYears={horizonYears}
        />
      )}
    </div>
  );
}

function pxToYears(
  px: number,
  scale: { invert: (n: number) => number },
  _horizon: number,
): number {
  const yearsAtZero = scale.invert(0);
  const yearsAtPx = scale.invert(px);
  return Math.round(yearsAtPx - yearsAtZero);
}

function clamp(n: number, lo: number, hi: number): number {
  return Math.max(lo, Math.min(hi, n));
}

interface PopoverProps {
  state: PopoverState;
  horizonYears: number;
  onClose: () => void;
  onCreate: (body: LifeEventCreateBody) => void;
  onPatch: (id: number, body: LifeEventPatchBody) => void;
  onDelete: (id: number) => void;
}

const KIND_OPTIONS = [
  'kid_at_home',
  'kid_born',
  'kids_leave_home',
  'mortgage_payoff',
  'home_purchase',
  'sabbatical',
  'inheritance',
  'travel',
  'expense_range',
  'one_time_income',
];

function EventPopover({
  state,
  horizonYears,
  onClose,
  onCreate,
  onPatch,
  onDelete,
}: PopoverProps) {
  const isEdit = state.kind === 'edit' && state.event;
  const [name, setName] = useState(isEdit ? state.event!.name : '');
  const [kind, setKind] = useState(isEdit ? state.event!.kind : 'kid_at_home');
  const [yearStart, setYearStart] = useState(
    isEdit ? state.event!.year_start : state.createYear ?? 0,
  );
  const [yearEnd, setYearEnd] = useState<number | null>(
    isEdit ? state.event!.year_end : null,
  );
  const [delta, setDelta] = useState(
    isEdit ? Number(state.event!.delta_gbp_per_year) : -10000,
  );
  const [category, setCategory] = useState<SpendingCategory>(
    isEdit ? state.event!.category : 'essential',
  );

  const submit = (e: React.FormEvent) => {
    e.preventDefault();
    if (isEdit) {
      onPatch(state.event!.id, {
        name,
        kind,
        year_start: yearStart,
        year_end: yearEnd,
        delta_gbp_per_year: String(delta),
        category,
      });
    } else {
      onCreate({
        kind,
        name: name || titleize(kind),
        year_start: yearStart,
        year_end: yearEnd,
        delta_gbp_per_year: String(delta),
        category,
      });
    }
  };

  return (
    <div
      className="absolute z-50 rounded-lg border border-slate-200 bg-white shadow-lg p-3 w-72 text-sm"
      style={{
        left: Math.min(state.x + 8, window.innerWidth - 290),
        top: state.y + 8,
      }}
      onClick={(e) => e.stopPropagation()}
    >
      <form onSubmit={submit} className="space-y-2">
        <div className="flex items-baseline justify-between">
          <h3 className="font-semibold text-slate-900">
            {isEdit ? 'Edit event' : `Add event @ y${state.createYear}`}
          </h3>
          <button
            type="button"
            onClick={onClose}
            className="text-slate-400 hover:text-slate-700"
            aria-label="Close"
          >
            ×
          </button>
        </div>
        <label className="block text-xs">
          <span className="uppercase tracking-wide text-slate-500">Name</span>
          <input
            type="text"
            value={name}
            onChange={(e) => setName(e.target.value)}
            placeholder={titleize(kind)}
            className="mt-1 w-full rounded-md border border-slate-300 px-2 py-1 text-sm"
            autoFocus
          />
        </label>
        <label className="block text-xs">
          <span className="uppercase tracking-wide text-slate-500">Kind</span>
          <select
            value={kind}
            onChange={(e) => setKind(e.target.value)}
            className="mt-1 w-full rounded-md border border-slate-300 px-2 py-1 text-sm"
          >
            {KIND_OPTIONS.map((k) => (
              <option key={k} value={k}>
                {emojiFor(k)} {k}
              </option>
            ))}
          </select>
        </label>
        <div className="grid grid-cols-2 gap-2">
          <label className="block text-xs">
            <span className="uppercase tracking-wide text-slate-500">Year start</span>
            <input
              type="number"
              min={0}
              max={horizonYears - 1}
              value={yearStart}
              onChange={(e) => setYearStart(clamp(Number(e.target.value), 0, horizonYears - 1))}
              className="mt-1 w-full rounded-md border border-slate-300 px-2 py-1 text-sm tabular-nums"
            />
          </label>
          <label className="block text-xs">
            <span className="uppercase tracking-wide text-slate-500">Year end</span>
            <input
              type="number"
              min={yearStart}
              max={horizonYears - 1}
              value={yearEnd ?? ''}
              placeholder="—"
              onChange={(e) =>
                setYearEnd(e.target.value === '' ? null : Number(e.target.value))
              }
              className="mt-1 w-full rounded-md border border-slate-300 px-2 py-1 text-sm tabular-nums"
            />
          </label>
        </div>
        <label className="block text-xs">
          <span className="uppercase tracking-wide text-slate-500">
            £ per year ({delta < 0 ? 'expense' : 'income'})
          </span>
          <input
            type="number"
            value={delta}
            step={1000}
            onChange={(e) => setDelta(Number(e.target.value))}
            className="mt-1 w-full rounded-md border border-slate-300 px-2 py-1 text-sm tabular-nums"
          />
          <div className="text-xs text-slate-500 mt-0.5">
            {delta !== 0 && `${delta < 0 ? '−' : '+'}${gbp(Math.abs(delta))}/y`}
          </div>
        </label>
        <fieldset className="text-xs">
          <legend className="uppercase tracking-wide text-slate-500 mb-1">Category</legend>
          <div className="flex gap-1">
            {(['essential', 'discretionary', 'not_spending'] as const).map((c) => (
              <button
                key={c}
                type="button"
                onClick={() => setCategory(c)}
                className={[
                  'flex-1 rounded-md px-2 py-1 text-xs border',
                  category === c
                    ? 'border-slate-900 bg-slate-900 text-white'
                    : 'border-slate-300 text-slate-600 hover:bg-slate-50',
                ].join(' ')}
              >
                {c.replace('_', ' ')}
              </button>
            ))}
          </div>
        </fieldset>
        <div className="flex items-center justify-between pt-1">
          {isEdit && (
            <button
              type="button"
              onClick={() => onDelete(state.event!.id)}
              className="text-xs text-red-700 hover:underline"
            >
              Delete
            </button>
          )}
          <div className="flex-1" />
          <button
            type="submit"
            className="rounded-md bg-slate-900 text-white text-xs font-medium px-3 py-1.5 hover:bg-slate-800"
          >
            {isEdit ? 'Save' : 'Create'}
          </button>
        </div>
      </form>
    </div>
  );
}

function titleize(kind: string): string {
  return kind
    .split('_')
    .map((s) => s.charAt(0).toUpperCase() + s.slice(1))
    .join(' ');
}