import { Controller } from "@hotwired/stimulus"

// Connects to data-controller="lucide"
export default class extends Controller {
  static targets = ["icon"]
  
  connect() {
    this.initializeIcons()
    
    // Listen for Turbo navigation events to reinitialize icons
    document.addEventListener('turbo:render', this.handleTurboRender.bind(this))
    document.addEventListener('turbo:frame-render', this.handleTurboFrameRender.bind(this))
  }
  
  disconnect() {
    // Clean up event listeners
    document.removeEventListener('turbo:render', this.handleTurboRender.bind(this))
    document.removeEventListener('turbo:frame-render', this.handleTurboFrameRender.bind(this))
  }

  // Initialize all Lucide icons in the controller scope
  initializeIcons() {
    if (typeof lucide !== 'undefined') {
      // Initialize icons within this controller's element
      lucide.createIcons({
        element: this.element
      })
    } else {
      console.warn('Lucide not loaded yet, retrying...')
      // Retry after a short delay if Lucide hasn't loaded yet
      setTimeout(() => this.initializeIcons(), 100)
    }
  }

  // Method to reinitialize icons after dynamic content changes
  reinitialize() {
    this.initializeIcons()
  }

  // Method to create a specific icon programmatically
  createIcon(iconName, element = null) {
    if (typeof lucide !== 'undefined') {
      const targetElement = element || this.element
      lucide.createIcons({
        element: targetElement,
        icons: {
          [iconName]: lucide[iconName]
        }
      })
    }
  }

  // Handle Turbo page renders
  handleTurboRender() {
    // Small delay to ensure DOM is fully updated
    setTimeout(() => this.initializeIcons(), 10)
  }

  // Handle Turbo frame renders
  handleTurboFrameRender(event) {
    // Initialize icons within the specific frame that was rendered
    if (event.detail && event.detail.newFrame) {
      lucide.createIcons({
        element: event.detail.newFrame
      })
    }
  }
}