<template>
  <div class="flex flex-col h-screen bg-gray-50">
    <!-- Header Bar -->
    <header
      class="bg-white border-b border-gray-200 px-6 py-4 flex items-center justify-between shadow-sm"
    >
      <!-- Left section - Logo and navigation -->
      <div class="flex items-center gap-4">
        <Icon
          @click="navigateTo('/form-builder/manage')"
          name="ph:arrow-circle-left-duotone"
          class="cursor-pointer w-6 h-6 hover:text-gray-600 text-gray-500"
        />
        <div class="flex items-center gap-3">
          <img
            src="@/assets/img/logo/logo-word-black.svg"
            alt="Corrad Logo"
            class="h-8"
          />
          <div class="border-l border-gray-300 pl-3">
            <h1 class="text-xl font-semibold text-gray-900">Form Builder</h1>
            <p class="text-sm text-gray-500">Create and manage form layouts</p>
          </div>
          <div v-if="isPreview" class="bg-blue-500 text-white text-xs px-3 py-1 rounded-full ml-2 font-medium">
            Preview Mode
          </div>
        </div>
      </div>

      <!-- Middle section - Form name -->
      <div class="flex-1 flex justify-center items-center mx-8">
        <FormKit
          v-if="!isPreview"
          type="text"
          name="formName"
          placeholder="Form Name"
          v-model="formName"
          validation="required|minLength:3"
          validation-visibility="live"
          :validation-messages="{ 
            required: 'Please enter a form name',
            minLength: 'Form name must be at least 3 characters'
          }"
          class="form-name-input max-w-md"
          :classes="{
            outer: 'mb-0 w-full',
          }"
        />
        <div v-else class="text-lg font-medium">{{ formName }}</div>
      </div>

      <!-- Right section - Actions -->
      <div class="flex items-center">
        <!-- Primary Action Group -->
        <div class="flex items-center mr-1 md:mr-2 border-r border-gray-200 pr-1 md:pr-2">
          <RsButton v-if="!isPreview" @click="handleSave" variant="primary" size="sm" class="mr-1 md:mr-2">
            <Icon name="material-symbols:save" class="mr-0 md:mr-1" />
            <span class="hidden md:inline">Save</span>
          </RsButton>

          <RsButton @click="togglePreview" :variant="isPreview ? 'primary' : 'secondary'" size="sm">
            <Icon :name="isPreview ? 'material-symbols:edit' : 'material-symbols:preview'" class="mr-0 md:mr-1" />
            <span class="hidden md:inline">{{ isPreview ? 'Edit' : 'Preview' }}</span>
          </RsButton>
        </div>
        

        
        <!-- More Actions Dropdown -->
        <div v-if="!isPreview" class="relative">
          <RsButton @click="showDropdown = !showDropdown" variant="tertiary" size="sm" class="flex items-center">
            <Icon name="material-symbols:more-vert" class="w-4 h-4 md:w-5 md:h-5" />
          </RsButton>
          
          <div v-if="showDropdown" class="dropdown-menu absolute right-0 mt-2 bg-white rounded shadow-lg py-1 z-10 w-48 text-gray-800">
            <!-- Form Actions -->
            <div class="px-3 py-1 text-xs font-medium text-gray-500 uppercase tracking-wide">
              Form Actions
            </div>
            <button @click="showTemplatesModal = true; showDropdown = false" class="w-full text-left px-4 py-2 hover:bg-gray-100 flex items-center">
              <Icon name="material-symbols:description-outline" class="mr-2 w-4 h-4" />
              <span>Templates</span>
            </button>
            <button v-if="formStore.currentFormId" @click="showFormHistoryModal = true; showDropdown = false" class="w-full text-left px-4 py-2 hover:bg-gray-100 flex items-center">
              <Icon name="material-symbols:history" class="mr-2 w-4 h-4" />
              <span>History</span>
            </button>
            
            <!-- Settings -->
            <div class="px-3 py-1 text-xs font-medium text-gray-500 uppercase tracking-wide mt-2">
              Settings
            </div>
            <button @click="showFormSettings = true; showDropdown = false" class="w-full text-left px-4 py-2 hover:bg-gray-100 flex items-center">
              <Icon name="material-symbols:code" class="mr-2 w-4 h-4" />
              <span>Form Settings</span>
            </button>
            
            <!-- Help -->
            <div class="px-3 py-1 text-xs font-medium text-gray-500 uppercase tracking-wide mt-2">
              Help
            </div>
            <button @click="showHelpModal = true; showDropdown = false" class="w-full text-left px-4 py-2 hover:bg-gray-100 flex items-center">
              <Icon name="material-symbols:help-outline" class="mr-2 w-4 h-4" />
              <span>How to Use</span>
            </button>
          </div>
        </div>
      </div>
    </header>

    <!-- Main Content Area -->
    <div v-if="hasCurrentForm" class="flex-1 flex overflow-hidden">
      <!-- Left Panel - Components Sidebar -->
      <div
        v-if="!isPreview"
        class="w-64 bg-white border-r border-gray-200 flex flex-col overflow-hidden"
      >
        <div class="border-b border-gray-200">
          <div class="flex">
            <button
              @click="leftSidebarTab = 'components'"
              class="px-4 py-3 text-sm font-medium flex-1"
              :class="{
                'text-blue-600 border-b-2 border-blue-600': leftSidebarTab === 'components',
                'text-gray-500 hover:text-gray-700': leftSidebarTab !== 'components'
              }"
            >
              <div class="flex items-center justify-center">
                <Icon name="material-symbols:category" class="w-4 h-4 mr-1.5" />
                Components
              </div>
            </button>
            <button
              @click="leftSidebarTab = 'history'"
              class="px-4 py-3 text-sm font-medium flex-1"
              :class="{
                'text-blue-600 border-b-2 border-blue-600': leftSidebarTab === 'history',
                'text-gray-500 hover:text-gray-700': leftSidebarTab !== 'history'
              }"
            >
              <div class="flex items-center justify-center">
                <Icon name="material-symbols:history" class="w-4 h-4 mr-1.5" />
                History
              </div>
            </button>
          </div>
        </div>
        
        <!-- Components Tab Content -->
        <div v-if="leftSidebarTab === 'components'" class="overflow-y-auto flex-1">
          <div
            class="p-3 border-b border-gray-200 bg-gray-50 flex justify-between items-center"
          >
            <h2 class="text-sm font-medium text-gray-700">Components</h2>
            <div class="relative">
              <button class="px-2 py-1 text-xs text-gray-500 hover:text-gray-700">
                <Icon name="material-symbols:refresh" class="w-3.5 h-3.5" />
              </button>
            </div>
          </div>
          <FormBuilderComponents @add-component="handleAddComponent" />
        </div>
        
        <!-- History Tab Content -->
        <div v-else-if="leftSidebarTab === 'history'" class="overflow-y-auto flex-1">
          <div
            class="p-3 border-b border-gray-200 bg-gray-50 flex justify-between items-center"
          >
            <h2 class="text-sm font-medium text-gray-700">History</h2>
            <div class="flex items-center space-x-1">
              <button 
                @click="formStore.undo()" 
                class="p-1 text-xs rounded text-gray-500 hover:text-gray-700 disabled:opacity-50"
                :disabled="!formStore.canUndo"
                title="Undo"
              >
                <Icon name="material-symbols:undo" class="w-3.5 h-3.5" />
              </button>
              <button 
                @click="formStore.redo()" 
                class="p-1 text-xs rounded text-gray-500 hover:text-gray-700 disabled:opacity-50"
                :disabled="formStore.currentHistoryIndex >= formStore.actionHistory.length - 1"
                title="Redo"
              >
                <Icon name="material-symbols:redo" class="w-3.5 h-3.5" />
              </button>
            </div>
          </div>
          <FormBuilderHistory />
        </div>
      </div>

      <!-- Middle Panel - Form Canvas -->
      <div class="flex-1 flex flex-col overflow-hidden">
        <div
          class="py-2 px-4 bg-gray-50 border-b border-gray-200 flex justify-between items-center h-12"
        >
          <h2 class="text-sm font-medium text-gray-700">{{ isPreview ? 'Form Preview' : 'Form Canvas' }}</h2>
          <div class="flex items-center gap-2">
            <!-- Device Preview Controls (only show in preview mode) -->
            <div v-if="isPreview" class="flex items-center bg-white border border-gray-200 rounded-lg p-1">
              <button
                v-for="device in deviceSizes"
                :key="device.name"
                @click="selectedDevice = device.name"
                class="px-3 py-1 text-xs font-medium rounded transition-colors flex items-center space-x-1"
                :class="{
                  'bg-blue-500 text-white': selectedDevice === device.name,
                  'text-gray-600 hover:text-gray-800 hover:bg-gray-100': selectedDevice !== device.name
                }"
                :title="`Preview on ${device.name} (${device.width}px)`"
              >
                <Icon :name="device.icon" class="w-3 h-3" />
                <span>{{ device.name }}</span>
              </button>
            </div>
            
            <span class="text-xs text-gray-500">
              {{ isPreview ? 'Preview mode - Form is interactive' : 'Drag components to build your form' }}
            </span>
          </div>
        </div>
        <div class="flex-1 overflow-auto p-6">
          <div
            id="form-drop-zone"
            class="border-2 border-dashed border-gray-300 bg-white rounded-md min-h-[calc(100vh-170px)] p-4"
            :class="{ 
              'border-blue-400 bg-blue-50': formStore.isDraggingOver && !isPreview,
              'border-solid': isPreview,
              'preview-mode': isPreview
            }"
            @dragover="!isPreview && handleDragOver($event)"
            @dragleave="!isPreview && handleDragLeave($event)"
            @drop="!isPreview && handleDrop($event)"
            @dragenter="!isPreview && handleDragEnter($event)"
          >
            <!-- Preview Mode -->
            <div v-if="isPreview" class="form-container">
              <!-- Device Frame Container -->
              <div 
                class="device-preview-container mx-auto"
                :class="[
                  currentDeviceConfig.class,
                  {
                    'device-frame': selectedDevice !== 'Desktop'
                  }
                ]"
                :style="{
                  maxWidth: selectedDevice === 'Desktop' ? '100%' : `${currentDeviceConfig.width}px`,
                  height: selectedDevice === 'Desktop' ? 'auto' : `${currentDeviceConfig.height}px`
                }"
              >
                <!-- Device Screen -->
                <div 
                  class="device-screen"
                  :class="{
                    'overflow-y-auto': selectedDevice !== 'Desktop',
                    'bg-white rounded-lg shadow-xl border': selectedDevice !== 'Desktop',
                    'scrollable-device': selectedDevice !== 'Desktop'
                  }"
                  :style="{
                    height: selectedDevice === 'Desktop' ? 'auto' : '100%',
                    overflowY: selectedDevice === 'Desktop' ? 'visible' : 'auto'
                  }"
                >
                  <FormScriptEngine
                    ref="formScriptEngine"
                    :form-data="previewFormData"
                    :custom-script="formStore.formCustomScript"
                    :custom-css="formStore.formCustomCSS"
                    :form-events="formStore.formEvents"
                    :script-mode="formStore.scriptMode"
                    @field-change="handleScriptFieldChange"
                    @field-validate="handleScriptFieldValidate"
                  />
                  
                  <ConditionalLogicEngine
                    ref="conditionalLogicEngine"
                    :form-components="formStore.formComponents"
                    :form-data="previewFormData"
                    @script-generated="handleConditionalLogicGenerated"
                  />
                  
                  <FormKit 
                    ref="previewForm"
                    type="form" 
                    @submit="handlePreviewSubmit" 
                    :actions="false"
                  >
                    <div 
                      class="grid-preview-container"
                      :class="{
                        'px-4 pt-0': selectedDevice !== 'Desktop',
                        'p-0 pb-4': selectedDevice === 'Desktop'
                      }"
                    >
                      <template
                        v-for="(component, index) in formStore.formComponents"
                        :key="index"
                      >
                        <component-preview :component="component" :is-preview="true" />
                      </template>
                    </div>
                    
                    <!-- Only show submit button if enabled and no submit button components exist in the form -->
                    <FormKit 
                      v-if="formStore.submitButton.enabled && !formStore.formComponents.some(comp => comp.type === 'button' && comp.props.buttonType === 'submit')"
                      type="submit" 
                      :label="formStore.submitButton.label || 'Submit'"
                      class="form-submit mt-6" 
                      :class="{
                        'mx-4 mb-4': selectedDevice !== 'Desktop',
                        'mx-0 mb-0': selectedDevice === 'Desktop'
                      }"
                      :classes="{
                        input: getSubmitButtonStyles(formStore.submitButton.category, formStore.submitButton.color).classes
                      }"
                      :style="getSubmitButtonStyles(formStore.submitButton.category, formStore.submitButton.color).style"
                    />
                  </FormKit>
                </div>
              </div>
            </div>

            <!-- Edit Mode -->
            <div v-else class="relative">
              <FormBuilderCanvas
                :form-components="formStore.formComponents"
                @select-component="handleSelectComponent"
                @select-nested-component="handleSelectNestedComponent"
                @move-component="handleMoveComponent"
                @delete-component="handleDeleteComponent"
                @duplicate-component="handleDuplicateComponent"
                @update-component="handleUpdateComponent"
                @optimize-layout="handleOptimizeLayout"
                @insert-component-at-index="handleInsertComponentAtIndex"
              />
              
              <!-- Instruction Overlay when no component is selected -->
              <div 
                v-if="!isPreview && formStore.formComponents.length > 0 && !formStore.selectedComponent"
                class="absolute top-4 left-1/2 transform -translate-x-1/2 z-30"
              >
                <div class="instruction-tooltip">
                  <div class="flex items-center space-x-2">
                    <Icon name="heroicons:cursor-arrow-rays" class="w-5 h-5 text-blue-600" />
                    <span class="text-sm font-medium text-gray-700">Click any field to configure its settings</span>
                    <Icon name="heroicons:cog-6-tooth" class="w-4 h-4 text-gray-500" />
                  </div>
                  <div class="instruction-arrow"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Right Panel - Field Settings (Collapsible) -->
      <div
        v-if="!isPreview"
        class="field-settings-panel"
        :class="{
          'panel-expanded': showFieldSettingsPanel,
          'panel-collapsed': !showFieldSettingsPanel
        }"
      >

        <!-- Expanded Panel Content -->
        <div 
          v-if="showFieldSettingsPanel"
          class="panel-content"
        >
          <!-- Panel Header with Toggle -->
          <div class="panel-header">
            <div class="flex items-center justify-between">
              <div class="flex items-center space-x-2">
                <Icon name="heroicons:cog-6-tooth" class="w-5 h-5 text-gray-600" />
                <h3 class="text-sm font-semibold text-gray-800">Field Settings</h3>
              </div>
              <button
                @click="toggleFieldSettingsPanel"
                class="panel-header-toggle-btn"
                title="Collapse Settings Panel"
              >
                <Icon name="heroicons:chevron-right" class="w-4 h-4" />
              </button>
            </div>
          </div>

          <!-- Selected Component Info or Empty State -->
          <div class="panel-body">
            <div v-if="!formStore.selectedComponent" class="empty-state">
              <div class="text-center py-8">
                <Icon name="heroicons:cursor-arrow-rays" class="w-12 h-12 text-gray-300 mx-auto mb-3" />
                <h4 class="text-sm font-medium text-gray-600 mb-2">No Field Selected</h4>
                <p class="text-xs text-gray-500 leading-relaxed">
                  Click on any form field in the canvas to configure its settings here.
                </p>
              </div>
            </div>

            <div v-else class="component-settings">
              <!-- Component Header -->
              <div class="component-header">
                <div class="flex items-center space-x-3">
                  <div class="component-icon">
                    <Icon :name="getComponentIcon(formStore.selectedComponent.type)" class="w-6 h-6 text-blue-600" />
                  </div>
                  <div class="flex-1 min-w-0">
                    <h4 class="text-sm font-semibold text-gray-900 truncate">
                      {{ getComponentTypeName(formStore.selectedComponent.type) }}
                    </h4>
                    <p class="text-xs text-gray-500 truncate">
                      {{ formStore.selectedComponent.props.label || formStore.selectedComponent.props.name || 'Untitled' }}
                    </p>
                  </div>
                </div>
              </div>

              <!-- Quick Actions -->
              <div class="quick-actions">
                <button
                  @click="openFullSettingsModal"
                  class="action-btn primary"
                  title="Open full settings modal"
                >
                  <Icon name="heroicons:adjustments-horizontal" class="w-4 h-4 mr-1.5" />
                  Full Settings
                </button>

                <button
                  @click="showDeleteConfirmation"
                  class="action-btn danger"
                  title="Delete this component"
                >
                  <Icon name="heroicons:trash" class="w-4 h-4 mr-1.5" />
                  Delete
                </button>
              </div>

              <!-- Inline Quick Settings -->
              <div class="quick-settings">
                <h5 class="settings-section-title">Quick Settings</h5>
                
                <!-- Label Field -->
                <div v-if="showQuickField('label')" class="setting-item">
                  <label class="setting-label">
                    {{ formStore.selectedComponent.type === 'button' ? 'Button Text' : 'Field Label' }}
                  </label>
                  <FormKit
                    type="text"
                    v-model="quickSettings.label"
                    @input="updateQuickSetting('label', $event)"
                    :placeholder="getPlaceholder('label')"
                    :classes="{ outer: 'mb-0', input: 'text-sm' }"
                  />
                </div>

                <!-- Name Field -->
                <div v-if="showQuickField('name')" class="setting-item">
                  <label class="setting-label">Field Name</label>
                  <FormKit
                    type="text"
                    v-model="quickSettings.name"
                    @input="updateQuickSetting('name', $event)"
                    :placeholder="getPlaceholder('name')"
                    :classes="{ outer: 'mb-0', input: 'text-sm' }"
                  />
                </div>

                <!-- Width Setting -->
                <div v-if="showQuickField('width')" class="setting-item">
                  <label class="setting-label">Field Width</label>
                  <div class="width-selector-compact">
                    <button
                      v-for="option in compactWidthOptions"
                      :key="option.value"
                      @click="updateQuickSetting('width', option.value, option.gridColumns)"
                      class="width-btn"
                      :class="{ 'active': getComponentWidthPercent() === option.value }"
                      :title="option.description"
                    >
                      {{ option.name }}
                    </button>
                  </div>
                </div>

                <!-- Required Toggle -->
                <div v-if="showQuickField('required')" class="setting-item">
                  <label class="setting-toggle">
                    <input 
                      type="checkbox" 
                      v-model="quickSettings.required"
                      @change="updateQuickValidation('required', $event.target.checked)"
                      class="toggle-input"
                    />
                    <span class="toggle-slider"></span>
                    <span class="toggle-label">Required Field</span>
                  </label>
                </div>

                <!-- Placeholder -->
                <div v-if="showQuickField('placeholder')" class="setting-item">
                  <label class="setting-label">Placeholder Text</label>
                  <FormKit
                    type="text"
                    v-model="quickSettings.placeholder"
                    @input="updateQuickSetting('placeholder', $event)"
                    :placeholder="getPlaceholder('placeholder')"
                    :classes="{ outer: 'mb-0', input: 'text-sm' }"
                  />
                </div>

                <!-- Rows (for textarea) -->
                <div v-if="showQuickField('rows')" class="setting-item">
                  <label class="setting-label">Number of Rows</label>
                  <FormKit
                    type="number"
                    v-model="quickSettings.rows"
                    @input="updateQuickSetting('rows', $event)"
                    :placeholder="getPlaceholder('rows')"
                    :classes="{ outer: 'mb-0', input: 'text-sm' }"
                    min="1"
                    max="20"
                  />
                </div>

                <!-- Link Type (for button) -->
                <div v-if="showQuickField('linkType')" class="setting-item">
                  <label class="setting-label">Link Type</label>
                  <FormKit
                    type="select"
                    v-model="quickSettings.linkType"
                    @input="updateQuickSetting('linkType', $event)"
                    :options="[
                      { label: 'No Link', value: 'none' },
                      { label: 'Custom URL', value: 'url' },
                      { label: 'Process Link', value: 'process' }
                    ]"
                    :classes="{ outer: 'mb-0', input: 'text-sm' }"
                  />
                </div>

                <!-- Link URL (for button) -->
                <div v-if="showQuickField('linkUrl') && quickSettings.linkType === 'url'" class="setting-item">
                  <label class="setting-label">URL</label>
                  <FormKit
                    type="text"
                    v-model="quickSettings.linkUrl"
                    @input="updateQuickSetting('linkUrl', $event)"
                    placeholder="https://example.com"
                    :classes="{ outer: 'mb-0', input: 'text-sm' }"
                  />
                </div>

                <!-- Link Process (for button) -->
                <div v-if="showQuickField('linkProcessId') && quickSettings.linkType === 'process'" class="setting-item">
                  <label class="setting-label">Process</label>
                  <FormKit
                    type="select"
                    v-model="quickSettings.linkProcessId"
                    @input="updateQuickSetting('linkProcessId', $event)"
                    :options="publishedProcesses"
                    placeholder="Select a process..."
                    :classes="{ outer: 'mb-0', input: 'text-sm' }"
                  />
                </div>

                <!-- Iframe Parameters (for button with process link) -->
                <div v-if="showQuickField('iframeDebug') && quickSettings.linkType === 'process'" class="space-y-2">
                  <div class="setting-item">
                    <label class="setting-toggle">
                      <input 
                        type="checkbox" 
                        v-model="quickSettings.iframeDebug"
                        @change="updateQuickSetting('iframeDebug', $event.target.checked)"
                        class="toggle-input"
                      />
                      <span class="toggle-slider"></span>
                      <span class="toggle-label">Debug Mode (OFF = iframe)</span>
                    </label>
                  </div>
                  
                  <div class="setting-item">
                    <label class="setting-toggle">
                      <input 
                        type="checkbox" 
                        v-model="quickSettings.iframeHideComplete"
                        @change="updateQuickSetting('iframeHideComplete', $event.target.checked)"
                        class="toggle-input"
                      />
                      <span class="toggle-slider"></span>
                      <span class="toggle-label">Hide Completion</span>
                    </label>
                  </div>
                  
                  <div class="setting-item">
                    <label class="setting-label">Theme</label>
                    <FormKit
                      type="select"
                      v-model="quickSettings.iframeTheme"
                      @input="updateQuickSetting('iframeTheme', $event)"
                      :options="[
                        { label: 'Default', value: '' },
                        { label: 'Dark', value: 'dark' },
                        { label: 'Light', value: 'light' }
                      ]"
                      :classes="{ outer: 'mb-0', input: 'text-sm' }"
                    />
                  </div>
                  
                  <div class="setting-item">
                    <label class="setting-label">Custom Params</label>
                    <FormKit
                      type="text"
                      v-model="quickSettings.iframeCustomParams"
                      @input="updateQuickSetting('iframeCustomParams', $event)"
                      placeholder="param1=value1&param2=value2"
                      :classes="{ outer: 'mb-0', input: 'text-sm' }"
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- Collapsed State -->
        <div 
          v-else
          class="collapsed-info"
        >
          <!-- Collapsed Header with Toggle -->
          <div class="collapsed-header">
            <button
              @click="toggleFieldSettingsPanel"
              class="collapsed-toggle-btn"
              title="Expand Settings Panel"
            >
              <Icon name="heroicons:chevron-left" class="w-4 h-4" />
            </button>
          </div>
          
          <!-- Collapsed Content -->
          <div class="collapsed-content">
            <!-- Selected Component Info -->
            <div v-if="formStore.selectedComponent" class="selected-component-collapsed">
              <div class="component-icon-collapsed">
                <Icon :name="getComponentIcon(formStore.selectedComponent.type)" class="w-4 h-4 text-blue-600" />
              </div>
              <div class="component-type-badge">
                {{ getComponentTypeShort(formStore.selectedComponent.type) }}
              </div>
            </div>
            
            <!-- No Selection State -->
            <div v-else class="no-selection-collapsed">
              <Icon name="heroicons:cursor-arrow-rays" class="w-4 h-4 text-gray-400 mb-2" />
              <div class="text-xs text-gray-400 text-center writing-mode-vertical">
                Select field
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Empty state - No form selected -->
    <div v-else class="flex-1 flex items-center justify-center bg-gray-50">
      <div class="text-center p-8 max-w-md">
        <Icon name="material-symbols:description" class="w-16 h-16 mx-auto mb-4 text-gray-400" />
        <h2 class="text-xl font-semibold text-gray-800 mb-2">Create a New Form</h2>
        <p class="text-gray-600 mb-6">Get started by creating a new form or navigate back to manage your existing forms.</p>
        
        <div class="space-y-3">
          <div class="mb-4">
            <FormKit
              v-model="newFormName"
              type="text"
              label="Form Name"
              placeholder="Enter a name for your new form"
              validation="required|minLength:3|maxLength:50"
              :validation-messages="{
                required: 'Please enter a form name',
                minLength: 'Form name must be at least 3 characters',
                maxLength: 'Form name must be less than 50 characters'
              }"
            />
            
            <FormKit
              v-model="newFormDescription"
              type="textarea"
              label="Description (Optional)"
              placeholder="Enter a description"
              :rows="3"
              validation="maxLength:200"
              :validation-messages="{
                maxLength: 'Description must be less than 200 characters'
              }"
            />
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
              <FormKit
                v-model="newFormCategory"
                type="select"
                label="Category"
                placeholder="Select a category"
                :options="categoryOptions"
                validation="required"
                :validation-messages="{
                  required: 'Please select a category'
                }"
              />
              
              <FormKit
                v-model="newFormGroup"
                type="text"
                label="Group (Optional)"
                placeholder="Enter a group name"
              />
            </div>
          </div>
          
          <div class="flex justify-center gap-4">
            <RsButton @click="createNewForm" variant="primary" :disabled="!newFormName.trim()">
              <Icon name="material-symbols:add" class="mr-1" />
              Create Form
            </RsButton>
            
            <RsButton @click="navigateToManage" variant="tertiary">
              <Icon name="material-symbols:arrow-back" class="mr-1" />
              Back to Forms
            </RsButton>
          </div>
        </div>
      </div>
    </div>

    <!-- Form Settings Modal -->
    <RsModal v-model="showFormSettings" title="Form Settings & Scripts" size="xl" position="center">
      <div>
        <RsTab :tabs="settingsTabs" v-model="activeSettingsTab">
          <!-- Form Info Tab -->
          <template #info>
            <div class="p-4 space-y-4">
              <FormKit
                type="text"
                label="Form Name"
                v-model="formStore.formName"
                help="Name of your form"
                validation="required|minLength:3|maxLength:50"
                :validation-messages="{
                  required: 'Please enter a form name',
                  minLength: 'Form name must be at least 3 characters',
                  maxLength: 'Form name must be less than 50 characters'
                }"
              />
              
              <FormKit
                type="textarea"
                label="Form Description"
                v-model="formStore.formDescription"
                help="Brief description of what this form is for"
                rows="3"
                validation="maxLength:200"
                :validation-messages="{
                  maxLength: 'Description must be less than 200 characters'
                }"
              />
              
              <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <FormKit
                  type="select"
                  label="Category"
                  v-model="formStore.formCategory"
                  :options="categoryOptions"
                  help="Categorize your form for better organization"
                />
                
                <FormKit
                  type="text"
                  label="Group"
                  v-model="formStore.formGroup"
                  help="Group related forms together"
                />
              </div>
            </div>
            </template>

          <!-- Submit Button Settings Tab -->
          <template #submit>
            <div class="p-4 space-y-4">
              <div class="bg-blue-50 border border-blue-200 text-blue-800 p-3 rounded mb-4">
                <div class="flex items-start">
                  <Icon name="material-symbols:info" class="w-5 h-5 mr-2 mt-0.5" />
                  <div>
                    <h4 class="font-medium text-sm">Submit Button Configuration</h4>
                    <p class="text-xs mt-1">
                      Configure the default submit button that appears at the bottom of your form. 
                      Note: If you add a custom submit button component to your form, the default button will be hidden automatically.
                    </p>
                  </div>
                </div>
              </div>

              <!-- Enable/Disable Submit Button -->
              <div class="space-y-2">
                <label class="flex items-center">
                  <input
                    type="checkbox"
                    v-model="formStore.submitButton.enabled"
                    class="form-checkbox h-4 w-4 text-blue-600 focus:ring-blue-500"
                  />
                  <span class="ml-2 text-sm font-medium text-gray-700">Show default submit button</span>
                </label>
                <p class="text-xs text-gray-500 ml-6">
                  When enabled, a submit button will appear at the bottom of your form unless you add a custom submit button component.
                </p>
              </div>

              <!-- Submit Button Label -->
              <div v-if="formStore.submitButton.enabled">
                <FormKit
                  type="text"
                  label="Submit Button Text"
                  v-model="formStore.submitButton.label"
                  help="The text that appears on the submit button"
                  validation="required|minLength:2|maxLength:30"
                  :validation-messages="{
                    required: 'Button text is required',
                    minLength: 'Button text must be at least 2 characters',
                    maxLength: 'Button text must be less than 30 characters'
                  }"
                  placeholder="Submit"
                />
              </div>

              <!-- Submit Button Category -->
              <div v-if="formStore.submitButton.enabled">
                <FormKit
                  type="select"
                  label="Button Style Category"
                  v-model="formStore.submitButton.category"
                  help="Primary buttons are more prominent, secondary are more subtle"
                  :options="[
                    { label: 'Primary', value: 'primary' },
                    { label: 'Secondary', value: 'secondary' }
                  ]"
                />
              </div>

              <!-- Submit Button Color -->
              <div v-if="formStore.submitButton.enabled">
                <FormKit
                  type="select"
                  label="Button Color"
                  v-model="formStore.submitButton.color"
                  help="Choose the color theme for the submit button"
                  :options="[
                    { label: 'Primary', value: 'primary' },
                    { label: 'Secondary', value: 'secondary' },
                    { label: 'Success', value: 'success' },
                    { label: 'Info', value: 'info' },
                    { label: 'Warning', value: 'warning' },
                    { label: 'Danger', value: 'danger' }
                  ]"
                />
              </div>

              <!-- Preview Section -->
              <div v-if="formStore.submitButton.enabled" class="border-t pt-4">
                <h4 class="text-sm font-medium text-gray-700 mb-2">Preview</h4>
                <div class="bg-gray-50 p-4 rounded border">
                  <FormKit
                    type="submit"
                    :label="formStore.submitButton.label || 'Submit'"
                    :classes="{
                      input: getSubmitButtonStyles(formStore.submitButton.category, formStore.submitButton.color).classes
                    }"
                    :style="getSubmitButtonStyles(formStore.submitButton.category, formStore.submitButton.color).style"
                    disabled
                  />
                  <p class="text-xs text-gray-500 mt-2">
                    This is how your submit button will appear in the form.
                  </p>
                </div>
              </div>
            </div>
          </template>

          <!-- Custom JavaScript Tab -->
          <template #javascript>
            <div class="p-4">
              <div class="mb-4">
                <h3 class="text-lg font-medium mb-2">Custom JavaScript</h3>
                <p class="text-sm text-gray-600 mb-4">
                  Write custom JavaScript to add dynamic behavior to your form. Scripts run securely in a sandboxed environment with access to form fields and utility functions.
                </p>
                
                <!-- Helper Functions Reference -->
                <div class="mb-4 p-3 bg-blue-50 rounded border border-blue-200">
                  <details>
                    <summary class="text-sm font-medium text-blue-800 cursor-pointer">📚 Core Functions</summary>
                    <div class="mt-2 text-xs text-blue-700 space-y-1">
                      <div><code>getField('name')</code> - Get field value</div>
                      <div><code>setField('name', value)</code> - Set field value and trigger events</div>
                      <div><code>hideField('name')</code> - Hide a field</div>
                      <div><code>showField('name')</code> - Show a field</div>
                      <div><code>disableField('name')</code> - Disable a field</div>
                      <div><code>enableField('name')</code> - Enable a field</div>
                      <div><code>validateField('name')</code> - Trigger field validation</div>
                      <div><code>getAllFieldValues()</code> - Get all form values as object</div>
                      <div><code>onFieldChange(['field1', 'field2'], callback)</code> - Listen for field changes</div>
                    </div>
                  </details>
                </div>
                
                <!-- User Interface Functions -->
                <div class="mb-4 p-3 bg-green-50 rounded border border-green-200">
                  <details>
                    <summary class="text-sm font-medium text-green-800 cursor-pointer">🎨 UI & Notifications</summary>
                    <div class="mt-2 text-xs text-green-700 space-y-1">
                      <div><code>showSuccess('message')</code> - Display success toast notification</div>
                      <div><code>showError('message')</code> - Display error toast notification</div>
                      <div><code>showInfo('message')</code> - Display info toast notification</div>
                      <div><code>showWarning('message')</code> - Display warning toast notification</div>
                      <div><code>showToast('message', options)</code> - Display custom toast with type options</div>
                      <div><code>showConfirm('message')</code> - Show confirmation dialog with custom buttons</div>
                      <div><code>querySelector('selector')</code> - Safe DOM querying within form</div>
                    </div>
                  </details>
                </div>
                
                <!-- Option Field Helpers -->
                <div class="mb-4 p-3 bg-indigo-50 rounded border border-indigo-200">
                  <details>
                    <summary class="text-sm font-medium text-indigo-800 cursor-pointer">🎯 Option Field Helpers</summary>
                    <div class="mt-2 text-xs text-indigo-700 space-y-1">
                      <div><code>setFieldByLabel('field', 'Label Text')</code> - Set field by display label</div>
                      <div><code>getFieldOptions('field')</code> - Get all options for select/radio/checkbox</div>
                      <div><strong>Enhanced setField:</strong> Works with select, radio, checkbox by value or label</div>
                      <div>• <code>setField('country', 'us')</code> - Set by value</div>
                      <div>• <code>setField('country', 'United States')</code> - Set by label</div>
                    </div>
                  </details>
                </div>
                
                <!-- Conditional Logic Optimization -->
                <div class="mb-4 p-3 bg-amber-50 rounded border border-amber-200">
                  <details>
                    <summary class="text-sm font-medium text-amber-800 cursor-pointer">⚡ Conditional Logic Optimization</summary>
                    <div class="mt-2 text-xs text-amber-700 space-y-1">
                      <div><strong>Automatic Optimization:</strong> When multiple fields use <code>onFieldChange</code> with the same trigger field:</div>
                      <div>• The form builder automatically groups them into a single handler</div>
                      <div>• No need to worry about duplicate event listeners</div>
                      <div>• Better performance and memory usage</div>
                      <div>• Use field settings UI for visual condition setup, or write custom logic here</div>
                    </div>
                  </details>
                </div>
                
                <!-- Utility Functions -->
                <div class="mb-4 p-3 bg-purple-50 rounded border border-purple-200">
                  <details>
                    <summary class="text-sm font-medium text-purple-800 cursor-pointer">🛠️ Utilities</summary>
                    <div class="mt-2 text-xs text-purple-700 space-y-1">
                      <div><code>Math.*</code> - Mathematical functions (Math.round, Math.max, etc.)</div>
                      <div><code>Date</code> - Date object for date/time operations</div>
                      <div><code>Number()</code>, <code>String()</code>, <code>Array</code> - Type conversion</div>
                      <div><code>setTimeout()</code>, <code>setInterval()</code> - Timing functions</div>
                      <div><code>console.log()</code>, <code>console.warn()</code> - Debug logging</div>
                    </div>
                  </details>
                </div>
              </div>

              <RsCodeMirror
                v-model="formStore.formCustomScript"
                language="javascript"
                height="300px"
                placeholder="// Example: Hide/show fields based on selection
