import React, { useEffect, useState } from 'react'
import {
  DndContext,
  closestCenter,
  pointerWithin,
  KeyboardSensor,
  PointerSensor,
  useSensor,
  useSensors,
  DragOverlay,
} from '@dnd-kit/core'
import {
  arrayMove,
  sortableKeyboardCoordinates,
} from '@dnd-kit/sortable'
import {
  Type, Mail, AlignLeft, ChevronDown, CheckSquare, CircleDot,
  Calendar, Binary, Eye, Pencil, ArrowLeft,
  Plug, Settings, Maximize2, Minimize2,
  ChevronRight, ChevronLeft, Undo2, Redo2, Copy, Check, X, Palette,
  Loader2, AlertCircle
} from 'lucide-react'
import { useFormHistory } from './hooks/useFormHistory'
import useStorefrontFonts from './hooks/useStorefrontFonts'
import FormSwitcher from './components/shell/FormSwitcher'
import ActivePill from './components/shell/ActivePill'
import DeviceSwitcher from './components/shell/DeviceSwitcher'
import SaveButton from './components/shell/SaveButton'
import ZoomDock, { readStoredZoom } from './components/shell/ZoomDock'
import PreviewToolbar from './components/shell/PreviewToolbar'
import LeftRail, { readRailCollapsed } from './components/shell/LeftRail'
import { remapLogicReferences } from './utils/remapLogic'
import { logicPatch, logicValue } from './components/settings/logicKeys'
import { CanvasContext } from './components/canvas/CanvasContext'
import { resolveGlobalSettings, cardStyle, collectFormFonts, loadFormFont } from './utils/resolveFieldStyle'
import Canvas from './components/Canvas'
import ErrorBoundary from './components/ErrorBoundary'
import FieldsPalette from './components/FieldsPalette'
import PropertyEditor from './components/PropertyEditor'
import StylingCustomizer from './components/StylingCustomizer'
import LayersPanel from './components/LayersPanel'
import FloatingIcons from './components/FloatingIcons'
import SettingsDrawer from './components/SettingsDrawer'
import TemplateLoaderDrawer from './components/TemplateLoaderDrawer'
import TemplateGalleryScreen from './components/TemplateGalleryScreen'
import GridInitialColumnModal from './components/GridInitialColumnModal'
import InlineFormBackgroundEditor from './components/InlineFormBackgroundEditor'
import ConditionalLogic from './components/ConditionalLogic'
import { createFieldWithDefaults, getDefaultSettings, hasNestedColumns, useFormStore } from './store/useFormStore'
import { toast } from './store/useToastStore'
import { ToastContainer } from './components/Toast'
import FormsListScreen from './components/FormsListScreen'
import EntriesScreen from './components/EntriesScreen'
import { applyFilters, doAction, getFieldType, Slot, useRegistryVersion } from './extensions/registry'
import { BuilderContext } from './extensions/BuilderContext'
import { getTemplateCatalog } from './extensions/templates'

const ICON_MAP = {
  text: Type,
  email: Mail,
  textarea: AlignLeft,
  number: Binary,
  select: ChevronDown,
  checkbox: CheckSquare,
  radio: CircleDot,
  date: Calendar,
}

// Top-level store keys saved with the form besides fields/settings (see handleSave). Extensions that keep form data
// in their own store keys add them with the `builder.historyKeys` filter (undo/redo, unsaved-changes tracking).
const BASE_HISTORY_KEYS = ['confirmations', 'notifications']
const historyKeys = () => {
  const extra = applyFilters('builder.historyKeys', [])
  return [...BASE_HISTORY_KEYS, ...(Array.isArray(extra) ? extra.filter((k) => !BASE_HISTORY_KEYS.includes(k)) : [])]
}

/** All field ids, including fields nested in container columns (a `columns` array holds definitions, not fields). */
const collectFieldIds = (list) => {
  const ids = []
  ;(list || []).forEach((f) => {
    ids.push(f.id)
    if (hasNestedColumns(f)) {
      Object.values(f.columns).forEach((col) => { ids.push(...collectFieldIds(col)) })
    }
  })
  return ids
}

const buildHistorySnapshot = (state) => {
  const snapshot = { fields: state.fields, settings: state.settings }
  historyKeys().forEach((key) => { snapshot[key] = state[key] })
  return snapshot
}

/**
 * Template import gives every field a new id (idMap: old → new). The field mapping renames top-level fields and
 * their direct column children; this also renames fields nested deeper (a grid inside a grid column). Other id
 * references are renamed by the `template.renameFieldIds` filter; logic references by remapLogicReferences.
 */
function renameNestedFieldIds(fields, idMap) {
  const mapId = (id) => (typeof id === 'string' && idMap[id]) || id
  const walk = (f) => {
    if (!f || typeof f !== 'object') return f
    let next = { ...f }
    if (typeof next.id === 'string' && idMap[next.id]) next.id = idMap[next.id]
    next = applyFilters('template.renameFieldIds', next, mapId, idMap) || next
    if (hasNestedColumns(next)) {
      const columns = {}
      Object.keys(next.columns).forEach((k) => { columns[k] = Array.isArray(next.columns[k]) ? next.columns[k].map(walk) : next.columns[k] })
      next.columns = columns
    }
    return next
  }
  return (fields || []).map(walk)
}

