'use client';

import { cn } from '@/lib/utils';
import type {
  PlaybackSpeed,
  VisualizationControls,
} from '@/lib/visualizations/types';

interface StepControlsProps {
  currentStepIndex: number;
  totalSteps: number;
  isPlaying: boolean;
  speed: PlaybackSpeed;
  controls: VisualizationControls;
  progress: number;
  className?: string;
}

const SPEED_OPTIONS: PlaybackSpeed[] = [0.5, 1, 2];

export function StepControls({
  currentStepIndex,
  totalSteps,
  isPlaying,
  speed,
  controls,
  progress,
  className,
}: StepControlsProps) {
  const isAtStart = currentStepIndex === 0;
  const isAtEnd = currentStepIndex === totalSteps - 1;

  return (
    <div
      className={cn(
        'flex items-center gap-4 rounded-lg border border-border bg-surface px-4 py-2',
        className
      )}
    >
      <div className="flex items-center gap-1">
        <button
          type="button"
          onClick={controls.goToFirst}
          disabled={isAtStart}
          aria-label="Go to first step"
          className={cn(
            'rounded-md p-1.5 transition-colors',
            'hover:bg-surface-variant focus:outline-none focus:ring-2 focus:ring-primary',
            'disabled:cursor-not-allowed disabled:opacity-40'
          )}
        >
          <FirstIcon />
        </button>

        <button
          type="button"
          onClick={controls.stepBackward}
          disabled={isAtStart}
          aria-label="Previous step"
          className={cn(
            'rounded-md p-1.5 transition-colors',
            'hover:bg-surface-variant focus:outline-none focus:ring-2 focus:ring-primary',
            'disabled:cursor-not-allowed disabled:opacity-40'
          )}
        >
          <PreviousIcon />
        </button>

        <button
          type="button"
          onClick={controls.togglePlay}
          aria-label={isPlaying ? 'Pause' : 'Play'}
          className={cn(
            'rounded-full bg-primary p-2 text-white transition-colors',
            'hover:bg-primary-hover focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 focus:ring-offset-surface'
          )}
        >
          {isPlaying ? <PauseIcon /> : <PlayIcon />}
        </button>

        <button
          type="button"
          onClick={controls.stepForward}
          disabled={isAtEnd}
          aria-label="Next step"
          className={cn(
            'rounded-md p-1.5 transition-colors',
            'hover:bg-surface-variant focus:outline-none focus:ring-2 focus:ring-primary',
            'disabled:cursor-not-allowed disabled:opacity-40'
          )}
        >
          <NextIcon />
        </button>

        <button
          type="button"
          onClick={controls.goToLast}
          disabled={isAtEnd}
          aria-label="Go to last step"
          className={cn(
            'rounded-md p-1.5 transition-colors',
            'hover:bg-surface-variant focus:outline-none focus:ring-2 focus:ring-primary',
            'disabled:cursor-not-allowed disabled:opacity-40'
          )}
        >
          <LastIcon />
        </button>
      </div>

      <div className="relative h-2 flex-1 overflow-hidden rounded-full bg-surface-variant">
        <button
          type="button"
          className="absolute inset-0 w-full cursor-pointer"
          aria-label="Jump to step"
          onClick={(e) => {
            const rect = e.currentTarget.getBoundingClientRect();
            const x = e.clientX - rect.left;
            const percent = x / rect.width;
            const step = Math.round(percent * (totalSteps - 1));
            controls.goToStep(step);
          }}
        >
          <div
            className="h-full bg-primary transition-all duration-200"
            style={{ width: `${progress}%` }}
          />
        </button>
      </div>

      <div className="flex items-center gap-2">
        <span className="whitespace-nowrap text-xs text-foreground-muted">
          {currentStepIndex + 1}/{totalSteps}
        </span>

        <select
          value={speed}
          onChange={(e) =>
            controls.setSpeed(parseFloat(e.target.value) as PlaybackSpeed)
          }
          aria-label="Playback speed"
          className={cn(
            'rounded-md border border-border bg-surface px-1.5 py-0.5 text-xs',
            'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary'
          )}
        >
          {SPEED_OPTIONS.map((s) => (
            <option key={s} value={s}>
              {s}x
            </option>
          ))}
        </select>
      </div>
    </div>
  );
}

function PlayIcon() {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 24 24"
      fill="currentColor"
      className="h-5 w-5"
      aria-hidden="true"
    >
      <path
        fillRule="evenodd"
        d="M4.5 5.653c0-1.426 1.529-2.33 2.779-1.643l11.54 6.348c1.295.712 1.295 2.573 0 3.285L7.28 19.991c-1.25.687-2.779-.217-2.779-1.643V5.653z"
        clipRule="evenodd"
      />
    </svg>
  );
}

function PauseIcon() {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 24 24"
      fill="currentColor"
      className="h-5 w-5"
      aria-hidden="true"
    >
      <path
        fillRule="evenodd"
        d="M6.75 5.25a.75.75 0 01.75-.75H9a.75.75 0 01.75.75v13.5a.75.75 0 01-.75.75H7.5a.75.75 0 01-.75-.75V5.25zm7.5 0A.75.75 0 0115 4.5h1.5a.75.75 0 01.75.75v13.5a.75.75 0 01-.75.75H15a.75.75 0 01-.75-.75V5.25z"
        clipRule="evenodd"
      />
    </svg>
  );
}

function PreviousIcon() {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 24 24"
      fill="currentColor"
      className="h-5 w-5"
      aria-hidden="true"
    >
      <path
        fillRule="evenodd"
        d="M7.72 12.53a.75.75 0 010-1.06l7.5-7.5a.75.75 0 111.06 1.06L9.31 12l6.97 6.97a.75.75 0 11-1.06 1.06l-7.5-7.5z"
        clipRule="evenodd"
      />
    </svg>
  );
}

function NextIcon() {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 24 24"
      fill="currentColor"
      className="h-5 w-5"
      aria-hidden="true"
    >
      <path
        fillRule="evenodd"
        d="M16.28 11.47a.75.75 0 010 1.06l-7.5 7.5a.75.75 0 01-1.06-1.06L14.69 12 7.72 5.03a.75.75 0 011.06-1.06l7.5 7.5z"
        clipRule="evenodd"
      />
    </svg>
  );
}

function FirstIcon() {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 24 24"
      fill="currentColor"
      className="h-5 w-5"
      aria-hidden="true"
    >
      <path
        fillRule="evenodd"
        d="M5.25 5.25a.75.75 0 01.75.75v12a.75.75 0 01-1.5 0V6a.75.75 0 01.75-.75zm6.22.53a.75.75 0 011.06 0l6 6a.75.75 0 010 1.06l-6 6a.75.75 0 01-1.06-1.06L16.19 12 11.47 6.84a.75.75 0 010-1.06z"
        clipRule="evenodd"
        transform="scale(-1, 1) translate(-24, 0)"
      />
    </svg>
  );
}

function LastIcon() {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 24 24"
      fill="currentColor"
      className="h-5 w-5"
      aria-hidden="true"
    >
      <path
        fillRule="evenodd"
        d="M18.75 5.25a.75.75 0 01.75.75v12a.75.75 0 01-1.5 0V6a.75.75 0 01.75-.75zm-6.22.53a.75.75 0 00-1.06 0l-6 6a.75.75 0 000 1.06l6 6a.75.75 0 001.06-1.06L7.81 12l4.72-5.16a.75.75 0 000-1.06z"
        clipRule="evenodd"
        transform="scale(-1, 1) translate(-24, 0)"
      />
    </svg>
  );
}
