<template>
  <RsModal 
    v-model="isOpen" 
    :title="modalTitle" 
    size="xl" 
    position="center"
    @close="handleClose"
  >
    <template #body>
      <div v-if="component" class="field-settings-modal">
        <!-- Component Info Header -->
        <div class="bg-gradient-to-r from-blue-50 to-indigo-50 border border-blue-200 rounded-lg p-4 mb-6">
          <div class="flex items-center space-x-3">
            <div class="flex-shrink-0">
              <Icon :name="getComponentIcon(component.type)" class="w-8 h-8 text-blue-600" />
            </div>
            <div class="flex-1 min-w-0">
              <h3 class="text-lg font-medium text-gray-900">
                {{ getComponentTypeName(component.type) }}
              </h3>
              <p class="text-sm text-gray-600">
                {{ getComponentDescription(component.type) }}
              </p>
            </div>
          </div>
        </div>

        <!-- Settings Tabs -->
        <div class="border-b border-gray-200 mb-6">
          <nav class="-mb-px flex space-x-8">
            <button
              v-for="tab in availableTabs"
              :key="tab.id"
              @click="activeTab = tab.id"
              class="py-2 px-1 border-b-2 font-medium text-sm whitespace-nowrap"
              :class="activeTab === tab.id 
                ? 'border-blue-500 text-blue-600' 
                : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'"
            >
              <Icon :name="tab.icon" class="w-4 h-4 inline mr-2" />
              {{ tab.label }}
            </button>
          </nav>
        </div>

        <!-- Tab Content -->
        <div class="tab-content">
          <!-- Basic Settings Tab -->
          <div v-if="activeTab === 'basic'" class="space-y-6">
            <!-- Essential Settings Section -->
            <div class="settings-section">
              <div class="section-header">
                <h4 class="section-title">
                  <Icon name="heroicons:identification" class="w-5 h-5 mr-2" />
                  Essential Settings
                </h4>
                <p class="section-description">Basic information and identification for this field</p>
              </div>
              
              <div class="section-content">
                <!-- Field Type Changer -->
                <div v-if="availableTypeChanges.length > 0" class="type-changer-section">
                  <FormKit
                    type="select"
                    label="Field Type"
                    name="fieldType"
                    :modelValue="component.type"
                    @input="handleTypeChange"
                    :options="[
                      { label: getComponentTypeName(component.type), value: component.type, disabled: true },
                      ...availableTypeChanges.map(type => ({
                        label: `Change to ${getComponentTypeName(type)}`,
                        value: type
                      }))
                    ]"
                    help="Change this field to a similar compatible type"
                    :classes="{ outer: 'field-wrapper' }"
                  />
                  
                  <!-- Change Preview -->
                  <div v-if="showTypeChangePreview" class="type-change-preview">
                    <div class="preview-header">
                      <Icon name="heroicons:arrow-right" class="w-4 h-4 text-blue-600" />
                      <span class="text-sm font-medium text-gray-700">Preview Change</span>
                    </div>
                    <div class="preview-content">
                      <div class="preview-item">
                        <span class="preview-label">From:</span>
                        <span class="preview-value">{{ getComponentTypeName(component.type) }}</span>
                      </div>
                      <div class="preview-item">
                        <span class="preview-label">To:</span>
                        <span class="preview-value">{{ getComponentTypeName(pendingTypeChange) }}</span>
                      </div>
                      <div class="preview-item">
                        <span class="preview-label">Preserved:</span>
                        <span class="preview-value">{{ getPreservedProperties(component.type, pendingTypeChange).join(', ') }}</span>
                      </div>
                    </div>
                    <div class="preview-actions">
                      <RsButton @click="confirmTypeChange" variant="primary" size="sm">
                        <Icon name="heroicons:check" class="w-4 h-4 mr-1" />
                        Confirm Change
                      </RsButton>
                      <RsButton @click="cancelTypeChange" variant="secondary" size="sm">
                        <Icon name="heroicons:x-mark" class="w-4 h-4 mr-1" />
                        Cancel
                      </RsButton>
                    </div>
                  </div>
                </div>

                <!-- Heading-specific Essential Settings -->
                <template v-if="component.type === 'heading'">
                  <FormKit
                    type="text"
                    label="Heading Text"
                    name="value"
                    v-model="configModel.value"
                    help="The heading text that will be displayed"
                    :classes="{ outer: 'field-wrapper' }"
                    placeholder="e.g., Personal Information, Contact Details"
                    validation="required"
                  />
                  
                  <FormKit
                    type="select"
                    label="Heading Level"
                    name="level"
                    v-model="configModel.level"
                    :options="[
                      { label: 'Heading 1 (Largest)', value: 1 },
                      { label: 'Heading 2 (Large)', value: 2 },
                      { label: 'Heading 3 (Medium)', value: 3 },
                      { label: 'Heading 4 (Small)', value: 4 },
                      { label: 'Heading 5 (Smaller)', value: 5 },
                      { label: 'Heading 6 (Smallest)', value: 6 }
                    ]"
                    help="Choose the size and importance of this heading"
                    :classes="{ outer: 'field-wrapper' }"
                  />
                </template>
                
                <!-- Paragraph-specific Essential Settings -->
                <template v-else-if="component.type === 'paragraph'">
                  <FormKit
                    type="textarea"
                    label="Paragraph Text"
                    name="value"
                    v-model="configModel.value"
                    help="The text content that will be displayed"
                    :classes="{ outer: 'field-wrapper' }"
                    placeholder="Enter your paragraph text here..."
                    validation="required"
                    rows="4"
                  />
                </template>
                
                <!-- Info Display-specific Essential Settings -->
                <template v-else-if="component.type === 'info-display'">
                  <div class="space-y-4">
                    <FormKit
                      type="text"
                      label="Component Title"
                      name="title"
                      v-model="configModel.title"
                      help="Title displayed at the top of the information display"
                      :classes="{ outer: 'field-wrapper' }"
                      placeholder="e.g., User Information, Contact Details"
                    />
                    
                    <FormKit
                      type="text"
                      label="Component Name (Internal)"
                      name="name"
                      v-model="configModel.name"
                      help="Used internally to identify this component"
                      validation="required|alpha_numeric"
                      :classes="{ outer: 'field-wrapper' }"
                      placeholder="e.g., user_info, contact_details"
                    />
                    
                    <FormKit
                      type="text"
                      label="Component Label"
                      name="label"
                      v-model="configModel.label"
                      help="Label displayed above the component (optional)"
                      :classes="{ outer: 'field-wrapper' }"
                      placeholder="e.g., User Information Section"
                    />
                    
                    <FormKit
                      type="textarea"
                      label="Help Text"
                      name="help"
                      v-model="configModel.help"
                      help="Additional information or instructions for users"
                      :classes="{ outer: 'field-wrapper' }"
                      placeholder="e.g., This section displays your profile information"
                      rows="2"
                    />
                    
                    <FormKit
                      type="select"
                      label="Layout Style"
                      name="layout"
                      v-model="configModel.layout"
                      :options="[
                        { label: 'Vertical (Label above value)', value: 'vertical' },
                        { label: 'Horizontal (Label: Value)', value: 'horizontal' },
                        { label: 'Grid (2 columns)', value: 'grid' },
                        { label: 'Side by Side (2 columns)', value: 'side-by-side' }
                      ]"
                      help="How to display the information fields"
                      :classes="{ outer: 'field-wrapper' }"
                    />
                  </div>
                </template>
                
                <!-- Standard form field Essential Settings -->
                <template v-else>
                  <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <FormKit
                      v-if="showField('label') && component.type !== 'button'"
                      type="text"
                      label="Field Label"
                      name="label"
                      v-model="configModel.label"
                      help="What users will see above this field"
                      :classes="{ outer: 'field-wrapper' }"
                      placeholder="e.g., Full Name, Email Address"
                    />
                    
                    <!-- Button Text (instead of label for buttons) -->
                    <FormKit
                      v-if="component.type === 'button'"
                      type="text"
                      label="Button Text"
                      name="label"
                      v-model="configModel.label"
                      help="Text displayed on the button"
                      :classes="{ outer: 'field-wrapper' }"
                      placeholder="e.g., Submit, Save, Continue"
                    />
                    
                    <FormKit
                      v-if="showField('name')"
                      type="text"
                      label="Field Name (Internal)"
                      name="name"
                      v-model="configModel.name"
                      help="Used internally to identify this field"
                      validation="required|alpha_numeric"
                      :classes="{ outer: 'field-wrapper' }"
                      placeholder="e.g., full_name, email_address"
                    />
                  </div>

                  <FormKit
                    v-if="showField('placeholder')"
                    type="text"
                    label="Placeholder Text"
                    name="placeholder"
                    v-model="configModel.placeholder"
                    help="Hint text shown inside the empty field"
                    :classes="{ outer: 'field-wrapper' }"
                    placeholder="e.g., Enter your email address..."
                  />
                  
                  <FormKit
                    v-if="showField('help')"
                    type="textarea"
                    label="Help Text"
                    name="help"
                    v-model="configModel.help"
                    help="Additional instructions or guidance for users"
                    :classes="{ outer: 'field-wrapper' }"
                    placeholder="e.g., We'll use this to send you updates about your order"
                    rows="2"
                  />

                  <FormKit
                    v-if="showField('rows')"
                    type="number"
                    label="Number of Rows"
                    name="rows"
                    v-model="configModel.rows"
                    help="Number of visible text lines in the textarea"
                    :classes="{ outer: 'field-wrapper' }"
                    placeholder="3"
                    min="1"
                    max="20"
                  />

                  <FormKit
                    v-if="showField('readonly')"
                    type="switch"
                    label="Read Only"
                    name="readonly"
                    v-model="configModel.readonly"
                    help="Users cannot edit this field value"
                    :classes="{ outer: 'field-wrapper' }"
                  />
                </template>
              </div>
            </div>


            <!-- Component-Specific Settings -->
            <div v-if="hasSpecificSettings" class="settings-section">
              <div class="section-header">
                <h4 class="section-title">
                  <Icon name="heroicons:cog-6-tooth" class="w-5 h-5 mr-2" />
                  {{ getComponentTypeName(component.type) }} Settings
                </h4>
                <p class="section-description">Settings specific to this type of field</p>
              </div>
              
              <div class="section-content">
                <!-- Text Input Specific -->
                <template v-if="component.type === 'mask'">
                  <FormKit
                    type="text"
                    label="Input Mask Pattern"
                    name="mask"
                    v-model="configModel.mask"
                    help="Pattern for formatting input (e.g., ###-###-#### for phone)"
                    :classes="{ outer: 'field-wrapper' }"
                    placeholder="###-###-####"
                  />
                  <div class="mask-examples">
                    <p class="text-sm font-medium text-gray-700 mb-2">Common patterns:</p>
                    <div class="grid grid-cols-2 gap-2 text-xs">
                      <RsButton @click="configModel.mask = '###-###-####'" variant="secondary-outline" size="sm">
                        Phone: ###-###-####
                      </RsButton>
                      <RsButton @click="configModel.mask = '##/##/####'" variant="secondary-outline" size="sm">
                        Date: ##/##/####
                      </RsButton>
                      <RsButton @click="configModel.mask = 'AA-####'" variant="secondary-outline" size="sm">
                        Code: AA-####
                      </RsButton>
                      <RsButton @click="configModel.mask = '#### #### #### ####'" variant="secondary-outline" size="sm">
                        Credit Card: #### #### #### ####
                      </RsButton>
                    </div>
                  </div>
                </template>

                <!-- OTP Specific -->
                <template v-if="component.type === 'otp'">
                  <FormKit
                    type="range"
                    label="Number of Digits"
                    name="digits"
                    v-model="configModel.digits"
                    help="How many digits for the verification code"
                    :min="4"
                    :max="8"
                    :step="1"
                    :classes="{ outer: 'field-wrapper' }"
                  />
                  <div class="text-center mt-2">
                    <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-blue-100 text-blue-800">
                      {{ configModel.digits || 6 }} digits
                    </span>
                  </div>
                </template>

                <!-- File Upload Specific -->
                <template v-if="component.type === 'dropzone'">
                  <div class="grid grid-cols-2 gap-4">
                    <FormKit
                      type="text"
                      label="Accepted File Types"
                      name="accept"
                      v-model="configModel.accept"
                      help="File types allowed (e.g., image/*, .pdf)"
                      :classes="{ outer: 'field-wrapper' }"
                      placeholder="image/*,.pdf,.doc"
                    />
                    
                    <FormKit
                      type="number"
                      label="Max File Size (MB)"
                      name="maxSize"
                      v-model="configModel.maxSizeMB"
                      help="Maximum size per file in megabytes"
                      :classes="{ outer: 'field-wrapper' }"
                      placeholder="5"
                    />
                  </div>
                  
                  <div class="grid grid-cols-2 gap-4">
                    <FormKit
                      type="number"
                      label="Max Number of Files"
                      name="maxFiles"
                      v-model="configModel.maxFiles"
                      help="Maximum number of files allowed"
                      :classes="{ outer: 'field-wrapper' }"
                      :min="1"
                      placeholder="5"
                    />
                    
                    <FormKit
                      type="switch"
                      label="Allow Multiple Files"
                      name="multiple"
                      v-model="configModel.multiple"
                      help="Enable uploading multiple files at once"
                      :classes="{ outer: 'field-wrapper' }"
                    />
                  </div>
                </template>

                <!-- Range Slider Specific -->
                <template v-if="component.type === 'range'">
                  <div class="grid grid-cols-3 gap-4">
                    <FormKit
                      type="number"
                      label="Minimum Value"
                      name="min"
                      v-model="configModel.min"
                      help="Lowest value allowed"
                      :classes="{ outer: 'field-wrapper' }"
                    />
                    
                    <FormKit
                      type="number"
                      label="Maximum Value"
                      name="max"
                      v-model="configModel.max"
                      help="Highest value allowed"
                      :classes="{ outer: 'field-wrapper' }"
                    />
                    
                    <FormKit
                      type="number"
                      label="Step Size"
                      name="step"
                      v-model="configModel.step"
                      help="Increment between values"
                      :classes="{ outer: 'field-wrapper' }"
                      :min="0.01"
                      :step="0.01"
                    />
                  </div>
                </template>



                <!-- Button Configuration -->
                <template v-if="component.type === 'button'">
                  <div class="grid grid-cols-2 gap-4">
                    <FormKit
                      type="select"
                      label="Button Type"
                      name="buttonType"
                      v-model="configModel.buttonType"
                      :options="[
                        { label: '🔵 Button (Regular)', value: 'button' },
                        { label: '✅ Submit (Form Submit)', value: 'submit' },
                        { label: '🔄 Reset (Clear Form)', value: 'reset' }
                      ]"
                      help="Choose the button behavior"
                      :classes="{ outer: 'field-wrapper' }"
                    />
                    
                    <FormKit
                      type="select"
                      label="Button Style"
                      name="variant"
                      v-model="configModel.variant"
                      :options="[
                        { label: 'Primary (Blue)', value: 'primary' },
                        { label: 'Secondary (Gray)', value: 'secondary' },
                        { label: 'Success (Green)', value: 'success' },
                        { label: 'Danger (Red)', value: 'danger' },
                        { label: 'Warning (Orange)', value: 'warning' },
                        { label: 'Custom Color', value: 'custom' }
                      ]"
                      help="Visual appearance of the button"
                      :classes="{ outer: 'field-wrapper' }"
                    />
                  </div>
                  
                  <!-- Custom Color Picker -->
                  <div v-if="configModel.variant === 'custom'" class="space-y-3">
                    <h5 class="text-sm font-medium text-gray-700 border-b pb-2">Custom Color Settings</h5>
                    
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                      <FormKit
                        type="color"
                        label="Background Color"
                        name="customBackgroundColor"
                        v-model="configModel.customBackgroundColor"
                        help="Choose the button background color"
                        :classes="{ outer: 'field-wrapper' }"
                      />
                      
                      <FormKit
                        type="color"
                        label="Text Color"
                        name="customTextColor"
                        v-model="configModel.customTextColor"
                        help="Choose the button text color"
                        :classes="{ outer: 'field-wrapper' }"
                      />
                    </div>
                    
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                      <FormKit
                        type="color"
                        label="Border Color"
                        name="customBorderColor"
                        v-model="configModel.customBorderColor"
                        help="Choose the button border color"
                        :classes="{ outer: 'field-wrapper' }"
                      />
                      
                      <FormKit
                        type="number"
                        label="Border Width (px)"
                        name="customBorderWidth"
                        v-model="configModel.customBorderWidth"
                        help="Set the border width in pixels"
                        :classes="{ outer: 'field-wrapper' }"
                        :min="0"
                        :max="10"
                        placeholder="2"
                      />
                    </div>
                    
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                      <FormKit
                        type="number"
                        label="Border Radius (px)"
                        name="customBorderRadius"
                        v-model="configModel.customBorderRadius"
                        help="Set the corner roundness in pixels"
                        :classes="{ outer: 'field-wrapper' }"
                        :min="0"
                        :max="50"
                        placeholder="6"
                      />
                      
                      <FormKit
                        type="select"
                        label="Hover Effect"
                        name="customHoverEffect"
                        v-model="configModel.customHoverEffect"
                        :options="[
                          { label: 'None', value: 'none' },
                          { label: 'Darken', value: 'darken' },
                          { label: 'Lighten', value: 'lighten' },
                          { label: 'Scale', value: 'scale' },
                          { label: 'Glow', value: 'glow' }
                        ]"
                        help="Choose hover animation effect"
                        :classes="{ outer: 'field-wrapper' }"
                      />
                    </div>
                    
                    <!-- Color Preview -->
                    <div class="mt-4 p-3 bg-gray-50 border border-gray-200 rounded-lg">
                      <h6 class="text-sm font-medium text-gray-700 mb-2">Color Preview</h6>
                      <div class="flex items-center space-x-3">
                        <button
                          class="px-4 py-2 rounded font-medium transition-all duration-200"
                          :style="getCustomButtonStyles()"
                          disabled
                        >
                          {{ configModel.buttonText || configModel.label || 'Button Preview' }}
                        </button>
                        <div class="text-xs text-gray-600">
                          <div>Background: {{ configModel.customBackgroundColor || '#3b82f6' }}</div>
                          <div>Text: {{ configModel.customTextColor || '#ffffff' }}</div>
                          <div>Border: {{ configModel.customBorderColor || 'transparent' }}</div>
                        </div>
                      </div>
                    </div>
                  </div>
                  
                  <div class="grid grid-cols-2 gap-4">
                    <FormKit
                      type="select"
                      label="Button Size"
                      name="size"
                      v-model="configModel.size"
                      :options="[
                        { label: 'Small', value: 'sm' },
                        { label: 'Medium', value: 'md' },
                        { label: 'Large', value: 'lg' }
                      ]"
                      help="Size of the button"
                      :classes="{ outer: 'field-wrapper' }"
                    />
                    
                    <FormKit
                      type="text"
                      label="Icon (Optional)"
                      name="icon"
                      v-model="configModel.icon"
                      help="Icon name (e.g., 'material-symbols:add')"
                      :classes="{ outer: 'field-wrapper' }"
                      placeholder="material-symbols:add"
                    />
                  </div>

                  <div class="grid grid-cols-2 gap-4">
                    <FormKit
                      type="switch"
                      label="Show Label Above Button"
                      name="showLabel"
                      v-model="configModel.showLabel"
                      help="Display the label text above the button"
                      :classes="{ outer: 'field-wrapper' }"
                    />
                    
                    <FormKit
                      type="switch"
                      label="Show Text on Button"
                      name="showButtonText"
                      v-model="configModel.showButtonText"
                      help="Display text on the button (icon-only if disabled)"
                      :classes="{ outer: 'field-wrapper' }"
                    />
                  </div>
                  
                  <FormKit
                    v-if="configModel.showButtonText !== false"
                    type="text"
                    label="Button Text"
                    name="buttonText"
                    v-model="configModel.buttonText"
                    help="Text displayed on the button (uses label if empty)"
                    :classes="{ outer: 'field-wrapper' }"
                    placeholder="e.g., Submit, Save, Continue"
                  />

                  <!-- Button Link Settings -->
                  <div class="mt-6 space-y-3">
                    <h5 class="text-sm font-medium text-gray-700 border-b pb-2">Button Link Settings</h5>
                    
                    <FormKit
                      type="select"
                      label="Link Type"
                      name="linkType"
                      v-model="configModel.linkType"
                      :options="[
                        { label: 'No Link', value: 'none' },
                        { label: 'Custom URL', value: 'url' },
                        { label: 'Process Link', value: 'process' }
                      ]"
                      help="Choose how the button should behave when clicked"
                      :classes="{ outer: 'field-wrapper' }"
                    />

                    <!-- Custom URL Link -->
                    <div v-if="configModel.linkType === 'url'" class="space-y-3">
                      <FormKit
                        type="text"
                        label="URL"
                        name="linkUrl"
                        v-model="configModel.linkUrl"
                        help="Enter the URL to navigate to when button is clicked"
                        :classes="{ outer: 'field-wrapper' }"
                        placeholder="https://example.com"
                        validation="url"
                      />
                      
                      <FormKit
                        type="select"
                        label="Open In"
                        name="linkTarget"
                        v-model="configModel.linkTarget"
                        :options="[
                          { label: 'Same Window', value: '_self' },
                          { label: 'New Window/Tab', value: '_blank' }
                        ]"
                        help="Choose how the link should open"
                        :classes="{ outer: 'field-wrapper' }"
                      />
                    </div>

                    <!-- Process Link -->
                    <div v-if="configModel.linkType === 'process'" class="space-y-3">
                      <FormKit
                        type="select"
                        label="Select Process"
                        name="linkProcessId"
                        v-model="configModel.linkProcessId"
                        :options="publishedProcesses"
                        help="Choose a published process to link to"
                        :classes="{ outer: 'field-wrapper' }"
                        placeholder="Select a process..."
                      />
                      
                      <FormKit
                        type="select"
                        label="Open In"
                        name="linkTarget"
                        v-model="configModel.linkTarget"
                        :options="[
                          { label: 'Same Window', value: '_self' },
                          { label: 'New Window/Tab', value: '_blank' }
                        ]"
                        help="Choose how the link should open"
                        :classes="{ outer: 'field-wrapper' }"
                      />

                      <!-- Iframe Parameters -->
                      <div class="mt-4 p-3 bg-blue-50 border border-blue-200 rounded-lg">
                        <h6 class="text-sm font-medium text-blue-800 mb-3">Iframe Integration Parameters</h6>
                        
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                          <FormKit
                            type="switch"
                            label="Debug Mode"
                            name="iframeDebug"
                            v-model="configModel.iframeDebug"
                            help="Enable debug mode (show UI chrome) - OFF for iframe mode"
                            :classes="{ outer: 'field-wrapper' }"
                          />
                          
                          <FormKit
                            type="switch"
                            label="Hide Completion"
                            name="iframeHideComplete"
                            v-model="configModel.iframeHideComplete"
                            help="Hide completion message (auto-advance)"
                            :classes="{ outer: 'field-wrapper' }"
                          />
                        </div>

                        <div class="grid grid-cols-1 md:grid-cols-2 gap-3 mt-3">
                          <FormKit
                            type="select"
                            label="Theme"
                            name="iframeTheme"
                            v-model="configModel.iframeTheme"
                            :options="[
                              { label: 'Default', value: '' },
                              { label: 'Dark', value: 'dark' },
                              { label: 'Light', value: 'light' }
                            ]"
                            help="Apply custom theme to the workflow"
                            :classes="{ outer: 'field-wrapper' }"
                          />
                          
                          <FormKit
                            type="text"
                            label="Custom Parameters"
                            name="iframeCustomParams"
                            v-model="configModel.iframeCustomParams"
                            help="Additional URL parameters (e.g., 'param1=value1&param2=value2')"
                            :classes="{ outer: 'field-wrapper' }"
                            placeholder="param1=value1&param2=value2"
                          />
                        </div>

                        <div class="mt-3 p-2 bg-gray-100 rounded text-xs text-gray-600">
                          <strong>Generated URL Preview:</strong><br>
                          <code class="text-blue-600">{{ getIframeUrlPreview() }}</code>
                        </div>
                      </div>
                    </div>
                  </div>
                  
                  <!-- Button Action Script -->
                  <div class="mt-6 space-y-3">
                    <h5 class="text-sm font-medium text-gray-700 border-b pb-2">Button Click Action</h5>
                    <p class="text-xs text-gray-600">
                      Write JavaScript code to execute when this button is clicked. You can access form data and perform actions.
                    </p>
                    
                    <div class="bg-gray-50 border border-gray-200 rounded-lg p-3">
                      <div class="mb-2 text-xs text-gray-600">
                        <strong>Available functions:</strong> getField(), setField(), setFieldByLabel(), getFieldOptions(), showField(), hideField(), enableField(), disableField(), showSuccess(), showError(), showInfo(), showWarning(), showConfirm(), showToast()
                      </div>
                      <textarea
                        v-model="configModel.onClick"
                        class="w-full h-32 font-mono text-sm p-2 border border-gray-300 rounded"
                        placeholder="// Example:
