Calendar/src/managers/AllDayManager.ts

// All-day row height management and animations

import { eventBus } from '../core/EventBus';
import { ALL_DAY_CONSTANTS } from '../configurations/CalendarConfig';
import { AllDayEventRenderer } from '../renderers/AllDayEventRenderer';
import { AllDayLayoutEngine, IEventLayout } from '../utils/AllDayLayoutEngine';
import { IColumnBounds, ColumnDetectionUtils } from '../utils/ColumnDetectionUtils';
import { ICalendarEvent } from '../types/CalendarTypes';
import { SwpAllDayEventElement } from '../elements/SwpEventElement';
import {
  IDragMouseEnterHeaderEventPayload,
  IDragMouseEnterColumnEventPayload,
  IDragStartEventPayload,
  IDragMoveEventPayload,
  IDragEndEventPayload,
  IDragColumnChangeEventPayload,
  IHeaderReadyEventPayload
} from '../types/EventTypes';
import { IDragOffset, IMousePosition } from '../types/DragDropTypes';
import { CoreEvents } from '../constants/CoreEvents';
import { EventManager } from './EventManager';
import { differenceInCalendarDays } from 'date-fns';
import { DateService } from '../utils/DateService';

/**
 * AllDayManager - Handles all-day row height animations and management
 * Uses AllDayLayoutEngine for all overlap detection and layout calculation
 */
export class AllDayManager {
  private allDayEventRenderer: AllDayEventRenderer;
  private eventManager: EventManager;
  private dateService: DateService;

  private layoutEngine: AllDayLayoutEngine | null = null;

  // State tracking for layout calculation
  private currentAllDayEvents: ICalendarEvent[] = [];
  private currentWeekDates: IColumnBounds[] = [];

  // Expand/collapse state
  private isExpanded: boolean = false;
  private actualRowCount: number = 0;


  constructor(
    eventManager: EventManager,
    allDayEventRenderer: AllDayEventRenderer,
    dateService: DateService
  ) {
    this.eventManager = eventManager;
    this.allDayEventRenderer = allDayEventRenderer;
    this.dateService = dateService;

    // Sync CSS variable with TypeScript constant to ensure consistency
    document.documentElement.style.setProperty('--single-row-height', `${ALL_DAY_CONSTANTS.EVENT_HEIGHT}px`);
    this.setupEventListeners();
  }

