<template>
  <div class="component-preview form-field" :style="componentStyle" :data-name="component.props.name"
    :data-type="component.type">
    <!-- Hidden Field Special Display -->
    <div v-if="component.type === 'hidden' && isPreview" class="py-2">
      <div class="hidden-field-preview border-2 border-dashed border-gray-300 bg-gray-50 rounded-lg p-3">
        <div class="flex items-center space-x-2">
          <Icon name="heroicons:eye-slash" class="w-4 h-4 text-gray-400" />
          <span class="text-sm font-medium text-gray-600">Hidden Field</span>
        </div>
        <div class="mt-1">
          <div class="text-xs text-gray-500">
            <strong>Name:</strong> {{ component.props.name || 'unnamed' }}
          </div>
          <div class="text-xs text-gray-500">
            <strong>Value:</strong> {{ component.props.value || '(empty)' }}
          </div>
        </div>
        <div v-if="component.props.help" class="mt-1 text-xs text-gray-400">
          {{ component.props.help }}
        </div>
      </div>
    </div>

    <!-- Basic Input Types (including radio and checkbox) -->
    <FormKit v-else-if="isInputType" :id="`preview-${component.id}`" :type="component.type" 
      :name="getFieldName(component)"
      :label="component.props.label" :help="component.props.help" :placeholder="component.props.placeholder"
      :validation="component.props.validation" :validation-visibility="isPreview ? 'live' : 'blur'"
      :readonly="component.props.readonly || !isPreview" 
      :disabled="!isPreview || (component.props.readonly && ['select', 'searchSelect', 'checkbox', 'radio', 'switch'].includes(component.type))" 
      :options="component.props.options || undefined" 
      :value="getFieldValue(component)"
      :accept="component.props.accept || undefined" :max="component.props.max || undefined"
      :mask="component.props.mask || undefined" :digits="component.props.digits || undefined"
      :multiple="component.props.multiple || undefined" :maxSize="component.props.maxSize || undefined"
      :maxFiles="component.props.maxFiles || undefined" :rows="component.type === 'textarea' ? (component.props.rows || 3) : undefined"
      :classes="component.type === 'checkbox' ? {
        wrapper: 'mb-1',
        options: 'space-y-0.5'
      } : {      }" :class="{ 
        'canvas-component': isPreview,
        'readonly-select': component.props.readonly && (component.type === 'select' || component.type === 'searchSelect'),
        'readonly-checkbox': component.props.readonly && component.type === 'checkbox',
        'readonly-radio': component.props.readonly && component.type === 'radio',
        'readonly-switch': component.props.readonly && component.type === 'switch'
      }"
      @input="handleFieldInput(component, $event)"
      @change="handleFieldChange(component, $event)" />

    <!-- Heading -->
    <div v-else-if="component.type === 'heading'" class="py-2">
      <component :is="`h${component.props.level || 2}`" class="font-semibold" :class="{
        'text-2xl': component.props.level === 2,
        'text-xl': component.props.level === 3,
        'text-lg': component.props.level === 4
      }">
        {{ component.props.value || 'Heading Text' }}
      </component>
    </div>

    <!-- Paragraph -->
    <div v-else-if="component.type === 'paragraph'" class="py-2">
      <p class="text-gray-600">{{ component.props.value || 'Paragraph text goes here' }}</p>
    </div>

    <!-- Information Display -->
    <div v-else-if="component.type === 'info-display'" class="py-2">
      <!-- Component Label -->
      <div v-if="component.props.label && component.props.label !== 'Info Display'" class="mb-2">
        <label class="text-sm font-medium text-gray-700">{{ component.props.label }}</label>
      </div>
      
      <!-- Help Text -->
      <div v-if="component.props.help" class="mb-2 text-xs text-gray-600">
        {{ component.props.help }}
      </div>
      
      <div class="info-display-container rounded" :style="{
        backgroundColor: component.props.backgroundColor || '#f9fafb',
        border: component.props.showBorder ? '1px solid #e5e7eb' : 'none'
      }">
        <!-- Title -->
        <div v-if="component.props.title" class="p-3 border-b border-gray-200 bg-white">
          <h4 class="text-base font-medium text-gray-800">{{ component.props.title }}</h4>
        </div>

        <!-- Fields Display -->
        <div class="p-4">
          <!-- Side by Side Layout -->
          <div v-if="component.props.layout === 'side-by-side'" class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div v-for="(field, index) in component.props.fields" :key="index" class="field-item">
              <dt class="text-sm font-medium text-gray-600 mb-2">{{ field.label }}</dt>
              <dd class="text-sm text-gray-900">
                <span v-if="field.type === 'button' && field.url" class="block">
                  <button 
                    @click="handleInfoButtonClick(field.url, field.openInNewTab)"
                    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"
                    :target="field.openInNewTab ? '_blank' : '_self'"
                  >
                    <Icon v-if="field.icon" :name="field.icon" class="w-4 h-4 mr-1" />
                    {{ field.value }}
                  </button>
                </span>
                <span v-else>{{ field.value }}</span>
              </dd>
            </div>
          </div>

          <!-- Grid Layout -->
          <div v-else-if="component.props.layout === 'grid'" class="grid grid-cols-2 gap-4">
            <div v-for="(field, index) in component.props.fields" :key="index" class="field-item">
              <dt class="text-sm font-medium text-gray-600">{{ field.label }}</dt>
              <dd class="text-sm text-gray-900 mt-1">
                <span v-if="field.type === 'button' && field.url" class="block">
                  <button 
                    @click="handleInfoButtonClick(field.url, field.openInNewTab)"
                    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"
                    :target="field.openInNewTab ? '_blank' : '_self'"
                  >
                    <Icon v-if="field.icon" :name="field.icon" class="w-4 h-4 mr-1" />
                    {{ field.value }}
                  </button>
                </span>
                <span v-else>{{ field.value }}</span>
              </dd>
            </div>
          </div>

          <!-- Horizontal Layout -->
          <div v-else-if="component.props.layout === 'horizontal'" class="space-y-2">
            <div v-for="(field, index) in component.props.fields" :key="index"
              class="flex justify-between items-center">
              <dt class="text-sm font-medium text-gray-600">{{ field.label }}:</dt>
              <dd class="text-sm text-gray-900">
                <span v-if="field.type === 'button' && field.url" class="block">
                  <button 
                    @click="handleInfoButtonClick(field.url, field.openInNewTab)"
                    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"
                    :target="field.openInNewTab ? '_blank' : '_self'"
                  >
                    <Icon v-if="field.icon" :name="field.icon" class="w-4 h-4 mr-1" />
                    {{ field.value }}
                  </button>
                </span>
                <span v-else>{{ field.value }}</span>
              </dd>
            </div>
          </div>

          <!-- Vertical Layout (Default) -->
          <div v-else class="space-y-3">
            <div v-for="(field, index) in component.props.fields" :key="index" class="field-item">
              <dt class="text-sm font-medium text-gray-600">{{ field.label }}</dt>
              <dd class="text-sm text-gray-900 mt-1">
                <span v-if="field.type === 'button' && field.url" class="block">
                  <button 
                    @click="handleInfoButtonClick(field.url, field.openInNewTab)"
                    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"
                    :target="field.openInNewTab ? '_blank' : '_self'"
                  >
                    <Icon v-if="field.icon" :name="field.icon" class="w-4 h-4 mr-1" />
                    {{ field.value }}
                  </button>
                </span>
                <span v-else>{{ field.value }}</span>
              </dd>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Divider -->
    <div v-else-if="component.type === 'divider'" class="py-4">
      <hr class="border-gray-200" />
    </div>

    <!-- Image Preview Component -->
    <div v-else-if="component.type === 'image-preview'" class="py-2">
      <div class="image-preview-container"
        :class="{ 'has-caption': component.props.showCaption && component.props.caption }">
        <label v-if="component.props.label" class="block text-sm font-medium text-gray-700 mb-1">
          {{ component.props.label }}
        </label>

        <div class="image-container relative" :class="{ 'cursor-zoom-in': component.props.showZoom }"
          @click="handleImageClick">
          <img :src="component.props.imageUrl" :alt="component.props.altText || 'Image preview'"
            class="max-w-full rounded" :style="{
              maxWidth: component.props.maxWidth || '100%',
              height: component.props.height || 'auto',
            }" />
          <div v-if="component.props.showZoom"
            class="absolute bottom-2 right-2 bg-black bg-opacity-60 text-white p-1 rounded">
            <Icon name="material-symbols:zoom-in" class="w-4 h-4" />
          </div>
        </div>

        <div v-if="component.props.showCaption && component.props.caption"
          class="mt-1 text-sm text-gray-500 text-center">
          {{ component.props.caption }}
        </div>

        <div v-if="component.props.help" class="mt-1 text-xs text-gray-500">
          {{ component.props.help }}
        </div>
      </div>
    </div>

    <!-- Repeating Group Component -->
    <div v-else-if="component.type === 'repeating-group'">
      <fieldset class="border rounded-md p-4">
        <legend class="text-sm font-medium px-2">{{ component.props.label || 'Group' }}</legend>

        <div v-if="component.props.help" class="mb-3 text-xs text-gray-500">
          {{ component.props.help }}
        </div>

        <!-- Builder mode - show draggable container -->
        <div v-if="!isPreview" class="repeating-groups space-y-4">
          <!-- Container for draggable fields -->
          <div 
            class="repeating-group-container border-2 border-dashed border-gray-300 rounded-md p-4 min-h-[100px] bg-gray-50"
            :class="{
              'border-blue-400 bg-blue-50': sectionDropStates[component.id]?.isDraggingOver
            }"
            @dragover.prevent="handleSectionDragOver($event, component.id)"
            @dragleave="handleSectionDragLeave($event, component.id)"
            @drop="handleSectionDrop($event, component.id)"
            @dragenter.prevent="handleSectionDragEnter($event, component.id)"
          >
            <div v-if="component.props.children && component.props.children.length > 0" class="nested-components">
              <draggable
                v-model="component.props.children"
                group="form-components"
                item-key="id"
                handle=".drag-handle"
                ghost-class="ghost"
                animation="300"
                class="grid grid-cols-12 gap-2"
                @end="onNestedDragEnd"
                @add="onNestedComponentAdd"
              >
                <template #item="{ element: childElement, index: childIndex }">
                  <div 
                    class="form-component relative border rounded-md overflow-hidden transition-all duration-200 bg-white"
                    :class="'border-gray-200 hover:border-blue-300 hover:shadow-md'"
                    :style="{
                      gridColumn: childElement.props.gridColumn || 'span 6'
                    }"
                  >
                    <!-- Component actions -->
                    <div class="component-actions absolute right-1 top-1 flex space-x-1 z-10">
                      <button 
                        class="p-1 text-gray-400 hover:text-blue-600 rounded"
                        title="Component settings"
                        @click.stop="openNestedComponentSettings(childElement)"
                      >
                        <Icon name="heroicons:cog-6-tooth" class="w-3 h-3" />
                      </button>
                      <button 
                        class="p-1 text-gray-400 hover:text-gray-600 rounded"
                        title="Drag to reorder"
                      >
                        <span class="drag-handle cursor-move">
                          <Icon name="material-symbols:drag-indicator" class="w-3 h-3" />
                        </span>
                      </button>
                      <button 
                        class="p-1 text-gray-400 hover:text-red-500 rounded"
                        title="Remove from group"
                        @click.stop="removeFromSection(component.id, childIndex)"
                      >
                        <Icon name="material-symbols:close" class="w-3 h-3" />
                      </button>
                    </div>
                    
                    <div class="p-2">
                      <component-preview :component="childElement" :is-preview="false" />
                    </div>
                  </div>
                </template>
              </draggable>
            </div>
            
            <!-- Empty state -->
            <div v-else class="text-center py-8">
              <Icon name="material-symbols:add-circle-outline" class="w-8 h-8 text-gray-400 mx-auto mb-2" />
              <p class="text-sm text-gray-500">Drag fields here to add them to this repeating group</p>
            </div>
          </div>

          <!-- Add Item button for preview -->
          <button type="button"
            class="inline-flex items-center px-3 py-1.5 border border-blue-600 text-blue-600 bg-white hover:bg-blue-50 rounded text-sm">
            <Icon name="material-symbols:add-circle-outline" class="w-4 h-4 mr-1" />
            {{ component.props.buttonText || 'Add Item' }}
          </button>
        </div>

        <!-- Preview mode - show functional repeating groups -->
        <div v-else class="repeating-groups space-y-4">
          
          
          <!-- Group items -->
          <div v-for="(group, groupIndex) in (safeGetField(component.props.name, previewFormData, { warn: false }) || [])" 
               :key="`${component.props.name}-${groupIndex}`"
               class="group-item border border-gray-200 rounded-md p-3 bg-gray-50 mb-4">
            
            <!-- Item header -->
            <div class="flex justify-between items-center mb-3">
              <h4 class="text-sm font-medium text-gray-700">Item {{ groupIndex + 1 }}</h4>
              <button v-if="(safeGetField(component.props.name, previewFormData, { warn: false }) || []).length > (component.props.minItems || 1)"
                      type="button" 
                      class="text-red-500 hover:text-red-700 text-sm"
                      @click="removeRepeatingGroupItem(component.props.name, groupIndex)">
                {{ component.props.removeText || 'Buang' }}
              </button>
            </div>
            
            <!-- Fields grid -->
            <div class="grid grid-cols-12 gap-2">
              <div v-for="(child, childIndex) in component.props.children" 
                   :key="`field-${groupIndex}-${childIndex}`"
                   class="form-component"
                   :style="{ gridColumn: child.props.gridColumn || 'span 6' }">
                
                <!-- Render FormKit field -->
                <FormKit 
                  :type="child.type"
                  :name="`${component.props.name}[${groupIndex}].${child.props.name}`"
                  :label="child.props.label"
                  :placeholder="child.props.placeholder"
                  :help="child.props.help"
                  :options="child.props.options"
                  :validation="child.props.validation"
                  :rows="child.type === 'textarea' ? (child.props.rows || 3) : undefined"
                  :model-value="getRepeatingGroupFieldValue(group, child.props.name, child.type)"
                  @update:model-value="updateRepeatingGroupField(component.props.name, groupIndex, child.props.name, $event)"
                />
              </div>
            </div>
          </div>
          
          <!-- Empty state -->
          <div v-if="(safeGetField(component.props.name, previewFormData, { warn: false }) || []).length === 0" 
               class="text-center py-8 text-gray-500">
            <p>No items yet. Click "{{ component.props.buttonText || 'Add Item' }}" to add the first item.</p>
          </div>
          
          <!-- Add button -->
          <button v-if="(safeGetField(component.props.name, previewFormData, { warn: false }) || []).length < (component.props.maxItems || 10)"
                  type="button"
                  class="inline-flex items-center px-3 py-1.5 border border-blue-600 text-blue-600 bg-white hover:bg-blue-50 rounded text-sm"
                  @click="addRepeatingGroupItem(component.props.name, component.props.children)">
            <Icon name="material-symbols:add-circle-outline" class="w-4 h-4 mr-1" />
            {{ component.props.buttonText || 'Add Item' }}
          </button>
        </div>
      </fieldset>
    </div>

    <!-- Dynamic List Component -->
    <div v-else-if="component.type === 'dynamic-list'" class="py-2">
      <div class="dynamic-list-container">
        <label v-if="component.props.label" class="block text-sm font-medium text-gray-700 mb-1">
          {{ component.props.label }}
          <span v-if="component.props.showItemCounter" class="text-xs text-gray-500 ml-2">
            ({{ (safeGetField(component.props.name, previewFormData, { warn: false }) || []).length }}/{{ component.props.maxItems || 20 }})
          </span>
        </label>

        <div v-if="component.props.help" class="mb-3 text-xs text-gray-500">
          {{ component.props.help }}
        </div>

        <!-- Search Box (if enabled) -->
        <div v-if="component.props.enableSearch" class="mb-3">
          <div class="relative">
            <input type="text" v-model="searchQuery[component.props.name]" placeholder="Search items..."
              class="w-full px-3 py-2 pl-9 border border-gray-300 rounded-md text-sm" />
            <Icon name="material-symbols:search"
              class="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400" />
          </div>
        </div>

        <!-- Bulk Operations Toolbar (if enabled) -->
        <div v-if="component.props.bulkOperations && (safeGetField(component.props.name, previewFormData, { warn: false }) || []).length > 0"
          class="mb-3 flex items-center justify-between bg-gray-50 p-2 rounded">
          <div class="flex items-center space-x-2">
            <input type="checkbox" :checked="isAllSelected(component.props.name)"
              @change="toggleSelectAll(component.props.name)" class="h-4 w-4 rounded border-gray-300" />
            <span class="text-xs text-gray-600">
              {{ selectedItems[component.props.name]?.length || 0 }} selected
            </span>
          </div>
          <div class="flex space-x-2">
            <button v-if="(selectedItems[component.props.name]?.length || 0) > 0"
              @click="deleteSelectedItems(component.props.name)"
              class="text-xs text-red-600 hover:text-red-800 flex items-center">
              <Icon name="material-symbols:delete-outline" class="w-4 h-4 mr-1" />
              Delete Selected
            </button>
            <button v-if="component.props.importEnabled" @click="showImportModal(component.props.name)"
              class="text-xs text-blue-600 hover:text-blue-800 flex items-center">
              <Icon name="material-symbols:upload-file-outline" class="w-4 h-4 mr-1" />
              Import
            </button>
          </div>
        </div>

        <div class="space-y-2">
          <div v-if="!isPreview" class="list-items space-y-2">
            <div v-for="(item, index) in component.props.defaultItems" :key="index" class="flex items-center">
              <input :type="component.props.itemType || 'text'" :value="item" :placeholder="component.props.placeholder"
                disabled
                class="block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 text-gray-700 disabled:bg-gray-50" />
              <div v-if="component.props.enableSorting" class="ml-2 cursor-move text-gray-400">
                <Icon name="material-symbols:drag-indicator" class="w-5 h-5" />
              </div>
              <button type="button" class="ml-2 text-red-500 hover:text-red-700">
                <Icon name="material-symbols:delete-outline" class="w-5 h-5" />
              </button>
            </div>

            <!-- Add button for edit mode -->
            <button type="button"
              class="inline-flex items-center px-3 py-1.5 border border-blue-600 text-blue-600 bg-white hover:bg-blue-50 rounded text-sm">
              <Icon name="material-symbols:add-circle-outline" class="w-4 h-4 mr-1" />
              {{ component.props.buttonText || 'Add Item' }}
            </button>
          </div>

          <div v-else class="list-items space-y-2">
            <div v-for="(item, index) in getFilteredItems(component.props.name)" :key="index"
              class="flex items-center group">
              <input v-if="component.props.bulkOperations" type="checkbox"
                :checked="isItemSelected(component.props.name, index)"
                @change="toggleItemSelection(component.props.name, index)"
                class="mr-2 h-4 w-4 rounded border-gray-300" />
              <input :type="component.props.itemType || 'text'" 
                :value="safeGetField(component.props.name, previewFormData, { warn: false })[index]"
                :placeholder="component.props.placeholder"
                :class="getItemInputClasses(component.props.name, index, item)"
                @blur="validateItem(component.props.name, index, item)"
                @input="updateListItem(component.props.name, index, $event.target.value)" />
              <div v-if="component.props.enableSorting"
                class="ml-2 cursor-move text-gray-400 opacity-0 group-hover:opacity-100 transition-opacity">
                <Icon name="material-symbols:drag-indicator" class="w-5 h-5" />
              </div>
              <button v-if="(safeGetField(component.props.name, previewFormData, { warn: false })?.length || 0) > (component.props.minItems || 0)"
                type="button" class="ml-2 text-red-500 hover:text-red-700" @click="removeListItem(index)">
                <Icon name="material-symbols:delete-outline" class="w-5 h-5" />
              </button>
            </div>

            <!-- Validation Messages -->
            <div v-if="validationErrors[component.props.name]" class="text-xs text-red-600 mt-1">
              {{ validationErrors[component.props.name] }}
            </div>

            <button v-if="(safeGetField(component.props.name, previewFormData, { warn: false })?.length || 0) < (component.props.maxItems || 20)"
              type="button"
              class="inline-flex items-center px-3 py-1.5 border border-blue-600 text-blue-600 bg-white hover:bg-blue-50 rounded text-sm"
              @click="addListItem">
              <Icon name="material-symbols:add-circle-outline" class="w-4 h-4 mr-1" />
              {{ component.props.buttonText || 'Add Item' }}
            </button>

            <!-- Export Button (if enabled) -->
            <div v-if="component.props.exportFormat && (safeGetField(component.props.name, previewFormData, { warn: false }) || []).length > 0"
              class="mt-2">
              <button @click="exportItems(component.props.name, component.props.exportFormat)"
                class="text-xs text-green-600 hover:text-green-800 flex items-center">
                <Icon name="material-symbols:download" class="w-4 h-4 mr-1" />
                Export as {{ component.props.exportFormat.toUpperCase() }}
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>

        <!-- Repeating Table Component -->
    <div v-else-if="component.type === 'repeating-table'" class="repeating-table-wrapper">
      <div class="table-container-wrapper">
        <RepeatingTable
          :config="component.props"
          :model-value="getTableData(component.props.name)"
          :is-preview="isPreview"
          @update:model-value="updateTableData"
          @debug-data="(data) => console.log('[ComponentPreview] Table debug data:', data)"
          @mounted="() => console.log('[ComponentPreview] RepeatingTable mounted with data:', getTableData(component.props.name))"
        />
      </div>
    </div>

    <!-- Button Component -->
    <div v-else-if="component.type === 'button'" class="py-2">
      <label v-if="component.props.label && component.props.showLabel !== false" class="block text-sm font-medium text-gray-700 mb-2">
        {{ component.props.label }}
      </label>

      <!-- Custom Button with Custom Colors -->
      <div v-if="component.props.variant === 'custom'" class="inline-block">
        <!-- Link Button with Custom Colors -->
        <a v-if="component.props.linkType && component.props.linkType !== 'none' && getButtonLink()" 
           :href="getButtonLink()" 
           :target="component.props.linkTarget || '_self'"
           class="inline-block">
          <button 
            :type="component.props.buttonType || 'button'"
            :disabled="component.props.disabled || false"
            :class="getButtonSizeClass(component.props.size)"
            :style="getCustomButtonStyles(component.props)"
            :data-hover-effect="component.props.customHoverEffect || 'none'"
            class="button-component custom-button"
            @click="handleButtonClick"
          >
            <span v-if="component.props.showButtonText !== false">{{ component.props.buttonText || component.props.label || 'Button' }}</span>
            <Icon v-if="component.props.icon" :name="component.props.icon" class="w-4 h-4" :class="{'ml-2': component.props.showButtonText !== false}" />
          </button>
        </a>

        <!-- Regular Button with Custom Colors (no link) -->
        <button 
          v-else
          :type="component.props.buttonType || 'button'"
          :disabled="component.props.disabled || false"
          :class="getButtonSizeClass(component.props.size)"
          :style="getCustomButtonStyles(component.props)"
          :data-hover-effect="component.props.customHoverEffect || 'none'"
          class="button-component custom-button"
          @click="handleButtonClick"
        >
          <span v-if="component.props.showButtonText !== false">{{ component.props.buttonText || component.props.label || 'Button' }}</span>
          <Icon v-if="component.props.icon" :name="component.props.icon" class="w-4 h-4" :class="{'ml-2': component.props.showButtonText !== false}" />
        </button>
      </div>

      <!-- Standard Button (non-custom colors) -->
      <div v-else class="inline-block">
        <!-- Link Button -->
        <a v-if="component.props.linkType && component.props.linkType !== 'none' && getButtonLink()" 
           :href="getButtonLink()" 
           :target="component.props.linkTarget || '_self'"
           class="inline-block">
          <RsButton :type="component.props.buttonType || 'button'" :variant="component.props.variant || 'primary'"
            :size="component.props.size || 'md'" :disabled="component.props.disabled || false"
            class="button-component">
            <span v-if="component.props.showButtonText !== false">{{ component.props.buttonText || component.props.label || 'Button' }}</span>
            <Icon v-if="component.props.icon" :name="component.props.icon" class="w-4 h-4" :class="{'ml-2': component.props.showButtonText !== false}" />
          </RsButton>
        </a>

        <!-- Regular Button (no link) -->
        <RsButton v-else :type="component.props.buttonType || 'button'" :variant="component.props.variant || 'primary'"
          :size="component.props.size || 'md'" :disabled="component.props.disabled || false" @click="handleButtonClick"
          class="button-component">
          <span v-if="component.props.showButtonText !== false">{{ component.props.buttonText || component.props.label || 'Button' }}</span>
          <Icon v-if="component.props.icon" :name="component.props.icon" class="w-4 h-4" :class="{'ml-2': component.props.showButtonText !== false}" />
        </RsButton>
      </div>

      <div v-if="component.props.help" class="mt-1 text-xs text-gray-500">
        {{ component.props.help }}
      </div>
    </div>

    <!-- Form Section Component -->
    <div v-else-if="component.type === 'form-section'" class="py-2">
      <div 
        class="form-section-container"
        :class="{
          'has-border': component.props.showBorder,
          'border-dashed': component.props.borderStyle === 'dashed',
          'border-dotted': component.props.borderStyle === 'dotted',
          'spacing-compact': component.props.spacing === 'compact',
          'spacing-relaxed': component.props.spacing === 'relaxed'
        }"
        :style="{
          backgroundColor: component.props.backgroundColor || '#ffffff',
          borderColor: component.props.showBorder ? '#e5e7eb' : 'transparent'
        }"
      >
        <!-- Section Header -->
        <div 
          v-if="component.props.showHeader"
          class="section-header"
          :class="{
            'header-small': component.props.headerSize === 'small',
            'header-large': component.props.headerSize === 'large',
            'collapsible': component.props.collapsible
          }"
          :style="{ backgroundColor: component.props.headerBackground || '#f9fafb' }"
          @click="component.props.collapsible && toggleSectionCollapse(component.id)"
        >
          <div class="flex items-center justify-between">
            <div class="flex-1">
              <h3 class="section-title">
                {{ component.props.label || 'Section Title' }}
              </h3>
              <p v-if="component.props.description" class="section-description">
                {{ component.props.description }}
              </p>
            </div>
            <div v-if="component.props.collapsible" class="collapse-icon">
              <Icon 
                :name="component.props.collapsed ? 'material-symbols:expand-more' : 'material-symbols:expand-less'" 
                class="w-5 h-5 text-gray-500"
              />
            </div>
          </div>
        </div>

        <!-- Section Content -->
        <div 
          v-if="!component.props.collapsed"
          class="section-content"
          :class="{
            'no-header': !component.props.showHeader
          }"
        >
          <!-- In preview mode, show only the nested components (no placeholder) -->
          <div v-if="isPreview" class="section-fields">
            <!-- Render nested components if they exist -->
            <div v-if="component.props.children && component.props.children.length > 0" class="grid grid-cols-12 gap-2">
              <template v-for="(childComponent, childIndex) in component.props.children" :key="childIndex">
                <div 
                  class="form-component"
                  :style="{
                    gridColumn: childComponent.props.gridColumn || 'span 6'
                  }"
                >
                  <component-preview :component="childComponent" :is-preview="true" />
                </div>
              </template>
            </div>
            <!-- Show subtle indication for empty sections in preview mode (optional) -->
            <div v-else-if="component.props.showEmptyMessage !== false" class="empty-section-preview">
              <p class="text-sm text-gray-400 text-center py-4">
                {{ component.props.emptyMessage || 'This section is empty' }}
              </p>
            </div>
          </div>
          
          <!-- In form builder mode, show drop zone -->
          <div v-else class="section-drop-zone">
            <!-- Nested components rendered in grid -->
            <div v-if="component.props.children && component.props.children.length > 0" class="nested-components">
              <draggable
                v-model="component.props.children"
                group="form-components"
                item-key="id"
                handle=".drag-handle"
                ghost-class="ghost"
                animation="300"
                class="grid grid-cols-12 gap-2"
                @end="onNestedDragEnd"
                @add="onNestedComponentAdd"
              >
                <template #item="{ element: childElement, index: childIndex }">
                  <div 
                    class="form-component relative border rounded-md overflow-hidden transition-all duration-200 bg-white"
                    :class="'border-gray-200 hover:border-blue-300 hover:shadow-md'"
                    :style="{
                      gridColumn: childElement.props.gridColumn || 'span 6'
                    }"
                  >
                    <!-- Component actions -->
                    <div class="component-actions absolute right-1 top-1 flex space-x-1 z-10">
                      <button 
                        class="p-1 text-gray-400 hover:text-blue-600 rounded"
                        title="Component settings"
                        @click.stop="openNestedComponentSettings(childElement)"
                      >
                        <Icon name="heroicons:cog-6-tooth" class="w-3 h-3" />
                      </button>
                      <button 
                        class="p-1 text-gray-400 hover:text-gray-600 rounded"
                        title="Drag to reorder"
                      >
                        <span class="drag-handle cursor-move">
                          <Icon name="material-symbols:drag-indicator" class="w-3 h-3" />
                        </span>
                      </button>
                      <button 
                        class="p-1 text-gray-400 hover:text-red-500 rounded"
                        title="Remove from section"
                        @click.stop="removeFromSection(component.id, childIndex)"
                      >
                        <Icon name="material-symbols:close" class="w-3 h-3" />
                      </button>
                    </div>
                    
                    <div class="p-2">
                      <component-preview :component="childElement" :is-preview="false" />
                    </div>
                  </div>
                </template>
              </draggable>
            </div>
            
            <!-- Drop zone placeholder -->
            <div 
              class="section-drop-placeholder"
              :class="{
                'drop-active': sectionDropStates[component.id]?.isDraggingOver,
                'empty': !component.props.children || component.props.children.length === 0,
                'hidden-placeholder': component.props.showPlaceholder === false
              }"
              @dragover.prevent="handleSectionDragOver($event, component.id)"
              @dragleave="handleSectionDragLeave($event, component.id)"
              @drop="handleSectionDrop($event, component.id)"
              @dragenter.prevent="handleSectionDragEnter($event, component.id)"
            >
              <div v-if="component.props.showPlaceholder !== false" class="placeholder-content">
                <Icon name="material-symbols:add-box-outline" class="w-8 h-8 text-gray-300 mx-auto mb-2" />
                <p class="text-sm text-gray-500 text-center mb-1">Drop Components Here</p>
                <p class="text-xs text-gray-400 text-center">
                  Drag form fields from the sidebar to add them to this section
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Custom HTML Component -->
    <div v-else-if="component.type === 'customHtml'" class="py-2">
      <div class="custom-html-wrapper">
        <!-- Component Label -->
        <div v-if="component.props.label && component.props.label !== 'Custom HTML Component'" class="mb-2">
          <label class="text-sm font-medium text-gray-700">{{ component.props.label }}</label>
        </div>
        
        <!-- Help Text -->
        <div v-if="component.props.help" class="mb-2 text-xs text-gray-600">
          {{ component.props.help }}
        </div>
        
        <!-- Custom HTML Content Container -->
        <div 
          :id="`custom-html-${component.id}`"
          class="custom-html-content"
          :class="{
            'readonly-mode': component.props.readonly || !isPreview,
            'safe-mode': component.props.previewMode === 'safe',
            'advanced-mode': component.props.previewMode === 'advanced'
          }"
        >
          <!-- Inject scoped CSS -->
          <div v-if="getScopedCss(component)" v-html="getScopedCss(component)"></div>
          
          <!-- Render HTML content -->
          <div v-html="getSafeHtmlContent(component)"></div>
        </div>
      </div>
    </div>

    <!-- Unknown Component Type Fallback -->
    <div v-else class="p-4 border border-dashed border-gray-300 rounded">
      <div class="text-gray-500">Unknown component type: {{ component.type }}</div>
    </div>
  </div>

  <!-- Nested Component Settings Modal -->
  <FormBuilderFieldSettingsModal
    v-model="showNestedSettingsModal"
    :component="selectedNestedComponent"
    @close="closeNestedSettingsModal"
    @update-component="saveNestedComponentSettings"
  />