// Get values from other fields
const name = getField('name');
const email = getField('email');

// Show a message
if (name && email) {
  showSuccess('Form data is valid!');
} else {
  showError('Please fill in all required fields');
}"
                      ></textarea>
                    </div>
                    
                    <!-- Quick Templates -->
                    <div class="flex flex-wrap gap-2">
                      <button
                        @click="insertButtonScriptTemplate('validation')"
                        class="text-xs px-2 py-1 bg-blue-50 text-blue-700 border border-blue-200 rounded hover:bg-blue-100"
                      >
                        Insert Validation Example
                      </button>
                      <button
                        @click="insertButtonScriptTemplate('calculation')"
                        class="text-xs px-2 py-1 bg-blue-50 text-blue-700 border border-blue-200 rounded hover:bg-blue-100"
                      >
                        Insert Calculation Example
                      </button>
                      <button
                        @click="insertButtonScriptTemplate('toggle')"
                        class="text-xs px-2 py-1 bg-blue-50 text-blue-700 border border-blue-200 rounded hover:bg-blue-100"
                      >
                        Insert Toggle Fields Example
                      </button>
                    </div>
                  </div>
                </template>

                <!-- Dynamic List Configuration -->
                <template v-if="component.type === 'dynamic-list'">
                  <div class="space-y-6">
                    <!-- Basic List Settings -->
                    <div class="grid grid-cols-2 gap-4">
                      <FormKit
                        type="text"
                        label="Add Button Text"
                        name="buttonText"
                        v-model="configModel.buttonText"
                        help="Text for the add item button"
                        :classes="{ outer: 'field-wrapper' }"
                        placeholder="Add Item"
                      />
                      
                      <FormKit
                        type="select"
                        label="Item Type"
                        name="itemType"
                        v-model="configModel.itemType"
                        :options="[
                          { label: 'Text', value: 'text' },
                          { label: 'Number', value: 'number' },
                          { label: 'Email', value: 'email' },
                          { label: 'URL', value: 'url' }
                        ]"
                        help="Type of data for list items"
                        :classes="{ outer: 'field-wrapper' }"
                      />
                    </div>

                    <!-- Item Limits -->
                    <div class="grid grid-cols-2 gap-4">
                      <FormKit
                        type="number"
                        label="Minimum Items"
                        name="minItems"
                        v-model="configModel.minItems"
                        help="Minimum number of items required"
                        :classes="{ outer: 'field-wrapper' }"
                        :min="0"
                        placeholder="0"
                      />
                      
                      <FormKit
                        type="number"
                        label="Maximum Items"
                        name="maxItems"
                        v-model="configModel.maxItems"
                        help="Maximum number of items allowed"
                        :classes="{ outer: 'field-wrapper' }"
                        :min="1"
                        placeholder="10"
                      />
                    </div>

                    <!-- Item Validation -->
                    <FormKit
                      type="text"
                      label="Item Validation Rules"
                      name="itemValidation"
                      v-model="configModel.itemValidation"
                      help="Validation rules for individual items (e.g., 'required|min:3|max:50')"
                      :classes="{ outer: 'field-wrapper' }"
                      placeholder="required|min:3"
                    />

                    <!-- Behavior Settings -->
                    <div class="space-y-4">
                      <h5 class="text-sm font-medium text-gray-700 border-b pb-2">Behavior Settings</h5>
                      
                      <div class="grid grid-cols-2 gap-4">
                        <FormKit
                          type="switch"
                          label="Allow Duplicates"
                          name="allowDuplicates"
                          v-model="configModel.allowDuplicates"
                          help="Allow duplicate items in the list"
                          :classes="{ outer: 'field-wrapper' }"
                        />

                        <FormKit
                          type="switch"
                          label="Enable Sorting"
                          name="enableSorting"
                          v-model="configModel.enableSorting"
                          help="Allow drag & drop reordering"
                          :classes="{ outer: 'field-wrapper' }"
                        />

                        <FormKit
                          type="switch"
                          label="Enable Search"
                          name="enableSearch"
                          v-model="configModel.enableSearch"
                          help="Add search/filter functionality"
                          :classes="{ outer: 'field-wrapper' }"
                        />

                        <FormKit
                          type="switch"
                          label="Show Item Counter"
                          name="showItemCounter"
                          v-model="configModel.showItemCounter"
                          help="Display current item count"
                          :classes="{ outer: 'field-wrapper' }"
                        />

                        <FormKit
                          type="switch"
                          label="Confirm Delete"
                          name="confirmDelete"
                          v-model="configModel.confirmDelete"
                          help="Require confirmation before deleting"
                          :classes="{ outer: 'field-wrapper' }"
                        />

                        <FormKit
                          type="switch"
                          label="Bulk Operations"
                          name="bulkOperations"
                          v-model="configModel.bulkOperations"
                          help="Enable bulk select/delete operations"
                          :classes="{ outer: 'field-wrapper' }"
                        />
                      </div>
                    </div>

                    <!-- Import/Export Settings -->
                    <div class="space-y-4">
                      <h5 class="text-sm font-medium text-gray-700 border-b pb-2">Import/Export Settings</h5>
                      
                      <div class="grid grid-cols-2 gap-4">
                        <FormKit
                          type="switch"
                          label="Enable Import"
                          name="importEnabled"
                          v-model="configModel.importEnabled"
                          help="Allow importing items from files"
                          :classes="{ outer: 'field-wrapper' }"
                        />

                        <FormKit
                          type="select"
                          label="Export Format"
                          name="exportFormat"
                          v-model="configModel.exportFormat"
                          :options="[
                            { label: 'JSON', value: 'json' },
                            { label: 'CSV', value: 'csv' },
                            { label: 'Text', value: 'txt' }
                          ]"
                          help="Default format for exporting items"
                          :classes="{ outer: 'field-wrapper' }"
                        />
                      </div>
                    </div>

                    <!-- Default Items -->
                    <div class="space-y-4">
                      <h5 class="text-sm font-medium text-gray-700 border-b pb-2">Default Items</h5>
                      
                      <div class="border rounded-md p-3 bg-gray-50 space-y-2">
                        <div v-for="(item, index) in (configModel.defaultItems || [])" :key="index" class="flex items-center">
                          <input
                            type="text"
                            v-model="configModel.defaultItems[index]"
                            class="flex-1 border border-gray-300 rounded px-2 py-1 text-sm"
                            placeholder="Enter default item"
                          />
                          <button 
                            @click="removeDefaultItem(index)"
                            class="ml-2 text-red-500 hover:text-red-700"
                            type="button"
                          >
                            <Icon name="material-symbols:delete-outline" class="w-4 h-4" />
                          </button>
                        </div>
                        <button 
                          @click="addDefaultItem"
                          class="text-sm text-blue-600 hover:text-blue-800 flex items-center"
                          type="button"
                        >
                          <Icon name="material-symbols:add-circle-outline" class="w-4 h-4 mr-1" />
                          Add Default Item
                        </button>
                      </div>
                    </div>
                  </div>
                </template>

                <!-- Data Table Configuration -->
                <template v-if="component.type === 'repeating-table'">
                  <div class="space-y-6">
                    <!-- Table Limits -->
                    <div class="grid grid-cols-2 gap-4">
                      <FormKit
                        type="number"
                        label="Minimum Records"
                        name="minRecords"
                        v-model="configModel.minRecords"
                        help="Minimum number of records required"
                        :classes="{ outer: 'field-wrapper' }"
                        :min="0"
                        placeholder="0"
                      />
                      
                      <FormKit
                        type="number"
                        label="Maximum Records"
                        name="maxRecords"
                        v-model="configModel.maxRecords"
                        help="Maximum number of records allowed"
                        :classes="{ outer: 'field-wrapper' }"
                        :min="1"
                        placeholder="50"
                      />
                    </div>

                    <!-- Button Text Settings -->
                    <div class="grid grid-cols-2 gap-4">
                      <FormKit
                        type="text"
                        label="Add Button Text"
                        name="buttonText"
                        v-model="configModel.buttonText"
                        help="Text for the add record button"
                        :classes="{ outer: 'field-wrapper' }"
                        placeholder="Add Record"
                      />
                      
                      <FormKit
                        type="text"
                        label="Edit Button Text"
                        name="editText"
                        v-model="configModel.editText"
                        help="Text for the edit button"
                        :classes="{ outer: 'field-wrapper' }"
                        placeholder="Edit"
                      />

                      <FormKit
                        type="text"
                        label="Delete Button Text"
                        name="deleteText"
                        v-model="configModel.deleteText"
                        help="Text for the delete button"
                        :classes="{ outer: 'field-wrapper' }"
                        placeholder="Delete"
                      />
                    </div>

                    <!-- Table Behavior Settings -->
                    <div class="space-y-4">
                      <h5 class="text-sm font-medium text-gray-700 border-b pb-2">Table Behavior</h5>
                      
                      <div class="grid grid-cols-2 gap-4">
                        <FormKit
                          type="switch"
                          label="Show Row Numbers"
                          name="showRowNumbers"
                          v-model="configModel.showRowNumbers"
                          help="Display row numbers in the table"
                          :classes="{ outer: 'field-wrapper' }"
                        />

                        <FormKit
                          type="switch"
                          label="Allow Edit"
                          name="allowEdit"
                          v-model="configModel.allowEdit"
                          help="Allow editing existing records"
                          :classes="{ outer: 'field-wrapper' }"
                        />

                        <FormKit
                          type="switch"
                          label="Allow Delete"
                          name="allowDelete"
                          v-model="configModel.allowDelete"
                          help="Allow deleting records"
                          :classes="{ outer: 'field-wrapper' }"
                        />

                        <FormKit
                          type="switch"
                          label="Confirm Delete"
                          name="confirmDelete"
                          v-model="configModel.confirmDelete"
                          help="Require confirmation before deleting"
                          :classes="{ outer: 'field-wrapper' }"
                        />

                        <FormKit
                          type="switch"
                          label="Enable Search"
                          name="enableSearch"
                          v-model="configModel.enableSearch"
                          help="Add search functionality to the table"
                          :classes="{ outer: 'field-wrapper' }"
                        />

                        <FormKit
                          type="switch"
                          label="Enable Export"
                          name="enableExport"
                          v-model="configModel.enableExport"
                          help="Allow exporting table data"
                          :classes="{ outer: 'field-wrapper' }"
                        />
                      </div>
                    </div>

                    <!-- Table Columns Management -->
                    <div class="space-y-4">
                      <div class="flex justify-between items-center">
                        <h5 class="text-sm font-medium text-gray-700">Table Columns</h5>
                        <RsButton @click="addTableColumn" variant="primary" size="sm">
                          <Icon name="heroicons:plus" class="w-4 h-4 mr-1" />
                          Add Column
                        </RsButton>
                      </div>
                      
                      <div class="border rounded-md p-3 bg-gray-50 space-y-3">
                        <div v-for="(column, index) in (configModel.columns || [])" :key="index" class="border p-3 rounded bg-white">
                          <div class="flex justify-between items-center mb-3">
                            <h4 class="font-medium text-sm text-gray-800">Column {{ index + 1 }}</h4>
                            <button 
                              @click="removeTableColumn(index)"
                              class="text-red-500 hover:text-red-700"
                              type="button"
                            >
                              <Icon name="material-symbols:delete-outline" class="w-4 h-4" />
                            </button>
                          </div>
                          
                          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <FormKit
                              type="text"
                              label="Column Name"
                              v-model="column.name"
                              placeholder="e.g., name, email, phone"
                              :classes="{ outer: 'field-wrapper' }"
                            />
                            
                            <FormKit
                              type="text"
                              label="Column Label"
                              v-model="column.label"
                              placeholder="e.g., Name, Email, Phone"
                              :classes="{ outer: 'field-wrapper' }"
                            />
                            
                            <FormKit
                              type="select"
                              label="Column Type"
                              v-model="column.type"
                              :options="[
                                { label: 'Text', value: 'text' },
                                { label: 'Number', value: 'number' },
                                { label: 'Email', value: 'email' },
                                { label: 'Phone', value: 'tel' },
                                { label: 'Date', value: 'date' },
                                { label: 'Time', value: 'time' },
                                { label: 'URL', value: 'url' },
                                { label: 'Select', value: 'select' },
                                { label: 'Checkbox', value: 'checkbox' },
                                { label: 'Text Area', value: 'textarea' }
                              ]"
                              :classes="{ outer: 'field-wrapper' }"
                            />
                            
                            <FormKit
                              type="text"
                              label="Placeholder"
                              v-model="column.placeholder"
                              placeholder="Enter placeholder text"
                              :classes="{ outer: 'field-wrapper' }"
                            />
                            
                            <FormKit
                              type="text"
                              label="Validation Rules"
                              v-model="column.validation"
                              placeholder="e.g., required|email"
                              :classes="{ outer: 'field-wrapper' }"
                            />
                            
                            <div class="flex items-center">
                              <label class="flex items-center">
                                <input type="checkbox" v-model="column.required" class="mr-2" />
                                <span class="text-sm text-gray-700">Required Field</span>
                              </label>
                            </div>
                          </div>
                          
                          <!-- Options for select type -->
                          <div v-if="column.type === 'select'" class="mt-4">
                            <div class="flex justify-between items-center mb-2">
                              <h6 class="text-sm font-medium text-gray-700">Select Options</h6>
                              <button 
                                @click="addColumnOption(index)"
                                class="text-blue-600 hover:text-blue-800 text-sm"
                                type="button"
                              >
                                <Icon name="heroicons:plus" class="w-3 h-3 mr-1" />
                                Add Option
                              </button>
                            </div>
                            
                            <div class="space-y-2">
                              <div v-for="(option, optionIndex) in (column.options || [])" :key="optionIndex" class="flex items-center space-x-2">
                                <input
                                  type="text"
                                  v-model="option.label"
                                  placeholder="Option label"
                                  class="flex-1 border border-gray-300 rounded px-2 py-1 text-sm"
                                />
                                <input
                                  type="text"
                                  v-model="option.value"
                                  placeholder="Option value"
                                  class="flex-1 border border-gray-300 rounded px-2 py-1 text-sm"
                                />
                                <button 
                                  @click="removeColumnOption(index, optionIndex)"
                                  class="text-red-500 hover:text-red-700"
                                  type="button"
                                >
                                  <Icon name="material-symbols:delete-outline" class="w-3 h-3" />
                                </button>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </template>

                <!-- Repeating Group Configuration -->
                <template v-if="component.type === 'repeating-group'">
                  <div class="space-y-6">
                    <!-- Group Limits -->
                    <div class="grid grid-cols-2 gap-4">
                      <FormKit
                        type="number"
                        label="Minimum Items"
                        name="minItems"
                        v-model="configModel.minItems"
                        help="Minimum number of groups required"
                        :classes="{ outer: 'field-wrapper' }"
                        :min="0"
                        placeholder="1"
                      />
                      
                      <FormKit
                        type="number"
                        label="Maximum Items"
                        name="maxItems"
                        v-model="configModel.maxItems"
                        help="Maximum number of groups allowed"
                        :classes="{ outer: 'field-wrapper' }"
                        :min="1"
                        placeholder="10"
                      />
                    </div>

                    <!-- Button Text Settings -->
                    <div class="grid grid-cols-2 gap-4">
                      <FormKit
                        type="text"
                        label="Add Button Text"
                        name="buttonText"
                        v-model="configModel.buttonText"
                        help="Text for the add button"
                        :classes="{ outer: 'field-wrapper' }"
                        placeholder="Add Item"
                      />
                      
                      <FormKit
                        type="text"
                        label="Remove Button Text"
                        name="removeText"
                        v-model="configModel.removeText"
                        help="Text for the remove button"
                        :classes="{ outer: 'field-wrapper' }"
                        placeholder="Remove"
                      />
                    </div>

                    <!-- Container Information -->
                    <div class="bg-blue-50 border border-blue-200 rounded-md p-4">
                      <div class="flex items-start">
                        <Icon name="material-symbols:info" class="w-5 h-5 text-blue-600 mr-2 mt-0.5" />
                        <div>
                          <h4 class="font-medium text-sm text-blue-800 mb-1">Repeating Group Container</h4>
                          <p class="text-xs text-blue-700">
                            This is a container component. Drag and drop fields into it in the form builder to create the repeating group structure. 
                            Each field you add will be repeated for every group item.
                          </p>
                        </div>
                      </div>
                    </div>

                    <!-- Children Count -->
                    <div class="border rounded-md p-3 bg-gray-50">
                      <div class="flex items-center justify-between">
                        <div>
                          <h5 class="text-sm font-medium text-gray-700">Group Fields</h5>
                          <p class="text-xs text-gray-500 mt-1">
                            {{ configModel.children?.length || 0 }} field(s) in this repeating group
                          </p>
                        </div>
                        <div class="text-sm text-gray-500">
                          <Icon name="material-symbols:drag-indicator" class="w-4 h-4" />
                        </div>
                      </div>
                    </div>
                  </div>
                </template>

                <!-- Layout Grid Configuration -->
                <template v-if="component.type === 'layout-grid'">
                  <div class="space-y-6">
                    <!-- Grid Layout Settings -->
                    <div class="grid grid-cols-2 gap-4">
                      <FormKit
                        type="number"
                        label="Grid Areas (Vertical)"
                        name="rows"
                        v-model="configModel.rows"
                        help="How many vertical sections you want"
                        :classes="{ outer: 'field-wrapper' }"
                        min="1"
                        max="6"
                      />
                      <FormKit
                        type="number"
                        label="Grid Areas (Horizontal)"
                        name="columns"
                        v-model="configModel.columns"
                        help="How many horizontal sections you want"
                        :classes="{ outer: 'field-wrapper' }"
                        min="1"
                        max="6"
                      />
                    </div>

                    <FormKit
                      type="range"
                      label="Spacing Between Areas"
                      name="gap"
                      v-model="configModel.gap"
                      help="Space between each grid area"
                      :classes="{ outer: 'field-wrapper' }"
                      min="0"
                      max="32"
                      step="4"
                    />

                    <!-- Cell Spanning Controls -->
                    <div class="space-y-4">
                      <h5 class="text-sm font-medium text-gray-700 border-b pb-2">Cell Spanning</h5>
                      
                      <div class="bg-blue-50 border border-blue-200 rounded-lg p-4">
                        <p class="text-sm text-blue-800 mb-3">
                          <Icon name="heroicons:information-circle" class="w-4 h-4 inline mr-1" />
                          Configure how cells span across rows and columns
                        </p>
                        
                        <div class="space-y-3">
                          <div v-for="(cell, index) in configModel.cells" :key="index" class="cell-span-control">
                            <div class="flex items-center justify-between p-3 bg-white border border-gray-200 rounded">
                              <div class="flex items-center space-x-3">
                                <span class="text-sm font-medium text-gray-700">Cell {{ index + 1 }}</span>
                                <span class="text-xs text-gray-500">({{ cell.row + 1 }},{{ cell.col + 1 }})</span>
                              </div>
                              
                              <div class="flex items-center space-x-2">
                                <div class="flex items-center space-x-1">
                                  <label class="text-xs text-gray-600">Rows:</label>
                                  <input 
                                    type="number" 
                                    v-model="cell.rowSpan" 
                                    min="1" 
                                    max="6"
                                    class="w-12 px-2 py-1 text-xs border border-gray-300 rounded"
                                  />
                                </div>
                                
                                <div class="flex items-center space-x-1">
                                  <label class="text-xs text-gray-600">Cols:</label>
                                  <input 
                                    type="number" 
                                    v-model="cell.colSpan" 
                                    min="1" 
                                    max="6"
                                    class="w-12 px-2 py-1 text-xs border border-gray-300 rounded"
                                  />
                                </div>
                                
                                <button 
                                  @click="removeCell(index)"
                                  class="p-1 text-red-400 hover:text-red-600 rounded"
                                  title="Remove cell"
                                >
                                  <Icon name="heroicons:trash" class="w-3 h-3" />
                                </button>
                              </div>
                            </div>
                          </div>
                          
                          <button 
                            @click="addCell"
                            class="w-full py-2 px-3 text-sm text-blue-600 bg-blue-50 border border-blue-200 rounded hover:bg-blue-100 transition-colors"
                          >
                            <Icon name="heroicons:plus" class="w-4 h-4 inline mr-1" />
                            Add Cell
                          </button>
                        </div>
                      </div>
                    </div>

                    <!-- Layout Presets -->
                    <div class="space-y-4">
                      <h5 class="text-sm font-medium text-gray-700 border-b pb-2">Quick Layout Presets</h5>
                      
                      <div class="grid grid-cols-2 gap-3">
                        <button
                          @click="applyPreset('sidebar-right')"
                          class="preset-button"
                          :class="{ 'preset-active': isCurrentPreset('sidebar-right') }"
                        >
                          <div class="preset-preview sidebar-right-preview"></div>
                          <span class="preset-label">Sidebar Right</span>
                        </button>
                        
                        <button
                          @click="applyPreset('sidebar-left')"
                          class="preset-button"
                          :class="{ 'preset-active': isCurrentPreset('sidebar-left') }"
                        >
                          <div class="preset-preview sidebar-left-preview"></div>
                          <span class="preset-label">Sidebar Left</span>
                        </button>
                        
                        <button
                          @click="applyPreset('header-content')"
                          class="preset-button"
                          :class="{ 'preset-active': isCurrentPreset('header-content') }"
                        >
                          <div class="preset-preview header-content-preview"></div>
                          <span class="preset-label">Header + Content</span>
                        </button>
                        
                        <button
                          @click="applyPreset('three-column')"
                          class="preset-button"
                          :class="{ 'preset-active': isCurrentPreset('three-column') }"
                        >
                          <div class="preset-preview three-column-preview"></div>
                          <span class="preset-label">Three Column</span>
                        </button>
                        
                        <button
                          @click="applyPreset('two-by-two')"
                          class="preset-button"
                          :class="{ 'preset-active': isCurrentPreset('two-by-two') }"
                        >
                          <div class="preset-preview two-by-two-preview"></div>
                          <span class="preset-label">2x2 Grid</span>
                        </button>
                        
                        <button
                          @click="applyPreset('form-layout')"
                          class="preset-button"
                          :class="{ 'preset-active': isCurrentPreset('form-layout') }"
                        >
                          <div class="preset-preview form-layout-preview"></div>
                          <span class="preset-label">Form Layout</span>
                        </button>
                        
                        <button
                          @click="applyPreset('header-sidebar')"
                          class="preset-button"
                          :class="{ 'preset-active': isCurrentPreset('header-sidebar') }"
                        >
                          <div class="preset-preview header-sidebar-preview"></div>
                          <span class="preset-label">Header + Sidebar</span>
                        </button>
                      </div>
                    </div>

                    <!-- Grid Layout Management -->
                    <div class="space-y-4">
                      <h5 class="text-sm font-medium text-gray-700 border-b pb-2">Layout Management</h5>
                      
                      <div class="bg-gray-50 border border-gray-200 rounded-lg p-4">
                        <div class="flex items-center justify-between mb-3">
                          <div>
                            <p class="text-sm font-medium text-gray-800">
                              Components in grid: {{ getTotalComponents() }}
                            </p>
                            <p class="text-xs text-gray-500">
                              Drag form components into the grid areas to position them
                            </p>
                          </div>
                        </div>
                        
                        <div class="text-xs text-gray-600 mt-2">
                          <p>• In the form builder, drag components directly into the grid areas</p>
                          <p>• Components will be positioned exactly where you drop them</p>
                          <p>• Adjust grid dimensions above to create more areas</p>
                        </div>
                      </div>
                    </div>
                  </div>
                </template>
                
                <!-- Form Section Configuration -->
                <template v-if="component.type === 'form-section'">
                  <div class="space-y-6">
                    <!-- Section Content -->
                    <div class="grid grid-cols-1 gap-4">
                      <FormKit
                        type="textarea"
                        label="Section Description"
                        name="description"
                        v-model="configModel.description"
                        help="Optional description text below the section title"
                        :classes="{ outer: 'field-wrapper' }"
                        placeholder="Describe this section..."
                        rows="2"
                      />
                    </div>

                    <!-- Section Header Settings -->
                    <div class="space-y-4">
                      <h5 class="text-sm font-medium text-gray-700 border-b pb-2">Header Settings</h5>
                      
                      <div class="grid grid-cols-2 gap-4">
                        <FormKit
                          type="switch"
                          label="Show Header"
                          name="showHeader"
                          v-model="configModel.showHeader"
                          help="Display the section header"
                          :classes="{ outer: 'field-wrapper' }"
                        />

                        <FormKit
                          v-if="configModel.showHeader"
                          type="select"
                          label="Header Size"
                          name="headerSize"
                          v-model="configModel.headerSize"
                          :options="[
                            { label: 'Small', value: 'small' },
                            { label: 'Medium', value: 'medium' },
                            { label: 'Large', value: 'large' }
                          ]"
                          help="Size of the section header"
                          :classes="{ outer: 'field-wrapper' }"
                        />

                        <FormKit
                          v-if="configModel.showHeader"
                          type="switch"
                          label="Collapsible"
                          name="collapsible"
                          v-model="configModel.collapsible"
                          help="Allow users to collapse this section"
                          :classes="{ outer: 'field-wrapper' }"
                        />

                        <FormKit
                          v-if="configModel.showHeader && configModel.collapsible"
                          type="switch"
                          label="Start Collapsed"
                          name="collapsed"
                          v-model="configModel.collapsed"
                          help="Start with this section collapsed"
                          :classes="{ outer: 'field-wrapper' }"
                        />
                        
                        <FormKit
                          type="switch"
                          label="Show Placeholder"
                          name="showPlaceholder"
                          v-model="configModel.showPlaceholder"
                          help="Show placeholder when empty in builder mode"
                          :classes="{ outer: 'field-wrapper' }"
                        />
                      </div>
                    </div>

                    <!-- Visual Settings -->
                    <div class="space-y-4">
                      <h5 class="text-sm font-medium text-gray-700 border-b pb-2">Visual Settings</h5>
                      
                      <div class="grid grid-cols-2 gap-4">
                        <FormKit
                          type="switch"
                          label="Show Border"
                          name="showBorder"
                          v-model="configModel.showBorder"
                          help="Display border around the section"
                          :classes="{ outer: 'field-wrapper' }"
                        />

                        <FormKit
                          type="select"
                          label="Border Style"
                          name="borderStyle"
                          v-model="configModel.borderStyle"
                          :options="[
                            { label: 'Solid', value: 'solid' },
                            { label: 'Dashed', value: 'dashed' },
                            { label: 'Dotted', value: 'dotted' }
                          ]"
                          help="Style of the section border"
                          :classes="{ outer: 'field-wrapper' }"
                          :disabled="!configModel.showBorder"
                        />

                        <FormKit
                          type="select"
                          label="Spacing"
                          name="spacing"
                          v-model="configModel.spacing"
                          :options="[
                            { label: 'Compact', value: 'compact' },
                            { label: 'Normal', value: 'normal' },
                            { label: 'Relaxed', value: 'relaxed' }
                          ]"
                          help="Internal padding of the section"
                          :classes="{ outer: 'field-wrapper' }"
                        />
                      </div>
                    </div>

                    <!-- Color Settings -->
                    <div class="space-y-4">
                      <h5 class="text-sm font-medium text-gray-700 border-b pb-2">Color Settings</h5>
                      
                      <div class="grid grid-cols-2 gap-4">
                        <FormKit
                          type="color"
                          label="Background Color"
                          name="backgroundColor"
                          v-model="configModel.backgroundColor"
                          help="Background color of the section"
                          :classes="{ outer: 'field-wrapper' }"
                        />

                        <FormKit
                          type="color"
                          label="Header Background"
                          name="headerBackground"
                          v-model="configModel.headerBackground"
                          help="Background color of the header"
                          :classes="{ outer: 'field-wrapper' }"
                          :disabled="!configModel.showHeader"
                        />
                      </div>
                    </div>

                    <!-- Nested Components Management -->
                    <div class="space-y-4">
                      <h5 class="text-sm font-medium text-gray-700 border-b pb-2">Nested Components</h5>
                      
                      <div class="bg-gray-50 border border-gray-200 rounded-lg p-4">
                        <div class="flex items-center justify-between mb-3">
                          <div>
                            <p class="text-sm font-medium text-gray-800">
                              Components in this section: {{ (configModel.children || []).length }}
                            </p>
                            <p class="text-xs text-gray-500">
                              Drag form components into the section to group them here
                            </p>
                          </div>
                          <div v-if="(configModel.children || []).length > 0">
                            <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
                              {{ (configModel.children || []).length }} {{ (configModel.children || []).length === 1 ? 'component' : 'components' }}
                            </span>
                          </div>
                        </div>
                        
                        <!-- List of nested components -->
                        <div v-if="(configModel.children || []).length > 0" class="space-y-2">
                          <div 
                            v-for="(child, index) in configModel.children" 
                            :key="child.id"
                            class="flex items-center justify-between bg-white border border-gray-200 rounded px-3 py-2"
                          >
                            <div class="flex items-center space-x-2">
                              <Icon :name="getComponentIcon(child.type)" class="w-4 h-4 text-gray-500" />
                              <span class="text-sm text-gray-700">
                                {{ child.props.label || getComponentTypeName(child.type) }}
                              </span>
                              <span class="text-xs text-gray-400">
                                ({{ child.type }})
                              </span>
                            </div>
                            <button
                              @click="removeNestedComponent(index)"
                              class="text-red-500 hover:text-red-700 text-xs"
                              title="Remove from section"
                            >
                              <Icon name="material-symbols:close" class="w-4 h-4" />
                            </button>
                          </div>
                        </div>
                        
                        <!-- Empty state -->
                        <div v-else class="text-center py-4">
                          <Icon name="material-symbols:inbox-outline" class="w-8 h-8 text-gray-300 mx-auto mb-2" />
                          <p class="text-sm text-gray-500 mb-1">No components in this section</p>
                          <p class="text-xs text-gray-400">
                            Drag components from the sidebar into the section area
                          </p>
                        </div>
                      </div>
                    </div>
                  </div>
                </template>

                <!-- Custom HTML Configuration -->
                <template v-if="component.type === 'customHtml'">
                  <div class="space-y-6">
                    <!-- Code Editor Tabs -->
                    <div class="code-editor-tabs">
                      <div class="tabs-header border-b border-gray-200">
                        <div class="flex">
                          <button 
                            @click="customHtmlActiveTab = 'html'" 
                            class="px-4 py-2 text-sm font-medium transition-colors" 
                            :class="customHtmlActiveTab === 'html' ? 'text-blue-600 border-b-2 border-blue-500 bg-blue-50' : 'text-gray-600 hover:text-gray-800 hover:bg-gray-50'"
                          >
                            <span class="flex items-center">
                              <Icon name="material-symbols:code" class="w-4 h-4 mr-2" />
                              HTML
                            </span>
                          </button>
                          <button 
                            @click="customHtmlActiveTab = 'css'" 
                            class="px-4 py-2 text-sm font-medium transition-colors" 
                            :class="customHtmlActiveTab === 'css' ? 'text-blue-600 border-b-2 border-blue-500 bg-blue-50' : 'text-gray-600 hover:text-gray-800 hover:bg-gray-50'"
                          >
                            <span class="flex items-center">
                              <Icon name="material-symbols:format-color-fill" class="w-4 h-4 mr-2" />
                              CSS
                            </span>
                          </button>
                          <button 
                            @click="customHtmlActiveTab = 'js'" 
                            class="px-4 py-2 text-sm font-medium transition-colors" 
                            :class="customHtmlActiveTab === 'js' ? 'text-blue-600 border-b-2 border-blue-500 bg-blue-50' : 'text-gray-600 hover:text-gray-800 hover:bg-gray-50'"
                          >
                            <span class="flex items-center">
                              <Icon name="material-symbols:code-blocks" class="w-4 h-4 mr-2" />
                              JavaScript
                            </span>
                          </button>
                          <button 
                            @click="customHtmlActiveTab = 'preview'" 
                            class="px-4 py-2 text-sm font-medium transition-colors ml-auto" 
                            :class="customHtmlActiveTab === 'preview' ? 'text-green-600 border-b-2 border-green-500 bg-green-50' : 'text-gray-600 hover:text-gray-800 hover:bg-gray-50'"
                          >
                            <span class="flex items-center">
                              <Icon name="material-symbols:preview" class="w-4 h-4 mr-2" />
                              Preview
                            </span>
                          </button>
                        </div>
                      </div>
                      
                      <!-- HTML Tab -->
                      <div v-show="customHtmlActiveTab === 'html'" class="tab-content py-4">
                        <div class="html-editor-container">
                          <RsCodeMirror
                            v-model="configModel.htmlContent"
                            language="html"
                            height="300px"
                            class="html-editor border border-gray-200 rounded"
                                                        placeholder="<!-- Example 1: Price Calculator -->
  <div class='price-calculator'>
    <h3>Order Calculator</h3>
    <div class='calc-row'>
      <label>Quantity:</label>
      <input type='number' id='qty' value='1' min='1' class='calc-input' placeholder='Enter quantity'>
    </div>
    <div class='calc-row'>
      <label>Unit Price:</label>
      <input type='number' id='price' value='10.00' step='0.01' class='calc-input' placeholder='Enter price'>
    </div>
    <div class='calc-row'>
      <label>Total:</label>
      <div id='total' class='total-display'>$10.00</div>
    </div>
  </div>
  
  <!-- Example 2: Progress Tracker -->
  <div class='progress-tracker'>
    <h3>Application Progress</h3>
    <div class='steps'>
      <div class='step' data-step='1'>Personal Info</div>
      <div class='step' data-step='2'>Documents</div>
      <div class='step' data-step='3'>Review</div>
    </div>
    <div class='progress-bar'>
      <div id='progress-fill' class='progress-fill'></div>
    </div>
    <div class='text-center text-sm text-gray-600 mt-3'>
      <span id='progress-percentage'>33%</span> Complete
    </div>
  </div>
  
  <!-- Example 3: File Upload Preview -->
  <div class='file-upload'>
    <h3>Document Upload</h3>
    <div id='drop-zone' class='drop-zone'>
      <div class='text-4xl mb-3'>📁</div>
      <p>Drag files here or click to browse</p>
      <p class='text-xs text-gray-500 mt-2'>Supports PDF, DOC, images up to 5MB</p>
      <input type='file' id='file-input' multiple accept='.pdf,.doc,.docx,.jpg,.jpeg,.png' style='display: none;'>
    </div>
    <div id='file-list' class='file-list'></div>
  </div>"
                          />
                        </div>
                        <p class="text-xs text-gray-500 mt-2 flex items-start">
                          <Icon name="material-symbols:lightbulb-outline" class="w-4 h-4 mr-1 mt-0.5 flex-shrink-0" />
                          <span>Create your custom HTML structure. Use standard HTML5 elements and attributes. Use <code class="bg-gray-100 px-1 rounded text-xs">this.getValue('fieldName')</code> and <code class="bg-gray-100 px-1 rounded text-xs">this.setValue('fieldName', value)</code> to interact with form fields.</span>
                        </p>
                      </div>
                      
                      <!-- CSS Tab -->
                      <div v-show="customHtmlActiveTab === 'css'" class="tab-content py-4">
                        <div class="css-editor-container">
                          <RsCodeMirror
                            v-model="configModel.cssContent"
                            language="css"
                            height="300px"
                            class="css-editor border border-gray-200 rounded"
                            placeholder="/* Example 1: Price Calculator Styles */