  /**
   * Setup event listeners for drag conversions
   */
  private setupEventListeners(): void {
    eventBus.on('drag:mouseenter-header', (event) => {
      const payload = (event as CustomEvent<IDragMouseEnterHeaderEventPayload>).detail;

      if (payload.draggedClone.hasAttribute('data-allday'))
        return;

      console.log('🔄 AllDayManager: Received drag:mouseenter-header', {
        targetDate: payload.targetColumn,
        originalElementId: payload.originalElement?.dataset?.eventId,
        originalElementTag: payload.originalElement?.tagName
      });

      this.handleConvertToAllDay(payload);
    });

    eventBus.on('drag:mouseleave-header', (event) => {
      const { originalElement, cloneElement } = (event as CustomEvent).detail;

      console.log('🚪 AllDayManager: Received drag:mouseleave-header', {
        originalElementId: originalElement?.dataset?.eventId
      });

    });

    // Listen for drag operations on all-day events
    eventBus.on('drag:start', (event) => {
      let payload: IDragStartEventPayload = (event as CustomEvent<IDragStartEventPayload>).detail;

      if (!payload.draggedClone?.hasAttribute('data-allday')) {
        return;
      }

      this.allDayEventRenderer.handleDragStart(payload);
    });

    eventBus.on('drag:column-change', (event) => {
      let payload: IDragColumnChangeEventPayload = (event as CustomEvent<IDragColumnChangeEventPayload>).detail;

      if (!payload.draggedClone?.hasAttribute('data-allday')) {
        return;
      }

      this.handleColumnChange(payload);
    });

    eventBus.on('drag:end', (event) => {
      let dragEndPayload: IDragEndEventPayload = (event as CustomEvent<IDragEndEventPayload>).detail;

      console.log('🎯 AllDayManager: drag:end received', {
        target: dragEndPayload.target,
        originalElementTag: dragEndPayload.originalElement?.tagName,
        hasAllDayAttribute: dragEndPayload.originalElement?.hasAttribute('data-allday'),
        eventId: dragEndPayload.originalElement?.dataset.eventId
      });

      // Handle all-day → all-day drops (within header)
      if (dragEndPayload.target === 'swp-day-header') {
        console.log('✅ AllDayManager: Handling all-day → all-day drop');
        this.handleDragEnd(dragEndPayload);
        return;
      }

      // Handle all-day → timed conversion (dropped in column)
      if (dragEndPayload.target === 'swp-day-column' && dragEndPayload.originalElement?.hasAttribute('data-allday')) {
        const eventId = dragEndPayload.originalElement.dataset.eventId;
        
        console.log('🔄 AllDayManager: All-day → timed conversion', { eventId });

        // Mark for removal (sets data-removing attribute)
        this.fadeOutAndRemove(dragEndPayload.originalElement);
        
        // Recalculate layout WITHOUT the removed event to compress gaps
        const remainingEvents = this.currentAllDayEvents.filter(e => e.id !== eventId);
        const newLayouts = this.calculateAllDayEventsLayout(remainingEvents, this.currentWeekDates);
        
        // Re-render all-day events with compressed layout
        this.allDayEventRenderer.renderAllDayEventsForPeriod(newLayouts);
        
        // NOW animate height with compressed layout
        this.checkAndAnimateAllDayHeight();
      }
    });

    // Listen for drag cancellation to recalculate height
    eventBus.on('drag:cancelled', (event) => {
      const { draggedElement, reason } = (event as CustomEvent).detail;

      console.log('🚫 AllDayManager: Drag cancelled', {
        eventId: draggedElement?.dataset?.eventId,
        reason
      });

    });

    // Listen for header ready - when dates are populated with period data
    eventBus.on('header:ready', async (event: Event) => {
      let headerReadyEventPayload = (event as CustomEvent<IHeaderReadyEventPayload>).detail;

      let startDate = new Date(headerReadyEventPayload.headerElements.at(0)!.date);
      let endDate = new Date(headerReadyEventPayload.headerElements.at(-1)!.date);

      let events: ICalendarEvent[] = await this.eventManager.getEventsForPeriod(startDate, endDate);
      // Filter for all-day events
      const allDayEvents = events.filter(event => event.allDay);

      const layouts = this.calculateAllDayEventsLayout(allDayEvents, headerReadyEventPayload.headerElements);

      this.allDayEventRenderer.renderAllDayEventsForPeriod(layouts);
      this.checkAndAnimateAllDayHeight();
    });

    eventBus.on(CoreEvents.VIEW_CHANGED, (event: Event) => {
      this.allDayEventRenderer.handleViewChanged(event as CustomEvent);
    });
  }

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

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

  private getHeaderSpacer(): HTMLElement | null {
    return document.querySelector('swp-header-spacer');
  }

  /**
   * Read current max row from DOM elements
   * Excludes events marked as removing (data-removing attribute)
   */
  private getMaxRowFromDOM(): number {
    const container = this.getAllDayContainer();
    if (!container) return 0;

    let maxRow = 0;
    const allDayEvents = container.querySelectorAll('swp-allday-event:not(.max-event-indicator):not([data-removing])');
    
    allDayEvents.forEach((element: Element) => {
      const htmlElement = element as HTMLElement;
      const row = parseInt(htmlElement.style.gridRow) || 1;
      maxRow = Math.max(maxRow, row);
    });

    return maxRow;
  }

  /**
   * Get current gridArea for an event from DOM
   */
  private getGridAreaFromDOM(eventId: string): string | null {
    const container = this.getAllDayContainer();
    if (!container) return null;

    const element = container.querySelector(`[data-event-id="${eventId}"]`) as HTMLElement;
    return element?.style.gridArea || null;
  }

