import { IEventBus } from '../types/CalendarTypes';
import { EventRenderingService } from '../renderers/EventRendererManager';
import { DateCalculator } from '../utils/DateCalculator';
import { CoreEvents } from '../constants/CoreEvents';
import { NavigationRenderer } from '../renderers/NavigationRenderer';
import { calendarConfig } from '../core/CalendarConfig';

/**
 * NavigationManager handles calendar navigation (prev/next/today buttons)
 * with simplified CSS Grid approach
 */
export class NavigationManager {
  private eventBus: IEventBus;
  private navigationRenderer: NavigationRenderer;
  private dateCalculator: DateCalculator;
  private currentWeek: Date;
  private targetWeek: Date;
  private animationQueue: number = 0;

  constructor(eventBus: IEventBus, eventRenderer: EventRenderingService) {
    this.eventBus = eventBus;
    DateCalculator.initialize(calendarConfig);
    this.dateCalculator = new DateCalculator();
    this.navigationRenderer = new NavigationRenderer(eventBus, eventRenderer);
    this.currentWeek = DateCalculator.getISOWeekStart(new Date());
    this.targetWeek = new Date(this.currentWeek);
    this.init();
  }

  private init(): void {
    this.setupEventListeners();
  }


  private getCalendarContainer(): HTMLElement | null {
      return document.querySelector('swp-calendar-container');
  }

  private getCurrentGrid(): HTMLElement | null {
      return document.querySelector('swp-calendar-container swp-grid-container:not([data-prerendered])');
  }

  private setupEventListeners(): void {
    // Initial DOM update when calendar is initialized
    this.eventBus.on(CoreEvents.INITIALIZED, () => {
      this.updateWeekInfo();
    });
    
    // Listen for filter changes and apply to pre-rendered grids
    this.eventBus.on(CoreEvents.FILTER_CHANGED, (e: Event) => {
      const detail = (e as CustomEvent).detail;
      this.navigationRenderer.applyFilterToPreRenderedGrids(detail);
    });

    // Listen for navigation button clicks
    document.addEventListener('click', (e) => {
      const target = e.target as HTMLElement;
      const navButton = target.closest('[data-action]') as HTMLElement;
      
      if (!navButton) return;
      
      const action = navButton.dataset.action;
      
      switch (action) {
        case 'prev':
          this.navigateToPreviousWeek();
          break;
        case 'next':
          this.navigateToNextWeek();
          break;
        case 'today':
          this.navigateToToday();
          break;
      }
    });

    // Listen for external navigation requests
    this.eventBus.on(CoreEvents.DATE_CHANGED, (event: Event) => {
      const customEvent = event as CustomEvent;
      const dateFromEvent = customEvent.detail.currentDate;
      
      // Validate date before processing
      if (!dateFromEvent) {
        return;
      }
      
      const targetDate = new Date(dateFromEvent);
      if (isNaN(targetDate.getTime())) {
        return;
      }
      
      this.navigateToDate(targetDate);
    });

    // Listen for event navigation requests
    this.eventBus.on(CoreEvents.NAVIGATE_TO_EVENT, (event: Event) => {
      const customEvent = event as CustomEvent;
      const { eventDate, eventStartTime } = customEvent.detail;
      
      if (!eventDate || !eventStartTime) {
        console.warn('NavigationManager: Invalid event navigation data');
        return;
      }
      
      this.navigateToEventDate(eventDate, eventStartTime);
    });
  }

  /**
   * Navigate to specific event date and emit scroll event after navigation
   */
  private navigateToEventDate(eventDate: Date, eventStartTime: string): void {
    const weekStart = DateCalculator.getISOWeekStart(eventDate);
    this.targetWeek = new Date(weekStart);
    
    const currentTime = this.currentWeek.getTime();
    const targetTime = weekStart.getTime();
    
    // Store event start time for scrolling after navigation
    const scrollAfterNavigation = () => {
      // Emit scroll request after navigation is complete
      this.eventBus.emit('scroll:to-event-time', {
        eventStartTime
      });
    };
    
    if (currentTime < targetTime) {
      this.animationQueue++;
      this.animateTransition('next', weekStart);
      // Listen for navigation completion to trigger scroll
      this.eventBus.once(CoreEvents.NAVIGATION_COMPLETED, scrollAfterNavigation);
    } else if (currentTime > targetTime) {
      this.animationQueue++;
      this.animateTransition('prev', weekStart);
      // Listen for navigation completion to trigger scroll
      this.eventBus.once(CoreEvents.NAVIGATION_COMPLETED, scrollAfterNavigation);
    } else {
      // Already on correct week, just scroll
      scrollAfterNavigation();
    }
  }

  private navigateToPreviousWeek(): void {
    this.targetWeek.setDate(this.targetWeek.getDate() - 7);
    const weekToShow = new Date(this.targetWeek);
    this.animationQueue++;
    this.animateTransition('prev', weekToShow);
  }