.price-calculator {
  padding: 24px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}

.price-calculator h3 {
  color: #111827;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 20px;
  text-align: center;
}

.calc-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #f3f4f6;
}

.calc-row:last-child {
  border-bottom: none;
}

.calc-input {
  width: 120px;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 14px;
  transition: border-color 0.2s ease;
}

.calc-input:focus {
  outline: none;
  border-color: #6b7280;
  box-shadow: 0 0 0 3px rgba(107, 114, 128, 0.1);
}

.total-display {
  font-weight: 600;
  font-size: 18px;
  color: #111827;
  background: #f9fafb;
  padding: 8px 16px;
  border-radius: 6px;
  border: 1px solid #e5e7eb;
}

/* Example 2: Progress Tracker Styles */
.progress-tracker {
  padding: 24px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}

.progress-tracker h3 {
  color: #111827;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 24px;
  text-align: center;
}

.steps {
  display: flex;
  justify-content: space-between;
  margin-bottom: 24px;
  position: relative;
}

.steps::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 2px;
  background: #e5e7eb;
  transform: translateY(-50%);
  z-index: 1;
}

.step {
  position: relative;
  z-index: 2;
  padding: 8px 16px;
  background: #ffffff;
  border: 2px solid #e5e7eb;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  color: #6b7280;
}

