Calendar/src/managers/GridManager.ts

// Grid structure management - Simple CSS Grid Implementation with Strategy Pattern

import { eventBus } from '../core/EventBus';
import { calendarConfig } from '../core/CalendarConfig';
import { EventTypes } from '../constants/EventTypes';
import { StateEvents } from '../types/CalendarState';
import { DateUtils } from '../utils/DateUtils';
import { ResourceCalendarData } from '../types/CalendarTypes';
import { GridRenderer } from '../renderers/GridRenderer';
import { GridStyleManager } from '../renderers/GridStyleManager';

/**
 * Grid position interface
 */
interface GridPosition {
  minutes: number;
  time: string;
  y: number;
}

/**
 * Manages the calendar grid structure using simple CSS Grid with Strategy Pattern
 */
export class GridManager {
  private container: HTMLElement | null = null;
  private grid: HTMLElement | null = null;
  private currentWeek: Date | null = null;
  private allDayEvents: any[] = []; // Store all-day events for current week
  private resourceData: ResourceCalendarData | null = null; // Store resource data for resource calendar
  private gridRenderer: GridRenderer;
  private styleManager: GridStyleManager;
  
  constructor() {
    console.log('🏗️ GridManager: Constructor called');
    this.gridRenderer = new GridRenderer(calendarConfig);
    this.styleManager = new GridStyleManager(calendarConfig);
    this.init();
  }

  private init(): void {
    this.findElements();
    this.subscribeToEvents();
    
    // Set initial current week to today if not set
    if (!this.currentWeek) {
      this.currentWeek = this.getWeekStart(new Date());
      console.log('GridManager: Set initial currentWeek to', this.currentWeek);
      // Don't render immediately - wait for proper initialization event
      console.log('GridManager: Waiting for initialization complete before rendering');
    }
  }

  private getWeekStart(date: Date): Date {
    // Use DateUtils for consistent week calculation (Sunday = 0)
    return DateUtils.getWeekStart(date, 0);
  }

  private findElements(): void {
    this.grid = document.querySelector('swp-calendar-container');
    console.log('GridManager: findElements called, found swp-calendar-container:', !!this.grid);
  }

  private subscribeToEvents(): void {
    // State-driven events removed - render() is now called directly by CalendarManager

    // Re-render grid on config changes
    eventBus.on(EventTypes.CONFIG_UPDATE, (e: Event) => {
      const detail = (e as CustomEvent).detail;
      if (['dayStartHour', 'dayEndHour', 'hourHeight', 'view', 'weekDays', 'fitToWidth'].includes(detail.key)) {
        this.render();
      }
    });

    // Re-render on calendar type change
    eventBus.on(EventTypes.CALENDAR_TYPE_CHANGED, () => {
      this.render();
    });

    // Re-render on view change
    eventBus.on(EventTypes.VIEW_CHANGE, () => {
      this.render();
    });

    // Re-render on period change
    eventBus.on(EventTypes.PERIOD_CHANGE, (e: Event) => {
      const detail = (e as CustomEvent).detail;
      this.currentWeek = detail.week;
      this.render();
    });

    // Handle week changes from NavigationManager
    eventBus.on(EventTypes.WEEK_CHANGED, (e: Event) => {
      const detail = (e as CustomEvent).detail;
      this.currentWeek = detail.weekStart;
      this.render();
    });

    // Handle events loaded
    eventBus.on(EventTypes.EVENTS_LOADED, (e: Event) => {
      const detail = (e as CustomEvent).detail;
      this.updateAllDayEvents(detail.events);
    });

    // Handle data loaded for resource mode
    eventBus.on(StateEvents.DATA_LOADED, (e: Event) => {
      const detail = (e as CustomEvent).detail;
      console.log(`GridManager: Received DATA_LOADED`);
      
      if (detail.data && detail.data.calendarMode === 'resource') {
        // Resource data will be passed in the state event
        // For now just update grid styles
        this.styleManager.updateGridStyles(this.resourceData);
      }
    });

    // Handle grid clicks
    this.setupGridInteractions();
  }

  /**
   * Set resource data for resource calendar mode
   */
  public setResourceData(resourceData: ResourceCalendarData | null): void {
    this.resourceData = resourceData;
    console.log('GridManager: Set resource data:', resourceData ? `${resourceData.resources.length} resources` : 'null');
  }

  /**
   * Render the complete grid structure - now returns Promise for direct calls
   */
  async render(): Promise<void> {
    if (!this.grid) {
      console.warn('GridManager: render() called but this.grid is null, re-finding elements');
      this.findElements();
      if (!this.grid) {
        throw new Error('GridManager: swp-calendar-container not found, cannot render');
      }
    }

    console.log('GridManager: Starting render with grid element:', this.grid);
    this.styleManager.updateGridStyles(this.resourceData);
    this.gridRenderer.renderGrid(this.grid, this.currentWeek!, this.resourceData, this.allDayEvents);
    
    const columnCount = this.styleManager.getColumnCount(this.resourceData);
    console.log(`GridManager: Render complete - created ${columnCount} columns`);
    
    // Emit GRID_RENDERED event to trigger event rendering
    const weekEnd = this.currentWeek ? new Date(this.currentWeek.getTime() + 6 * 24 * 60 * 60 * 1000) : null;
    eventBus.emit(EventTypes.GRID_RENDERED, {
      container: this.grid,
      currentWeek: this.currentWeek,
      startDate: this.currentWeek,
      endDate: weekEnd,
      columnCount: columnCount
    });
  }