// onFieldChange('customer_type', (value) => {
//   if (value === 'business') {
//     showField('company_name');
//     showField('tax_id');
//     showInfo('Business information fields are now visible');
//   } else {
//     hideField('company_name');
//     hideField('tax_id');
//   }
// });

// Example: Real-time calculations
// onFieldChange(['quantity', 'price'], () => {
//   const qty = Number(getField('quantity')) || 0;
//   const price = Number(getField('price')) || 0;
//   const total = Math.round((qty * price) * 100) / 100;
//   setField('total', total);
//   
//   if (total > 1000) {
//     showSuccess('Discount applied for orders over $1000!');
//   }
// });

// Example: Conditional validation
// onFieldChange('email', (value) => {
//   if (value && !value.includes('@')) {
//     showError('Please enter a valid email address');
//   }
// });"
              />
            </div>
          </template>

          <!-- Custom CSS Tab -->
          <template #css>
            <div class="p-4">
              <div class="mb-4">
                <h3 class="text-lg font-medium mb-2">Custom CSS</h3>
                <p class="text-sm text-gray-600 mb-4">
                  Add custom styles to enhance your form appearance. Use <code class="bg-gray-100 px-1 rounded">.form-container</code> to target the form.
                </p>
                
                <!-- CSS Helper Reference -->
                <div class="mb-4 p-3 bg-green-50 rounded border border-green-200">
                  <details>
                    <summary class="text-sm font-medium text-green-800 cursor-pointer">🎨 CSS Selectors</summary>
                    <div class="mt-2 text-xs text-green-700 space-y-1">
                      <div><code>.form-container</code> - Main form wrapper</div>
                      <div><code>.form-field</code> - Individual form fields</div>
                      <div><code>.form-field[data-name="fieldName"]</code> - Specific field</div>
                      <div><code>.form-section</code> - Form sections</div>
                      <div><code>.form-submit</code> - Submit button</div>
                      <div><code>.info-display</code> - Info display components</div>
                    </div>
                  </details>
                </div>
                
                <!-- Performance Optimization Notice -->
                <div class="mb-4 p-3 bg-blue-50 rounded border border-blue-200">
                  <details>
                    <summary class="text-sm font-medium text-blue-800 cursor-pointer">⚡ Performance Optimization</summary>
                    <div class="mt-2 text-xs text-blue-700 space-y-1">
                      <div><strong>Smart Field Watching:</strong> The form builder automatically optimizes conditional logic</div>
                      <div>• Groups multiple field conditions that watch the same trigger field</div>
                      <div>• Prevents duplicate <code>onFieldChange</code> handlers</div>
                      <div>• Improves performance and reduces memory usage</div>
                      <div>• Example: If 5 fields depend on "customer_type", only 1 handler is created</div>
                    </div>
                  </details>
                </div>
              </div>

              <RsCodeMirror
                v-model="formStore.formCustomCSS"
                language="css"
                height="300px"
                placeholder="/* Example: Custom field styling */