.step.active {
  background: #6b7280;
  border-color: #6b7280;
  color: #ffffff;
}

.step.completed {
  background: #9ca3af;
  border-color: #9ca3af;
  color: #ffffff;
}

.progress-bar {
  height: 6px;
  background: #f3f4f6;
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 12px;
}

.progress-fill {
  height: 100%;
  background: #6b7280;
  width: 33%;
  transition: width 0.3s ease;
}

/* Example 3: File Upload Styles */
.file-upload {
  padding: 24px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}

.file-upload h3 {
  color: #111827;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 20px;
  text-align: center;
}

.drop-zone {
  border: 2px dashed #d1d5db;
  border-radius: 8px;
  padding: 32px 24px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
  background: #fafafa;
}

.drop-zone:hover {
  border-color: #6b7280;
  background: #f9fafb;
}

.drop-zone.dragover {
  border-color: #9ca3af;
  background: #f9fafb;
}

.drop-zone p {
  color: #6b7280;
  font-size: 14px;
  margin: 0;
}

.file-list {
  margin-top: 16px;
}

.file-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  margin-bottom: 8px;
  transition: border-color 0.2s ease;
}

.file-item:hover {
  border-color: #d1d5db;
}

.file-item .valid {
  color: #6b7280;
  font-weight: 500;
}

.file-item .invalid {
  color: #ef4444;
  font-weight: 500;
}"
                          />
                        </div>
                        <p class="text-xs text-gray-500 mt-2 flex items-start">
                          <Icon name="material-symbols:lightbulb-outline" class="w-4 h-4 mr-1 mt-0.5 flex-shrink-0" />
                          <span>Add custom CSS styles. These styles will be automatically scoped to this component only, preventing conflicts with other form elements.</span>
                        </p>
                      </div>
                      
                      <!-- JavaScript Tab -->
                      <div v-show="customHtmlActiveTab === 'js'" class="tab-content py-4">
                        <div class="js-editor-container">
                          <RsCodeMirror
                            v-model="configModel.jsContent"
                            language="javascript"
                            height="300px"
                            class="js-editor border border-gray-200 rounded"
                            placeholder="// Example 1: Price Calculator JavaScript
console.log('Price calculator initialized');

function calculateTotal() {
  const qtyInput = this.element.querySelector('#qty');
  const priceInput = this.element.querySelector('#price');
  const totalDisplay = this.element.querySelector('#total');
  
  if (qtyInput && priceInput && totalDisplay) {
    const qty = parseFloat(qtyInput.value) || 0;
    const price = parseFloat(priceInput.value) || 0;
    const total = qty * price;
    
    totalDisplay.textContent = '$' + total.toFixed(2);
    
    // Update form fields
    this.setValue('quantity', qty);
    this.setValue('unit_price', price);
    this.setValue('total_price', total);
  }
}

// Add event listeners for real-time calculation
const qtyInput = this.element.querySelector('#qty');
const priceInput = this.element.querySelector('#price');

if (qtyInput) qtyInput.addEventListener('input', calculateTotal.bind(this));
if (priceInput) priceInput.addEventListener('input', calculateTotal.bind(this));

// Example 2: Progress Tracker JavaScript
function updateProgress() {
  const steps = this.element.querySelectorAll('.step');
  const progressFill = this.element.querySelector('#progress-fill');
  
  // Get current step from form data
  const currentStep = this.getValue('current_step') || 1;
  
  steps.forEach((step, index) => {
    const stepNum = index + 1;
    step.classList.remove('active');
    
    if (stepNum <= currentStep) {
      step.classList.add('active');
    }
  });
  
  if (progressFill) {
    const percentage = (currentStep / steps.length) * 100;
    progressFill.style.width = percentage + '%';
  }
  
  // Update form data
  this.setValue('progress_percentage', percentage);
}

// Add click handlers to steps
const steps = this.element.querySelectorAll('.step');
steps.forEach((step, index) => {
  step.addEventListener('click', () => {
    const newStep = index + 1;
    this.setValue('current_step', newStep);
    updateProgress.call(this);
  });
});

