import React, { useState, useEffect, useRef, useContext, createContext } from 'react'
import { useSortable, SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable'
import { useDroppable } from '@dnd-kit/core'
import { CSS } from '@dnd-kit/utilities'
import { Plus, Shield, Hash, X, Mail, Eye, EyeOff, Palette, ChevronDown, AlertTriangle, Trash2 } from 'lucide-react'
import { useFormStore } from '../store/useFormStore'
import FieldActions from './FieldActions'
import InlineSpacingEditor from './InlineSpacingEditor'
import InlineSubmitButtonEditor from './InlineSubmitButtonEditor'
import InlineLabelEditor from './InlineLabelEditor'
import InlineContentEditor from './InlineContentEditor'
import InlineColumnBackgroundEditor from './InlineColumnBackgroundEditor'
import InlineIconEditor from './InlineIconEditor'
import InlineImageEditor from './InlineImageEditor'
import InlineSwitchEditor from './InlineSwitchEditor'
import { DropLine, ColumnAddFieldMenu, addFieldToColumn, PlaceholderEditOverlay, FieldErrorBoundary, withPriceSuffix, removeOptionUpdates } from './interaction'
import { PromoBannerPreview, TrustBadgesPreview, CountdownBannerPreview } from './canvas/UtilityFieldPreview'
import EditableContent from './canvas/EditableContent'
import { SOCIAL_ICONS } from './canvas/socialIcons'
import { shouldFieldBeVisible } from '../utils/evaluateConditions'
import { applyFilters, getFieldType } from '../extensions/registry'
import { useCanvasContext } from './canvas/CanvasContext'
import {
  resolveGlobalSettings, toRendererField, labelStyle, labelText, asteriskColor, descriptionStyle, inputStyle,
  hoverBorder, focusBorder, placeholderColor, defaultPlaceholder, fieldMargin, submitStyle, staticContentStyle, sectionStyle, gridStyles,
  choiceOptionStyle, choiceColors, radioLabelStyle, or, fieldDescriptionStyle,
} from '../utils/resolveFieldStyle'
import { COUNTRY_LIST } from './canvas/countries'
import { ksesPost } from './canvas/kses'
import { NumberStepperPreview } from './canvas/NumberStepperPreview'

// Instance of a repeated container being drawn: each instance gets its own preview values. Instance 0 keeps the plain
// field id so conditional logic (which reads previewData[field.id]) keeps working for the first instance.
export const FieldInstanceContext = createContext(0)

// Field types this builder draws itself. Other types come from registerFieldType(); anything else is shown as an
// unsupported-field placeholder (its data is kept untouched).
export const BUILTIN_FIELD_TYPES = [
  'text', 'email', 'tel', 'phone', 'url', 'password', 'number', 'textarea', 'select', 'dropdown', 'checkbox', 'radio',
  'switch', 'consent', 'html', 'section', 'static-content', 'name', 'date', 'time', 'address', 'hidden', 'image',
  'captcha', 'grid', 'submit', 'promo-banner', 'trust-badges', 'faq-accordion', 'countdown-banner',
]
const TEXT_INPUT_TYPES = ['text', 'email', 'tel', 'phone', 'url', 'password', 'number']

// Fields whose storefront markup has no field label above the control (they draw their own text, or none).
const NO_LABEL_TYPES = ['section', 'submit', 'static-content', 'html', 'image', 'hidden', 'consent', 'promo-banner', 'trust-badges', 'faq-accordion', 'countdown-banner']
const nullishValue = (v) => v === undefined || v === null
// Storefront radio inputs carry no colour variables: unchecked border #71717a, checked border the form primary colour
// (--color-primary-button-background), black dot — whatever radioSelectedColor says.
const RADIO_INPUT_VARS = (gs) => ({ '--choice-selected': gs.primaryColor, '--choice-unselected': '#71717a' })
const NO_DESCRIPTION_TYPES = ['section', 'submit', 'static-content', 'html', 'hidden']

const ICON_MAP = {
  text: Hash,
  email: Mail,
}

const getOptionLabel = (opt) => {
  if (opt === null || opt === undefined) return ''
  if (typeof opt === 'object') {
    return opt.label ?? opt.name ?? opt.text ?? opt.value ?? ''
  }
  return String(opt)
}

const getOptionValue = (opt) => {
  if (opt === null || opt === undefined) return ''
  if (typeof opt === 'object') {
    return opt.value ?? opt.label ?? ''
  }
  return String(opt)
}

export const resolveImageUrl = (imgSrc) => {
  if (!imgSrc) return ''
  if (imgSrc.startsWith('http://') || imgSrc.startsWith('https://') || imgSrc.startsWith('data:') || imgSrc.startsWith('blob:')) {
    return imgSrc
  }
  if (typeof window !== 'undefined' && window.wpvfbSettings?.pluginUrl) {
    const cleanPlugin = window.wpvfbSettings.pluginUrl.replace(/\/$/, '')
    const cleanPath = imgSrc.replace(/^\//, '')
    return `${cleanPlugin}/dist/${cleanPath}`
  }
  return imgSrc
}

// The HTML field is the admin's own markup; on the canvas we still drop scripts, inline event handlers and
// javascript: URLs so an imported form cannot run code inside wp-admin.
export const sanitizeCanvasHtml = (html) => {
  if (!html || typeof window === 'undefined' || !window.DOMParser) return html || ''
  try {
    const doc = new window.DOMParser().parseFromString(`<div>${html}</div>`, 'text/html')
    const root = doc.body.firstChild
    root.querySelectorAll('script').forEach((el) => el.remove())
    root.querySelectorAll('*').forEach((el) => {
      Array.from(el.attributes).forEach((attr) => {
        const name = attr.name.toLowerCase()
        const value = String(attr.value || '').replace(/[\s\u0000-\u001f]/g, '').toLowerCase()
        if (name.startsWith('on')) el.removeAttribute(attr.name)
        else if (['href', 'src', 'xlink:href', 'action', 'formaction', 'srcdoc'].includes(name) && (name === 'srcdoc' || value.startsWith('javascript:') || value.startsWith('vbscript:'))) el.removeAttribute(attr.name)
      })
    })
    return root.innerHTML
  } catch (e) {
    return ''
  }
}

export const getGridTemplateColumns = (field, colKeys) => {
  if (!colKeys || colKeys.length <= 1) return '1fr'
  if (colKeys.length === 2) {
    if (field.columnWidths === 'narrow-wide') return '38% 62%'
    if (field.columnWidths === 'wide-narrow') return '62% 38%'
    if (field.columnWidths === 'custom' && Array.isArray(field.customColumnWidths)) {
      return `${field.customColumnWidths[0] || 50}% ${field.customColumnWidths[1] || 50}%`
    }
  }
  return `repeat(${colKeys.length}, minmax(0, 1fr))`
}

// Column background: the reference builder `columnBackgrounds.columnN` first, then the older `columnSettings[colKey].bg*` keys.
export const resolveColumnBackground = (field, colKey, colIdx) => {
  const colBg = field.columnBackgrounds?.[`column${colIdx + 1}`] || field.columnBackgrounds?.[colKey] || {}
  const old = field.columnSettings?.[colKey] || {}
  const pick = (a, b) => (a !== undefined && a !== null && a !== '' ? a : b)
  return {
    backgroundColor: pick(colBg.backgroundColor, old.bgColor),
    backgroundImageUrl: pick(colBg.backgroundImageUrl, old.bgImage),
    backgroundImageSize: pick(colBg.backgroundImageSize, old.bgSize),
    backgroundImagePosition: pick(colBg.backgroundImagePosition, old.bgPosition),
    backgroundImageRepeat: colBg.backgroundImageRepeat,
  }
}

export const columnBackgroundStyle = (bg) => {
  const style = {}
  if (bg.backgroundColor) style.backgroundColor = bg.backgroundColor
  if (bg.backgroundImageUrl) {
    style.backgroundImage = `url(${resolveImageUrl(bg.backgroundImageUrl)})`
    style.backgroundSize = bg.backgroundImageSize || 'cover'
    style.backgroundPosition = bg.backgroundImagePosition || 'center'
    style.backgroundRepeat = bg.backgroundImageRepeat || 'no-repeat'
  }
  return style
}

// One container column in Edit mode: the storefront column box (padding/background/radius from gridStyles) holding
// the real fields. Edit chrome never changes the layout: an empty column shows a drop hint, the "Add Field" button
// floats over the column while hovered, and the drop line is absolutely positioned.
function GridColumn({ field, gridId, colKey, colIdx, colStyle, colOverlay, nestedList, showAddMenu, setShowAddMenu, handleAddNestedField, updateField, viewMode }) {
  const columnId = `${gridId}__${colKey}`
  const { setNodeRef, isOver } = useDroppable({
    id: columnId
  })
  const dragOverContainer = useFormStore((state) => state.dragOverContainer)
  const dragOverIndex = useFormStore((state) => state.dragOverIndex)
  const hiddenElements = useFormStore((state) => state.hiddenElements)
  const [isEditingBg, setIsEditingBg] = useState(false)
  const colRef = useRef(null)

  const isOverThisCol = dragOverContainer && 
    dragOverContainer.type === 'grid' && 
    dragOverContainer.gridId === gridId && 
    dragOverContainer.colKey === colKey

  const colBgKey = `column${colIdx + 1}`
  const columnData = resolveColumnBackground(field, colKey, colIdx)
  const visibleNested = nestedList.filter((f) => !hiddenElements?.has?.(f.id))
  const dropLine = <DropLine float="top" />

  return (
    <div
      ref={(node) => {
        setNodeRef(node)
        colRef.current = node
      }}
      onClick={(e) => {
        if (viewMode === 'edit') {
          e.stopPropagation()
          useFormStore.getState().setActiveFieldId?.(field.id)
          useFormStore.getState().setSelectedColumn?.({ gridId: field.id, colKey, columnKey: colBgKey })
          setIsEditingBg(true)
        }
      }}
      style={colStyle}
      data-grid-column={colBgKey}
      className="group/col"
    >
      {colOverlay && <div style={colOverlay} />}
      {/* Column background: a floating button (the column itself has no spare area once it holds fields) */}
      {viewMode === 'edit' && (
        <button
          type="button"
          data-canvas-chrome="true"
          title="Column background"
          aria-label="Column background"
          onClick={(e) => {
            e.stopPropagation()
            useFormStore.getState().setActiveFieldId?.(field.id)
            useFormStore.getState().setSelectedColumn?.({ gridId: field.id, colKey, columnKey: colBgKey })
            setIsEditingBg(true)
          }}
          className="absolute top-1 left-1 z-40 w-6 h-6 flex items-center justify-center rounded-md bg-white border border-gray-200 text-gray-600 hover:text-gray-900 shadow-xs opacity-0 group-hover/col:opacity-100 transition-opacity cursor-pointer"
        >
          <Palette className="w-3.5 h-3.5" />
        </button>
      )}
      {viewMode === 'edit' && isEditingBg && (
        <InlineColumnBackgroundEditor
          isOpen={isEditingBg}
          onClose={() => setIsEditingBg(false)}
          columnData={columnData}
          onUpdate={(updates) => {
            // the reference builder key (read by the storefront renderer): columnBackgrounds.columnN
            const current = field.columnBackgrounds || {}
            updateField(field.id, {
              columnBackgrounds: {
                ...current,
                [colBgKey]: { ...(current[colBgKey] || {}), ...updates }
              }
            })
          }}
          anchorRef={colRef}
        />
      )}

      <div style={{ position: 'relative', zIndex: colOverlay ? 2 : 1, flex: 1, minHeight: visibleNested.length ? undefined : 0 }}>
        <SortableContext
          items={nestedList.map((f) => f.id)}
          strategy={verticalListSortingStrategy}
        >
          {nestedList.map((nestedField, nestedIdx) => {
            if (hiddenElements?.has?.(nestedField.id)) return null;
            const isPlaceholderHere = isOverThisCol && dragOverIndex === nestedIdx
            return (
              <div key={nestedField.id} className="relative">
                {isPlaceholderHere && dropLine}
                <FormField field={nestedField} isNested={true} />
              </div>
            )
          })}
        </SortableContext>
        {isOverThisCol && visibleNested.length > 0 && (dragOverIndex === null || dragOverIndex >= nestedList.length) && (
          <DropLine float="bottom" />
        )}

        {/* Empty column: a drop hint (edit chrome) so the column can still be targeted */}
        {viewMode === 'edit' && visibleNested.length === 0 && (
          <div
            data-canvas-chrome="true"
            className={`flex items-center justify-center rounded-lg border border-dashed text-[10px] font-semibold uppercase tracking-wider select-none min-h-[64px] ${
              isOver || isOverThisCol ? 'border-blue-400 bg-blue-50/40 text-blue-600' : 'border-gray-300 text-gray-400'
            }`}
          >
            Drop fields here
          </div>
        )}
      </div>

      {/* Column Add Field Trigger (floats over the column, no layout impact); lists every palette field */}
      {viewMode === 'edit' && (
        <ColumnAddFieldMenu
          open={showAddMenu === colKey}
          onToggle={() => setShowAddMenu(showAddMenu === colKey ? null : colKey)}
          onClose={() => setShowAddMenu((cur) => (cur === colKey ? null : cur))}
          onAdd={(type, label) => handleAddNestedField(colKey, type, label)}
        />
      )}
    </div>
  )
}

// Each field renders inside its own error boundary: one broken field never blanks the canvas.
export default function FormField(props) {
  return (
    <FieldErrorBoundary field={props.field}>
      <FormFieldBody {...props} />
    </FieldErrorBoundary>
  )
}

function FormFieldBody({ field, isNested = false }) {
  const viewMode = useFormStore((state) => state.viewMode)
  const fields = useFormStore((state) => state.fields)
  const removeField = useFormStore((state) => state.removeField)
  const duplicateField = useFormStore((state) => state.duplicateField)
  const activeFieldId = useFormStore((state) => state.activeFieldId)
  const setActiveFieldId = useFormStore((state) => state.setActiveFieldId)
  const addField = useFormStore((state) => state.addField)
  const updateField = useFormStore((state) => state.updateField)
  const settings = useFormStore((state) => state.settings)
  const previewData = useFormStore((state) => state.previewData)
  const setPreviewData = useFormStore((state) => state.setPreviewData)
  const setIsSubmittedInPreview = useFormStore((state) => state.setIsSubmittedInPreview)
  const hoveredFieldId = useFormStore((state) => state.hoveredFieldId)
  const instanceIndex = useContext(FieldInstanceContext)
  const typeDef = getFieldType(field.type)
  const { previewMode } = useCanvasContext()
  const isMobile = previewMode === 'mobile'
  // Storefront view of this field and of the form settings: every canvas style below resolves from these.
  const gs = resolveGlobalSettings(settings)
  const fp = React.useMemo(() => toRendererField(field), [field])
  // Preview value key: per instance inside a repeated container (instance 0 = the field id itself).
  const pid = instanceIndex ? `${field.id}__row${instanceIndex}` : field.id


  const [isEditingPlaceholder, setIsEditingPlaceholder] = useState(false)
  const [isEditingSpacing, setIsEditingSpacing] = useState(false)
  const [isEditingSubmitButton, setIsEditingSubmitButton] = useState(false)
  const [isEditingContent, setIsEditingContent] = useState(false)
  const [isHovered, setIsHovered] = useState(false)
  const [showGlow, setShowGlow] = useState(false)
  const [showAddMenu, setShowAddMenu] = useState(null) // holds column key: 'col-0', etc.
  const [activeAccordion, setActiveAccordion] = useState(-1)
  const [showPassword, setShowPassword] = useState(false)
  const [isEditingIcon, setIsEditingIcon] = useState(false)
  const [isInputFocused, setIsInputFocused] = useState(false)
  const [isInputHovered, setIsInputHovered] = useState(false)
  
  const labelRef = useRef(null)
  const submitButtonRef = useRef(null)
  const contentRef = useRef(null)
  const iconRef = useRef(null)
  const spacingBtnRef = useRef(null)

  // Only call hooks for react-dnd if we are in edit mode to avoid warnings
  const sortable = useSortable({ id: field.id })
  const {
    attributes,
    listeners,
    setNodeRef,
    transform,
    transition,
    isDragging,
  } = sortable

  const isActive = activeFieldId === field.id
  // A registered container type may draw columns the field doesn't store yet (getColumns).
  const layoutColumns = field.columns || (typeDef && typeof typeDef.getColumns === 'function' ? typeDef.getColumns(field) : undefined)
  // Container drawing: grids, and registered container types (a filter may pick one for a field).
  const containerDef = applyFilters('canvas.containerType', typeDef && typeDef.container ? typeDef : null, field)

  useEffect(() => {
    if (isActive) {
      setShowGlow(true)
      const timer = setTimeout(() => setShowGlow(false), 2000)
      return () => clearTimeout(timer)
    } else {
      setShowGlow(false)
    }
  }, [isActive])

  // the reference builder 12-column grid snapping resize handler
  const handleResize = (e) => {
    if (viewMode !== 'edit') return
    e.stopPropagation()
    e.preventDefault()

    const startX = e.clientX
    const resizeElement = e.target.closest('[data-field-id]')
    if (!resizeElement) return

    const initialWidth = resizeElement.offsetWidth
    // Nested fields snap to their grid column's 12 steps, top-level fields to the form's.
    const previewArea = (isNested && e.target.closest('[data-grid-column]')) || e.target.closest('.preview-area')
    if (!previewArea) return

    const previewStyles = getComputedStyle(previewArea)
    const previewAreaWidth =
      previewArea.offsetWidth -
      parseFloat(previewStyles.paddingLeft || 0) -
      parseFloat(previewStyles.paddingRight || 0) -
      parseFloat(previewStyles.borderLeftWidth || 0) -
      parseFloat(previewStyles.borderRightWidth || 0) -
      20

    const columnWidth = Math.floor(previewAreaWidth / 12)
    let lastCalculatedWidth = initialWidth
    let animationFrameId = null

    const onMouseMove = (moveEvent) => {
      if (animationFrameId) cancelAnimationFrame(animationFrameId)
      animationFrameId = requestAnimationFrame(() => {
        const deltaX = moveEvent.clientX - startX
        const newWidth = Math.min(
          Math.max(initialWidth + deltaX, columnWidth),
          previewAreaWidth
        )
        const columnSteps = Math.round(newWidth / columnWidth)
        const snappedWidth = columnSteps * columnWidth
        lastCalculatedWidth = Math.min(snappedWidth, previewAreaWidth - 3)
        resizeElement.style.width = `${lastCalculatedWidth}px`
      })
    }

    const onMouseUp = () => {
      if (animationFrameId) cancelAnimationFrame(animationFrameId)
      document.removeEventListener('mousemove', onMouseMove)
      document.removeEventListener('mouseup', onMouseUp)

      const fieldId = resizeElement?.dataset?.fieldId
      const finalWidthPercent = (lastCalculatedWidth / previewArea.offsetWidth) * 100
      const finalWidthPercentage = `${finalWidthPercent.toFixed(2)}%`

      if (fieldId) {
        updateField(fieldId, { width: finalWidthPercentage })
        useFormStore.getState().setIsDirty?.(true)
      }
    }

    document.addEventListener('mousemove', onMouseMove)
    document.addEventListener('mouseup', onMouseUp)
  }

  const noLabel = NO_LABEL_TYPES.includes(field.type) || Boolean(typeDef && typeDef.noLabel)
  const hasCustomWidth = Boolean(field.width) && !/^100(\.0+)?%$/.test(String(field.width))
  const wrapperMargin = (() => {
    if (field.type === 'submit') return submitStyle(fp, gs).wrapperMargin
    if (field.type === 'static-content') return staticContentStyle(fp, gs).outer.margin
    if (field.type === 'section') return '0px 0px 16px 0px'
    if (field.type === 'grid' || containerDef) {
      const m = fp.margin && typeof fp.margin === 'object' ? fp.margin : {}
      return `${m.top ?? 0}px ${m.right ?? 0}px ${m.bottom ?? 0}px ${m.left ?? 0}px`
    }
    // These storefront fields have no outer margin (their own box margins are drawn inside).
    if (['hidden', 'image', 'promo-banner', 'trust-badges'].includes(field.type)) return '0px'
    return fieldMargin(fp)
  })()

  const style = {
    transform: CSS.Transform.toString(transform),
    transition: transition ? `${transition}, box-shadow 0.3s ease` : 'box-shadow 0.3s ease',
    opacity: isDragging ? 0.4 : 1,
    boxSizing: 'border-box',
    borderWidth: '0px',
    position: 'relative',
    overflow: 'visible',
    boxShadow: showGlow && !(field.type === 'submit' && field.submitButtonWidth && field.submitButtonWidth > 0)
      ? '0 0 15px rgba(59, 130, 246, 0.45)'
      : undefined,
    // Like the storefront: a field only gets a width when it was resized (100% = auto, so side margins never
    // overflow the card); on mobile every field is full width.
    width: !isMobile && hasCustomWidth ? field.width : undefined,
    minWidth: !isMobile && hasCustomWidth ? 'auto' : undefined,
    maxWidth: field.maxWidth ? (typeof field.maxWidth === 'number' ? `${field.maxWidth}px` : field.maxWidth) : '100%',
    // Inner padding is drawn by the field itself (dropdown/date/name…), like the storefront.
    padding: '0px',
    margin: wrapperMargin,
  }

  // Column "Add Field": palette defaults (createFieldWithDefaults), single-submit and column rules.
  const handleAddNestedField = (colKey, type, label) => {
    addFieldToColumn(field, layoutColumns, colKey, type, label)
    setShowAddMenu(null)
  }

  const handleRemoveNestedField = (colKey, nestedId, e) => {
    e.stopPropagation()
    const currentColumns = layoutColumns || {}
    const colFields = (currentColumns[colKey] || []).filter((f) => f.id !== nestedId)

    updateField(field.id, {
      columns: {
        ...currentColumns,
        [colKey]: colFields,
      },
    })
    if (activeFieldId === nestedId) {
      setActiveFieldId(null)
    }
  }

  // Choice option labels: their own formatting only (no parent label styles, no required asterisk), like the reference builder.
  const optionLabelField = (opt, optLabel) => {
    const o = opt && typeof opt === 'object' ? opt : {}
    return {
      id: field.id,
      type: field.type,
      label: optLabel,
      name: optLabel,
      required: false,
      fontFamily: field.fontFamily,
      labelFontWeight: o.labelFontWeight,
      labelFontStyle: o.labelFontStyle,
      labelTextColor: o.labelTextColor ?? o.labelColor ?? field.textColor,
      fontSize: o.fontSize,
      lineHeight: o.lineHeight,
    }
  }

  // Inline option-text editor (choice cards and standard options): saves label + formatting into options[idx].
  // The wrapper takes no box (display: contents) so the text is laid out exactly like the storefront's option span.
  const optionEditor = (opt, optLabel, idx, list, displayStyle, text) => (
    <div onClick={(e) => e.stopPropagation()} style={{ display: 'contents' }}>
      <InlineLabelEditor
        field={{ ...optionLabelField(opt, optLabel), label: text ?? optLabel, name: text ?? optLabel }}
        mode="option"
        viewMode={viewMode}
        displayStyle={displayStyle}
        onSave={(newLabel, formatting) => {
          const updated = [...list]
          if (typeof updated[idx] === 'object' && updated[idx] !== null) {
            // Card titles are shown without their " — $price" suffix; the saved label keeps it.
            updated[idx] = { ...updated[idx], ...formatting, label: withPriceSuffix(getOptionLabel(list[idx]), (formatting && formatting.label) ?? newLabel) }
          } else {
            updated[idx] = { label: newLabel, value: newLabel, ...formatting }
          }
          updateField(field.id, { options: updated })
        }}
      />
    </div>
  )

  const renderConsentText = (text) => {
    if (!text) return null;
    const parts = text.split(/(\[.*?\]\(.*?\))/g);
    return parts.map((part, i) => {
      const match = part.match(/\[(.*?)\]\((.*?)\)/);
      if (match) {
        return <a key={i} href={match[2]} target="_blank" rel="noopener noreferrer" className="text-gray-900 underline hover:text-blue-600">{match[1]}</a>;
      }
      return <span key={i}>{part}</span>;
    });
  }

  const renderInputPreview = (disabled = true) => {
    // Storefront input styles (resolveFieldStyle): field keys → inputSettings/colours → defaults. Hover/focus
    // border colours only react in Preview, like the published form.
    const hasIcon = Boolean(field.fieldIcon) && field.fieldIcon !== 'none'
    const iconSide = field.iconPosition || 'left'
    const baseInput = inputStyle(fp, gs, { iconLeft: hasIcon && iconSide === 'left', iconRight: hasIcon && iconSide === 'right' })
    const inputCommonStyle = {
      ...baseInput,
      borderColor: isInputFocused ? focusBorder(fp, gs) : (isInputHovered && viewMode !== 'edit' ? hoverBorder(fp, gs) : baseInput.borderColor),
      transition: 'border-color 0.2s ease-in-out, background-color 0.2s ease-in-out',
    }
    const placeholderText = field.placeholder || defaultPlaceholder(field.type)
    // Font Awesome field icon like the storefront (<i class>, 14px, 12px from the edge) in a 32px click target.
    const renderFieldIcon = (pos, top) => (hasIcon && iconSide === pos ? (
      <span
        ref={iconRef}
        data-field-icon={pos}
        onClick={(e) => {
          if (viewMode === 'edit') {
            e.stopPropagation()
            setIsEditingIcon(true)
          }
        }}
        title={viewMode === 'edit' ? 'Click to customize icon' : undefined}
        className="absolute z-10 flex items-center"
        style={{
          [pos]: 4, width: 32, height: 32, top: top || '50%', transform: top ? undefined : 'translateY(-50%)',
          justifyContent: pos === 'left' ? 'flex-start' : 'flex-end', [pos === 'left' ? 'paddingLeft' : 'paddingRight']: 8,
          cursor: viewMode === 'edit' ? 'pointer' : undefined, pointerEvents: viewMode === 'edit' ? 'auto' : 'none',
        }}
      >
        <i className={field.fieldIcon} style={{ color: field.iconColor || '#6B7280', fontSize: 14 }} />
      </span>
    ) : null)

    if (field.type === 'number' && fp.numberStyle === 'stepper-slider') {
      const lab = labelStyle(fp, gs)
      const stepLabel = (
        <InlineLabelEditor
          field={field}
          mode="label"
          viewMode={viewMode}
          displayStyle={{ display: 'block', color: or(fp.labelTextColor, '#18181B'), fontWeight: 900, fontSize: lab.style.fontSize, letterSpacing: `${gs.letterSpacing}px`, marginBottom: 2, textTransform: 'uppercase', lineHeight: '1rem' }}
          displayText={String(or(fp.label, fp.name, '2. Project Pages / Assets'))}
          asteriskColor="#ef4444"
          onUpdate={(updates) => updateField(field.id, updates)}
          setIsDirty={useFormStore.getState().setIsDirty}
        />
      )
      return (
        <NumberStepperPreview
          field={fp}
          gs={gs}
          label={stepLabel}
          interactive={viewMode === 'preview'}
          value={viewMode === 'preview' ? previewData[pid] : undefined}
          onChange={(n) => setPreviewData({ [pid]: n })}
        />
      )
    }

    // Registered field types draw their own control.
    if (typeDef && typeDef.Canvas) {
      const RegisteredCanvas = typeDef.Canvas
      return (
        <RegisteredCanvas
          field={field}
          fp={fp}
          gs={gs}
          settings={settings}
          fields={fields}
          viewMode={viewMode}
          disabled={disabled}
          isMobile={isMobile}
          previewMode={previewMode}
          previewData={previewData}
          setPreviewData={setPreviewData}
          valueKey={pid}
          inputStyle={inputCommonStyle}
          updateField={updateField}
        />
      )
    }

    switch (field.type) {
      case 'textarea': {
        // The storefront textarea has no icon (the reference builder embed): same here, so icons never shift the text.
        return (
          <div className="relative w-full">
            <textarea
              disabled={disabled}
              className={`w-full py-2 border rounded-lg text-gray-900 text-sm resize-none focus:outline-none transition-colors ${
                hasIcon && iconSide === 'left' ? 'pl-9 pr-3' : hasIcon && iconSide === 'right' ? 'pl-3 pr-9' : 'px-3'
              }`}
              style={{
                ...inputCommonStyle,
                padding: inputStyle(fp, gs).padding,
              }}
              placeholder={placeholderText}
              value={viewMode === 'preview' ? (previewData[pid] || '') : ''}
              onChange={viewMode === 'preview' ? (e) => setPreviewData({ [pid]: e.target.value }) : undefined}
              readOnly={viewMode !== 'preview'}
              onFocus={() => setIsInputFocused(true)}
              onBlur={() => setIsInputFocused(false)}
              onMouseEnter={() => setIsInputHovered(true)}
              onMouseLeave={() => setIsInputHovered(false)}
            />
            {viewMode === 'edit' && isEditingIcon && (
              <InlineIconEditor
                field={field}
                isOpen={isEditingIcon}
                onClose={() => setIsEditingIcon(false)}
                onUpdate={(updates) => updateField(field.id, updates)}
                anchorRef={iconRef}
                setIsDirty={useFormStore.getState().setIsDirty}
              />
            )}
          </div>
        )
      }
      case 'select':
      case 'dropdown': {
        const isMultiSelect = Boolean(field.isMulti ?? field.multiSelect)

        return (
          <div className="relative w-full">
            {renderFieldIcon('left')}
            <select
              disabled={disabled}
              multiple={isMultiSelect && viewMode === 'preview'}
              value={viewMode === 'preview' ? (isMultiSelect ? (Array.isArray(previewData[pid]) ? previewData[pid] : []) : (previewData[pid] || '')) : ''}
              onChange={viewMode === 'preview' ? (e) => setPreviewData({ [pid]: isMultiSelect ? Array.from(e.target.selectedOptions).map((o) => o.value).filter(Boolean) : e.target.value }) : undefined}
              className={`w-full py-2 border rounded-lg text-gray-900 text-sm focus:outline-none transition-colors cursor-pointer`}
              style={inputCommonStyle}
              onFocus={() => setIsInputFocused(true)}
              onBlur={() => setIsInputFocused(false)}
              onMouseEnter={() => setIsInputHovered(true)}
              onMouseLeave={() => setIsInputHovered(false)}
            >
              <option value="">{placeholderText}</option>
              {field.options?.map((opt, idx) => {
                const optVal = getOptionValue(opt)
                const optLabel = getOptionLabel(opt)
                return (
                  <option key={idx} value={optVal}>
                    {optLabel}
                  </option>
                )
              })}
            </select>
            {viewMode === 'edit' && isEditingIcon && (
              <InlineIconEditor
                field={field}
                isOpen={isEditingIcon}
                onClose={() => setIsEditingIcon(false)}
                onUpdate={(updates) => updateField(field.id, updates)}
                anchorRef={iconRef}
                setIsDirty={useFormStore.getState().setIsDirty}
              />
            )}
          </div>
        )
      }
      case 'checkbox': {
        const rawCols = field.checkboxRowColumns || field.choiceColumns || 1
        const cols = rawCols === 'inline' ? 'inline' : (parseInt(rawCols) || 1)
        const style = field.choiceStyle || fp.checkboxStyle || 'standard'
        const containerClass =
          cols === 'inline' || style === 'pill'
            ? 'flex flex-wrap gap-2'
            : cols === 2
            ? 'grid grid-cols-2 gap-2'
            : cols === 3
            ? 'grid grid-cols-3 gap-2'
            : cols === 4
            ? 'grid grid-cols-4 gap-2'
            : cols >= 5
            ? 'grid grid-cols-5 gap-2'
            : 'space-y-1.5'
        // Standard options: the storefront's grid (N columns, 8px gap; one column on phones).
        const groupStyle = cols === 'inline' || style === 'pill'
          ? undefined
          : { display: 'grid', gridTemplateColumns: isMobile ? '1fr' : `repeat(${cols}, minmax(0, 1fr))`, gap: 8 }
        const { selected: choiceSelected, unselected: choiceUnselected } = choiceColors(fp, gs)

        const choiceOptions = (field.options && field.options.length > 0)
          ? field.options
          : [
              { label: 'First Choice', value: 'first_choice' },
              { label: 'Second Choice', value: 'second_choice' },
              { label: 'Third Choice', value: 'third_choice' }
            ]

        return (
          <div className="w-full">
            <div className={groupStyle ? undefined : containerClass} style={groupStyle}>
              {choiceOptions.map((opt, idx) => {
                  const optVal = getOptionValue(opt)
                  const optLabel = getOptionLabel(opt)
                  const optPrice = typeof opt === 'object' && opt?.price !== undefined ? opt.price : null
                  const isChecked = viewMode === 'preview' ? (previewData[pid] || []).includes(optVal) : (Array.isArray(fp.defaultValue) ? fp.defaultValue : []).map(String).includes(String(optVal))

                  if (style === 'pill') {
                    return (
                      <div key={idx} className="relative group/opt inline-flex items-center">
                        <button
                          type="button"
                          disabled={disabled}
                          onClick={
                            viewMode === 'preview'
                              ? () => {
                                  const current = previewData[pid] || []
                                  setPreviewData({
                                    [pid]: isChecked ? current.filter((x) => x !== optVal) : [...current, optVal],
                                  })
                                }
                              : undefined
                          }
                          className={`px-3.5 py-1.5 rounded-full text-xs font-medium border transition-all ${
                            isChecked
                              ? 'bg-gray-900 border-gray-900 text-white shadow-xs'
                              : 'bg-white border-gray-200 text-gray-700 hover:border-gray-400'
                          }`}
                        >
                          {optLabel}
                          {optPrice !== null && <span className="opacity-80 ml-1 font-mono text-emerald-400">(+${optPrice})</span>}
                        </button>
                        {viewMode === 'edit' && choiceOptions.length > 1 && (
                          <button
                            type="button"
                            onClick={(e) => {
                              e.stopPropagation()
                              updateField(field.id, removeOptionUpdates(field, choiceOptions, idx))
                            }}
                            className="opacity-0 group-hover/opt:opacity-100 p-0.5 text-gray-400 hover:text-red-600 rounded transition-opacity cursor-pointer ml-1"
                            title="Remove choice"
                            data-canvas-chrome="true"
                          >
                            <X className="w-3 h-3" />
                          </button>
                        )}
                      </div>
                    )
                  }

                  if (style === 'card') {
                    // Storefront checkbox card (render_checkbox_field, card branch).
                    const toggle = viewMode === 'preview' ? () => {
                      const current = previewData[pid] || []
                      setPreviewData({ [pid]: isChecked ? current.filter((x) => x !== optVal) : [...current, optVal] })
                    } : undefined
                    const o = typeof opt === 'object' && opt ? opt : {}
                    const os = choiceOptionStyle(fp, gs, opt)
                    return (
                      <div key={idx} onClick={toggle} className="relative group/opt"
                        style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '12px 14px', border: `1px solid ${isChecked ? choiceSelected : '#E5E7EB'}`, borderRadius: 10, backgroundColor: isChecked ? 'rgba(255, 247, 237, 0.5)' : '#FFFFFF', boxShadow: isChecked ? `0 0 0 1px ${choiceSelected}` : '0 1px 2px rgba(0,0,0,0.03)', cursor: 'pointer' }}>
                          {viewMode === 'edit' && choiceOptions.length > 1 && (
                            <button type="button" data-canvas-chrome="true" title="Remove choice"
                              onClick={(e) => { e.stopPropagation(); updateField(field.id, removeOptionUpdates(field, choiceOptions, idx)) }}
                              className="absolute -top-2 -right-2 z-10 p-0.5 bg-white border border-gray-200 rounded-full text-gray-400 hover:text-red-600 opacity-0 group-hover/opt:opacity-100 transition-opacity cursor-pointer">
                              <X className="w-3 h-3" />
                            </button>
                          )}
                        <div style={{ display: 'flex', alignItems: 'center', gap: 10, minWidth: 0 }}>
                          <input type="checkbox" disabled={disabled} checked={isChecked} onChange={() => {}} className="wpvfb-choice-box"
                            style={{ '--choice-selected': choiceSelected, '--choice-unselected': choiceUnselected }} />
                          <div style={{ flex: 1, minWidth: 0 }}>
                            {viewMode === 'edit'
                              ? optionEditor(opt, optLabel, idx, choiceOptions, { ...os, lineHeight: 1.3, fontWeight: os.fontWeight || 700, cursor: undefined, display: 'block' }, String(optLabel).replace(/\s*[—–-]\s*[+]?\$[\d,.]+$/, ''))
                              : <div style={{ ...os, lineHeight: 1.3, fontWeight: os.fontWeight || 700, cursor: undefined }}>{String(optLabel).replace(/\s*[—–-]\s*[+]?\$[\d,.]+$/, '')}</div>}
                            {o.description && <p style={{ color: '#6B7280', fontSize: 11, lineHeight: 1.3, margin: '2px 0 0 0', fontWeight: 400 }}>{o.description}</p>}
                          </div>
                        </div>
                        {optPrice !== null && <span style={{ color: choiceSelected, fontWeight: 900, fontSize: 12, whiteSpace: 'nowrap', flexShrink: 0 }}>+${Number(optPrice).toLocaleString()}</span>}
                      </div>
                    )
                  }

                  return (
                    <div key={idx} className="relative flex items-center group/opt">
                      <label className="flex items-center cursor-pointer min-w-0" style={{ gap: 8 }}>
                        <input
                          type="checkbox"
                          disabled={disabled}
                          checked={isChecked}
                          onChange={
                            viewMode === 'preview'
                              ? (e) => {
                                  const current = previewData[pid] || []
                                  setPreviewData({
                                    [pid]: e.target.checked
                                      ? [...current, optVal]
                                      : current.filter((x) => x !== optVal),
                                  })
                                }
                              : undefined
                          }
                          className="wpvfb-choice-box"
                          style={{ '--choice-selected': choiceSelected, '--choice-unselected': choiceUnselected }}
                        />
                        {viewMode === 'edit' ? (
                          <div onClick={(e) => e.stopPropagation()}>
                            <InlineLabelEditor
                              field={optionLabelField(opt, optLabel)}
                              mode="option"
                              viewMode={viewMode}
                              displayStyle={{ ...choiceOptionStyle(fp, gs, opt), display: 'block' }}
                              onSave={(newLabel, formatting) => {
                                const updated = [...(field.options || [])]
                                if (typeof updated[idx] === 'object') {
                                  updated[idx] = { ...updated[idx], label: newLabel, ...formatting }
                                } else {
                                  updated[idx] = { label: newLabel, value: newLabel, ...formatting }
                                }
                                updateField(field.id, { options: updated })
                              }}
                            />
                          </div>
                        ) : (
                          <span style={choiceOptionStyle(fp, gs, opt)}>{optLabel}</span>
                        )}
                      </label>
                      {viewMode === 'edit' && field.options?.length > 1 && (
                        <button
                          type="button"
                          onClick={(e) => {
                            e.stopPropagation()
                            updateField(field.id, removeOptionUpdates(field, field.options, idx))
                          }}
                          className="absolute right-0 top-1/2 -translate-y-1/2 z-40 opacity-0 group-hover/opt:opacity-100 p-1 text-gray-400 hover:text-red-600 rounded transition-opacity cursor-pointer"
                          title="Remove choice"
                            data-canvas-chrome="true"
                        >
                          <X className="w-3 h-3" />
                        </button>
                      )}
                    </div>
                  )
                })}
            </div>

            {/* Inline Add Option & Column Layout Controls (on hover, like the reference builder) */}
            {viewMode === 'edit' && (isHovered || isActive) && (
              <div data-canvas-chrome="true" className="flex items-center gap-2 mt-2 pt-1 border-t border-gray-100">
                <button
                  type="button"
                  onClick={(e) => {
                    e.stopPropagation()
                    const nextIdx = (field.options?.length || 0) + 1
                    updateField(field.id, {
                      options: [...(field.options || []), { label: `Option ${nextIdx}`, value: `option_${nextIdx}` }]
                    })
                  }}
                  className="inline-flex items-center gap-1 px-2.5 py-1 text-xs font-semibold text-gray-700 bg-white border border-gray-200 rounded-lg hover:bg-gray-50 hover:border-gray-900 transition-colors shadow-2xs cursor-pointer"
                >
                  <Plus className="w-3 h-3" />
                  <span>Add Option</span>
                </button>
                <select
                  value={field.checkboxRowColumns ? String(field.checkboxRowColumns) : String(field.choiceColumns || "1")}
                  onChange={(e) => {
                    e.stopPropagation()
                    // the reference builder key (checkboxRowColumns, 1-5) is what the storefront reads; "Inline" stays a canvas-only layout.
                    updateField(field.id, e.target.value === 'inline'
                      ? { choiceColumns: 'inline', checkboxRowColumns: undefined }
                      : { checkboxRowColumns: parseInt(e.target.value) || 1, choiceColumns: undefined })
                  }}
                  className="pl-2 pr-7 py-1 min-w-[104px] text-xs bg-white border border-gray-200 rounded-lg text-gray-700 focus:outline-none focus:border-gray-900 cursor-pointer"
                >
                  <option value="1">1 Column</option>
                  <option value="2">2 Columns</option>
                  <option value="3">3 Columns</option>
                  <option value="4">4 Columns</option>
                  <option value="5">5 Columns</option>
                  <option value="inline">Inline</option>
                </select>
              </div>
            )}
          </div>
        )
      }
      case 'radio': {
        const rawCols = field.radioRowColumns || field.choiceColumns || 1
        const cols = rawCols === 'inline' ? 'inline' : (parseInt(rawCols) || 1)
        const style = field.choiceStyle || (fp.radioStyle === 'pills' ? 'pill' : fp.radioStyle) || 'standard'
        const containerClass =
          cols === 'inline' || style === 'pill'
            ? 'flex flex-wrap gap-2'
            : cols === 2
            ? 'grid grid-cols-2 gap-2'
            : cols === 3
            ? 'grid grid-cols-3 gap-2'
            : cols === 4
            ? 'grid grid-cols-4 gap-2'
            : cols >= 5
            ? 'grid grid-cols-5 gap-2'
            : 'space-y-1.5'
        // Standard options: the storefront's grid (N columns, 8px gap; one column on phones).
        const groupStyle = cols === 'inline' || style === 'pill'
          ? undefined
          : { display: 'grid', gridTemplateColumns: isMobile ? '1fr' : `repeat(${cols}, minmax(0, 1fr))`, gap: 8 }
        const { selected: choiceSelected, unselected: choiceUnselected } = choiceColors(fp, gs)

        const choiceOptions = (field.options && field.options.length > 0)
          ? field.options
          : [
              { label: 'First Choice', value: 'first_choice' },
              { label: 'Second Choice', value: 'second_choice' },
              { label: 'Third Choice', value: 'third_choice' }
            ]

        return (
          <div className="w-full">
            <div className={groupStyle ? undefined : containerClass} style={groupStyle}>
              {choiceOptions.map((opt, idx) => {
                  const optVal = getOptionValue(opt)
                  const optLabel = getOptionLabel(opt)
                  const optPrice = typeof opt === 'object' && opt?.price !== undefined ? opt.price : null
                  const isSelected = viewMode === 'preview' ? previewData[pid] === optVal : (typeof fp.defaultValue === 'string' && fp.defaultValue !== '' && fp.defaultValue === String(optVal))

                  if (style === 'pill') {
                    return (
                      <div key={idx} className="relative group/opt inline-flex items-center">
                        <button
                          type="button"
                          disabled={disabled}
                          onClick={viewMode === 'preview' ? () => setPreviewData({ [pid]: optVal }) : undefined}
                          className={`px-3.5 py-1.5 rounded-full text-xs font-medium border transition-all ${
                            isSelected
                              ? 'bg-gray-900 border-gray-900 text-white shadow-xs'
                              : 'bg-white border-gray-200 text-gray-700 hover:border-gray-400'
                          }`}
                        >
                          {optLabel}
                          {optPrice !== null && <span className="opacity-80 ml-1 font-mono text-emerald-400">(+${optPrice})</span>}
                        </button>
                        {viewMode === 'edit' && field.options.length > 1 && (
                          <button
                            type="button"
                            onClick={(e) => {
                              e.stopPropagation()
                              updateField(field.id, removeOptionUpdates(field, field.options, idx))
                            }}
                            className="opacity-0 group-hover/opt:opacity-100 p-0.5 text-gray-400 hover:text-red-600 rounded transition-opacity cursor-pointer ml-1"
                            title="Remove choice"
                            data-canvas-chrome="true"
                          >
                            <X className="w-3 h-3" />
                          </button>
                        )}
                      </div>
                    )
                  }

                  if (style === 'card') {
                    // Storefront radio card (render_radio_field, card branch; vertical-center layout too).
                    const select = viewMode === 'preview' ? () => setPreviewData({ [pid]: optVal }) : undefined
                    const o = typeof opt === 'object' && opt ? opt : {}
                    const title = String(optLabel).replace(/\s*[—–-]\s*\$[\d,.]+$/, '')
                    const os = choiceOptionStyle(fp, gs, opt)
                    const hasPrice = o.price !== undefined && o.price !== null
                    if (fp.radioCardLayout === 'vertical-center') {
                      return (
                        <div key={idx} onClick={select} className="relative group/opt" style={{ position: 'relative', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'space-between', textAlign: 'center', border: `1.5px solid ${isSelected ? choiceSelected : '#E2E8F0'}`, borderRadius: 16, padding: '16px 12px 14px 12px', cursor: 'pointer', minHeight: 115, backgroundColor: '#FFFFFF', ...(isSelected ? { boxShadow: `0 0 0 1px ${choiceSelected}` } : {}) }}>
                          {viewMode === 'edit' && choiceOptions.length > 1 && (
                            <button type="button" data-canvas-chrome="true" title="Remove choice"
                              onClick={(e) => { e.stopPropagation(); updateField(field.id, removeOptionUpdates(field, choiceOptions, idx)) }}
                              className="absolute -top-2 -right-2 z-10 p-0.5 bg-white border border-gray-200 rounded-full text-gray-400 hover:text-red-600 opacity-0 group-hover/opt:opacity-100 transition-opacity cursor-pointer">
                              <X className="w-3 h-3" />
                            </button>
                          )}
                          {o.badge && <span style={{ position: 'absolute', top: -10, left: '50%', transform: 'translateX(-50%)', whiteSpace: 'nowrap', padding: '2px 10px', fontSize: 9, fontWeight: 900, borderRadius: 9999, textTransform: 'uppercase', letterSpacing: '0.05em', color: '#FFFFFF', backgroundColor: choiceSelected, boxShadow: '0 1px 2px rgba(0,0,0,0.1)' }}>{o.badge}</span>}
                          {viewMode === 'edit' ? optionEditor(opt, optLabel, idx, choiceOptions, { fontSize: 12, fontWeight: 700, color: '#18181B', marginBottom: 2, display: 'block' }, title) : <div style={{ fontSize: 12, fontWeight: 700, color: '#18181B', marginBottom: 2 }}>{title}</div>}
                          {hasPrice && <div style={{ fontSize: 20, fontWeight: 900, color: '#18181B', lineHeight: 1.2, margin: '4px 0 6px 0' }}>${Number(o.price).toLocaleString()}</div>}
                          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', marginTop: 4 }}>
                            <div style={{ width: 16, height: 16, borderRadius: 9999, border: `2px solid ${isSelected ? choiceSelected : '#D4D4D8'}`, backgroundColor: isSelected ? choiceSelected : '#FFFFFF', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                              {isSelected && <div style={{ width: 6, height: 6, borderRadius: 9999, backgroundColor: '#FFFFFF' }} />}
                            </div>
                          </div>
                        </div>
                      )
                    }
                    const fsPx = parseFloat(os.fontSize) || 14
                    return (
                      <div key={idx} onClick={select} className="relative group/opt" style={{ border: `1.5px solid ${isSelected ? choiceSelected : '#E2E8F0'}`, borderRadius: 12, padding: 16, cursor: 'pointer', ...(isSelected ? { boxShadow: `0 0 0 1px ${choiceSelected}` } : {}) }}>
                          {viewMode === 'edit' && choiceOptions.length > 1 && (
                            <button type="button" data-canvas-chrome="true" title="Remove choice"
                              onClick={(e) => { e.stopPropagation(); updateField(field.id, removeOptionUpdates(field, choiceOptions, idx)) }}
                              className="absolute -top-2 -right-2 z-10 p-0.5 bg-white border border-gray-200 rounded-full text-gray-400 hover:text-red-600 opacity-0 group-hover/opt:opacity-100 transition-opacity cursor-pointer">
                              <X className="w-3 h-3" />
                            </button>
                          )}
                        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', width: '100%' }}>
                          {viewMode === 'edit' ? optionEditor(opt, optLabel, idx, choiceOptions, { ...os, cursor: undefined }, title) : <span style={{ ...os, cursor: undefined }}>{title}</span>}
                          <input type="radio" disabled={disabled} name={`radio-${field.id}`} checked={isSelected} onChange={() => {}} className="wpvfb-choice-box" style={{ ...RADIO_INPUT_VARS(gs) }} />
                        </div>
                        {hasPrice && <span style={{ color: choiceSelected, fontWeight: 800, fontSize: fsPx + 2, marginTop: 2, display: 'block' }}>${Number(o.price).toLocaleString(undefined, Number.isInteger(Number(o.price)) ? {} : { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</span>}
                      </div>
                    )
                  }

                  return (
                    <div key={idx} className="relative flex items-center group/opt">
                      <label className="flex items-center cursor-pointer min-w-0" style={{ gap: 8 }}>
                        <input
                          type="radio"
                          disabled={disabled}
                          name={`radio-${field.id}`}
                          checked={isSelected}
                          onChange={viewMode === 'preview' ? () => setPreviewData({ [pid]: optVal }) : undefined}
                          className="wpvfb-choice-box"
                          style={{ ...RADIO_INPUT_VARS(gs) }}
                        />
                        {viewMode === 'edit' ? (
                          <div onClick={(e) => e.stopPropagation()}>
                            <InlineLabelEditor
                              field={optionLabelField(opt, optLabel)}
                              mode="option"
                              viewMode={viewMode}
                              displayStyle={{ ...choiceOptionStyle(fp, gs, opt), display: 'block' }}
                              onSave={(newLabel, formatting) => {
                                const updated = [...(field.options || [])]
                                if (typeof updated[idx] === 'object') {
                                  updated[idx] = { ...updated[idx], label: newLabel, ...formatting }
                                } else {
                                  updated[idx] = { label: newLabel, value: newLabel, ...formatting }
                                }
                                updateField(field.id, { options: updated })
                              }}
                            />
                          </div>
                        ) : (
                          <span style={choiceOptionStyle(fp, gs, opt)}>{optLabel}</span>
                        )}
                      </label>
                      {viewMode === 'edit' && field.options.length > 1 && (
                        <button
                          type="button"
                          onClick={(e) => {
                            e.stopPropagation()
                            updateField(field.id, removeOptionUpdates(field, field.options, idx))
                          }}
                          className="absolute right-0 top-1/2 -translate-y-1/2 z-40 opacity-0 group-hover/opt:opacity-100 p-1 text-gray-400 hover:text-red-600 rounded transition-opacity cursor-pointer"
                          title="Remove choice"
                            data-canvas-chrome="true"
                        >
                          <X className="w-3 h-3" />
                        </button>
                      )}
                    </div>
                  )
                })}
            </div>

            {/* Inline Add Option & Column Layout Controls (on hover, like the reference builder) */}
            {viewMode === 'edit' && (isHovered || isActive) && (
              <div data-canvas-chrome="true" className="flex items-center gap-2 mt-2 pt-1 border-t border-gray-100">
                <button
                  type="button"
                  onClick={(e) => {
                    e.stopPropagation()
                    const nextIdx = (field.options?.length || 0) + 1
                    updateField(field.id, {
                      options: [...(field.options || []), { label: `Option ${nextIdx}`, value: `option_${nextIdx}` }]
                    })
                  }}
                  className="inline-flex items-center gap-1 px-2.5 py-1 text-xs font-semibold text-gray-700 bg-white border border-gray-200 rounded-lg hover:bg-gray-50 hover:border-gray-900 transition-colors shadow-2xs cursor-pointer"
                >
                  <Plus className="w-3 h-3" />
                  <span>Add Option</span>
                </button>
                <select
                  value={field.radioRowColumns ? String(field.radioRowColumns) : String(field.choiceColumns || "1")}
                  onChange={(e) => {
                    e.stopPropagation()
                    // the reference builder key (radioRowColumns, 1-5) is what the storefront reads; "Inline" stays a canvas-only layout.
                    updateField(field.id, e.target.value === 'inline'
                      ? { choiceColumns: 'inline', radioRowColumns: undefined }
                      : { radioRowColumns: parseInt(e.target.value) || 1, choiceColumns: undefined })
                  }}
                  className="pl-2 pr-7 py-1 min-w-[104px] text-xs bg-white border border-gray-200 rounded-lg text-gray-700 focus:outline-none focus:border-gray-900 cursor-pointer"
                >
                  <option value="1">1 Column</option>
                  <option value="2">2 Columns</option>
                  <option value="3">3 Columns</option>
                  <option value="4">4 Columns</option>
                  <option value="5">5 Columns</option>
                  <option value="inline">Inline</option>
                </select>
              </div>
            )}
          </div>
        )
      }
      case 'hidden':
        return (
          <div data-canvas-chrome="true" className="flex items-center gap-2 px-3 py-2 border border-dashed border-slate-200 bg-slate-50/50 rounded-lg text-xs text-slate-400 font-medium select-none w-full">
            <EyeOff className="w-4 h-4 text-slate-400" />
            <span className="font-bold text-slate-500">Hidden Field:</span>
            <span>{field.placeholder || field.defaultValue || '(no default value)'}</span>
          </div>
        )
      case 'time': {
        // render_time_field: HH : MM (: AM/PM in 12-hour format) in a 1fr auto 1fr (1fr) grid, centred text, the
        // field icon 24px to the left of the boxes, subfield placeholders and default values.
        const is12 = or(fp.timeFormat, '12hour') === '12hour'
        const dv = fp.defaultValues || {}
        const width = String(or(fp.width, '100%'))
        const tStyle = {
          ...inputCommonStyle, borderRadius: `${or(gs.inputSettings.borderRadius, 4)}px`, fontFamily: 'inherit',
          color: or(fp.textColor, gs.inputTextColor, gs.primaryTextColor, '#000000'), lineHeight: `${gs.lineHeight}px`,
          padding: '8px', textAlign: 'center', width: '100%',
        }
        const handlers = {
          onFocus: () => setIsInputFocused(true), onBlur: () => setIsInputFocused(false),
          onMouseEnter: () => setIsInputHovered(true), onMouseLeave: () => setIsInputHovered(false),
        }
        return (
          <div className="relative" style={{ width }}>
            {hasIcon && (
              <i className={field.fieldIcon} style={{ position: 'absolute', [iconSide === 'left' ? 'left' : 'right']: 0, top: '50%', transform: 'translateY(-50%)', color: field.iconColor || '#6B7280', zIndex: 10, pointerEvents: 'none', fontSize: 14 }} />
            )}
            <div style={{ display: 'grid', gridTemplateColumns: is12 ? '1fr auto 1fr 1fr' : '1fr auto 1fr', gap: 8, alignItems: 'center', width: hasIcon ? `calc(${width} - 24px)` : width, ...(hasIcon ? { marginLeft: 24 } : {}) }}>
              <input type="number" disabled={disabled} readOnly={viewMode !== 'preview'} className="rounded-md border transition-all" style={tStyle} placeholder={or(fp.subfields?.hour?.placeholder, 'HH')} defaultValue={dv.hour ?? undefined} {...handlers} />
              <span style={{ fontSize: 20, color: tStyle.color, textAlign: 'center' }}>:</span>
              <input type="number" disabled={disabled} readOnly={viewMode !== 'preview'} className="rounded-md border transition-all" style={tStyle} placeholder={or(fp.subfields?.minute?.placeholder, 'MM')} defaultValue={dv.minute ?? undefined} {...handlers} />
              {is12 && (
                <select disabled={disabled} className="rounded-md border transition-all" style={{ ...tStyle, appearance: 'auto', WebkitAppearance: 'menulist', backgroundImage: 'none', maxWidth: 'none' }} defaultValue={or(dv.ampm, '')} {...handlers}>
                  {/* The markup prints "--"; WordPress's content filters publish it as an em dash. */}
                  <option value="">{'\u2014'}</option>
                  <option value="AM">AM</option>
                  <option value="PM">PM</option>
                </select>
              )}
            </div>
          </div>
        )
      }
      case 'date': {
        // Storefront date (render_date_field): MM/DD/YYYY boxes by default (dateInputType date-field), a single
        // picker input (date-picker) or month/day/year selects (date-dropdown). Icon sits left of the boxes.
        const dType = fp.dateInputType || 'date-field'
        const fmt = String(fp.dateFormat || 'mm/dd/yyyy')
        const parts = fmt.replace('mm', 'MM').replace('dd', 'DD').replace('yyyy', 'YYYY').split(/[-/.]/)
        const keyOf = (part) => ({ mm: 'month', dd: 'day' }[part.toLowerCase()] || 'year')
        const dv = fp.defaultValues || {}
        const boxStyle = { ...inputCommonStyle, padding: '8px', width: '100%', borderRadius: `${gs.inputSettings.borderRadius}px`, lineHeight: `${gs.lineHeight}px` }
        const icon = hasIcon ? (
          <i className={field.fieldIcon} style={{ position: 'absolute', [iconSide]: 0, top: '50%', transform: 'translateY(-50%)', color: field.iconColor || '#6B7280', zIndex: 10, pointerEvents: 'none', fontSize: 14 }} />
        ) : null
        if (dType === 'date-picker') {
          return (
            <div className="relative" style={{ width: '100%' }}>
              {hasIcon && <i className={field.fieldIcon} style={{ position: 'absolute', [iconSide]: 12, top: '50%', transform: 'translateY(-50%)', color: field.iconColor || '#6B7280', zIndex: 10, pointerEvents: 'none', fontSize: 14 }} />}
              <input type="text" disabled={disabled} readOnly={viewMode !== 'preview'} className="border"
                style={{ ...boxStyle, ...(hasIcon ? { [iconSide === 'left' ? 'paddingLeft' : 'paddingRight']: 32 } : {}) }}
                placeholder={(field.placeholder && String(field.placeholder).trim()) || fmt}
                value={viewMode === 'preview' ? (previewData[pid] || '') : undefined}
                onChange={viewMode === 'preview' ? (e) => setPreviewData({ [pid]: e.target.value }) : undefined} />
              {fp.datePickerIcon !== 'no-icon' && <i className="fa fa-calendar absolute right-2 top-1/2 -translate-y-1/2 text-gray-500 pointer-events-none" style={{ fontSize: 14 }} />}
            </div>
          )
        }
        if (dType === 'date-dropdown') {
          const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
          return (
            <div className="relative" style={{ width: '100%' }}>
              {icon}
              <div style={{ display: 'flex', gap: 8, ...(hasIcon ? { marginLeft: 24 } : {}) }}>
                {parts.map((part) => {
                  const k = keyOf(part)
                  return (
                    <select key={k} disabled={disabled} className="border" style={boxStyle} defaultValue={dv[k] || ''}>
                      <option value="">{part}</option>
                      {k === 'month' && months.map((m, i) => <option key={m} value={i + 1}>{m}</option>)}
                      {k === 'day' && Array.from({ length: 31 }, (_, i) => <option key={i} value={i + 1}>{i + 1}</option>)}
                    </select>
                  )
                })}
              </div>
            </div>
          )
        }
        return (
          <div className="relative" style={{ width: '100%' }}>
            {icon}
            <div style={{ display: 'flex', gap: 8, ...(hasIcon ? { marginLeft: 24 } : {}) }}>
              {parts.map((part) => {
                const k = keyOf(part)
                return (
                  <input key={k} type="text" disabled={disabled} readOnly={viewMode !== 'preview'} className="border"
                    maxLength={k === 'year' ? 4 : 2} placeholder={part}
                    style={{ ...boxStyle, textAlign: 'center' }}
                    value={viewMode === 'preview' ? ((previewData[pid] || {})[k] || '') : (dv[k] || '')}
                    onChange={viewMode === 'preview' ? (e) => setPreviewData({ [pid]: { ...(previewData[pid] || {}), [k]: e.target.value } }) : () => {}} />
                )
              })}
            </div>
          </div>
        )
      }
      case 'captcha':
        return (
          <div className="flex items-center justify-between border border-gray-200 bg-gray-50/50 p-3 rounded-lg max-w-xs text-gray-600">
            <div className="flex items-center gap-2 text-xs">
              <input type="checkbox" disabled={disabled} className="w-4 h-4 rounded text-gray-900 focus:ring-gray-900" />
              <span className="font-semibold">I'm not a robot</span>
            </div>
            <div className="flex flex-col items-center">
              <Shield className="w-5 h-5 text-emerald-600" />
              <span className="text-[7px] text-gray-400 uppercase font-bold mt-0.5">reCAPTCHA</span>
            </div>
          </div>
        )
      case 'switch': {
        // Storefront switch (render_switch_field): 44×24 track, 20px thumb; "card" style puts the label, description
        // and price inside a bordered card (no field label above it).
        const onValue = fp.switchOnValue || 'on'
        const dvRaw = Array.isArray(fp.defaultValue) ? fp.defaultValue[0] : fp.defaultValue
        const isDefaultOn = dvRaw === 'true' || dvRaw === true || dvRaw === 'on' || (dvRaw !== undefined && dvRaw !== '' && String(dvRaw) === String(onValue))
        const isChecked = viewMode === 'preview' ? Boolean(previewData[pid]) : isDefaultOn
        const onColor = fp.switchOnColor || gs.checkboxSelectedColor || '#2563EB'
        const offColor = fp.switchOffColor || gs.checkboxUnselectedColor || '#D1D5DB'
        const switchToggle = (
          <label className="relative inline-flex items-center cursor-pointer select-none">
            <input
              type="checkbox"
              disabled={disabled}
              checked={isChecked}
              onChange={viewMode === 'preview' ? (e) => setPreviewData({ [pid]: e.target.checked }) : () => {}}
              className="sr-only"
            />
            <span style={{ position: 'relative', display: 'inline-block', width: 44, height: 24, minWidth: 44, borderRadius: 9999, backgroundColor: isChecked ? onColor : offColor, transition: 'background-color 0.2s ease-in-out', flexShrink: 0 }}>
              <span style={{ position: 'absolute', top: 2, left: 0, width: 20, height: 20, background: '#ffffff', borderRadius: 9999, boxShadow: '0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 2px -1px rgba(0, 0, 0, 0.1)', transition: 'transform 0.2s ease-in-out', transform: isChecked ? 'translateX(20px)' : 'translateX(2px)', display: 'block' }} />
            </span>
          </label>
        )

        if (fp.switchStyle === 'card') {
          const lab = labelStyle(fp, gs)
          return (
            <InlineSwitchEditor field={field} viewMode={viewMode} onUpdate={(updates) => updateField(field.id, updates)} setIsDirty={useFormStore.getState().setIsDirty}>
              <div style={{ border: `1.5px solid ${isChecked ? onColor : '#E2E8F0'}`, borderRadius: 12, padding: '14px 16px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, ...(isChecked ? { boxShadow: `0 0 0 1px ${onColor}` } : {}) }}>
                <div style={{ flex: 1 }}>
                  <span style={{ color: lab.style.color, fontSize: lab.style.fontSize, fontWeight: lab.style.fontWeight, fontStyle: lab.style.fontStyle, lineHeight: lab.style.lineHeight, letterSpacing: lab.style.letterSpacing }}>
                    {String(fp.name || 'Switch').replace(/\s*\([+]?\$[\d,.]+\)\s*$/, '')}
                    {fp.required && <>{' '}<span style={{ color: '#ef4444' }}>*</span></>}
                  </span>
                  {field.description && <p style={{ fontSize: 13, color: fp.descriptionColor || gs.descriptionColor, marginTop: 2 }}>{field.description}</p>}
                </div>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8, flexShrink: 0 }}>
                  {fp.switchPrice !== undefined && fp.switchPrice !== null && fp.switchPrice !== '' && <span style={{ color: onColor, fontWeight: 600 }}>+${Number(fp.switchPrice).toLocaleString()}</span>}
                  {switchToggle}
                </div>
              </div>
            </InlineSwitchEditor>
          )
        }

        return (
          <InlineSwitchEditor field={field} viewMode={viewMode} onUpdate={(updates) => updateField(field.id, updates)} setIsDirty={useFormStore.getState().setIsDirty}>
            <div className="flex items-center">{switchToggle}</div>
          </InlineSwitchEditor>
        )
      }
      case 'section': {
        // Storefront section: heading (headingFontSizes[hN], weight 400, heading line-height/letter-spacing), a 1px
        // divider, description above/below. headingLevel (panel) is read when headingFormat is missing.
        const sec = sectionStyle(fp, gs)
        const desc = field.description ? (
          <p style={sec.description} className={gs.descriptionPlacement === 'above' ? 'mb-2' : 'mt-2'}>{field.description}</p>
        ) : null
        return (
          <div data-section-divider={field.dividerStyle || 'solid'}>
            {gs.descriptionPlacement === 'above' && desc}
            {field.labelVisibility !== 'hidden' && (
              <InlineLabelEditor
                field={field}
                mode="heading"
                headingFormat={['h1', 'h2', 'h3', 'h4', 'h5', 'h6'].includes(sec.tag) ? sec.tag : 'h3'}
                viewMode={viewMode}
                displayStyle={sec.heading}
                displayText={labelText(fp, 'Section Heading')}
                onUpdate={(updates) => updateField(field.id, updates)}
                setIsDirty={useFormStore.getState().setIsDirty}
              />
            )}
            <div style={sec.divider} />
            {gs.descriptionPlacement === 'below' && desc}
          </div>
        )
      }
      case 'submit': {
        // Storefront submit button (render_submit_button): alignment wrapper, full width by default, padding
        // 10px 20px, line-height 1.5, weight labelFontWeight (else normal), radius fieldBorderRadius → input radius.
        const sb = submitStyle(fp, gs)
        const submitIcon = field.fieldIcon && field.fieldIcon !== 'none' ? field.fieldIcon : null
        const submitIconPos = field.iconPosition || 'right'
        return (
          <div className="relative group/submit flex items-center" style={sb.justify ? { display: 'flex', justifyContent: sb.justify } : undefined}>
            <button
              ref={submitButtonRef}
              type="button"
              data-prevent-outside-click="true"
              onClick={(e) => {
                e.preventDefault()
                e.stopPropagation()
                if (viewMode === 'preview') {
                  setIsSubmittedInPreview(true)
                } else {
                  setIsEditingSubmitButton(true)
                }
              }}
              className="inline-submit-btn-trigger cursor-pointer hover:opacity-90"
              style={sb.button}
              title={viewMode !== 'preview' ? 'Click to edit submit button style' : 'Click to submit preview'}
            >
              {submitIcon && submitIconPos === 'left' && <i className={submitIcon} style={{ marginRight: 8 }} />}
              {sb.text}
              {submitIcon && submitIconPos === 'right' && <i className={submitIcon} style={{ marginLeft: 8 }} />}
            </button>
            {viewMode !== 'preview' && (
              <InlineSubmitButtonEditor
                isOpen={isEditingSubmitButton}
                anchorRef={submitButtonRef}
                onClose={() => setIsEditingSubmitButton(false)}
                field={field}
                onUpdateField={(updates) => updateField(field.id, updates)}
              />
            )}
          </div>
        )
      }
      case 'static-content': {
        // Storefront static content (render_static_content_field): outer margin (on the field wrapper), a padded
        // box (background/border/radius, pill badges shrink to their text), then the text element.
        const sc = staticContentStyle(fp, gs)
        // Block-level HTML escapes the storefront's <p>/<hN>: it inherits the form text instead of the content style.
        // The escaped blocks become items of the storefront's .flex.flex-col wrapper (margins do not collapse).
        const textStyle = sc.blockContent
          ? { display: 'flex', flexDirection: 'column', margin: 0, padding: 0, overflowWrap: 'normal', fontFamily: sc.text.fontFamily, ...(sc.customFont ? { '--wpvfb-font': sc.text['--wpvfb-font'] } : {}) }
          : sc.text
        if (fp.contentType === 'social-network-icons') {
          const size = fp.socialIconsSize || 24
          return (
            <div className="relative" style={{ padding: sc.box.padding, backgroundColor: sc.box.backgroundColor }}>
              <div style={{ display: 'grid', gridTemplateColumns: `repeat(${fp.socialIconsGridColumns || 3}, 1fr)`, gap: `${fp.socialIconsGridGap ?? 12}px`, alignItems: 'center', width: `${fp.socialIconsGridWidth || 100}%` }}>
                {(fp.selectedSocialIcons || []).filter((id) => SOCIAL_ICONS[id]).map((id) => (
                  <div key={id} style={{ display: 'flex', alignItems: 'center', padding: 0, color: fp.useOriginalColors ? SOCIAL_ICONS[id][1] : (fp.socialIconsColor || '#6B7280') }}>
                    <svg width={size} height={size} fill="currentColor" viewBox="0 0 24 24"><path d={SOCIAL_ICONS[id][0]} /></svg>
                  </div>
                ))}
              </div>
            </div>
          )
        }
        // What the site prints: the author HTML after WordPress's kses/safecss filtering (WPVFB_FP_Renderer::h()).
        const html = ksesPost(field.content || field.placeholder || (viewMode === 'edit' ? 'Click to edit content...' : 'Enter your content here'))
        const textEl = viewMode === 'edit' ? (
          <EditableContent
            elementRef={contentRef}
            onClick={(e) => {
              e.stopPropagation()
              setIsEditingContent(true)
            }}
            html={html}
            onCommit={(next) => {
              updateField(field.id, { content: next })
              useFormStore.getState().setIsDirty?.(true)
            }}
            className="outline-none cursor-text focus:ring-2 focus:ring-gray-900/20 rounded"
            style={textStyle}
          />
        ) : (
          <div style={textStyle} dangerouslySetInnerHTML={{ __html: html }} />
        )
        return (
          <div className="relative" data-static-content={sc.tag} style={sc.isPill ? { display: sc.outer.display, justifyContent: sc.outer.justifyContent, width: '100%' } : undefined}>
            <div className="relative" style={sc.customFont ? { ...sc.box, '--wpvfb-font': sc.text['--wpvfb-font'] } : sc.box} {...(sc.customFont ? { 'data-font-deep': '' } : {})}>
              {sc.isListItem ? (
                <div className="flex items-center" style={{ gap: 8 }}>
                  {sc.listIcon.position === 'left' && <i className={sc.listIcon.className} style={sc.listIcon.style} />}
                  {textEl}
                  {sc.listIcon.position === 'right' && <i className={sc.listIcon.className} style={sc.listIcon.style} />}
                </div>
              ) : textEl}
            </div>
            {viewMode === 'edit' && isEditingContent && (
              <InlineContentEditor
                isOpen={isEditingContent}
                onClose={() => setIsEditingContent(false)}
                field={field}
                onUpdate={(updates) => updateField(field.id, updates)}
                anchorRef={contentRef}
              />
            )}
          </div>
        )
      }
      case 'html': {
        // Rendered like the reference builder: the HTML itself, or the field label + a hint while it is still empty.
        const htmlSource = field.htmlContent || field.content || ''
        return (
          <div className="w-full" data-html-field="true">
            {!htmlSource && field.labelVisibility !== 'hidden' && (
              <label className="block text-sm font-medium mb-2" style={{ color: settings.labelColor || '#374151' }}>
                {field.label || field.name || 'HTML Field'}
              </label>
            )}
            <div
              className="w-full wpvfb-html-content"
              dangerouslySetInnerHTML={{ __html: sanitizeCanvasHtml(ksesPost(htmlSource || '<p>Enter your HTML content</p>')) }}
            />
          </div>
        )
      }
      case 'image': {
        // Storefront image (render_image_field): size preset (medium by default), per-corner radius, border, shadow,
        // background, caption; 16px below; a dashed placeholder when there is no image yet.
        const sizeMap = { small: [50, 50], medium: [200, 200], large: [400, 400], custom: [fp.imageCustomWidth || fp.imageMaxWidth || 200, fp.imageCustomHeight || fp.imageMaxHeight || 200] }
        const isFull = fp.imageSize === 'full'
        const [mw, mh] = isFull ? ['100%', 'none'] : (sizeMap[fp.imageSize || 'medium'] || [undefined, undefined])
        const shadow = { none: 'none', subtle: '0 1px 3px rgba(0, 0, 0, 0.1)', medium: '0 4px 6px rgba(0, 0, 0, 0.1)', strong: '0 10px 15px rgba(0, 0, 0, 0.1)' }[fp.imageBoxShadow || 'none']
        const radius = `${fp.imageBorderRadiusTopLeft || 0}px ${fp.imageBorderRadiusTopRight || 0}px ${fp.imageBorderRadiusBottomRight || 0}px ${fp.imageBorderRadiusBottomLeft || 0}px`
        const bgH = isFull && fp.enableBackgroundHeight && fp.backgroundImageHeight
        const common = { borderRadius: radius, border: `${fp.imageBorderWidth || 0}px solid ${fp.imageBorderColor || 'transparent'}`, boxShadow: shadow, backgroundColor: fp.imageBackgroundColor || 'transparent', display: 'inline-block', verticalAlign: 'baseline' }
        const imgStyle = isFull
          ? { ...common, maxWidth: '100%', maxHeight: bgH ? `${fp.backgroundImageHeight}px` : 'none', width: '100%', height: bgH ? `${fp.backgroundImageHeight}px` : 'auto', objectFit: bgH ? 'cover' : 'contain' }
          : { ...common, maxWidth: `${mw}px`, maxHeight: `${mh}px`, width: 'auto', height: 'auto' }
        const pad = fp.padding && typeof fp.padding === 'object' ? fp.padding : {}
        const src = field.imageUrl || field.url
        return (
          <InlineImageEditor
            field={field}
            viewMode={viewMode}
            onUpdate={(updates) => updateField(field.id, updates)}
            setIsDirty={useFormStore.getState().setIsDirty}
          >
            <div style={{ marginBottom: 16, padding: `${pad.top || 0}px ${pad.right || 0}px ${pad.bottom || 0}px ${pad.left || 0}px` }}>
              <div style={{ textAlign: fp.imageAlignment === 'center' ? 'center' : fp.imageAlignment === 'right' ? 'right' : 'left' }}>
                {src ? (
                  <img src={resolveImageUrl(src)} alt={fp.imageAltText || fp.name || 'Image'} style={imgStyle} />
                ) : (
                  <div style={{ width: isFull ? '100%' : `${mw}px`, height: isFull ? 'auto' : `${mh}px`, border: '2px dashed #D1D5DB', borderRadius: radius, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', backgroundColor: '#F9FAFB', color: '#9CA3AF', fontSize: 14 }}>
                    No image uploaded
                  </div>
                )}
                {fp.imageCaption && (
                  <p style={{ marginTop: 8, fontSize: `${gs.fontSize}px`, lineHeight: `${gs.lineHeight}px`, color: fp.descriptionColor || gs.descriptionColor, textAlign: fp.imageAlignment || 'left' }}>{fp.imageCaption}</p>
                )}
              </div>
            </div>
          </InlineImageEditor>
        )
      }
      case 'name': {
        // Storefront name field: one grid row of the visible subfields (≥ 2 columns), 8px gap, sub-labels below.
        // It stacks on phones (the storefront's max-width:768px rule) — driven by the canvas preview mode, not the
        // admin's viewport.
        const sub = fp.subfields && typeof fp.subfields === 'object' ? fp.subfields : {}
        const visible = (k) => Boolean(sub[k]?.isVisible ?? false)
        const count = Math.max(['prefix', 'first', 'middle', 'last', 'suffix'].filter(visible).length, 2)
        const nameInput = { ...inputCommonStyle, padding: hasIcon ? (iconSide === 'left' ? '8px 8px 8px 32px' : '8px 32px 8px 8px') : '8px', width: '100%', borderRadius: `${gs.inputSettings.borderRadius}px`, lineHeight: `${gs.lineHeight}px` }
        const subLabel = { fontSize: 12, lineHeight: '16px', color: '#6B7280', display: 'block', marginTop: 4 }
        const cell = (key, ph, lbl) => (visible(key) ? (
          <div key={key} className="relative w-full">
            {renderFieldIcon(iconSide, '2px')}
            <input type="text" disabled={disabled} className="w-full border focus:outline-none" style={nameInput} placeholder={sub[key]?.placeholder || ph} readOnly={viewMode !== 'preview'} />
            <span style={subLabel} className="select-none">{sub[key]?.label || lbl}</span>
          </div>
        ) : null)
        return (
          <div className="grid relative w-full" style={{ gridTemplateColumns: isMobile ? '1fr' : `repeat(${count}, minmax(0, 1fr))`, gap: 8, minWidth: 0 }}>
            {visible('prefix') && (
              <div className="relative w-full">
                <select disabled={disabled} className="w-full border focus:outline-none" style={nameInput}>
                  <option value="">{sub.prefix?.placeholder || 'Select Prefix'}</option>
                  {(fp.prefixOptions || []).map((o, i) => <option key={i} value={o.value}>{o.label}</option>)}
                </select>
                <span style={subLabel} className="select-none">{sub.prefix?.label || 'Prefix'}</span>
              </div>
            )}
            {cell('first', 'First Name', 'First')}
            {cell('middle', 'Middle', 'Middle')}
            {cell('last', 'Last Name', 'Last')}
            {cell('suffix', 'Suffix', 'Suffix')}
          </div>
        )
      }
      case 'address': {
        // render_address_field: inputs with the sub-label below (12px gray-600), city/state and zip/country rows,
        // `subfields.*` visibility/label/placeholder, the full country list, the field icon in every input.
        const sf = fp.subfields || {}
        const dvs = fp.defaultValues || {}
        const visible = (k) => !(sf[k] && sf[k].isVisible === false)
        const addrInput = {
          ...inputCommonStyle, width: '100%', lineHeight: `${gs.lineHeight}px`, color: or(fp.textColor, gs.inputTextColor, gs.primaryTextColor, '#000000'),
          borderRadius: `${or(gs.inputSettings.borderRadius, 4)}px`, fontFamily: 'inherit',
          padding: hasIcon ? (iconSide === 'left' ? '8px 8px 8px 32px' : '8px 32px 8px 8px') : '8px',
        }
        const addrSelect = { ...addrInput, appearance: 'auto', WebkitAppearance: 'menulist', backgroundImage: 'none', maxWidth: 'none' }
        const icon = hasIcon ? (
          <i className={field.fieldIcon} style={{ position: 'absolute', [iconSide === 'left' ? 'left' : 'right']: 12, top: '50%', transform: 'translateY(-50%)', color: field.iconColor || '#6B7280', zIndex: 10, pointerEvents: 'none', fontSize: 14 }} />
        ) : null
        const subLabel = (text) => <span style={{ fontSize: 12, lineHeight: '16px', color: '#4B5563', marginTop: 4, display: 'block' }}>{text}</span>
        const sub = (k, def) => (visible(k) ? (
          <div className="flex-1" key={k}>
            <div className="relative w-full">
              {icon}
              <input type="text" disabled={disabled} readOnly={viewMode !== 'preview'} className="w-full border rounded-md transition-all" style={addrInput}
                placeholder={or(sf[k]?.placeholder, def)} defaultValue={or(dvs[k], '')} />
            </div>
            {subLabel(or(sf[k]?.label, def))}
          </div>
        ) : null)
        return (
          <div className="space-y-4">
            {sub('street', 'Street Address')}
            {sub('address2', 'Address Line 2')}
            <div className="flex space-x-2" style={{ width: or(fp.width, '100%') }}>
              {sub('city', 'City')}
              {sub('state', 'State / Province / Region')}
            </div>
            <div className="flex space-x-2" style={{ width: or(fp.width, '100%') }}>
              {sub('zip', 'ZIP / Postal Code')}
              {visible('country') && (
                <div className="flex-1">
                  <div className="relative w-full">
                    {icon}
                    <select disabled={disabled} className="w-full border rounded-md transition-all" style={addrSelect} defaultValue={or(dvs.country, '')}>
                      <option value="">Select Country</option>
                      {COUNTRY_LIST.map((c) => <option key={c} value={c}>{c}</option>)}
                    </select>
                  </div>
                  {subLabel(or(sf.country?.label, 'Country'))}
                </div>
              )}
            </div>
          </div>
        )
      }
      case 'consent':
        return (
          <div className="flex items-start gap-3">
            <input 
              type="checkbox" 
              className="mt-1 w-4 h-4 rounded border-gray-300 text-gray-900 focus:ring-gray-900"
              disabled={disabled}
              checked={viewMode === 'preview' ? (previewData[pid] || false) : false}
              onChange={(e) => viewMode === 'preview' && setPreviewData({ [pid]: e.target.checked })}
            />
            <div className="text-sm text-gray-700 leading-relaxed">
              {renderConsentText(field.consentText || 'I agree to the [Terms of Service](/terms) and [Privacy Policy](/privacy)')}
            </div>
          </div>
        );
      case 'promo-banner':
        return <PromoBannerPreview field={fp} />
      case 'trust-badges':
        return <TrustBadgesPreview field={fp} />
      case 'faq-accordion':
        return (
          <div className="space-y-2">
            {(field.faqItems || [
              { question: 'What is your return policy?', answer: 'You can return items within 30 days.' },
              { question: 'How long does shipping take?', answer: 'Standard shipping takes 5-7 business days.' },
            ]).map((item, idx) => (
              <div key={idx} className="border border-slate-200 rounded-lg overflow-hidden">
                <button
                  type="button"
                  onClick={() => viewMode === 'preview' && setActiveAccordion(activeAccordion === idx ? -1 : idx)}
                  className="w-full px-4 py-3 text-left text-sm font-medium text-slate-700 flex items-center justify-between hover:bg-slate-50 transition-colors"
                >
                  {item.question}
                  <ChevronDown className={`w-4 h-4 transition-transform ${activeAccordion === idx ? 'rotate-180' : ''}`} />
                </button>
                {activeAccordion === idx && <div className="px-4 py-3 text-sm text-slate-600 border-t border-slate-100 bg-slate-50">{item.answer}</div>}
              </div>
            ))}
          </div>
        );
      case 'countdown-banner':
        return <CountdownBannerPreview field={field} />
      default: {
        const val = previewData[pid] || ''
        if (!TEXT_INPUT_TYPES.includes(field.type)) return null
        const charLength = String(val).length
        const isPassword = field.type === 'password'
        const isNumber = field.type === 'number'

        return (
          <div className="w-full space-y-1">
            <div className="relative flex items-center">
              {/* Prefix Icon */}
              {renderFieldIcon('left')}

              {/* Number Prefix Adornment (e.g. $) */}
              {isNumber && field.prefix && (
                <span className="absolute left-3 text-gray-400 font-mono text-xs select-none">
                  {field.prefix}
                </span>
              )}

              <input
                type={isPassword && showPassword ? 'text' : isNumber ? 'number' : field.type === 'email' ? 'email' : isPassword ? 'password' : 'text'}
                disabled={disabled}
                value={viewMode === 'preview' ? val : undefined}
                onChange={viewMode === 'preview' ? (e) => setPreviewData({ [pid]: e.target.value }) : undefined}
                maxLength={field.maxLength || undefined}
                className={`w-full py-2.5 border rounded-lg text-sm focus:outline-none transition-colors ${
                  hasIcon && iconSide === 'left'
                    ? 'pl-9 pr-3'
                    : isNumber && field.prefix
                    ? 'pl-7 pr-3'
                    : 'px-3'
                } ${
                  (hasIcon && iconSide === 'right') || isPassword || (isNumber && field.suffix)
                    ? 'pr-9'
                    : ''
                }`}
                {...(inputCommonStyle['--wpvfb-font'] ? { 'data-font': '' } : {})}
                style={inputCommonStyle}
                placeholder={placeholderText}
                readOnly={viewMode !== 'preview'}
                onFocus={() => setIsInputFocused(true)}
                onBlur={() => setIsInputFocused(false)}
                onMouseEnter={() => setIsInputHovered(true)}
                onMouseLeave={() => setIsInputHovered(false)}
              />

              {/* Suffix Icon */}
              {renderFieldIcon('right')}

              {/* Inline submit arrow inside an email field (newsletter templates), as on the storefront */}
              {field.type === 'email' && (field.buttonPlacement === 'inside' || field.inlineSubmitArrow === true) && (
                <div style={{ position: 'absolute', right: 10, top: '50%', transform: 'translateY(-50%)', display: 'flex', alignItems: 'center', zIndex: 10 }}>
                  <span style={{ padding: 6, display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#4B5563' }}>
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                      <line x1="5" y1="12" x2="19" y2="12" />
                      <polyline points="12 5 19 12 12 19" />
                    </svg>
                  </span>
                </div>
              )}

              {viewMode === 'edit' && isEditingIcon && (
                <InlineIconEditor
                  field={field}
                  isOpen={isEditingIcon}
                  onClose={() => setIsEditingIcon(false)}
                  onUpdate={(updates) => updateField(field.id, updates)}
                  anchorRef={iconRef}
                  setIsDirty={useFormStore.getState().setIsDirty}
                />
              )}

              {/* Number Suffix Adornment (e.g. kg) */}
              {isNumber && field.suffix && (
                <span className="absolute right-3 text-slate-400 font-mono text-xs select-none">
                  {field.suffix}
                </span>
              )}

              {/* Password Eye Toggle */}
              {isPassword && field.showPasswordToggle !== false && (
                <button
                  type="button"
                  tabIndex={-1}
                  onClick={() => setShowPassword(!showPassword)}
                  data-canvas-chrome="true"
                  className="absolute right-3 text-slate-400 hover:text-slate-600 cursor-pointer"
                >
                  {showPassword ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
                </button>
              )}
            </div>

            {/* Character Counter */}
            {field.showCharCount && (
              <div className="text-[10px] text-right text-slate-400">
                {charLength} {field.maxLength ? `/ ${field.maxLength}` : 'chars'}
              </div>
            )}
          </div>
        )
      }
    }
  }

  // A field type this builder doesn't know (and nothing registered): a neutral placeholder. The field and all its
  // settings stay in the form untouched; it can be removed.
  if (!field.isPlaceholder && !typeDef && !BUILTIN_FIELD_TYPES.includes(field.type)) {
    if (viewMode === 'preview') return null
    return (
      <div
        ref={setNodeRef}
        data-field-id={field.id}
        data-unsupported-field={field.type || ''}
        style={style}
        {...attributes}
        {...listeners}
        onClick={(e) => {
          e.stopPropagation()
          setActiveFieldId(field.id)
        }}
        onMouseEnter={() => setIsHovered(true)}
        onMouseLeave={() => setIsHovered(false)}
        className="group relative cursor-grab active:cursor-grabbing select-none"
      >
        <div className={`flex items-center gap-3 px-3 py-2.5 rounded-lg border border-dashed text-xs ${isActive ? 'border-blue-500 bg-blue-50/40' : 'border-gray-300 bg-gray-50'}`}>
          <AlertTriangle className="w-4 h-4 text-gray-400 flex-shrink-0" aria-hidden="true" />
          <div className="flex-1 min-w-0">
            <div className="font-semibold text-gray-700 truncate">{field.label || field.name || 'Field'}</div>
            <div className="text-gray-500">Unsupported field type: {String(field.type || 'unknown')}</div>
          </div>
          <button
            type="button"
            data-canvas-chrome="true"
            data-remove-unsupported="true"
            onPointerDown={(e) => e.stopPropagation()}
            onClick={(e) => {
              e.stopPropagation()
              removeField(field.id)
            }}
            className="inline-flex items-center gap-1 px-2 py-1 rounded-md border border-gray-200 bg-white text-gray-600 hover:text-red-600 hover:border-red-200 cursor-pointer"
          >
            <Trash2 className="w-3.5 h-3.5" aria-hidden="true" />
            <span>Remove</span>
          </button>
        </div>
      </div>
    )
  }

  if (field.isPlaceholder) {
    return (
      <div
        ref={setNodeRef}
        style={style}
        className="p-4 border-2 border-dashed border-blue-400 bg-blue-50/20 rounded-xl flex items-center justify-center min-h-[50px] animate-pulse"
      >
        <span className="text-xs font-bold text-blue-600 uppercase tracking-wider">Drop {field.label} Here</span>
      </div>
    )
  }

  // --- RECURSIVE CONTAINER LAYOUT RENDERING ---
  // Rendered like the storefront (render_grid_field) in both modes; Edit only adds chrome that does not move
  // anything (dashed outline, action bar, empty-column drop hints). A registered container type (containerDef) wraps
  // the grid in its own body (`Body`, receiving renderGrid(instanceIndex)).
  const isRepeated = Boolean(containerDef)
  if (field.type === 'grid' || isRepeated) {
    const colKeys = Object.keys(layoutColumns || { 'col-0': [] })
    const gst = gridStyles(fp, previewMode, (containerDef && containerDef.gridStyleOptions) || {})
    const withUrl = (st) => (st && st.backgroundImage ? { ...st, backgroundImage: st.backgroundImage.replace(/^url\((.*)\)$/, (m, u) => `url("${resolveImageUrl(u.replace(/^["']|["']$/g, ''))}")`) } : st)
    const colStyleAt = (i) => ({ position: 'relative', ...withUrl(gst.columns[i]?.style || {}) })

    const renderGrid = (instIdx) => (
      <div style={withUrl(gst.grid)} data-grid-layout="true">
        {gst.overlay && <div style={gst.overlay} />}
        {colKeys.map((colKey, colIdx) => {
          if (viewMode === 'edit') {
            return (
              <GridColumn
                key={colKey}
                field={field}
                gridId={field.id}
                colKey={colKey}
                colIdx={colIdx}
                colStyle={colStyleAt(colIdx)}
                colOverlay={gst.columns[colIdx]?.overlay}
                nestedList={layoutColumns?.[colKey] || []}
                showAddMenu={showAddMenu}
                setShowAddMenu={setShowAddMenu}
                handleAddNestedField={handleAddNestedField}
                updateField={updateField}
                viewMode={viewMode}
              />
            )
          }
          return (
            <div key={colKey} style={colStyleAt(colIdx)} data-grid-column={`column${colIdx + 1}`}>
              {gst.columns[colIdx]?.overlay && <div style={gst.columns[colIdx].overlay} />}
              <div style={{ position: 'relative', zIndex: gst.columns[colIdx]?.overlay ? 2 : 1 }}>
                {(layoutColumns?.[colKey] || []).map((nestedField) => {
                  if (!shouldFieldBeVisible(nestedField, previewData, fields)) return null
                  return (
                    <FieldInstanceContext.Provider key={`${nestedField.id}_${instIdx}`} value={isRepeated ? instIdx : instanceIndex}>
                      <FormField field={nestedField} isNested={true} />
                    </FieldInstanceContext.Provider>
                  )
                })}
              </div>
            </div>
          )
        })}
      </div>
    )

    let body
    if (isRepeated && containerDef.Body) {
      const ContainerBody = containerDef.Body
      body = (
        <ContainerBody
          field={field}
          fp={fp}
          gs={gs}
          viewMode={viewMode}
          previewMode={previewMode}
          renderGrid={renderGrid}
          updateField={updateField}
        />
      )
    } else {
      body = renderGrid(0)
    }

    if (viewMode === 'preview') {
      return <div style={{ margin: wrapperMargin }}>{body}</div>
    }

    const outlineColor = isActive || hoveredFieldId === field.id || isHovered ? '#3b82f6' : '#cbd5e1'
    return (
      <div
        ref={setNodeRef}
        data-field-id={field.id}
        style={style}
        {...attributes}
        {...listeners}
        onClick={(e) => {
          e.stopPropagation()
          setActiveFieldId(field.id)
        }}
        // The grid's own action bar only while the pointer is on the grid itself, not on one of its fields.
        onMouseMove={(e) => {
          const owner = e.target.closest('[data-field-id]')
          const own = !owner || owner.getAttribute('data-field-id') === field.id
          if (own !== isHovered) setIsHovered(own)
        }}
        onMouseLeave={() => setIsHovered(false)}
        className="group relative cursor-grab active:cursor-grabbing"
      >
        {/* Dashed outline: an overlay, so the grid keeps exactly its storefront layout */}
        <div
          data-canvas-chrome="true"
          className="absolute inset-0 pointer-events-none z-20 rounded"
          style={{ border: `1.5px ${isActive ? 'solid' : 'dashed'} ${outlineColor}` }}
        />
        <FieldActions
          isHovered={isHovered}
          isSelected={isActive}
          field={field}
          viewMode={viewMode}
          isNested={isNested}
          onEdit={() => setActiveFieldId(field.id)}
          onSpacing={() => setIsEditingSpacing(!isEditingSpacing)}
          onDuplicate={() => duplicateField(field.id)}
          onDelete={() => removeField(field.id)}
          spacingBtnRef={spacingBtnRef}
        />
        {isEditingSpacing && (
          <InlineSpacingEditor
            field={field}
            isOpen={isEditingSpacing}
            onClose={() => setIsEditingSpacing(false)}
            onUpdate={(spacingData) => updateField(field.id, spacingData)}
            anchorRef={spacingBtnRef}
          />
        )}
        {body}
      </div>
    )
  }

  // --- UNIFIED FORMFIELD RENDERING (100% PARITY BETWEEN EDIT & PREVIEW) ---
  return (
    <div
      ref={setNodeRef}
      data-field-id={field.id}
      data-ph={noLabel ? undefined : ''}
      style={noLabel ? style : { ...style, '--wpvfb-ph-color': placeholderColor(fp, gs) }}
      {...(viewMode === 'edit' ? attributes : {})}
      {...(viewMode === 'edit' ? listeners : {})}
      onClick={viewMode === 'edit' ? (e) => {
        e.stopPropagation()
        setActiveFieldId(field.id)
      } : undefined}
      onMouseEnter={viewMode === 'edit' ? () => setIsHovered(true) : undefined}
      onMouseLeave={viewMode === 'edit' ? () => setIsHovered(false) : undefined}
      onMouseMove={viewMode === 'edit' ? (e) => {
        if (e.currentTarget.contains(e.target)) setIsHovered(true)
      } : undefined}
      className={`group relative ${
        viewMode === 'edit' ? 'cursor-grab active:cursor-grabbing select-none' : ''
      } transition-all`}
    >
      {/* the reference builder Blue Hover/Active Inset Border */}
      {viewMode === 'edit' && (isHovered || isActive || hoveredFieldId === field.id) && (
        <div
          data-canvas-chrome="true"
          className="absolute inset-0 pointer-events-none z-10 rounded transition-all"
          style={{
            boxShadow: hoveredFieldId === field.id && !isActive ? 'none' : 'inset 0 0 0 1.5px #3b82f6',
            border: hoveredFieldId === field.id && !isActive ? '1.5px dashed #2563eb' : 'none',
          }}
        />
      )}

      {/* the reference builder Field Actions Bar (Inside Top-Right Frame) */}
      {viewMode === 'edit' && (
        <FieldActions
          isHovered={isHovered}
          isSelected={isActive}
          field={field}
          viewMode={viewMode}
          isNested={isNested}
          onEdit={() => setActiveFieldId(field.id)}
          onSpacing={() => setIsEditingSpacing(!isEditingSpacing)}
          onDuplicate={() => duplicateField(field.id)}
          onDelete={() => removeField(field.id)}
          spacingBtnRef={spacingBtnRef}
        />
      )}

      {/* Inline Spacing Editor Popover */}
      {isEditingSpacing && viewMode === 'edit' && (
        <InlineSpacingEditor
          field={field}
          isOpen={isEditingSpacing}
          onClose={() => setIsEditingSpacing(false)}
          onUpdate={(spacingData) => updateField(field.id, spacingData)}
          anchorRef={spacingBtnRef}
        />
      )}

      {/* Resizable Right Handle (the reference builder style) */}
      {(isHovered || isActive) &&
        viewMode === 'edit' &&
        field.type !== 'submit' &&
        field.type !== 'grid' &&
        !containerDef && (
          <div
            data-canvas-chrome="true"
            className="absolute top-1/2 w-6 h-6 flex items-center justify-center cursor-ew-resize select-none z-30"
            style={{
              top: '50%',
              right: '-10px',
              transform: 'translateY(-50%)',
            }}
            onMouseDown={handleResize}
            onPointerDown={(e) => e.stopPropagation()}
            title="Drag to resize field width (12-col grid)"
          >
            <div
              className="w-3 h-3 border border-blue-500 bg-white pointer-events-none"
            />
          </div>
        )}

      {/* Label + description + control, laid out like the storefront: label on top (or in a 130px column when
          labelPlacement is "left", none when "none"), description above or below the control. */}
      {(() => {
        const lab = labelStyle(fp, gs)
        // The address label falls back to the input text colour (render_address_field), not the theme label colour.
        if (field.type === 'address') lab.style = { ...lab.style, color: or(fp.labelTextColor, fp.textColor, gs.inputTextColor, gs.primaryTextColor, '#000000') }
        // Switch cards, steppers and registered types with `ownLabel` draw their own label (and description) like the storefront.
        const isSwitchCard = (field.type === 'switch' && fp.switchStyle === 'card') || (field.type === 'number' && fp.numberStyle === 'stepper-slider') || Boolean(typeDef && typeDef.ownLabel)
        const showLabel = !noLabel && !isSwitchCard && lab.visible && field.showLabel !== false
        const desc = fieldDescriptionStyle(fp, gs)
        const hasDesc = !NO_DESCRIPTION_TYPES.includes(field.type) && !(typeDef && typeDef.noDescription) && !isSwitchCard && Boolean(field.description)
        const descEl = (
          <InlineLabelEditor
            field={field}
            mode="description"
            viewMode={viewMode}
            displayStyle={desc.style}
            onUpdate={(updates) => updateField(field.id, updates)}
            setIsDirty={useFormStore.getState().setIsDirty}
          />
        )
        return (
          // Fields without a label column (image, static content, submit…) are plain blocks on the storefront, so their
          // inner margins collapse with the neighbours; labelled fields sit in flex columns there too.
          <div style={noLabel ? undefined : { ...(lab.left && showLabel ? { display: 'flex', alignItems: 'flex-start', gap: 16, width: '100%' } : { display: 'flex', flexDirection: 'column' }), ...((typeDef && typeDef.wrapperStyle) || {}) }}>
            {showLabel && (() => {
              const labelEl = (
                <InlineLabelEditor
                  field={field}
                  mode="label"
                  viewMode={viewMode}
                  displayStyle={field.type === 'radio' ? radioLabelStyle(fp, gs, lab.style) : typeDef && typeof typeDef.labelStyle === 'function' ? typeDef.labelStyle(lab.style, { fp, gs }) : lab.style}
                  displayText={labelText(fp)}
                  asteriskColor={asteriskColor(fp, gs)}
                  onUpdate={(updates) => updateField(field.id, updates)}
                  setIsDirty={useFormStore.getState().setIsDirty}
                />
              )
              // Radio label helper text ("1-click select") sits at the right end of the label row (render_radio_field).
              if (field.type !== 'radio' || !fp.labelHelperText) return labelEl
              const ls = radioLabelStyle(fp, gs, lab.style)
              return (
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', width: '100%', margin: `${ls.marginTop}px ${ls.marginRight}px ${ls.marginBottom}px ${ls.marginLeft}px` }}>
                  {React.cloneElement(labelEl, { displayStyle: { ...ls, margin: 0 } })}
                  <span style={{ fontSize: 12, fontWeight: 700, color: or(fp.labelHelperColor, fp.radioSelectedColor, gs.checkboxSelectedColor, '#2563EB') }}>{fp.labelHelperText}</span>
                </div>
              )
            })()}
            <div style={noLabel ? undefined : { display: 'flex', flexDirection: 'column', width: '100%', minWidth: 0 }}>
              {hasDesc && desc.placement === 'above' && descEl}
              {/* Input container (Flush, Zero pl-7 indent, Dynamic Theme Styling) */}
              <div 
                className="w-full"
                onMouseDown={viewMode === 'edit' ? (e) => e.stopPropagation() : undefined}
                onTouchStart={viewMode === 'edit' ? (e) => e.stopPropagation() : undefined}
              >
                {/* Placeholder: one click on the placeholder edits it in place (Enter saves, Escape reverts) */}
                <PlaceholderEditOverlay field={field} viewMode={viewMode} onSave={(placeholder) => updateField(field.id, { placeholder })}>
                  {renderInputPreview(viewMode !== 'preview')}
                </PlaceholderEditOverlay>
              </div>
              {hasDesc && desc.placement === 'below' && descEl}
            </div>
          </div>
        )
      })()}
    </div>
  )
}