import React from 'react';
import type { MachineAnimationSnapshot } from '../../animations/types';

export interface AnimationTransportProps {
  snapshot: MachineAnimationSnapshot;
  onPlay: () => void;
  onPause: () => void;
  onResume: () => void;
  onRestart: (autoPlay?: boolean) => void;
  onStep: (steps?: number) => void;
  onRpmChange: (rpm: number) => void;
  onTimeScaleChange: (timeScale: number) => void;
  onLoopChange: (loop: boolean) => void;
  onStepModeChange: (enabled: boolean) => void;
}

function formatSeconds(seconds: number): string {
  return `${seconds.toFixed(2)}s`;
}

export function AnimationTransport({
  snapshot,
  onPlay,
  onPause,
  onResume,
  onRestart,
  onStep,
  onRpmChange,
  onTimeScaleChange,
  onLoopChange,
  onStepModeChange,
}: AnimationTransportProps): JSX.Element {
  const isPlaying = snapshot.status === 'playing';

  return (
    <section
      aria-label="Animation playback controls"
      className="rounded-2xl border border-white/10 bg-[#121721]/88 p-4 shadow-2xl shadow-black/30 backdrop-blur"
    >
      <div className="mb-3 flex items-center justify-between gap-3">
        <div>
          <h2 className="text-sm font-semibold text-slate-100">Animation</h2>
          <p className="font-mono text-xs text-slate-400">
            Cycle {snapshot.cycleIndex + 1} · {Math.round(snapshot.cycleProgress * 100)}%
          </p>
        </div>
        <span
          className="rounded-full border border-sky-400/30 bg-sky-400/10 px-2 py-1 text-[11px] font-medium uppercase tracking-wide text-sky-200"
          aria-live="polite"
        >
          {snapshot.status}
        </span>
      </div>

      <div className="grid grid-cols-4 gap-2">
        <button
          type="button"
          onClick={isPlaying ? onPause : snapshot.status === 'paused' ? onResume : onPlay}
          className="rounded-lg bg-sky-500 px-3 py-2 text-sm font-semibold text-white transition hover:bg-sky-400 focus:outline-none focus-visible:ring-2 focus-visible:ring-sky-300"
          aria-label={isPlaying ? 'Pause animation' : 'Play animation'}
        >
          {isPlaying ? 'Pause' : 'Play'}
        </button>
        <button
          type="button"
          onClick={() => onRestart(false)}
          className="rounded-lg border border-white/10 bg-white/5 px-3 py-2 text-sm text-slate-100 transition hover:bg-white/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-sky-300"
        >
          Restart
        </button>
        <button
          type="button"
          onClick={() => onStep(1)}
          className="rounded-lg border border-white/10 bg-white/5 px-3 py-2 text-sm text-slate-100 transition hover:bg-white/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-sky-300"
        >
          Step
        </button>
        <button
          type="button"
          onClick={() => onStep(-1)}
          className="rounded-lg border border-white/10 bg-white/5 px-3 py-2 text-sm text-slate-100 transition hover:bg-white/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-sky-300"
        >
          Back
        </button>
      </div>

      <div className="mt-4 space-y-4">
        <label className="block">
          <div className="mb-1 flex items-center justify-between text-xs text-slate-300">
            <span>RPM</span>
            <span className="font-mono text-slate-100">{Math.round(snapshot.rpm)}</span>
          </div>
          <input
            type="range"
            min={snapshot.minRpm}
            max={snapshot.maxRpm}
            step={1}
            value={snapshot.rpm}
            onChange={(event) => onRpmChange(Number(event.currentTarget.value))}
            className="w-full accent-sky-400"
            aria-label="RPM"
          />
        </label>

        <label className="block">
          <div className="mb-1 flex items-center justify-between text-xs text-slate-300">
            <span>Time scale</span>
            <span className="font-mono text-slate-100">{snapshot.timeScale.toFixed(1)}×</span>
          </div>
          <input
            type="range"
            min={0.1}
            max={3}
            step={0.1}
            value={snapshot.timeScale}
            onChange={(event) => onTimeScaleChange(Number(event.currentTarget.value))}
            className="w-full accent-amber-400"
            aria-label="Time scale"
          />
        </label>

        <div className="grid grid-cols-2 gap-2">
          <label className="flex cursor-pointer items-center gap-2 rounded-lg border border-white/10 bg-white/5 px-3 py-2 text-xs text-slate-200">
            <input
              type="checkbox"
              checked={snapshot.loop}
              onChange={(event) => onLoopChange(event.currentTarget.checked)}
              className="accent-sky-400"
            />
            Loop
          </label>
          <label className="flex cursor-pointer items-center gap-2 rounded-lg border border-white/10 bg-white/5 px-3 py-2 text-xs text-slate-200">
            <input
              type="checkbox"
              checked={snapshot.stepMode}
              onChange={(event) => onStepModeChange(event.currentTarget.checked)}
              className="accent-sky-400"
            />
            Step mode
          </label>
        </div>

        <div className="rounded-lg border border-white/10 bg-black/20 p-2 font-mono text-[11px] leading-5 text-slate-300">
          <div className="flex justify-between">
            <span>Elapsed</span>
            <span>{formatSeconds(snapshot.elapsedSeconds)}</span>
          </div>
          <div className="flex justify-between">
            <span>Cycle duration</span>
            <span>{formatSeconds(snapshot.cycleDurationSeconds)}</span>
          </div>
          <div className="flex justify-between">
            <span>Step</span>
            <span>
              {snapshot.stepIndex + 1}/{snapshot.stepCount}
            </span>
          </div>
        </div>
      </div>
    </section>
  );
}