// Example 3: File Upload JavaScript
function setupFileUpload() {
  const dropZone = this.element.querySelector('#drop-zone');
  const fileInput = this.element.querySelector('#file-input');
  const fileList = this.element.querySelector('#file-list');
  
  if (!dropZone || !fileInput || !fileList) return;
  
  function handleFiles(files) {
    fileList.innerHTML = '';
    let validCount = 0;
    
    Array.from(files).forEach(file => {
      const fileItem = document.createElement('div');
      fileItem.className = 'file-item';
      
      // Validate file (example: only images and PDFs)
      const isValid = file.type.startsWith('image/') || file.type === 'application/pdf';
      if (isValid) validCount++;
      
      fileItem.innerHTML = \`
        <span>\${file.name}</span>
        <span class='\${isValid ? 'valid' : 'invalid'}'>\${isValid ? '✓' : '✗'}</span>
      \`;
      
      fileList.appendChild(fileItem);
    });
    
    // Update form data
    this.setValue('uploaded_files', Array.from(files).map(f => f.name));
    this.setValue('valid_files_count', validCount);
  }
  
  // Event listeners
  dropZone.addEventListener('click', () => fileInput.click());
  
  dropZone.addEventListener('dragover', (e) => {
    e.preventDefault();
    dropZone.classList.add('dragover');
  });
  
  dropZone.addEventListener('dragleave', () => {
    dropZone.classList.remove('dragover');
  });
  
  dropZone.addEventListener('drop', (e) => {
    e.preventDefault();
    dropZone.classList.remove('dragover');
    handleFiles.call(this, e.dataTransfer.files);
  });
  
  fileInput.addEventListener('change', (e) => {
    handleFiles.call(this, e.target.files);
  });
}

// Initialize components
if (this.element.querySelector('.price-calculator')) {
  calculateTotal.call(this);
}

if (this.element.querySelector('.progress-tracker')) {
  updateProgress.call(this);
}

if (this.element.querySelector('.file-upload')) {
  setupFileUpload.call(this);
}"
                          />
                        </div>
                        <p class="text-xs text-gray-500 mt-2 flex items-start">
                          <Icon name="material-symbols:lightbulb-outline" class="w-4 h-4 mr-1 mt-0.5 flex-shrink-0" />
                          <span>Add interactive JavaScript functionality. Use <code class="bg-gray-100 px-1 rounded text-xs">this.element</code> to access the component, and the helper functions for form interaction. Scripts run in {{ configModel.previewMode === 'safe' ? 'Safe Mode (disabled)' : 'Advanced Mode' }}.</span>
                        </p>
                      </div>

                      <!-- Live Preview Tab -->
                      <div v-show="customHtmlActiveTab === 'preview'" class="tab-content py-4">
                        <div class="preview-section">
                          <div class="preview-container border border-gray-200 rounded-lg p-4 bg-white min-h-[200px] max-h-[400px] overflow-auto">
                            <div v-if="configModel.htmlContent" class="custom-html-preview">
                              <div v-html="getFullHtmlPreview(configModel.htmlContent, configModel.cssContent)"></div>
                            </div>
                            <div v-else class="text-gray-500 text-center py-12">
                              <Icon name="material-symbols:code" class="w-12 h-12 mx-auto mb-2 text-gray-300" />
                              <p class="text-sm">No HTML content to preview</p>
                              <p class="text-xs text-gray-400 mt-1">Switch to the HTML tab to start coding</p>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>

                    <!-- Component Settings -->
                    <div class="space-y-4">
                      <h5 class="text-sm font-medium text-gray-700 border-b pb-2">Component Settings</h5>
                      
                      <div class="grid grid-cols-2 gap-4">
                        <FormKit
                          type="select"
                          label="Preview Mode"
                          name="previewMode"
                          v-model="configModel.previewMode"
                          help="Choose how to render the HTML content"
                          :options="[
                            { label: 'Safe Mode (No Scripts)', value: 'safe' },
                            { label: 'Advanced Mode (Full HTML)', value: 'advanced' }
                          ]"
                          :classes="{ outer: 'field-wrapper' }"
                        />

                        <FormKit
                          type="switch"
                          label="Allow Scripts"
                          name="allowScripts"
                          v-model="configModel.allowScripts"
                          help="Enable JavaScript execution (Advanced mode only)"
                          :classes="{ outer: 'field-wrapper' }"
                        />
                      </div>

                      <FormKit
                        type="switch"
                        label="Show in Preview"
                        name="showInPreview"
                        v-model="configModel.showInPreview"
                        help="Display this component in form preview mode"
                        :classes="{ outer: 'field-wrapper' }"
                      />
                    </div>

                    <!-- Content Statistics -->
                    <div class="p-4 bg-gray-50 rounded-lg border">
                      <h5 class="text-sm font-medium text-gray-700 mb-2">Content Statistics</h5>
                      <div class="flex items-center space-x-6 text-xs text-gray-600">
                        <div class="flex items-center">
                          <Icon name="material-symbols:html" class="w-4 h-4 mr-1" />
                          HTML: {{ (configModel.htmlContent || '').length }} characters
                        </div>
                        <div class="flex items-center">
                          <Icon name="material-symbols:css" class="w-4 h-4 mr-1" />
                          CSS: {{ (configModel.cssContent || '').length }} characters
                        </div>
                        <div class="flex items-center">
                          <Icon name="material-symbols:javascript" class="w-4 h-4 mr-1" />
                          JavaScript: {{ (configModel.jsContent || '').length }} characters
                        </div>
                      </div>
                    </div>

                    <!-- Security Notice -->
                    <div class="bg-yellow-50 border border-yellow-200 rounded-md p-4">
                      <div class="flex items-start">
                        <Icon name="material-symbols:security" class="w-5 h-5 text-yellow-600 mr-2 mt-0.5" />
                        <div>
                          <h4 class="font-medium text-sm text-yellow-800 mb-1">Security Notice</h4>
                          <p class="text-xs text-yellow-700">
                            Custom HTML components can contain arbitrary code. In Safe Mode, scripts and event handlers are disabled. 
                            Use Advanced Mode only with trusted content and enable "Allow Scripts" carefully.
                          </p>
                        </div>
                      </div>
                    </div>
                  </div>
                </template>
                
                <!-- Info Display Specific Settings -->
                <template v-if="component.type === 'info-display'">
                  <div class="space-y-4">
                    <div class="grid grid-cols-2 gap-4">
                      <FormKit
                        type="checkbox"
                        label="Show Border"
                        name="showBorder"
                        v-model="configModel.showBorder"
                        help="Show border around the information display"
                        :classes="{ outer: 'field-wrapper' }"
                      />
                      
                      <FormKit
                        type="color"
                        label="Background Color"
                        name="backgroundColor"
                        v-model="configModel.backgroundColor"
                        help="Background color for the information display"
                        :classes="{ outer: 'field-wrapper' }"
                      />
                    </div>
                    
                    <!-- Information Fields Management -->
                    <div class="info-fields-section">
                      <div class="flex justify-between items-center mb-4">
                        <div>
                          <h5 class="text-sm font-semibold text-gray-800">Information Fields</h5>
                          <p class="text-xs text-gray-500 mt-1">Configure the information that will be displayed</p>
                        </div>
                        <button 
                          class="inline-flex items-center px-3 py-1.5 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 rounded-md transition-colors" 
                          @click="addInfoField"
                        >
                          <Icon name="material-symbols:add" class="w-4 h-4 mr-1" />
                          Add Field
                        </button>
                      </div>
                      
                      <!-- Fields List -->
                      <div v-if="configModel.fields && configModel.fields.length > 0" class="space-y-4">
                        <div 
                          v-for="(field, index) in configModel.fields" 
                          :key="index"
                          class="field-card bg-white border border-gray-200 rounded-lg p-4 hover:border-gray-300 transition-colors"
                        >
                          <!-- Field Header -->
                          <div class="flex items-center justify-between mb-3">
                            <div class="flex items-center">
                              <div class="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center mr-3">
                                <Icon 
                                  :name="field.type === 'button' ? 'material-symbols:smart-button' : 'material-symbols:text-fields'" 
                                  class="w-4 h-4 text-blue-600" 
                                />
                              </div>
                              <div>
                                <h6 class="text-sm font-medium text-gray-800">
                                  {{ field.label || `Field ${index + 1}` }}
                                </h6>
                                <p class="text-xs text-gray-500">
                                  {{ field.type === 'button' ? 'Button Field' : 'Text Field' }}
                                </p>
                              </div>
                            </div>
                            <button 
                              class="p-1.5 text-gray-400 hover:text-red-500 hover:bg-red-50 rounded transition-colors" 
                              @click="removeInfoField(index)"
                              title="Remove field"
                            >
                              <Icon name="material-symbols:delete-outline" class="w-4 h-4" />
                            </button>
                          </div>
                          
                          <!-- Field Configuration -->
                          <div class="space-y-3">
                            <!-- Basic Info -->
                            <div class="grid grid-cols-2 gap-3">
                              <FormKit
                                type="text"
                                label="Display Label"
                                v-model="field.label"
                                placeholder="e.g., Customer Name"
                                :classes="{ outer: 'mb-0' }"
                              />
                              <FormKit
                                type="text"
                                label="Field Key"
                                v-model="field.key"
                                placeholder="e.g., customer_name"
                                :classes="{ outer: 'mb-0' }"
                              />
                            </div>
                            
                            <!-- Field Type -->
                            <FormKit
                              type="select"
                              label="Field Type"
                              v-model="field.type"
                              :options="[
                                { label: '📝 Text Information', value: 'text' },
                                { label: '🔗 Action Button', value: 'button' }
                              ]"
                              :classes="{ outer: 'mb-0' }"
                            />
                            
                            <!-- Text Field Configuration -->
                            <div v-if="field.type === 'text'">
                              <FormKit
                                type="text"
                                label="Display Value"
                                v-model="field.value"
                                placeholder="e.g., John Doe, 555-123-4567"
                                help="The text that will be shown to users"
                                :classes="{ outer: 'mb-0' }"
                              />
                            </div>
                            
                            <!-- Button Field Configuration -->
                            <div v-if="field.type === 'button'" class="space-y-3 p-3 bg-blue-50 rounded-lg border border-blue-200">
                              <div class="flex items-center mb-2">
                                <Icon name="material-symbols:settings" class="w-4 h-4 text-blue-600 mr-2" />
                                <span class="text-sm font-medium text-blue-800">Button Settings</span>
                              </div>
                              
                              <FormKit
                                type="text"
                                label="Button Text"
                                v-model="field.value"
                                placeholder="e.g., View Profile, Download PDF"
                                help="Text displayed on the button"
                                :classes="{ outer: 'mb-0' }"
                              />
                              
                              <FormKit
                                type="text"
                                label="Button URL"
                                v-model="field.url"
                                placeholder="e.g., https://example.com/profile"
                                help="Where the button should redirect to"
                                :classes="{ outer: 'mb-0' }"
                              />
                              
                              <div class="grid grid-cols-2 gap-3">
                                <FormKit
                                  type="checkbox"
                                  label="Open in new tab"
                                  v-model="field.openInNewTab"
                                  help="Opens link in new window"
                                  :classes="{ outer: 'mb-0' }"
                                />
                                
                                <FormKit
                                  type="text"
                                  label="Icon (optional)"
                                  v-model="field.icon"
                                  placeholder="material-symbols:link"
                                  help="Icon name to display"
                                  :classes="{ outer: 'mb-0' }"
                                />
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                      
                      <!-- Empty State -->
                      <div v-else class="empty-fields-state text-center py-8 border-2 border-dashed border-gray-300 rounded-lg">
                        <Icon name="material-symbols:info-outline" class="w-12 h-12 text-gray-400 mx-auto mb-3" />
                        <h6 class="text-sm font-medium text-gray-600 mb-1">No information fields yet</h6>
                        <p class="text-xs text-gray-500 mb-4">Add fields to display information to your users</p>
                        <button 
                          class="inline-flex items-center px-4 py-2 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 rounded-md transition-colors" 
                          @click="addInfoField"
                        >
                          <Icon name="material-symbols:add" class="w-4 h-4 mr-1" />
                          Add Your First Field
                        </button>
                      </div>
                    </div>
                  </div>
                </template>
              </div>
            </div>
          </div>

          <!-- Options Tab (for select, radio, checkbox) -->
          <div v-if="activeTab === 'options'" class="space-y-6">
            <div class="settings-section">
              <div class="section-header">
                <h4 class="section-title">
                  <Icon name="heroicons:list-bullet" class="w-5 h-5 mr-2" />
                  Choice Options
                </h4>
                <p class="section-description">Configure the options users can choose from</p>
              </div>
              
              <div class="section-content">
                <div class="options-manager">
                  <div class="options-header">
                    <span class="text-sm font-medium text-gray-700">Options List</span>
                    <button @click="addOption" class="add-option-btn">
                      <Icon name="heroicons:plus-circle" class="w-4 h-4 mr-1" />
                      Add Option
                    </button>
                  </div>
                  
                  <div v-if="configModel.options && configModel.options.length > 0" class="options-list">
                    <div 
                      v-for="(option, index) in configModel.options" 
                      :key="index"
                      class="option-item"
                    >
                      <div class="option-drag-handle">
                        <Icon name="heroicons:bars-3" class="w-4 h-4 text-gray-400" />
                      </div>
                      
                      <div class="option-content">
                        <FormKit
                          type="text"
                          placeholder="What users will see"
                          v-model="option.label"
                          :classes="{ outer: 'option-field', input: 'option-input' }"
                        />
                        <FormKit
                          type="text"
                          placeholder="Internal value"
                          v-model="option.value"
                          :classes="{ outer: 'option-field', input: 'option-input' }"
                        />
                      </div>
                      
                      <button 
                        @click="removeOption(index)"
                        class="option-remove-btn"
                        title="Remove this option"
                      >
                        <Icon name="heroicons:trash" class="w-4 h-4" />
                      </button>
                    </div>
                  </div>
                  
                  <div v-else class="empty-options">
                    <Icon name="heroicons:list-bullet" class="w-8 h-8 text-gray-300 mx-auto mb-2" />
                    <p class="text-sm text-gray-500 text-center mb-3">No options added yet</p>
                    <button @click="addOption" class="empty-add-btn">
                      Add First Option
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- Layout Tab -->
          <div v-if="activeTab === 'layout'" class="space-y-6">
            <div class="settings-section">
              <div class="section-header">
                <h4 class="section-title">
                  <Icon name="heroicons:squares-2x2" class="w-5 h-5 mr-2" />
                  Layout & Size
                </h4>
                <p class="section-description">Control how this field appears in your form</p>
              </div>
              
              <div class="section-content">
                <div>
                  <label class="block text-sm font-medium text-gray-700 mb-3">Field Width</label>
                  
                  <!-- Compact Width Selector -->
                  <div class="width-selector-compact">
                    <!-- Button Group for Width Selection -->
                    <div class="width-buttons">
                      <button
                        v-for="option in widthOptions" 
                        :key="option.value"
                        @click="setComponentWidth(option.value, option.gridColumns)"
                        type="button"
                        class="width-button"
                        :class="{
                          'active': getComponentWidthPercent() === option.value,
                          'recommended': isRecommendedWidth(option.type)
                        }"
                        :title="option.useCase"
                      >
                        <div class="width-visual">
                          <div class="width-bar" :style="{ width: option.value + '%' }"></div>
                        </div>
                        <span class="width-label">{{ option.name }}</span>
                      </button>
                    </div>
                    
                    <!-- Simple Visual Preview -->
                    <div class="width-preview">
                      <div class="preview-container">
                        <div class="preview-field" :style="{ width: getComponentWidthPercent() + '%' }">
                          <div class="preview-input"></div>
                        </div>
                      </div>
                      <div class="preview-info">
                        {{ getCurrentWidthOption()?.name || 'Custom' }} ({{ getComponentWidthPercent() }}%)
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- Validation Tab -->
          <div v-if="activeTab === 'validation'" class="space-y-6">
            <div class="settings-section">
              <div class="section-header">
                <h4 class="section-title">
                  <Icon name="heroicons:shield-check" class="w-5 h-5 mr-2" />
                  Field Validation
                </h4>
                <p class="section-description">Set rules to ensure users enter valid information</p>
              </div>
              
              <div class="section-content">
                <div class="validation-options">
                  <!-- Required Field -->
                  <div class="validation-item">
                    <label class="validation-toggle" @click.stop>
                      <input type="checkbox" v-model="isRequired" />
                      <span class="toggle-slider"></span>
                      <div class="validation-info">
                        <span class="validation-title">Required Field</span>
                        <span class="validation-desc">Users must fill this field before submitting</span>
                      </div>
                    </label>
                  </div>

                  <!-- Email Validation -->
                  <div v-if="component.type === 'email' || component.type === 'text'" class="validation-item">
                    <label class="validation-toggle" @click.stop>
                      <input type="checkbox" v-model="isEmailValidation" />
                      <span class="toggle-slider"></span>
                      <div class="validation-info">
                        <span class="validation-title">Email Format</span>
                        <span class="validation-desc">Must be a valid email address</span>
                      </div>
                    </label>
                  </div>

                  <!-- URL Validation -->
                  <div v-if="component.type === 'url' || component.type === 'text'" class="validation-item">
                    <label class="validation-toggle" @click.stop>
                      <input type="checkbox" v-model="isUrlValidation" />
                      <span class="toggle-slider"></span>
                      <div class="validation-info">
                        <span class="validation-title">URL Format</span>
                        <span class="validation-desc">Must be a valid website address</span>
                      </div>
                    </label>
                  </div>

                  <!-- Length Validation -->
                  <div v-if="isTextBasedField" class="validation-item">
                    <label class="validation-toggle" @click.stop>
                      <input type="checkbox" v-model="hasLengthValidation" />
                      <span class="toggle-slider"></span>
                      <div class="validation-info">
                        <span class="validation-title">Text Length Limits</span>
                        <span class="validation-desc">Set minimum and maximum text length</span>
                      </div>
                    </label>
                    
                    <div v-if="hasLengthValidation" class="validation-details">
                      <div class="grid grid-cols-2 gap-4">
                        <FormKit
                          type="number"
                          label="Minimum Length"
                          v-model="minLength"
                          :min="0"
                          :classes="{ outer: 'field-wrapper' }"
                        />
                        <FormKit
                          type="number"
                          label="Maximum Length"
                          v-model="maxLength"
                          :min="1"
                          :classes="{ outer: 'field-wrapper' }"
                        />
                      </div>
                    </div>
                  </div>

                  <!-- Number Range Validation -->
                  <div v-if="component.type === 'number'" class="validation-item">
                    <label class="validation-toggle" @click.stop>
                      <input type="checkbox" v-model="hasNumberValidation" />
                      <span class="toggle-slider"></span>
                      <div class="validation-info">
                        <span class="validation-title">Number Range</span>
                        <span class="validation-desc">Set minimum and maximum values</span>
                      </div>
                    </label>
                    
                    <div v-if="hasNumberValidation" class="validation-details">
                      <div class="grid grid-cols-2 gap-4">
                        <FormKit
                          type="number"
                          label="Minimum Value"
                          v-model="minNumber"
                          :classes="{ outer: 'field-wrapper' }"
                        />
                        <FormKit
                          type="number"
                          label="Maximum Value"
                          v-model="maxNumber"
                          :classes="{ outer: 'field-wrapper' }"
                        />
                      </div>
                    </div>
                  </div>
                </div>

                <!-- Custom Validation -->
                <div class="mt-6">
                  <FormKit
                    type="text"
                    label="Custom Validation Rules"
                    name="validation"
                    v-model="configModel.validation"
                    help="Advanced: Enter custom validation rules using the format below"
                    :classes="{ outer: 'field-wrapper' }"
                    placeholder="e.g., required|email|length:3,50"
                  />
                  

                  
                  <!-- Validation Rules Guide -->
                  <ValidationRulesHelp />
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- Conditional Logic Section -->
        <div v-if="showField('conditionalLogic')" class="section-container mt-6">
          <div class="section">
            <div class="section-wrapper">
              <div class="section-header">
                <h4 class="section-title">
                  <Icon name="heroicons:adjustments-horizontal" class="w-5 h-5 mr-2" />
                  Conditional Logic
                </h4>
                <p class="section-description">Show, hide, or disable this field based on other field values</p>
              </div>
              
              <div class="section-content">
                <!-- Enable Conditional Logic -->
                <FormKit
                  type="switch"
                  label="Enable Conditional Logic"
                  name="conditionalLogicEnabled"
                  v-model="configModel.conditionalLogic.enabled"
                  help="Show or hide this field based on other fields"
                  :classes="{ outer: 'field-wrapper' }"
                />

                <!-- Conditional Logic Configuration -->
                <div v-if="configModel.conditionalLogic.enabled" class="mt-4 space-y-4">
                  <!-- Action Selection -->
                  <FormKit
                    type="select"
                    label="Action"
                    name="conditionalAction"
                    v-model="configModel.conditionalLogic.action"
                    :options="[
                      { label: 'Show this field', value: 'show' },
                      { label: 'Hide this field', value: 'hide' },
                      { label: 'Enable this field', value: 'enable' },
                      { label: 'Disable this field', value: 'disable' }
                    ]"
                    help="What should happen when conditions are met"
                    :classes="{ outer: 'field-wrapper' }"
                  />

                  <!-- Operator Selection (when multiple conditions) -->
                  <FormKit
                    v-if="configModel.conditionalLogic.conditions.length > 1"
                    type="select"
                    label="Logic Operator"
                    name="conditionalOperator"
                    v-model="configModel.conditionalLogic.operator"
                    :options="[
                      { label: 'All conditions must be true (AND)', value: 'and' },
                      { label: 'Any condition can be true (OR)', value: 'or' }
                    ]"
                    help="How multiple conditions should be evaluated"
                    :classes="{ outer: 'field-wrapper' }"
                  />

                  <!-- Conditions -->
                  <div class="conditions-section">
                    <h5 class="text-sm font-medium text-gray-700 mb-3">Conditions</h5>
                    
                    <div v-if="configModel.conditionalLogic.conditions.length === 0" class="text-center py-4 text-gray-500 border-2 border-dashed border-gray-300 rounded-lg">
                      <Icon name="heroicons:plus-circle" class="w-8 h-8 mx-auto mb-2 text-gray-400" />
                      <p class="text-sm">No conditions set. Add a condition to get started.</p>
                    </div>

                    <div v-else class="space-y-3">
                      <div 
                        v-for="(condition, index) in configModel.conditionalLogic.conditions" 
                        :key="index"
                        class="condition-item bg-gray-50 p-4 rounded-lg border"
                      >
                        <div class="grid grid-cols-3 gap-3">
                          <FormKit
                            type="text"
                            label="Field Name"
                            :name="`condition_field_${index}`"
                            v-model="condition.field"
                            placeholder="field_name"
                            help="Name of the field to check"
                            :classes="{ outer: 'field-wrapper' }"
                          />
                          
                          <FormKit
                            type="select"
                            label="Operator"
                            :name="`condition_operator_${index}`"
                            v-model="condition.operator"
                            :options="[
                              { label: 'Equals', value: 'equals' },
                              { label: 'Not equals', value: 'not_equals' },
                              { label: 'Contains', value: 'contains' },
                              { label: 'Does not contain', value: 'not_contains' },
                              { label: 'Is empty', value: 'is_empty' },
                              { label: 'Is not empty', value: 'is_not_empty' },
                              { label: 'Greater than', value: 'greater_than' },
                              { label: 'Less than', value: 'less_than' }
                            ]"
                            :classes="{ outer: 'field-wrapper' }"
                          />
                          
                          <FormKit
                            type="text"
                            label="Value"
                            :name="`condition_value_${index}`"
                            v-model="condition.value"
                            placeholder="Value to compare"
                            help="Leave empty for 'is empty' conditions"
                            :classes="{ outer: 'field-wrapper' }"
                          />
                        </div>
                        
                        <div class="flex justify-end mt-3">
                          <button
                            @click="removeCondition(index)"
                            type="button"
                            class="text-red-600 hover:text-red-800 text-sm flex items-center"
                          >
                            <Icon name="heroicons:trash" class="w-4 h-4 mr-1" />
                            Remove Condition
                          </button>
                        </div>
                      </div>
                    </div>

                    <button
                      @click="addCondition"
                      type="button"
                      class="mt-3 inline-flex items-center px-3 py-2 border border-blue-600 text-blue-600 bg-white hover:bg-blue-50 rounded text-sm"
                    >
                      <Icon name="heroicons:plus" class="w-4 h-4 mr-1" />
                      Add Condition
                    </button>
                  </div>

                  <!-- Preview JavaScript Code -->
                  <div v-if="configModel.conditionalLogic.conditions.length > 0" class="mt-4">
                    <h5 class="text-sm font-medium text-gray-700 mb-2">Generated Code Preview</h5>
                    <div class="bg-gray-900 text-green-400 p-3 rounded text-xs font-mono">
                      {{ generateConditionalLogicCode() }}
                    </div>
                    <p class="text-xs text-gray-500 mt-1">This JavaScript will be automatically executed to handle the conditional logic</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </template>

    <template #footer>
      <div class="flex justify-between items-center">
        <RsButton
          @click="handleClose"
          variant="secondary-outline"
        >
          Cancel
        </RsButton>
        
        <div class="flex space-x-3">
          <RsButton
            @click="showResetConfirmation"
            variant="warning-outline"
          >
            <Icon name="heroicons:arrow-path" class="w-4 h-4 mr-1" />
            Reset to Default
          </RsButton>
          
          <RsButton
            @click="handleSave"
            variant="primary"
          >
            <Icon name="heroicons:check" class="w-4 h-4 mr-1" />
            Apply Changes
          </RsButton>
        </div>
      </div>
    </template>
  </RsModal>

  <!-- Reset Confirmation Modal -->
  <RsModal v-model="showResetModal" title="Confirm Reset" 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">Reset to Default Settings</p>
          <p class="text-gray-600 text-sm">
            Are you sure you want to reset this component to its default settings? This action will overwrite all current configuration and cannot be undone.
          </p>
        </div>
      </div>
    </div>
    <template #footer>
      <div class="flex justify-end gap-2">
        <RsButton @click="cancelReset" variant="tertiary">
          Cancel
        </RsButton>
        <RsButton @click="confirmReset" variant="warning">
          <Icon name="heroicons:arrow-path" class="w-4 h-4 mr-1" />
          Reset to Default
        </RsButton>
      </div>
    </template>
  </RsModal>

</template>

<script setup>
import { ref, computed, watch, nextTick } from 'vue'
import ValidationRulesHelp from '~/components/ValidationRulesHelp.vue'

const props = defineProps({
  modelValue: Boolean,
  component: Object
})

const emit = defineEmits(['update:modelValue', 'update-component', 'close'])

// Modal state
const isOpen = computed({
  get: () => props.modelValue,
  set: (value) => emit('update:modelValue', value)
})

const activeTab = ref('basic')
const customHtmlActiveTab = ref('html')
const configModel = ref({
  conditionalLogic: {
    enabled: false,
    conditions: [],
    action: 'show',
    operator: 'and'
  }
})

// Type changing state
const pendingTypeChange = ref(null)
const showTypeChangePreview = ref(false)
const showResetModal = ref(false)

// Component info helpers
const modalTitle = computed(() => {
  if (!props.component) return 'Field Settings'
  return `Configure ${getComponentTypeName(props.component.type)}`
})

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',
    searchSelect: 'heroicons:magnifying-glass',
    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',
    'form-section': 'material-symbols:view-module-outline',
    'layout-grid': 'material-symbols:grid-on',
    'info-display': 'heroicons:information-circle',
    'dynamic-list': 'heroicons:list-bullet',
    'repeating-table': 'heroicons:table-cells',
    'repeating-group': 'heroicons:list-bullet',
    'customHtml': 'material-symbols:code'
  }
  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',
    searchSelect: 'Searchable Dropdown',
    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',
    'form-section': 'Form Section',
    'layout-grid': 'Layout Grid',
    'info-display': 'Information Display',
    'dynamic-list': 'Dynamic List',
    'repeating-table': 'Data Table',
    'repeating-group': 'Repeating Group',
    'customHtml': 'Custom HTML'
  }
  return names[type] || 'Form Field'
}

const getComponentDescription = (type) => {
  const descriptions = {
    text: 'Single line text input for names, titles, and short text',
    textarea: 'Multi-line text area for longer content and descriptions',
    number: 'Numeric input with validation for quantities, prices, and counts',
    email: 'Email address input with format validation',
    password: 'Secure password input with hidden characters',
    url: 'Website URL input with link validation',
    tel: 'Phone number input for contact information',
    mask: 'Formatted text input with custom patterns like phone numbers',
    hidden: 'Hidden field for storing data not visible to users',
    select: 'Dropdown menu for choosing one option from a list',
    searchSelect: 'Searchable dropdown menu with type-to-filter functionality',
    checkbox: 'Multiple checkboxes for selecting multiple options',
    radio: 'Radio buttons for choosing one option from a group',
    switch: 'Toggle switch for enabling/disabling options',
    date: 'Date picker for selecting dates',
    time: 'Time picker for selecting times',
    'datetime-local': 'Combined date and time selection',
    range: 'Slider for selecting values within a range',
    color: 'Color picker for selecting colors',
    file: 'Standard file upload button',
    otp: 'One-time password input for verification codes',
    dropzone: 'Drag and drop file upload area',
    button: 'Action button for forms and interactions',
    heading: 'Section heading to organize form content',
    paragraph: 'Text content for instructions and descriptions',
    divider: 'Visual separator to organize form sections',
    'form-section': 'Visual container to group related form fields into sections',
    'layout-grid': 'Create custom grid layouts for precise component positioning',
    'info-display': 'Read-only information display in organized format',
    'dynamic-list': 'Dynamic list for displaying and managing items',
    'repeating-table': 'Structured table for collecting multiple records with forms',
    'repeating-group': 'Collect multiple entries of the same data structure',
    'customHtml': 'Create custom designs using HTML, CSS, and JavaScript'
  }
  return descriptions[type] || 'Configure this form field'
}

// Tab management
const availableTabs = computed(() => {
  const tabs = [
    { id: 'basic', label: 'Basic Settings', icon: 'heroicons:cog-6-tooth' }
  ]
  
  // Add layout tab for components that support width settings
  if (showField('width')) {
    tabs.push({ id: 'layout', label: 'Layout', icon: 'heroicons:squares-2x2' })
  }
  
  if (hasOptions.value) {
    tabs.push({ id: 'options', label: 'Options', icon: 'heroicons:list-bullet' })
  }
  
  // Only add validation tab for components that support validation
  if (supportsValidation.value) {
    tabs.push({ id: 'validation', label: 'Validation', icon: 'heroicons:shield-check' })
  }
  
  return tabs
})

// Field visibility helpers
const showField = (fieldName) => {
  if (!props.component) return false
  
  const fieldConfig = {
    label: ['text', 'textarea', 'number', 'email', 'password', 'url', 'tel', 'mask', 'select', 'searchSelect', 'checkbox', 'radio', 'switch', 'date', 'time', 'datetime-local', 'range', 'color', 'file', 'otp', 'dropzone', 'button', 'form-section', 'dynamic-list', 'repeating-table', 'repeating-group', 'customHtml', 'info-display'],
    name: ['text', 'textarea', 'number', 'email', 'password', 'url', 'tel', 'mask', 'hidden', 'select', 'searchSelect', 'checkbox', 'radio', 'switch', 'date', 'time', 'datetime-local', 'range', 'color', 'file', 'otp', 'dropzone', 'button', 'form-section', 'dynamic-list', 'repeating-table', 'repeating-group', 'customHtml', 'info-display'],
    placeholder: ['text', 'textarea', 'number', 'email', 'password', 'url', 'tel', 'mask', 'select', 'searchSelect', 'dynamic-list'],
    help: ['text', 'textarea', 'number', 'email', 'password', 'url', 'tel', 'mask', 'hidden', 'select', 'searchSelect', 'checkbox', 'radio', 'switch', 'date', 'time', 'datetime-local', 'range', 'color', 'file', 'otp', 'dropzone', 'button', 'form-section', 'dynamic-list', 'repeating-table', 'repeating-group', 'customHtml', 'info-display'],
    value: ['heading', 'paragraph', 'hidden'],
    width: ['text', 'textarea', 'number', 'email', 'password', 'url', 'tel', 'mask', 'select', 'searchSelect', 'checkbox', 'radio', 'switch', 'date', 'time', 'datetime-local', 'range', 'color', 'file', 'otp', 'dropzone', 'button', 'heading', 'paragraph', 'form-section', 'info-display', 'dynamic-list', 'repeating-table', 'repeating-group', 'customHtml'],
    rows: ['textarea'],
    options: ['select', 'searchSelect', 'checkbox', 'radio'],
    conditionalLogic: ['text', 'textarea', 'number', 'email', 'password', 'url', 'tel', 'select', 'searchSelect', 'checkbox', 'radio', 'switch', 'date', 'time', 'datetime-local', 'range', 'color', 'file', 'form-section', 'dynamic-list', 'repeating-table', 'repeating-group', 'customHtml'],
    readonly: ['text', 'number', 'email', 'password', 'textarea', 'mask', 'url', 'tel', 'select', 'searchSelect', 'checkbox', 'radio', 'switch']
  }
  
  return fieldConfig[fieldName]?.includes(props.component.type) || false
}

const hasOptions = computed(() => showField('options'))
const hasSpecificSettings = computed(() => {
  if (!props.component) return false
  const specificTypes = ['mask', 'otp', 'dropzone', 'range', 'button', 'form-section', 'dynamic-list', 'repeating-table', 'repeating-group', 'customHtml', 'info-display', 'layout-grid']
  return specificTypes.includes(props.component.type)
})

// Components that support validation
const supportsValidation = computed(() => {
  if (!props.component) return false
  const validationSupportedTypes = [
    'text', 'textarea', 'number', 'email', 'password', 'url', 'tel', 'select', 
    'searchSelect', 'checkbox', 'radio', 'date', 'time', 'datetime-local', 'range', 'color', 
    'file', 'otp', 'dropzone', 'mask'
  ]
  return validationSupportedTypes.includes(props.component.type)
})

// Validation helpers
const isRequired = computed({
  get: () => configModel.value.validation?.includes('required') || false,
  set: (value) => updateValidation('required', value)
})

const isEmailValidation = computed({
  get: () => configModel.value.validation?.includes('email') || false,
  set: (value) => updateValidation('email', value)
})

const isUrlValidation = computed({
  get: () => configModel.value.validation?.includes('url') || false,
  set: (value) => updateValidation('url', value)
})

const hasLengthValidation = ref(false)
const minLength = ref(null)
const maxLength = ref(null)

const hasNumberValidation = ref(false)
const minNumber = ref(null)
const maxNumber = ref(null)

const isTextBasedField = computed(() => {
  return ['text', 'textarea', 'email', 'password', 'url', 'tel'].includes(props.component?.type)
})

// Safe HTML preview for custom HTML component
const getSafeHtmlPreview = (htmlContent) => {
  if (!htmlContent) return ''
  
  // Remove script tags and event handlers for safe preview
  return htmlContent
    .replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, '')
    .replace(/\s*on\w+\s*=\s*["'][^"']*["']/gi, '')
    .replace(/javascript:/gi, '')
}

// Full HTML preview with CSS included
const getFullHtmlPreview = (htmlContent, cssContent) => {
  if (!htmlContent) return ''
  
  const safeHtml = getSafeHtmlPreview(htmlContent)
  
  if (cssContent) {
    // Create a unique ID for scoping
    const previewId = `preview-${Date.now()}`
    
    // Scope the CSS to the preview container
    const scopedCss = cssContent.replace(
      /([^@{}]+)\s*{/g, 
      `#${previewId} $1 {`
    )
    
    return `
      <style>
        #${previewId} {
          /* Preview container styles */
          position: relative;
        }
        ${scopedCss}
      </style>
      <div id="${previewId}">${safeHtml}</div>
    `
  }
  
  return safeHtml
}

// Custom HTML tab integration
const getTotalContentLength = () => {
  const html = configModel.value.htmlContent || '';
  const css = configModel.value.cssContent || '';
  const js = configModel.value.jsContent || '';
  return html.length + css.length + js.length;
}

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

// Fetch published processes when component is a button
const fetchPublishedProcesses = async () => {
  if (props.component?.type === 'button') {
    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 = []
    }
  }
}