  /**
   * Count events in a specific column by reading DOM
   */
  private countEventsInColumnFromDOM(columnIndex: number): number {
    const container = this.getAllDayContainer();
    if (!container) return 0;

    let count = 0;
    const allDayEvents = container.querySelectorAll('swp-allday-event:not(.max-event-indicator)');
    
    allDayEvents.forEach((element: Element) => {
      const htmlElement = element as HTMLElement;
      const gridColumn = htmlElement.style.gridColumn;
      
      // Parse "1 / 3" format
      const match = gridColumn.match(/(\d+)\s*\/\s*(\d+)/);
      if (match) {
        const startCol = parseInt(match[1]);
        const endCol = parseInt(match[2]) - 1; // End is exclusive in CSS
        
        if (startCol <= columnIndex && endCol >= columnIndex) {
          count++;
        }
      }
    });

    return count;
  }

  /**
   * Calculate all-day height based on number of rows
   */
  private calculateAllDayHeight(targetRows: number): {
    targetHeight: number;
    currentHeight: number;
    heightDifference: number;
  } {
    const root = document.documentElement;
    const targetHeight = targetRows * ALL_DAY_CONSTANTS.SINGLE_ROW_HEIGHT;
    // Read CSS variable directly from style property or default to 0
    const currentHeightStr = root.style.getPropertyValue('--all-day-row-height') || '0px';
    const currentHeight = parseInt(currentHeightStr) || 0;
    const heightDifference = targetHeight - currentHeight;

    return { targetHeight, currentHeight, heightDifference };
  }

  /**
   * Check current all-day events and animate to correct height
   * Reads max row directly from DOM elements
   */
  public checkAndAnimateAllDayHeight(): void {
    // Read max row directly from DOM
    const maxRows = this.getMaxRowFromDOM();

    console.log('📊 AllDayManager: Height calculation', {
      maxRows,
      isExpanded: this.isExpanded
    });

    // Store actual row count
    this.actualRowCount = maxRows;

    // Determine what to display
    let displayRows = maxRows;

    if (maxRows > ALL_DAY_CONSTANTS.MAX_COLLAPSED_ROWS) {
      // Show chevron button
      this.updateChevronButton(true);

      // Show 4 rows when collapsed (3 events + indicators)
      if (!this.isExpanded) {

        displayRows = ALL_DAY_CONSTANTS.MAX_COLLAPSED_ROWS;
        this.updateOverflowIndicators();

      } else {

        this.clearOverflowIndicators();

      }
    } else {

      // Hide chevron - not needed
      this.updateChevronButton(false);
      this.clearOverflowIndicators();
    }

    console.log('🎬 AllDayManager: Will animate to', {
      displayRows,
      maxRows,
      willAnimate: displayRows !== this.actualRowCount
    });

    console.log(`🎯 AllDayManager: Animating to ${displayRows} rows`);

    // Animate to required rows (0 = collapse, >0 = expand)
    this.animateToRows(displayRows);
  }

  /**
   * Animate all-day container to specific number of rows
   */
  public animateToRows(targetRows: number): void {
    const { targetHeight, currentHeight, heightDifference } = this.calculateAllDayHeight(targetRows);

    if (targetHeight === currentHeight) return; // No animation needed

    console.log(`🎬 All-day height animation: ${currentHeight}px → ${targetHeight}px (${Math.ceil(currentHeight / ALL_DAY_CONSTANTS.SINGLE_ROW_HEIGHT)} → ${targetRows} rows)`);

    // Get cached elements
    const calendarHeader = this.getCalendarHeader();
    const headerSpacer = this.getHeaderSpacer();
    const allDayContainer = this.getAllDayContainer();

    if (!calendarHeader || !allDayContainer) return;

    // Get current parent height for animation
    const currentParentHeight = parseFloat(getComputedStyle(calendarHeader).height);
    const targetParentHeight = currentParentHeight + heightDifference;

    const animations = [
      calendarHeader.animate([
        { height: `${currentParentHeight}px` },
        { height: `${targetParentHeight}px` }
      ], {
        duration: 150,
        easing: 'ease-out',
        fill: 'forwards'
      })
    ];

    // Add spacer animation if spacer exists, but don't use fill: 'forwards'
    if (headerSpacer) {
      const root = document.documentElement;
      const headerHeightStr = root.style.getPropertyValue('--header-height');
      const headerHeight = parseInt(headerHeightStr);
      const currentSpacerHeight = headerHeight + currentHeight;
      const targetSpacerHeight = headerHeight + targetHeight;

      animations.push(
        headerSpacer.animate([
          { height: `${currentSpacerHeight}px` },
          { height: `${targetSpacerHeight}px` }
        ], {
          duration: 150,
          easing: 'ease-out'
          // No fill: 'forwards' - let CSS calc() take over after animation
        })
      );
    }

    // Update CSS variable after animation
    Promise.all(animations.map(anim => anim.finished)).then(() => {
      const root = document.documentElement;
      root.style.setProperty('--all-day-row-height', `${targetHeight}px`);
      eventBus.emit('header:height-changed');
    });
  }