</template>

<script setup>
import { useNuxtApp } from '#app';
import { useFormBuilderStore } from '~/stores/formBuilder';
import FormBuilderFieldSettingsModal from '~/components/FormBuilderFieldSettingsModal.vue';
import { safeGetField } from '~/composables/safeGetField';
import { onMounted, onUnmounted, watch, computed, nextTick, triggerRef, defineComponent, h } from 'vue';
import draggable from 'vuedraggable';

// RepeatingGroupContainer component removed - using template approach instead

const props = defineProps({
  component: {
    type: Object,
    required: true
  },
  isPreview: {
    type: Boolean,
    default: false
  },
  fieldStates: {
    type: Object,
    default: () => ({})
  }
});

const emit = defineEmits(['select-nested-component', 'form-data-updated']);

// Get access to the form builder store
const formStore = useFormBuilderStore();
const previewFormData = computed(() => formStore.previewFormData || {});

// Clean up: Debug watcher removed - repeating groups working correctly

// Enhanced dynamic list functionality
const searchQuery = ref({});
const selectedItems = ref({});
const validationErrors = ref({});

// Force reactivity for repeating groups
const groupUpdateCounter = ref(0);

// Simplified reactive variables
const isInRepeatingGroup = ref(false);
const repeatingGroupContext = ref(null);