// Watch for component changes to fetch processes when needed
watch(() => props.component, (newComponent) => {
  if (newComponent?.type === 'button') {
    fetchPublishedProcesses()
  }
}, { immediate: true })

// Generate iframe URL preview
const getIframeUrlPreview = () => {
  if (!configModel.value.linkProcessId) {
    return 'Select a process first...'
  }
  
  const baseUrl = `${window.location.origin}/workflow/${configModel.value.linkProcessId}`
  const params = new URLSearchParams()
  
  // Add debug parameter (false = iframe mode, true = debug mode)
  if (configModel.value.iframeDebug !== undefined) {
    params.append('debug', configModel.value.iframeDebug ? 'true' : 'false')
  }
  
  // Add hideComplete parameter
  if (configModel.value.iframeHideComplete) {
    params.append('hideComplete', 'true')
  }
  
  // Add theme parameter
  if (configModel.value.iframeTheme) {
    params.append('theme', configModel.value.iframeTheme)
  }
  
  // Add custom parameters
  if (configModel.value.iframeCustomParams) {
    const customParams = new URLSearchParams(configModel.value.iframeCustomParams)
    customParams.forEach((value, key) => {
      params.append(key, value)
    })
  }
  
  const queryString = params.toString()
  return queryString ? `${baseUrl}?${queryString}` : baseUrl
}

// Generate custom button styles for preview
const getCustomButtonStyles = () => {
  const styles = {
    backgroundColor: configModel.value.customBackgroundColor || '#3b82f6',
    color: configModel.value.customTextColor || '#ffffff',
    border: 'none',
    cursor: 'pointer'
  }
  
  // Add border if specified
  if (configModel.value.customBorderColor && configModel.value.customBorderWidth) {
    styles.border = `${configModel.value.customBorderWidth}px solid ${configModel.value.customBorderColor}`
  }
  
  // Add border radius
  if (configModel.value.customBorderRadius) {
    styles.borderRadius = `${configModel.value.customBorderRadius}px`
  }
  
  // Add hover effects
  const hoverEffect = configModel.value.customHoverEffect
  if (hoverEffect && hoverEffect !== 'none') {
    switch (hoverEffect) {
      case 'darken':
        styles[':hover'] = { filter: 'brightness(0.9)' }
        break
      case 'lighten':
        styles[':hover'] = { filter: 'brightness(1.1)' }
        break
      case 'scale':
        styles[':hover'] = { transform: 'scale(1.05)' }
        break
      case 'glow':
        styles[':hover'] = { 
          boxShadow: `0 0 10px ${configModel.value.customBackgroundColor || '#3b82f6'}` 
        }
        break
    }
  }
  
  return styles
}

// Type changing functionality
const compatibilityGroups = {
  // Text-based inputs (can switch between each other)
  textInputs: ['text',  'textarea', 'number', 'email', 'password', 'url', 'tel', 'mask'],
  
  // Selection inputs (can switch between each other)
  selectionInputs: ['select', 'searchSelect', 'radio', 'checkbox'],
  
  // Date/time inputs (can switch between each other)
  dateTimeInputs: ['date', 'time', 'datetime-local'],
  
  // Number-based inputs
  numberInputs: ['number', 'range'],
  
  // File inputs
  fileInputs: ['file', 'dropzone'],
  
  // Layout elements
  layoutElements: ['heading', 'paragraph'],
  
  // Advanced inputs (each unique but can have some compatibility)
  advancedInputs: ['switch', 'color', 'otp', 'hidden']
}

const availableTypeChanges = computed(() => {
  if (!props.component) return []
  
  const currentType = props.component.type
  
  // Find which group the current type belongs to
  for (const [groupName, types] of Object.entries(compatibilityGroups)) {
    if (types.includes(currentType)) {
      // Return other types in the same group
      return types.filter(type => type !== currentType)
    }
  }
  
  return []
})

// Get preserved properties when changing types
const getPreservedProperties = (fromType, toType) => {
  const commonProperties = ['label', 'name', 'help', 'validation', 'width', 'gridColumn']
  const preserved = [...commonProperties]
  
  // Check for specific preserved properties based on compatibility groups
  if (compatibilityGroups.textInputs.includes(fromType) && compatibilityGroups.textInputs.includes(toType)) {
    preserved.push('placeholder')
  }
  
  if (compatibilityGroups.selectionInputs.includes(fromType) && compatibilityGroups.selectionInputs.includes(toType)) {
    preserved.push('options')
  }
  
  if (compatibilityGroups.dateTimeInputs.includes(fromType) && compatibilityGroups.dateTimeInputs.includes(toType)) {
    preserved.push('min', 'max')
  }
  
  if (compatibilityGroups.numberInputs.includes(fromType) && compatibilityGroups.numberInputs.includes(toType)) {
    preserved.push('min', 'max', 'step')
  }
  
  if (compatibilityGroups.fileInputs.includes(fromType) && compatibilityGroups.fileInputs.includes(toType)) {
    preserved.push('accept', 'multiple')
  }
  
  if (compatibilityGroups.layoutElements.includes(fromType) && compatibilityGroups.layoutElements.includes(toType)) {
    preserved.push('value')
  }
  
  return preserved.filter((prop, index, self) => self.indexOf(prop) === index) // Remove duplicates
}

