import { Plus, Trash2 } from 'lucide-react';

import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';

interface SafetyDynamicListEditorProps {
  readonly label: string;
  readonly items: readonly string[];
  readonly placeholder: string;
  readonly addLabel: string;
  readonly numbered?: boolean;
  readonly disabled?: boolean;
  readonly onChange: (index: number, value: string) => void;
  readonly onAdd: () => void;
  readonly onRemove: (index: number) => void;
}

/**
 * Editable list of strings with add/remove rows — used for a safety protocol's
 * procedure steps and autism considerations, which vary in count per protocol.
 */
export function SafetyDynamicListEditor({
  label,
  items,
  placeholder,
  addLabel,
  numbered = false,
  disabled = false,
  onChange,
  onAdd,
  onRemove,
}: SafetyDynamicListEditorProps) {
  return (
    <div>
      <label className="text-sm font-medium text-gray-700">{label}</label>
      <div className="mt-2 space-y-2">
        {items.map((item, index) => (
          <div key={index} className="flex items-center gap-2">
            {numbered && (
              <span className="w-7 h-7 rounded-full bg-gradient-to-br from-gray-200 to-gray-300 flex items-center justify-center text-xs font-bold text-gray-600 flex-shrink-0">
                {index + 1}
              </span>
            )}
            <Input
              type="text"
              value={item}
              disabled={disabled}
              onChange={(event) => onChange(index, event.target.value)}
              placeholder={placeholder}
              className="flex-1 px-4 py-2.5 bg-gray-50 border border-gray-200 rounded-xl text-sm text-gray-800 placeholder-gray-400 focus:ring-2 focus:ring-violet-500 outline-none"
            />
            <Button
              type="button"
              variant="ghost"
              size="icon"
              disabled={disabled || items.length <= 1}
              onClick={() => onRemove(index)}
              aria-label={`Remove ${label} ${index + 1}`}
              className="h-9 w-9 flex-shrink-0 text-gray-400 hover:text-red-500 hover:bg-red-50 disabled:opacity-40"
            >
              <Trash2 size={16} />
            </Button>
          </div>
        ))}
      </div>
      <Button
        type="button"
        onClick={onAdd}
        disabled={disabled}
        leadingIcon={<Plus size={14} />}
        className="mt-2 flex items-center gap-2 px-3 py-2 bg-violet-50 text-violet-700 rounded-xl text-xs font-medium hover:bg-violet-100 transition-colors disabled:opacity-50"
      >
        {addLabel}
      </Button>
    </div>
  );
}