// New reactive state for form sections
const sectionDropStates = ref({});

// State for nested component settings modal
const showNestedSettingsModal = ref(false);
const selectedNestedComponent = ref(null);

// Track selected component ID for highlighting
const selectedComponentId = ref(null);

// Track timers and DOM elements for cleanup
let lightbox = null;
let importInput = null;
let timers = [];

onUnmounted(() => {
  // Clean up any lightbox DOM element
  if (lightbox && document.body.contains(lightbox)) {
    document.body.removeChild(lightbox);
    lightbox = null;
  }
  // Clean up import input
  if (importInput && document.body.contains(importInput)) {
    document.body.removeChild(importInput);
    importInput = null;
  }
  // Clear all timers
  timers.forEach(t => clearTimeout(t));
  timers = [];
});

// Initialize data for components
onMounted(() => {
  // Initialize search and selection data for dynamic lists
  if (props.component.type === 'dynamic-list') {
    const listName = props.component.props.name;
    if (listName) {
      searchQuery.value[listName] = '';
      selectedItems.value[listName] = [];
      validationErrors.value[listName] = '';
      
      // Initialize form data with default items if they exist and form data is empty
      const currentFormData = safeGetField(listName, formStore.previewFormData, { warn: false });
      const defaultItems = props.component.props.defaultItems;
      
      if ((!currentFormData || currentFormData.length === 0) && defaultItems && defaultItems.length > 0) {
        nextTick(() => {
          const updatedData = { ...formStore.previewFormData, [listName]: [...defaultItems] };
          formStore.updatePreviewFormData(updatedData);
        });
      }
    }
  }
  
  // Initialize repeating groups
  if (props.component.type === 'repeating-group') {
    const groupName = props.component.props.name;
    if (groupName) {
      // Get current groups or initialize empty array
      const currentGroups = safeGetField(groupName, formStore.previewFormData, { warn: false });
      
      // If no groups exist and minItems is specified, create initial groups
      if ((!currentGroups || currentGroups.length === 0) && props.component.props.minItems > 0) {
        const initialGroups = [];
        const minItems = props.component.props.minItems || 1;
        
        for (let i = 0; i < minItems; i++) {
          const newGroup = {};
          
          // Add fields from configuration
          if (props.component.props.fields) {
            props.component.props.fields.forEach(field => {
              newGroup[field.name] = '';
            });
          }
          
          initialGroups.push(newGroup);
        }
        
        nextTick(() => {
          const updatedData = { ...formStore.previewFormData, [groupName]: initialGroups };
          formStore.updatePreviewFormData(updatedData);
        });
      }
    }
  }
  
  // Initialize repeating tables
  if (props.component.type === 'repeating-table') {
    const tableName = props.component.props.name;
    if (tableName) {
      // Get current table data or initialize empty array
      const currentData = safeGetField(tableName, formStore.previewFormData, { warn: false });
      
      // If no data exists, initialize it
      if (!currentData || !Array.isArray(currentData)) {
        const initialData = Array.isArray(props.component.props.defaultData) ? [...props.component.props.defaultData] : [];
        
        nextTick(() => {
          const updatedData = { ...formStore.previewFormData, [tableName]: initialData };
          formStore.updatePreviewFormData(updatedData);
          console.log('[ComponentPreview] Initialized repeating table data:', tableName, initialData);
        });
      }
    }
  }
});