// File size helper
const configModelMaxSizeMB = computed({
  get: () => configModel.value.maxSize ? Math.round(configModel.value.maxSize / (1024 * 1024)) : 5,
  set: (value) => {
    configModel.value.maxSize = value * 1024 * 1024
  }
})

// Width options with smart recommendations
const widthOptions = [
  {
    name: 'Narrow',
    value: 25,
    gridColumns: 3,
    type: 'narrow',
    description: 'Quarter width',
    useCase: 'Small inputs like age, zip code, or short codes'
  },
  {
    name: 'Small',
    value: 33,
    gridColumns: 4,
    type: 'small',
    description: 'One-third width',
    useCase: 'Short text fields, city names, or grouped inputs'
  },
  {
    name: 'Medium',
    value: 50,
    gridColumns: 6,
    type: 'medium',
    description: 'Half width',
    useCase: 'Names, phone numbers, or paired inputs'
  },
  {
    name: 'Wide',
    value: 75,
    gridColumns: 9,
    type: 'wide',
    description: 'Three-quarter width',
    useCase: 'Addresses, longer text, or prominent fields'
  },
  {
    name: 'Full',
    value: 100,
    gridColumns: 12,
    type: 'full',
    description: 'Full width',
    useCase: 'Long text, paragraphs, or single-column layout'
  }
]

// Smart recommendations based on field type
const getRecommendedWidth = (fieldType) => {
  const recommendations = {
    // Narrow fields (25% - 3 columns)
    'number': 'narrow',
    'date': 'narrow',
    'time': 'narrow',
    'color': 'narrow',
    'otp': 'narrow',
    
    // Small fields (33% - 4 columns)
    'text': 'small',
    
    // Medium fields (50% - 6 columns)
    'email': 'medium',
    'tel': 'medium',
    'password': 'medium',
    'mask': 'medium',
    'select': 'medium',
    'datetime-local': 'medium',
    
    // Wide fields (75% - 9 columns)
    'url': 'wide',
    'file': 'wide',
    'dropzone': 'wide',
    
    // Full width fields (100% - 12 columns)
    'textarea': 'full',
    'heading': 'full',
    'paragraph': 'full',
    'checkbox': 'full',
    'radio': 'full',
    'range': 'full',
    'switch': 'full',
    'button': 'full',
    'info-display': 'full',
    'dynamic-list': 'full',
    'repeating-table': 'full'
  }
  
  return recommendations[fieldType] || 'full'
}

const isRecommendedWidth = (widthType) => {
  return getRecommendedWidth(props.component?.type) === widthType
}

const getCurrentWidthOption = () => {
  const currentPercent = getComponentWidthPercent()
  return widthOptions.find(option => option.value === currentPercent)
}

const getCurrentGridColumns = () => {
  const currentPercent = getComponentWidthPercent()
  const option = widthOptions.find(opt => opt.value === currentPercent)
  return option ? option.gridColumns : 12
}

// Watch for component changes
watch(() => props.component, (newComponent) => {
  if (newComponent) {
    configModel.value = { 
      ...newComponent.props,
      // Ensure conditionalLogic is properly initialized
      conditionalLogic: newComponent.props.conditionalLogic || {
        enabled: false,
        conditions: [],
        action: 'show',
        operator: 'and'
      }
    }
    activeTab.value = 'basic'
    resetValidationState()
  }
}, { immediate: true })

// Methods - Define resetValidationState first before it's used above
const resetValidationState = () => {
  hasLengthValidation.value = false
  hasNumberValidation.value = false
  minLength.value = null
  maxLength.value = null
  minNumber.value = null
  maxNumber.value = null
}

const updateValidation = (rule, enabled) => {
  let current = configModel.value.validation || ''
  const rules = current.split('|').filter(r => r && r !== rule)
  
  if (enabled) {
    rules.push(rule)
  }
  
  configModel.value.validation = rules.join('|')
}

const setComponentWidth = (percentage, gridColumns) => {
  configModel.value.width = `${percentage}%`
  configModel.value.gridColumn = `span ${gridColumns}`
}

const getComponentWidthPercent = () => {
  const width = configModel.value.width || '100%'
  return parseInt(width.replace('%', ''))
}

const addOption = () => {
  if (!configModel.value.options) {
    configModel.value.options = []
  }
  configModel.value.options.push({ 
    label: `Option ${configModel.value.options.length + 1}`, 
    value: `option_${configModel.value.options.length + 1}` 
  })
}

const removeOption = (index) => {
  if (configModel.value.options && configModel.value.options.length > index) {
    configModel.value.options.splice(index, 1)
  }
}

// Default items management for dynamic-list
const addDefaultItem = () => {
  if (!configModel.value.defaultItems) {
    configModel.value.defaultItems = []
  }
  configModel.value.defaultItems.push('')
}

const removeDefaultItem = (index) => {
  if (configModel.value.defaultItems) {
    configModel.value.defaultItems.splice(index, 1)
  }
}

// Conditional logic management
const addCondition = () => {
  if (!configModel.value.conditionalLogic) {
    configModel.value.conditionalLogic = {
      enabled: true,
      conditions: [],
      action: 'show',
      operator: 'and'
    }
  }
  
  if (!configModel.value.conditionalLogic.conditions) {
    configModel.value.conditionalLogic.conditions = []
  }
  
  configModel.value.conditionalLogic.conditions.push({
    field: '',
    operator: 'equals',
    value: ''
  })
}

const removeCondition = (index) => {
  if (configModel.value.conditionalLogic?.conditions) {
    configModel.value.conditionalLogic.conditions.splice(index, 1)
  }
}

// Info Display field management
const addInfoField = () => {
  if (!configModel.value.fields) {
    configModel.value.fields = []
  }
  
  configModel.value.fields.push({
    label: `Field ${configModel.value.fields.length + 1}`,
    value: 'Value',
    key: `field_${configModel.value.fields.length + 1}`,
    type: 'text', // text, button
    url: '', // for button type
    openInNewTab: false, // for button type
    icon: '' // for button type
  })
}

const removeInfoField = (index) => {
  if (configModel.value.fields && configModel.value.fields.length > index) {
    configModel.value.fields.splice(index, 1)
  }
}

const generateConditionalLogicCode = () => {
  if (!configModel.value.conditionalLogic || !configModel.value.conditionalLogic.conditions.length) {
    return '// No conditions defined'
  }
  
  const { conditions, action, operator } = configModel.value.conditionalLogic
  const fieldName = configModel.value.name || 'this_field'
  
  // Helper function to map operators to valid JavaScript
  const getJavaScriptOperator = (operator) => {
    switch (operator) {
      case 'and':
      case 'AND':
        return '&&'
      case 'or':
      case 'OR':
        return '||'
      default:
        return '&&' // Default to AND if unknown operator
    }
  }
  
  // Helper function to generate condition check
  const generateConditionCheck = (condition) => {
    const { field, operator: condOp, value } = condition
    
    switch (condOp) {
      case 'equals':
        return `getField('${field}') === '${value}'`
      case 'not_equals':
        return `getField('${field}') !== '${value}'`
      case 'contains':
        return `String(getField('${field}') || '').toLowerCase().includes('${value}'.toLowerCase())`
      case 'not_contains':
        return `!String(getField('${field}') || '').toLowerCase().includes('${value}'.toLowerCase())`
      case 'is_empty':
        return `!getField('${field}') || getField('${field}') === ''`
      case 'is_not_empty':
        return `getField('${field}') && getField('${field}') !== ''`
      case 'greater_than':
        return `Number(getField('${field}')) > ${Number(value) || 0}`
      case 'less_than':
        return `Number(getField('${field}')) < ${Number(value) || 0}`
      default:
        return `getField('${field}') === '${value}'`
    }
  }
  
  // Helper function to generate action code
  const generateActionCode = (action, fieldName) => {
    switch (action) {
      case 'show': return `showField('${fieldName}')`
      case 'hide': return `hideField('${fieldName}')`
      case 'enable': return `enableField('${fieldName}')`
      case 'disable': return `disableField('${fieldName}')`
      default: return `showField('${fieldName}')`
    }
  }
  
  // Helper function to generate inverse action code
  const generateInverseActionCode = (action, fieldName) => {
    switch (action) {
      case 'show': return `hideField('${fieldName}')`
      case 'hide': return `showField('${fieldName}')`
      case 'enable': return `disableField('${fieldName}')`
      case 'disable': return `enableField('${fieldName}')`
      default: return `hideField('${fieldName}')`
    }
  }
  
  // Generate condition checks
  const conditionChecks = conditions.map(generateConditionCheck).join(` ${getJavaScriptOperator(operator)} `)
  
  // Generate action functions
  const actionCode = generateActionCode(action, fieldName)
  const inverseActionCode = generateInverseActionCode(action, fieldName)
  
  // Generate field change listeners - note about optimization
  const watchedFields = [...new Set(conditions.map(c => c.field).filter(Boolean))]
  
  // Add helpful comment about optimization when multiple fields watch the same condition
  const optimizationNote = watchedFields.length > 1 ? 
    `// NOTE: When multiple fields use the same trigger field, the FormBuilder automatically\n// optimizes by grouping these handlers to avoid duplicate onFieldChange listeners.\n\n` : 
    ''
  
  const listenerCode = watchedFields.map(field => 
    `onFieldChange('${field}', function() {
  if (${conditionChecks}) {
    ${actionCode};
  } else {
    ${inverseActionCode};
  }
});`
  ).join('\n\n')
  
  return optimizationNote + (listenerCode || '// Invalid configuration')
}

const handleSave = () => {
  emit('update-component', { ...props.component, props: configModel.value })
  handleClose()
}

const showResetConfirmation = () => {
  showResetModal.value = true;
};

const cancelReset = () => {
  showResetModal.value = false;
};

const confirmReset = () => {
  handleReset();
  showResetModal.value = false;
};

const handleReset = () => {
  if (props.component) {
    // Reset to default props from the component definition
    const defaultComponent = {
      ...props.component,
      props: props.component.defaultProps || {}
    }
    configModel.value = { 
      ...defaultComponent.props,
      // Ensure conditionalLogic is properly initialized
      conditionalLogic: defaultComponent.props.conditionalLogic || {
        enabled: false,
        conditions: [],
        action: 'show',
        operator: 'and'
      }
    }
  }
}

// Button script template helper
const insertButtonScriptTemplate = (templateType) => {
  let template = '';
  
  switch (templateType) {
    case 'validation':
      template = `// Form validation example
const name = getField('name');
const email = getField('email');
const phone = getField('phone');

// Validate required fields
if (!name || !email) {
  showError('Please fill in all required fields');
  return;
}

// Validate email format
if (email && !email.includes('@')) {
  showError('Please enter a valid email address');
  return;
}

// Success message
showSuccess('Form validation passed!');
`;
      break;
    case 'calculation':
      template = `// Calculation example
const quantity = Number(getField('quantity') || 0);
const price = Number(getField('price') || 0);
const taxRate = 0.08; // 8% tax

// Calculate subtotal
const subtotal = quantity * price;
setField('subtotal', subtotal.toFixed(2));

// Calculate tax
const tax = subtotal * taxRate;
setField('tax', tax.toFixed(2));

// Calculate total
const total = subtotal + tax;
setField('total', total.toFixed(2));

showInfo('Calculation completed');
`;
      break;
    case 'toggle':
      template = `// Toggle fields visibility example
const selectedOption = getField('options');

// Hide all detail fields first
hideField('details_option_1');
hideField('details_option_2');
hideField('details_option_3');

// Show only the relevant detail field
if (selectedOption === 'option_1') {
  showField('details_option_1');
} else if (selectedOption === 'option_2') {
  showField('details_option_2');
} else if (selectedOption === 'option_3') {
  showField('details_option_3');
}
`;
      break;
    default:
      return;
  }
  
  configModel.value.onClick = template;
};

const handleClose = () => {
  isOpen.value = false
  emit('close')
}

// Table column management for repeating-table
const addTableColumn = () => {
  if (!configModel.value.columns) {
    configModel.value.columns = []
  }
  configModel.value.columns.push({
    name: `column_${configModel.value.columns.length + 1}`,
    label: `Column ${configModel.value.columns.length + 1}`,
    type: 'text',
    required: false,
    placeholder: 'Enter value...',
    validation: '',
    width: '200px',
    options: []
  })
}

const removeTableColumn = (index) => {
  if (configModel.value.columns) {
    configModel.value.columns.splice(index, 1)
  }
}

const addColumnOption = (columnIndex) => {
  if (!configModel.value.columns[columnIndex].options) {
    configModel.value.columns[columnIndex].options = []
  }
  configModel.value.columns[columnIndex].options.push({
    label: `Option ${configModel.value.columns[columnIndex].options.length + 1}`,
    value: `option_${configModel.value.columns[columnIndex].options.length + 1}`
  })
}

const removeColumnOption = (columnIndex, optionIndex) => {
  if (configModel.value.columns[columnIndex].options) {
    configModel.value.columns[columnIndex].options.splice(optionIndex, 1)
  }
}

const removeNestedComponent = (index) => {
  if (configModel.value.children) {
    configModel.value.children.splice(index, 1)
  }
}

// Repeating group field management
const addGroupField = () => {
  if (!configModel.value.fields) {
    configModel.value.fields = []
  }
  
  configModel.value.fields.push({
    type: 'text',
    name: `field_${configModel.value.fields.length + 1}`,
    label: `Field ${configModel.value.fields.length + 1}`,
    placeholder: 'Enter value'
  })
}

const removeGroupField = (index) => {
  if (configModel.value.fields) {
    configModel.value.fields.splice(index, 1)
  }
}

const addFieldOption = (field) => {
  if (!field.options) {
    field.options = []
  }
  field.options.push({
    label: `Option ${field.options.length + 1}`,
    value: `option_${field.options.length + 1}`
  })
}

const removeFieldOption = (field, optionIndex) => {
  if (field.options) {
    field.options.splice(optionIndex, 1)
  }
}

// Type changing methods
const handleTypeChange = (newType) => {
  if (newType === props.component.type) return
  
  pendingTypeChange.value = newType
  showTypeChangePreview.value = true
}

const confirmTypeChange = () => {
  if (!pendingTypeChange.value) return
  
  const newType = pendingTypeChange.value
  const preservedProps = getPreservedProperties(props.component.type, newType)
  
  // Create new component configuration with preserved properties
  const newProps = {}
  
  // Preserve common properties
  preservedProps.forEach(prop => {
    if (configModel.value[prop] !== undefined) {
      newProps[prop] = configModel.value[prop]
    }
  })
  
  // Add default properties for the new type that aren't being preserved
  const newTypeDefaults = getDefaultPropsForType(newType)
  Object.keys(newTypeDefaults).forEach(prop => {
    if (newProps[prop] === undefined) {
      newProps[prop] = newTypeDefaults[prop]
    }
  })
  
  // Update the component type and properties
  const updatedComponent = {
    ...props.component,
    type: newType,
    props: newProps
  }
  
  // Emit the updated component
  emit('update-component', updatedComponent)
  
  // Reset state
  pendingTypeChange.value = null
  showTypeChangePreview.value = false
  
  // Close modal after change
  handleClose()
}

const cancelTypeChange = () => {
  pendingTypeChange.value = null
  showTypeChangePreview.value = false
}

// Get default properties for a specific component type
// Layout Grid Presets
const layoutPresets = {
  'sidebar-right': {
    rows: 2,
    columns: 2,
    cells: [
      { id: 'cell-0', row: 0, col: 0, rowSpan: 1, colSpan: 1, component: null },
      { id: 'cell-1', row: 0, col: 1, rowSpan: 2, colSpan: 1, component: null },
      { id: 'cell-2', row: 1, col: 0, rowSpan: 1, colSpan: 1, component: null }
    ]
  },
  'sidebar-left': {
    rows: 2,
    columns: 2,
    cells: [
      { id: 'cell-0', row: 0, col: 0, rowSpan: 2, colSpan: 1, component: null },
      { id: 'cell-1', row: 0, col: 1, rowSpan: 1, colSpan: 1, component: null },
      { id: 'cell-2', row: 1, col: 1, rowSpan: 1, colSpan: 1, component: null }
    ]
  },
  'header-content': {
    rows: 2,
    columns: 2,
    cells: [
      { id: 'cell-0', row: 0, col: 0, rowSpan: 1, colSpan: 2, component: null },
      { id: 'cell-1', row: 1, col: 0, rowSpan: 1, colSpan: 1, component: null },
      { id: 'cell-2', row: 1, col: 1, rowSpan: 1, colSpan: 1, component: null }
    ]
  },
  'three-column': {
    rows: 1,
    columns: 3,
    cells: [
      { id: 'cell-0', row: 0, col: 0, rowSpan: 1, colSpan: 1, component: null },
      { id: 'cell-1', row: 0, col: 1, rowSpan: 1, colSpan: 1, component: null },
      { id: 'cell-2', row: 0, col: 2, rowSpan: 1, colSpan: 1, component: null }
    ]
  },
  'two-by-two': {
    rows: 2,
    columns: 2,
    cells: [
      { id: 'cell-0', row: 0, col: 0, rowSpan: 1, colSpan: 1, component: null },
      { id: 'cell-1', row: 0, col: 1, rowSpan: 1, colSpan: 1, component: null },
      { id: 'cell-2', row: 1, col: 0, rowSpan: 1, colSpan: 1, component: null },
      { id: 'cell-3', row: 1, col: 1, rowSpan: 1, colSpan: 1, component: null }
    ]
  },
  'form-layout': {
    rows: 3,
    columns: 2,
    cells: [
      { id: 'cell-0', row: 0, col: 0, rowSpan: 1, colSpan: 1, component: null },
      { id: 'cell-1', row: 0, col: 1, rowSpan: 1, colSpan: 1, component: null },
      { id: 'cell-2', row: 1, col: 0, rowSpan: 1, colSpan: 1, component: null },
      { id: 'cell-3', row: 1, col: 1, rowSpan: 1, colSpan: 1, component: null },
      { id: 'cell-4', row: 2, col: 0, rowSpan: 1, colSpan: 2, component: null }
    ]
  },
  'header-sidebar': {
    rows: 3,
    columns: 2,
    cells: [
      { id: 'cell-0', row: 0, col: 0, rowSpan: 1, colSpan: 2, component: null },
      { id: 'cell-1', row: 1, col: 0, rowSpan: 1, colSpan: 1, component: null },
      { id: 'cell-2', row: 2, col: 0, rowSpan: 1, colSpan: 1, component: null },
      { id: 'cell-3', row: 1, col: 1, rowSpan: 2, colSpan: 1, component: null }
    ]
  }
}