  /**
   * Calculate layout for ALL all-day events using AllDayLayoutEngine
   * This is the correct method that processes all events together for proper overlap detection
   */
  private calculateAllDayEventsLayout(events: ICalendarEvent[], dayHeaders: IColumnBounds[]): IEventLayout[] {

    // Store current state
    this.currentAllDayEvents = events;
    this.currentWeekDates = dayHeaders;

    // Initialize layout engine with provided week dates
    let layoutEngine = new AllDayLayoutEngine(dayHeaders.map(column => column.date));

    // Calculate layout for all events together - AllDayLayoutEngine handles CalendarEvents directly
    return layoutEngine.calculateLayout(events);

  }

  private handleConvertToAllDay(payload: IDragMouseEnterHeaderEventPayload): void {

    let allDayContainer = this.getAllDayContainer();
    if (!allDayContainer) return;

    // Create SwpAllDayEventElement from ICalendarEvent
    const allDayElement = SwpAllDayEventElement.fromCalendarEvent(payload.calendarEvent);

    // Apply grid positioning
    allDayElement.style.gridRow = '1';
    allDayElement.style.gridColumn = payload.targetColumn.index.toString();

    // Remove old swp-event clone
    payload.draggedClone.remove();

    // Call delegate to update DragDropManager's draggedClone reference
    payload.replaceClone(allDayElement);

    // Append to container
    allDayContainer.appendChild(allDayElement);

    ColumnDetectionUtils.updateColumnBoundsCache();

    // Recalculate height after adding all-day event
    this.checkAndAnimateAllDayHeight();

  }


  /**
   * Handle drag move for all-day events - SPECIALIZED FOR ALL-DAY CONTAINER
   */
  private handleColumnChange(dragColumnChangeEventPayload: IDragColumnChangeEventPayload): void {

    let allDayContainer = this.getAllDayContainer();
    if (!allDayContainer) return;

    let targetColumn = ColumnDetectionUtils.getColumnBounds(dragColumnChangeEventPayload.mousePosition);

    if (targetColumn == null)
      return;

    if (!dragColumnChangeEventPayload.draggedClone)
      return;

    // Calculate event span from original grid positioning
    const computedStyle = window.getComputedStyle(dragColumnChangeEventPayload.draggedClone);
    const gridColumnStart = parseInt(computedStyle.gridColumnStart) || targetColumn.index;
    const gridColumnEnd = parseInt(computedStyle.gridColumnEnd) || targetColumn.index + 1;
    const span = gridColumnEnd - gridColumnStart;

    // Update clone position maintaining the span
    const newStartColumn = targetColumn.index;
    const newEndColumn = newStartColumn + span;
    dragColumnChangeEventPayload.draggedClone.style.gridColumn = `${newStartColumn} / ${newEndColumn}`;

  }
  private fadeOutAndRemove(element: HTMLElement): void {
    console.log('🗑️ AllDayManager: About to remove all-day event', {
      eventId: element.dataset.eventId,
      element: element.tagName
    });
    
    // Mark element as removing so it's excluded from height calculations
    element.setAttribute('data-removing', 'true');
    
    element.style.transition = 'opacity 0.3s ease-out';
    element.style.opacity = '0';

    setTimeout(() => {
      element.remove();
      console.log('✅ AllDayManager: All-day event removed from DOM');
    }, 300);
  }