// Watch for changes to component props, especially defaultItems
watch(() => props.component.props.defaultItems, (newDefaultItems, oldDefaultItems) => {
  if (props.component.type === 'dynamic-list') {
    const listName = props.component.props.name;
    if (!listName) return;
    
    // Check if defaultItems actually changed to prevent unnecessary updates
    const newItemsStr = JSON.stringify(newDefaultItems);
    const oldItemsStr = JSON.stringify(oldDefaultItems);
    
    if (newItemsStr === oldItemsStr) return;
    
    // Always update when defaultItems change, regardless of current form data
    const items = newDefaultItems || [];
    
    nextTick(() => {
      const updatedData = { ...formStore.previewFormData, [listName]: [...items] };
      formStore.updatePreviewFormData(updatedData);
    });
  }
}, { deep: true, immediate: true });

// Watch for changes to repeating group props
watch(() => props.component.props.minItems, (newMinItems, oldMinItems) => {
  if (props.component.type === 'repeating-group') {
    const groupName = props.component.props.name;
    if (!groupName || newMinItems === oldMinItems) return;
    
    const currentGroups = safeGetField(groupName, formStore.previewFormData, { warn: false });
    const minItems = newMinItems || 1;
    
    // If current groups are fewer than minItems, add missing groups
    if ((!currentGroups || currentGroups.length < minItems) && minItems > 0) {
      const groupsToAdd = minItems - (currentGroups?.length || 0);
      const updatedGroups = [...(currentGroups || [])];
      
      for (let i = 0; i < groupsToAdd; i++) {
        const newGroup = {};
        
        // Add fields from configuration
        if (props.component.props.fields) {
          props.component.props.fields.forEach(field => {
            newGroup[field.name] = '';
          });
        }
        
        updatedGroups.push(newGroup);
      }
      
      nextTick(() => {
        const updatedData = { ...formStore.previewFormData, [groupName]: updatedGroups };
        formStore.updatePreviewFormData(updatedData);
      });
    }
  }
}, { deep: true, immediate: true });

// Legacy updateGroupField removed - now handled by RepeatingGroupContainer

const updateListItem = (listName, index, newValue) => {
  if (!props.isPreview) return;

  const currentItems = [...(safeGetField(listName, formStore.previewFormData, { warn: false }) || [])];
  if (currentItems[index] === newValue) return; // No change

  // Validate and handle duplicates
  if (!checkDuplicates(listName, newValue, index)) return;
  if (!validateItem(listName, index, newValue)) return;

  currentItems[index] = newValue;

  nextTick(() => {
    const updatedData = { ...formStore.previewFormData, [listName]: currentItems };
    formStore.updatePreviewFormData(updatedData);
  });
};

// Legacy functions removed - now handled by RepeatingGroupContainer

