/**
 * Header组件的JavaScript功能
 * 处理页眉的展开和收缩交互
 */

export class HeaderController {
  private isExpanded: boolean = false;
  private expandButton: HTMLElement | null = null;
  private collapseButton: HTMLElement | null = null;
  private headerCollapsed: HTMLElement | null = null;
  private headerExpanded: HTMLElement | null = null;

  constructor() {
    this.init();
  }

  private init(): void {
    // 等待DOM加载完成
    if (document.readyState === 'loading') {
      document.addEventListener('DOMContentLoaded', () => this.bindEvents());
    } else {
      this.bindEvents();
    }
  }

  private bindEvents(): void {
    // 获取DOM元素
    this.expandButton = document.getElementById('expand-button');
    this.collapseButton = document.getElementById('collapse-button');
    this.headerCollapsed = document.getElementById('header-collapsed');
    this.headerExpanded = document.getElementById('header-expanded');

    // 绑定事件
    if (this.expandButton) {
      this.expandButton.addEventListener('click', () => this.expandHeader());
    }

    if (this.collapseButton) {
      this.collapseButton.addEventListener('click', () => this.collapseHeader());
    }

    // 点击外部区域收缩导航
    document.addEventListener('click', (e) => this.handleOutsideClick(e));

    // 键盘事件支持
    document.addEventListener('keydown', (e) => this.handleKeydown(e));
  }

  private expandHeader(): void {
    if (this.isExpanded) return;

    this.isExpanded = true;
    
    if (this.headerCollapsed) {
      this.headerCollapsed.style.display = 'none';
    }
    
    if (this.headerExpanded) {
      this.headerExpanded.style.display = 'block';
      this.headerExpanded.style.animation = 'slideDown 0.3s ease-out';
    }

    // 设置焦点到收缩按钮以便键盘导航
    if (this.collapseButton) {
      this.collapseButton.focus();
    }
  }

  private collapseHeader(): void {
    if (!this.isExpanded) return;

    this.isExpanded = false;
    
    if (this.headerExpanded) {
      this.headerExpanded.style.animation = 'slideUp 0.3s ease-out';
      setTimeout(() => {
        if (this.headerExpanded) {
          this.headerExpanded.style.display = 'none';
        }
      }, 300);
    }
    
    if (this.headerCollapsed) {
      this.headerCollapsed.style.display = 'block';
    }

    // 设置焦点回到展开按钮
    if (this.expandButton) {
      this.expandButton.focus();
    }
  }

  private handleOutsideClick(event: Event): void {
    const target = event.target as HTMLElement;
    
    if (!this.isExpanded) return;
    
    // 检查点击是否在页眉外部
    if (this.headerExpanded && !this.headerExpanded.contains(target)) {
      this.collapseHeader();
    }
  }

  private handleKeydown(event: KeyboardEvent): void {
    // ESC键收缩导航
    if (event.key === 'Escape' && this.isExpanded) {
      this.collapseHeader();
    }
  }

  // 公共方法
  public toggle(): void {
    if (this.isExpanded) {
      this.collapseHeader();
    } else {
      this.expandHeader();
    }
  }

  public getState(): boolean {
    return this.isExpanded;
  }
}

// 自动初始化
let headerController: HeaderController | null = null;

if (typeof window !== 'undefined') {
  // 确保只初始化一次
  if (!headerController) {
    headerController = new HeaderController();
  }
  
  // 将控制器暴露到全局作用域以便调试
  (window as any).headerController = headerController;
}