export default function App() {
  const fields = useFormStore((state) => state.fields)
  const setFields = useFormStore((state) => state.setFields)
  const updateField = useFormStore((state) => state.updateField)
  const settings = useFormStore((state) => state.settings)
  const setSettings = useFormStore((state) => state.setSettings)
  const activeFieldId = useFormStore((state) => state.activeFieldId)
  const setActiveFieldId = useFormStore((state) => state.setActiveFieldId)
  const viewMode = useFormStore((state) => state.viewMode)
  const setViewMode = useFormStore((state) => state.setViewMode)
  const dragOverContainer = useFormStore((state) => state.dragOverContainer)
  const dragOverIndex = useFormStore((state) => state.dragOverIndex)
  const setDragOverContainer = useFormStore((state) => state.setDragOverContainer)
  const setDragOverIndex = useFormStore((state) => state.setDragOverIndex)
  const resetDragOver = useFormStore((state) => state.resetDragOver)
  const resetPreview = useFormStore((state) => state.resetPreview)
  const isLogicSidebarOpen = useFormStore((state) => state.isLogicSidebarOpen)
  const setIsLogicSidebarOpen = useFormStore((state) => state.setIsLogicSidebarOpen)
  const confirmations = useFormStore((state) => state.confirmations)
  const notifications = useFormStore((state) => state.notifications)
  const setConfirmations = useFormStore((state) => state.setConfirmations)
  const setNotifications = useFormStore((state) => state.setNotifications)
  // Re-render when extensions register tabs, slots or filters after the first render.
  useRegistryVersion()
  // Incremented by "Restart" in the preview toolbar (canvases that keep their own state remount with it).
  const [previewRestartKey, setPreviewRestartKey] = useState(0)

  const [isLogicClosing, setIsLogicClosing] = useState(false)
  const logicSidebarRef = React.useRef(null)

  /** Field logic drawer: writes the four flat keys only and removes the nested conditionalLogic copy (logicPatch). */
  const writeFieldLogic = (fieldObj, key, value) => {
    // ConditionalLogic calls several setters in one handler (enable + conditions): build each write on the latest
    // stored field, not on the render-time copy, or the second write would undo the first.
    const latest = findFieldPath(useFormStore.getState().fields, fieldObj.id)?.field
    const base = latest ? { ...latest, ...(fieldObj.logicConditions !== latest.logicConditions && key === 'enableConditionalLogic' ? { logicConditions: fieldObj.logicConditions } : {}) } : fieldObj
    const next = logicPatch(base, key, value)
    updateField(fieldObj.id, {
      enableConditionalLogic: next.enableConditionalLogic,
      logicConditions: next.logicConditions,
      logicMatch: next.logicMatch,
      logicAction: next.logicAction,
      conditionalLogic: undefined,
    })
    setIsDirty(true)
  }

  const handleCloseLogicDrawer = () => {
    setIsLogicClosing(true)
    setTimeout(() => {
      setIsLogicSidebarOpen(false)
      setIsLogicClosing(false)
    }, 250)
  }

  useEffect(() => {
    const handleClickOutside = (event) => {
      if (
        isLogicSidebarOpen &&
        logicSidebarRef.current &&
        !logicSidebarRef.current.contains(event.target) &&
        !event.target.closest('aside') &&
        !event.target.closest('[data-testid="conditional-logic-card"]') &&
        !event.target.closest('[data-testid="conditional-logic-switch"]') &&
        !event.target.closest('[data-testid="conditional-logic-gear"]')
      ) {
        handleCloseLogicDrawer()
      }
    }

    document.addEventListener('mousedown', handleClickOutside)
    return () => {
      document.removeEventListener('mousedown', handleClickOutside)
    }
  }, [isLogicSidebarOpen])

  const { canUndo, canRedo, undo, redo, pushState, reset: resetHistory } = useFormHistory({
    onRestore: (snapshot) => applyHistorySnapshot(snapshot),
    enabled: viewMode === 'edit',
  })
  const [isDirty, setIsDirty] = useState(false)
  const isRestoring = React.useRef(false)
  const isInitialLoad = React.useRef(true)

  useEffect(() => {
    const handler = (e) => {
      if (isDirty) {
        e.preventDefault()
        e.returnValue = ''
      }
    }
    window.addEventListener('beforeunload', handler)
    return () => window.removeEventListener('beforeunload', handler)
  }, [isDirty])

  useEffect(() => {
    const unsub = useFormStore.subscribe((state, prevState) => {
      if (isRestoring.current) return
      if (state.viewMode !== 'edit') return

      const fieldsChanged = state.fields !== prevState.fields
      // Every other top-level key that handleSave persists (Submit Actions, extension keys).
      const keys = historyKeys()
      const extraChanged = keys.filter((key) => !BASE_HISTORY_KEYS.includes(key)).some((key) => state[key] !== prevState[key])
      const formKeysChanged = state.settings !== prevState.settings || keys.some((key) => state[key] !== prevState[key])

      if (!fieldsChanged && !formKeysChanged) return

      if (isInitialLoad.current) {
        isInitialLoad.current = false
        return
      }

      setIsDirty(true)

      const prevIds = JSON.stringify(collectFieldIds(prevState.fields))
      const currIds = JSON.stringify(collectFieldIds(state.fields))
      const isStructural = extraChanged || prevIds !== currIds ||
        state.confirmations?.length !== prevState.confirmations?.length ||
        state.notifications?.length !== prevState.notifications?.length
      pushState(buildHistorySnapshot(state), isStructural)
    })
    return unsub
  }, [pushState])

  const applyHistorySnapshot = (snapshot) => {
    if (!snapshot) return
    isRestoring.current = true
    const store = useFormStore.getState()
    setFields(snapshot.fields)
    // History snapshots hold the whole settings object: replace it (a merge would keep keys added later).
    if (snapshot.settings) useFormStore.setState({ settings: snapshot.settings })
    if (snapshot.confirmations) store.setConfirmations(snapshot.confirmations)
    if (snapshot.notifications) store.setNotifications(snapshot.notifications)
    const extra = {}
    historyKeys().filter((key) => !BASE_HISTORY_KEYS.includes(key)).forEach((key) => {
      if (snapshot[key] !== undefined) extra[key] = snapshot[key]
    })
    if (Object.keys(extra).length) useFormStore.setState(extra)
    // The restored form may not contain the selected field any more.
    const current = useFormStore.getState()
    if (current.activeFieldId && !collectFieldIds(snapshot.fields || []).includes(current.activeFieldId)) {
      setActiveFieldId(null)
    }
    doAction('builder.historyRestored', snapshot)
    setIsDirty(true)
    setTimeout(() => { isRestoring.current = false }, 0)
  }

  /** New form opened or created: undo must not reach back into the previous form. */
  const startFreshHistory = () => {
    resetHistory(buildHistorySnapshot(useFormStore.getState()))
  }

  const exitPreviewMode = () => {
    setViewMode('edit')
    resetPreview()
  }

  const handleRestartPreview = () => {
    resetPreview()
    setPreviewRestartKey((k) => k + 1)
    doAction('preview.restart')
    toast.success('Preview restarted')
  }

  useEffect(() => {
    const handleKeyDown = (e) => {
      if (e.key === 'Escape' && viewMode === 'preview') {
        exitPreviewMode()
      }
    }
    window.addEventListener('keydown', handleKeyDown)
    return () => window.removeEventListener('keydown', handleKeyDown)
  }, [viewMode])

  // Screen routing: 'forms' | 'builder' | 'entries'
  const [currentScreen, setCurrentScreen] = useState(() => {
    const params = new URLSearchParams(window.location.search)
    const page = params.get('page')
    const screenParam = params.get('screen')
    
    if (page === 'wpvfb-entries' || screenParam === 'entries') {
      return 'entries'
    }
    if (screenParam === 'builder') {
      return 'builder'
    }
    if (screenParam === 'templates') {
      return 'templates'
    }
    return 'forms'
  })
  const [formsList, setFormsList] = useState([])

  const navigateTo = (screen, id = null) => {
    setCurrentScreen(screen)
    const params = new URLSearchParams(window.location.search)
    params.set('screen', screen)
    if (id) {
      params.set('id', id)
    } else {
      params.delete('id')
    }
    const newUrl = `${window.location.pathname}?${params.toString()}`
    window.history.pushState(null, '', newUrl)
  }

  const navigateToForms = () => {
    setCurrentScreen('forms')
    const params = new URLSearchParams(window.location.search)
    params.delete('screen')
    params.delete('id')
    params.set('page', (typeof wpvfbSettings !== 'undefined' && wpvfbSettings.formsPageSlug) || 'efe-visual-forms')
    const newUrl = `${window.location.pathname}?${params.toString()}`
    window.history.pushState(null, '', newUrl)
    loadFormsList()
  }

  // Form builder state
  const [formId, setFormId] = useState('')
  const [formName, setFormName] = useState('My Form')
  const [tempFormName, setTempFormName] = useState('')

  // Layout States matching the reference builder
  const [previewMode, setPreviewMode] = useState('desktop') // 'desktop' | 'tablet' | 'mobile'
  const canvasContextValue = React.useMemo(() => ({ previewMode }), [previewMode])
  const [previewZoom, setPreviewZoom] = useState(() => readStoredZoom()) // 50% to 200%, remembered by the dock
  const [isLeftRailCollapsed, setIsLeftRailCollapsed] = useState(() => readRailCollapsed())
  // Extra details of the last sidebar tab request (requestSidebarTab(tab, extra)), passed to that tab.
  const [sidebarTabRequest, setSidebarTabRequest] = useState(null)
  const [showFormBackgroundEditor, setShowFormBackgroundEditor] = useState(false)
  const [sidebarTab, setSidebarTab] = useState('elements') // 'elements' | 'theme' | 'layers' | extension tab ids
  const [elementsSubTab, setElementsSubTab] = useState('palette') // 'palette' | 'settings'
  const [isRightSidebarCollapsed, setIsRightSidebarCollapsed] = useState(false)

  // Settings Drawer States
  const [isSettingsDrawerOpen, setIsSettingsDrawerOpen] = useState(false)
  const [activeSettingsTab, setActiveSettingsTab] = useState('Form Settings')

  // Modals
  const [isRenameModalOpen, setIsRenameModalOpen] = useState(false)
  const [isPublishModalOpen, setIsPublishModalOpen] = useState(false)
  const [copiedShortcode, setCopiedShortcode] = useState(false)

  // Templates Drawer
  const [isTemplatesDrawerOpen, setIsTemplatesDrawerOpen] = useState(false)

  // Grid Modal
  const [isGridModalOpen, setIsGridModalOpen] = useState(false)
  const [pendingGridDrop, setPendingGridDrop] = useState(null)

  const [loading, setLoading] = useState(false)
  // Builder canvas: a form is being fetched, or the fetch failed (shown over the canvas with Retry).
  const [formLoading, setFormLoading] = useState(false)
  // True once the open form is on the canvas (loaded, created or failed to load): data-builder-ready for tests.
  const [formReady, setFormReady] = useState(false)
  const [formLoadError, setFormLoadError] = useState(null)
  const [saving, setSaving] = useState(false)
  const [activeDragItem, setActiveDragItem] = useState(null)

  // Header Enhancements
  const [isFormActive, setIsFormActive] = useState(true)
  const [isFullScreen, setIsFullScreen] = useState(false)
  const [publishPulse, setPublishPulse] = useState(false)
  const [adminBarHeight, setAdminBarHeight] = useState(0)

  useEffect(() => {
    const bar = document.getElementById('wpadminbar')
    if (bar) {
      setAdminBarHeight(bar.offsetHeight)
    }
    const handleResize = () => {
      if (bar) setAdminBarHeight(bar.offsetHeight)
    }
    window.addEventListener('resize', handleResize)
    return () => window.removeEventListener('resize', handleResize)
  }, [])

  useEffect(() => {
    const handleFullscreenChange = () => {
      setIsFullScreen(!!document.fullscreenElement)
    }
    document.addEventListener('fullscreenchange', handleFullscreenChange)
    return () => document.removeEventListener('fullscreenchange', handleFullscreenChange)
  }, [])

  // Lock WordPress Admin viewport when inside Builder to prevent window scroll chaining
  useEffect(() => {
    if (currentScreen === 'builder') {
      document.body.classList.add('wpvfb-builder-active')
      document.documentElement.classList.add('wpvfb-builder-active')
    } else {
      document.body.classList.remove('wpvfb-builder-active')
      document.documentElement.classList.remove('wpvfb-builder-active')
    }
    return () => {
      document.body.classList.remove('wpvfb-builder-active')
      document.documentElement.classList.remove('wpvfb-builder-active')
    }
  }, [currentScreen])

  // Innermost droppable under the pointer (a nested field beats its column, a column beats its container,
  // which beats the canvas); closest centre when the pointer is outside every droppable (keyboard drags too).
  const collisionDetection = React.useCallback((args) => {
    const within = pointerWithin(args)
    if (within.length) {
      const area = (c) => {
        const r = args.droppableRects.get(c.id)
        return r ? r.width * r.height : Infinity
      }
      const others = within.filter((c) => c.id !== args.active.id)
      const pool = others.length ? others : within
      return [...pool].sort((a, b) => area(a) - area(b))
    }
    return closestCenter(args)
  }, [])

  const sensors = useSensors(
    useSensor(PointerSensor, {
      activationConstraint: {
        distance: 8,
      },
    }),
    useSensor(KeyboardSensor, {
      coordinateGetter: sortableKeyboardCoordinates,
    })
  )

  // Auto-expand/select settings when a field is selected on canvas, or switch back to palette on deselect
  useEffect(() => {
    if (activeFieldId) {
      setSidebarTab('elements')
      setElementsSubTab('settings')
      setIsRightSidebarCollapsed(false)
    } else {
      setElementsSubTab('palette')
    }
  }, [activeFieldId])

  // Canvas chrome can ask for a sidebar tab (useFormStore requestSidebarTab).
  const sidebarRequest = useFormStore((state) => state.sidebarRequest)
  useEffect(() => {
    if (!sidebarRequest) return
    setSidebarTabRequest(sidebarRequest)
    setSidebarTab(sidebarRequest.tab)
    setIsRightSidebarCollapsed(false)
    useFormStore.getState().clearSidebarRequest()
  }, [sidebarRequest])

  // Google fonts load exactly like on the published form (upright weights only), so canvas text == site text.
  useStorefrontFonts()

  // Click outside to deselect active field matching the reference builder
  useEffect(() => {
    const handleDocumentMouseDown = (e) => {
      // Don't deselect if clicked inside a field, right sidebar, modal, or popover
      if (
        e.target.closest('[data-field-id]') ||
        e.target.closest('aside') ||
        e.target.closest('[role="dialog"]') ||
        e.target.closest('.field-actions') ||
        e.target.closest('[data-prevent-outside-click]') ||
        e.target.closest('[data-testid="conditional-logic-sidebar"]') ||
        e.target.closest('[data-drawer="conditional-logic"]') ||
        e.target.closest('[data-testid="conditional-logic-card"]')
      ) {
        return
      }
      setActiveFieldId(null)
    }

    document.addEventListener('mousedown', handleDocumentMouseDown)
    return () => {
      document.removeEventListener('mousedown', handleDocumentMouseDown)
    }
  }, [setActiveFieldId])

  const loadFormsList = async () => {
    if (typeof wpvfbSettings === 'undefined') return
    setLoading(true)
    try {
      const res = await fetch(`${wpvfbSettings.apiUrl}/forms`, {
        headers: { 'X-WP-Nonce': wpvfbSettings.nonce },
      })
      const data = await res.json()
      setFormsList(data || [])
    } catch (err) {
      console.error('Failed to load forms list:', err)
    } finally {
      setLoading(false)
    }
  }

  useEffect(() => {
    const params = new URLSearchParams(window.location.search)
    const page = params.get('page')
    const screenParam = params.get('screen')
    const idParam = params.get('id')

    if (page === 'wpvfb-entries' || screenParam === 'entries') {
      if (idParam) {
        handleViewEntries(idParam, '')
      } else {
        // Global entries screen listing all forms
        setCurrentScreen('entries')
        loadFormsList()
      }
    } else if (screenParam === 'templates') {
      setCurrentScreen('templates')
    } else if (screenParam === 'builder') {
      if (idParam) {
        handleEditForm(idParam, '')
      } else {
        navigateToForms()
      }
    } else {
      loadFormsList()
    }
  }, [])

  const handleCreateNewForm = () => {
    const newId = crypto.randomUUID()
    setFormId(newId)
    setFormName('New Form')
    setFields([])
    setConfirmations(null)
    setNotifications(null)
    setIsFormActive(true)
    // A new form starts from the default settings (nothing carries over from the form opened before).
    useFormStore.setState({ settings: { ...getDefaultSettings(), inputBgColor: '#ffffff' } })
    useFormStore.setState(applyFilters('form.initialState', {}, { source: 'new' }) || {})
    setViewMode('edit')
    setSidebarTab('elements')
    setElementsSubTab('palette')
    setIsRightSidebarCollapsed(false)
    setFormLoadError(null)
    navigateTo('builder', newId)
    startFreshHistory()
    setFormReady(true)
  }

  const handleEditForm = async (fId, name) => {
    // Loading a form is not an edit: the store subscriber must not mark it dirty or record history.
    isRestoring.current = true
    setFormReady(false)
    setFormId(fId)
    if (name) setFormName(name)
    setLoading(true)
    setFormLoading(true)
    setFormLoadError(null)
    let loaded = false
    try {
      if (typeof wpvfbSettings !== 'undefined') {
        const res = await fetch(`${wpvfbSettings.apiUrl}/forms/${fId}`, {
          headers: { 'X-WP-Nonce': wpvfbSettings.nonce },
        })
        let detail = null
        try {
          detail = await res.json()
        } catch (parseErr) {
          detail = null
        }
        if (!res.ok || !detail || typeof detail !== 'object' || (detail.code && detail.message && !detail.fields)) {
          throw new Error((detail && detail.message) || `The form could not be loaded (HTTP ${res.status}).`)
        }
        if (detail.name) setFormName(detail.name)
        if (detail.fields) setFields(detail.fields)
        setIsFormActive(detail.is_active === undefined ? true : String(detail.is_active) === '1')
        // null for forms saved before 2.9.0: defaults load and the drawers migrate the legacy settings keys.
        setConfirmations(detail.confirmations)
        setNotifications(detail.notifications)
        // The saved settings replace the previous form's (keys this builder doesn't edit are kept as saved).
        useFormStore.setState({ settings: { ...getDefaultSettings(), ...(detail.settings && typeof detail.settings === 'object' ? detail.settings : {}) } })
        useFormStore.setState(applyFilters('form.initialState', {}, { source: 'load', detail }) || {})
      } else {
        useFormStore.setState(applyFilters('form.initialState', {}, { source: 'new' }) || {})
      }
      setViewMode('edit')
      setSidebarTab('elements')
      setElementsSubTab('palette')
      setIsRightSidebarCollapsed(false)
      navigateTo('builder', fId)
      loaded = true
    } catch (err) {
      console.error('Failed to load form details:', err)
      const message = err && err.message ? err.message : 'The form could not be loaded.'
      setFormLoadError(message)
      toast.error(message)
      navigateTo('builder', fId)
    } finally {
      setLoading(false)
      setFormLoading(false)
      if (loaded) startFreshHistory()
      isRestoring.current = false
      isInitialLoad.current = false
      setIsDirty(false)
      setFormReady(true)
    }
  }

  // Entries screen loads its own data; this only routes there (also used from the builder header).
  const handleViewEntries = (fId, name) => {
    if (fId) setFormId(fId)
    if (name) setFormName(name)
    navigateTo('entries', fId || null)
    loadFormsList()
  }

  // Form picked inside the entries screen: keep the URL (and builder target) in sync.
  const handleEntriesFormChange = (fId, name, replace = false) => {
    setFormId(fId)
    if (name) setFormName(name)
    const params = new URLSearchParams(window.location.search)
    params.set('id', fId)
    const newUrl = `${window.location.pathname}?${params.toString()}`
    if (replace) window.history.replaceState(null, '', newUrl)
    else window.history.pushState(null, '', newUrl)
  }

  // handleSave can run from a debounced timer (an extension's auto-save) created by an older render,
  // so it reads the latest form from the store and refs instead of this render's closure.
  const formIdRef = React.useRef(formId)
  formIdRef.current = formId
  const formNameRef = React.useRef(formName)
  formNameRef.current = formName
  const formLoadingRef = React.useRef(formLoading)
  formLoadingRef.current = formLoading
  const formLoadErrorRef = React.useRef(formLoadError)
  formLoadErrorRef.current = formLoadError

  /** Saves the current form. Resolves true on success, false on failure. */
  const handleSave = async () => {
    const latest = useFormStore.getState()
    // Never write the previous form's content over a form that failed to load (or is still loading).
    if (formLoadingRef.current || formLoadErrorRef.current) return false
    if (typeof wpvfbSettings === 'undefined') {
      toast.warning('WordPress REST API not active. Form state printed in console.')
      console.log('Form State:', { id: formIdRef.current, name: formNameRef.current, fields: latest.fields, settings: latest.settings })
      return false
    }

    setSaving(true)
    try {
      const res = await fetch(`${wpvfbSettings.apiUrl}/forms`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'X-WP-Nonce': wpvfbSettings.nonce,
        },
        body: JSON.stringify({
          id: formIdRef.current,
          name: formNameRef.current,
          fields: latest.fields,
          // Extensions that keep form data in their own store keys write it into the settings here.
          settings: applyFilters('form.saveSettings', { ...latest.settings }, latest),
          confirmations: latest.confirmations,
          notifications: latest.notifications,
        }),
      })
      const data = await res.json()
      if (data.success) {
        // Edits made while the request was in flight stay unsaved.
        const now = useFormStore.getState()
        const unchanged = now.fields === latest.fields && now.settings === latest.settings &&
          historyKeys().every((key) => now[key] === latest[key])
        if (unchanged) setIsDirty(false)
        toast.success('Form saved successfully!')
        setPublishPulse(true)
        setTimeout(() => setPublishPulse(false), 3000)
        return true
      }
      toast.error('Failed to save form.')
      return false
    } catch (err) {
      console.error('Failed to save form:', err)
      toast.error('Error saving form.')
      return false
    } finally {
      setSaving(false)
    }
  }

  const originalFieldsRef = React.useRef(null)

  const handleDragStart = (event) => {
    const { active } = event
    setActiveDragItem(active)
    // Store a deep copy of the current fields to allow clean cancellation / rollback
    originalFieldsRef.current = JSON.parse(JSON.stringify(fields))
  }

  const handleConfirmGridColumns = (columnCount) => {
    if (!pendingGridDrop) return

    const { label, targetContainer, index } = pendingGridDrop
    const columns = {}
    for (let i = 0; i < columnCount; i++) {
      columns[`col-${i}`] = []
    }

    const newField = {
      id: crypto.randomUUID(),
      type: 'grid',
      name: label,
      label: label,
      placeholder: '',
      required: false,
      columns: columns,
      conditionalLogic: { enabled: false, match: 'all', action: 'show', rules: [] }
    }

    const updated = insertFieldAtPath(fields, applyFilters('field.create', newField, newField), targetContainer || { type: 'top' }, index)
    setFields(updated)
    setActiveFieldId(newField.id)
    setPendingGridDrop(null)
    setIsGridModalOpen(false)
  }

  /**
   * Where a field lives. Recurses into every container with nested columns (`columns` arrays are definitions and
   * are skipped). For nested fields `gridId` is the direct parent.
   */
  const findFieldPath = (list, id, parent = null) => {
    for (let i = 0; i < list.length; i++) {
      const item = list[i]
      if (item.id === id) {
        return parent
          ? { containerType: 'grid', gridId: parent.gridId, colKey: parent.colKey, index: i, field: item }
          : { containerType: 'top', gridId: null, colKey: null, index: i, field: item }
      }
      if (hasNestedColumns(item)) {
        for (const colKey of Object.keys(item.columns)) {
          const found = findFieldPath(item.columns[colKey] || [], id, { gridId: item.id, colKey })
          if (found) return found
        }
      }
    }
    return null
  }

  const removeFieldById = (list, id) => {
    return list
      .filter(item => item.id !== id)
      .map(item => {
        if (hasNestedColumns(item)) {
          const updatedColumns = {}
          Object.keys(item.columns).forEach(key => {
            updatedColumns[key] = removeFieldById(item.columns[key] || [], id)
          })
          return { ...item, columns: updatedColumns }
        }
        return item
      })
  }

  const insertFieldAtPath = (list, field, targetContainer, index) => {
    if (targetContainer.type === 'top') {
      const newList = [...list]
      if (index !== null && index !== undefined) {
        newList.splice(index, 0, field)
      } else {
        newList.push(field)
      }
      return newList
    } else {
      return list.map(item => {
        if (item.id === targetContainer.gridId && (hasNestedColumns(item) || !item.columns)) {
          const updatedColumns = { ...(item.columns || {}) }
          const colFields = [...(updatedColumns[targetContainer.colKey] || [])]
          if (index !== null && index !== undefined) {
            colFields.splice(index, 0, field)
          } else {
            colFields.push(field)
          }
          updatedColumns[targetContainer.colKey] = colFields
          return { ...item, columns: updatedColumns }
        }
        if (hasNestedColumns(item)) {
          const updatedColumns = {}
          Object.keys(item.columns).forEach(key => {
            updatedColumns[key] = insertFieldAtPath(item.columns[key] || [], field, targetContainer, index)
          })
          return { ...item, columns: updatedColumns }
        }
        return item
      })
    }
  }

  /** GridColumn droppables use the id `${containerId}__${colKey}`; returns null for anything else. */
  const parseColumnDroppableId = (overId, currentFields) => {
    if (typeof overId !== 'string') return null
    const sep = overId.indexOf('__')
    if (sep <= 0) return null
    const gridId = overId.slice(0, sep)
    const colKey = overId.slice(sep + 2)
    const container = findFieldPath(currentFields, gridId)?.field
    if (!container || !hasNestedColumns(container) || !Object.prototype.hasOwnProperty.call(container.columns, colKey)) {
      // Containers without columns yet render one default 'col-0' column.
      if (container && !container.columns && colKey === 'col-0') return { gridId, colKey }
      return null
    }
    return { gridId, colKey }
  }

  const parseTargetContainer = (overId, currentFields) => {
    if (overId === 'canvas-dropzone') {
      return { type: 'top', gridId: null, colKey: null, index: null }
    }

    const column = parseColumnDroppableId(overId, currentFields)
    if (column) return { type: 'grid', gridId: column.gridId, colKey: column.colKey, index: null }

    const path = findFieldPath(currentFields, overId)
    if (path) {
      return {
        type: path.containerType,
        gridId: path.gridId,
        colKey: path.colKey,
        index: path.index
      }
    }

    return { type: 'top', gridId: null, colKey: null, index: null }
  }

  /**
   * Current layout box of a field on the canvas: the live box (drop line included) minus the sortable shift
   * animation (translate), so before/after doesn't flip-flop while neighbours slide.
   */
  const getLayoutRect = (fieldId) => {
    if (typeof document === 'undefined' || typeof fieldId !== 'string') return null
    const el = document.querySelector(`[data-preview-area="true"] [data-field-id="${CSS.escape(fieldId)}"]`)
    if (!el) return null
    const box = el.getBoundingClientRect()
    const t = window.getComputedStyle(el).transform
    let ty = 0
    if (t && t !== 'none') {
      try { ty = new DOMMatrixReadOnly(t).m42 } catch (e) { ty = 0 }
    }
    // The sortable shift is the field's target position while dragging (neighbours make room for the dragged
    // field), so before/after is measured against where the field is drawn; only a shift still animating towards
    // that target (transition running) is ignored.
    const settled = el.getAnimations ? el.getAnimations().length === 0 : true
    return { top: settled ? box.top : box.top - ty, height: box.height }
  }

  /** Pointer position during a drag (pointer/touch), else the centre of the dragged rect (keyboard). */
  const getDragPointerY = (event) => {
    const start = event.activatorEvent
    const startY = start && (typeof start.clientY === 'number' ? start.clientY : start.touches?.[0]?.clientY)
    if (typeof startY === 'number') return startY + (event.delta?.y || 0)
    const r = event.active?.rect?.current?.translated
    return r ? r.top + r.height / 2 : null
  }

  /**
   * Drop target for the current pointer: container + insertion index.
   * dragOverIndex semantics (read by Canvas/GridColumn to draw the drop line):
   * - top level: index into the global `fields` array to insert BEFORE (the line is drawn above the field with
   *   that index); "after the last field of this page" = the next same-page field's index, or fields.length.
   * - container column: index into that column's list (0..n); null = append.
   * Before/after is decided by the pointer against the hovered field's vertical midpoint (the reference builder calculateHoverIndex).
   */
  const computeDropTarget = (event) => {
    const { active, over } = event
    if (!over) return null
    const currentFields = useFormStore.getState().fields
    const targetContainer = parseTargetContainer(over.id, currentFields)

    // the reference builder rules: a grid can go inside a column (a palette grid opens the column-count modal with that column as
    // target); field types registered with `allowInColumns: false` cannot; a container never goes inside itself.
    const activeType = active.data.current?.isPalette ? active.data.current.type : findFieldPath(currentFields, active.id)?.field?.type
    const activeDef = getFieldType(activeType)
    if (activeDef && activeDef.allowInColumns === false && targetContainer.type === 'grid') {
      return { blocked: true, reason: activeDef.columnBlockedMessage || `${activeDef.label || activeType} cannot be added inside a Grid column.` }
    }
    if (!active.data.current?.isPalette && targetContainer.type === 'grid') {
      const activeField = findFieldPath(currentFields, active.id)?.field
      if (activeField && collectFieldIds([activeField]).includes(targetContainer.gridId)) return { blocked: true }
    }

    let index = null
    const overIsField = over.id !== 'canvas-dropzone' && !parseColumnDroppableId(over.id, currentFields)
    if (!overIsField) {
      // Pointer over a container gap (canvas or column): insert before the first child whose midpoint is below it.
      const pointerY = getDragPointerY(event)
      let children = []
      if (targetContainer.type === 'top') {
        // Only the fields drawn on the canvas (an extension may show a subset of the form).
        const shown = applyFilters('canvas.visibleFields', currentFields, useFormStore.getState())
        children = shown.map((f) => ({ id: f.id, index: currentFields.indexOf(f) }))
      } else {
        const container = findFieldPath(currentFields, targetContainer.gridId)?.field
        children = ((container?.columns || {})[targetContainer.colKey] || []).map((f, i) => ({ id: f.id, index: i }))
      }
      if (pointerY !== null && children.length) {
        for (const child of children) {
          if (child.id === active.id) continue
          const rect = getLayoutRect(child.id)
          if (rect && pointerY < rect.top + rect.height / 2) { index = child.index; break }
        }
        if (index === null && targetContainer.type === 'top') index = currentFields.length
      }
    }
    if (overIsField) {
      const path = findFieldPath(currentFields, over.id)
      if (path) {
        const pointerY = getDragPointerY(event)
        // dnd-kit's over.rect is measured at drag start and goes stale once the drop line moves fields.
        const rect = getLayoutRect(over.id) || over.rect
        const after = pointerY !== null && rect ? pointerY > rect.top + rect.height / 2 : false
        if (!after) {
          index = path.index
        } else if (path.containerType === 'top') {
          // After the hovered field = before the next field drawn on the canvas (or at the end).
          const shown = applyFilters('canvas.visibleFields', currentFields, useFormStore.getState())
          let next = currentFields.length
          for (let i = path.index + 1; i < currentFields.length; i++) {
            if (shown.includes(currentFields[i])) { next = i; break }
          }
          index = next
        } else {
          index = path.index + 1
        }
      }
    }
    return { targetContainer, index }
  }

  const sameContainer = (a, b) =>
    !!a && !!b && a.type === b.type && (a.type === 'top' || (a.gridId === b.gridId && a.colKey === b.colKey))

  // Why the current drop position is refused (shown as a notice if the field is released there).
  const blockedDropRef = React.useRef(null)
  const applyDropTarget = (event) => {
    const target = computeDropTarget(event)
    blockedDropRef.current = target && target.blocked ? target.reason || 'blocked' : null
    if (!target || target.blocked) {
      resetDragOver()
      return
    }
    const state = useFormStore.getState()
    if (!sameContainer(state.dragOverContainer, target.targetContainer)) setDragOverContainer(target.targetContainer)
    if (state.dragOverIndex !== target.index) setDragOverIndex(target.index)
  }

  // onDragOver only fires when the hovered droppable changes; onDragMove keeps before/after current while the
  // pointer moves across the same field.
  const onDragOver = (event) => applyDropTarget(event)
  const onDragMove = (event) => applyDropTarget(event)

  const countSubmitFields = (list) => {
    let n = 0
    ;(list || []).forEach((f) => {
      if (f.type === 'submit') n++
      if (hasNestedColumns(f)) Object.values(f.columns).forEach((col) => { n += countSubmitFields(col) })
    })
    return n
  }

  const handleDragEnd = (event) => {
    const { active } = event
    setActiveDragItem(null)
    if (blockedDropRef.current && blockedDropRef.current !== 'blocked') {
      toast.warning(blockedDropRef.current)
    }
    blockedDropRef.current = null
    // Read the drop target from the store: the last onDragMove may not have re-rendered yet.
    const { dragOverContainer, dragOverIndex, fields } = useFormStore.getState()

    // Ensure we have active coordinates to insert or reorder
    if (dragOverContainer) {
      // Case 1: Dragging a palette item
      if (active.data.current?.isPalette) {
        const fieldType = active.data.current.type
        const fieldLabel = active.data.current.label

        // One submit button per form (the reference builder rule).
        if (fieldType === 'submit' && countSubmitFields(fields) > 0) {
          toast.warning('This form already has a Submit button. A form can only have one.')
          resetDragOver()
          originalFieldsRef.current = null
          return
        }

        if (fieldType === 'grid') {
          setPendingGridDrop({
            label: fieldLabel,
            targetContainer: dragOverContainer,
            index: dragOverIndex
          })
          setIsGridModalOpen(true)
          resetDragOver()
          originalFieldsRef.current = null
          return
        }

        // Same defaults as click-to-add (consent text, choices, registered field type defaults, …).
        const newField = createFieldWithDefaults({
          type: fieldType,
          name: fieldLabel,
          ...(['checkbox', 'radio', 'select'].includes(fieldType) ? {
            options: [
              { label: 'First Choice', value: 'first_choice' },
              { label: 'Second Choice', value: 'second_choice' },
              { label: 'Third Choice', value: 'third_choice' }
            ]
          } : {}),
        })

        const updated = insertFieldAtPath(fields, newField, dragOverContainer, dragOverIndex)
        if (findFieldPath(updated, newField.id)) {
          setFields(updated)
          setActiveFieldId(newField.id)
        }
      } else {
        // Case 2: Reordering existing field. dragOverIndex is an insertion index in the original list, so
        // removing the dragged field first shifts later slots of the same container up by one.
        const activePath = findFieldPath(fields, active.id)
        if (activePath) {
          const activeContainer = { type: activePath.containerType, gridId: activePath.gridId, colKey: activePath.colKey }
          let targetIndex = dragOverIndex
          if (sameContainer(activeContainer, dragOverContainer) && dragOverIndex !== null && activePath.index < dragOverIndex) {
            targetIndex = dragOverIndex - 1
          }

          const cleaned = removeFieldById(fields, active.id)
          const updated = insertFieldAtPath(cleaned, activePath.field, dragOverContainer, targetIndex)
          // Never drop the field when the target container vanished (e.g. it was the dragged field itself).
          if (findFieldPath(updated, active.id)) {
            setFields(updated)
          }
        }
      }
    }

    resetDragOver()
    originalFieldsRef.current = null
  }

  const handleDragCancel = () => {
    blockedDropRef.current = null
    setActiveDragItem(null)
    resetDragOver()
    originalFieldsRef.current = null
  }

  const renderDragOverlay = () => {
    if (!activeDragItem) return null

    if (activeDragItem.data.current?.isPalette) {
      const type = activeDragItem.data.current.type
      const label = activeDragItem.data.current.label
      const Icon = ICON_MAP[type] || getFieldType(type)?.icon || Type

      return (
        <div className="flex flex-col items-center justify-center p-3 border-2 border-gray-900 bg-white text-gray-900 rounded-lg shadow-lg w-32 cursor-grabbing select-none opacity-85 z-[1000]">
          <Icon className="w-5 h-5 mb-1.5 text-gray-900" />
          <span className="text-xs font-semibold">{label}</span>
        </div>
      )
    }

    const fieldId = activeDragItem.id
    const path = findFieldPath(fields, fieldId)
    const field = path?.field
    if (!field) return null

    return (
      <div className="p-4 bg-white border-2 border-gray-900 rounded-xl shadow-lg w-[500px] opacity-85 cursor-grabbing z-[1000]">
        <span className="font-semibold text-gray-900 text-sm">{field.label}</span>
      </div>
    )
  }

  const processTemplateData = (template) => {
    const idMap = {}
    ;(template.fields || []).forEach((f) => {
      if (f.id) idMap[f.id] = crypto.randomUUID()
      if (f.columns) {
        Object.values(f.columns).forEach((col) => {
          if (Array.isArray(col)) {
            col.forEach((nf) => {
              if (nf.id) idMap[nf.id] = crypto.randomUUID()
            })
          }
        })
      }
    })

    // Fields nested deeper than one column level get new ids too (grid in a grid column).
    const mapDeep = (list) => (list || []).forEach((f) => {
      if (f && f.id && !idMap[f.id]) idMap[f.id] = crypto.randomUUID()
      if (f && hasNestedColumns(f)) Object.values(f.columns).forEach((col) => { if (Array.isArray(col)) mapDeep(col) })
    })
    mapDeep(template.fields)

    const slugify = (str) =>
      str ? str.toString().toLowerCase().replace(/\s+/g, '-').replace(/[^a-z0-9-]/g, '') : ''

    const initializedFields = remapLogicReferences((template.fields || []).map((field) => {
      let options = field.options || []
      if (options.length > 0 && typeof options[0] === 'string') {
        options = options.map((opt) => ({ label: opt, value: slugify(opt) }))
      } else if (options.length > 0 && typeof options[0] === 'object') {
        options = options.map((opt) => ({ ...opt, value: opt.value || slugify(opt.label) }))
      }

      const newFieldId = idMap[field.id] || crypto.randomUUID()

      const baseField = {
        ...field,
        id: newFieldId,
        type: field.type,
        label: field.label || field.name || '',
        name: field.name || field.label || 'Field',
        // Keep the template width (usually unset = full width): forcing 100% makes fields with side margins overflow.
        width: field.width || undefined,
        required: field.required || false,
        placeholder: field.placeholder || '',
        description: field.description || '',
        options,
        defaultValue: field.defaultValue || '',
        padding: field.padding || { top: 0, right: 0, bottom: 0, left: 0 },
        margin: field.margin || { top: 0, right: 0, bottom: 15, left: 0 },
        labelMargin: field.labelMargin || { top: 0, right: 0, bottom: 10, left: 0 },
        fieldIcon: field.fieldIcon || 'none',
        iconPosition: field.iconPosition || 'left',
        iconColor: field.iconColor || '#6B7280',
        labelVisibility: field.labelVisibility || 'visible',
        fontFamily: field.fontFamily || undefined,
        borderRadius: field.borderRadius !== undefined ? field.borderRadius : undefined,
        inputBorderColor: field.inputBorderColor || undefined,
        inputBackgroundColor: field.inputBackgroundColor || undefined,
        textColor: field.textColor || undefined,
        fontSize: field.fontSize !== undefined ? field.fontSize : undefined,
        conditionalLogic: field.conditionalLogic || { enabled: false, match: 'all', action: 'show', rules: [] },
      }

      if (hasNestedColumns(field)) {
        const initializedColumns = {}
        Object.keys(field.columns).forEach((columnKey) => {
          initializedColumns[columnKey] = (field.columns[columnKey] || []).map((nestedField) => {
            let nestedOptions = nestedField.options || []
            if (nestedOptions.length > 0 && typeof nestedOptions[0] === 'string') {
              nestedOptions = nestedOptions.map((opt) => ({ label: opt, value: slugify(opt) }))
            } else if (nestedOptions.length > 0 && typeof nestedOptions[0] === 'object') {
              nestedOptions = nestedOptions.map((opt) => ({ ...opt, value: opt.value || slugify(opt.label) }))
            }

            const nestedId = idMap[nestedField.id] || crypto.randomUUID()

            const nestedBase = {
              ...nestedField,
              id: nestedId,
              parentFieldId: newFieldId,
              columnKey: columnKey,
              type: nestedField.type,
              name: nestedField.name || nestedField.label,
              label: nestedField.label,
              required: nestedField.required || false,
              placeholder: nestedField.placeholder || '',
              description: nestedField.description || '',
              options: nestedOptions,
              defaultValue: nestedField.defaultValue || '',
              padding: nestedField.padding || { top: 0, right: 0, bottom: 0, left: 0 },
              margin: nestedField.margin || { top: 0, right: 0, bottom: 15, left: 0 },
              labelMargin: nestedField.labelMargin || { top: 0, right: 0, bottom: 10, left: 0 },
              fieldIcon: nestedField.fieldIcon || 'none',
              iconPosition: nestedField.iconPosition || 'left',
              iconColor: nestedField.iconColor || '#6B7280',
              labelVisibility: nestedField.labelVisibility || 'visible',
              fontFamily: nestedField.fontFamily || undefined,
              borderRadius: nestedField.borderRadius !== undefined ? nestedField.borderRadius : undefined,
              inputBorderColor: nestedField.inputBorderColor || undefined,
              inputBackgroundColor: nestedField.inputBackgroundColor || undefined,
              textColor: nestedField.textColor || undefined,
              fontSize: nestedField.fontSize !== undefined ? nestedField.fontSize : undefined,
              conditionalLogic: nestedField.conditionalLogic || { enabled: false, match: 'all', action: 'show', rules: [] },
            }
            return applyFilters('template.processField', nestedBase, { source: nestedField, idMap, template, nested: true })
          })
        })

        const defaultColPadding = { top: 10, right: 10, bottom: 10, left: 10 }
        const fromTemplatePadding = field.columnPaddings || {}
        const columnCount = field.columnCount || applyFilters('template.defaultColumnCount', 2, field)
        const mergedColPaddings = {}
        for (let i = 1; i <= columnCount; i++) {
          const cKey = `column${i}`
          const templateCol = fromTemplatePadding[cKey] || {}
          mergedColPaddings[cKey] = {
            top: templateCol.top ?? defaultColPadding.top,
            right: templateCol.right ?? defaultColPadding.right,
            bottom: templateCol.bottom ?? defaultColPadding.bottom,
            left: templateCol.left ?? defaultColPadding.left,
          }
        }

        if (template.key === 'register-style-16') {
          mergedColPaddings.column1 = {
            top: 140,
            left: 24,
            right: 24,
            bottom: 48,
          }
        }

        return applyFilters('template.processField', {
          ...baseField,
          columnCount: columnCount,
          columnWidths: field.columnWidths || 'equal',
          customColumnWidths: field.customColumnWidths || undefined,
          columns: initializedColumns,
          backgroundColor: field.backgroundColor || 'transparent',
          borderColor: field.borderColor || 'transparent',
          borderWidth: field.borderWidth || 0,
          borderRadius: field.borderRadius || 0,
          columnPaddings: mergedColPaddings,
          columnBackgrounds: field.columnBackgrounds || {},
          columnBorderRadius: field.columnBorderRadius || {},
        }, { source: field, idMap, template, nested: false })
      }

      return applyFilters('template.processField', baseField, { source: field, idMap, template, nested: false })
    }), idMap)

    const styling = template.styling || {}
    const colors = styling.colors || {}
    const globalSettings = styling.globalSettings || {}
    const inputSettings = styling.inputSettings || {}
    const typography = styling.typography || {}

    // Find submit field anywhere (top-level or nested in grid columns)
    const findSubmit = (fList) => {
      for (const f of fList || []) {
        if (f.type === 'submit') return f
        if (f.columns) {
          for (const col of Object.values(f.columns)) {
            if (Array.isArray(col)) {
              const nested = col.find((nf) => nf.type === 'submit')
              if (nested) return nested
            }
          }
        }
      }
      return null
    }
    const submitField = findSubmit(template.fields)

    const submitText = submitField?.label || submitField?.name || globalSettings.submitButtonText || 'Submit'
    const submitAlign = submitField?.align || globalSettings.submitButtonAlignment || globalSettings.submitButtonAlign || 'full'
    const submitBgColor = submitField?.buttonGradient || submitField?.backgroundColor || colors.submitBackgroundColor || colors.primaryColor || '#4f46e5'
    const submitTextColor = submitField?.textColor || colors.submitTextColor || '#ffffff'
    const submitBorderRadius = submitField?.borderRadius !== undefined 
      ? submitField.borderRadius 
      : (submitField?.fieldBorderRadius !== undefined 
        ? submitField.fieldBorderRadius 
        : (globalSettings.submitButtonBorderRadius ?? 8))

    // Dynamically load Google Font if template uses one
    if (typography.fontFamily) {
      loadFormFont(typography.fontFamily)
    }
    // Every field-level font, nested grid fields and description fonts included.
    collectFormFonts(template.fields, {}).forEach((font) => loadFormFont(font))

    // the reference builder: a template without a card radius renders square.
    const formBorderRad = globalSettings.formBorderRadius !== undefined ? globalSettings.formBorderRadius : 0

    const newSettings = applyFilters('template.processSettings', {
      ...settings,
      submitButtonText: submitText,
      submitButtonAlign: submitAlign,
      submitButtonAlignment: submitAlign,
      submitButtonBgColor: submitBgColor,
      submitButtonTextColor: submitTextColor,
      submitButtonBorderRadius: submitBorderRadius,
      submitButtonPaddingY: globalSettings.submitButtonPaddingY ?? 12,
      submitButtonPaddingX: globalSettings.submitButtonPaddingX ?? 24,
      formBgColor: colors.backgroundColor || colors.background || '#ffffff',
      backgroundImageUrl: colors.backgroundImageUrl || undefined,
      bgSize: colors.backgroundImageSize || 'cover',
      bgPosition: colors.backgroundImagePosition || 'center',
      // The renderers read the full key names.
      backgroundImageSize: colors.backgroundImageSize || 'cover',
      backgroundImagePosition: colors.backgroundImagePosition || 'center',
      formWidth: parseInt(String(globalSettings.wrapperMaxWidth || globalSettings.formMaxWidth || '600')) || 600,
      // All four sides (the storefront reads the object; a number still means the same value on every side).
      formPadding: globalSettings.formPadding && typeof globalSettings.formPadding === 'object'
        ? { top: Number(globalSettings.formPadding.top) || 0, right: Number(globalSettings.formPadding.right) || 0, bottom: Number(globalSettings.formPadding.bottom) || 0, left: Number(globalSettings.formPadding.left) || 0 }
        : (typeof globalSettings.formPadding === 'number' ? globalSettings.formPadding : 24),
      wrapperMaxHeight: globalSettings.wrapperMaxHeight || undefined,
      formMaxHeight: globalSettings.wrapperMaxHeight && !['auto', 'none'].includes(globalSettings.wrapperMaxHeight) ? globalSettings.wrapperMaxHeight : undefined,
      backgroundGradient: colors.backgroundGradient || undefined,
      formBorderRadius: formBorderRad,
      borderRadius: formBorderRad,
      formBorderWidth: globalSettings.formBorderWidth !== undefined ? globalSettings.formBorderWidth : 0,
      formBorderColor: globalSettings.formBorderColor || 'transparent',
      formBorderStyle: globalSettings.formBorderStyle || 'solid',
      formBoxShadow: globalSettings.formBoxShadow || globalSettings.previewShadow || undefined,
      labelColor: colors.labelTextColor || colors.labelColor || colors.primaryTextColor || '#374151',
      labelFontSize: typography.labelFontSize || 14,
      labelFontWeight: typography.labelFontWeight || 500,
      inputBgColor: colors.inputBackgroundColor || inputSettings.inputBackgroundColor || '#ffffff',
      inputBorderColor: colors.inputBorderColor || inputSettings.inputBorderColor || '#d1d5db',
      inputBorderWidth: inputSettings.borderWidth !== undefined ? inputSettings.borderWidth : 1,
      inputBorderRadius: inputSettings.borderRadius !== undefined ? inputSettings.borderRadius : 6,
      hoverBorderColor: colors.hoverBorderColor || inputSettings.hoverBorderColor || '#6B7280',
      focusBorderColor: colors.focusBorderColor || inputSettings.focusBorderColor || colors.primaryColor || '#3B82F6',
      inputTextColor: colors.inputTextColor || colors.primaryTextColor || '#111827',
      placeholderTextColor: colors.placeholderTextColor || '#9CA3AF',
      fontFamily: typography.fontFamily || 'Inter',
      fontSize: typography.fontSize || 14,
      lineHeight: typography.lineHeight || 20,
      letterSpacing: typography.letterSpacing || 0,
    }, template, { settings })

    return {
      fields: renameNestedFieldIds(initializedFields, idMap),
      settings: newSettings,
      // Extra store keys an extension restores with the template (applied with useFormStore.setState).
      state: applyFilters('template.processState', {}, template) || {},
    }
  }

  const handleApplyTemplate = (template) => {
    const processed = processTemplateData(template)
    setFields(processed.fields)
    setSettings(processed.settings)
    useFormStore.setState(processed.state)
    doAction('template.applied', template, processed)
    setIsTemplatesDrawerOpen(false)
    toast.success(`Template "${template.name}" loaded successfully!`)
  }

  useEffect(() => {
    // E2E gates read the builder state (selection, clicked column, field keys) and apply templates through these.
    if (window.wpvfbBuilder) {
      window.wpvfbBuilder.applyTemplate = handleApplyTemplate
      window.wpvfbBuilder.store = useFormStore
      Object.defineProperty(window.wpvfbBuilder, 'templates', { configurable: true, get: () => getTemplateCatalog().templates })
    }
  }, [])

  // Load the form font and every field-level font whenever the form changes (template import, form open, edits).
  const formFontsKey = collectFormFonts(fields, settings).join('|')
  useEffect(() => {
    formFontsKey.split('|').filter(Boolean).forEach((font) => loadFormFont(font))
  }, [formFontsKey])

  const handleCreateFormFromTemplate = async ({ name, description, template }) => {
    const newId = crypto.randomUUID()
    setFormId(newId)
    setFormName(name)
    const processed = processTemplateData(template)
    setFields(processed.fields)
    setConfirmations(null)
    setNotifications(null)
    setIsFormActive(true)
    setSettings(processed.settings)
    useFormStore.setState({ ...(applyFilters('form.initialState', {}, { source: 'template', template }) || {}), ...processed.state })
    doAction('template.applied', template, processed)
    setViewMode('edit')
    setSidebarTab('elements')
    setElementsSubTab('palette')
    setIsRightSidebarCollapsed(false)
    setFormLoadError(null)
    navigateTo('builder', newId)
    startFreshHistory()
    setFormReady(true)

    if (typeof wpvfbSettings !== 'undefined') {
      try {
        await fetch(`${wpvfbSettings.apiUrl}/forms`, {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            'X-WP-Nonce': wpvfbSettings.nonce,
          },
          body: JSON.stringify({
            id: newId,
            name: name,
            fields: processed.fields,
            settings: applyFilters('form.saveSettings', { ...useFormStore.getState().settings }, useFormStore.getState()),
          }),
        })
        loadFormsList()
      } catch (err) {
        console.error('Failed to save newly created form to WordPress API:', err)
      }
    }

    toast.success(`Form "${name}" created from template "${template.name}"!`)
  }

  const handleOpenConfirmations = () => {
    setActiveSettingsTab('Submit Actions')
    setIsSettingsDrawerOpen(true)
  }

  // "Start from scratch": an extension may first ask what kind of form to create (it returns true when it handles it).
  const handleStartBlankForm = () => {
    if (applyFilters('builder.startBlankForm', false, builderApi) === true) return
    handleCreateNewForm()
  }

  // Services for components rendered inside the builder (extension slots, tabs and field types): see useBuilder().
  const builderApi = {
    screen: currentScreen,
    formId,
    formName,
    setFormName,
    fields,
    settings,
    viewMode,
    previewMode,
    setPreviewMode,
    previewRestartKey,
    sidebarTab,
    setSidebarTab,
    elementsSubTab,
    setElementsSubTab,
    isRightSidebarCollapsed,
    setIsRightSidebarCollapsed,
    openSidebarTab: (tab) => { setSidebarTab(tab); setIsRightSidebarCollapsed(false) },
    showFieldSettings: (fieldId) => {
      if (fieldId) setActiveFieldId(fieldId)
      setSidebarTab('elements')
      setElementsSubTab('settings')
      setIsRightSidebarCollapsed(false)
    },
    showPalette: () => {
      setActiveFieldId(null)
      setSidebarTab('elements')
      setElementsSubTab('palette')
      setIsRightSidebarCollapsed(false)
    },
    openSettings: (tab) => {
      if (tab) setActiveSettingsTab(tab)
      setIsSettingsDrawerOpen(true)
    },
    openConfirmations: handleOpenConfirmations,
    openTemplates: () => setIsTemplatesDrawerOpen(true),
    openFormStyle: () => setShowFormBackgroundEditor(true),
    save: handleSave,
    saving,
    markDirty: () => setIsDirty(true),
    createNewForm: handleCreateNewForm,
    createFormFromTemplate: handleCreateFormFromTemplate,
    applyTemplate: handleApplyTemplate,
    adminBarHeight,
  }

  // --- SCREEN RENDERING LOGIC ---

  // Extension overlays (modals, drawers) are mounted on every screen; `screen` tells them which one is showing.
  const overlays = <Slot name="builder.overlays" screen={currentScreen} />

  if (currentScreen === 'templates') {
    return (
      <BuilderContext.Provider value={builderApi}>
      <div className="min-h-screen bg-slate-50 wpvfb-builder text-slate-800">
        <ToastContainer />
        <TemplateGalleryScreen
          onBackToForms={navigateToForms}
          onCreateForm={handleCreateFormFromTemplate}
          onCreateBlank={handleStartBlankForm}
        />
        {overlays}
      </div>
      </BuilderContext.Provider>
    )
  }

  if (currentScreen === 'forms') {
    return (
      <BuilderContext.Provider value={builderApi}>
      <div className="bg-slate-50 min-h-screen text-slate-800 wpvfb-builder">
        <ToastContainer />
        <FormsListScreen
          forms={formsList}
          loading={loading}
          onReload={loadFormsList}
          onCreateForm={() => navigateTo('templates')}
          onEditForm={handleEditForm}
          onViewEntries={handleViewEntries}
          onManageEntries={() => handleViewEntries(null, '')}
        />
        {overlays}
      </div>
      </BuilderContext.Provider>
    )
  }

  if (currentScreen === 'entries') {
    return (
      <BuilderContext.Provider value={builderApi}>
      <div className="bg-slate-50 min-h-screen text-slate-800 wpvfb-builder">
        <ToastContainer />
        <EntriesScreen
          forms={formsList}
          formsLoading={loading}
          initialFormId={formId}
          onBack={navigateToForms}
          onEditForm={handleEditForm}
          onFormChange={handleEntriesFormChange}
        />
        {overlays}
      </div>
      </BuilderContext.Provider>
    )
  }

  // Right sidebar tabs (an extension can add, replace or hide tabs; `Component` renders the tab body).
  const sidebarTabs = applyFilters('builder.sidebarTabs', [
    { id: 'elements', label: 'Elements' },
    { id: 'theme', label: 'Theme', Component: StylingCustomizer },
    {
      id: 'layers',
      label: 'Layers',
      Component: function LayersTab() {
        return <LayersPanel onOpenWrapperEditor={() => setShowFormBackgroundEditor(true)} />
      },
    },
  ], builderApi) || []
  // A tab that is not offered (any more) shows Elements.
  const currentSidebarTab = sidebarTabs.find((t) => t.id === sidebarTab) || sidebarTabs.find((t) => t.id === 'elements') || null
  const activeSidebarTab = currentSidebarTab ? currentSidebarTab.id : 'elements'

  // The form card on the canvas: width, inline style and attributes (extensions adjust them with `canvas.frame`).
  const frameFor = (mode) => applyFilters('canvas.frame', {
    maxWidth: `${settings.formWidth || 600}px`,
    style: { ...cardStyle(resolveGlobalSettings(settings), previewMode) },
    attributes: {},
  }, { mode, settings, viewMode, previewMode })

  const renderCanvasBody = (mode) => {
    const custom = applyFilters('builder.canvas', null, { mode, settings, viewMode, previewMode, previewRestartKey })
    if (custom) return custom
    return <CanvasContext.Provider value={canvasContextValue}><Canvas /></CanvasContext.Provider>
  }

  return (
    <BuilderContext.Provider value={builderApi}>
    <div
      className="w-full h-full flex flex-col bg-slate-100 text-slate-800 wpvfb-builder overflow-hidden select-none"
      data-builder-ready={formReady && !formLoading ? 'true' : undefined}
    >
      <ToastContainer />
      {/* 1. Unified Top Header */}
      <header className="h-14 bg-white border-b border-slate-200 flex items-center justify-between px-4 z-40 flex-shrink-0">
        {/* Left Section */}
        <div className="flex items-center gap-3">
          <button
            onClick={() => {
              navigateToForms()
            }}
            className="p-2 hover:bg-slate-100 text-slate-600 rounded-lg transition-colors cursor-pointer"
            title="Back to Forms"
          >
            <ArrowLeft className="w-4 h-4" />
          </button>

          <div className="flex items-center gap-2 min-w-0">
            <FormSwitcher
              forms={(formsList || []).map((f) => ({ id: f.id, name: f.title?.rendered || f.name || 'Untitled' }))}
              currentId={formId}
              currentName={formName}
              onSelect={(id) => {
                if (!id) return
                navigateTo('builder', id)
                handleEditForm(id, '')
              }}
              onRename={() => {
                setTempFormName(formName)
                setIsRenameModalOpen(true)
              }}
            />
          </div>

          {/* Extension controls next to the form name */}
          <Slot name="header.left" />

          <ActivePill
            isActive={isFormActive}
            onToggle={(next) => {
              setIsFormActive(next)
              if (typeof wpvfbSettings === 'undefined' || !formId) return
              return fetch(`${wpvfbSettings.apiUrl}/forms/${formId}/active`, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json', 'X-WP-Nonce': wpvfbSettings.nonce },
                body: JSON.stringify({ active: next }),
              })
                .then((res) => {
                  if (!res.ok) throw new Error(String(res.status))
                  toast.success(next ? 'Form is live again.' : 'Form hidden from your site.')
                })
                .catch(() => {
                  setIsFormActive(!next)
                  toast.error('Save the form first, then change its status.')
                })
            }}
          />

          <div className="h-4 w-px bg-gray-200 mx-1" />

          <button
            onClick={() => handleViewEntries(formId, formName, fields)}
            className="flex items-center gap-1.5 px-3 py-1.5 hover:bg-gray-100 text-gray-600 hover:text-gray-900 rounded-lg text-xs font-semibold transition-colors cursor-pointer"
          >
            <Eye className="w-3.5 h-3.5" />
            <span>Entries</span>
          </button>
        </div>

        {/* Center Section: the reference builder Unified Viewport & Mode Island Capsule */}
        <div className="flex items-center gap-1 bg-gray-100 p-1 rounded-xl border border-gray-200 shadow-xs">
          <DeviceSwitcher value={previewMode === 'mobile' ? 'mobile' : 'desktop'} onChange={setPreviewMode} />

          <div className="w-px h-4 bg-gray-300/80 mx-1" />

          <div className="flex items-center gap-0.5">
            <button
              type="button"
              onClick={() => {
                setViewMode('edit')
                resetPreview()
              }}
              className={`flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-xs font-semibold transition-all cursor-pointer ${
                viewMode === 'edit'
                  ? 'bg-white text-gray-900 shadow-xs font-semibold'
                  : 'text-gray-500 hover:text-gray-900'
              }`}
            >
              <Pencil className="w-3.5 h-3.5" />
              <span>Edit</span>
            </button>
            <button
              type="button"
              onClick={() => {
                setViewMode('preview')
                setActiveFieldId(null)
                resetPreview()
              }}
              className={`flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-xs font-semibold transition-all cursor-pointer ${
                viewMode === 'preview'
                  ? 'bg-emerald-50 text-emerald-800 border border-emerald-300/80 shadow-xs font-semibold'
                  : 'text-gray-500 hover:text-gray-900'
              }`}
            >
              {viewMode === 'preview' ? (
                <span className="w-1.5 h-1.5 rounded-full bg-emerald-500 animate-pulse flex-shrink-0" />
              ) : (
                <Eye className="w-3.5 h-3.5" />
              )}
              <span>Preview</span>
            </button>
          </div>
        </div>

        {/* Right Section: Actions */}
        <div className="flex items-center gap-3">
          <div className="flex items-center gap-0.5 border-r border-gray-200 pr-3">
            <button
              onClick={() => {
                applyHistorySnapshot(undo())
              }}
              disabled={!canUndo || viewMode !== 'edit'}
              className={`p-1.5 rounded-md transition-colors ${canUndo && viewMode === 'edit' ? 'text-gray-600 hover:bg-gray-100 hover:text-gray-900 cursor-pointer' : 'text-gray-300 cursor-not-allowed'}`}
              title="Undo (⌘Z)"
              aria-label="Undo"
            >
              <Undo2 className="w-4 h-4" />
            </button>
            <button
              onClick={() => {
                applyHistorySnapshot(redo())
              }}
              disabled={!canRedo || viewMode !== 'edit'}
              className={`p-1.5 rounded-md transition-colors ${canRedo && viewMode === 'edit' ? 'text-gray-600 hover:bg-gray-100 hover:text-gray-900 cursor-pointer' : 'text-gray-300 cursor-not-allowed'}`}
              title="Redo (⌘⇧Z)"
              aria-label="Redo"
            >
              <Redo2 className="w-4 h-4" />
            </button>
          </div>

          <button
            onClick={() => {
              if (!document.fullscreenElement) {
                document.documentElement.requestFullscreen?.();
                setIsFullScreen(true);
              } else {
                document.exitFullscreen?.();
                setIsFullScreen(false);
              }
            }}
            className="p-1.5 rounded-md text-gray-500 hover:bg-gray-100 hover:text-gray-900 transition-colors"
            title={isFullScreen ? 'Exit Fullscreen' : 'Fullscreen'}
          >
            {isFullScreen ? <Minimize2 className="w-4 h-4" /> : <Maximize2 className="w-4 h-4" />}
          </button>
          
          <SaveButton isDirty={isDirty} saving={saving} disabled={formLoading || !!formLoadError} onSave={handleSave} />
          <button
            onClick={() => setIsPublishModalOpen(true)}
            className={`px-4 py-2 bg-green-600 hover:bg-green-700 text-white text-xs font-semibold rounded-lg transition-all flex items-center gap-1.5 cursor-pointer shadow-sm ${publishPulse ? 'ring-4 ring-green-300/50 animate-pulse' : ''}`}
          >
            <Plug className="w-3.5 h-3.5" />
            <span>Publish</span>
          </button>
        </div>
      </header>

      {/* 2. Main workspace rows */}
      <div className="flex-1 flex overflow-hidden relative">
        <DndContext
          sensors={sensors}
          collisionDetection={collisionDetection}
          onDragStart={handleDragStart}
          onDragOver={onDragOver}
          onDragMove={onDragMove}
          onDragEnd={handleDragEnd}
          onDragCancel={handleDragCancel}
        >
          {/* Left Icon Strip Sidebar */}
          <LeftRail collapsed={isLeftRailCollapsed} onToggle={setIsLeftRailCollapsed} footer="V1.0">
            <FloatingIcons
              collapsed={isLeftRailCollapsed}
              onSettingsItemClick={(tab) => {
                setActiveSettingsTab(tab)
                setIsSettingsDrawerOpen(true)
              }}
              onTemplatesClick={() => {
                setIsTemplatesDrawerOpen(true)
              }}
              onEntriesClick={() => {
                handleViewEntries(formId, formName, fields)
              }}
            />
          </LeftRail>

          {/* Center Canvas Area */}
          <main className={`flex-1 flex flex-col overflow-hidden relative transition-colors duration-200 ${viewMode === 'preview' ? 'bg-[#0f172a]' : 'bg-slate-200'}`}>
            {(formLoading || formLoadError) && (
              <div
                data-form-load-state={formLoading ? 'loading' : 'error'}
                className="absolute inset-0 z-[60] flex items-center justify-center bg-slate-200/80 backdrop-blur-[2px]"
                role={formLoadError && !formLoading ? 'alert' : 'status'}
                aria-live="polite"
              >
                {formLoading ? (
                  <div className="flex flex-col items-center gap-3 text-slate-600">
                    <Loader2 className="w-8 h-8 animate-spin text-gray-900" />
                    <span className="text-xs font-semibold">Loading form…</span>
                  </div>
                ) : (
                  <div className="max-w-sm mx-4 p-6 bg-white rounded-2xl shadow-xl border border-slate-200 text-center">
                    <div className="w-10 h-10 rounded-full bg-rose-50 text-rose-600 mx-auto flex items-center justify-center mb-3">
                      <AlertCircle className="w-5 h-5" />
                    </div>
                    <h5 className="text-sm font-bold text-slate-900 mb-1">This form could not be loaded</h5>
                    <p className="text-xs text-slate-500 mb-4 break-words">{formLoadError}</p>
                    <div className="flex items-center justify-center gap-2">
                      <button
                        type="button"
                        onClick={() => handleEditForm(formId, '')}
                        className="px-4 py-2 bg-gray-900 hover:bg-black text-white text-xs font-bold rounded-lg shadow-sm transition-colors cursor-pointer"
                      >
                        Retry
                      </button>
                      <button
                        type="button"
                        onClick={() => { setFormLoadError(null); navigateToForms() }}
                        className="px-4 py-2 bg-white hover:bg-slate-50 text-slate-700 border border-slate-200 text-xs font-bold rounded-lg transition-colors cursor-pointer"
                      >
                        Back to Forms
                      </button>
                    </div>
                  </div>
                )}
              </div>
            )}

            {/* Droppable Canvas Wrapper */}
            <div 
              className="flex-1 overflow-auto p-8 pb-36 wpvfb-canvas-scroll-container flex justify-center items-start"
              onClick={(e) => {
                if (!e.target.closest('[data-field-id]') && !e.target.closest('aside')) {
                  setActiveFieldId(null)
                }
              }}
            >
              <div
                className={`${
                  previewMode === 'mobile'
                    ? 'max-w-[400px] w-full min-h-[720px] max-h-[85vh] bg-white rounded-[42px] shadow-2xl border-[10px] border-slate-800 ring-2 ring-slate-700/50 overflow-y-auto relative mx-auto my-auto p-4 sm:p-6'
                    : previewMode === 'tablet'
                    ? 'max-w-[768px] w-full mx-auto'
                    : 'max-w-full w-full mx-auto'
                } relative transition-all duration-300 ease-in-out`}
                style={{
                  transform: previewZoom !== 1.0 && viewMode !== 'preview' ? `scale(${previewZoom})` : undefined,
                  transformOrigin: 'top center',
                }}
              >
                {/* Mobile Device Speaker / Dynamic Island */}
                {previewMode === 'mobile' && (
                  <div className="flex justify-center mb-4 select-none">
                    <div className="w-24 h-4 bg-slate-800 rounded-full flex items-center justify-end px-2 gap-1 shadow-inner">
                      <div className="w-1.5 h-1.5 rounded-full bg-slate-950" />
                    </div>
                  </div>
                )}

                {/* Form Container Wrapper with the pill anchor (Form Style + extension buttons) */}
                {(() => {
                  const replaced = applyFilters('canvas.replace', null, { mode: 'edit', settings, viewMode, previewMode })
                  if (replaced) return replaced
                  const frame = frameFor('edit')

                  return (
                    <>
                    {/* Extension content above the card (edit canvas only) */}
                    <Slot name="canvas.above" mode="edit" />
                    <div
                      className="relative mx-auto"
                      style={{
                        width: '100%',
                        maxWidth: frame.maxWidth,
                      }}
                    >
                      {/* Extension layers behind / around the card */}
                      <Slot name="canvas.around" mode="edit" />

                      {/* Floating Pill Anchor (Form Style + extension buttons) */}
                      {viewMode !== 'preview' && (
                        <div className="absolute -top-9 left-0 z-30 flex items-center p-0.5 bg-white/95 backdrop-blur-xs border border-slate-200/90 rounded-lg shadow-sm gap-1">
                          <div className="absolute top-full left-0 right-0 h-3 pointer-events-auto" aria-hidden="true" />
                          <button
                            type="button"
                            onClick={(e) => {
                              e.stopPropagation()
                              setShowFormBackgroundEditor(!showFormBackgroundEditor)
                            }}
                            className={`flex items-center gap-1.5 px-2.5 py-1 rounded-md text-xs font-medium transition-all cursor-pointer ${
                              showFormBackgroundEditor
                                ? 'bg-gray-100 text-gray-900 font-semibold shadow-2xs ring-1 ring-gray-900/20'
                                : 'text-gray-600 hover:text-gray-900 hover:bg-gray-100'
                            }`}
                            title="Customize form background, border, corner radius & shadow"
                          >
                            <Palette className="w-3.5 h-3.5 flex-shrink-0 text-gray-900" />
                            <span className="text-[11px] font-semibold">Form Style</span>
                          </button>

                          <Slot name="canvas.pill" />
                        </div>
                      )}

                      {/* Inline Form Background & Dimensions Popover */}
                      {showFormBackgroundEditor && (
                        <InlineFormBackgroundEditor
                          isOpen={showFormBackgroundEditor}
                          onClose={() => setShowFormBackgroundEditor(false)}
                        />
                      )}

                      {/* Form Container */}
                      <div
                        data-preview-area="true"
                        {...frame.attributes}
                        onClick={(e) => {
                          if (!e.target.closest('[data-field-id]')) {
                            setActiveFieldId(null)
                          }
                        }}
                        className="relative transition-all duration-300 mx-auto group hover:ring-2 hover:ring-gray-400/50 z-10"
                        style={{
                          fontFamily: settings.fontFamily ? `"${settings.fontFamily}", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif` : 'inherit',
                          // The storefront card (.wpvfb-form): background/gradient, 4-side padding (mobile caps the
                          // sides at 24px), radius (0 by default), border and shadow resolved like the renderer.
                          ...frame.style,
                        }}
                      >
                        {/* Extension controls on the card */}
                        <Slot name="canvas.card" mode="edit" />

                        {/* Design Edit Gear Icon - displays on hover matching the reference builder */}
                        {viewMode !== 'preview' && (
                          <div data-canvas-chrome="true" className="absolute top-2.5 left-2.5 opacity-0 group-hover:opacity-100 transition-all duration-200 z-30 pointer-events-auto">
                            <button
                              type="button"
                              onClick={(e) => {
                                e.stopPropagation()
                                setSidebarTab('theme')
                                setIsRightSidebarCollapsed(false)
                              }}
                              title="Edit Form Design"
                              className="w-7 h-7 bg-gray-900 hover:bg-black text-white rounded-lg flex items-center justify-center shadow-md hover:shadow-lg hover:scale-105 active:scale-95 transition-all cursor-pointer"
                            >
                              <Settings className="w-3.5 h-3.5" />
                            </button>
                          </div>
                        )}

                        <ErrorBoundary>
                          {renderCanvasBody('edit')}
                        </ErrorBoundary>
                      </div>
                    </div>
                    </>
                  )
                })()}

                {/* Mobile Device Home Indicator Bar */}
                {previewMode === 'mobile' && (
                  <div className="flex justify-center mt-6 select-none">
                    <div className="w-32 h-1 bg-slate-300 rounded-full" />
                  </div>
                )}
              </div>
            </div>

            {/* Zoom dock (50–200 %, remembered) */}
            {viewMode !== 'preview' && (
              <ZoomDock
                zoom={previewZoom}
                onZoomChange={setPreviewZoom}
                className={`fixed bottom-6 transition-all duration-300 ${isRightSidebarCollapsed ? 'right-4' : 'right-[356px]'}`}
              />
            )}
          </main>

          {/* Right Sidebar Collapsible Panel */}
          <aside
            className={`flex flex-col border-l border-slate-200 bg-white transition-all duration-300 relative z-20 flex-shrink-0 ${
              isRightSidebarCollapsed ? 'w-0 border-l-0 overflow-hidden' : 'w-[340px]'
            }`}
          >
            {/* Collapse button on left edge of sidebar */}
            <button
              onClick={() => setIsRightSidebarCollapsed(true)}
              className="absolute top-1/2 -left-6 -translate-y-1/2 w-6 h-12 bg-white border border-r-0 border-slate-200 rounded-l-lg flex items-center justify-center text-slate-400 hover:text-slate-700 hover:bg-slate-50 transition-colors shadow-xs cursor-pointer z-30"
              title="Collapse Panel"
            >
              <ChevronRight className="w-4 h-4" />
            </button>

            {/* Main Tabs Header */}
            <div className="flex bg-slate-50 border-b border-gray-200 text-xs font-semibold text-gray-500">
              {sidebarTabs.map((tab) => (
                <button
                  key={tab.id}
                  type="button"
                  data-testid={tab.testId || `sidebar-tab-${tab.id}`}
                  onClick={() => setSidebarTab(tab.id)}
                  className={`flex-1 py-3 text-center border-b-2 transition-all cursor-pointer ${
                    activeSidebarTab === tab.id
                      ? 'border-gray-900 bg-white text-gray-900 font-bold'
                      : 'border-transparent hover:text-gray-900 hover:bg-gray-100/50'
                  }`}
                >
                  {tab.label}
                </button>
              ))}
            </div>

            {/* Tab content panel */}
            <div className="flex-1 overflow-y-auto">
              {activeSidebarTab === 'elements' && (
                <div className="flex flex-col h-full">
                  {/* Secondary Tab Switcher if field is active */}
                  {activeFieldId && (
                    <div className="flex bg-slate-50/50 border-b border-gray-100 text-[11px] font-bold text-gray-400">
                      <button
                        onClick={() => setElementsSubTab('palette')}
                        className={`flex-1 py-2 text-center border-b-2 transition-all cursor-pointer ${
                          elementsSubTab === 'palette'
                            ? 'border-gray-900 text-gray-900 bg-white font-bold'
                            : 'border-transparent hover:text-gray-900'
                        }`}
                      >
                        Add Fields
                      </button>
                      <button
                        onClick={() => setElementsSubTab('settings')}
                        className={`flex-1 py-2 text-center border-b-2 transition-all cursor-pointer ${
                          elementsSubTab === 'settings'
                            ? 'border-gray-900 text-gray-900 bg-white font-bold'
                            : 'border-transparent hover:text-gray-900'
                        }`}
                      >
                        Field Settings
                      </button>
                    </div>
                  )}

                  <div className="flex-1">
                    {(!activeFieldId || elementsSubTab === 'palette') ? (
                      <FieldsPalette />
                    ) : (
                      <PropertyEditor />
                    )}
                  </div>
                </div>
              )}

              {activeSidebarTab !== 'elements' && currentSidebarTab && currentSidebarTab.Component && (
                <currentSidebarTab.Component request={sidebarTabRequest && sidebarTabRequest.tab === activeSidebarTab ? sidebarTabRequest : null} />
              )}
            </div>
          </aside>

          {/* Expand sidebar button when collapsed */}
          {isRightSidebarCollapsed && (
            <button
              onClick={() => setIsRightSidebarCollapsed(false)}
              className="absolute top-1/2 right-0 -translate-y-1/2 w-6 h-12 bg-white border border-r-0 border-slate-200 rounded-l-lg flex items-center justify-center text-slate-400 hover:text-slate-700 hover:bg-slate-50 transition-colors shadow-sm cursor-pointer z-30"
              title="Expand Panel"
            >
              <ChevronLeft className="w-4 h-4" />
            </button>
          )}

          {/* Drag Overlay visual wrapper */}
          <DragOverlay dropAnimation={null}>
            {renderDragOverlay()}
          </DragOverlay>
        </DndContext>
      </div>

      {/* 3. Sliding Settings Drawer */}
      <SettingsDrawer
        isVisible={isSettingsDrawerOpen}
        onClose={() => setIsSettingsDrawerOpen(false)}
        activeTab={activeSettingsTab}
        setActiveTab={setActiveSettingsTab}
        formName={formName}
        setFormName={setFormName}
        onSave={handleSave}
      />

      {/* Rename Form Modal */}
      {isRenameModalOpen && (
        <div className="fixed inset-0 bg-black/40 backdrop-blur-xs flex items-center justify-center z-[2000] p-4">
          <div className="bg-white p-5 rounded-2xl shadow-xl w-full max-w-sm border border-slate-100 space-y-4 animate-scaleUp">
            <div>
              <h3 className="text-sm font-bold text-slate-800">Rename Form</h3>
              <p className="text-[11px] text-slate-400">Provide a new administration label for this form.</p>
            </div>
            <input
              type="text"
              value={tempFormName}
              onChange={(e) => setTempFormName(e.target.value)}
              className="w-full px-3 py-2 border border-slate-200 rounded-lg text-xs focus:outline-none focus:border-gray-900 font-medium"
              placeholder="e.g. Contact Form"
              autoFocus
            />
            <div className="flex justify-end gap-2 text-xs">
              <button
                onClick={() => setIsRenameModalOpen(false)}
                className="px-4 py-2 border border-slate-200 text-slate-600 rounded-lg font-semibold hover:bg-slate-50 cursor-pointer"
              >
                Cancel
              </button>
              <button
                onClick={() => {
                  if (tempFormName.trim()) {
                    setFormName(tempFormName.trim())
                  }
                  setIsRenameModalOpen(false)
                }}
                className="px-4 py-2 bg-gray-900 text-white rounded-lg font-semibold hover:bg-black cursor-pointer"
              >
                Save
              </button>
            </div>
          </div>
        </div>
      )}

      {/* Publish Modal */}
      {isPublishModalOpen && (
        <div className="fixed inset-0 bg-black/40 backdrop-blur-xs flex items-center justify-center z-[2000] p-4">
          <div className="bg-white p-5 rounded-2xl shadow-xl w-full max-w-md border border-slate-100 space-y-4 animate-scaleUp">
            <div className="flex justify-between items-center">
              <div>
                <h3 className="text-sm font-bold text-slate-800">Publish Form</h3>
                <p className="text-[11px] text-slate-400">Embed this form inside your WordPress content.</p>
              </div>
              <button
                onClick={() => setIsPublishModalOpen(false)}
                className="p-1 hover:bg-slate-100 rounded-full text-slate-400 hover:text-slate-600 cursor-pointer"
              >
                <X className="w-4 h-4" />
              </button>
            </div>

            <div className="space-y-2">
              <p className="text-xs text-slate-500 leading-relaxed">
                Copy this shortcode and paste it directly inside any WordPress block, post, page, or sidebar widget:
              </p>
              <div className="flex items-center gap-2 p-2.5 bg-slate-50 border border-slate-100 rounded-xl">
                <code className="flex-1 bg-white border border-slate-200/50 p-2 rounded-lg text-xs font-mono select-all text-gray-900 font-semibold">
                  {`[wpvfb id="${formId}"]`}
                </code>
                <button
                  onClick={() => {
                    navigator.clipboard.writeText(`[wpvfb id="${formId}"]`)
                    setCopiedShortcode(true)
                    setTimeout(() => setCopiedShortcode(false), 2000)
                  }}
                  className="px-3 py-2 bg-gray-100 hover:bg-gray-200 text-gray-800 rounded-lg text-xs font-bold transition-all flex items-center gap-1 cursor-pointer flex-shrink-0"
                >
                  {copiedShortcode ? (
                    <>
                      <Check className="w-3.5 h-3.5 text-emerald-600" /> Copied!
                    </>
                  ) : (
                    <>
                      <Copy className="w-3.5 h-3.5" /> Copy
                    </>
                  )}
                </button>
              </div>
            </div>
          </div>
        </div>
      )}

      {/* Grid initial selection modal */}
      <GridInitialColumnModal
        isOpen={isGridModalOpen}
        onClose={() => {
          setPendingGridDrop(null)
          setIsGridModalOpen(false)
        }}
        onConfirm={handleConfirmGridColumns}
      />

      {/* Templates Drawer */}
      <TemplateLoaderDrawer
        isOpen={isTemplatesDrawerOpen}
        onClose={() => setIsTemplatesDrawerOpen(false)}
        onTemplateSelect={handleApplyTemplate}
        onApply={handleApplyTemplate}
      />

      {/* 600px Extended Flyout Drawer for Conditional Logic matching the reference builder index.jsx:18100-18270 */}
      {(() => {
        const activeFieldObj = findFieldPath(fields, activeFieldId)?.field || fields.find((f) => f.id === activeFieldId)
        if (!isLogicSidebarOpen || !activeFieldObj) return null

        return (
          <div
            ref={logicSidebarRef}
            data-testid="conditional-logic-sidebar"
            data-drawer="conditional-logic"
            className={`fixed bg-white shadow-2xl border-l border-slate-200 z-[1000] transition-all duration-250 ease-out select-auto flex flex-col ${
              isLogicClosing ? 'opacity-0 translate-x-4 pointer-events-none' : 'opacity-100 translate-x-0'
            }`}
            style={{
              top: '56px',
              right: isRightSidebarCollapsed ? '0' : '340px',
              width: '600px',
              maxWidth: 'calc(100vw - 360px)',
              height: 'calc(100vh - 56px)',
            }}
          >
            {/* Header */}
            <div className="px-6 py-4 border-b border-slate-100 flex items-center justify-between flex-shrink-0 bg-slate-50/50">
              <div>
                <h3 className="text-sm font-bold text-slate-900 flex items-center gap-2">
                  <span>Configure Conditional Logic</span>
                  <span className="text-[11px] font-semibold text-gray-900 bg-gray-100 px-2 py-0.5 rounded-full">
                    {activeFieldObj.label || activeFieldObj.name}
                  </span>
                </h3>
                <p className="text-xs text-slate-500 mt-0.5">
                  Conditional logic allows you to change what the user sees depending on the fields they select.
                </p>
              </div>
              <button
                type="button"
                onClick={handleCloseLogicDrawer}
                className="p-1.5 text-slate-400 hover:text-slate-600 hover:bg-slate-100 rounded-lg transition-colors cursor-pointer"
                title="Close drawer"
                data-testid="close-logic-drawer"
              >
                <X className="w-4 h-4" />
              </button>
            </div>

            {/* Drawer Body */}
            <div className="flex-1 overflow-y-auto p-6">
              <ConditionalLogic
                enableLogic={logicValue(activeFieldObj, 'enabled')}
                logicAction={logicValue(activeFieldObj, 'action')}
                setLogicAction={(newAction) => {
                  writeFieldLogic(activeFieldObj, 'logicAction', newAction)
                }}
                setEnableLogic={(checked) => {
                  const current = logicValue(activeFieldObj, 'rules')
                  // Flat the reference builder keys only (logicPatch drops the older nested conditionalLogic copy).
                  writeFieldLogic({ ...activeFieldObj, logicConditions: checked ? (current.length ? current : [{ field: '', operator: 'is', value: '' }]) : [] }, 'enableConditionalLogic', checked)
                }}
                logicConditions={logicValue(activeFieldObj, 'rules').map((r) => (r && r.field === undefined && r.fieldId !== undefined ? { field: r.fieldId, operator: r.operator, value: r.value } : r))}
                setLogicConditions={(updatedConditions) => {
                  writeFieldLogic(activeFieldObj, 'logicConditions', updatedConditions)
                }}
                logicMatch={logicValue(activeFieldObj, 'match')}
                setLogicMatch={(newMatch) => {
                  writeFieldLogic(activeFieldObj, 'logicMatch', newMatch)
                }}
                fields={fields}
                actionLabel="this field"
                setIsDirty={setIsDirty}
                onClose={handleCloseLogicDrawer}
              />
            </div>
          </div>
        )
      })()}

      {/* Full-Screen Immersive Preview Mode matching the reference builder */}
      {viewMode === 'preview' && (
        <div className="fixed inset-0 z-[999999] bg-[#0f172a]/95 backdrop-blur-md flex flex-col items-center justify-start overflow-y-auto select-auto">
          {/* Preview toolbar: exit, device, extension actions, restart */}
          <div className="fixed top-4 left-1/2 -translate-x-1/2 z-[1000000]">
            <PreviewToolbar
              device={previewMode === 'mobile' ? 'mobile' : 'desktop'}
              onDeviceChange={setPreviewMode}
              onExit={exitPreviewMode}
              onRestart={handleRestartPreview}
            >
              <Slot name="preview.toolbar" />
            </PreviewToolbar>
          </div>

          {/* Form Render Area inside Preview */}
          <div className="w-full flex-1 flex justify-center items-start pt-20 pb-12 px-4">
            <div
              className={`${
                previewMode === 'mobile'
                  ? 'max-w-[400px] w-full min-h-[720px] bg-white rounded-[42px] shadow-2xl border-[10px] border-slate-800 ring-2 ring-slate-700/50 overflow-y-auto relative mx-auto my-auto p-4 sm:p-6'
                  : 'max-w-full w-full mx-auto'
              } relative transition-all duration-300 ease-in-out`}
            >
              {/* Mobile Device Speaker / Dynamic Island */}
              {previewMode === 'mobile' && (
                <div className="flex justify-center mb-4 select-none">
                  <div className="w-24 h-4 bg-slate-800 rounded-full flex items-center justify-end px-2 gap-1 shadow-inner">
                    <div className="w-1.5 h-1.5 rounded-full bg-slate-950" />
                  </div>
                </div>
              )}

              {/* Form Container */}
              {(() => {
                const replaced = applyFilters('canvas.replace', null, { mode: 'preview', settings, viewMode, previewMode })
                if (replaced) return replaced
                const frame = frameFor('preview')
                return (
                  <div
                    className="relative mx-auto"
                    style={{
                      width: '100%',
                      maxWidth: frame.maxWidth,
                    }}
                  >
                    <div
                      {...frame.attributes}
                      className="relative transition-all duration-300 mx-auto"
                      style={{
                        // Same storefront card as the edit canvas.
                        ...frame.style,
                      }}
                    >
                      <Slot name="canvas.card" mode="preview" />
                      <ErrorBoundary>
                        {renderCanvasBody('preview')}
                      </ErrorBoundary>
                    </div>
                  </div>
                )
              })()}

              {/* Extension layers around the previewed form */}
              <Slot name="canvas.around" mode="preview" />

              {/* Mobile Device Home Indicator Bar */}
              {previewMode === 'mobile' && (
                <div className="flex justify-center mt-6 select-none">
                  <div className="w-32 h-1 bg-slate-300 rounded-full" />
                </div>
              )}
            </div>
          </div>
        </div>
      )}

      {overlays}
    </div>
    </BuilderContext.Provider>
  )
}