/* .form-field[data-name='customer_name'] {
  background: #f0f9ff;
  border: 2px solid #0ea5e9;
}

/* Example: Hide field initially */
/* .form-field[data-name='hidden_field'] {
  display: none;
}

/* Example: Custom info display styling */
/* .info-display {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-radius: 12px;
} */"
              />
            </div>
          </template>

          <!-- Script Events Tab -->
          <template #events>
            <div class="p-4">
              <div class="mb-4">
                <h3 class="text-lg font-medium mb-2">Form Events</h3>
                <p class="text-sm text-gray-600 mb-4">
                  Configure when your custom scripts should run. Field change events are detected automatically in real-time when users interact with form fields.
                </p>
                
                <!-- Important Note -->
                <div class="mb-4 p-3 bg-amber-50 rounded border border-amber-200">
                  <div class="flex items-start">
                    <Icon name="material-symbols:info" class="w-4 h-4 text-amber-600 mr-2 mt-0.5" />
                    <div class="text-xs text-amber-700">
                      <strong>Note:</strong> The "On Field Change" event must be enabled for <code>onFieldChange()</code> callbacks to work in your scripts.
                    </div>
                  </div>
                </div>
              </div>

              <div class="space-y-4">
                <div class="border rounded p-4">
                  <h4 class="font-medium mb-2">Event Triggers</h4>
                  <div class="space-y-2">
                    <label class="flex items-center">
                      <input type="checkbox" v-model="formStore.formEvents.onLoad" class="mr-2">
                      <span class="text-sm">On Form Load</span>
                    </label>
                    <label class="flex items-center">
                      <input type="checkbox" v-model="formStore.formEvents.onFieldChange" class="mr-2">
                      <span class="text-sm">On Field Change</span>
                    </label>
                    <label class="flex items-center">
                      <input type="checkbox" v-model="formStore.formEvents.onSubmit" class="mr-2">
                      <span class="text-sm">Before Form Submit</span>
                    </label>
                    <label class="flex items-center">
                      <input type="checkbox" v-model="formStore.formEvents.onValidation" class="mr-2">
                      <span class="text-sm">On Field Validation</span>
                    </label>
                  </div>
                </div>

                <div class="border rounded p-4">
                  <h4 class="font-medium mb-2">Script Execution Mode</h4>
                  <div class="space-y-3">
                    <label class="flex items-start">
                      <input type="radio" v-model="formStore.scriptMode" value="safe" class="mr-2 mt-0.5">
                      <div>
                        <span class="text-sm font-medium text-green-700">Safe Mode (Recommended)</span>
                        <p class="text-xs text-gray-600 mt-1">Scripts run in a secure sandbox with access only to form functions. Best for most use cases.</p>
                      </div>
                    </label>
                    <label class="flex items-start">
                      <input type="radio" v-model="formStore.scriptMode" value="advanced" class="mr-2 mt-0.5">
                      <div>
                        <span class="text-sm font-medium text-orange-700">Advanced Mode</span>
                        <p class="text-xs text-gray-600 mt-1">Provides broader JavaScript access but with security restrictions. Use with caution.</p>
                      </div>
                    </label>
                  </div>
                </div>
              </div>
            </div>
          </template>

          <!-- JSON Tab -->
          <template #json>
            <div class="p-4">
              <div class="mb-4">
                <h3 class="text-lg font-medium mb-2">Form Configuration</h3>
                <p class="text-sm text-gray-600 mb-4">
                  This section displays the complete form configuration as JSON for developers.
                </p>
                
                <!-- Form metadata -->
                <div class="bg-gray-50 p-3 rounded border mb-4 text-sm">
                  <div class="grid grid-cols-2 gap-2">
                    <div>
                      <span class="font-medium">Component Count:</span> {{ formStore.formComponents.length }}
                    </div>
                    <div>
                      <span class="font-medium">Form ID:</span> {{ formStore.currentFormId || 'Not saved yet' }}
                    </div>
                    <div>
                      <span class="font-medium">Has Script:</span> {{ formStore.formCustomScript ? 'Yes' : 'No' }}
                    </div>
                    <div>
                      <span class="font-medium">Has Custom CSS:</span> {{ formStore.formCustomCSS ? 'Yes' : 'No' }}
                    </div>
                  </div>
                </div>
                
                <!-- Action buttons -->
                <div class="flex flex-wrap justify-between mb-2 gap-2">
                  <div>
                    <!-- Import button and hidden file input -->
                    <input 
                      type="file" 
                      ref="jsonFileInput" 
                      accept=".json" 
                      style="display: none"
                      @change="handleJsonImport"
                    />
                    <RsButton @click="$refs.jsonFileInput.click()" size="sm" variant="primary">
                      <Icon name="material-symbols:upload" class="mr-1" />
                      Import JSON
                    </RsButton>
                  </div>
                  
                  <div class="flex space-x-2">
                    <RsButton @click="toggleJsonEditMode" size="sm" :variant="isEditingJson ? 'primary' : 'secondary'">
                      <Icon :name="isEditingJson ? 'material-symbols:edit-off' : 'material-symbols:edit'" class="mr-1" />
                      {{ isEditingJson ? 'View Mode' : 'Edit Mode' }}
                    </RsButton>
                    <RsButton @click="downloadJsonFile" size="sm" variant="secondary">
                      <Icon name="material-symbols:download" class="mr-1" />
                      Download
                    </RsButton>
                    <RsButton @click="copyJsonToClipboard" size="sm" variant="secondary">
                      <Icon name="material-symbols:content-copy" class="mr-1" />
                      Copy
                    </RsButton>
                  </div>
                </div>
                
                <!-- Warning message when in edit mode -->
                <div v-if="isEditingJson" class="bg-yellow-50 border border-yellow-200 text-yellow-800 p-3 rounded mb-4">
                  <div class="flex items-start">
                    <Icon name="material-symbols:warning" class="w-5 h-5 mr-2 mt-0.5" />
                    <div>
                      <h4 class="font-medium text-sm">Warning: Direct JSON Editing</h4>
                      <p class="text-xs mt-1">
                        Changes made to JSON directly will replace your form configuration when you click "Apply JSON Changes".
                        Ensure the JSON is valid before applying changes.
                      </p>
                    </div>
                  </div>
                </div>
              </div>

              <RsCodeMirror
                v-if="isEditingJson"
                v-model="editableJsonString"
                language="json"
                height="300px"
                :readonly="false"
              />
              <RsCodeMirror
                v-else
                :value="formJsonString"
                language="json"
                height="300px"
                :readonly="true"
              />
              
              <!-- Apply changes button only visible in edit mode -->
              <div v-if="isEditingJson" class="mt-4 flex justify-end">
                <RsButton @click="applyJsonChanges" variant="primary" size="md">
                  Apply JSON Changes
                </RsButton>
              </div>
            </div>
          </template>
        </RsTab>
      </div>
      <template #footer>
        <div class="flex justify-end gap-2">
          <RsButton @click="showFormSettings = false" variant="tertiary">
            Cancel
          </RsButton>
          <RsButton @click="saveFormSettings" variant="primary">
            Save Settings
          </RsButton>
        </div>
      </template>
    </RsModal>

    <!-- Unsaved Changes Modal -->
    <RsModal v-model="showUnsavedChangesModal" title="Unsaved Changes" size="md" position="center">
      <div class="p-4">
        <div class="flex items-center mb-4">
          <Icon name="material-symbols:warning-outline" class="text-yellow-500 w-8 h-8 mr-3" />
          <div>
            <h3 class="font-medium text-lg">You have unsaved changes</h3>
            <p class="text-gray-600">Are you sure you want to leave? Your changes will be lost.</p>
          </div>
        </div>
      </div>
      <template #footer>
        <div class="flex justify-end gap-2">
          <RsButton @click="cancelNavigation" variant="tertiary">
            Stay
          </RsButton>
          <RsButton @click="confirmNavigation" variant="danger">
            Leave
          </RsButton>
        </div>
      </template>
    </RsModal>

    <!-- Add Templates Modal -->
    <FormTemplatesModal 
      v-model="showTemplatesModal"
      @select-template="applyFormTemplate"
    />

    <!-- Field Settings Modal -->
    <FormBuilderFieldSettingsModal
      v-model="showFieldSettings"
      :component="formStore.selectedComponent"
      @update-component="handleUpdateComponent"
      @close="showFieldSettings = false"
    />

    <!-- Form History Modal -->
    <FormHistoryModal
      :is-open="showFormHistoryModal"
      :form-id="formStore.currentFormId"
      @close="showFormHistoryModal = false"
      @restored="handleFormRestored"
    />

    <!-- Delete Confirmation Modal for Settings Panel -->
    <RsModal v-model="showDeleteModal" title="Confirm Delete" size="md" position="center">
      <div class="p-4">
        <div class="flex items-center mb-4">
          <Icon name="material-symbols:warning-outline" class="text-yellow-500 w-8 h-8 mr-3 flex-shrink-0" />
          <div>
            <p class="text-gray-600 font-medium mb-1">Delete Component</p>
            <p class="text-gray-600 text-sm">
              Are you sure you want to delete this component? This action cannot be undone and will permanently remove the component from your form.
            </p>
          </div>
        </div>
      </div>
      <template #footer>
        <div class="flex justify-end gap-2">
          <RsButton @click="cancelDelete" variant="tertiary">
            Cancel
          </RsButton>
          <RsButton @click="confirmDelete" variant="danger">
            <Icon name="material-symbols:delete" class="w-4 h-4 mr-1" />
            Delete
          </RsButton>
        </div>
      </template>
    </RsModal>

    <!-- Replace Content Confirmation Modal -->
    <RsModal v-model="showReplaceContentModal" title="Confirm Replace Content" size="md" position="center">
      <div class="p-4">
        <div class="flex items-center mb-4">
          <Icon name="material-symbols:warning-outline" class="text-yellow-500 w-8 h-8 mr-3 flex-shrink-0" />
          <div>
            <p class="text-gray-600 font-medium mb-1">Replace Current Form Content</p>
            <p class="text-gray-600 text-sm">
              This will replace your current form content. Any unsaved changes will be lost. Are you sure you want to continue?
            </p>
          </div>
        </div>
      </div>
      <template #footer>
        <div class="flex justify-end gap-2">
          <RsButton @click="cancelReplaceContent" variant="tertiary">
            Cancel
          </RsButton>
          <RsButton @click="confirmReplaceContent" variant="warning">
            <Icon name="material-symbols:swap-horiz" class="w-4 h-4 mr-1" />
            Replace Content
          </RsButton>
        </div>
      </template>
    </RsModal>

    <!-- Update Form Name Confirmation Modal -->
    <RsModal v-model="showUpdateFormNameModal" title="Update Form Name" size="md" position="center">
      <div class="p-4">
        <div class="flex items-center mb-4">
          <Icon name="material-symbols:warning-outline" class="text-yellow-500 w-8 h-8 mr-3 flex-shrink-0" />
          <div>
            <p class="text-gray-600 font-medium mb-1">Update Form Name</p>
            <p class="text-gray-600 text-sm">
              Do you want to update the form name to match the template name "{{ pendingFormNameUpdate }}"?
            </p>
          </div>
        </div>
      </div>
      <template #footer>
        <div class="flex justify-end gap-2">
          <RsButton @click="cancelUpdateFormName" variant="tertiary">
            Keep Current Name
          </RsButton>
          <RsButton @click="confirmUpdateFormName" variant="primary">
            <Icon name="material-symbols:edit" class="w-4 h-4 mr-1" />
            Update Name
          </RsButton>
        </div>
      </template>
    </RsModal>

    <!-- Help Modal -->
    <RsModal v-model="showHelpModal" title="How to Use Form Builder" size="xl" position="center">
      <div class="p-6 space-y-6">
        <!-- Getting Started -->
        <div class="help-section">
          <h3 class="text-lg font-semibold text-gray-900 mb-3 flex items-center">
            <Icon name="material-symbols:rocket-launch" class="w-5 h-5 mr-2 text-blue-600" />
            Getting Started
          </h3>
          <div class="space-y-3 text-sm text-gray-700">
            <div class="flex items-start space-x-3">
              <div class="w-6 h-6 bg-blue-100 text-blue-600 rounded-full flex items-center justify-center text-xs font-bold mt-0.5">1</div>
              <div>
                <strong>Name Your Form:</strong> Enter a descriptive name for your form at the top of the page.
              </div>
            </div>
            <div class="flex items-start space-x-3">
              <div class="w-6 h-6 bg-blue-100 text-blue-600 rounded-full flex items-center justify-center text-xs font-bold mt-0.5">2</div>
              <div>
                <strong>Add Components:</strong> Drag and drop components from the left sidebar to the canvas area.
              </div>
            </div>
            <div class="flex items-start space-x-3">
              <div class="w-6 h-6 bg-blue-100 text-blue-600 rounded-full flex items-center justify-center text-xs font-bold mt-0.5">3</div>
              <div>
                <strong>Configure Fields:</strong> Click on any field to configure its settings in the right panel.
              </div>
            </div>
          </div>
        </div>

        <!-- Component Categories -->
        <div class="help-section">
          <h3 class="text-lg font-semibold text-gray-900 mb-3 flex items-center">
            <Icon name="material-symbols:category" class="w-5 h-5 mr-2 text-green-600" />
            Component Categories
          </h3>
          <div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
            <div class="space-y-2">
              <h4 class="font-medium text-gray-800">Basic Inputs</h4>
              <ul class="text-gray-600 space-y-1">
                <li>• Text, Number, Email, Password</li>
                <li>• Text Area, URL, Phone</li>
                <li>• Date, Time, Date & Time</li>
                <li>• Color Picker, Range Slider</li>
              </ul>
            </div>
            <div class="space-y-2">
              <h4 class="font-medium text-gray-800">Selection Inputs</h4>
              <ul class="text-gray-600 space-y-1">
                <li>• Dropdown, Radio Buttons</li>
                <li>• Checkboxes, Switch Toggle</li>
                <li>• File Upload, Drop Zone</li>
                <li>• OTP Verification</li>
              </ul>
            </div>
            <div class="space-y-2">
              <h4 class="font-medium text-gray-800">Layout Elements</h4>
              <ul class="text-gray-600 space-y-1">
                <li>• Headings, Paragraphs</li>
                <li>• Dividers, Form Sections</li>
                <li>• Information Display</li>
                <li>• Action Buttons</li>
              </ul>
            </div>
            <div class="space-y-2">
              <h4 class="font-medium text-gray-800">Advanced Features</h4>
              <ul class="text-gray-600 space-y-1">
                <li>• Dynamic Lists</li>
                <li>• Repeating Groups</li>
                <li>• Conditional Logic</li>
                <li>• Custom Scripts</li>
              </ul>
            </div>
          </div>
        </div>

        <!-- Field Configuration -->
        <div class="help-section">
          <h3 class="text-lg font-semibold text-gray-900 mb-3 flex items-center">
            <Icon name="material-symbols:settings" class="w-5 h-5 mr-2 text-purple-600" />
            Field Configuration
          </h3>
          <div class="space-y-3 text-sm text-gray-700">
            <div class="bg-gray-50 p-3 rounded-lg">
              <h4 class="font-medium text-gray-800 mb-2">Quick Settings (Right Panel)</h4>
              <ul class="space-y-1 text-gray-600">
                <li>• <strong>Label:</strong> Field name displayed to users</li>
                <li>• <strong>Name:</strong> Internal field identifier</li>
                <li>• <strong>Placeholder:</strong> Hint text in empty fields</li>
                <li>• <strong>Required:</strong> Make field mandatory</li>
                <li>• <strong>Width:</strong> Control field size (S, M, L, XL)</li>
              </ul>
            </div>
            <div class="bg-gray-50 p-3 rounded-lg">
              <h4 class="font-medium text-gray-800 mb-2">Advanced Settings (Settings Icon)</h4>
              <ul class="space-y-1 text-gray-600">
                <li>• <strong>Validation:</strong> Add custom validation rules</li>
                <li>• <strong>Conditional Logic:</strong> Show/hide based on other fields</li>
                <li>• <strong>Custom Scripts:</strong> Add JavaScript functionality</li>
                <li>• <strong>Button Links:</strong> Configure process links and iframe parameters</li>
              </ul>
            </div>
          </div>
        </div>

        <!-- Button Features -->
        <div class="help-section">
          <h3 class="text-lg font-semibold text-gray-900 mb-3 flex items-center">
            <Icon name="material-symbols:smart-button" class="w-5 h-5 mr-2 text-orange-600" />
            Button Features
          </h3>
          <div class="space-y-3 text-sm text-gray-700">
            <div class="bg-blue-50 p-3 rounded-lg border border-blue-200">
              <h4 class="font-medium text-blue-800 mb-2">Link Configuration</h4>
              <ul class="space-y-1 text-blue-700">
                <li>• <strong>No Link:</strong> Regular button behavior</li>
                <li>• <strong>Custom URL:</strong> Link to any website</li>
                <li>• <strong>Process Link:</strong> Link to published workflows</li>
              </ul>
            </div>
            <div class="bg-green-50 p-3 rounded-lg border border-green-200">
              <h4 class="font-medium text-green-800 mb-2">Iframe Integration</h4>
              <ul class="space-y-1 text-green-700">
                <li>• <strong>Debug Mode:</strong> Control UI visibility (OFF = iframe mode)</li>
                <li>• <strong>Hide Completion:</strong> Auto-advance to next step</li>
                <li>• <strong>Theme:</strong> Apply custom themes (Dark/Light)</li>
                <li>• <strong>Custom Parameters:</strong> Add additional URL parameters</li>
              </ul>
            </div>
          </div>
        </div>

        <!-- Tips & Tricks -->
        <div class="help-section">
          <h3 class="text-lg font-semibold text-gray-900 mb-3 flex items-center">
            <Icon name="material-symbols:lightbulb" class="w-5 h-5 mr-2 text-yellow-600" />
            Tips & Tricks
          </h3>
          <div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
            <div class="space-y-2">
              <div class="bg-yellow-50 p-3 rounded-lg border border-yellow-200">
                <h4 class="font-medium text-yellow-800 mb-1">Keyboard Shortcuts</h4>
                <ul class="text-yellow-700 space-y-1">
                  <li>• <kbd class="bg-yellow-200 px-1 rounded">Ctrl+S</kbd> Save form</li>
                  <li>• <kbd class="bg-yellow-200 px-1 rounded">Ctrl+Z</kbd> Undo changes</li>
                  <li>• <kbd class="bg-yellow-200 px-1 rounded">Delete</kbd> Remove selected field</li>
                </ul>
              </div>
            </div>
            <div class="space-y-2">
              <div class="bg-purple-50 p-3 rounded-lg border border-purple-200">
                <h4 class="font-medium text-purple-800 mb-1">Best Practices</h4>
                <ul class="text-purple-700 space-y-1">
                  <li>• Use descriptive field names</li>
                  <li>• Group related fields together</li>
                  <li>• Test your form in preview mode</li>
                  <li>• Save your work frequently</li>
                </ul>
              </div>
            </div>
          </div>
        </div>

        <!-- Preview Mode -->
        <div class="help-section">
          <h3 class="text-lg font-semibold text-gray-900 mb-3 flex items-center">
            <Icon name="material-symbols:preview" class="w-5 h-5 mr-2 text-indigo-600" />
            Preview Mode
          </h3>
          <div class="space-y-3 text-sm text-gray-700">
            <p>Click the <strong>Preview</strong> button to see how your form will look to users. In preview mode:</p>
            <ul class="space-y-1 text-gray-600">
              <li>• Test form functionality and validation</li>
              <li>• Check responsive design on different devices</li>
              <li>• Verify all field configurations work correctly</li>
              <li>• Test button links and iframe integrations</li>
            </ul>
          </div>
        </div>
      </div>
      
      <template #footer>
        <div class="flex justify-between items-center">
          <div class="text-sm text-gray-500">
            Need more help? Check our documentation or contact support.
          </div>
          <div class="flex gap-2">
            <RsButton @click="showHelpModal = false" variant="tertiary">
              Close
            </RsButton>
            <RsButton @click="openDocumentation" variant="primary">
              <Icon name="material-symbols:description" class="mr-1" />
              View Documentation
            </RsButton>
          </div>
        </div>
      </template>
    </RsModal>

        </div>
  </template>

