/**
 * Overview Page Quick Toggle Component
 * Handles preference toggles in campaign/Cassandra overview lists
 */

class OverviewPreferenceToggle {
  constructor(preferencesManager) {
    this.manager = preferencesManager;
  }

  /**
   * Initialize the overview toggles
   */
  async init() {
    await this.renderToggles();
    this.setupEventListeners();
  }

  /**
   * Render preference toggles for all items in the overview
   */
  async renderToggles() {
    // Find all overview rows (campaigns and Cassandras)
    const overviewRows = document.querySelectorAll('[data-overview-item]');

    overviewRows.forEach(row => {
      const itemId = row.dataset.overviewItem;
      const itemType = row.dataset.overviewType;

      // Check if toggle already exists
      if (row.querySelector('.preference-toggle')) {
        this.updateToggleState(row, itemId, itemType);
        return;
      }

      // Create and add toggle
      const toggle = this.createToggle(itemId, itemType);
      
      // Insert at the beginning of the row
      row.insertBefore(toggle, row.firstChild);
    });
  }

  /**
   * Create a preference toggle element
   */
  createToggle(itemId, itemType) {
    const toggle = document.createElement('div');
    toggle.className = 'preference-toggle';
    
    const isActive = this.manager.isInPreferences(itemId, itemType);
    
    toggle.innerHTML = `
      <button 
        class="preference-toggle-btn ${isActive ? 'preference-active' : ''}"
        data-preference-toggle="${itemId}"
        data-preference-type="${itemType}"
        title="${isActive ? 'Aus Präferenzen entfernen' : 'Zu Präferenzen hinzufügen'}"
      >
        <svg class="toggle-icon" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path class="icon-outline" d="M9.99 2.5C5.86 2.5 2.5 5.86 2.5 9.99C2.5 14.12 5.86 17.49 9.99 17.49C14.13 17.49 17.5 14.13 17.5 10C17.5 5.87 14.13 2.5 9.99 2.5Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
          <path class="icon-star" d="M10 6.25L10.9099 8.6901L13.5 9.125L11.75 10.875L12.2697 13.5L10 12.25L7.73026 13.5L8.25 10.875L6.5 9.125L9.0901 8.6901L10 6.25Z" fill="currentColor"/>
        </svg>
      </button>
    `;

    return toggle;
  }

  /**
   * Update toggle state based on current preferences
   */
  updateToggleState(row, itemId, itemType) {
    const toggleBtn = row.querySelector('.preference-toggle-btn');
    if (!toggleBtn) return;

    const isActive = this.manager.isInPreferences(itemId, itemType);
    
    if (isActive) {
      toggleBtn.classList.add('preference-active');
      toggleBtn.title = 'Aus Präferenzen entfernen';
    } else {
      toggleBtn.classList.remove('preference-active');
      toggleBtn.title = 'Zu Präferenzen hinzufügen';
    }
  }

  /**
   * Setup event listeners
   */
  setupEventListeners() {
    // Listen for preference changes
    document.addEventListener('preferenceToggled', (e) => {
      const { itemId, type } = e.detail;
      const row = document.querySelector(`[data-overview-item="${itemId}"][data-overview-type="${type}"]`);
      if (row) {
        this.updateToggleState(row, itemId, type);
      }
    });

    document.addEventListener('preferenceDeleted', () => {
      this.renderToggles();
    });

    // Visual feedback on hover
    document.addEventListener('mouseover', (e) => {
      if (e.target.closest('.preference-toggle-btn')) {
        const row = e.target.closest('[data-overview-item]');
        if (row) {
          row.classList.add('preference-hover');
        }
      }
    });

    document.addEventListener('mouseout', (e) => {
      if (e.target.closest('.preference-toggle-btn')) {
        const row = e.target.closest('[data-overview-item]');
        if (row) {
          row.classList.remove('preference-hover');
        }
      }
    });
  }

  /**
   * Batch update toggles (useful after bulk operations)
   */
  updateAllToggles() {
    const overviewRows = document.querySelectorAll('[data-overview-item]');
    overviewRows.forEach(row => {
      const itemId = row.dataset.overviewItem;
      const itemType = row.dataset.overviewType;
      this.updateToggleState(row, itemId, itemType);
    });
  }
}

// Export for use in other modules
if (typeof module !== 'undefined' && module.exports) {
  module.exports = OverviewPreferenceToggle;
}