const addListItem = () => {
  if (!props.isPreview) return;

  const listName = props.component.props.name;
  if (!listName) return;

  // Get current items or initialize empty array
  const currentItems = [...(safeGetField(listName, formStore.previewFormData, { warn: false }) || [])];

  // Add an empty item
  currentItems.push('');

  // Update the form data
  const updatedData = { ...formStore.previewFormData, [listName]: currentItems };
  formStore.updatePreviewFormData(updatedData);
};

const removeListItem = (index) => {
  if (!props.isPreview) return;

  const listName = props.component.props.name;
  if (!listName) return;

  // Get current items
  const currentItems = [...(safeGetField(listName, formStore.previewFormData, { warn: false }) || [])];

  // Remove the item at the specified index
  currentItems.splice(index, 1);

  // Update the form data
  const updatedData = { ...formStore.previewFormData, [listName]: currentItems };
  formStore.updatePreviewFormData(updatedData);
};

// Enhanced Dynamic List Methods

// Validate individual item based on component settings
const validateItem = (listName, index, value) => {
  const component = props.component;
  if (!component.props.itemValidation) return true;

  // Simple validation for now - can be enhanced with more complex rules
  const rules = component.props.itemValidation.split('|');

  for (const rule of rules) {
    if (rule === 'required' && (!value || value.trim() === '')) {
      validationErrors.value[listName] = `Item ${index + 1} is required`;
      return false;
    }

    if (rule.startsWith('min:')) {
      const minLength = parseInt(rule.split(':')[1]);
      if (value.length < minLength) {
        validationErrors.value[listName] = `Item ${index + 1} must be at least ${minLength} characters`;
        return false;
      }
    }

    if (rule.startsWith('max:')) {
      const maxLength = parseInt(rule.split(':')[1]);
      if (value.length > maxLength) {
        validationErrors.value[listName] = `Item ${index + 1} cannot exceed ${maxLength} characters`;
        return false;
      }
    }

    if (rule === 'email' && component.props.itemType === 'email') {
      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
      if (!emailRegex.test(value)) {
        validationErrors.value[listName] = `Item ${index + 1} must be a valid email address`;
        return false;
      }
    }

    if (rule === 'url' && component.props.itemType === 'url') {
      try {
        new URL(value);
      } catch {
        validationErrors.value[listName] = `Item ${index + 1} must be a valid URL`;
        return false;
      }
    }
  }

  // Clear validation error if validation passes
  validationErrors.value[listName] = '';
  return true;
};

// Check for duplicate items
const checkDuplicates = (listName, newValue, currentIndex) => {
  if (props.component.props.allowDuplicates) return true;

  const currentItems = safeGetField(listName, formStore.previewFormData, { warn: false }) || [];
  const duplicateIndex = currentItems.findIndex((item, index) =>
    index !== currentIndex && item.toLowerCase() === newValue.toLowerCase()
  );

  if (duplicateIndex !== -1) {
    validationErrors.value[listName] = `Duplicate item detected. Item "${newValue}" already exists.`;
    return false;
  }

  validationErrors.value[listName] = '';
  return true;
};

// Handle item input with validation
const handleItemInput = (listName, index, value) => {
  // Check for duplicates if not allowed
  if (!checkDuplicates(listName, value, index)) {
    return;
  }

  // Validate the item
  validateItem(listName, index, value);
};

// Get CSS classes for item input based on validation state
const getItemInputClasses = (listName, index, value) => {
  const baseClasses = "block w-full border rounded-md shadow-sm py-2 px-3 text-gray-700";
  const hasError = validationErrors.value[listName];

  if (hasError) {
    return `${baseClasses} border-red-300 focus:border-red-500`;
  }

  return `${baseClasses} border-gray-300 focus:border-blue-500 focus:ring-blue-500`;
};

// Filter items based on search query
const getFilteredItems = (listName) => {
  const items = safeGetField(listName, formStore.previewFormData, { warn: false }) || [];
  const query = searchQuery.value[listName];

  if (!query || !props.component.props.enableSearch) {
    return items;
  }

  return items.filter(item =>
    item.toLowerCase().includes(query.toLowerCase())
  );
};

// Bulk operations
const isItemSelected = (listName, index) => {
  return selectedItems.value[listName]?.includes(index) || false;
};

const toggleItemSelection = (listName, index) => {
  if (!selectedItems.value[listName]) {
    selectedItems.value[listName] = [];
  }

  const selectedList = selectedItems.value[listName];
  const selectedIndex = selectedList.indexOf(index);

  if (selectedIndex > -1) {
    selectedList.splice(selectedIndex, 1);
  } else {
    selectedList.push(index);
  }
};

const isAllSelected = (listName) => {
  const items = safeGetField(listName, formStore.previewFormData, { warn: false }) || [];
  const selected = selectedItems.value[listName] || [];
  return items.length > 0 && selected.length === items.length;
};

const toggleSelectAll = (listName) => {
  const items = safeGetField(listName, formStore.previewFormData, { warn: false }) || [];

  if (isAllSelected(listName)) {
    selectedItems.value[listName] = [];
  } else {
    selectedItems.value[listName] = items.map((_, index) => index);
  }
};

const deleteSelectedItems = (listName) => {
  if (!props.component.props.confirmDelete || confirm('Are you sure you want to delete the selected items?')) {
    const currentItems = [...(safeGetField(listName, formStore.previewFormData, { warn: false }) || [])];
    const selected = selectedItems.value[listName] || [];

    // Sort indices in descending order to avoid index shifting issues
    selected.sort((a, b) => b - a);

    // Remove selected items
    selected.forEach(index => {
      currentItems.splice(index, 1);
    });

    // Update form data
    const updatedData = { ...formStore.previewFormData, [listName]: currentItems };
    formStore.updatePreviewFormData(updatedData);

    // Clear selection
    selectedItems.value[listName] = [];
  }
};

// Import/Export functionality
const exportItems = (listName, format) => {
  const items = safeGetField(listName, formStore.previewFormData, { warn: false }) || [];
  let content = '';
  let filename = `${listName}_items`;
  let mimeType = 'text/plain';

  switch (format) {
    case 'json':
      content = JSON.stringify(items, null, 2);
      filename += '.json';
      mimeType = 'application/json';
      break;
    case 'csv':
      content = items.map(item => `"${item}"`).join('\n');
      filename += '.csv';
      mimeType = 'text/csv';
      break;
    default: // txt
      content = items.join('\n');
      filename += '.txt';
      break;
  }

  // Create and trigger download
  const blob = new Blob([content], { type: mimeType });
  const url = URL.createObjectURL(blob);
  const link = document.createElement('a');
  link.href = url;
  link.download = filename;
  link.click();
  URL.revokeObjectURL(url);
};

