'use client'

import { Button } from '../components/ui/Button.js'

export interface ArrayFieldProps {
  label: string
  value?: any[]
  onChange: (value: any[]) => void
  fields?: any[]
  helpText?: string
}

export function ArrayField({ label, value = [], onChange, helpText }: ArrayFieldProps) {
  function addItem() {
    onChange([...value, { id: crypto.randomUUID(), data: {} }])
  }

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

  function moveItem(from: number, to: number) {
    if (to < 0 || to >= value.length) return
    const next = [...value]
    const [moved] = next.splice(from, 1)
    next.splice(to, 0, moved)
    onChange(next)
  }

  return (
    <div>
      <label className="mb-2 block text-sm font-medium">{label}</label>

      <div className="space-y-2">
        {value.map((item, index) => (
          <div
            key={item.id ?? index}
            className="flex items-center gap-2 rounded-md border border-[var(--border)] bg-[var(--card)] p-3"
          >
            <div className="flex flex-col gap-0.5">
              <button
                type="button"
                onClick={() => moveItem(index, index - 1)}
                disabled={index === 0}
                className="text-[var(--muted-foreground)] hover:text-[var(--foreground)] disabled:opacity-30"
                aria-label="Move up"
              >
                <svg
                  className="h-3 w-3"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke="currentColor"
                  strokeWidth={3}
                >
                  <path strokeLinecap="round" strokeLinejoin="round" d="M5 15l7-7 7 7" />
                </svg>
              </button>
              <button
                type="button"
                onClick={() => moveItem(index, index + 1)}
                disabled={index === value.length - 1}
                className="text-[var(--muted-foreground)] hover:text-[var(--foreground)] disabled:opacity-30"
                aria-label="Move down"
              >
                <svg
                  className="h-3 w-3"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke="currentColor"
                  strokeWidth={3}
                >
                  <path strokeLinecap="round" strokeLinejoin="round" d="M19 9l-7 7-7-7" />
                </svg>
              </button>
            </div>

            <div className="flex-1 text-sm text-[var(--muted-foreground)]">Item {index + 1}</div>

            <button
              type="button"
              onClick={() => removeItem(index)}
              className="rounded p-1 text-[var(--muted-foreground)] hover:bg-[var(--accent)] hover:text-[var(--destructive)]"
              aria-label="Remove item"
            >
              <svg
                className="h-4 w-4"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
                strokeWidth={2}
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
                />
              </svg>
            </button>
          </div>
        ))}
      </div>

      <Button variant="secondary" size="sm" onClick={addItem} className="mt-2">
        Add Item
      </Button>

      {helpText && <p className="mt-1 text-xs text-[var(--muted-foreground)]">{helpText}</p>}
    </div>
  )
}