  // Column count calculation moved to GridStyleManager

  // Grid rendering methods moved to GridRenderer

  /**
   * Update all-day events data and re-render if needed
   */
  private updateAllDayEvents(events: any[]): void {
    if (!this.currentWeek) return;

    // Filter all-day events for current week
    const weekStart = this.currentWeek;
    const weekEnd = new Date(weekStart);
    weekEnd.setDate(weekStart.getDate() + 6);

    this.allDayEvents = events.filter(event => {
      if (!event.allDay) return false;
      
      const eventDate = new Date(event.start);
      return eventDate >= weekStart && eventDate <= weekEnd;
    });

    console.log('GridManager: Updated all-day events:', this.allDayEvents.length);
    
    // Update only the calendar header if grid is already rendered
    if (this.grid && this.grid.children.length > 0) {
      this.gridRenderer.renderGrid(this.grid, this.currentWeek!, this.resourceData, this.allDayEvents);
    }
  }

  // CSS management methods moved to GridStyleManager

  /**
   * Setup grid interaction handlers for POC structure
   */
  private setupGridInteractions(): void {
    if (!this.grid) return;

    // Click handler for day columns (works for both date and resource columns)
    this.grid.addEventListener('click', (e: MouseEvent) => {
      // Ignore if clicking on an event
      if ((e.target as Element).closest('swp-event')) return;
      
      const dayColumn = (e.target as Element).closest('swp-day-column, swp-resource-column') as HTMLElement;
      if (!dayColumn) return;

      const position = this.getClickPosition(e, dayColumn);
      
      eventBus.emit(EventTypes.GRID_CLICK, {
        date: (dayColumn as any).dataset.date,
        resource: (dayColumn as any).dataset.resource,
        employeeId: (dayColumn as any).dataset.employeeId,
        time: position.time,
        minutes: position.minutes
      });
    });

    // Double click handler for day columns
    this.grid.addEventListener('dblclick', (e: MouseEvent) => {
      // Ignore if clicking on an event
      if ((e.target as Element).closest('swp-event')) return;
      
      const dayColumn = (e.target as Element).closest('swp-day-column, swp-resource-column') as HTMLElement;
      if (!dayColumn) return;

      const position = this.getClickPosition(e, dayColumn);
      
      eventBus.emit(EventTypes.GRID_DBLCLICK, {
        date: (dayColumn as any).dataset.date,
        resource: (dayColumn as any).dataset.resource,
        employeeId: (dayColumn as any).dataset.employeeId,
        time: position.time,
        minutes: position.minutes
      });
    });
  }

  /**
   * Get click position in day column (POC structure)
   */
  private getClickPosition(event: MouseEvent, dayColumn: HTMLElement): GridPosition {
    const rect = dayColumn.getBoundingClientRect();
    const y = event.clientY - rect.top;
    
    const gridSettings = calendarConfig.getGridSettings();
    const hourHeight = gridSettings.hourHeight;
    const minuteHeight = hourHeight / 60;
    const snapInterval = gridSettings.snapInterval;
    const dayStartHour = gridSettings.dayStartHour;
    
    // Calculate total minutes from day start
    let totalMinutes = Math.floor(y / minuteHeight);
    
    // Snap to interval
    totalMinutes = Math.round(totalMinutes / snapInterval) * snapInterval;
    
    // Add day start offset
    totalMinutes += dayStartHour * 60;
    
    return {
      minutes: totalMinutes,
      time: this.minutesToTime(totalMinutes),
      y: y
    };
  }

  /**
   * Scroll to specific hour
   */
  scrollToHour(hour: number): void {
    if (!this.grid) return;
    
    const gridSettings = calendarConfig.getGridSettings();
    const hourHeight = gridSettings.hourHeight;
    const dayStartHour = gridSettings.dayStartHour;
    const headerHeight = 80; // Header row height
    const scrollTop = headerHeight + ((hour - dayStartHour) * hourHeight);
    
    this.grid.scrollTop = scrollTop;
  }

  /**
   * Utility methods
   */
  
  private minutesToTime(totalMinutes: number): string {
    const hours = Math.floor(totalMinutes / 60);
    const minutes = totalMinutes % 60;
    const period = hours >= 12 ? 'PM' : 'AM';
    const displayHour = hours > 12 ? hours - 12 : (hours === 0 ? 12 : hours);
    
    return `${displayHour}:${minutes.toString().padStart(2, '0')} ${period}`;
  }
}