resolutionflow/frontend/src/components/tree-editor/DynamicArrayField.tsx

import type { ReactNode } from 'react'
import { Plus, Trash2, ChevronUp, ChevronDown } from 'lucide-react'
import { cn } from '@/lib/utils'

interface DynamicArrayFieldProps<T> {
  items: T[]
  onAdd: () => void
  onRemove: (index: number) => void
  onReorder?: (fromIndex: number, toIndex: number) => void
  renderItem: (item: T, index: number) => ReactNode
  addLabel?: string
  maxItems?: number
  minItems?: number
  className?: string
}

export function DynamicArrayField<T>({
  items,
  onAdd,
  onRemove,
  onReorder,
  renderItem,
  addLabel = 'Add Item',
  maxItems,
  minItems = 0,
  className
}: DynamicArrayFieldProps<T>) {
  const canAdd = maxItems === undefined || items.length < maxItems
  const canRemove = items.length > minItems

  const handleMoveUp = (index: number) => {
    if (onReorder && index > 0) {
      onReorder(index, index - 1)
    }
  }

  const handleMoveDown = (index: number) => {
    if (onReorder && index < items.length - 1) {
      onReorder(index, index + 1)
    }
  }

  return (
    <div className={cn('space-y-2', className)}>
      {items.map((item, index) => (
        <div key={index} className="group flex items-start gap-2">
          {/* Reorder buttons */}
          {onReorder && items.length > 1 && (
            <div className="flex flex-col gap-0.5 opacity-0 group-hover:opacity-100">
              <button
                type="button"
                onClick={() => handleMoveUp(index)}
                disabled={index === 0}
                className="rounded p-0.5 text-muted-foreground hover:bg-accent hover:text-foreground disabled:opacity-30"
                title="Move up"
                aria-label="Move up"
              >
                <ChevronUp className="h-3 w-3" />
              </button>
              <button
                type="button"
                onClick={() => handleMoveDown(index)}
                disabled={index === items.length - 1}
                className="rounded p-0.5 text-muted-foreground hover:bg-accent hover:text-foreground disabled:opacity-30"
                title="Move down"
                aria-label="Move down"
              >
                <ChevronDown className="h-3 w-3" />
              </button>
            </div>
          )}

          {/* Item content */}
          <div className="flex-1">{renderItem(item, index)}</div>

          {/* Remove button */}
          {canRemove && (
            <button
              type="button"
              onClick={() => onRemove(index)}
              className="mt-1 rounded p-1 text-muted-foreground hover:bg-red-400/20 hover:text-red-400"
              title="Remove"
              aria-label="Remove"
            >
              <Trash2 className="h-4 w-4" />
            </button>
          )}
        </div>
      ))}

      {/* Add button */}
      {canAdd && (
        <button
          type="button"
          onClick={onAdd}
          className={cn(
            'flex w-full items-center justify-center gap-1 rounded-md border border-dashed border-border',
            'px-3 py-2 text-sm text-muted-foreground',
            'hover:border-border hover:text-foreground'
          )}
        >
          <Plus className="h-4 w-4" />
          {addLabel}
        </button>
      )}

      {/* Empty state */}
      {items.length === 0 && !canAdd && (
        <p className="text-center text-sm text-muted-foreground">No items</p>
      )}
    </div>
  )
}

export default DynamicArrayField