<script setup>
import { useFormBuilderStore } from "~/stores/formBuilder";
import { nextTick } from 'vue';
import FormBuilderHistory from "~/components/FormBuilderHistory.vue";
import FormTemplatesModal from '~/components/FormTemplatesModal.vue';
import FormBuilderFieldSettingsModal from '~/components/FormBuilderFieldSettingsModal.vue';
import FormScriptEngine from '~/components/FormScriptEngine.vue';
import ConditionalLogicEngine from '~/components/ConditionalLogicEngine.vue';
import FormHistoryModal from '~/components/FormHistoryModal.vue';
import ValidationRulesHelp from '~/components/ValidationRulesHelp.vue';

definePageMeta({
  title: "Form Builder",
  description: "Create dynamic forms with drag and drop",
  layout: "empty",
  middleware: ["auth"],
  requiresAuth: true,
});

const router = useRouter();
const formStore = useFormBuilderStore();
let toast;

// Track if we're creating a new form
const isCreatingForm = ref(false);
const newFormName = ref('');
const newFormDescription = ref('');
const newFormCategory = ref('');
const newFormGroup = ref('');

// Try to use the toast composable if available
try {
  toast = useToast();
} catch (error) {
  // Create a simple toast object if composable is not available
  toast = {
    success: (msg) => console.log('Success:', msg),
    error: (msg) => console.error('Error:', msg),
    info: (msg) => console.info('Info:', msg),
    warning: (msg) => console.warn('Warning:', msg)
  };
}

// Reactive state
const isPreview = ref(false);
const showFormSettings = ref(false);
const showTemplatesModal = ref(false);
const showFormHistoryModal = ref(false);
const showHelpModal = ref(false);
const showDropdown = ref(false);
const leftSidebarTab = ref('components');
const showFieldSettingsPanel = ref(true);
const showFieldSettings = ref(false);
const showUnsavedChangesModal = ref(false);
const navigationConfirmed = ref(false);
const pendingNavigation = ref(null);
const navigationTarget = ref(null);
const activeSettingsTab = ref('info');

// Published processes for button linking
const publishedProcesses = ref([]);

// Fetch published processes for button linking
const fetchPublishedProcesses = async () => {
  try {
    const response = await $fetch('/api/process?status=published&limit=1000')
    if (response.success) {
      publishedProcesses.value = response.data.processes.map(process => ({
        label: process.processName,
        value: process.processUUID
      }))
    }
  } catch (error) {
    console.error('Error fetching published processes:', error)
    publishedProcesses.value = []
  }
}

// Open documentation
const openDocumentation = () => {
  // Open documentation in new tab
  window.open('/documentation', '_blank')
}

// Helper function to get submit button CSS classes and styles based on category and color
const getSubmitButtonStyles = (category, color) => {
  const baseClasses = 'px-4 py-2 rounded font-medium transition-all duration-200 text-white border-0';
  
  // Use CSS custom properties from theme.css with opacity based on category
  const opacity = category === 'primary' ? '1' : '0.8';
  const hoverOpacity = category === 'primary' ? '0.9' : '0.7';
  
  return {
    classes: baseClasses,
    style: {
      backgroundColor: `rgba(var(--color-${color}), ${opacity})`,
      '--hover-bg': `rgba(var(--color-${color}), ${hoverOpacity})`
    }
  };
};

// Responsive device preview state
const selectedDevice = ref('Desktop');
const deviceSizes = ref([
  {
    name: 'Mobile',
    width: 375,
    height: 667,
    icon: 'material-symbols:smartphone',
    class: 'device-mobile'
  },
  {
    name: 'Tablet',
    width: 768,
    height: 1024,
    icon: 'material-symbols:tablet',
    class: 'device-tablet'
  },
  {
    name: 'Desktop',
    width: 1200,
    height: 800,
    icon: 'material-symbols:desktop-windows',
    class: 'device-desktop'
  }
]);

const currentDeviceConfig = computed(() => {
  return deviceSizes.value.find(device => device.name === selectedDevice.value) || deviceSizes.value[2];
});

const previewForm = ref(null);
const formScriptEngine = ref(null);
const conditionalLogicEngine = ref(null);

// Settings tabs configuration
const settingsTabs = [
  { key: 'info', label: 'Form Info', icon: 'material-symbols:info-outline' },
  { key: 'submit', label: 'Submit Button', icon: 'material-symbols:play-arrow' },
  { key: 'javascript', label: 'JavaScript', icon: 'material-symbols:code' },
  { key: 'css', label: 'CSS', icon: 'material-symbols:palette-outline' },
  { key: 'events', label: 'Events', icon: 'material-symbols:event-outline' },
  { key: 'json', label: 'Source', icon: 'material-symbols:data-object' }
];

// Computed property for form name with getter and setter
const formName = computed({
  get: () => formStore.formName,
  set: (value) => {
    if (value !== formStore.formName) {
      formStore.setFormName(value);
    }
  }
});

// Category options for form creation
const categoryOptions = [
  { label: 'Select Category', value: '' },
  { label: 'Forms', value: 'forms' },
  { label: 'Surveys', value: 'surveys' },
  { label: 'Applications', value: 'applications' },
  { label: 'Feedback', value: 'feedback' },
  { label: 'Registration', value: 'registration' },
  { label: 'Other', value: 'other' }
];

// Computed to check if we have a current form loaded
const hasCurrentForm = computed(() => {
  // Consider a form loaded if any of these conditions are true:
  // 1. Form has components (user has added fields)
  // 2. Form has an ID (saved form)
  // 3. Form name has been changed from default (form creation completed)
  return formStore.formComponents.length > 0 || 
         formStore.currentFormId ||
         (formStore.formName && 
          formStore.formName.trim() !== '' && 
          formStore.formName !== 'New Form');
});

// Form JSON representation for developer view
const formJson = computed(() => {
  return {
    formName: formStore.formName,
    formDescription: formStore.formDescription,
    formId: formStore.currentFormId,
    components: formStore.formComponents.map(component => ({
      id: component.id,
      type: component.type,
      props: component.props
    })),
    customScript: formStore.formCustomScript,
    customCSS: formStore.formCustomCSS,
    formEvents: formStore.formEvents,
    scriptMode: formStore.scriptMode,
    submitButton: formStore.submitButton
  };
});

// Convert form JSON to formatted string
const formJsonString = computed(() => {
  return JSON.stringify(formJson.value, null, 2);
});

// JSON editing state
const isEditingJson = ref(false);
const editableJsonString = ref('');

// Toggle between read-only and edit mode for JSON
const toggleJsonEditMode = () => {
  if (!isEditingJson.value) {
    // Switching to edit mode - initialize the editable string
    editableJsonString.value = formJsonString.value;
  }
  isEditingJson.value = !isEditingJson.value;
};