  private async handleDragEnd(dragEndEvent: IDragEndEventPayload): Promise<void> {

    const getEventDurationDays = (start: string | undefined, end: string | undefined): number => {

      if (!start || !end)
        throw new Error('Undefined start or end - date');

      const startDate = new Date(start);
      const endDate = new Date(end);

      if (isNaN(startDate.getTime()) || isNaN(endDate.getTime())) {
        throw new Error('Ugyldig start eller slut-dato i dataset');
      }

      // Use differenceInCalendarDays for proper calendar day calculation
      // This correctly handles timezone differences and DST changes
      return differenceInCalendarDays(endDate, startDate);
    };

    if (dragEndEvent.draggedClone == null)
      return;

    // 2. Normalize clone ID
    dragEndEvent.draggedClone.dataset.eventId = dragEndEvent.draggedClone.dataset.eventId?.replace('clone-', '');
    dragEndEvent.draggedClone.style.pointerEvents = ''; // Re-enable pointer events
    dragEndEvent.originalElement.dataset.eventId += '_';

    let eventId = dragEndEvent.draggedClone.dataset.eventId;
    let eventDate = dragEndEvent.finalPosition.column?.date;
    let eventType = dragEndEvent.draggedClone.dataset.type;

    if (eventDate == null || eventId == null || eventType == null)
      return;

    const durationDays = getEventDurationDays(dragEndEvent.draggedClone.dataset.start, dragEndEvent.draggedClone.dataset.end);

    // Get original dates to preserve time
    const originalStartDate = new Date(dragEndEvent.draggedClone.dataset.start!);
    const originalEndDate = new Date(dragEndEvent.draggedClone.dataset.end!);

    // Create new start date with the new day but preserve original time
    const newStartDate = new Date(eventDate);
    newStartDate.setHours(originalStartDate.getHours(), originalStartDate.getMinutes(), originalStartDate.getSeconds(), originalStartDate.getMilliseconds());

    // Create new end date with the new day + duration, preserving original end time
    const newEndDate = new Date(eventDate);
    newEndDate.setDate(newEndDate.getDate() + durationDays);
    newEndDate.setHours(originalEndDate.getHours(), originalEndDate.getMinutes(), originalEndDate.getSeconds(), originalEndDate.getMilliseconds());

    // Update data attributes with new dates (convert to UTC)
    dragEndEvent.draggedClone.dataset.start = this.dateService.toUTC(newStartDate);
    dragEndEvent.draggedClone.dataset.end = this.dateService.toUTC(newEndDate);

    const droppedEvent: ICalendarEvent = {
      id: eventId,
      title: dragEndEvent.draggedClone.dataset.title || '',
      start: newStartDate,
      end: newEndDate,
      type: eventType,
      allDay: true,
      syncStatus: 'synced'
    };

    // Use current events + dropped event for calculation
    const tempEvents = [
      ...this.currentAllDayEvents.filter(event => event.id !== eventId),
      droppedEvent
    ];

    // 4. Calculate new layouts for ALL events
    const newLayouts = this.calculateAllDayEventsLayout(tempEvents, this.currentWeekDates);

    // 5. Apply differential updates - compare with DOM instead of currentLayouts
    let container = this.getAllDayContainer();
    newLayouts.forEach((layout) => {
      // Get current gridArea from DOM
      const currentGridArea = this.getGridAreaFromDOM(layout.calenderEvent.id);

      if (currentGridArea !== layout.gridArea) {
        let element = container?.querySelector(`[data-event-id="${layout.calenderEvent.id}"]`) as HTMLElement;
        if (element) {

          element.classList.add('transitioning');
          element.style.gridArea = layout.gridArea;
          element.style.gridRow = layout.row.toString();
          element.style.gridColumn = `${layout.startColumn} / ${layout.endColumn + 1}`;

          element.classList.remove('max-event-overflow-hide');
          element.classList.remove('max-event-overflow-show');

          if (layout.row > ALL_DAY_CONSTANTS.MAX_COLLAPSED_ROWS)
            if (!this.isExpanded)
              element.classList.add('max-event-overflow-hide');
            else
              element.classList.add('max-event-overflow-show');

          // Remove transition class after animation
          setTimeout(() => element.classList.remove('transitioning'), 200);
        }
      }
    });

    // 6. Clean up drag styles from the dropped clone
    dragEndEvent.draggedClone.classList.remove('dragging');
    dragEndEvent.draggedClone.style.zIndex = '';
    dragEndEvent.draggedClone.style.cursor = '';
    dragEndEvent.draggedClone.style.opacity = '';

    // 7. Apply highlight class to show the dropped event with highlight color
    dragEndEvent.draggedClone.classList.add('highlight');

    // 8. CRITICAL FIX: Update event in repository to mark as allDay=true
    // This ensures EventManager's repository has correct state
    // Without this, the event will reappear in grid on re-render
    await this.eventManager.updateEvent(eventId, {
      start: newStartDate,
      end: newEndDate,
      allDay: true
    });

    this.fadeOutAndRemove(dragEndEvent.originalElement);

    this.checkAndAnimateAllDayHeight();

  }

