"use client";

import { useVisualization } from "./visualization-context";
import type { SpeedPreset } from "@/types/visualization";

const speedLabels: Record<SpeedPreset, string> = {
  slow: "0.5x",
  normal: "1x",
  fast: "2x",
};

const speedOrder: SpeedPreset[] = ["slow", "normal", "fast"];

export function StepController() {
  const {
    stepIndex,
    totalSteps,
    isPlaying,
    speed,
    nextStep,
    prevStep,
    togglePlayback,
    setSpeed,
    canGoNext,
    canGoPrev,
  } = useVisualization();

  const cycleSpeed = () => {
    const currentIndex = speedOrder.indexOf(speed);
    const nextIndex = (currentIndex + 1) % speedOrder.length;
    setSpeed(speedOrder[nextIndex]);
  };

  return (
    <div
      className="flex items-center justify-between gap-4 rounded-lg border border-border bg-card p-3"
      role="toolbar"
      aria-label="Visualization controls"
    >
      {/* Step counter */}
      <div className="flex items-center gap-2 text-sm text-muted-foreground">
        <span className="font-medium">
          Step {stepIndex + 1} of {totalSteps}
        </span>
      </div>

      {/* Navigation controls */}
      <div className="flex items-center gap-2">
        {/* Previous */}
        <button
          onClick={prevStep}
          disabled={!canGoPrev}
          className="flex h-9 w-9 items-center justify-center rounded-md border border-border bg-background transition-colors hover:bg-muted disabled:cursor-not-allowed disabled:opacity-50"
          aria-label="Previous step"
          title="Previous step (←)"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="16"
            height="16"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            strokeWidth="2"
            strokeLinecap="round"
            strokeLinejoin="round"
            aria-hidden="true"
          >
            <path d="m15 18-6-6 6-6" />
          </svg>
        </button>

        {/* Play/Pause */}
        <button
          onClick={togglePlayback}
          className="flex h-9 w-9 items-center justify-center rounded-md border border-border bg-primary text-primary-foreground transition-colors hover:bg-primary/90"
          aria-label={isPlaying ? "Pause" : "Play"}
          title={isPlaying ? "Pause (Space)" : "Play (Space)"}
        >
          {isPlaying ? (
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="16"
              height="16"
              viewBox="0 0 24 24"
              fill="currentColor"
              aria-hidden="true"
            >
              <rect x="6" y="4" width="4" height="16" />
              <rect x="14" y="4" width="4" height="16" />
            </svg>
          ) : (
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="16"
              height="16"
              viewBox="0 0 24 24"
              fill="currentColor"
              aria-hidden="true"
            >
              <polygon points="5 3 19 12 5 21 5 3" />
            </svg>
          )}
        </button>

        {/* Next */}
        <button
          onClick={nextStep}
          disabled={!canGoNext}
          className="flex h-9 w-9 items-center justify-center rounded-md border border-border bg-background transition-colors hover:bg-muted disabled:cursor-not-allowed disabled:opacity-50"
          aria-label="Next step"
          title="Next step (→)"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="16"
            height="16"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            strokeWidth="2"
            strokeLinecap="round"
            strokeLinejoin="round"
            aria-hidden="true"
          >
            <path d="m9 18 6-6-6-6" />
          </svg>
        </button>
      </div>

      {/* Speed control */}
      <button
        onClick={cycleSpeed}
        className="flex h-8 min-w-[48px] items-center justify-center rounded-md border border-border bg-background px-2 text-sm font-medium transition-colors hover:bg-muted"
        aria-label={`Playback speed: ${speedLabels[speed]}`}
        title="Cycle playback speed"
      >
        {speedLabels[speed]}
      </button>

      {/* Progress bar */}
      <div
        className="hidden flex-1 sm:block"
        role="progressbar"
        aria-valuenow={stepIndex + 1}
        aria-valuemin={1}
        aria-valuemax={totalSteps}
        aria-label={`Step ${stepIndex + 1} of ${totalSteps}`}
      >
        <div className="h-2 w-full overflow-hidden rounded-full bg-muted">
          <div
            className="h-full bg-primary transition-all duration-300"
            style={{ width: `${((stepIndex + 1) / totalSteps) * 100}%` }}
          />
        </div>
      </div>

      {/* Keyboard hints */}
      <div className="hidden items-center gap-1 text-xs text-muted-foreground lg:flex">
        <kbd className="rounded border border-border bg-muted px-1.5 py-0.5">
          ←
        </kbd>
        <kbd className="rounded border border-border bg-muted px-1.5 py-0.5">
          →
        </kbd>
        <span className="mx-1">step</span>
        <kbd className="rounded border border-border bg-muted px-1.5 py-0.5">
          Space
        </kbd>
        <span>play</span>
      </div>
    </div>
  );
}