// Apply changes from JSON editor
const applyJsonChanges = () => {
  try {
    const importedJson = JSON.parse(editableJsonString.value);
    
    // Validate imported JSON
    if (!importedJson.formName || !Array.isArray(importedJson.components)) {
      throw new Error('Invalid form JSON structure. Must include formName and components array.');
    }
    
    // Import form data
    formStore.setFormName(importedJson.formName);
    formStore.formDescription = importedJson.formDescription || '';
    formStore.formComponents = [];
    
    // Import components
    if (importedJson.components.length > 0) {
      importedJson.components.forEach((component, index) => {
        if (component.type && component.props) {
          // Process component properties based on type
          let processedProps = { ...component.props };
          
          // Ensure required grid properties
          if (!processedProps.width) {
            processedProps.width = '100%';
          }
          
          if (!processedProps.gridColumn) {
            processedProps.gridColumn = 'span 12';
          }
          
          // Handle special component types
          switch (component.type) {
            case 'image-preview':
              // Ensure all required image preview properties
              processedProps = {
                label: processedProps.label || 'Image Preview',
                name: processedProps.name || `image_preview_${index + 1}`,
                help: processedProps.help || '',
                imageUrl: processedProps.imageUrl || 'https://placehold.co/600x400',
                altText: processedProps.altText || 'Preview image',
                caption: processedProps.caption || '',
                showZoom: processedProps.showZoom !== undefined ? processedProps.showZoom : true,
                showCaption: processedProps.showCaption !== undefined ? processedProps.showCaption : true,
                maxWidth: processedProps.maxWidth || '100%',
                height: processedProps.height || 'auto',
                ...processedProps
              };
              break;
              
            case 'repeating-group':
              // Ensure all required repeating group properties
              processedProps = {
                label: processedProps.label || 'Repeating Group',
                name: processedProps.name || `repeating_group_${index + 1}`,
                help: processedProps.help || '',
                minItems: processedProps.minItems !== undefined ? processedProps.minItems : 1,
                maxItems: processedProps.maxItems !== undefined ? processedProps.maxItems : 10,
                buttonText: processedProps.buttonText || 'Add Item',
                removeText: processedProps.removeText || 'Remove',
                fields: processedProps.fields || [
                  { type: 'text', name: 'field_1', label: 'Field 1', placeholder: 'Enter value' }
                ],
                ...processedProps
              };
              break;
              
            case 'dynamic-list':
              // Ensure all required dynamic list properties
              processedProps = {
                label: processedProps.label || 'Dynamic List',
                name: processedProps.name || `dynamic_list_${index + 1}`,
                help: processedProps.help || '',
                placeholder: processedProps.placeholder || 'Enter item',
                buttonText: processedProps.buttonText || 'Add Item',
                minItems: processedProps.minItems !== undefined ? processedProps.minItems : 0,
                maxItems: processedProps.maxItems !== undefined ? processedProps.maxItems : 20,
                defaultItems: Array.isArray(processedProps.defaultItems) ? processedProps.defaultItems : ['Item 1', 'Item 2'],
                ...processedProps
              };
              break;
              
            case 'info-display':
              // Ensure all required info display properties
              processedProps = {
                title: processedProps.title || 'Information',
                name: processedProps.name || `info_display_${index + 1}`,
                help: processedProps.help || '',
                layout: processedProps.layout || 'vertical',
                showBorder: processedProps.showBorder !== undefined ? processedProps.showBorder : true,
                backgroundColor: processedProps.backgroundColor || '#f8fafc',
                fields: Array.isArray(processedProps.fields) ? processedProps.fields : [
                  { label: 'Info Item', value: 'Value', key: 'item_1' }
                ],
                ...processedProps
              };
              break;
              
            case 'file':
              // Ensure all required file upload properties
              processedProps = {
                label: processedProps.label || 'File Upload',
                name: processedProps.name || `file_upload_${index + 1}`,
                help: processedProps.help || 'Upload a file',
                accept: processedProps.accept || '.pdf,.doc,.docx,.jpg,.jpeg,.png',
                ...processedProps
              };
              break;
              
            case 'heading':
              // Ensure all required heading properties
              processedProps = {
                value: processedProps.value || 'Heading',
                level: processedProps.level || 2,
                ...processedProps
              };
              break;
              
            case 'paragraph':
              // Ensure all required paragraph properties
              processedProps = {
                value: processedProps.value || 'Paragraph text',
                ...processedProps
              };
              break;
              
            case 'select':
            case 'radio':
            case 'checkbox':
              // Ensure options array exists
              if (!Array.isArray(processedProps.options) || processedProps.options.length === 0) {
                processedProps.options = [
                  { label: 'Option 1', value: 'option_1' },
                  { label: 'Option 2', value: 'option_2' }
                ];
              }
              break;
              
            default:
              // Basic properties for all other component types
              if (!processedProps.label && !['heading', 'paragraph', 'divider'].includes(component.type)) {
                processedProps.label = component.type.charAt(0).toUpperCase() + component.type.slice(1) + ' ' + (index + 1);
              }
              
              if (!processedProps.name && !['heading', 'paragraph', 'divider'].includes(component.type)) {
                processedProps.name = `${component.type}_${index + 1}`;
              }
              break;
          }
          
          // Create component in expected format
          const formattedComponent = {
            type: component.type,
            name: processedProps.label || component.type,
            category: getDefaultCategory(component.type),
            icon: getDefaultIcon(component.type),
            defaultProps: processedProps
          };
          
          // Add component to form
          formStore.addComponent(formattedComponent);
        } else {
          console.warn('Skipping invalid component:', component);
        }
      });
    }
    
    // Import custom code if available
    if (importedJson.customScript !== undefined) {
      formStore.formCustomScript = importedJson.customScript;
    }
    
    if (importedJson.customCSS !== undefined) {
      formStore.formCustomCSS = importedJson.customCSS;
    }
    
    // Import events if available
    if (importedJson.formEvents) {
      formStore.formEvents = importedJson.formEvents;
    }
    
    if (importedJson.scriptMode) {
      formStore.scriptMode = importedJson.scriptMode;
    }
    
    // Import submit button settings if available
    if (importedJson.submitButton) {
      formStore.submitButton = {
        enabled: importedJson.submitButton.enabled !== undefined ? importedJson.submitButton.enabled : true,
        label: importedJson.submitButton.label || 'Submit',
        category: importedJson.submitButton.category || 'primary',
        color: importedJson.submitButton.color || 'primary'
      };
      
      // Handle backward compatibility with old variant format
      if (importedJson.submitButton.variant && !importedJson.submitButton.category && !importedJson.submitButton.color) {
        const variantMapping = {
          'primary': { category: 'primary', color: 'primary' },
          'secondary': { category: 'secondary', color: 'secondary' },
          'success': { category: 'primary', color: 'success' },
          'warning': { category: 'primary', color: 'warning' },
          'danger': { category: 'primary', color: 'danger' }
        };
        const mapping = variantMapping[importedJson.submitButton.variant] || { category: 'primary', color: 'primary' };
        formStore.submitButton.category = mapping.category;
        formStore.submitButton.color = mapping.color;
      }
    }
    
    // Mark as having unsaved changes
    formStore.hasUnsavedChanges = true;
    
    // Exit edit mode and update the editable JSON
    isEditingJson.value = false;
    
    toast.success('Form configuration updated from JSON');
  } catch (err) {
    console.error('Error applying JSON changes:', err);
    toast.error(`Failed to apply JSON changes: ${err.message}`);
  }
};

// Function to copy JSON to clipboard
const copyJsonToClipboard = () => {
  navigator.clipboard.writeText(formJsonString.value)
    .then(() => {
      toast.success('JSON copied to clipboard');
    })
    .catch(err => {
      console.error('Failed to copy JSON:', err);
      toast.error('Failed to copy JSON to clipboard');
    });
};

// Function to download JSON file
const downloadJsonFile = () => {
  try {
    const jsonBlob = new Blob([formJsonString.value], { type: 'application/json' });
    const url = URL.createObjectURL(jsonBlob);
    
    const link = document.createElement('a');
    link.href = url;
    link.download = `${formStore.formName.replace(/\s+/g, '-').toLowerCase()}_${new Date().toISOString().split('T')[0]}.json`;
    link.click();
    
    URL.revokeObjectURL(url);
    toast.success('JSON file downloaded');
  } catch (err) {
    console.error('Error downloading JSON:', err);
    toast.error('Failed to download JSON file');
  }
};

// Reference to file input element
const jsonFileInput = ref(null);

// Function to handle JSON import
const handleJsonImport = (event) => {
  const file = event.target.files[0];
  if (!file) return;
  
  const reader = new FileReader();
  reader.onload = (e) => {
    try {
      const importedJson = JSON.parse(e.target.result);
      
      // If in edit mode, just update the editable content
      if (isEditingJson.value) {
        editableJsonString.value = JSON.stringify(importedJson, null, 2);
        toast.success('JSON loaded into editor. Click "Apply JSON Changes" to update the form.');
      } else {
        // Confirm before replacing current form
        if (formStore.formComponents.length > 0) {
          // Store the pending import for later confirmation
          pendingJsonImport.value = importedJson;
          fileInputToReset.value = event.target;
          showReplaceContentModal.value = true;
          return;
        }
        
        // Validate imported JSON
        if (!importedJson.formName || !Array.isArray(importedJson.components)) {
          throw new Error('Invalid form JSON structure');
        }
        
        // Import form data
        formStore.setFormName(importedJson.formName);
        formStore.formDescription = importedJson.formDescription || '';
        formStore.formComponents = [];
        
        // Import components
        if (importedJson.components.length > 0) {
          importedJson.components.forEach((component, index) => {
            if (component.type && component.props) {
              // Process component properties based on type
              let processedProps = { ...component.props };
              
              // Ensure required grid properties
              if (!processedProps.width) {
                processedProps.width = '100%';
              }
              
              if (!processedProps.gridColumn) {
                processedProps.gridColumn = 'span 12';
              }
              
              // Handle special component types
              switch (component.type) {
                case 'image-preview':
                  // Ensure all required image preview properties
                  processedProps = {
                    label: processedProps.label || 'Image Preview',
                    name: processedProps.name || `image_preview_${index + 1}`,
                    help: processedProps.help || '',
                    imageUrl: processedProps.imageUrl || 'https://placehold.co/600x400',
                    altText: processedProps.altText || 'Preview image',
                    caption: processedProps.caption || '',
                    showZoom: processedProps.showZoom !== undefined ? processedProps.showZoom : true,
                    showCaption: processedProps.showCaption !== undefined ? processedProps.showCaption : true,
                    maxWidth: processedProps.maxWidth || '100%',
                    height: processedProps.height || 'auto',
                    ...processedProps
                  };
                  break;
                  
                case 'repeating-group':
                  // Ensure all required repeating group properties
                  processedProps = {
                    label: processedProps.label || 'Repeating Group',
                    name: processedProps.name || `repeating_group_${index + 1}`,
                    help: processedProps.help || '',
                    minItems: processedProps.minItems !== undefined ? processedProps.minItems : 1,
                    maxItems: processedProps.maxItems !== undefined ? processedProps.maxItems : 10,
                    buttonText: processedProps.buttonText || 'Add Item',
                    removeText: processedProps.removeText || 'Remove',
                    fields: processedProps.fields || [
                      { type: 'text', name: 'field_1', label: 'Field 1', placeholder: 'Enter value' }
                    ],
                    ...processedProps
                  };
                  break;
                  
                case 'dynamic-list':
                  // Ensure all required dynamic list properties
                  processedProps = {
                    label: processedProps.label || 'Dynamic List',
                    name: processedProps.name || `dynamic_list_${index + 1}`,
                    help: processedProps.help || '',
                    placeholder: processedProps.placeholder || 'Enter item',
                    buttonText: processedProps.buttonText || 'Add Item',
                    minItems: processedProps.minItems !== undefined ? processedProps.minItems : 0,
                    maxItems: processedProps.maxItems !== undefined ? processedProps.maxItems : 20,
                    defaultItems: Array.isArray(processedProps.defaultItems) ? processedProps.defaultItems : ['Item 1', 'Item 2'],
                    ...processedProps
                  };
                  break;
                  
                case 'info-display':
                  // Ensure all required info display properties
                  processedProps = {
                    title: processedProps.title || 'Information',
                    name: processedProps.name || `info_display_${index + 1}`,
                    help: processedProps.help || '',
                    layout: processedProps.layout || 'vertical',
                    showBorder: processedProps.showBorder !== undefined ? processedProps.showBorder : true,
                    backgroundColor: processedProps.backgroundColor || '#f8fafc',
                    fields: Array.isArray(processedProps.fields) ? processedProps.fields : [
                      { label: 'Info Item', value: 'Value', key: 'item_1' }
                    ],
                    ...processedProps
                  };
                  break;
                  
                case 'file':
                  // Ensure all required file upload properties
                  processedProps = {
                    label: processedProps.label || 'File Upload',
                    name: processedProps.name || `file_upload_${index + 1}`,
                    help: processedProps.help || 'Upload a file',
                    accept: processedProps.accept || '.pdf,.doc,.docx,.jpg,.jpeg,.png',
                    ...processedProps
                  };
                  break;
                  
                case 'heading':
                  // Ensure all required heading properties
                  processedProps = {
                    value: processedProps.value || 'Heading',
                    level: processedProps.level || 2,
                    ...processedProps
                  };
                  break;
                  
                case 'paragraph':
                  // Ensure all required paragraph properties
                  processedProps = {
                    value: processedProps.value || 'Paragraph text',
                    ...processedProps
                  };
                  break;
                  
                case 'select':
                case 'radio':
                case 'checkbox':
                  // Ensure options array exists
                  if (!Array.isArray(processedProps.options) || processedProps.options.length === 0) {
                    processedDefaultProps.options = [
                      { label: 'Option 1', value: 'option_1' },
                      { label: 'Option 2', value: 'option_2' }
                    ];
                  }
                  // Fall through for other basic properties
                  
                default:
                  // Basic properties for all other component types
                  if (!processedDefaultProps.label && !['heading', 'paragraph', 'divider'].includes(component.type)) {
                    processedDefaultProps.label = component.name || component.type.charAt(0).toUpperCase() + component.type.slice(1);
                  }
                  
                  if (!processedDefaultProps.name && !['heading', 'paragraph', 'divider'].includes(component.type)) {
                    processedDefaultProps.name = `${component.type}_${index + 1}`;
                  }
                  
                  break;
              }
            }
            
            // Create a component in the expected format for addComponent
            const formattedComponent = {
              type: component.type,
              name: component.name || component.type,
              category: getDefaultCategory(component.type),
              icon: getDefaultIcon(component.type),
              // Use the processed default props
              defaultProps: processedDefaultProps
            };
            
            console.log('Formatted component:', formattedComponent);
            
            // Add the component to the form
            formStore.addComponent(formattedComponent);
          });
        }
        
        // Import custom code if available
        if (importedJson.customScript) {
          formStore.formCustomScript = importedJson.customScript;
        }
        
        if (importedJson.customCSS) {
          formStore.formCustomCSS = importedJson.customCSS;
        }
        
        // Import events if available
        if (importedJson.formEvents) {
          formStore.formEvents = importedJson.formEvents;
        }
        
        if (importedJson.scriptMode) {
          formStore.scriptMode = importedJson.scriptMode;
        }
        
        // Mark as having unsaved changes
        formStore.hasUnsavedChanges = true;
        
        toast.success('Form imported successfully');
      }
    } catch (err) {
      console.error('Error importing JSON:', err);
      toast.error(`Failed to import JSON: ${err.message}`);
    }
    
    // Reset file input
    event.target.value = '';
  };
  
  reader.onerror = () => {
    toast.error('Error reading file');
    // Reset file input
    event.target.value = '';
  };
  
  reader.readAsText(file);
};

// Initialize the form builder
onMounted(async () => {
  try {
    await formStore.loadSavedForms();
    
    // Check if there's a form ID in the URL query parameters
    const route = useRoute();
    const formId = route.query.id;
    
    if (formId) {
      try {
        await formStore.loadForm(formId);
        toast.success(`Form '${formStore.formName}' loaded successfully`);
      } catch (error) {
        console.error('Error loading form from ID:', error);
        toast.error(`Failed to load form: ${error.message || 'Unknown error'}`);
      }
    } else {
      // No form ID provided, ensure we start with a clean slate
      formStore.clearForm();
    }
  } catch (error) {
    console.error('Error initializing form builder:', error);
    toast.error(`Initialization error: ${error.message || 'Unknown error'}`);
  }
  
  // Add the beforeunload event listener
  window.addEventListener('beforeunload', handleBeforeUnload);
  
  // Setup keyboard shortcuts
  window.addEventListener('keydown', handleKeyboardShortcuts);

  // Close dropdown when clicking outside
  document.addEventListener('click', handleClickOutside);
});

onUnmounted(() => {
  // Remove event listeners
  window.removeEventListener('beforeunload', handleBeforeUnload);
  window.removeEventListener('keydown', handleKeyboardShortcuts);
  document.removeEventListener('click', handleClickOutside);
});

// Show warning if there are unsaved changes
const handleBeforeUnload = (event) => {
  if (formStore.hasUnsavedChanges) {
    event.preventDefault();
    event.returnValue = '';
    return '';
  }
};

