// Theme dropdown active indicator management

// Update visual indicators for theme buttons
const updateThemeIndicators = (): void => {
  const currentTheme = localStorage.getItem("theme") || "tokyo-night";

  // Update theme buttons (all buttons with changeThemeTo onclick)
  document.querySelectorAll('[onclick^="changeThemeTo"]').forEach((btn) => {
    const onclick = btn.getAttribute("onclick") || "";
    const match = onclick.match(/changeThemeTo\('(.+?)'\)/);
    if (match) {
      const theme = match[1];
      if (theme === currentTheme) {
        // Active state - use CSS class instead of inline style
        btn.classList.add("bg-theme-active");
        btn.classList.remove("bg-theme-inactive");
      } else {
        // Inactive state
        btn.classList.remove("bg-theme-active");
        btn.classList.add("bg-theme-inactive");
      }
    }
  });
};

// Make function available globally
(window as any).updateThemeIndicators = updateThemeIndicators;

// Update on dropdown toggle
const originalToggleThemeDropdown = (window as any).toggleThemeDropdown;
if (originalToggleThemeDropdown) {
  (window as any).toggleThemeDropdown = () => {
    originalToggleThemeDropdown();
    updateThemeIndicators();
    (window as any).updateWoodPanelingIndicators?.();
  };
}

// Update after theme changes
const originalChangeThemeTo = (window as any).changeThemeTo;
if (originalChangeThemeTo) {
  (window as any).changeThemeTo = (...args: unknown[]) => {
    originalChangeThemeTo(...args);
    updateThemeIndicators();
  };
}

// Auto-initialize when DOM is ready
if (typeof document !== "undefined") {
  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", updateThemeIndicators);
  } else {
    updateThemeIndicators();
  }
}