"use client"

import * as React from "react"
import { Plus, Trash2, GripVertical } from "lucide-react"

import { cn } from "@/lib/utils"
import { Input } from "@/components/ui/input"
import { Button } from "@/components/ui/button"

interface Exercise {
  name: string
  duration: number
}

interface ExerciseListProps {
  value: Exercise[]
  onChange: (value: Exercise[]) => void
  workTimeDefault?: number
  className?: string
  disabled?: boolean
}

function ExerciseList({
  value,
  onChange,
  workTimeDefault = 20,
  className,
  disabled = false,
}: ExerciseListProps) {
  const handleAdd = () => {
    onChange([...value, { name: "", duration: workTimeDefault }])
  }

  const handleRemove = (index: number) => {
    onChange(value.filter((_, i) => i !== index))
  }

  const handleUpdate = (
    index: number,
    field: keyof Exercise,
    newValue: string | number
  ) => {
    const updated = [...value]
    updated[index] = { ...updated[index], [field]: newValue }
    onChange(updated)
  }

  const handleMove = (index: number, direction: "up" | "down") => {
    if (
      (direction === "up" && index === 0) ||
      (direction === "down" && index === value.length - 1)
    ) {
      return
    }

    const newIndex = direction === "up" ? index - 1 : index + 1
    const updated = [...value]
    const [moved] = updated.splice(index, 1)
    updated.splice(newIndex, 0, moved)
    onChange(updated)
  }

  return (
    <div className={cn("space-y-3", className)}>
      <div className="space-y-2">
        {value.map((exercise, index) => (
          <div
            key={index}
            className="flex items-center gap-2 rounded-md border border-neutral-800 bg-neutral-900/50 p-3"
          >
              <div className="flex flex-col gap-1">
              <button
                type="button"
                onClick={() => handleMove(index, "up")}
                disabled={disabled || index === 0}
                className="text-neutral-500 hover:text-white disabled:opacity-30"
                aria-label={`Move exercise ${index + 1} up`}
                data-testid={`move-up-${index}`}
              >
                <span className="block -rotate-90">‹</span>
              </button>
              <button
                type="button"
                onClick={() => handleMove(index, "down")}
                disabled={disabled || index === value.length - 1}
                className="text-neutral-500 hover:text-white disabled:opacity-30"
                aria-label={`Move exercise ${index + 1} down`}
                data-testid={`move-down-${index}`}
              >
                <span className="block rotate-90">‹</span>
              </button>
            </div>

            <div className="flex flex-1 gap-3">
              <div className="flex-1">
                <label className="mb-1 block text-xs text-neutral-500">
                  Exercise Name
                </label>
                <Input
                  value={exercise.name}
                  onChange={(e) => handleUpdate(index, "name", e.target.value)}
                  placeholder="e.g., Jumping Jacks"
                  disabled={disabled}
                  className="h-9"
                  data-testid={`exercise-name-${index}`}
                />
              </div>

              <div className="w-24">
                <label className="mb-1 block text-xs text-neutral-500">
                  Duration
                </label>
                <div className="flex items-center gap-1">
                  <Input
                    type="number"
                    value={exercise.duration}
                    onChange={(e) =>
                      handleUpdate(index, "duration", parseInt(e.target.value) || 0)
                    }
                    disabled={disabled}
                    className="h-9"
                    min={1}
                    data-testid={`exercise-duration-${index}`}
                  />
                  <span className="text-sm text-neutral-500">s</span>
                </div>
              </div>
            </div>

            <Button
              type="button"
              variant="ghost"
              size="icon"
              onClick={() => handleRemove(index)}
              disabled={disabled || value.length <= 1}
              className="text-neutral-500 hover:text-red-500"
              aria-label={`Delete exercise ${index + 1}`}
              data-testid={`delete-exercise-${index}`}
            >
              <Trash2 className="h-4 w-4" />
            </Button>
          </div>
        ))}
      </div>

      <Button
        type="button"
        variant="outline"
        onClick={handleAdd}
        disabled={disabled}
        className="w-full border-dashed border-neutral-700 text-neutral-400 hover:border-orange-500 hover:text-orange-500"
      >
        <Plus className="mr-2 h-4 w-4" />
        Add Exercise
      </Button>
    </div>
  )
}

export { ExerciseList }
export type { Exercise }