// Handle keyboard shortcuts
const handleKeyboardShortcuts = (event) => {
  // Undo: Ctrl+Z
  if (event.ctrlKey && event.key === 'z' && !event.shiftKey) {
    event.preventDefault();
    if (formStore.canUndo) {
      formStore.undo();
    }
  }
  
  // Redo: Ctrl+Y or Ctrl+Shift+Z
  if ((event.ctrlKey && event.key === 'y') || 
      (event.ctrlKey && event.shiftKey && event.key === 'z')) {
    event.preventDefault();
    if (formStore.currentHistoryIndex < formStore.actionHistory.length - 1) {
      formStore.redo();
    }
  }
};

// Navigation guards
// Add navigation guard
onBeforeRouteLeave((to, from, next) => {
  // If navigation was already confirmed or there are no unsaved changes, proceed
  if (navigationConfirmed.value || !formStore.hasUnsavedChanges) {
    next();
    return;
  }
  
  // Otherwise show the confirmation modal
  showUnsavedChangesModal.value = true;
  pendingNavigation.value = () => {
    navigationConfirmed.value = true;
    next();
  };
  next(false);
});

// Navigation handlers
const cancelNavigation = () => {
  showUnsavedChangesModal.value = false;
  pendingNavigation.value = null;
  navigationTarget.value = null;
  navigationConfirmed.value = false;
};

const confirmNavigation = () => {
  showUnsavedChangesModal.value = false;
  
  if (pendingNavigation.value) {
    pendingNavigation.value();
  } else if (navigationTarget.value) {
    navigationConfirmed.value = true; // Mark as confirmed before navigating
    router.push(navigationTarget.value);
  }
};

// Handler methods
const handleAddComponent = (component) => {
  formStore.addComponent(component);
};

const handleSelectComponent = (component) => {
  if (!component || !component.id) return;
  formStore.selectComponent(component.id);
};

const handleSelectNestedComponent = (nestedComponent) => {
  if (!nestedComponent || !nestedComponent.id) return;
  
  // For nested components, we need to handle the selection differently
  // since they're not in the main formComponents array but inside section children
  formStore.selectedComponent = nestedComponent;
  formStore.selectedComponentId = nestedComponent.id;
  
  // Ensure the settings panel is open
  if (!showFieldSettingsPanel.value) {
    showFieldSettingsPanel.value = true;
  }
  
  console.log('Selected nested component:', nestedComponent);
};

// Helper function to find container at any nesting level
const findContainerRecursively = (containerId, components = formStore.formComponents, childId = null) => {
  for (const component of components) {
    // Check if this is the target container
    if (containerId && component.id === containerId) {
      return component;
    }
    
    // If searching for parent by child ID, check if this component contains the child
    if (childId && component.props.children && Array.isArray(component.props.children)) {
      const hasChild = component.props.children.some(child => child.id === childId);
      if (hasChild) {
        return component;
      }
    }
    
    // If this component has children, search recursively
    if (component.props.children && Array.isArray(component.props.children)) {
      const found = findContainerRecursively(containerId, component.props.children, childId);
      if (found) {
        return found;
      }
    }
  }
  return null;
};

const handleUpdateComponent = (updatedComponent) => {
  if (!updatedComponent || !updatedComponent.id) return;
  
  // Find the parent container at any nesting level
  const parentContainer = findContainerRecursively(null, formStore.formComponents, updatedComponent.id);
  
  if (parentContainer) {
    // Update the nested component
    const childIndex = parentContainer.props.children.findIndex(child => child.id === updatedComponent.id);
    if (childIndex !== -1) {
      parentContainer.props.children[childIndex] = updatedComponent;
      // Update the entire container to trigger reactivity
      formStore.updateComponent(parentContainer);
      console.log('Updated nested component in container:', updatedComponent);
    }
  } else {
    // If not found in sections, update as a main component
    formStore.updateComponent(updatedComponent);
  }
};

const handleMoveComponent = ({ oldIndex, newIndex }) => {
  formStore.moveComponent({ oldIndex, newIndex });
};

const handleDeleteComponent = (id) => {
  if (!id) return;
  
  // Find the parent container at any nesting level
  const parentContainer = findContainerRecursively(null, formStore.formComponents, id);
  
  if (parentContainer) {
    // Remove the nested component
    const childIndex = parentContainer.props.children.findIndex(child => child.id === id);
    if (childIndex !== -1) {
      const deletedComponent = parentContainer.props.children.splice(childIndex, 1)[0];
      // Update the entire container to trigger reactivity
      formStore.updateComponent(parentContainer);
      
      // Clear selection if the deleted component was selected
      if (formStore.selectedComponentId === id) {
        formStore.selectedComponent = null;
        formStore.selectedComponentId = null;
      }
      
      console.log('Deleted nested component from container:', deletedComponent);
      toast.success('Component deleted successfully');
    }
  } else {
    // If not found in sections, delete as a main component
    formStore.deleteComponent(id);
    toast.success('Component deleted successfully');
  }
};

const handleDuplicateComponent = (component) => {
  if (!component) return;
  
  // Create a deep copy of the component props to avoid reference issues
  const duplicatedProps = JSON.parse(JSON.stringify(component.props));
  
  // Update name to avoid conflicts
  if (duplicatedProps.name) {
    duplicatedProps.name = duplicatedProps.name + '_copy';
  }
  
  // Update label to indicate it's a copy
  if (duplicatedProps.label) {
    duplicatedProps.label = duplicatedProps.label + ' (Copy)';
  }
  
  // Create the component definition for duplication
  // Note: We don't set an ID here as the store's addComponent method will generate a new unique ID
  const componentToDuplicate = {
    type: component.type,
    name: getComponentTypeName(component.type) + ' (Copy)',
    category: getDefaultCategory(component.type),
    icon: getComponentIcon(component.type),
    defaultProps: duplicatedProps
  };
  
  // The addComponent method in the store will automatically assign a new unique ID
  formStore.addComponent(componentToDuplicate);
  toast.success('Component duplicated successfully');
};

// Delete confirmation modal state
const showDeleteModal = ref(false);

// Replace content confirmation modal state
const showReplaceContentModal = ref(false);
const pendingJsonImport = ref(null);
const pendingTemplate = ref(null);
const fileInputToReset = ref(null);

// Update form name confirmation modal state
const showUpdateFormNameModal = ref(false);
const pendingFormNameUpdate = ref('');

const showDeleteConfirmation = () => {
  if (!formStore.selectedComponent) return;
  showDeleteModal.value = true;
};

const cancelDelete = () => {
  showDeleteModal.value = false;
};

const confirmDelete = () => {
  if (formStore.selectedComponent) {
    formStore.deleteComponent(formStore.selectedComponent.id);
    toast.success('Component deleted successfully');
  }
  showDeleteModal.value = false;
};

// Replace content confirmation functions
const confirmReplaceContent = () => {
  try {
    if (pendingJsonImport.value) {
      // Handle JSON import
      if (!pendingJsonImport.value.formName || !Array.isArray(pendingJsonImport.value.components)) {
        throw new Error('Invalid form JSON structure');
      }
      
      formStore.formName = pendingJsonImport.value.formName || 'Imported Form';
      formStore.formDescription = pendingJsonImport.value.formDescription || '';
      formStore.formComponents = [];
      formStore.currentFormId = null;
      
      pendingJsonImport.value.components.forEach(component => {
        formStore.addComponent(component);
      });
      
      if (pendingJsonImport.value.customScript) {
        formStore.formCustomScript = pendingJsonImport.value.customScript;
      }
      
      if (pendingJsonImport.value.customCSS) {
        formStore.formCustomCSS = pendingJsonImport.value.customCSS;
      }
      
      toast.success('JSON imported successfully');
    } else if (pendingTemplate.value) {
      // Handle template application
      const template = pendingTemplate.value;
      
      formStore.formComponents = [];
      formStore.currentFormId = null;
      
      if (template.components && Array.isArray(template.components)) {
        template.components.forEach(component => {
          formStore.addComponent(component);
        });
      }
      
      toast.success(`Template "${template.name}" applied successfully`);
    }
  } catch (error) {
    console.error('Error replacing content:', error);
    toast.error('Failed to replace content: ' + error.message);
  } finally {
    // Reset state
    showReplaceContentModal.value = false;
    pendingJsonImport.value = null;
    pendingTemplate.value = null;
    if (fileInputToReset.value) {
      fileInputToReset.value.value = '';
      fileInputToReset.value = null;
    }
  }
};

const cancelReplaceContent = () => {
  showReplaceContentModal.value = false;
  pendingJsonImport.value = null;
  pendingTemplate.value = null;
  if (fileInputToReset.value) {
    fileInputToReset.value.value = '';
    fileInputToReset.value = null;
  }
};

// Update form name confirmation functions
const confirmUpdateFormName = () => {
  if (pendingFormNameUpdate.value) {
    formStore.setFormName(pendingFormNameUpdate.value);
  }
  showUpdateFormNameModal.value = false;
  pendingFormNameUpdate.value = '';
};

const cancelUpdateFormName = () => {
  showUpdateFormNameModal.value = false;
  pendingFormNameUpdate.value = '';
};

const handleDragOver = (event) => {
  // Always prevent default to enable drop
  event.preventDefault();
  
  // Set visual feedback
  formStore.setDraggingOver(true);
  
  // Set the drop effect
  event.dataTransfer.dropEffect = 'copy';
};

const handleDragLeave = (event) => {
  // Check if we're really leaving the drop zone or just entering a child element
  const dropZone = document.getElementById('form-drop-zone');
  const relatedTarget = event.relatedTarget;
  
  if (!dropZone || !dropZone.contains(relatedTarget)) {
  formStore.setDraggingOver(false);
  }
  
  event.preventDefault();
};

const handleDrop = (event) => {
  // Always prevent default
  event.preventDefault();
  event.stopPropagation();
  
  // Reset drag over state
  formStore.setDraggingOver(false);
  
  try {
    // Get the data from all possible formats
    let componentData;
    const formats = event.dataTransfer.types;
    
    // Log available formats for debugging
    console.log('Available formats:', formats);
    
    // Try text/plain first (most compatible format)
    if (formats.includes('text/plain')) {
      const plainText = event.dataTransfer.getData('text/plain');
      if (plainText) {
        try {
          componentData = JSON.parse(plainText);
        } catch (e) {
          console.warn('Failed to parse text/plain data', e);
        }
      }
    }
    
    // If that failed, try the custom format
    if (!componentData && formats.includes('component')) {
      const componentText = event.dataTransfer.getData('component');
      if (componentText) {
        try {
          componentData = JSON.parse(componentText);
        } catch (e) {
          console.warn('Failed to parse component data', e);
        }
      }
    }
    
    // Safari fallback: if no data was received via dataTransfer, check global variable
    if (!componentData && window.__draggedComponentData) {
      console.log('Using fallback drag data for Safari');
      componentData = window.__draggedComponentData;
      // Clear the fallback data
      window.__draggedComponentData = null;
    }
    
    // If we have valid component data, add it
    if (componentData) {
  formStore.addComponent(componentData);
    } else {
      console.warn('No valid component data found in drop event');
    }
  } catch (error) {
    console.error('Error processing dropped component:', error);
  }
};

const handleSave = async () => {
  if (!formStore.formName.trim()) {
    toast.error("Please enter a form name");
    return;
  }

  if (formStore.formComponents.length === 0) {
    toast.error("Please add at least one component to the form");
    return;
  }

  try {
    const savedForm = await formStore.saveForm();
    toast.success("Form saved successfully");
    
    // Update URL to include the form ID without reloading the page
    const newPath = `/form-builder?id=${savedForm.formUUID}`;
    window.history.replaceState({}, '', newPath);
  } catch (error) {
    console.error("Error saving form:", error);
    toast.error(`Failed to save form: ${error.message || 'Unknown error'}`);
  }
};

const togglePreview = () => {
  if (!isPreview.value && formStore.formComponents.length === 0) {
    toast.error("Please add at least one component to the form");
    return;
  }

  isPreview.value = !isPreview.value;
};

const handlePreviewSubmit = (formData) => {
  console.log("Form submitted:", formData);
  toast.success("Form submitted successfully");
};

const saveFormSettings = () => {
  // Form settings are automatically saved through the store's reactive updates
  showFormSettings.value = false;
  toast.success("Form settings saved successfully");
};

// Preview form data for script interactions
const previewFormData = ref({});

// Helper function to process nested components recursively
const processNestedComponents = (components, existingFormData, newDefaults, hasNewComponents) => {
  components.forEach(component => {
    if (component.props.name) {
      // If field is not already in existingFormData, it's a new component or needs initialization
      if (!existingFormData.hasOwnProperty(component.props.name)) {
        hasNewComponents.value = true;
        // Set default values based on component type
        switch (component.type) {
          case 'checkbox':
            newDefaults[component.props.name] = [];
            break;
          case 'number':
          case 'range':
            newDefaults[component.props.name] = component.props.value || 0;
            break;
          case 'switch':
            newDefaults[component.props.name] = component.props.value !== undefined ? component.props.value : false;
            break;
          case 'color':
            newDefaults[component.props.name] = component.props.value || '#3b82f6';
            break;
          case 'hidden':
            newDefaults[component.props.name] = component.props.value || '';
            break;
          case 'repeating-group':
            const initialGroups = [];
            const minItems = component.props.minItems || 1;
            for (let i = 0; i < minItems; i++) {
              const group = {};
              if (Array.isArray(component.props.fields)) {
                component.props.fields.forEach(field => {
                  switch (field.type) {
                    case 'number': group[field.name] = 0; break;
                    case 'checkbox': group[field.name] = []; break;
                    case 'select':
                      const defaultOption = Array.isArray(field.options) && field.options.length > 0 ? field.options[0].value : '';
                      group[field.name] = field.value || defaultOption || '';
                      break;
                    default: group[field.name] = field.value || '';
                  }
                });
              }
              initialGroups.push(group);
            }
            newDefaults[component.props.name] = initialGroups;
            break;
          case 'dynamic-list':
            newDefaults[component.props.name] = Array.isArray(component.props.defaultItems) ? [...component.props.defaultItems] : [];
            break;
          case 'repeating-table':
            // Initialize repeating table with empty array or default data
            newDefaults[component.props.name] = Array.isArray(component.props.defaultData) ? [...component.props.defaultData] : [];
            break;
          case 'select':
          case 'radio':
            if (Array.isArray(component.props.options) && component.props.options.length > 0) {
              newDefaults[component.props.name] = component.props.value || component.props.options[0].value;
            } else {
              newDefaults[component.props.name] = '';
            }
            break;
          case 'date':
          case 'time':
          case 'datetime-local':
          case 'file': // file inputs are handled by FormKit, typically initialized to null or specific file objects
             newDefaults[component.props.name] = component.props.value || null;
            break;
          // image-preview, info-display, button don't usually hold data in previewFormData directly
          case 'image-preview':
          case 'info-display':
          case 'button':
            break;
          default:
            newDefaults[component.props.name] = component.props.value || '';
        }
      }
    }
    
    // Process nested components if this component has children
    if (component.props.children && Array.isArray(component.props.children)) {
      processNestedComponents(component.props.children, existingFormData, newDefaults, hasNewComponents);
    }
  });
};

// Initialize preview form data with default values
watchEffect(() => {
  const existingFormData = { ...previewFormData.value }; // Preserve current user inputs
  let newDefaults = {};
  let hasNewComponents = { value: false };

  // Process all components including nested ones
  processNestedComponents(formStore.formComponents, existingFormData, newDefaults, hasNewComponents);

  // Only update previewFormData if it's the initial load (empty) or new components were added that need defaults
  // This prevents overwriting user input when existing components change their props (which also triggers this watchEffect)
  const isInitialLoad = Object.keys(previewFormData.value).length === 0 && Object.keys(newDefaults).length > 0;
  
  // CRITICAL FIX: Don't reinitialize if we already have data for repeating groups/arrays
  // This prevents data loss when users are editing repeating group items
  const hasExistingArrayData = Object.keys(existingFormData).some(key => Array.isArray(existingFormData[key]) && existingFormData[key].length > 0);
  
  if (isInitialLoad || (hasNewComponents.value && !hasExistingArrayData)) {
    // Smart merge: preserve existing array data, only add truly new defaults
    const smartMerge = { ...existingFormData };
    
    // Only add defaults for fields that don't exist at all
    Object.keys(newDefaults).forEach(key => {
      if (!smartMerge.hasOwnProperty(key)) {
        smartMerge[key] = newDefaults[key];
      }
    });
    
    previewFormData.value = smartMerge;
  }
});