const currentPreset = ref('')

// Apply a layout preset
const applyPreset = (presetName) => {
  if (!props.component || props.component.type !== 'layout-grid') return
  
  const preset = layoutPresets[presetName]
  if (!preset) return
  
  // Update the component configuration
  configModel.value.rows = preset.rows
  configModel.value.columns = preset.columns
  configModel.value.cells = [...preset.cells] // Create a copy to avoid reference issues
  
  currentPreset.value = presetName
}

// Check if current layout matches a preset
const isCurrentPreset = (presetName) => {
  if (!props.component || props.component.type !== 'layout-grid') return false
  
  const preset = layoutPresets[presetName]
  if (!preset) return false
  
  return (
    configModel.value.rows === preset.rows &&
    configModel.value.columns === preset.columns &&
    JSON.stringify(configModel.value.cells) === JSON.stringify(preset.cells)
  )
}

// Layout Grid Cell Management
const addCell = () => {
  if (!configModel.value.cells) {
    configModel.value.cells = []
  }
  
  // Find the next available position
  const rows = configModel.value.rows || 2
  const cols = configModel.value.columns || 2
  let newRow = 0
  let newCol = 0
  
  // Find first empty position
  for (let row = 0; row < rows; row++) {
    for (let col = 0; col < cols; col++) {
      const isOccupied = configModel.value.cells.some(cell => 
        cell.row === row && cell.col === col
      )
      if (!isOccupied) {
        newRow = row
        newCol = col
        break
      }
    }
    if (newRow !== 0 || newCol !== 0) break
  }
  
  const newCell = {
    id: `cell-${Date.now()}`,
    row: newRow,
    col: newCol,
    rowSpan: 1,
    colSpan: 1,
    component: null
  }
  
  configModel.value.cells.push(newCell)
}

const removeCell = (index) => {
  if (configModel.value.cells && index >= 0 && index < configModel.value.cells.length) {
    configModel.value.cells.splice(index, 1)
  }
}

// Get total components in layout grid
const getTotalComponents = () => {
  if (props.component && props.component.type === 'layout-grid' && props.component.props.cells) {
    return props.component.props.cells.filter(cell => cell.component).length
  }
  return 0
}

const getDefaultPropsForType = (type) => {
  const defaults = {
    text: {
      type: 'text',
      placeholder: 'Enter text...',
      validation: ''
    },
    textarea: {
      type: 'textarea',
      placeholder: 'Enter text...',
      validation: '',
      rows: 3
    },
    email: {
      type: 'email',
      placeholder: 'email@example.com',
      validation: 'email'
    },
    password: {
      type: 'password',
      placeholder: 'Enter password...',
      validation: ''
    },
    url: {
      type: 'url',
      placeholder: 'https://example.com',
      validation: 'url'
    },
    tel: {
      type: 'tel',
      placeholder: '+1 (555) 123-4567',
      validation: ''
    },
    mask: {
      type: 'mask',
      placeholder: 'Enter value...',
      mask: '###-###-####',
      validation: ''
    },
    select: {
      type: 'select',
      placeholder: 'Select an option',
      options: [
        { label: 'Option 1', value: 'option_1' },
        { label: 'Option 2', value: 'option_2' }
      ],
      validation: ''
    },
    searchSelect: {
      type: 'searchSelect',
      placeholder: 'Search and select an option',
      options: [
        { label: 'Option 1', value: 'option_1' },
        { label: 'Option 2', value: 'option_2' },
        { label: 'Option 3', value: 'option_3' }
      ],
      validation: ''
    },
    radio: {
      type: 'radio',
      options: [
        { label: 'Option 1', value: 'option_1' },
        { label: 'Option 2', value: 'option_2' }
      ],
      validation: ''
    },
    checkbox: {
      type: 'checkbox',
      options: [
        { label: 'Option 1', value: 'option_1' },
        { label: 'Option 2', value: 'option_2' }
      ],
      validation: ''
    },
    date: {
      type: 'date',
      validation: ''
    },
    time: {
      type: 'time',
      validation: ''
    },
    'datetime-local': {
      type: 'datetime-local',
      validation: ''
    },
    number: {
      type: 'number',
      placeholder: '0',
      validation: ''
    },
    range: {
      type: 'range',
      min: 0,
      max: 100,
      step: 1,
      value: 50,
      validation: ''
    },
    file: {
      type: 'file',
      accept: '*/*',
      validation: ''
    },
    dropzone: {
      type: 'dropzone',
      accept: 'image/*,.pdf,.doc,.docx',
      multiple: true,
      maxSize: 5242880,
      maxFiles: 5,
      validation: ''
    },
    switch: {
      type: 'switch',
      value: false,
      validation: ''
    },
    color: {
      type: 'color',
      value: '#3b82f6',
      validation: ''
    },
    otp: {
      type: 'otp',
      digits: 6,
      validation: 'required'
    },
    hidden: {
      type: 'hidden',
      value: ''
    },
    heading: {
      value: 'Section Heading',
      level: 2
    },
    paragraph: {
      value: 'Enter some descriptive text here.'
    },
    button: {
      type: 'button',
      buttonType: 'button',
      variant: 'primary',
      size: 'md',
      showLabel: false,
      showButtonText: true,
      buttonText: '',
      icon: '',
      linkType: 'none', // 'none', 'url', 'process'
      linkUrl: '',
      linkProcessId: '',
      linkTarget: '_self', // '_self', '_blank'
      iframeDebug: false, // Show/hide debug UI
      iframeHideComplete: false, // Hide completion message
      iframeTheme: '', // Custom theme
      iframeCustomParams: '' // Additional URL parameters
    }
  }
  
  // Ensure width and gridColumn are included for all types
  const baseDefaults = {
    width: '100%',
    gridColumn: 'span 12'
  }
  
  return { ...baseDefaults, ...(defaults[type] || {}) }
}
</script>

<style scoped>
.field-settings-modal {
  max-height: 80vh;
  overflow-y: auto;
}

/* Section Styling */
.settings-section {
  @apply border border-gray-200 rounded-lg overflow-hidden;
}

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

.section-title {
  @apply text-sm font-semibold text-gray-800 flex items-center;
}

.section-description {
  @apply text-xs text-gray-600 mt-1;
}

.section-content {
  @apply p-4 space-y-4;
}

/* Width Selection */
.width-selector {
  @apply space-y-2;
}

.width-option {
  @apply border border-gray-200 rounded-lg p-4 transition-all duration-200 hover:border-blue-300 hover:bg-blue-50 cursor-pointer flex items-center space-x-4;
}

.width-option.selected {
  @apply border-blue-500 bg-blue-50 ring-2 ring-blue-200;
}

.width-option.recommended {
  @apply ring-2 ring-green-200 border-green-300;
}

.width-option.selected.recommended {
  @apply border-green-500 bg-green-50 ring-2 ring-green-200;
}

.grid-preview {
  @apply flex-shrink-0;
}

.grid-container-mini {
  @apply grid grid-cols-12 gap-1 w-32;
}

.grid-cell {
  @apply h-2 rounded-sm transition-colors duration-200;
}

.grid-cell.active {
  @apply bg-blue-500;
}

.grid-cell.inactive {
  @apply bg-gray-200;
}

.option-info {
  @apply flex-1 text-left min-w-0;
}

.option-name {
  @apply text-base font-semibold text-gray-800 mb-1 flex items-center;
}

.option-description {
  @apply text-sm text-gray-600 mb-1;
}

.option-use-case {
  @apply text-xs text-gray-500 italic;
}

.recommended-badge {
  @apply inline-flex items-center px-2 py-0.5 text-xs font-medium text-green-800 bg-green-100 rounded-full ml-2;
}

.current-selection-feedback {
  @apply mt-4 p-3 bg-gray-50 rounded-lg border;
}

.feedback-row {
  @apply flex justify-between items-center py-1;
}

/* Compact Width Selection - New Styles */
.width-selector-compact {
  @apply space-y-4;
}

.width-buttons {
  @apply flex flex-wrap gap-2;
}

.width-button {
  @apply flex-1 min-w-0 px-3 py-2 border border-gray-200 rounded-lg hover:border-blue-300 hover:bg-blue-50 transition-all duration-200 cursor-pointer text-center relative;
}

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

.width-button.recommended::before {
  content: '';
  @apply absolute -top-1 -right-1 w-3 h-3 bg-green-500 rounded-full;
}

.width-button.active.recommended {
  @apply border-green-500 bg-green-50 ring-1 ring-green-200;
}

.width-visual {
  @apply w-full h-1.5 bg-gray-100 rounded-sm mb-2 overflow-hidden;
}

.width-bar {
  @apply h-full bg-blue-500 rounded-sm transition-all duration-300;
}

.width-button.active .width-bar {
  @apply bg-blue-600;
}

.width-button.recommended .width-bar {
  @apply bg-green-500;
}

.width-button.active.recommended .width-bar {
  @apply bg-green-600;
}

.width-label {
  @apply text-sm font-medium text-gray-700;
}

.width-button.active .width-label {
  @apply text-blue-700;
}

.width-button.recommended .width-label {
  @apply text-green-700;
}

.width-preview {
  @apply mt-4 p-3 bg-gray-50 rounded-lg border;
}

.preview-container {
  @apply w-full bg-white rounded border p-2 mb-2;
}

.preview-field {
  @apply transition-all duration-300;
}

.preview-input {
  @apply w-full h-8 border border-gray-100 rounded px-2 bg-blue-600;
}

.preview-info {
  @apply text-sm text-gray-600 text-center;
}

.feedback-label {
  @apply text-sm font-medium text-gray-600;
}

.feedback-value {
  @apply text-sm font-semibold text-gray-800;
}

.current-width-visual {
  @apply mt-3 pt-3 border-t border-gray-200;
}

.visual-grid {
  @apply grid grid-cols-12 gap-1 w-full mb-2;
}

.visual-cell {
  @apply h-2 rounded-sm transition-colors duration-200;
}

.visual-cell.filled {
  @apply bg-blue-500;
}

.visual-cell.empty {
  @apply bg-gray-200;
}

.visual-label {
  @apply text-center text-xs text-gray-600;
}

/* Options Management */
.options-manager {
  @apply border border-gray-200 rounded-lg;
}

.options-header {
  @apply flex justify-between items-center p-3 bg-gray-50 border-b border-gray-200;
}

.add-option-btn {
  @apply inline-flex items-center px-3 py-1 text-sm font-medium text-blue-600 bg-blue-50 rounded-md hover:bg-blue-100 transition-colors;
}

.options-list {
  @apply divide-y divide-gray-200;
}

.option-item {
  @apply flex items-center p-3 hover:bg-gray-50;
}

.option-drag-handle {
  @apply mr-3 cursor-move;
}

.option-content {
  @apply flex-1 grid grid-cols-2 gap-3;
}

.option-field {
  @apply mb-0;
}

.option-input {
  @apply text-sm;
}

.option-remove-btn {
  @apply ml-3 p-1 text-red-400 hover:text-red-600 rounded transition-colors;
}

.empty-options {
  @apply text-center py-8;
}

.empty-add-btn {
  @apply inline-flex items-center px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-md hover:bg-blue-700 transition-colors;
}

/* Validation Styling */
.validation-options {
  @apply space-y-4;
}

.validation-item {
  @apply border border-gray-200 rounded-lg p-4;
}

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

.validation-toggle input[type="checkbox"] {
  @apply sr-only;
}

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

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

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

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

.validation-info {
  @apply flex-1;
}

.validation-title {
  @apply block text-sm font-medium text-gray-900;
}

.validation-desc {
  @apply block text-xs text-gray-500 mt-1;
}

.validation-details {
  @apply mt-4 pt-4 border-t border-gray-200;
}

/* Layout Grid Presets */
.preset-button {
  @apply flex flex-col items-center p-3 border border-gray-200 rounded-lg hover:border-blue-300 hover:bg-blue-50 transition-all duration-200;
}

.preset-button.preset-active {
  @apply border-blue-500 bg-blue-100;
}

.preset-preview {
  @apply w-full h-16 mb-2 bg-gray-100 rounded border border-gray-200 relative;
}

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

/* Preset Preview Layouts */
.sidebar-right-preview {
  background: linear-gradient(90deg, #e5e7eb 0%, #e5e7eb 50%, #d1d5db 50%, #d1d5db 100%);
  background-size: 100% 50%;
  background-position: 0 0, 0 100%;
  background-repeat: no-repeat;
}

.sidebar-left-preview {
  background: linear-gradient(90deg, #d1d5db 0%, #d1d5db 50%, #e5e7eb 50%, #e5e7eb 100%);
  background-size: 100% 50%;
  background-position: 0 0, 0 100%;
  background-repeat: no-repeat;
}

.header-content-preview {
  background: linear-gradient(180deg, #d1d5db 0%, #d1d5db 50%, #e5e7eb 50%, #e5e7eb 100%);
}

.three-column-preview {
  background: linear-gradient(90deg, #e5e7eb 0%, #e5e7eb 33.33%, #d1d5db 33.33%, #d1d5db 66.66%, #f3f4f6 66.66%, #f3f4f6 100%);
}

.two-by-two-preview {
  background: 
    linear-gradient(90deg, #e5e7eb 0%, #e5e7eb 50%, #d1d5db 50%, #d1d5db 100%) 0 0,
    linear-gradient(90deg, #d1d5db 0%, #d1d5db 50%, #e5e7eb 50%, #e5e7eb 100%) 0 100%;
  background-size: 100% 50%;
  background-repeat: no-repeat;
}

.form-layout-preview {
  background: 
    linear-gradient(90deg, #d1d5db 0%, #d1d5db 100%) 0 0,
    linear-gradient(90deg, #e5e7eb 0%, #e5e7eb 50%, #d1d5db 50%, #d1d5db 100%) 0 33.33%,
    linear-gradient(90deg, #f3f4f6 0%, #f3f4f6 100%) 0 66.66%;
  background-size: 100% 33.33%;
  background-repeat: no-repeat;
}

.header-sidebar-preview {
  background: 
    linear-gradient(90deg, #d1d5db 0%, #d1d5db 100%) 0 0,
    linear-gradient(90deg, #e5e7eb 0%, #e5e7eb 50%, #f3f4f6 50%, #f3f4f6 100%) 0 33.33%,
    linear-gradient(90deg, #d1d5db 0%, #d1d5db 50%, #f3f4f6 50%, #f3f4f6 100%) 0 66.66%;
  background-size: 100% 33.33%;
  background-repeat: no-repeat;
}

/* Layout Grid Cell Spanning Controls */
.cell-span-control {
  @apply transition-all duration-200;
}

.cell-span-control:hover {
  @apply transform scale-[1.02];
}

.cell-span-control input[type="number"] {
  @apply text-center;
}

.cell-span-control input[type="number"]:focus {
  @apply border-blue-500 ring-1 ring-blue-500;
}

/* Toggle Switch */
.toggle-switch {
  @apply flex items-center;
}

.toggle-switch input[type="checkbox"] {
  @apply sr-only;
}

.toggle-switch .toggle-slider {
  @apply relative inline-block w-10 h-6 mr-3 bg-gray-200 rounded-full transition-colors duration-200 ease-in-out;
}

.toggle-switch input:checked + .toggle-slider {
  @apply bg-green-600;
}

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

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

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

/* Button Styling */
.cancel-btn {
  @apply px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 transition-colors;
}

.reset-btn {
  @apply inline-flex items-center px-4 py-2 text-sm font-medium text-orange-700 bg-orange-50 border border-orange-200 rounded-md hover:bg-orange-100 transition-colors;
}

.save-btn {
  @apply inline-flex items-center px-4 py-2 text-sm font-medium text-white bg-blue-600 border border-transparent rounded-md hover:bg-blue-700 transition-colors;
}

/* Field Wrapper */
.field-wrapper {
  @apply mb-0;
}

/* Type Changer Styles */
.type-changer-section {
  @apply mb-6 p-4 border-2 border-dashed border-blue-200 rounded-lg bg-blue-50;
}

.type-change-preview {
  @apply mt-4 p-4 bg-white border border-blue-300 rounded-lg;
}

.preview-header {
  @apply flex items-center space-x-2 mb-3 pb-2 border-b border-gray-200;
}

.preview-content {
  @apply space-y-2 mb-4;
}

.preview-item {
  @apply flex items-center justify-between text-sm;
}

.preview-label {
  @apply font-medium text-gray-600;
}

.preview-value {
  @apply text-gray-800 bg-gray-100 px-2 py-1 rounded text-xs;
}

.preview-actions {
  @apply flex items-center space-x-2 pt-3 border-t border-gray-200;
}

/* Mask Examples */
.mask-examples {
  @apply mt-3 p-3 bg-gray-50 rounded-lg;
}

.example-button {
  @apply text-left p-2 text-xs bg-white border border-gray-200 rounded hover:border-blue-300 hover:bg-blue-50 transition-colors;
}

/* Validation Guide Styles */
.validation-rule {
  @apply flex flex-col space-y-1 p-2 bg-white rounded border border-blue-100;
}

.rule-code {
  @apply font-mono text-xs font-semibold text-blue-800 bg-blue-100 px-2 py-1 rounded;
}

.rule-desc {
  @apply text-gray-600;
}

.example-item {
  @apply flex flex-col space-y-1 p-2 bg-white rounded border border-blue-100;
}

.example-code {
  @apply font-mono text-xs font-semibold text-green-800 bg-green-100 px-2 py-1 rounded;
}

.example-desc {
  @apply text-gray-600;
}
</style> 