const showImportModal = (listName) => {
  importInput = document.createElement('input');
  importInput.type = 'file';
  importInput.accept = '.txt,.csv,.json';
  importInput.onchange = (event) => {
    const file = event.target.files[0];
    if (file) {
      const reader = new FileReader();
      reader.onload = (e) => {
        let importedItems = [];
        try {
          const content = e.target.result;
          if (file.name.endsWith('.json')) {
            importedItems = JSON.parse(content);
          } else if (file.name.endsWith('.csv')) {
            importedItems = content.split('\n').map(line => line.replace(/"/g, '').trim()).filter(Boolean);
          } else {
            importedItems = content.split('\n').filter(Boolean);
          }
          const currentItems = [...(safeGetField(listName, formStore.previewFormData, { warn: false }) || [])];
          const newItems = [...currentItems, ...importedItems];
          const maxItems = props.component.props.maxItems || 20;
          if (newItems.length > maxItems) {
            newItems.splice(maxItems);
            alert(`Import limited to ${maxItems} items total.`);
          }
          const updatedData = { ...formStore.previewFormData, [listName]: newItems };
          formStore.updatePreviewFormData(updatedData);
        } catch (error) {
          alert('Error importing file. Please check the file format.');
        }
      };
      reader.readAsText(file);
    }
  };
  importInput.click();
};

// Handle button click
const handleButtonClick = () => {
  if (!props.isPreview) return;

  // Execute custom onClick code if provided
  if (props.component.props.onClick) {
    try {
      // Create a safe execution context
      const context = {
        formData: formStore.previewFormData,
        componentName: props.component.props.name,
        buttonLabel: props.component.props.label
      };

      // Execute the custom code
      const func = new Function('context', props.component.props.onClick);
      func(context);
    } catch (error) {
      console.error('Error executing button onClick:', error);
    }
  }

  // Default behavior - log the button click
};

// Check if the component is a standard FormKit input type (excluding specialized components)
const isStandardInputType = computed(() => {
  const standardInputTypes = [
    'text', 'textarea', 'number', 'email', 'password',
    'date', 'time', 'datetime-local', 'url', 'tel',
    'select', 'radio', 'file', 'range', 'color', 'hidden'
  ];

  return standardInputTypes.includes(props.component.type);
});

// Check if the component is any FormKit input type (including checkbox and custom types)
const isInputType = computed(() => {
  const inputTypes = [
    'text', 'textarea', 'number', 'email', 'password',
    'date', 'time', 'datetime-local', 'url', 'tel',
    'select', 'checkbox', 'radio', 'file', 'range',
    'color', 'hidden', 'mask', 'otp', 'dropzone', 'switch',
    'searchSelect' // Add our new searchable select component
  ];

  return inputTypes.includes(props.component.type);
});

// Handle image click for image preview component
const handleImageClick = (event) => {
  // Only do something if zoom is enabled
  if (!props.component.props.showZoom) return;

  // Get the image URL
  const imageUrl = props.component.props.imageUrl;
  if (!imageUrl) return;

  // Remove previous lightbox if exists
  if (lightbox && document.body.contains(lightbox)) {
    document.body.removeChild(lightbox);
  }
  lightbox = document.createElement('div');
  lightbox.style.position = 'fixed';
  lightbox.style.top = '0';
  lightbox.style.left = '0';
  lightbox.style.width = '100%';
  lightbox.style.height = '100%';
  lightbox.style.backgroundColor = 'rgba(0, 0, 0, 0.9)';
  lightbox.style.display = 'flex';
  lightbox.style.alignItems = 'center';
  lightbox.style.justifyContent = 'center';
  lightbox.style.zIndex = '1000';
  lightbox.style.cursor = 'zoom-out';

  // Create the image element
  const img = document.createElement('img');
  img.src = imageUrl;
  img.style.maxWidth = '90%';
  img.style.maxHeight = '90%';
  img.style.objectFit = 'contain';

  // Add close functionality
  lightbox.onclick = () => {
    if (document.body.contains(lightbox)) {
      document.body.removeChild(lightbox);
    }
    lightbox = null;
  };

  // Prevent image click from closing the lightbox
  img.onclick = (e) => {
    e.stopPropagation();
  };

  // Add to DOM
  lightbox.appendChild(img);
  document.body.appendChild(lightbox);
};

// Compute style based on grid properties
const componentStyle = computed(() => {
  // Apply grid column styling in both preview and edit modes
  const gridColumn = props.component.props.gridColumn || 'span 12';

  return {
    gridColumn: gridColumn,
    width: '100%', // Always use 100% within the grid cell
    boxSizing: 'border-box'
  };
});

// Update dynamic list items
const updateListItems = (listName, newItems) => {
  const updatedData = { ...formStore.previewFormData, [listName]: newItems };
  formStore.updatePreviewFormData(updatedData);
};

// Get table data safely and initialize if needed
const getTableData = (tableName) => {
  if (!tableName) return [];
  
  // Use safeGetField for consistent data access
  const currentData = safeGetField(tableName, formStore.previewFormData, { warn: false });
  
  console.log('[ComponentPreview] getTableData:', tableName, 'currentData:', currentData);
  
  // If field exists and is an array, return it
  if (Array.isArray(currentData)) {
    return currentData;
  }
  
  // If data doesn't exist, initialize it
  const initialData = [];
  nextTick(() => {
    const updatedFormData = { ...formStore.previewFormData, [tableName]: initialData };
    formStore.updatePreviewFormData(updatedFormData);
    console.log('[ComponentPreview] getTableData: initialized new data for:', tableName);
  });
  
  return initialData;
};

// Simplified helper functions for regular fields only
const getFieldName = (component) => component.props.name;
const getFieldValue = (component) => {
  const fieldName = component.props.name;
  const formData = formStore.previewFormData;
  
  // Silent check - don't trigger warnings for regular field access
  if (formData && formData.hasOwnProperty(fieldName)) {
    const value = formData[fieldName];
    if (value !== undefined && value !== null) {
      return value;
    }
  }
  
  // Return component default value if no form data exists
  return component.props.value || '';
};

const handleFieldInput = (component, event) => {
  if (!props.isPreview) return;
  
  const fieldName = component.props.name;
  const newValue = event;
  
  // Simple update for regular fields only
  const updatedData = { ...formStore.previewFormData, [fieldName]: newValue };
  formStore.updatePreviewFormData(updatedData);
  emit('form-data-updated', updatedData);
};

const handleFieldChange = (component, event) => {
  handleFieldInput(component, event);
};

// Helper function to safely get field values for repeating groups without warnings
const getRepeatingGroupFieldValue = (group, fieldName, fieldType) => {
  if (!group || typeof group !== 'object') {
    return getDefaultValueForType(fieldType);
  }
  
  if (group.hasOwnProperty(fieldName)) {
    const value = group[fieldName];
    if (value === undefined || value === null) {
      return getDefaultValueForType(fieldType);
    }
    return value;
  }
  
  return getDefaultValueForType(fieldType);
};

// Helper function to get default values based on field type
const getDefaultValueForType = (fieldType) => {
  switch (fieldType) {
    case 'number':
      return 0;
    case 'checkbox':
      return [];
    case 'select':
      return '';
    default:
      return '';
  }
};

// Simple repeating group functions
const addRepeatingGroupItem = (groupName, children) => {
  const currentData = safeGetField(groupName, formStore.previewFormData, { warn: false }) || [];
  const newItem = {};
  
  // Initialize fields from children
  if (children) {
    children.forEach(child => {
      if (child.props && child.props.name) {
        // Use the same default value logic as getDefaultValueForType
        if (child.type === 'select' && child.props.options && child.props.options.length > 0) {
          newItem[child.props.name] = child.props.options[0].value || '';
        } else {
          newItem[child.props.name] = getDefaultValueForType(child.type);
        }
      }
    });
  }
  
  const newData = [...currentData, newItem];
  const updatedFormData = { ...formStore.previewFormData, [groupName]: newData };
  
  formStore.updatePreviewFormData(updatedFormData);
  emit('form-data-updated', updatedFormData);
};

const removeRepeatingGroupItem = (groupName, index) => {
  const currentData = safeGetField(groupName, formStore.previewFormData, { warn: false }) || [];
  const newData = [...currentData];
  newData.splice(index, 1);
  
  const updatedFormData = { ...formStore.previewFormData, [groupName]: newData };
  formStore.updatePreviewFormData(updatedFormData);
  emit('form-data-updated', updatedFormData);
};

const updateRepeatingGroupField = (groupName, groupIndex, fieldName, value) => {
  const currentData = safeGetField(groupName, formStore.previewFormData, { warn: false }) || [];
  const newData = [...currentData];
  
  if (!newData[groupIndex]) {
    newData[groupIndex] = {};
  }
  
  newData[groupIndex][fieldName] = value;
  
  const updatedFormData = { ...formStore.previewFormData, [groupName]: newData };
  formStore.updatePreviewFormData(updatedFormData);
  emit('form-data-updated', updatedFormData);
};

// Duplicate RepeatingGroupContainer definition removed

// Handle info display button clicks
const handleInfoButtonClick = (url, openInNewTab = false) => {
  if (!url) return;
  
  try {
    if (openInNewTab) {
      window.open(url, '_blank', 'noopener,noreferrer');
    } else {
      window.location.href = url;
    }
  } catch (error) {
    console.error('Error opening URL:', error);
  }
};

// Update table data for repeating-table component
const updateTableData = (newData) => {
  const tableName = props.component.props.name;
  if (!tableName) return;
  
  console.log('[ComponentPreview] updateTableData:', tableName, 'newData:', newData);
  
  // Ensure newData is always an array
  const safeNewData = Array.isArray(newData) ? newData : [];
  
  // Check if data actually changed to prevent unnecessary updates
  const currentData = safeGetField(tableName, formStore.previewFormData, { warn: false }) || [];
  const currentDataStr = JSON.stringify(currentData);
  const newDataStr = JSON.stringify(safeNewData);
  
  if (currentDataStr === newDataStr) {
    console.log('[ComponentPreview] updateTableData: no change detected, skipping update');
    return;
  }
  
  nextTick(() => {
    const updatedFormData = { ...formStore.previewFormData, [tableName]: safeNewData };
    formStore.updatePreviewFormData(updatedFormData);
    
    console.log('[ComponentPreview] updateTableData: updated form data for:', tableName, 'new data:', safeNewData);
    
    // Emit the change for workflow page to sync with its local formData
    emit('form-data-updated', updatedFormData);
  });
};

// Form Section Component
const toggleSectionCollapse = (sectionId) => {
  // Find the section component at any nesting level
  const section = findContainerRecursively(sectionId);
  if (section) {
    section.props.collapsed = !section.props.collapsed;
    formStore.updateComponent(section);
  }
};

// New methods for form section component
const onNestedDragEnd = (event) => {
  // Handle reordering within a section
  console.log('Nested drag end:', event);
};

const onNestedComponentAdd = (event) => {
  // Handle adding a new component to a section
  console.log('Nested component add:', event);
};

const removeFromSection = (sectionId, childIndex) => {
  // Find the container at any nesting level
  const section = findContainerRecursively(sectionId);
  if (section && section.props.children) {
    const removedComponent = section.props.children.splice(childIndex, 1)[0];
    if (removedComponent) {
      // Update the section (don't add the component back to main form)
      formStore.updateComponent(section);
      
      // Record the deletion in history
      formStore.recordHistory('delete_component_from_section', {
        componentId: removedComponent.id,
        componentType: removedComponent.type,
        componentName: removedComponent.props.label || removedComponent.props.name,
        sectionId: sectionId,
        deletedComponent: removedComponent
      });
      
      console.log('Component deleted from section:', removedComponent);
    }
  }
};

const handleSectionDragOver = (event, containerId) => {
  event.preventDefault();
  event.stopPropagation();
  
  // Initialize container drop state if it doesn't exist
  if (!sectionDropStates.value[containerId]) {
    sectionDropStates.value[containerId] = { isDraggingOver: false };
  }
  sectionDropStates.value[containerId].isDraggingOver = true;
};

const handleSectionDragLeave = (event, containerId) => {
  event.preventDefault();
  event.stopPropagation();
  
  // Only hide the drag over state if we're actually leaving the drop zone
  const rect = event.currentTarget.getBoundingClientRect();
  const isOutside = (
    event.clientX < rect.left ||
    event.clientX > rect.right ||
    event.clientY < rect.top ||
    event.clientY > rect.bottom
  );
  
  if (isOutside && sectionDropStates.value[containerId]) {
    sectionDropStates.value[containerId].isDraggingOver = false;
  }
};

// Container drag handling functions
const handleContainerDragStart = (event) => {
  console.log('Container drag started:', event);
};

const handleContainerDragEnd = (event) => {
  console.log('Container drag ended:', event);
  // The draggable component automatically updates the array order
  // We just need to update the parent container to trigger reactivity
  if (props.component) {
    formStore.updateComponent(props.component);
  }
};

// Nested component selection
const selectNestedComponent = (nestedComponent) => {
  if (!nestedComponent || !nestedComponent.id) return;
  
  selectedComponentId.value = nestedComponent.id;
  selectedNestedComponent.value = nestedComponent;
  
  // Emit the selection event to parent
  emit('select-nested-component', nestedComponent);
  
  console.log('Selected nested component:', nestedComponent);
};

// Delete nested component
const deleteNestedComponent = (componentId) => {
  if (!componentId || !props.component) return;
  
  // Find the component in the children array
  const childIndex = props.component.props.children.findIndex(child => child.id === componentId);
  if (childIndex !== -1) {
    // Remove the component
    const deletedComponent = props.component.props.children.splice(childIndex, 1)[0];
    
    // Update the container to trigger reactivity
    formStore.updateComponent(props.component);
    
    // Clear selection if the deleted component was selected
    if (selectedComponentId.value === componentId) {
      selectedComponentId.value = null;
      selectedNestedComponent.value = null;
    }
    
    console.log('Deleted nested component:', deletedComponent);
  }
};

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

const handleSectionDrop = (event, containerId) => {
  event.preventDefault();
  event.stopPropagation();
  
  // Reset drag state
  if (sectionDropStates.value[containerId]) {
    sectionDropStates.value[containerId].isDraggingOver = false;
  }
  
  try {
    // Get the dropped component data
    let componentData = null;
    
    try {
      componentData = JSON.parse(event.dataTransfer.getData('text/plain') || '{}');
    } catch (parseError) {
      // Fallback for Safari or other browsers
      componentData = window.__draggedComponentData || {};
    }
    
    if (!componentData.type) {
      console.warn('No valid component data found in drop event');
      return;
    }
    
    // Create a new component instance with proper label setup
    const newComponent = {
      id: `${componentData.type}_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`,
      type: componentData.type,
      name: componentData.name,
      props: {
        ...componentData.defaultProps,
        gridColumn: 'span 6', // Default to half width in containers
        width: '50%',
        // Ensure the component has a proper label
        label: componentData.defaultProps.label || componentData.name || `${componentData.type.charAt(0).toUpperCase() + componentData.type.slice(1)} Field`,
        name: componentData.defaultProps.name || `${componentData.type}_${Date.now()}`
      }
    };
    
    // Find the target container at any nesting level
    const container = findContainerRecursively(containerId);
    if (container && (container.type === 'form-section' || container.type === 'repeating-group')) {
      // Initialize children array if it doesn't exist
      if (!container.props.children) {
        container.props.children = [];
      }
      
      // Add the component to the container
      container.props.children.push(newComponent);
      
      // Update the container in the form store
      formStore.updateComponent(container);
      
      // Record the action in history
      formStore.recordHistory('add_component_to_container', {
        componentType: newComponent.type,
        componentName: newComponent.name,
        containerId: containerId,
        containerType: container.type
      });
      
      console.log('Component added to container:', newComponent);
    } else {
      console.warn('Container not found or invalid container type:', containerId);
    }
  } catch (error) {
    console.error('Error dropping component into container:', error);
  }
};

const handleSectionDragEnter = (event, containerId) => {
  event.preventDefault();
  event.stopPropagation();
  
  // Initialize container drop state if it doesn't exist
  if (!sectionDropStates.value[containerId]) {
    sectionDropStates.value[containerId] = { isDraggingOver: false };
  }
};

const openNestedComponentSettings = (component) => {
  // Set the selected nested component and open the modal
  selectedNestedComponent.value = { ...component };
  showNestedSettingsModal.value = true;
  console.log('Opening settings for component:', component);
};

const closeNestedSettingsModal = () => {
  showNestedSettingsModal.value = false;
  selectedNestedComponent.value = null;
};

const saveNestedComponentSettings = (updatedComponent) => {
  if (!updatedComponent || !selectedNestedComponent.value) return;
  
  // Find the parent container at any nesting level
  const parentContainer = findContainerRecursively(null, formStore.formComponents, updatedComponent.id);
  
  if (parentContainer) {
    const childIndex = parentContainer.props.children.findIndex(child => child.id === updatedComponent.id);
    if (childIndex !== -1) {
      // Update the nested component
      parentContainer.props.children[childIndex] = { ...updatedComponent };
      // Update the container to trigger reactivity
      formStore.updateComponent(parentContainer);
      
      console.log('Updated nested component:', updatedComponent);
    }
  }
  
  // Close the modal
  closeNestedSettingsModal();
};

// Button link functionality
const getButtonLink = () => {
  if (!props.component || props.component.type !== 'button') return null;
  
  const { linkType, linkUrl, linkProcessId, linkTarget, iframeDebug, iframeHideComplete, iframeTheme, iframeCustomParams } = props.component.props;
  
  if (linkType === 'url' && linkUrl) {
    return linkUrl;
  }
  
  if (linkType === 'process' && linkProcessId) {
    // Generate the process workflow URL with iframe parameters
    const baseUrl = `${window.location.origin}/workflow/${linkProcessId}`;
    const params = new URLSearchParams();
    
    // Add debug parameter (false = iframe mode, true = debug mode)
    if (iframeDebug !== undefined) {
      params.append('debug', iframeDebug ? 'true' : 'false');
    }
    
    // Add hideComplete parameter
    if (iframeHideComplete) {
      params.append('hideComplete', 'true');
    }
    
    // Add theme parameter
    if (iframeTheme) {
      params.append('theme', iframeTheme);
    }
    
    // Add custom parameters
    if (iframeCustomParams) {
      const customParams = new URLSearchParams(iframeCustomParams);
      customParams.forEach((value, key) => {
        params.append(key, value);
      });
    }
    
    const queryString = params.toString();
    return queryString ? `${baseUrl}?${queryString}` : baseUrl;
  }
  
  return null;
};

// Custom button styling functions
const getCustomButtonStyles = (props) => {
  if (!props || props.variant !== 'custom') return {};
  
  const styles = {
    backgroundColor: props.customBackgroundColor || '#3b82f6',
    color: props.customTextColor || '#ffffff',
    border: 'none',
    cursor: 'pointer',
    transition: 'all 0.2s ease-in-out'
  };
  
  // Add border if specified
  if (props.customBorderColor && props.customBorderWidth) {
    styles.border = `${props.customBorderWidth}px solid ${props.customBorderColor}`;
  }
  
  // Add border radius
  if (props.customBorderRadius) {
    styles.borderRadius = `${props.customBorderRadius}px`;
  }
  
  // Add hover effects
  const hoverEffect = props.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 ${props.customBackgroundColor || '#3b82f6'}` 
        };
        break;
    }
  }
  
  return styles;
};

const getButtonSizeClass = (size) => {
  const sizeClasses = {
    'sm': 'px-3 py-1.5 text-sm',
    'md': 'px-4 py-2 text-sm',
    'lg': 'px-6 py-3 text-base'
  };
  return sizeClasses[size] || sizeClasses['md'];
};

// Custom HTML component helper methods
const getScopedCss = (component) => {
  const cssContent = component.props.cssContent || 
    // Fallback to default CSS from FormBuilderComponents.vue
    `.custom-component {
  padding: 20px;
  border: 2px solid #3b82f6;
  border-radius: 8px;
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  text-align: center;
}

.custom-component h3 {
  color: #1e40af;
  margin-bottom: 10px;
}

.custom-component button {
  background: #3b82f6;
  color: white;
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin-top: 10px;
}

.custom-component button:hover {
  background: #2563eb;
}`;
  
  const uniqueId = `custom-html-${component.id}`;
  
  // Add scope to CSS rules
  const scopedRules = cssContent.replace(
    /([^@{}]+)\s*{/g, 
    `#${uniqueId} $1 {`
  );
  
  return `<style scoped>
#${uniqueId} {
  /* Component container styles */
  position: relative;
}

${scopedRules}
</style>`;
};

const getSafeHtmlContent = (component) => {
  // Get HTML content from component props
  const htmlContent = component.props.htmlContent || 
    // Fallback to the default content from FormBuilderComponents.vue
    `<div class="custom-component">
  <h3>Custom HTML Component</h3>
  <p>Edit this HTML to create your custom design.</p>
  <button type="button">Click me!</button>
</div>`;
  
  const previewMode = component.props.previewMode || 'safe';
  
  if (previewMode === 'safe') {
    // Remove script tags and event handlers for safe mode
    let safeContent = htmlContent
      // Remove script tags completely
      .replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, '')
      // Remove event handler attributes more carefully
      .replace(/\s+on\w+\s*=\s*["'][^"']*["']/gi, '')
      // Remove javascript: protocol
      .replace(/javascript:/gi, '');
    
    return safeContent;
  }
  return htmlContent;
};

