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 { DateUtils } from '../utils/DateUtils';
import { ResourceCalendarData } from '../types/CalendarTypes';
import { CalendarTypeFactory } from '../factories/CalendarTypeFactory';
import { HeaderRenderContext } from '../renderers/HeaderRenderer';
import { ColumnRenderContext } from '../renderers/ColumnRenderer';

/**
 * 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
  
  constructor() {
    this.init();
  }

  private init(): void {
    // Initialize the factory
    CalendarTypeFactory.initialize();
    
    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);
      // Render initial grid
      this.render();
    }
  }

  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');
  }

  private subscribeToEvents(): void {
    // 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 resource data loaded
    eventBus.on(EventTypes.RESOURCE_DATA_LOADED, (e: Event) => {
      const detail = (e as CustomEvent).detail;
      this.resourceData = detail.resourceData;
      console.log(`GridManager: Received resource data for ${this.resourceData!.resources.length} resources`);
      
      // Update grid styles with new column count immediately
      this.updateGridStyles();
      
      // Re-render if grid is already rendered
      if (this.grid && this.grid.children.length > 0) {
        this.render();
      }
    });

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

  /**
   * Render the complete grid structure
   */
  render(): void {
    if (!this.grid) return;

    this.updateGridStyles();
    this.renderGrid();
    
    // Emit grid rendered event
    console.log('GridManager: Emitting GRID_RENDERED event');
    eventBus.emit(EventTypes.GRID_RENDERED);
    console.log('GridManager: GRID_RENDERED event emitted');
  }

  /**
   * Render the complete grid using POC structure
   */
  private renderGrid(): void {
    console.log('GridManager: renderGrid called', {
      hasGrid: !!this.grid,
      hasCurrentWeek: !!this.currentWeek,
      currentWeek: this.currentWeek
    });
    
    if (!this.grid || !this.currentWeek) {
      console.warn('GridManager: Cannot render - missing grid or currentWeek');
      return;
    }

    // Only clear and rebuild if grid is empty (first render)
    if (this.grid.children.length === 0) {
      console.log('GridManager: First render - creating grid structure');
      // Create POC structure: header-spacer + time-axis + week-container + right-column + bottom spacers
      this.createHeaderSpacer();
      this.createTimeAxis();
      this.createWeekContainer();
    } else {
      console.log('GridManager: Re-render - updating existing structure');
      // Just update the calendar header for all-day events
      this.updateCalendarHeader();
    }
    
    console.log('GridManager: Grid rendered successfully with POC structure');
  }

  /**
   * Create header spacer to align time axis with week content
   */
  private createHeaderSpacer(): void {
    if (!this.grid) return;

    const headerSpacer = document.createElement('swp-header-spacer');
    this.grid.appendChild(headerSpacer);
  }

  /**
   * Create time axis (positioned beside week container) like in POC
   */
  private createTimeAxis(): void {
    if (!this.grid) return;

    const timeAxis = document.createElement('swp-time-axis');
    const timeAxisContent = document.createElement('swp-time-axis-content');
    const startHour = calendarConfig.get('dayStartHour');
    const endHour = calendarConfig.get('dayEndHour');
    console.log('GridManager: Creating time axis - startHour:', startHour, 'endHour:', endHour);

    for (let hour = startHour; hour < endHour; hour++) {
      const marker = document.createElement('swp-hour-marker');
      const period = hour >= 12 ? 'PM' : 'AM';
      const displayHour = hour > 12 ? hour - 12 : (hour === 0 ? 12 : hour);
      marker.textContent = `${displayHour} ${period}`;
      timeAxisContent.appendChild(marker);
    }

    timeAxis.appendChild(timeAxisContent);
    this.grid.appendChild(timeAxis);
  }

  /**
   * Create week container with header and scrollable content using Strategy Pattern
   */
  private createWeekContainer(): void {
    if (!this.grid || !this.currentWeek) return;

    const weekContainer = document.createElement('swp-grid-container');
    
    // Create calendar header using Strategy Pattern
    const calendarHeader = document.createElement('swp-calendar-header');
    this.renderCalendarHeader(calendarHeader);
    weekContainer.appendChild(calendarHeader);
    
    // Create scrollable content
    const scrollableContent = document.createElement('swp-scrollable-content');
    const timeGrid = document.createElement('swp-time-grid');
    
    // Add grid lines
    const gridLines = document.createElement('swp-grid-lines');
    timeGrid.appendChild(gridLines);
    
    // Create column container using Strategy Pattern
    const columnContainer = document.createElement('swp-day-columns');
    this.renderColumnContainer(columnContainer);
    timeGrid.appendChild(columnContainer);
    
    scrollableContent.appendChild(timeGrid);
    weekContainer.appendChild(scrollableContent);
    
    this.grid.appendChild(weekContainer);
  }

  /**
   * Render calendar header using Strategy Pattern
   */
  private renderCalendarHeader(calendarHeader: HTMLElement): void {
    if (!this.currentWeek) return;

    const calendarType = calendarConfig.getCalendarType();
    const headerRenderer = CalendarTypeFactory.getHeaderRenderer(calendarType);
    
    const context: HeaderRenderContext = {
      currentWeek: this.currentWeek,
      config: calendarConfig,
      allDayEvents: this.allDayEvents,
      resourceData: this.resourceData
    };

    headerRenderer.render(calendarHeader, context);

    // Update spacer heights based on all-day events
    this.updateSpacerHeights();
  }

  /**
   * Render column container using Strategy Pattern
   */
  private renderColumnContainer(columnContainer: HTMLElement): void {
    if (!this.currentWeek) return;

    console.log('GridManager: renderColumnContainer called');
    const calendarType = calendarConfig.getCalendarType();
    const columnRenderer = CalendarTypeFactory.getColumnRenderer(calendarType);
    
    const context: ColumnRenderContext = {
      currentWeek: this.currentWeek,
      config: calendarConfig,
      resourceData: this.resourceData
    };

    columnRenderer.render(columnContainer, context);
  }

  /**
   * Update only the calendar header (for all-day events) without rebuilding entire grid
   */
  private updateCalendarHeader(): void {
    if (!this.grid || !this.currentWeek) return;

    const calendarHeader = this.grid.querySelector('swp-calendar-header');
    if (!calendarHeader) return;

    // Clear existing content
    calendarHeader.innerHTML = '';

    // Re-render headers using Strategy Pattern
    this.renderCalendarHeader(calendarHeader as HTMLElement);
  }

  /**
   * 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.updateCalendarHeader();
    }
  }

  /**
   * Update spacer heights based on all-day events presence
   */
  private updateSpacerHeights(): void {
    const allDayEventCount = 1;
    const eventHeight = 26; // Height per all-day event in pixels
    const padding = 0; // Top/bottom padding
    const allDayHeight = allDayEventCount > 0 ? (allDayEventCount * eventHeight) + padding : 0;
    
    // Set CSS variable for dynamic spacer height
    document.documentElement.style.setProperty('--all-day-row-height', `${allDayHeight}px`);
    
    console.log('GridManager: Updated --all-day-row-height to', `${allDayHeight}px`, 'for', allDayEventCount, 'events');
  }

  /**
   * Update grid CSS variables
   */
  private updateGridStyles(): void {
    const root = document.documentElement;
    const config = calendarConfig.getAll();
    const calendar = document.querySelector('swp-calendar') as HTMLElement;
    const calendarType = calendarConfig.getCalendarType();
    
    // Set CSS variables
    root.style.setProperty('--hour-height', `${config.hourHeight}px`);
    root.style.setProperty('--minute-height', `${config.hourHeight / 60}px`);
    root.style.setProperty('--snap-interval', config.snapInterval.toString());
    root.style.setProperty('--day-start-hour', config.dayStartHour.toString());
    root.style.setProperty('--day-end-hour', config.dayEndHour.toString());
    root.style.setProperty('--work-start-hour', config.workStartHour.toString());
    root.style.setProperty('--work-end-hour', config.workEndHour.toString());
    
    // Set number of columns based on calendar type
    let columnCount = 7; // Default for date mode
    if (calendarType === 'resource' && this.resourceData) {
      columnCount = this.resourceData.resources.length;
    } else if (calendarType === 'date') {
      columnCount = config.weekDays;
    }
    root.style.setProperty('--grid-columns', columnCount.toString());
    
    // Set day column min width based on fitToWidth setting
    if (config.fitToWidth) {
      root.style.setProperty('--day-column-min-width', '50px'); // Small min-width allows columns to fit available space
    } else {
      root.style.setProperty('--day-column-min-width', '250px'); // Default min-width for horizontal scroll mode
    }
    
    // Set fitToWidth data attribute for CSS targeting
    if (calendar) {
      calendar.setAttribute('data-fit-to-width', config.fitToWidth.toString());
    }
    
    console.log('GridManager: Updated grid styles with', columnCount, 'columns for', calendarType, 'calendar');
  }

  /**
   * 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 hourHeight = calendarConfig.get('hourHeight');
    const minuteHeight = hourHeight / 60;
    const snapInterval = calendarConfig.get('snapInterval');
    const dayStartHour = calendarConfig.get('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 hourHeight = calendarConfig.get('hourHeight');
    const dayStartHour = calendarConfig.get('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}`;
  }
}