import { Pause, Play, RotateCcw, StepBack, StepForward } from "lucide-react";
import { useSyncExternalStore, type ReactNode } from "react";

import type { Timeline, TimelineSnapshot } from "./Timeline";

// Styled to match @elvis/ui's StepControls, which works in whole iterations
const thumbClass =
  "[&::-webkit-slider-thumb]:size-4 [&::-webkit-slider-thumb]:cursor-grab [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-white [&::-webkit-slider-thumb]:bg-ink " +
  "[&::-moz-range-thumb]:size-4 [&::-moz-range-thumb]:cursor-grab [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-2 [&::-moz-range-thumb]:border-white [&::-moz-range-thumb]:bg-ink";
// How far an arrow key moves the playhead
const KEY_MOVE_MS = 250;
// The slider's thumb stops this far from each end, so marks on the track are inset to line up with it
const THUMB_RADIUS = 8;

const iconButtonClass =
  "flex size-11 shrink-0 items-center justify-center rounded border-[1.5px] border-ink bg-white text-ink enabled:cursor-pointer enabled:hover:bg-marker-soft disabled:cursor-not-allowed disabled:opacity-40 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ink";

// The slider along the whole run, with a tick for each step and the two passes marked
function TimelineBar({ timeline, snapshot }: { timeline: Timeline; snapshot: TimelineSnapshot }) {
  const time = useSyncExternalStore(timeline.subscribeTime, timeline.getTime);
  const { ticks, backwardAt, iteration, lastIteration } = snapshot;
  const length = ticks[ticks.length - 1];
  const at = (t: number) => `${length > 0 ? (t / length) * 100 : 0}%`;
  return (
    <div className="flex flex-col gap-1">
      <div className="relative h-6">
        {/* Inset so positions here match the thumb's centre */}
        <div className="pointer-events-none absolute inset-y-0" style={{ left: THUMB_RADIUS, right: THUMB_RADIUS }}>
          <div className="absolute inset-x-0 top-1/2 h-1 -translate-y-1/2 bg-grid" />
          <div className="absolute left-0 top-1/2 h-1 -translate-y-1/2 bg-ink" style={{ width: at(time) }} />
          {ticks.map((tick) => (
            <div key={tick} data-tick className="absolute top-1/2 h-2.5 w-px -translate-y-1/2 bg-ink-muted" style={{ left: at(tick) }} />
          ))}
          {backwardAt !== null && (
            <div data-pass-marker className="absolute top-0 h-full w-0.5 -translate-x-1/2 bg-ink" style={{ left: at(backwardAt) }} />
          )}
        </div>
        <input
          type="range"
          aria-label="Position in the run"
          aria-valuetext={`iteration ${iteration}${lastIteration !== null ? ` of ${lastIteration}` : ""}`}
          min={0}
          max={length}
          step={1}
          value={time}
          disabled={length === 0}
          onChange={(e) => timeline.seek(Number(e.target.value))}
          onKeyDown={(e) => {
            if (e.key === "ArrowLeft" || e.key === "ArrowRight") {
              e.preventDefault();
              timeline.seek(time + (e.key === "ArrowLeft" ? -KEY_MOVE_MS : KEY_MOVE_MS));
            }
          }}
          className={`absolute inset-0 m-0 w-full cursor-pointer appearance-none bg-transparent focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ink disabled:cursor-not-allowed ${thumbClass}`}
        />
      </div>
      {backwardAt !== null && (
        <div className="relative h-4 text-xs text-ink-muted" style={{ marginLeft: THUMB_RADIUS, marginRight: THUMB_RADIUS }}>
          <span className="absolute left-0">Forward pass</span>
          <span className="absolute" style={{ left: at(backwardAt) }}>Backward pass</span>
        </div>
      )}
    </div>
  );
}

export default function TimelineControls({
  timeline,
  snapshot,
  animated,
  onAnimatedChange,
}: {
  timeline: Timeline;
  snapshot: TimelineSnapshot;
  animated: boolean;
  onAnimatedChange: (animated: boolean) => void;
}) {
  const { iteration, lastIteration, atStart, playing } = snapshot;
  const atEnd = lastIteration === null || iteration >= lastIteration;
  return (
    <section className="flex flex-col gap-3">
      <TimelineBar timeline={timeline} snapshot={snapshot} />
      <div className="flex gap-2">
        <IconButton label="Reset to iteration 0" onClick={timeline.reset} disabled={atStart}>
          <RotateCcw size={18} />
        </IconButton>
        <IconButton label="Step back" onClick={timeline.stepBack} disabled={atStart || playing}>
          <StepBack size={18} />
        </IconButton>
        <button
          type="button"
          onClick={playing ? timeline.pause : timeline.play}
          disabled={!playing && atEnd}
          className="flex h-11 flex-1 items-center justify-center gap-2 rounded border-2 border-ink bg-ink text-sm font-semibold text-white shadow-[3px_3px_0_var(--color-marker)] enabled:cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ink"
        >
          <span aria-hidden>{playing ? <Pause size={16} /> : <Play size={16} />}</span>
          {playing ? "Pause" : "Play"}
        </button>
        <IconButton label="Step forward" onClick={timeline.stepForward} disabled={atEnd || playing}>
          <StepForward size={18} />
        </IconButton>
      </div>
      <div className="flex items-center justify-between gap-2">
        <p className="font-mono text-sm text-ink-muted" aria-live="polite">
          iteration {iteration}{lastIteration !== null ? ` / ${lastIteration}` : ""}
        </p>
        <label className="flex cursor-pointer items-center gap-2 text-sm text-gray-700">
          <input type="checkbox" checked={animated} onChange={(e) => onAnimatedChange(e.target.checked)} className="size-4 accent-ink" />
          Animate steps
        </label>
      </div>
    </section>
  );
}

function IconButton({ label, onClick, disabled, children }: { label: string; onClick: () => void; disabled: boolean; children: ReactNode }) {
  return (
    <button type="button" aria-label={label} title={label} onClick={onClick} disabled={disabled} className={iconButtonClass}>
      <span aria-hidden>{children}</span>
    </button>
  );
}