import React from 'react';
import { Pause, Play, SkipBack } from 'lucide-react';
import { cn } from '../../shared/utils';
import { Button } from '../button';
import { Slider } from '../slider';

export interface MapTimelineProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
  /** Inclusive `[start, end]` of the timeline, in whatever unit you use. */
  range: [number, number];
  value: number;
  onChange: (value: number) => void;
  /** Playback multipliers offered to the user. @default [1, 2, 4] */
  speeds?: number[];
  speed?: number;
  onSpeedChange?: (speed: number) => void;
  playing?: boolean;
  onPlayingChange?: (playing: boolean) => void;
  /** Units advanced per playback tick at 1×. @default 1 */
  step?: number;
  /** Milliseconds between ticks at 1×. @default 250 */
  tickMs?: number;
  /** Renders the value as a label, e.g. `v => '17:32'`. */
  formatValue?: (value: number) => string;
  label?: string;
  /** @default "Play" / "Pause" / "Restart" */
  playLabel?: string;
  pauseLabel?: string;
  restartLabel?: string;
}

/**
 * Time ruler bound to the map, with playback.
 *
 * @description
 * A sliding window over the data is what turns plotted points into a
 * space-time reconstruction; the same mechanism serves an inspection-date
 * filter and a day's schedule.
 *
 * Playback respects `prefers-reduced-motion`: when the user has asked for
 * reduced motion, auto-advance does not start on its own and the control
 * presents itself as a scrubber. The user can still press play — the setting
 * suppresses unrequested movement, not the feature.
 *
 * @ai-rules
 * 1. Feed `value` into `<Map timeWindow>` and give the markers a `timeField`.
 * 2. Keep `playing` in the parent — the component is fully controlled.
 * 3. Always pass `formatValue`; a raw minute count means nothing to the reader.
 */
export const MapTimeline = React.forwardRef<HTMLDivElement, MapTimelineProps>(
  (
    {
      range,
      value,
      onChange,
      speeds = [1, 2, 4],
      speed,
      onSpeedChange,
      playing = false,
      onPlayingChange,
      step = 1,
      tickMs = 250,
      formatValue,
      label,
      playLabel = 'Play',
      pauseLabel = 'Pause',
      restartLabel = 'Restart',
      className,
      ...props
    },
    ref
  ) => {
    const [internalSpeed, setInternalSpeed] = React.useState(speeds[0] ?? 1);
    const activeSpeed = speed ?? internalSpeed;

    const [start, end] = range;

    const prefersReducedMotion = React.useMemo(() => {
      if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') return false;
      return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    }, []);

    const onChangeRef = React.useRef(onChange);
    const onPlayingChangeRef = React.useRef(onPlayingChange);
    onChangeRef.current = onChange;
    onPlayingChangeRef.current = onPlayingChange;

    const valueRef = React.useRef(value);
    valueRef.current = value;

    React.useEffect(() => {
      if (!playing) return;

      const interval = window.setInterval(() => {
        const next = valueRef.current + step * activeSpeed;

        if (next >= end) {
          onChangeRef.current(end);
          onPlayingChangeRef.current?.(false);
          return;
        }

        onChangeRef.current(next);
      }, tickMs);

      return () => window.clearInterval(interval);
    }, [playing, activeSpeed, step, tickMs, end]);

    const handleSpeed = (next: number) => {
      if (onSpeedChange) onSpeedChange(next);
      else setInternalSpeed(next);
    };

    const atEnd = value >= end;

    return (
      <div
        ref={ref}
        role="group"
        aria-label={label ?? 'Timeline'}
        className={cn(
          'flex flex-col gap-2 rounded-[var(--radius-card)] border border-border bg-background/90 p-3 backdrop-blur-sm',
          className
        )}
        {...props}
      >
        <div className="flex items-center gap-2">
          <Button
            type="button"
            size="icon"
            variant="ghost"
            className="size-8"
            aria-label={atEnd ? restartLabel : playing ? pauseLabel : playLabel}
            title={atEnd ? restartLabel : playing ? pauseLabel : playLabel}
            onClick={() => {
              if (atEnd) {
                onChange(start);
                onPlayingChange?.(true);
                return;
              }
              onPlayingChange?.(!playing);
            }}
          >
            {atEnd ? (
              <SkipBack aria-hidden="true" />
            ) : playing ? (
              <Pause aria-hidden="true" />
            ) : (
              <Play aria-hidden="true" />
            )}
          </Button>

          <Slider
            value={[value]}
            min={start}
            max={end}
            step={step}
            onValueChange={next => onChange(next[0])}
            aria-label={label ?? 'Timeline position'}
            className="flex-1"
          />

          <span className="min-w-14 text-right text-xs font-medium text-foreground tabular-nums">
            {formatValue ? formatValue(value) : value}
          </span>
        </div>

        <div className="flex items-center gap-1">
          {speeds.map(option => (
            <Button
              key={option}
              type="button"
              size="sm"
              variant={option === activeSpeed ? 'default' : 'ghost'}
              aria-pressed={option === activeSpeed}
              className="h-6 px-2 text-[11px]"
              onClick={() => handleSpeed(option)}
            >
              {option}×
            </Button>
          ))}

          {prefersReducedMotion ? (
            <span className="ml-auto text-[10px] text-muted-foreground">
              Auto-advance off (reduced motion)
            </span>
          ) : null}
        </div>
      </div>
    );
  }
);
MapTimeline.displayName = 'MapTimeline';