// Handle script-driven field changes
const handleScriptFieldChange = ({ fieldName, value }) => {
  // Update the reactive form data
  const newFormData = {
    ...previewFormData.value,
    [fieldName]: value
  };
  
  previewFormData.value = newFormData;
  
  // Make form data accessible to component previews
  formStore.updatePreviewFormData(newFormData);
  
  // Try to force FormKit form to update
  nextTick(() => {
    // Try to access the FormKit form node and update it directly
    if (previewForm.value && previewForm.value.node) {
      try {
        previewForm.value.node.input(newFormData);
      } catch (error) {
        // Silent fallback
      }
    }
  });
};

// Handle script-driven field validation
const handleScriptFieldValidate = ({ fieldName }) => {
  // Could integrate with FormKit validation here
};

// Handle FormKit form input events
const handleFormKitInput = (formData, node) => {
  // Update our reactive form data - this should trigger the FormScriptEngine watcher
  const oldPreviewData = { ...previewFormData.value };
  previewFormData.value = { ...formData };
  
  // Make form data accessible to component previews
  formStore.updatePreviewFormData(previewFormData.value);
};

// Watch for changes in previewFormData to trigger FormScriptEngine
// Only update store if data actually changed to prevent recursion
watch(() => previewFormData.value, (newData, oldData) => {
  // Check if data actually changed to prevent unnecessary updates
  const newDataStr = JSON.stringify(newData);
  const oldDataStr = JSON.stringify(oldData);
  
  if (newDataStr === oldDataStr) {
    return; // No actual change, skip update
  }
  
  // CRITICAL FIX: Don't sync back to store if we have any array data at all
  // ComponentPreview.vue manages its own array data directly with the store
  const hasArrayData = Object.keys(newData).some(key => Array.isArray(newData[key]));
  
  if (hasArrayData) {
    return;
  }
  
  // Use nextTick to avoid synchronous updates that can cause recursion
  nextTick(() => {
    // Only update store if the data is still different (hasn't been changed by something else)
    const currentDataStr = JSON.stringify(previewFormData.value);
    if (currentDataStr === newDataStr) {
      formStore.updatePreviewFormData(newData);
    }
  });
}, { deep: true, immediate: false });

const navigateToManage = () => {
  // If already confirmed or no unsaved changes, navigate directly
  if (navigationConfirmed.value || !formStore.hasUnsavedChanges) {
    router.push("/form-builder/manage");
    return;
  }
  
  // Otherwise show confirmation modal
  showUnsavedChangesModal.value = true;
  navigationTarget.value = "/form-builder/manage";
};

// Handle creating a new form
const createNewForm = async () => {
  if (!newFormName.value.trim()) {
    toast.error('Please enter a form name');
    return;
  }
  
  try {
    // Set the form name and description in the store
    formStore.setFormName(newFormName.value.trim());
    formStore.formDescription = newFormDescription.value.trim();
    formStore.formCategory = newFormCategory.value.trim() || null;
    formStore.formGroup = newFormGroup.value.trim() || null;
    
    // Clear existing form components to start fresh
    formStore.formComponents = [];
    formStore.currentFormId = null; // This ensures we create a new form instead of updating existing
    
    // Save the form to the database immediately
    const savedForm = await formStore.saveForm();
    
    if (savedForm) {
      // Update URL to include the form ID
      const newPath = `/form-builder?id=${savedForm.formUUID}`;
      window.history.replaceState({}, '', newPath);
      
      // Reset navigation confirmation
      navigationConfirmed.value = false;
      
          // Reset form variables
    isCreatingForm.value = false;
    newFormName.value = '';
    newFormDescription.value = '';
    newFormCategory.value = '';
    newFormGroup.value = '';
      
      // Show success message
      toast.success(`Form "${formStore.formName}" created and saved successfully`);
    } else {
      toast.error('Failed to save form to database. Please try again.');
    }
    
  } catch (error) {
    console.error('Error creating form:', error);
    toast.error(`Failed to create form: ${error.message || 'Unknown error'}`);
  }
};

const handleOptimizeLayout = () => {
  formStore.optimizeGridLayout();
};

// Handle inserting component at specific index (for drop zones)
const handleInsertComponentAtIndex = ({ component, index }) => {
  formStore.insertComponentAtIndex(component, index);
};

// Add the new handler function
const handleDragEnter = (event) => {
  // Prevent default to allow drop
  event.preventDefault();
  // Set visual feedback
  formStore.setDraggingOver(true);
};

function handleClickOutside(event) {
  const dropdown = document.querySelector('.dropdown');
  if (dropdown && !dropdown.contains(event.target)) {
    showDropdown.value = false;
  }
}

// Handle applying a template
const applyFormTemplate = (template) => {
  // Confirm if there's already content in the form
  if (formStore.formComponents.length > 0) {
    pendingTemplate.value = template;
    showReplaceContentModal.value = true;
    return;
  }
  
  try {
    console.log('Applying template:', template.name);
    console.log('Template components:', template.components ? template.components.length : 0);
    
    // Set form name if it's a new form or user allows overwrite
    if (formStore.formName === 'New Form') {
      formStore.setFormName(template.name);
    } else {
      pendingFormNameUpdate.value = template.name;
      showUpdateFormNameModal.value = true;
    }
    
    // Reset the form components and form ID (to ensure this becomes a new form)
    formStore.formComponents = [];
    formStore.currentFormId = null; // Important: This ensures we create a new form instead of updating existing
    
    // Add the template components
    if (template.components && template.components.length > 0) {
      // Process each template component
      template.components.forEach((component, index) => {
        console.log(`Processing component ${index + 1}:`, component.type);
        
        // Handle special component types with specific properties
        let processedDefaultProps = {};
        
        if (component.defaultProps) {
          // Clone the default props to avoid reference issues
          processedDefaultProps = JSON.parse(JSON.stringify(component.defaultProps));
          
          // Ensure required grid properties are present
          if (!processedDefaultProps.width) {
            processedDefaultProps.width = '100%';
          }
          
          if (!processedDefaultProps.gridColumn) {
            processedDefaultProps.gridColumn = 'span 12';
          }
          
          // Ensure specific properties for each component type
          switch (component.type) {
            case 'image-preview':
              // Ensure all required image preview properties
              processedDefaultProps = {
                label: processedDefaultProps.label || 'Image Preview',
                name: processedDefaultProps.name || `image_preview_${index + 1}`,
                help: processedDefaultProps.help || '',
                imageUrl: processedDefaultProps.imageUrl || 'https://placehold.co/600x400',
                altText: processedDefaultProps.altText || 'Preview image',
                caption: processedDefaultProps.caption || '',
                showZoom: processedDefaultProps.showZoom !== undefined ? processedDefaultProps.showZoom : true,
                showCaption: processedDefaultProps.showCaption !== undefined ? processedDefaultProps.showCaption : true,
                maxWidth: processedDefaultProps.maxWidth || '100%',
                height: processedDefaultProps.height || 'auto',
                ...processedDefaultProps
              };
              break;
              
            case 'repeating-group':
              // Ensure all required repeating group properties
              processedDefaultProps = {
                label: processedDefaultProps.label || 'Repeating Group',
                name: processedDefaultProps.name || `repeating_group_${index + 1}`,
                help: processedDefaultProps.help || '',
                minItems: processedDefaultProps.minItems !== undefined ? processedDefaultProps.minItems : 1,
                maxItems: processedDefaultProps.maxItems !== undefined ? processedDefaultProps.maxItems : 10,
                buttonText: processedDefaultProps.buttonText || 'Add Item',
                removeText: processedDefaultProps.removeText || 'Remove',
                fields: processedDefaultProps.fields || [
                  { type: 'text', name: 'field_1', label: 'Field 1', placeholder: 'Enter value' }
                ],
                ...processedDefaultProps
              };
              break;
              
            case 'dynamic-list':
              // Ensure all required dynamic list properties
              processedDefaultProps = {
                label: processedDefaultProps.label || 'Dynamic List',
                name: processedDefaultProps.name || `dynamic_list_${index + 1}`,
                help: processedDefaultProps.help || '',
                placeholder: processedDefaultProps.placeholder || 'Enter item',
                buttonText: processedDefaultProps.buttonText || 'Add Item',
                minItems: processedDefaultProps.minItems !== undefined ? processedDefaultProps.minItems : 0,
                maxItems: processedDefaultProps.maxItems !== undefined ? processedDefaultProps.maxItems : 20,
                defaultItems: Array.isArray(processedDefaultProps.defaultItems) ? processedDefaultProps.defaultItems : ['Item 1', 'Item 2'],
                ...processedDefaultProps
              };
              break;
              
            case 'info-display':
              // Ensure all required info display properties
              processedDefaultProps = {
                title: processedDefaultProps.title || 'Information',
                name: processedDefaultProps.name || `info_display_${index + 1}`,
                help: processedDefaultProps.help || '',
                layout: processedDefaultProps.layout || 'vertical',
                showBorder: processedDefaultProps.showBorder !== undefined ? processedDefaultProps.showBorder : true,
                backgroundColor: processedDefaultProps.backgroundColor || '#f8fafc',
                fields: Array.isArray(processedDefaultProps.fields) ? processedDefaultProps.fields : [
                  { label: 'Info Item', value: 'Value', key: 'item_1' }
                ],
                ...processedDefaultProps
              };
              break;
              
            case 'file':
              // Ensure all required file upload properties
              processedDefaultProps = {
                label: processedDefaultProps.label || 'File Upload',
                name: processedDefaultProps.name || `file_upload_${index + 1}`,
                help: processedDefaultProps.help || 'Upload a file',
                accept: processedDefaultProps.accept || '.pdf,.doc,.docx,.jpg,.jpeg,.png',
                ...processedDefaultProps
              };
              break;
              
            case 'heading':
              // Ensure all required heading properties
              processedDefaultProps = {
                value: processedDefaultProps.value || 'Heading',
                level: processedDefaultProps.level || 2,
                ...processedDefaultProps
              };
              break;
              
            case 'paragraph':
              // Ensure all required paragraph properties
              processedDefaultProps = {
                value: processedDefaultProps.value || 'Paragraph text',
                ...processedDefaultProps
              };
              break;
              
            case 'select':
            case 'radio':
            case 'checkbox':
              // Ensure options array exists
              if (!Array.isArray(processedDefaultProps.options) || processedDefaultProps.options.length === 0) {
                processedDefaultProps.options = [
                  { label: 'Option 1', value: 'option_1' },
                  { label: 'Option 2', value: 'option_2' }
                ];
              }
              // Fall through for other basic properties
              
            default:
              // Basic properties for all other component types
              if (!processedDefaultProps.label && !['heading', 'paragraph', 'divider'].includes(component.type)) {
                processedDefaultProps.label = component.name || component.type.charAt(0).toUpperCase() + component.type.slice(1);
              }
              
              if (!processedDefaultProps.name && !['heading', 'paragraph', 'divider'].includes(component.type)) {
                processedDefaultProps.name = `${component.type}_${index + 1}`;
              }
              
              break;
          }
        }
        
        // Create a component in the expected format for addComponent
        const formattedComponent = {
          type: component.type,
          name: component.name || component.type,
          category: getDefaultCategory(component.type),
          icon: getDefaultIcon(component.type),
          // Use the processed default props
          defaultProps: processedDefaultProps
        };
        
        console.log('Formatted component:', formattedComponent);
        
        // Add the component to the form
        formStore.addComponent(formattedComponent);
      });
      
      console.log('Total components added:', formStore.formComponents.length);
    } else {
      console.warn('No components found in template');
    }
    
    // Set script and CSS if available
    if (template.script) {
      formStore.formCustomScript = template.script;
      console.log('Applied custom script');
    }
    
    if (template.css) {
      formStore.formCustomCSS = template.css;
      console.log('Applied custom CSS');
    }
    
    // Enable events if the template uses scripts
    if (template.hasScript) {
      formStore.formEvents = {
        onLoad: true,
        onFieldChange: true,
        onSubmit: template.script && template.script.includes('onSubmit'),
        onValidation: template.script && template.script.includes('onValidation')
      };
      console.log('Enabled form events');
    }
    
    // Mark as having unsaved changes
    formStore.hasUnsavedChanges = true;
    
    // Show success message
    toast.success(`Template "${template.name}" applied successfully`);
  } catch (error) {
    console.error('Error applying template:', error);
    toast.error('Failed to apply template: ' + error.message);
  }
};

// Helper function to get default category for component type
const getDefaultCategory = (type) => {
  const categories = {
    // Basic inputs
    'text': 'Basic Inputs',
    'textarea': 'Basic Inputs',
    'number': 'Basic Inputs',
    'email': 'Basic Inputs',
    'password': 'Basic Inputs',
    'url': 'Basic Inputs',
    'tel': 'Basic Inputs',
    'hidden': 'Basic Inputs',
    'date': 'Basic Inputs',
    'time': 'Basic Inputs',
    'datetime-local': 'Basic Inputs',
    
    // Selection inputs
    'select': 'Selection Inputs',
    'checkbox': 'Selection Inputs',
    'radio': 'Selection Inputs',
    'switch': 'Selection Inputs',
    'range': 'Selection Inputs',
    'color': 'Selection Inputs',
    
    // Layout elements
    'heading': 'Layout',
    'paragraph': 'Layout',
    'divider': 'Layout',
    'info-display': 'Layout',
    
    // Advanced inputs
    'file': 'Advanced',
    'button': 'Advanced',
    'image-preview': 'Advanced',
    'repeating-group': 'Advanced',
    'dynamic-list': 'Advanced'
  };
  
  return categories[type] || 'Basic Inputs';
};

// Helper function to get default icon for component type
const getDefaultIcon = (type) => {
  const icons = {
    // Basic inputs
    'text': 'material-symbols:text-fields',
    'textarea': 'material-symbols:article-outline',
    'number': 'material-symbols:counter-1-outline',
    'email': 'material-symbols:mail-outline',
    'password': 'material-symbols:password',
    'url': 'material-symbols:link',
    'tel': 'heroicons:device-phone-mobile',
    'hidden': 'material-symbols:visibility-off',
    'date': 'material-symbols:calendar-month-outline',
    'time': 'material-symbols:schedule-outline',
    'datetime-local': 'material-symbols:event-outline',
    
    // Selection inputs
    'select': 'material-symbols:arrow-drop-down-circle-outline',
    'checkbox': 'material-symbols:check-box-outline',
    'radio': 'material-symbols:radio-button-checked-outline',
    'switch': 'material-symbols:toggle-on',
    'range': 'material-symbols:linear-scale',
    'color': 'material-symbols:palette',
    
    // Layout elements
    'heading': 'material-symbols:title',
    'paragraph': 'material-symbols:text-snippet-outline',
    'divider': 'material-symbols:horizontal-rule',
    'info-display': 'material-symbols:info-outline',
    
    // Advanced inputs
    'file': 'material-symbols:upload-file-outline',
    'button': 'material-symbols:smart-button',
    'image-preview': 'material-symbols:image-outline',
    'repeating-group': 'heroicons:list-bullet',
    'dynamic-list': 'material-symbols:format-list-bulleted'
  };
  
  return icons[type] || 'material-symbols:add';
};

// Component icon and name helper functions (available to template)
const getComponentIcon = (type) => {
  const icons = {
    text: 'heroicons:document-text',
    textarea: 'heroicons:document-text',
    number: 'heroicons:hashtag',
    email: 'heroicons:envelope',
    password: 'heroicons:key',
    url: 'heroicons:link',
    tel: 'heroicons:device-phone-mobile',
    mask: 'heroicons:pencil-square',
    hidden: 'heroicons:eye-slash',
    select: 'heroicons:chevron-down',
    checkbox: 'heroicons:check-badge',
    radio: 'heroicons:radio',
    switch: 'material-symbols:toggle-on',
    date: 'heroicons:calendar-days',
    time: 'heroicons:clock',
    'datetime-local': 'heroicons:calendar',
    range: 'heroicons:adjustments-horizontal',
    color: 'heroicons:swatch',
    file: 'heroicons:document-arrow-up',
    otp: 'heroicons:key',
    dropzone: 'heroicons:cloud-arrow-up',
    button: 'heroicons:cursor-arrow-rays',
    heading: 'heroicons:h1',
    paragraph: 'heroicons:document-text',
    divider: 'heroicons:minus',
    'info-display': 'heroicons:information-circle'
  }
  return icons[type] || 'heroicons:square-3-stack-3d'
}

