---
interface Props {
  height?: number;
  width?: number;
  fill?: string;
  className?: string;
}

const { 
  height = 16, 
  width = 16, 
  fill = "currentColor", 
  className = "" 
} = Astro.props;
---

<button
  id="theme-toggle-button"
  class={`inline-flex items-center justify-center h-8 w-8 cursor-pointer rounded-md hover:bg-gray-100 dark:hover:bg-gray-700/50 text-secondary-600 dark:text-secondary-400 hover:text-primary-600 dark:hover:text-primary-400 ${className}`}
  aria-label="切换主题"
  role="button"
  tabindex="0"
>
  <!-- 月亮图标 (暗色模式) -->
  <svg
    id="dark-icon"
    style={`height: ${height}px; width: ${width}px;`}
    fill={fill}
    viewBox="0 0 16 16"
    class="hover:scale-110 hidden dark:block"
    aria-hidden="true"
  >
    <path d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z"/>
  </svg>
  
  <!-- 太阳图标 (亮色模式) -->
  <svg
    id="light-icon"
    style={`height: ${height}px; width: ${width}px;`}
    fill={fill}
    viewBox="0 0 16 16"
    class="hover:scale-110 block dark:hidden"
    aria-hidden="true"
  >
    <path d="M8 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z"/>
  </svg>
</button>

<script>
// 主题切换逻辑
(function() {
  // 存储所有事件监听器，便于统一清理
  const listeners: Array<{
    element: EventTarget;
    eventType: string;
    handler: EventListenerOrEventListenerObject;
  }> = [];
  
  // 定时器
  let transitionTimeout: ReturnType<typeof setTimeout> | null = null;
  
  // 添加事件监听器并记录，方便后续统一清理
  function addListener<K extends keyof HTMLElementEventMap>(
    element: EventTarget | null,
    eventType: string,
    handler: EventListenerOrEventListenerObject,
    options?: boolean | AddEventListenerOptions
  ): EventListenerOrEventListenerObject | null {
    if (!element) return null;
    
    element.addEventListener(eventType, handler, options);
    listeners.push({ element, eventType, handler });
    return handler;
  }
  
  // 清理函数 - 移除所有事件监听器
  function cleanup(): void {
    // 移除所有监听器
    listeners.forEach(({ element, eventType, handler }) => {
      try {
        element.removeEventListener(eventType, handler);
      } catch (err) {
        console.error(`移除主题切换事件监听器出错:`, err);
      }
    });
    
    // 清空数组
    listeners.length = 0;
    
    // 清理任何定时器
    if (transitionTimeout) {
      clearTimeout(transitionTimeout);
      transitionTimeout = null;
    }
  }
  
  // 初始化主题切换功能
  function setupThemeToggle(): void {
    // 确保当前没有活动的主题切换按钮事件
    cleanup();
    
    // 获取所有主题切换按钮
    const themeToggleButtons = document.querySelectorAll('#theme-toggle-button');
    
    if (!themeToggleButtons.length) {
      return;
    }
    
    let transitioning = false;
    
    // 获取系统首选主题
    const getSystemTheme = (): string => {
      return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
    };

    // 初始化主题
    const initializeTheme = (): void => {
      const storedTheme = localStorage.getItem('theme');
      const systemTheme = getSystemTheme();
      
      // 按照逻辑优先级应用主题
      if (storedTheme) {
        document.documentElement.dataset.theme = storedTheme;
      } else if (systemTheme) {
        document.documentElement.dataset.theme = systemTheme;
      } else {
        document.documentElement.dataset.theme = 'light';
      }
    };
    
    // 切换主题
    const toggleTheme = (): void => {
      if (transitioning) {
        return;
      }
      
      transitioning = true;
      
      // 获取当前主题
      const currentTheme = document.documentElement.dataset.theme;
      const newTheme = currentTheme === 'light' ? 'dark' : 'light';
      
      // 更新 HTML 属性
      document.documentElement.dataset.theme = newTheme;
      
      // 更新本地存储
      const systemTheme = getSystemTheme();
      
      if (newTheme === systemTheme) {
        localStorage.removeItem('theme');
      } else {
        localStorage.setItem('theme', newTheme);
      }
      
      // 添加防抖
      if (transitionTimeout) {
        clearTimeout(transitionTimeout);
      }
      
      transitionTimeout = setTimeout(() => {
        transitioning = false;
      }, 300);
    };
    
    // 监听系统主题变化
    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
    
    const handleMediaChange = (e: MediaQueryListEvent): void => {
      if (!localStorage.getItem('theme')) {
        const newTheme = e.matches ? 'dark' : 'light';
        document.documentElement.dataset.theme = newTheme;
      }
    };
    
    // 添加系统主题变化监听
    addListener(mediaQuery, 'change', handleMediaChange as EventListener);

    // 为每个按钮添加事件
    themeToggleButtons.forEach(button => {
      (button as HTMLElement).style.pointerEvents = 'auto';
      
      // 创建点击处理函数
      const clickHandler = (e: Event) => {
        e.preventDefault();
        e.stopPropagation();
        toggleTheme();
      };
      
      // 点击事件 - 使用捕获模式
      addListener(button, 'click', clickHandler, { capture: true });
      
      // 键盘事件
      addListener(button, 'keydown', ((e: KeyboardEvent) => {
        if (e.key === 'Enter' || e.key === ' ') {
          e.preventDefault();
          toggleTheme();
        }
      }) as EventListener);
    });
    
    // 处理移动端主题切换容器
    const themeToggleContainer = document.getElementById('theme-toggle-container');
    if (themeToggleContainer) {
      addListener(themeToggleContainer, 'click', (e: Event) => {
        const target = e.target as HTMLElement;
        if (target.id !== 'theme-toggle-button' && !target.closest('#theme-toggle-button')) {
          e.stopPropagation();
          toggleTheme();
        }
      });
    }
    
    // 初始化主题
    initializeTheme();
  }
  
  // 注册清理函数
  function registerCleanup(): void {
    // Astro 事件
    document.addEventListener('astro:before-preparation', cleanup, { once: true });
    document.addEventListener('astro:before-swap', cleanup, { once: true });
    
    // Swup 事件
    document.addEventListener('swup:willReplaceContent', cleanup, { once: true });
    
    // 页面卸载
    window.addEventListener('beforeunload', cleanup, { once: true });
  }
  
  // 初始化函数
  function init(): void {
    setupThemeToggle();
    registerCleanup();
  }
  
  // 在页面加载后初始化
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', init, { once: true });
  } else {
    setTimeout(init, 0);
  }
  
  // 在页面转换后重新初始化
  document.addEventListener('astro:after-swap', init);
  document.addEventListener('astro:page-load', init);
  
  // Swup页面内容替换后重新初始化
  document.addEventListener('swup:contentReplaced', init);
})();
</script>