<template>
  <div class="form-components">
    <!-- Search Bar -->
    <div class="search-container p-3 mb-2">
      <div class="relative">
        <input
          type="text"
          v-model="searchQuery"
          placeholder="Search..."
          class="w-full px-3 py-2 pl-9 bg-white border border-gray-300 rounded text-gray-700 text-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
        />
        <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>

    <!-- Text Inputs Category -->
    <div class="component-category mb-4">
      <h3 class="text-gray-700 text-xs font-semibold px-3 mb-2 uppercase tracking-wider">Text Inputs</h3>
      <div class="grid grid-cols-2 gap-1 px-2">
        <div
          v-for="component in getComponentsByCategory('Basic Inputs')"
          :key="component.type"
          class="component-item rounded p-2 flex flex-col items-center justify-center cursor-grab hover:bg-gray-100 transition-colors border border-gray-200"
          :class="{ 'hidden': !matchesSearch(component) }"
          draggable="true"
          @dragstart="onDragStart($event, component)"
          @dragend="onDragEnd($event)"
          @click="addComponent(component)"
        >
          <Icon :name="component.icon" class="mb-1 w-5 h-5 text-gray-600" />
          <span class="text-xs text-gray-600 text-center">{{ component.name }}</span>
        </div>
      </div>
    </div>

    <!-- Selection & Toggle Category -->
    <div class="component-category mb-4">
      <h3 class="text-gray-700 text-xs font-semibold px-3 mb-2 uppercase tracking-wider">Selection & Toggle</h3>
      <div class="grid grid-cols-2 gap-1 px-2">
        <div
          v-for="component in getComponentsByCategory('Selection Inputs')"
          :key="component.type"
          class="component-item rounded p-2 flex flex-col items-center justify-center cursor-grab hover:bg-gray-100 transition-colors border border-gray-200"
          :class="{ 'hidden': !matchesSearch(component) }"
          draggable="true"
          @dragstart="onDragStart($event, component)"
          @dragend="onDragEnd($event)"
          @click="addComponent(component)"
        >
          <Icon :name="component.icon" class="mb-1 w-5 h-5 text-gray-600" />
          <span class="text-xs text-gray-600 text-center">{{ component.name }}</span>
        </div>
      </div>
    </div>

    <!-- Date & Pickers Category -->
    <div class="component-category mb-4">
      <h3 class="text-gray-700 text-xs font-semibold px-3 mb-2 uppercase tracking-wider">Date & Pickers</h3>
      <div class="grid grid-cols-2 gap-1 px-2">
        <div
          v-for="component in getComponentsByCategory('Date and Time')"
          :key="component.type"
          class="component-item rounded p-2 flex flex-col items-center justify-center cursor-grab hover:bg-gray-100 transition-colors border border-gray-200"
          :class="{ 'hidden': !matchesSearch(component) }"
          draggable="true"
          @dragstart="onDragStart($event, component)"
          @dragend="onDragEnd($event)"
          @click="addComponent(component)"
        >
          <Icon :name="component.icon" class="mb-1 w-5 h-5 text-gray-600" />
          <span class="text-xs text-gray-600 text-center">{{ component.name }}</span>
        </div>
      </div>
    </div>

    <!-- Advanced & Upload Category -->
    <div class="component-category mb-4">
      <h3 class="text-gray-700 text-xs font-semibold px-3 mb-2 uppercase tracking-wider">Advanced & Upload</h3>
      <div class="grid grid-cols-2 gap-1 px-2">
        <div
          v-for="component in getComponentsByCategory('Advanced')"
          :key="component.type"
          class="component-item rounded p-2 flex flex-col items-center justify-center cursor-grab hover:bg-gray-100 transition-colors border border-gray-200"
          :class="{ 'hidden': !matchesSearch(component) }"
          draggable="true"
          @dragstart="onDragStart($event, component)"
          @dragend="onDragEnd($event)"
          @click="addComponent(component)"
        >
          <Icon :name="component.icon" class="mb-1 w-5 h-5 text-gray-600" />
          <span class="text-xs text-gray-600 text-center">{{ component.name }}</span>
        </div>
      </div>
    </div>

    <!-- Layout & Content Category -->
    <div class="component-category mb-4">
      <h3 class="text-gray-700 text-xs font-semibold px-3 mb-2 uppercase tracking-wider">Layout & Content</h3>
      <div class="grid grid-cols-2 gap-1 px-2">
        <div
          v-for="component in getComponentsByCategory('Layout')"
          :key="component.type"
          class="component-item rounded p-2 flex flex-col items-center justify-center cursor-grab hover:bg-gray-100 transition-colors border border-gray-200"
          :class="{ 'hidden': !matchesSearch(component) }"
          draggable="true"
          @dragstart="onDragStart($event, component)"
          @dragend="onDragEnd($event)"
          @click="addComponent(component)"
        >
          <Icon :name="component.icon" class="mb-1 w-5 h-5 text-gray-600" />
          <span class="text-xs text-gray-600 text-center">{{ component.name }}</span>
        </div>
      </div>
    </div>

    <!-- Custom HTML Category -->
    <div class="component-category mb-4">
      <h3 class="text-gray-700 text-xs font-semibold px-3 mb-2 uppercase tracking-wider">Custom HTML</h3>
      <div class="grid grid-cols-2 gap-1 px-2">
        <div
          v-for="component in getComponentsByCategory('Custom HTML')"
          :key="component.type"
          class="component-item rounded p-2 flex flex-col items-center justify-center cursor-grab hover:bg-gray-100 transition-colors border border-gray-200"
          :class="{ 'hidden': !matchesSearch(component) }"
          draggable="true"
          @dragstart="onDragStart($event, component)"
          @dragend="onDragEnd($event)"
          @click="addComponent(component)"
        >
          <Icon :name="component.icon" class="mb-1 w-5 h-5 text-gray-600" />
          <span class="text-xs text-gray-600 text-center">{{ component.name }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
const emit = defineEmits(['add-component']);
const searchQuery = ref('');

// Define available form components
const availableComponents = [
  // Basic inputs
  {
    type: 'text',
    name: 'Text Field',
    category: 'Basic Inputs',
    icon: 'heroicons:document-text',
    description: 'Single line text input',
    defaultProps: {
      type: 'text',
      placeholder: 'Enter text...',
      help: '',
      validation: '',
      readonly: false,
      // Conditional Logic Properties
      conditionalLogic: {
        enabled: false,
        conditions: [], // Array of condition objects
        action: 'show', // 'show', 'hide', 'enable', 'disable'
        operator: 'and' // 'and', 'or'
      }
    }
  },
  {
    type: 'textarea',
    name: 'Text Area',
    category: 'Basic Inputs',
    icon: 'material-symbols:article-outline',
    description: 'Multi-line text input',
    defaultProps: {
      type: 'textarea',
      placeholder: 'Enter text...',
      help: '',
      validation: '',
      readonly: false,
      // Conditional Logic Properties
      conditionalLogic: {
        enabled: false,
        conditions: [],
        action: 'show',
        operator: 'and'
      }
    }
  },
  {
    type: 'number',
    name: 'Number',
    category: 'Basic Inputs',
    icon: 'material-symbols:counter-1-outline',
    description: 'Numeric input field',
    defaultProps: {
      type: 'number',
      placeholder: '0',
      help: '',
      validation: '',
      readonly: false,
      // Conditional Logic Properties
      conditionalLogic: {
        enabled: false,
        conditions: [],
        action: 'show',
        operator: 'and'
      }
    }
  },
  {
    type: 'email',
    name: 'Email',
    category: 'Basic Inputs',
    icon: 'material-symbols:mail-outline',
    description: 'Email address input',
    defaultProps: {
      type: 'email',
      placeholder: 'email@example.com',
      help: '',
      validation: 'email',
      readonly: false,
      // Conditional Logic Properties
      conditionalLogic: {
        enabled: false,
        conditions: [],
        action: 'show',
        operator: 'and'
      }
    }
  },
  {
    type: 'password',
    name: 'Password',
    category: 'Basic Inputs',
    icon: 'material-symbols:password',
    description: 'Password input field',
    defaultProps: {
      type: 'password',
      placeholder: 'Enter password...',
      help: '',
      validation: '',
      readonly: false,
      // Conditional Logic Properties
      conditionalLogic: {
        enabled: false,
        conditions: [],
        action: 'show',
        operator: 'and'
      }
    }
  },
  {
    type: 'url',
    name: 'URL Field',
    category: 'Basic Inputs',
    icon: 'material-symbols:link',
    description: 'URL/website address input',
    defaultProps: {
      type: 'url',
      placeholder: 'https://example.com',
      help: '',
      validation: 'url',
      readonly: false
    }
  },
  {
    type: 'tel',
    name: 'Phone Field',
    category: 'Basic Inputs',
    icon: 'heroicons:device-phone-mobile',
    description: 'Telephone number input',
    defaultProps: {
      type: 'tel',
      placeholder: '+1 (555) 123-4567',
      help: '',
      validation: '',
      readonly: false
    }
  },
  {
    type: 'mask',
    name: 'Masked Input',
    category: 'Basic Inputs',
    icon: 'heroicons:pencil-square',
    description: 'Input field with custom masking',
    defaultProps: {
      type: 'mask',
      placeholder: 'Enter value...',
      help: 'Input will be formatted according to the mask',
      mask: '###-###-####',
      validation: '',
      readonly: false
    }
  },
  {
    type: 'hidden',
    name: 'Hidden Field',
    category: 'Basic Inputs',
    icon: 'heroicons:eye-slash',
    description: 'Hidden field for storing values',
    defaultProps: {
      type: 'hidden',
      value: '',
      help: 'This field is hidden from users'
    }
  },
  
  // Selection inputs
  {
    type: 'select',
    name: 'Select Dropdown',
    category: 'Selection Inputs',
    icon: 'material-symbols:arrow-drop-down-circle-outline',
    description: 'Dropdown select menu',
    defaultProps: {
      type: 'select',
      placeholder: 'Select an option',
      help: '',
      options: [
        { label: 'Option 1', value: 'option_1' },
        { label: 'Option 2', value: 'option_2' },
        { label: 'Option 3', value: 'option_3' }
      ],
      validation: '',
      readonly: false,
      // Conditional Logic Properties
      conditionalLogic: {
        enabled: false,
        conditions: [],
        action: 'show',
        operator: 'and'
      }
    }
  },
  {
    type: 'searchSelect',
    name: 'Searchable Select',
    category: 'Selection Inputs',
    icon: 'material-symbols:search',
    description: 'Dropdown with search functionality',
    defaultProps: {
      type: 'searchSelect',
      placeholder: 'Search and select an option',
      help: 'Type to search for options',
      options: [
        { label: 'Option 1', value: 'option_1' },
        { label: 'Option 2', value: 'option_2' },
        { label: 'Option 3', value: 'option_3' }
      ],
      validation: '',
      readonly: false,
      // Conditional Logic Properties
      conditionalLogic: {
        enabled: false,
        conditions: [],
        action: 'show',
        operator: 'and'
      }
    }
  },
  {
    type: 'checkbox',
    name: 'Checkbox Group',
    category: 'Selection Inputs',
    icon: 'material-symbols:check-box-outline',
    description: 'Multiple checkbox options',
    defaultProps: {
      type: 'checkbox',
      label: 'Checkbox Group',
      name: 'checkbox',
      help: 'Select all that apply',
      options: [
        { label: 'Option 1', value: 'option_1' },
        { label: 'Option 2', value: 'option_2' },
        { label: 'Option 3', value: 'option_3' }
      ],
      validation: '',
      readonly: false
    }
  },
  {
    type: 'radio',
    name: 'Radio Group',
    category: 'Selection Inputs',
    icon: 'material-symbols:radio-button-checked-outline',
    description: 'Radio button group',
    defaultProps: {
      type: 'radio',
      help: '',
      options: [
        { label: 'Option 1', value: 'option_1' },
        { label: 'Option 2', value: 'option_2' },
        { label: 'Option 3', value: 'option_3' }
      ],
      validation: '',
      readonly: false
    }
  },
  {
    type: 'switch',
    name: 'Switch Toggle',
    category: 'Selection Inputs',
    icon: 'material-symbols:toggle-on',
    description: 'Modern toggle switch',
    defaultProps: {
      type: 'switch',
      label: 'Enable Option',
      name: 'switch_field',
      help: 'Toggle this option on or off',
      value: false,
      validation: '',
      readonly: false
    }
  },
  
  // Date and Time
  {
    type: 'date',
    name: 'Date Picker',
    category: 'Date and Time',
    icon: 'material-symbols:calendar-month-outline',
    description: 'Date selection input',
    defaultProps: {
      type: 'date',
      help: '',
      validation: ''
    }
  },
  {
    type: 'time',
    name: 'Time Picker',
    category: 'Date and Time',
    icon: 'material-symbols:schedule-outline',
    description: 'Time selection input',
    defaultProps: {
      type: 'time',
      help: '',
      validation: ''
    }
  },
  {
    type: 'datetime-local',
    name: 'Date & Time',
    category: 'Date and Time',
    icon: 'material-symbols:event-outline',
    description: 'Date and time selection',
    defaultProps: {
      type: 'datetime-local',
      help: '',
      validation: ''
    }
  },
  {
    type: 'range',
    name: 'Range Slider',
    category: 'Date and Time',
    icon: 'material-symbols:linear-scale',
    description: 'Numeric range slider',
    defaultProps: {
      type: 'range',
      min: 0,
      max: 100,
      step: 1,
      value: 50,
      help: 'Drag to select a value',
      validation: ''
    }
  },
  {
    type: 'color',
    name: 'Color Picker',
    category: 'Date and Time',
    icon: 'material-symbols:palette',
    description: 'Color selection input',
    defaultProps: {
      type: 'color',
      value: '#3b82f6',
      help: 'Click to select a color',
      validation: ''
    }
  },
  
  // Advanced
  {
    type: 'file',
    name: 'File Upload',
    category: 'Advanced',
    icon: 'material-symbols:upload-file-outline',
    description: 'File upload input',
    defaultProps: {
      type: 'file',
      help: '',
      accept: '*/*',
      validation: ''
    }
  },
  {
    type: 'image-preview',
    name: 'Image Preview',
    category: 'Advanced',
    icon: 'material-symbols:image-outline',
    description: 'Display an image with preview capabilities',
    defaultProps: {
      label: 'Image Preview',
      name: 'image_preview',
      help: 'Image preview with zoom capability',
      imageUrl: 'https://placehold.co/600x400',
      altText: 'Preview image',
      caption: 'Image caption',
      showZoom: true,
      showCaption: true,
      maxWidth: '100%',
      height: 'auto'
    }
  },
  {
    type: 'repeating-group',
    name: 'Repeating Group',
    category: 'Advanced',
    icon: 'material-symbols:repeat',
    description: 'Collect multiple entries of the same data structure',
    defaultProps: {
      label: 'Person Information',
      name: 'person_group',
      help: 'Add multiple people with their details',
      minItems: 1,
      maxItems: 10,
      buttonText: 'Add Person',
      removeText: 'Remove',
      width: '100%',
      gridColumn: 'span 12',
      showPlaceholder: true, // Whether to show the placeholder in builder mode
      children: [], // Array to hold nested components (draggable fields)
      // Conditional Logic Properties
      conditionalLogic: {
        enabled: false,
        conditions: [],
        action: 'show',
        operator: 'and'
      }
    }
  },
  {
    type: 'dynamic-list',
    name: 'Dynamic List',
    category: 'Advanced',
    icon: 'material-symbols:format-list-bulleted-add',
    description: 'Add multiple items to a dynamic list',
    defaultProps: {
      label: 'Items List',
      name: 'items_list',
      help: 'Add or remove items from the list',
      placeholder: 'Enter item',
      buttonText: 'Add Item',
      minItems: 0,
      maxItems: 20,
      defaultItems: ['Item 1', 'Item 2'],
      itemValidation: '',
      allowDuplicates: true,
      enableSorting: false,
      enableSearch: false,
      itemType: 'text',
      showItemCounter: true,
      confirmDelete: false,
      bulkOperations: false,
      exportFormat: 'json',
      importEnabled: false
    }
  },
  {
    type: 'repeating-table',
    name: 'Data Table',
    category: 'Advanced',
    icon: 'material-symbols:table',
    description: 'Structured table for collecting multiple records',
    defaultProps: {
      label: 'Data Records',
      name: 'data_table',
      help: 'Add records using the form and view them in a table',
      buttonText: 'Add Record',
      editText: 'Edit',
      deleteText: 'Delete',
      minRecords: 0,
      maxRecords: 50,
      showRowNumbers: true,
      allowEdit: true,
      allowDelete: true,
      confirmDelete: true,
      enableSearch: false,
      columns: [
        {
          name: 'name',
          label: 'Name',
          type: 'text',
          required: true,
          placeholder: 'Enter name',
          validation: 'required'
        },
        {
          name: 'email',
          label: 'Email',
          type: 'email',
          required: true,
          placeholder: 'Enter email',
          validation: 'required|email'
        },
        {
          name: 'phone',
          label: 'Phone',
          type: 'tel',
          required: false,
          placeholder: 'Enter phone',
          validation: ''
        }
      ],
      defaultData: []
    }
  },
  {
    type: 'otp',
    name: 'OTP Input',
    category: 'Advanced',
    icon: 'heroicons:key',
    description: 'One-time password verification field',
    defaultProps: {
      label: 'Verification Code',
      name: 'otp_code',
      help: 'Enter the verification code sent to you',
      digits: 6,
      validation: 'required'
    }
  },
  {
    type: 'dropzone',
    name: 'File Dropzone',
    category: 'Advanced',
    icon: 'heroicons:cloud-arrow-up',
    description: 'Drag & drop file upload area',
    defaultProps: {
      label: 'Upload Files',
      name: 'file_upload',
      help: 'Drag files here or click to browse',
      accept: 'image/*,.pdf,.doc,.docx',
      multiple: true,
      maxSize: 5242880, // 5MB
      maxFiles: 5,
      validation: ''
    }
  },
  {
    type: 'button',
    name: 'Button',
    category: 'Advanced',
    icon: 'material-symbols:smart-button',
    description: 'Action button for forms',
    defaultProps: {
      label: 'Click Me',
      name: 'action_button',
      help: 'Button for triggering actions',
      buttonType: 'button', // button, submit, reset
      variant: 'primary', // primary, secondary, success, warning, danger
      size: 'md', // sm, md, lg
      disabled: false,
      showLabel: true, // Whether to show the label above the button
      showButtonText: true, // Whether to show text on the button
      buttonText: '', // Text to display on button (falls back to label if empty)
      icon: '', // Optional icon to display on button
      onClick: '' // Custom JavaScript code to execute
    }
  },
  
  // Layout
  {
    type: 'form-section',
    name: 'Form Section',
    category: 'Layout',
    icon: 'material-symbols:view-module-outline',
    description: 'Container to group related form fields into sections',
    defaultProps: {
      label: 'Section Title',
      description: 'Optional section description',
      collapsible: false,
      collapsed: false,
      showBorder: true,
      borderStyle: 'solid', // solid, dashed, dotted
      backgroundColor: '#ffffff',
      headerBackground: '#f9fafb',
      showHeader: true,
      headerSize: 'medium', // small, medium, large
      spacing: 'normal', // compact, normal, relaxed
      width: '100%',
      gridColumn: 'span 12',
      showPlaceholder: true, // Whether to show the placeholder in builder mode
      children: [], // Array to hold nested components
      // Conditional Logic Properties
      conditionalLogic: {
        enabled: false,
        conditions: [],
        action: 'show',
        operator: 'and'
      }
    }
  },
  {
    type: 'info-display',
    name: 'Info Display',
    category: 'Layout',
    icon: 'material-symbols:info-outline',
    description: 'Display read-only information in key-value format with optional buttons',
    defaultProps: {
      name: 'info_display',
      title: 'Information',
      help: 'Display important information in an organized format',
      fields: [
        { label: 'Customer Name', value: 'John Doe', key: 'customer_name', type: 'text' },
        { label: 'Email', value: 'john@example.com', key: 'customer_email', type: 'text' },
        { label: 'Phone', value: '+1-234-567-8900', key: 'customer_phone', type: 'text' },
        { label: 'View Profile', value: 'View Details', key: 'profile_link', type: 'button', url: 'https://example.com/profile', openInNewTab: true, icon: 'material-symbols:link' }
      ],
      layout: 'side-by-side', // vertical, horizontal, grid, side-by-side
      showBorder: true,
      backgroundColor: '#f9fafb',
      width: '100%',
      gridColumn: 'span 12'
    }
  },
  {
    type: 'heading',
    name: 'Heading',
    category: 'Layout',
    icon: 'material-symbols:title',
    description: 'Section heading text',
    defaultProps: {
      value: 'Section Heading',
      level: 2,
      width: '100%',
      gridColumn: 'span 12'
    }
  },
  {
    type: 'paragraph',
    name: 'Paragraph',
    category: 'Layout',
    icon: 'material-symbols:text-snippet-outline',
    description: 'Paragraph of text',
    defaultProps: {
      value: 'Enter some descriptive text here.',
      width: '100%',
      gridColumn: 'span 12'
    }
  },
  {
    type: 'divider',
    name: 'Divider',
    category: 'Layout',
    icon: 'material-symbols:horizontal-rule',
    description: 'Horizontal divider line',
    defaultProps: {}
  },
  {
    type: 'customHtml',
    name: 'Custom HTML',
    category: 'Custom HTML',
    icon: 'material-symbols:code',
    description: 'Custom HTML with CSS and JavaScript',
    defaultProps: {
      label: 'Custom HTML Component',
      name: 'custom_html',
      help: 'Create custom designs using HTML, CSS, and JavaScript',
      htmlContent: `<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>`,
      cssContent: `.custom-component {
  padding: 20px;
  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;
}`,
      jsContent: `// Custom JavaScript for this component
// You can access the component element via 'this.element'
// Available functions:
// - this.element: The HTML element of this component
// - this.getValue(): Get form values
// - this.setValue(name, value): Set form field values

console.log('Custom HTML component initialized');

// Example: Add click handler
const buttons = this.element.querySelectorAll('button');
buttons.forEach(button => {
  button.addEventListener('click', function(e) {
    e.preventDefault();
    console.log('Custom button clicked!');
  });
});`,
      allowScripts: true,
      previewMode: 'safe', // 'safe' or 'advanced'
      width: '100%',
      gridColumn: 'span 12',
      showInPreview: true,
      // Conditional Logic Properties
      conditionalLogic: {
        enabled: false,
        conditions: [],
        action: 'show',
        operator: 'and'
      }
    }
  },
  {
    type: 'customHtml',
    name: 'Price Calculator',
    category: 'Custom HTML',
    icon: 'material-symbols:calculate',
    description: 'Interactive price calculator with real-time updates',
    defaultProps: {
      label: 'Price Calculator',
      name: 'price_calculator',
      help: 'Calculate total price based on quantity and unit price',
      htmlContent: `<div class="price-calculator">
  <h3>Price Calculator</h3>
  <div class="calculator-grid">
    <div class="input-group">
      <label>Quantity:</label>
      <input type="number" id="quantity" value="1" min="1" class="calc-input">
    </div>
    <div class="input-group">
      <label>Unit Price:</label>
      <input type="number" id="unit-price" value="10.00" step="0.01" class="calc-input">
    </div>
    <div class="result-group">
      <label>Total Price:</label>
      <div id="total-price" class="total-display">$10.00</div>
    </div>
  </div>
  <div class="discount-section">
    <label>
      <input type="checkbox" id="discount-checkbox"> Apply 10% discount
    </label>
    <div id="discount-amount" class="discount-display" style="display: none;">-$1.00</div>
  </div>
</div>`,
      cssContent: `.price-calculator {
  padding: 20px;
  border-radius: 8px;
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
  font-family: Arial, sans-serif;
}

.price-calculator h3 {
  color: #059669;
  margin-bottom: 15px;
  text-align: center;
}

.calculator-grid {
  display: grid;
  gap: 15px;
  margin-bottom: 15px;
}

.input-group, .result-group {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
}

.calc-input {
  width: 120px;
  padding: 6px 8px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  font-size: 14px;
}

.total-display {
  font-weight: bold;
  font-size: 18px;
  color: #059669;
  background: #f0fdf4;
  padding: 6px 12px;
  border-radius: 4px;
  border: 1px solid #10b981;
}

.discount-section {
  border-top: 1px solid #d1d5db;
  padding-top: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.discount-display {
  font-weight: bold;
  color: #dc2626;
  background: #fef2f2;
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid #fca5a5;
}`,
      jsContent: `// Price Calculator JavaScript
console.log('Price calculator initialized');

// Get form field values
const quantity = this.getValue('quantity') || 1;
const unitPrice = this.getValue('unit_price') || 10.00;

// Initialize calculator
function updateCalculator() {
  const quantityInput = this.element.querySelector('#quantity');
  const unitPriceInput = this.element.querySelector('#unit-price');
  const totalDisplay = this.element.querySelector('#total-price');
  const discountCheckbox = this.element.querySelector('#discount-checkbox');
  const discountDisplay = this.element.querySelector('#discount-amount');
  
  // Set initial values from form data
  if (quantityInput) quantityInput.value = quantity;
  if (unitPriceInput) unitPriceInput.value = unitPrice;
  
  function calculateTotal() {
    const qty = parseFloat(quantityInput.value) || 0;
    const price = parseFloat(unitPriceInput.value) || 0;
    const subtotal = qty * price;
    const discount = discountCheckbox.checked ? subtotal * 0.1 : 0;
    const total = subtotal - discount;
    
    // Update displays
    totalDisplay.textContent = '$' + total.toFixed(2);
    discountDisplay.textContent = '-$' + discount.toFixed(2);
    discountDisplay.style.display = discountCheckbox.checked ? 'block' : 'none';
    
    // Update form fields
    this.setValue('quantity', qty);
    this.setValue('unit_price', price);
    this.setValue('total_price', total);
    this.setValue('discount_applied', discountCheckbox.checked);
  }
  
  // Add event listeners
  quantityInput.addEventListener('input', calculateTotal.bind(this));
  unitPriceInput.addEventListener('input', calculateTotal.bind(this));
  discountCheckbox.addEventListener('change', calculateTotal.bind(this));
  
  // Initial calculation
  calculateTotal.call(this);
}

// Initialize when component loads
updateCalculator.call(this);`,
      allowScripts: true,
      previewMode: 'advanced',
      width: '100%',
      gridColumn: 'span 12',
      showInPreview: true,
      conditionalLogic: {
        enabled: false,
        conditions: [],
        action: 'show',
        operator: 'and'
      }
    }
  },
  {
    type: 'customHtml',
    name: 'Progress Tracker',
    category: 'Custom HTML',
    icon: 'material-symbols:trending-up',
    description: 'Visual progress tracking with dynamic updates',
    defaultProps: {
      label: 'Progress Tracker',
      name: 'progress_tracker',
      help: 'Track completion progress with visual indicators',
      htmlContent: `<div class="progress-tracker">
  <h3>Application Progress</h3>
  <div class="progress-steps">
    <div class="step" data-step="1">
      <div class="step-number">1</div>
      <div class="step-label">Personal Info</div>
      <div class="step-status">Completed</div>
    </div>
    <div class="step" data-step="2">
      <div class="step-number">2</div>
      <div class="step-label">Documents</div>
      <div class="step-status">In Progress</div>
    </div>
    <div class="step" data-step="3">
      <div class="step-number">3</div>
      <div class="step-label">Review</div>
      <div class="step-status">Pending</div>
    </div>
    <div class="step" data-step="4">
      <div class="step-number">4</div>
      <div class="step-label">Submit</div>
      <div class="step-status">Pending</div>
    </div>
  </div>
  <div class="progress-bar">
    <div class="progress-fill" id="progress-fill"></div>
  </div>
  <div class="progress-text">
    <span id="progress-percentage">25%</span> Complete
  </div>
</div>`,
      cssContent: `.progress-tracker {
  padding: 20px;
  border-radius: 8px;
  background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 100%);
  font-family: Arial, sans-serif;
}

.progress-tracker h3 {
  color: #7c3aed;
  margin-bottom: 20px;
  text-align: center;
}

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

.progress-steps::before {
  content: '';
  position: absolute;
  top: 15px;
  left: 0;
  right: 0;
  height: 2px;
  background: #e5e7eb;
  z-index: 1;
}

.step {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 2;
}

.step-number {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #e5e7eb;
  color: #6b7280;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  margin-bottom: 8px;
  transition: all 0.3s ease;
}

.step.completed .step-number {
  background: #10b981;
  color: white;
}

.step.current .step-number {
  background: #3b82f6;
  color: white;
  animation: pulse 2s infinite;
}

.step-label {
  font-size: 12px;
  font-weight: 500;
  color: #374151;
  text-align: center;
  margin-bottom: 4px;
}

.step-status {
  font-size: 10px;
  color: #6b7280;
  text-transform: uppercase;
}

.progress-bar {
  height: 8px;
  background: #e5e7eb;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 10px;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #10b981, #3b82f6);
  width: 25%;
  transition: width 0.5s ease;
}

.progress-text {
  text-align: center;
  font-size: 14px;
  color: #6b7280;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}`,
      jsContent: `// Progress Tracker JavaScript
console.log('Progress tracker initialized');

// Get current step from form data
const currentStep = this.getValue('current_step') || 1;

function updateProgress() {
  const steps = this.element.querySelectorAll('.step');
  const progressFill = this.element.querySelector('#progress-fill');
  const progressPercentage = this.element.querySelector('#progress-percentage');
  
  // Update step states
  steps.forEach((step, index) => {
    const stepNum = index + 1;
    step.classList.remove('completed', 'current');
    
    if (stepNum < currentStep) {
      step.classList.add('completed');
    } else if (stepNum === currentStep) {
      step.classList.add('current');
    }
  });
  
  // Update progress bar
  const percentage = (currentStep / steps.length) * 100;
  progressFill.style.width = percentage + '%';
  progressPercentage.textContent = Math.round(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);
  });
});

// Initialize progress
updateProgress.call(this);`,
      allowScripts: true,
      previewMode: 'advanced',
      width: '100%',
      gridColumn: 'span 12',
      showInPreview: true,
      conditionalLogic: {
        enabled: false,
        conditions: [],
        action: 'show',
        operator: 'and'
      }
    }
  },
  {
    type: 'customHtml',
    name: 'File Upload Preview',
    category: 'Custom HTML',
    icon: 'material-symbols:upload-file',
    description: 'Custom file upload with preview and validation',
    defaultProps: {
      label: 'File Upload Preview',
      name: 'file_upload_preview',
      help: 'Upload files with preview and validation',
      htmlContent: `<div class="file-upload-area">
  <h3>Document Upload</h3>
  <div class="upload-zone" id="upload-zone">
    <div class="upload-icon">📁</div>
    <p>Drag and drop files here or click to browse</p>
    <input type="file" id="file-input" multiple accept=".pdf,.doc,.docx,.jpg,.jpeg,.png" style="display: none;">
  </div>
  <div class="file-list" id="file-list">
    <!-- Files will be listed here -->
  </div>
  <div class="upload-status" id="upload-status"></div>
</div>`,
      cssContent: `.file-upload-area {
  padding: 20px;
  border-radius: 8px;
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
  font-family: Arial, sans-serif;
}

.file-upload-area h3 {
  color: #d97706;
  margin-bottom: 15px;
  text-align: center;
}

.upload-zone {
  border: 2px dashed #f59e0b;
  border-radius: 8px;
  padding: 30px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  background: white;
}

.upload-zone:hover {
  border-color: #d97706;
  background: #fffbeb;
}

.upload-zone.dragover {
  border-color: #10b981;
  background: #f0fdf4;
}

.upload-icon {
  font-size: 48px;
  margin-bottom: 10px;
}

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

.file-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  margin-bottom: 8px;
}

.file-name {
  font-weight: 500;
  color: #374151;
}

.file-size {
  font-size: 12px;
  color: #6b7280;
}

.file-status {
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 3px;
}

.file-status.valid {
  background: #d1fae5;
  color: #065f46;
}

.file-status.invalid {
  background: #fee2e2;
  color: #991b1b;
}

.upload-status {
  margin-top: 10px;
  padding: 8px;
  border-radius: 4px;
  font-size: 14px;
  text-align: center;
}`,
      jsContent: `// File Upload Preview JavaScript
console.log('File upload preview initialized');

const uploadZone = this.element.querySelector('#upload-zone');
const fileInput = this.element.querySelector('#file-input');
const fileList = this.element.querySelector('#file-list');
const uploadStatus = this.element.querySelector('#upload-status');

const allowedTypes = ['application/pdf', 'application/msword', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document', 'image/jpeg', 'image/png'];
const maxFileSize = 5 * 1024 * 1024; // 5MB

function formatFileSize(bytes) {
  if (bytes === 0) return '0 Bytes';
  const k = 1024;
  const sizes = ['Bytes', 'KB', 'MB', 'GB'];
  const i = Math.floor(Math.log(bytes) / Math.log(k));
  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
}

function validateFile(file) {
  const errors = [];
  
  if (!allowedTypes.includes(file.type)) {
    errors.push('Invalid file type');
  }
  
  if (file.size > maxFileSize) {
    errors.push('File too large (max 5MB)');
  }
  
  return errors;
}

function createFileItem(file) {
  const fileItem = document.createElement('div');
  fileItem.className = 'file-item';
  
  const errors = validateFile(file);
  const isValid = errors.length === 0;
  
  fileItem.innerHTML = \`
    <div>
      <div class="file-name">\${file.name}</div>
      <div class="file-size">\${formatFileSize(file.size)}</div>
    </div>
    <div class="file-status \${isValid ? 'valid' : 'invalid'}">
      \${isValid ? '✓ Valid' : '✗ ' + errors.join(', ')}
    </div>
  \`;
  
  return fileItem;
}

function handleFiles(files) {
  fileList.innerHTML = '';
  let validCount = 0;
  let totalCount = files.length;
  
  Array.from(files).forEach(file => {
    const fileItem = createFileItem(file);
    fileList.appendChild(fileItem);
    
    if (validateFile(file).length === 0) {
      validCount++;
    }
  });
  
  // Update status
  uploadStatus.textContent = \`\${validCount} of \${totalCount} files valid\`;
  uploadStatus.className = \`upload-status \${validCount === totalCount ? 'valid' : 'invalid'}\`;
  
  // Update form data
  this.setValue('uploaded_files', Array.from(files).map(f => f.name));
  this.setValue('valid_files_count', validCount);
  this.setValue('total_files_count', totalCount);
}

// Event listeners
uploadZone.addEventListener('click', () => fileInput.click());

uploadZone.addEventListener('dragover', (e) => {
  e.preventDefault();
  uploadZone.classList.add('dragover');
});

uploadZone.addEventListener('dragleave', () => {
  uploadZone.classList.remove('dragover');
});

uploadZone.addEventListener('drop', (e) => {
  e.preventDefault();
  uploadZone.classList.remove('dragover');
  handleFiles.call(this, e.dataTransfer.files);
});

fileInput.addEventListener('change', (e) => {
  handleFiles.call(this, e.target.files);
});`,
      allowScripts: true,
      previewMode: 'advanced',
      width: '100%',
      gridColumn: 'span 12',
      showInPreview: true,
      conditionalLogic: {
        enabled: false,
        conditions: [],
        action: 'show',
        operator: 'and'
      }
    }
  }
];

// Get components by category for rendering in sections
const getComponentsByCategory = (category) => {
  return availableComponents.filter(component => component.category === category);
};

// Check if component matches search query
const matchesSearch = (component) => {
  if (!searchQuery.value) return true;
  
  const query = searchQuery.value.toLowerCase();
  return (
    component.name.toLowerCase().includes(query) ||
    component.description.toLowerCase().includes(query) ||
    component.type.toLowerCase().includes(query) ||
    component.category.toLowerCase().includes(query)
  );
};

// Handle drag start event
const onDragStart = (event, component) => {
  // Just set the basic component data, the optimal grid placement
  // will be calculated in the store when adding the component
  const componentWithGrid = {
    ...component,
    defaultProps: {
      ...component.defaultProps,
      width: '100%'
      // Note: gridColumn is now determined by the store's findOptimalGridPlacement method
    }
  };
  
  // Prepare the JSON data
  const jsonData = JSON.stringify(componentWithGrid);
  
  try {
    // For Mac/Safari compatibility, use multiple data formats
    event.dataTransfer.effectAllowed = 'copy';
    
    // Add data in multiple formats for maximum compatibility
    // text/plain is the most universally supported
    event.dataTransfer.setData('text/plain', jsonData);
    
    // Custom format - might not work in all browsers but provides context
    try {
      event.dataTransfer.setData('component', jsonData);
    } catch (err) {
      console.log('Custom format not supported in this browser');
    }
    
    // Store component data in a global variable as fallback for Safari
    window.__draggedComponentData = componentWithGrid;
    
    // Add visual feedback
    event.target.classList.add('dragging');
    
    // Set a drag image
    try {
      const dragIcon = document.createElement('div');
      dragIcon.className = 'drag-preview';
      dragIcon.innerHTML = `<div class="p-2 bg-blue-100 border border-blue-300 rounded text-xs">${component.name}</div>`;
      dragIcon.style.position = 'absolute';
      dragIcon.style.top = '-1000px';
      document.body.appendChild(dragIcon);
      
      event.dataTransfer.setDragImage(dragIcon, 0, 0);
      
      // Clean up the drag image element after a short delay
      setTimeout(() => {
        document.body.removeChild(dragIcon);
      }, 100);
    } catch (err) {
      console.log('Custom drag image not supported in this browser');
    }
  } catch (error) {
    console.error('Error in drag start:', error);
  }
};

// Add a component directly via click
const addComponent = (component) => {
  emit('add-component', component);
};

// Handle drag end event
const onDragEnd = (event) => {
  event.target.classList.remove('dragging');
  
  // Clear the fallback data after a short delay
  setTimeout(() => {
    window.__draggedComponentData = null;
  }, 300);
};
</script>

<style scoped>
.form-components {
  @apply bg-white h-full;
  
  /* More compact layout */
  font-size: 0.75rem;
}

.component-category {
  @apply mb-3;
}

.component-category h3 {
  @apply text-xs font-semibold px-3 mb-2 uppercase tracking-wider text-gray-700;
}

.component-item {
  @apply h-20;
  transition: all 0.15s ease-in-out;
  min-height: 4.5rem;
}

.component-item .iconify {
  @apply w-5 h-5 mb-1;
}

.component-item span {
  @apply leading-tight;
}

.component-item:hover {
  transform: translateY(-2px);
}

.component-item:active {
  transform: scale(0.97);
}

.component-item.dragging {
  opacity: 0.5;
  background-color: #e0f2fe;
  border-color: #60a5fa;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.3);
}

.drag-preview {
  pointer-events: none;
  z-index: 9999;
}
</style> 