'use client'

import { Button } from '@admin/components/ui/button'
import {
  FormControl,
  FormDescription,
  FormField,
  FormItem,
  FormLabel,
  FormMessage
} from '@admin/components/ui/form'
import { Input } from '@admin/components/ui/input'
import { cn } from '@admin/utils/shared/cn'
import { Plus, Trash2 } from 'lucide-react'
import { useFieldArray, useFormContext } from 'react-hook-form'

interface DynamicListFieldProps {
  name: string
  label: string
  hideLabel?: boolean
  disabled?: boolean
  maxItems?: number
  placeholder?: string
  description?: string
  className?: string
}

export function DynamicListField({
  name,
  label,
  hideLabel,
  disabled,
  maxItems,
  placeholder = 'Enter value',
  description,
  className
}: DynamicListFieldProps) {
  const { control } = useFormContext()
  const { fields, append, remove } = useFieldArray({
    control,
    name
  })

  const canAddMore = !maxItems || fields.length < maxItems

  const handleAdd = () => {
    if (canAddMore) {
      append('')
    }
  }

  return (
    <div className={cn('space-y-4', className)}>
      <div className="flex items-start justify-between gap-3">
        <FormField
          control={control}
          name={name}
          render={() => (
            <FormItem className="flex flex-col gap-1">
              <FormLabel className={cn({ 'sr-only': hideLabel })}>{label}</FormLabel>
              {description ? (
                <FormDescription className="text-muted-foreground">{description}</FormDescription>
              ) : null}
            </FormItem>
          )}
        />
        <Button
          type="button"
          variant="outline"
          onClick={handleAdd}
          disabled={disabled || !canAddMore}
        >
          <Plus className="size-4" />
          Add {label}
        </Button>
      </div>

      {fields.length === 0 && (
        <div className="text-sm text-muted-foreground">
          No items added yet. Click "Add {label}" to get started.
        </div>
      )}

      <div className="space-y-3">
        {fields.map((field, index) => (
          <div key={field.id} className="flex items-start gap-2">
            <FormField
              control={control}
              name={`${name}.${index}`}
              render={({ field: formField }) => (
                <FormItem className="flex-1">
                  <FormLabel className="sr-only">
                    {label} {index + 1}
                  </FormLabel>
                  <FormControl>
                    <Input {...formField} placeholder={placeholder} disabled={disabled} />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />
            <Button
              type="button"
              variant="destructive"
              size="icon"
              onClick={() => remove(index)}
              disabled={disabled}
              className="mt-0"
            >
              <Trash2 className="size-4" />
            </Button>
          </div>
        ))}
      </div>

      {maxItems && (
        <div className="text-xs text-muted-foreground">
          {fields.length} / {maxItems} items
        </div>
      )}
    </div>
  )
}