// Execute custom JavaScript in a controlled environment
const executeCustomScript = (component) => {
  const jsContent = component.props.jsContent;
  const allowScripts = component.props.allowScripts !== false;
  const previewMode = component.props.previewMode || 'safe';
  
  if (!allowScripts || !jsContent || previewMode === 'safe') {
    return;
  }

  try {
    const uniqueId = `custom-html-${component.id}`;
    const element = document.getElementById(uniqueId);
    
    if (!element) {
      console.warn('Custom HTML element not found for script execution');
      return;
    }

    // Create a safe execution context
    const scriptContext = {
      element: element,
      console: console,
      
      // Helper functions for form interaction
      getValue: (fieldName) => {
        // Access form data from the form store
        return formStore.previewFormData ? formStore.previewFormData[fieldName] : undefined;
      },
      
      setValue: (fieldName, value) => {
        // Set form field value in the form store
        if (formStore.previewFormData) {
          formStore.previewFormData[fieldName] = value;
          // Also emit an event to notify the parent form about the change
          emit('form-data-updated', { fieldName, value });
        }
      },

      // Safe DOM methods
      querySelector: (selector) => element?.querySelector(selector),
      querySelectorAll: (selector) => element?.querySelectorAll(selector),
    };

    // Create function with custom context
    const scriptFunction = new Function('console', 'element', 'getValue', 'setValue', 'querySelector', 'querySelectorAll', jsContent);
    
    // Execute with controlled context
    scriptFunction.call(
      scriptContext,
      scriptContext.console,
      scriptContext.element,
      scriptContext.getValue,
      scriptContext.setValue,
      scriptContext.querySelector,
      scriptContext.querySelectorAll
    );
    
  } catch (error) {
    console.warn('Custom HTML script execution error:', error);
  }
};