  /**
   * Update chevron button visibility and state
   */
  private updateChevronButton(show: boolean): void {
    const headerSpacer = this.getHeaderSpacer();
    if (!headerSpacer) return;

    let chevron = headerSpacer.querySelector('.allday-chevron') as HTMLElement;

    if (show && !chevron) {

      chevron = document.createElement('button');
      chevron.className = 'allday-chevron collapsed';
      chevron.innerHTML = `
        <svg width="12" height="8" viewBox="0 0 12 8">
          <path d="M1 1.5L6 6.5L11 1.5" stroke="currentColor" stroke-width="2" fill="none"/>
        </svg>
      `;
      chevron.onclick = () => this.toggleExpanded();
      headerSpacer.appendChild(chevron);

    } else if (!show && chevron) {

      chevron.remove();

    } else if (chevron) {

      chevron.classList.toggle('collapsed', !this.isExpanded);
      chevron.classList.toggle('expanded', this.isExpanded);

    }
  }

  /**
   * Toggle between expanded and collapsed state
   */
  private toggleExpanded(): void {
    this.isExpanded = !this.isExpanded;
    this.checkAndAnimateAllDayHeight();

    const elements = document.querySelectorAll('swp-allday-container swp-allday-event.max-event-overflow-hide, swp-allday-container swp-allday-event.max-event-overflow-show');

    elements.forEach((element) => {
      if (this.isExpanded) {
        // ALTID vis når expanded=true
        element.classList.remove('max-event-overflow-hide');
        element.classList.add('max-event-overflow-show');
      } else {
        // ALTID skjul når expanded=false
        element.classList.remove('max-event-overflow-show');
        element.classList.add('max-event-overflow-hide');
      }
    });
  }
  /**
   * Count number of events in a specific column using IColumnBounds
   * Reads directly from DOM elements
   */
  private countEventsInColumn(columnBounds: IColumnBounds): number {
    return this.countEventsInColumnFromDOM(columnBounds.index);
  }

  /**
   * Update overflow indicators for collapsed state
   */
  private updateOverflowIndicators(): void {
    const container = this.getAllDayContainer();
    if (!container) return;

    // Create overflow indicators for each column that needs them
    let columns = ColumnDetectionUtils.getColumns();

    columns.forEach((columnBounds) => {
      let totalEventsInColumn = this.countEventsInColumn(columnBounds);
      let overflowCount = totalEventsInColumn - ALL_DAY_CONSTANTS.MAX_COLLAPSED_ROWS

      if (overflowCount > 0) {
        // Check if indicator already exists in this column
        let existingIndicator = container.querySelector(`.max-event-indicator[data-column="${columnBounds.index}"]`) as HTMLElement;

        if (existingIndicator) {
          // Update existing indicator
          existingIndicator.innerHTML = `<span>+${overflowCount + 1} more</span>`;
        } else {
          // Create new overflow indicator element
          let overflowElement = document.createElement('swp-allday-event');
          overflowElement.className = 'max-event-indicator';
          overflowElement.setAttribute('data-column', columnBounds.index.toString());
          overflowElement.style.gridRow = ALL_DAY_CONSTANTS.MAX_COLLAPSED_ROWS.toString();
          overflowElement.style.gridColumn = columnBounds.index.toString();
          overflowElement.innerHTML = `<span>+${overflowCount + 1} more</span>`;
          overflowElement.onclick = (e) => {
            e.stopPropagation();
            this.toggleExpanded();
          };

          container.appendChild(overflowElement);
        }
      }
    });
  }

  /**
   * Clear overflow indicators and restore normal state
   */
  private clearOverflowIndicators(): void {
    const container = this.getAllDayContainer();
    if (!container) return;

    // Remove all overflow indicator elements
    container.querySelectorAll('.max-event-indicator').forEach((element) => {
      element.remove();
    });


  }

}