  private navigateToNextWeek(): void {
    this.targetWeek.setDate(this.targetWeek.getDate() + 7);
    const weekToShow = new Date(this.targetWeek);
    this.animationQueue++;
    this.animateTransition('next', weekToShow);
  }

  private navigateToToday(): void {
    const today = new Date();
    const todayWeekStart = DateCalculator.getISOWeekStart(today);
    
    // Reset to today
    this.targetWeek = new Date(todayWeekStart);
    
    const currentTime = this.currentWeek.getTime();
    const targetTime = todayWeekStart.getTime();
    
    if (currentTime < targetTime) {
      this.animationQueue++;
      this.animateTransition('next', todayWeekStart);
    } else if (currentTime > targetTime) {
      this.animationQueue++;
      this.animateTransition('prev', todayWeekStart);
    }
  }

  private navigateToDate(date: Date): void {
    const weekStart = DateCalculator.getISOWeekStart(date);
    this.targetWeek = new Date(weekStart);
    
    const currentTime = this.currentWeek.getTime();
    const targetTime = weekStart.getTime();
    
    if (currentTime < targetTime) {
      this.animationQueue++;
      this.animateTransition('next', weekStart);
    } else if (currentTime > targetTime) {
      this.animationQueue++;
      this.animateTransition('prev', weekStart);
    }
  }

  /**
   * Animation transition using pre-rendered containers when available
   */
  private animateTransition(direction: 'prev' | 'next', targetWeek: Date): void {
    const container = this.getCalendarContainer();
    const currentGrid = this.getCurrentGrid();
    
    if (!container || !currentGrid) {
      return;
    }

    
    let newGrid: HTMLElement;

    // Always create a fresh container for consistent behavior
    newGrid = this.navigationRenderer.renderContainer(container, targetWeek);

    
    // Clear any existing transforms before animation
    newGrid.style.transform = '';
    (currentGrid as HTMLElement).style.transform = '';

    // Animate transition using Web Animations API
    const slideOutAnimation = (currentGrid as HTMLElement).animate([
      { transform: 'translateX(0)', opacity: '1' },
      { transform: direction === 'next' ? 'translateX(-100%)' : 'translateX(100%)', opacity: '0.5' }
    ], {
      duration: 400,
      easing: 'ease-in-out',
      fill: 'forwards'
    });

    const slideInAnimation = newGrid.animate([
      { transform: direction === 'next' ? 'translateX(100%)' : 'translateX(-100%)' },
      { transform: 'translateX(0)' }
    ], {
      duration: 400,
      easing: 'ease-in-out',
      fill: 'forwards'
    });

    // Handle animation completion
    slideInAnimation.addEventListener('finish', () => {
      
      // Cleanup: Remove all old grids except the new one
      const allGrids = container.querySelectorAll('swp-grid-container');
      for (let i = 0; i < allGrids.length - 1; i++) {
        allGrids[i].remove();
      }

      // Reset positioning
      newGrid.style.position = 'relative';
      newGrid.removeAttribute('data-prerendered');
      
      // Reset all-day height and remove hardcoded header height after slide animation
      const root = document.documentElement;
      root.style.setProperty('--all-day-row-height', '0px');
      
      // Update state
      this.currentWeek = new Date(targetWeek);
      this.animationQueue--;
      
      // If this was the last queued animation, ensure we're in sync
      if (this.animationQueue === 0) {
        this.currentWeek = new Date(this.targetWeek);
      }
      
      // Update week info and notify other managers
      this.updateWeekInfo();

      // Emit period change event for ScrollManager
      this.eventBus.emit(CoreEvents.NAVIGATION_COMPLETED, {
        direction,
        currentDate: this.currentWeek
      });
      
    });
  }

  private updateWeekInfo(): void {
    const weekNumber = DateCalculator.getWeekNumber(this.currentWeek);
    const weekEnd = DateCalculator.addDays(this.currentWeek, 6);
    const dateRange = DateCalculator.formatDateRange(this.currentWeek, weekEnd);
    
    // Notify other managers about week info update - DOM manipulation should happen via events
    this.eventBus.emit(CoreEvents.PERIOD_INFO_UPDATE, {
      weekNumber,
      dateRange,
      weekStart: this.currentWeek,
      weekEnd
    });
  }

  /**
   * Get current week start date
   */
  getCurrentWeek(): Date {
    return new Date(this.currentWeek);
  }

  /**
   * Get target week (where navigation is heading)
   */
  getTargetWeek(): Date {
    return new Date(this.targetWeek);
  }

  /**
   * Check if navigation animation is in progress
   */
  isAnimating(): boolean {
    return this.animationQueue > 0;
  }

  /**
   * Force navigation to specific week without animation
   */
  setWeek(weekStart: Date): void {
    this.currentWeek = new Date(weekStart);
    this.targetWeek = new Date(weekStart);
    this.updateWeekInfo();
  }

}