// Watch for custom HTML components and execute their scripts
watch(() => props.component, (newComponent) => {
  if (newComponent && newComponent.type === 'customHtml') {
    nextTick(() => {
      executeCustomScript(newComponent);
    });
  }
}, { deep: true });

// Execute scripts for custom HTML components on mount
onMounted(() => {
  if (props.component && props.component.type === 'customHtml') {
    nextTick(() => {
      executeCustomScript(props.component);
    });
  }
});
</script>

<style scoped>
.component-preview {
  width: 100%;
}

:deep(.formkit-wrapper) {
  margin-bottom: 0.5rem !important;
}

:deep(.formkit-options) {
  gap: 0.25rem !important;
}

/* Improve visibility of disabled inputs in the canvas view */
:deep(.canvas-component.formkit-disabled),
:deep(.canvas-component.formkit-disabled input),
:deep(.canvas-component.formkit-disabled select),
:deep(.canvas-component.formkit-disabled textarea) {
  opacity: 0.8 !important;
  pointer-events: none;
}

/* Readonly styles for select, checkbox, radio, and switch components */
:deep(.readonly-select),
:deep(.readonly-checkbox),
:deep(.readonly-radio),
:deep(.readonly-switch) {
  cursor: default !important;
}

:deep(.readonly-select select),
:deep(.readonly-select .formkit-inner),
:deep(.readonly-checkbox input[type="checkbox"]),
:deep(.readonly-radio input[type="radio"]),
:deep(.readonly-switch input[type="checkbox"]) {
  pointer-events: none !important;
  opacity: 0.8 !important;
  background-color: #f3f4f6 !important;
}

:deep(.readonly-checkbox) .formkit-options,
:deep(.readonly-radio) .formkit-options,
:deep(.readonly-switch) .formkit-wrapper {
  pointer-events: none !important;
}

:deep(.readonly-checkbox) .formkit-wrapper,
:deep(.readonly-radio) .formkit-wrapper,
:deep(.readonly-switch) .formkit-wrapper {
  cursor: not-allowed !important;
}

/* Image Preview Component */
.image-preview-container {
  display: flex;
  flex-direction: column;
}

.image-container {
  display: flex;
  justify-content: center;
  border-radius: 0.375rem;
  overflow: hidden;
  max-width: 100%;
}

.image-container img {
  display: block;
  border-radius: 0.375rem;
  max-width: 100%;
}

.has-caption {
  padding-bottom: 0.5rem;
}

/* Repeating Group Component */
.repeating-groups {
  width: 100%;
}

.group-item {
  transition: all 0.2s ease-in-out;
}

/* .group-item:hover {
  border-color: #93c5fd;
} */

.repeating-group-container {
  transition: all 0.2s ease-in-out;
  min-height: 100px;
}

.repeating-group-container:hover {
  border-color: #93c5fd;
  background-color: #f0f9ff;
}

/* Nested Component Styles */
.nested-component {
  transition: all 0.2s ease-in-out;
  margin-bottom: 0.75rem;
}

.nested-component:hover {
  border-color: #93c5fd;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.nested-component-actions {
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
}

.nested-component:hover .nested-component-actions {
  opacity: 1;
}

.draggable-children-container {
  min-height: 20px;
}

/* Ghost class for drag preview */
.ghost {
  opacity: 0.5;
  background: #c1d5db;
}

/* Form component styles for nested components */
.form-component {
  transition: all 0.2s ease-in-out;
}

/* .form-component:hover {
  border-color: #93c5fd;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
} */

.component-actions {
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
}

.form-component:hover .component-actions {
  opacity: 1;
}

/* Dynamic List Component */
.dynamic-list-container {
  width: 100%;
}

.list-items {
  width: 100%;
}

.repeating-table-wrapper{
  margin-bottom: 0.5rem !important;
  width: 100%;
  min-width: 0; /* Allow shrinking */
  overflow: hidden; /* Prevent table from breaking layout */
}

.table-container-wrapper {
  width: 100%;
  min-width: 0; /* Allow shrinking */
  /* This is where the horizontal scrolling happens */
}

/* Form Section Component */
.form-section-container {
  padding: 1rem;
  border-width: 1px;
  border-style: solid;
  border-color: transparent;
  border-radius: 0.375rem;
  background-color: #ffffff;
}

.section-header {
  background-color: #f9fafb;
  padding: 0.75rem 1rem;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #e5e7eb;
  cursor: pointer;
}

.section-title {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.section-description {
  font-size: 0.875rem;
  color: #6b7280;
}

.collapse-icon {
  margin-left: auto;
}

.section-content {
  padding: 1rem;
}

.section-placeholder {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem;
  border-width: 1px;
  border-style: dashed;
  border-color: #e5e7eb;
  border-radius: 0.375rem;
}

.placeholder-content {
  text-align: center;
}

.section-fields {
  padding: 1rem;
}

.empty-section-preview {
  border: 1px dashed #e5e7eb;
  border-radius: 0.375rem;
  background-color: #fafafa;
}

.section-drop-zone {
  padding: 1rem;
  min-height: 120px;
  border-radius: 0.5rem;
  background-color: #ffffff;
  transition: all 0.2s ease-in-out;
}

.nested-components {
  width: 100%;
  min-height: 80px;
}

.form-component {
  transition: all 0.2s ease-in-out;
  margin-bottom: 0.5rem;
}

/* .form-component:hover {
  border-color: #93c5fd;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
} */

.component-actions {
  position: absolute;
  right: 0;
  top: 0;
  z-index: 10;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 0 0.375rem 0 0.375rem;
  padding: 0.25rem;
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
}

.form-component:hover .component-actions {
  opacity: 1;
}

/* Preview mode grid styles */
.repeating-groups .grid,
.section-fields .grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 0.5rem;
}

.repeating-groups .form-component,
.section-fields .form-component {
  width: 100%;
}

.component-actions:hover {
  background-color: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.component-actions button {
  transition: all 0.15s ease-in-out;
}

.component-actions button:hover {
  transform: scale(1.1);
}

.drag-handle {
  cursor: move;
  opacity: 0.6;
}

.drag-handle:hover {
  opacity: 1;
}

.section-drop-placeholder {
  padding: 2rem;
  border-width: 1px;
  border-style: dashed;
  border-color: #d1d5db;
  border-radius: 0.375rem;
  background-color: #ffffff;
  transition: all 0.2s ease-in-out;
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.5rem;
}

.section-drop-placeholder.empty {
  border-color: #e5e7eb;
  min-height: 120px;
  padding: 2rem;
}

.section-drop-placeholder:not(.empty) {
  border-color: #e5e7eb;
  min-height: 80px;
  padding: 1.5rem;
  border-style: dashed;
  background-color: #fafafa;
}

.section-drop-placeholder.drop-active {
  border-color: #3b82f6;
  background-color: #eff6ff;
  border-width: 2px;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.section-drop-placeholder.empty:hover {
  border-color: #9ca3af;
  background-color: #f8fafc;
}

.section-drop-placeholder:not(.empty):hover {
  border-color: #9ca3af;
  background-color: #f1f5f9;
}

.section-drop-placeholder.hidden-placeholder {
  border: none;
  background-color: transparent;
  padding: 0;
  min-height: 40px;
}

/* Ghost styles for dragging */
.ghost {
  opacity: 0.5;
  background-color: #dbeafe !important;
  border-color: #3b82f6 !important;
}

/* Custom button styles */
.custom-button {
  font-weight: 500;
  border-radius: 6px;
  transition: all 0.2s ease-in-out;
}

.custom-button:hover {
  transform: translateY(-1px);
}

.custom-button:active {
  transform: translateY(0);
}

.custom-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* Custom button hover effects */
.custom-button[data-hover-effect="darken"]:hover {
  filter: brightness(0.9);
}

.custom-button[data-hover-effect="lighten"]:hover {
  filter: brightness(1.1);
}

.custom-button[data-hover-effect="scale"]:hover {
  transform: scale(1.05) translateY(-1px);
}

.custom-button[data-hover-effect="glow"]:hover {
  box-shadow: 0 0 15px rgba(59, 130, 246, 0.5);
}

/* Table Loading State Styles */
.table-loading-state {
  @apply border border-gray-200 rounded-lg overflow-hidden bg-white shadow-sm w-full;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.loading-header {
  @apply p-4 md:p-6 bg-gradient-to-r from-blue-50 to-indigo-50 border-b border-gray-200;
}

.loading-title {
  @apply text-lg font-semibold text-gray-800 leading-tight mb-1;
}

.loading-subtitle {
  @apply text-sm text-gray-600 leading-relaxed;
}

.loading-table {
  @apply p-4;
}

.loading-row {
  @apply flex gap-4 mb-3;
}

.loading-header-row {
  @apply border-b border-gray-200 pb-3 mb-4;
}

.loading-cell {
  @apply flex-1 h-6 bg-gray-200 rounded animate-pulse;
  min-width: 80px;
}

.loading-header-row .loading-cell {
  @apply h-4 bg-gray-300;
}

/* Custom HTML Component Styles */
.custom-html-wrapper {
  width: 100%;
}

.custom-html-content {
  min-height: 40px;
  position: relative;
}

.custom-html-content.readonly-mode {
  pointer-events: auto; /* Allow interactions in readonly mode for custom HTML */
}

.custom-html-content.safe-mode {
  /* Safe mode styles */
  position: relative;
}

.custom-html-content.advanced-mode {
  /* Advanced mode styles */
  position: relative;
}

/* Prevent layout issues with custom HTML */
.custom-html-content :deep(*) {
  max-width: 100%;
  box-sizing: border-box;
}

/* Ensure images are responsive */
.custom-html-content :deep(img) {
  max-width: 100%;
  height: auto;
}

/* Prevent custom HTML from breaking out of container */
.custom-html-content {
  overflow-wrap: break-word;
  word-wrap: break-word;
}
</style>