const getComponentTypeName = (type) => {
  const names = {
    text: 'Text Field',
    textarea: 'Text Area',
    number: 'Number Field',
    email: 'Email Field',
    password: 'Password Field',
    url: 'URL Field',
    tel: 'Phone Field',
    mask: 'Masked Input',
    hidden: 'Hidden Field',
    select: 'Dropdown Menu',
    checkbox: 'Checkboxes',
    radio: 'Radio Buttons',
    switch: 'Switch Toggle',
    date: 'Date Picker',
    time: 'Time Picker',
    'datetime-local': 'Date & Time',
    range: 'Range Slider',
    color: 'Color Picker',
    file: 'File Upload',
    otp: 'Verification Code',
    dropzone: 'File Drop Zone',
    button: 'Action Button',
    heading: 'Heading Text',
    paragraph: 'Paragraph Text',
    divider: 'Divider Line',
    'info-display': 'Information Display'
  }
  return names[type] || 'Form Field'
}

const getComponentTypeShort = (type) => {
  const shortNames = {
    text: 'TXT',
    textarea: 'TXT',
    number: 'NUM',
    email: 'EML',
    password: 'PWD',
    url: 'URL',
    tel: 'TEL',
    mask: 'MSK',
    hidden: 'HID',
    select: 'SEL',
    checkbox: 'CHK',
    radio: 'RAD',
    switch: 'SWT',
    date: 'DTE',
    time: 'TME',
    'datetime-local': 'DTM',
    range: 'RNG',
    color: 'CLR',
    file: 'FIL',
    otp: 'OTP',
    dropzone: 'DRP',
    button: 'BTN',
    heading: 'H' + (formStore.selectedComponent?.props?.level || '2'),
    paragraph: 'TXT',
    divider: 'DIV',
    'info-display': 'INF'
  }
  return shortNames[type] || 'FLD'
}

// Quick settings panel state and functions
const quickSettings = ref({});

// Compact width options for the sidebar
const compactWidthOptions = [
  { name: 'S', value: 25, gridColumns: 3, description: 'Small (25%)' },
  { name: 'M', value: 50, gridColumns: 6, description: 'Medium (50%)' },
  { name: 'L', value: 75, gridColumns: 9, description: 'Large (75%)' },
  { name: 'XL', value: 100, gridColumns: 12, description: 'Extra Large (100%)' }
];

// Watch for selected component changes to update quick settings
watch(() => formStore.selectedComponent, (newComponent) => {
  if (newComponent) {
    // Auto-open panel when component is selected
    showFieldSettingsPanel.value = true;
    
    // Initialize quick settings
    quickSettings.value = {
      label: newComponent.props.label || '',
      name: newComponent.props.name || '',
      placeholder: newComponent.props.placeholder || '',
      rows: newComponent.props.rows || 3,
      linkType: newComponent.props.linkType || 'none',
      linkUrl: newComponent.props.linkUrl || '',
      linkProcessId: newComponent.props.linkProcessId || '',
      iframeDebug: newComponent.props.iframeDebug || false,
      iframeHideComplete: newComponent.props.iframeHideComplete || false,
      iframeTheme: newComponent.props.iframeTheme || '',
      iframeCustomParams: newComponent.props.iframeCustomParams || '',
      required: newComponent.props.validation?.includes('required') || false
    };
    
    // Fetch published processes if this is a button component
    if (newComponent.type === 'button') {
      fetchPublishedProcesses();
    }
  }
}, { immediate: true });

// Toggle panel function
const toggleFieldSettingsPanel = () => {
  showFieldSettingsPanel.value = !showFieldSettingsPanel.value;
};

// Show/hide specific quick fields based on component type
const showQuickField = (fieldName) => {
  if (!formStore.selectedComponent) return false;
  
  const fieldConfig = {
    label: ['text', 'textarea', 'number', 'email', 'password', 'url', 'tel', 'mask', 'select', 'checkbox', 'radio', 'switch', 'date', 'time', 'datetime-local', 'range', 'color', 'file', 'otp', 'dropzone', 'button'],
    name: ['text', 'textarea', 'number', 'email', 'password', 'url', 'tel', 'mask', 'hidden', 'select', 'checkbox', 'radio', 'switch', 'date', 'time', 'datetime-local', 'range', 'color', 'file', 'otp', 'dropzone', 'button'],
    placeholder: ['text', 'textarea', 'number', 'email', 'password', 'url', 'tel', 'mask', 'select'],
    rows: ['textarea'],
    linkType: ['button'],
    linkUrl: ['button'],
    linkProcessId: ['button'],
    iframeDebug: ['button'],
    iframeHideComplete: ['button'],
    iframeTheme: ['button'],
    iframeCustomParams: ['button'],
    width: ['text', 'textarea', 'number', 'email', 'password', 'url', 'tel', 'mask', 'select', 'checkbox', 'radio', 'switch', 'date', 'time', 'datetime-local', 'range', 'color', 'file', 'otp', 'dropzone', 'button', 'heading', 'paragraph', 'info-display'],
    required: ['text', 'textarea', 'number', 'email', 'password', 'url', 'tel', 'mask', 'select', 'checkbox', 'radio', 'date', 'time', 'datetime-local', 'file', 'otp', 'dropzone']
  };
  
  return fieldConfig[fieldName]?.includes(formStore.selectedComponent.type) || false;
};

// Get placeholder text for different fields
const getPlaceholder = (fieldName) => {
  if (!formStore.selectedComponent) return '';
  
  const placeholders = {
    label: `Enter ${formStore.selectedComponent.type} label`,
    name: `${formStore.selectedComponent.type}_field`,
    placeholder: 'Enter placeholder text...',
    rows: '3'
  };
  
  return placeholders[fieldName] || '';
};

// Update quick setting and sync with component
const updateQuickSetting = (key, value, gridColumns = null) => {
  if (!formStore.selectedComponent) return;
  
  const updatedComponent = { ...formStore.selectedComponent };
  
  if (key === 'width') {
    updatedComponent.props.width = `${value}%`;
    if (gridColumns) {
      updatedComponent.props.gridColumn = `span ${gridColumns}`;
    }
  } else {
    updatedComponent.props[key] = value;
  }
  
  formStore.updateComponent(updatedComponent);
  quickSettings.value[key] = value;
};

// Update validation settings
const updateQuickValidation = (rule, enabled) => {
  if (!formStore.selectedComponent) return;
  
  const updatedComponent = { ...formStore.selectedComponent };
  let current = updatedComponent.props.validation || '';
  const rules = current.split('|').filter(r => r && r !== rule);
  
  if (enabled) {
    rules.push(rule);
  }
  
  updatedComponent.props.validation = rules.join('|');
  formStore.updateComponent(updatedComponent);
  quickSettings.value.required = enabled;
};

// Get current component width percentage
const getComponentWidthPercent = () => {
  if (!formStore.selectedComponent) return 100;
  const width = formStore.selectedComponent.props.width || '100%';
  return parseInt(width.replace('%', ''));
};

// Open full settings modal
const openFullSettingsModal = () => {
  showFieldSettings.value = true;
};





const handleConditionalLogicGenerated = (script) => {
  // Add the generated script to the form's custom script
  formStore.formCustomScript += `\n// Conditional Logic Script\n${script}`;
  toast.success('Conditional logic script added successfully');
};

const handleFormRestored = (restoredForm) => {
  // Handle form restoration logic
  console.log('Form restored:', restoredForm);
  // You might want to update the form state or show a success message
};


</script>

<style scoped>
/* Submit button hover effects using CSS custom properties */
:deep(.formkit-input[type="submit"]:hover) {
  background-color: var(--hover-bg) !important;
}
.form-name-input {
  width: 100%;
  max-width: 400px;
}

.form-name-input :deep(.formkit-inner) {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
  color: white;
}

.form-name-input :deep(.formkit-inner:focus-within) {
  border-color: rgba(255, 255, 255, 0.5);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.form-name-input :deep(input::placeholder) {
  color: rgba(255, 255, 255, 0.6);
}

.form-name-input :deep(.formkit-message) {
  color: rgba(255, 200, 200, 0.9);
  font-size: 0.7rem;
  position: absolute;
}

.grid-preview-container {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-flow: row dense;
  column-gap: 16px;
  row-gap: 12px;
  width: 100%;
  box-sizing: border-box;
}

.form-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem;
}

.form-submit {
  margin-top: 2rem;
  width: 100%;
}

/* Drop zone styling */
#form-drop-zone {
  transition: all 0.2s ease;
}

#form-drop-zone:not(.border-solid) {
  cursor: default;
}

#form-drop-zone.border-blue-400 {
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.3);
}

/* Preview mode styling */
.preview-mode {
  max-width: 1200px;
  margin: 0 auto;
  background-color: white;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  border-radius: 8px !important;
  border-color: #e5e7eb !important;
}

/* Floating Action Button */
.field-settings-fab {
  @apply w-14 h-14 bg-blue-600 hover:bg-blue-700 text-white rounded-full shadow-lg hover:shadow-xl transition-all duration-200 flex items-center justify-center;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.field-settings-fab:hover {
  transform: scale(1.05);
}

/* Instruction Tooltip */
.instruction-tooltip {
  @apply bg-white border border-gray-200 rounded-lg shadow-lg px-4 py-3 relative;
  animation: fadeInBounce 0.6s ease-out;
}

.instruction-arrow {
  @apply absolute top-full left-1/2 transform -translate-x-1/2;
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid #f3f4f6;
}

.instruction-arrow::before {
  content: '';
  position: absolute;
  top: -9px;
  left: -8px;
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid #d1d5db;
}

@keyframes fadeInBounce {
  0% {
    opacity: 0;
    transform: translateY(-10px);
  }
  60% {
    opacity: 1;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Enhanced hover states for form components */
.hover\:bg-blue-25:hover {
  background-color: rgba(59, 130, 246, 0.04);
}

/* FAB Tooltip */
.fab-tooltip {
  @apply absolute bottom-full right-0 mb-2 opacity-0 pointer-events-none transition-opacity duration-300;
}

.tooltip-arrow {
  @apply absolute top-full right-4;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid #1f2937;
}

/* Enhanced component selection feedback */
.form-component {
  position: relative;
}

.form-component::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(45deg, #3b82f6, #1d4ed8);
  border-radius: 8px;
  opacity: 0;
  z-index: -1;
  transition: opacity 0.3s ease;
}

.form-component.ring-2::before {
  opacity: 0.1;
}

/* Field Settings Panel */
.field-settings-panel {
  @apply relative bg-white border-l border-gray-200 flex flex-col overflow-hidden transition-all duration-300 ease-in-out;
}

.panel-expanded {
  @apply w-80;
}

.panel-collapsed {
  @apply w-12;
}

.panel-header-toggle-btn {
  @apply text-gray-400 hover:text-gray-600 transition-colors p-1 rounded hover:bg-gray-100;
}

.collapsed-toggle-btn {
  @apply w-8 h-8 bg-white border border-gray-200 rounded-lg flex items-center justify-center text-gray-500 hover:text-gray-700 hover:border-gray-300 hover:bg-gray-50 transition-all duration-200 shadow-sm;
}

.panel-content {
  @apply flex-1 flex flex-col overflow-hidden;
}

.panel-header {
  @apply px-4 py-3 border-b border-gray-200 bg-gray-50;
}

.panel-body {
  @apply flex-1 overflow-y-auto;
}

.empty-state {
  @apply h-full flex items-center justify-center;
}

.component-settings {
  @apply p-4 space-y-4;
}

.component-header {
  @apply pb-3 border-b border-gray-100;
}

.component-icon {
  @apply w-10 h-10 rounded-lg bg-blue-50 flex items-center justify-center flex-shrink-0;
}

.quick-actions {
  @apply grid grid-cols-1 gap-2;
}

.action-btn {
  @apply flex items-center justify-center px-3 py-2 text-sm font-medium rounded-md transition-colors duration-200;
}

.action-btn.primary {
  @apply bg-blue-600 text-white hover:bg-blue-700;
}

.action-btn.secondary {
  @apply bg-gray-100 text-gray-700 hover:bg-gray-200;
}

.action-btn.danger {
  @apply bg-red-100 text-red-700 hover:bg-red-200;
}

.quick-settings {
  @apply space-y-3;
}

.settings-section-title {
  @apply text-xs font-semibold text-gray-600 uppercase tracking-wide mb-3;
}

.setting-item {
  @apply space-y-1.5;
}

.setting-label {
  @apply block text-xs font-medium text-gray-700;
}

.width-selector-compact {
  @apply flex space-x-1;
}

.width-btn {
  @apply flex-1 px-2 py-1.5 text-xs font-medium text-center rounded-md border border-gray-200 bg-white hover:border-blue-300 hover:bg-blue-50 transition-colors duration-200;
}

.width-btn.active {
  @apply border-blue-500 bg-blue-50 text-blue-700 ring-1 ring-blue-200;
}

.setting-toggle {
  @apply flex items-center cursor-pointer;
}

.toggle-input {
  @apply sr-only;
}

.toggle-slider {
  @apply relative inline-block w-8 h-4 mr-2 bg-gray-200 rounded-full transition-colors duration-200 ease-in-out;
}

.setting-toggle input:checked + .toggle-slider {
  @apply bg-blue-600;
}

.toggle-slider::before {
  @apply absolute top-0.5 left-0.5 w-3 h-3 bg-white rounded-full transition-transform duration-200 ease-in-out;
  content: '';
}

.setting-toggle input:checked + .toggle-slider::before {
  @apply transform translate-x-4;
}

.toggle-label {
  @apply text-xs font-medium text-gray-700;
}

.collapsed-info {
  @apply h-full flex flex-col px-2 py-3;
}

.collapsed-header {
  @apply mb-4 flex justify-center;
}

.collapsed-content {
  @apply text-center w-full flex-1 flex flex-col justify-center items-center;
}

.selected-component-collapsed {
  @apply flex flex-col items-center space-y-2;
}

.component-icon-collapsed {
  @apply w-8 h-8 rounded-lg bg-blue-50 flex items-center justify-center;
}

.component-type-badge {
  @apply text-xs font-bold text-blue-700 bg-blue-100 px-1.5 py-1 rounded whitespace-nowrap;
  writing-mode: vertical-rl;
  text-orientation: upright;
}

.no-selection-collapsed {
  @apply flex flex-col items-center space-y-2;
}

.writing-mode-vertical {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
}

/* Device Preview Styles */
.device-preview-container {
  transition: all 0.3s ease-in-out;
  position: relative;
}

.device-frame {
  position: relative;
  border-radius: 20px;
  padding: 20px;
  background: #1a1a1a;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
}

.device-frame.device-mobile {
  border-radius: 25px;
  padding: 15px;
  background: linear-gradient(145deg, #2a2a2a, #1a1a1a);
  max-height: 80vh; /* Ensure it fits in viewport */
}

.device-frame.device-tablet {
  border-radius: 20px;
  padding: 20px;
  background: linear-gradient(145deg, #2a2a2a, #1a1a1a);
  max-height: 85vh; /* Ensure it fits in viewport */
}

.device-screen {
  width: 100%;
  height: 100%;
  border-radius: 15px;
  overflow: hidden;
  position: relative;
}

.device-screen.scrollable-device {
  overflow-y: auto;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch; /* iOS smooth scrolling */
}

/* Custom scrollbar for device screens */
.device-screen.scrollable-device::-webkit-scrollbar {
  width: 6px;
}

.device-screen.scrollable-device::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1);
  border-radius: 3px;
  margin: 10px 0;
}

.device-screen.scrollable-device::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 3px;
}

.device-screen.scrollable-device::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.5);
}

.device-mobile .device-screen {
  border-radius: 20px;
  min-height: 100%;
}

.device-tablet .device-screen {
  border-radius: 15px;
  min-height: 100%;
}

/* Device-specific responsive adjustments */
.device-mobile .grid-preview-container {
  font-size: 14px;
  padding: 1rem !important;
}

.device-mobile .grid-preview-container .formkit-wrapper {
  margin-bottom: 1rem;
}

.device-tablet .grid-preview-container {
  font-size: 15px;
  padding: 1.5rem !important;
}

/* Form content adjustments for devices */
.device-mobile .form-submit,
.device-tablet .form-submit {
  position: sticky;
  bottom: 0;
  background: white;
  border-top: 1px solid #e5e7eb;
  margin-top: 2rem;
  padding-top: 1rem;
  z-index: 10;
}

/* Scroll fade indicators */
.device-screen.scrollable-device::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 20px;
  background: linear-gradient(to bottom, rgba(255,255,255,0.9), rgba(255,255,255,0));
  pointer-events: none;
  z-index: 5;
}

.device-screen.scrollable-device::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 20px;
  background: linear-gradient(to top, rgba(255,255,255,0.9), rgba(255,255,255,0));
  pointer-events: none;
  z-index: 5;
}

/* Responsive grid adjustments */
@media (max-width: 768px) {
  .device-preview-container {
    transform: scale(0.8);
    transform-origin: top center;
  }
}

@media (max-width: 480px) {
  .device-preview-container {
    transform: scale(0.6);
    transform-origin: top center;
  }
}
</style>
