const tabsStateModule = {
  activeTab: 'theme',
  
  setActiveTab(tabName) {
    this.activeTab = tabName;
  },
  
  getActiveTab() {
    return this.activeTab;
  }
};

const tabsUIModule = {
  tabs: null,
  tabContents: null,
  tabTitle: null,
  currentPanel: null,
  
  init() {
    this.tabs = document.querySelectorAll('.orphic-wp-block-option-page-tab');
    this.tabContents = document.querySelectorAll('.orphic-wp-block-option-page-tab-content');
    this.tabTitle = document.querySelector('.orphic-wp-block-option-page-header-tab-container-title');
    this.currentPanel = localStorage.getItem("orphic_wp_block_option_page_current_panel") ?? 'options';
    this.updateActiveTab(this.currentPanel);
    this.updateTabContents(this.currentPanel);
    this.events();
    
    // Initialize title with active tab on page load
    const activeTab = document.querySelector('.orphic-wp-block-option-page-tab.active');
    if (activeTab) {
      this.updateTabTitle(activeTab.textContent);
    }
  },
  
  events() {
    this.tabs.forEach(tab => {
      tab.addEventListener('click', () => this.handleTabClick(tab));
    });
  },
  
  handleTabClick(clickedTab) {
    const tabName = clickedTab.dataset.tab;
    this.updateActiveTab(tabName);
    this.updateTabContents(tabName);
    this.updateTabTitle(clickedTab.textContent);
  },
  
  updateActiveTab(tabName) {
    this.tabs.forEach(tab => {
      tab.classList.toggle('active', tab.dataset.tab === tabName);
    });
    this.currentPanel = tabName;
    tabsStateModule.setActiveTab(tabName);
  },
  
  updateTabContents(tabName) {
    this.tabContents.forEach(content => {
      content.classList.toggle('active', content.dataset.tabContent === tabName);
    });
  },
  
  updateTabTitle(title) {
    if (this.tabTitle) {
      this.tabTitle.textContent = title;
    }
  }
};

// Initialize tabs when DOM is loaded
document.addEventListener('DOMContentLoaded', () => {
  tabsUIModule.init();
}); 