import React from 'react'
import { getFieldType } from '../extensions/registry'
import { Pencil, Move, Copy, Trash2 } from 'lucide-react'

export default function FieldActions({
  isHovered,
  isSelected,
  field,
  viewMode,
  isNested = false,
  onEdit,
  onSpacing,
  onDuplicate,
  onDelete,
  spacingBtnRef,
}) {
  if (!(isHovered || isSelected) || viewMode === 'preview') {
    return null
  }
  const isContainer = field.type === 'grid' || Boolean(getFieldType(field.type)?.container)

  // Base button styles matching the reference builder
  // Regular: blue background, white icon; Nested: white background, blue icon
  const baseBtnClass =
    'w-5 h-5 flex items-center justify-center bg-blue-500 text-white shadow hover:bg-blue-600 rounded transition-colors cursor-pointer'
  const nestedBtnClass =
    'w-5 h-5 flex items-center justify-center bg-white text-blue-600 border border-blue-300 shadow hover:bg-blue-50 hover:text-blue-700 rounded transition-colors cursor-pointer'
  const btnClass = isNested ? nestedBtnClass : baseBtnClass

  // Positioning logic matching the reference builder:
  // For standard fields: top: 0, right: 0 (INSIDE top-right corner of field frame)
  // For nested fields inside grid: bottom: 0, right: 0
  // For submit buttons with custom width: align with right edge of button
  const isSubmitWithCustomWidth =
    field.type === 'submit' && field.submitButtonWidth && field.submitButtonWidth > 0

  const getPositionStyle = () => {
    if (isSubmitWithCustomWidth) {
      const alignment = field.submitButtonAlignment || 'full'
      const buttonWidth = field.submitButtonWidth
      const iconGroupWidth = 92 // 4 icons * 20px + 3 gaps * 4px = 92px

      if (alignment === 'left') {
        return {
          top: 0,
          left: `${buttonWidth - iconGroupWidth}px`,
        }
      } else if (alignment === 'right') {
        return {
          top: 0,
          left: `calc(100% - ${iconGroupWidth}px)`,
        }
      } else if (alignment === 'center') {
        return {
          top: 0,
          left: `calc(50% + ${buttonWidth / 2 - iconGroupWidth}px)`,
        }
      } else {
        return {
          top: 0,
          right: 0,
        }
      }
    }

    return {
      top: isNested && !isContainer ? 'auto' : 0,
      bottom: isNested && !isContainer ? 0 : 'auto',
      right: 0,
    }
  }

  return (
    <div
      className="absolute flex items-center space-x-1 z-20 transition-opacity duration-200"
      style={getPositionStyle()}
      onMouseDown={(e) => e.stopPropagation()}
      onTouchStart={(e) => e.stopPropagation()}
    >
      {/* Edit Button */}
      <button
        type="button"
        className={btnClass}
        onClick={(e) => {
          e.stopPropagation()
          if (onEdit) onEdit(field)
        }}
        title="Edit Field Settings"
      >
        <Pencil size={11} />
      </button>

      {/* Spacing Button */}
      {onSpacing && (
        <button
          ref={spacingBtnRef}
          type="button"
          className={btnClass}
          onClick={(e) => {
            e.stopPropagation()
            onSpacing(field)
          }}
          title="Edit spacing (margin & padding)"
        >
          <Move size={11} />
        </button>
      )}

      {/* Duplicate Button */}
      {onDuplicate && (
        <button
          type="button"
          className={btnClass}
          onClick={(e) => {
            e.stopPropagation()
            onDuplicate(field)
          }}
          title="Duplicate Field"
        >
          <Copy size={11} />
        </button>
      )}

      {/* Delete Button */}
      {onDelete && (
        <button
          type="button"
          className={btnClass}
          onClick={(e) => {
            e.stopPropagation()
            onDelete(field)
          }}
          title="Delete Field"
        >
          <Trash2 size={11} />
        </button>
      )}
    </div>
  )
}