Calendar/src/managers/ScrollManager.ts

// Custom scroll management for calendar week container

import { eventBus } from '../core/EventBus';
import { calendarConfig } from '../core/CalendarConfig';
import { EventTypes } from '../constants/EventTypes';

/**
 * Manages custom scrolling functionality for the calendar
 */
export class ScrollManager {
  private rightColumn: HTMLElement | null = null;
  private scrollHandle: HTMLElement | null = null;
  private scrollableContent: HTMLElement | null = null;
  private calendarContainer: HTMLElement | null = null;
  private timeAxis: HTMLElement | null = null;
  private resizeObserver: ResizeObserver | null = null;
  private isDragging: boolean = false;
  private dragStartY: number = 0;
  private scrollStartTop: number = 0;
  private maxScrollTop: number = 0;
  private handleHeight: number = 40;

  constructor() {
    this.init();
  }

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

  private subscribeToEvents(): void {
    // Initialize scroll when grid is rendered
    eventBus.on(EventTypes.GRID_RENDERED, () => {
      console.log('ScrollManager: Received GRID_RENDERED event');
      this.setupScrolling();
    });

    // Handle mouse events for dragging
    document.addEventListener('mousemove', this.handleMouseMove.bind(this));
    document.addEventListener('mouseup', this.handleMouseUp.bind(this));

    // Handle window resize
    window.addEventListener('resize', () => {
      this.updateScrollableHeight();
    });
  }

  /**
   * Setup scrolling functionality after grid is rendered
   */
  private setupScrolling(): void {
    this.findElements();
    
    if (this.rightColumn && this.scrollableContent && this.calendarContainer) {
      this.setupResizeObserver();
      this.updateScrollableHeight();
      this.createScrollHandle();
      this.hideNativeScrollbar();
      this.setupScrollSynchronization();
      this.calculateScrollBounds();
      this.updateHandlePosition();
    }
  }

  /**
   * Find DOM elements needed for scrolling
   */
  private findElements(): void {
    this.rightColumn = document.querySelector('swp-right-column');
    this.scrollableContent = document.querySelector('swp-scrollable-content');
    this.calendarContainer = document.querySelector('swp-calendar-container');
    this.timeAxis = document.querySelector('swp-time-axis');
  }

  /**
   * Create and add scroll handle to right column
   */
  private createScrollHandle(): void {
    if (!this.rightColumn) return;

    // Remove existing handle if any
    const existingHandle = this.rightColumn.querySelector('swp-scroll-handle');
    if (existingHandle) {
      existingHandle.remove();
    }

    // Create new handle
    this.scrollHandle = document.createElement('swp-scroll-handle');
    this.scrollHandle.addEventListener('mousedown', this.handleMouseDown.bind(this));
    
    this.rightColumn.appendChild(this.scrollHandle);
  }

  /**
   * Calculate scroll bounds based on content and container heights
   */
  private calculateScrollBounds(): void {
    if (!this.scrollableContent || !this.rightColumn) return;

    const contentHeight = this.scrollableContent.scrollHeight;
    const containerHeight = this.scrollableContent.clientHeight;
    // Use container height as track height since right column should match scrollable area
    const trackHeight = containerHeight;
    
    console.log('ScrollManager Debug:');
    console.log('- contentHeight (scrollHeight):', contentHeight);
    console.log('- containerHeight (clientHeight):', containerHeight);
    console.log('- trackHeight (using containerHeight):', trackHeight);
    console.log('- scrollableContent element:', this.scrollableContent);
    
    this.maxScrollTop = Math.max(0, contentHeight - containerHeight);
    
    // Calculate proportional handle height based on content ratio
    if (contentHeight > 0 && containerHeight > 0) {
      const visibleRatio = containerHeight / contentHeight;
      this.handleHeight = Math.max(20, Math.min(trackHeight * visibleRatio, trackHeight - 10));
    } else {
      this.handleHeight = 40; // fallback
    }
    
    console.log('- maxScrollTop:', this.maxScrollTop);
    console.log('- visibleRatio:', (containerHeight / contentHeight).toFixed(3));
    console.log('- calculated handleHeight:', this.handleHeight);
    
    // Update handle height in DOM
    if (this.scrollHandle) {
      this.scrollHandle.style.height = `${this.handleHeight}px`;
    }
  }

  /**
   * Handle mouse down on scroll handle
   */
  private handleMouseDown(e: MouseEvent): void {
    e.preventDefault();
    this.isDragging = true;
    this.dragStartY = e.clientY;
    
    if (this.scrollHandle && this.scrollableContent) {
      this.scrollHandle.classList.add('dragging');
      this.scrollStartTop = this.scrollableContent.scrollTop;
    }
  }

  /**
   * Handle mouse move during drag
   */
  private handleMouseMove(e: MouseEvent): void {
    if (!this.isDragging || !this.scrollHandle || !this.scrollableContent) return;

    e.preventDefault();
    
    const deltaY = e.clientY - this.dragStartY;
    // Use container height as track height
    const trackHeight = this.scrollableContent.clientHeight - this.handleHeight;
    
    // Ensure trackHeight is positive to avoid division by zero
    if (trackHeight <= 0) return;
    
    const scrollRatio = deltaY / trackHeight;
    const newScrollTop = this.scrollStartTop + (scrollRatio * this.maxScrollTop);
    
    // Clamp scroll position
    const clampedScrollTop = Math.max(0, Math.min(newScrollTop, this.maxScrollTop));
    
    // Apply scroll to content
    this.scrollableContent.scrollTop = clampedScrollTop;
    
    // Update handle position (this will also trigger time-axis sync via scroll event)
    this.updateHandlePosition();
  }

  /**
   * Handle mouse up to end drag
   */
  private handleMouseUp(e: MouseEvent): void {
    if (!this.isDragging) return;
    
    this.isDragging = false;
    
    if (this.scrollHandle) {
      this.scrollHandle.classList.remove('dragging');
    }
  }

  /**
   * Update handle position based on current scroll
   */
  private updateHandlePosition(): void {
    if (!this.scrollHandle || !this.scrollableContent) return;

    const scrollTop = this.scrollableContent.scrollTop;
    const scrollRatio = this.maxScrollTop > 0 ? scrollTop / this.maxScrollTop : 0;
    // Use container height as track height
    const trackHeight = this.scrollableContent.clientHeight - this.handleHeight;
    const handleTop = Math.max(0, Math.min(scrollRatio * trackHeight, trackHeight));
    
    this.scrollHandle.style.top = `${handleTop}px`;
    
    // Debug logging for handle position
    if (scrollTop % 200 === 0) { // Log every 200px to avoid spam
      console.log(`ScrollManager: Handle position - scrollTop: ${scrollTop}, ratio: ${scrollRatio.toFixed(3)}, handleTop: ${handleTop.toFixed(1)}, trackHeight: ${trackHeight}`);
    }
  }

  /**
   * Scroll to specific position
   */
  scrollTo(scrollTop: number): void {
    if (!this.scrollableContent) return;
    
    const clampedScrollTop = Math.max(0, Math.min(scrollTop, this.maxScrollTop));
    this.scrollableContent.scrollTop = clampedScrollTop;
    this.updateHandlePosition();
  }

  /**
   * Scroll to specific hour
   */
  scrollToHour(hour: number): void {
    const hourHeight = calendarConfig.get('hourHeight');
    const dayStartHour = calendarConfig.get('dayStartHour');
    const scrollTop = (hour - dayStartHour) * hourHeight;
    
    this.scrollTo(scrollTop);
  }

  /**
   * Setup ResizeObserver to monitor container size changes
   */
  private setupResizeObserver(): void {
    if (!this.calendarContainer) return;

    // Clean up existing observer
    if (this.resizeObserver) {
      this.resizeObserver.disconnect();
    }

    this.resizeObserver = new ResizeObserver((entries) => {
      for (const entry of entries) {
        console.log('ScrollManager: Container resized', entry.contentRect);
        this.updateScrollableHeight();
      }
    });

    this.resizeObserver.observe(this.calendarContainer);
  }

  /**
   * Calculate and update scrollable content height dynamically
   */
  private updateScrollableHeight(): void {
    if (!this.scrollableContent || !this.calendarContainer) return;

    // Get calendar container height
    const containerRect = this.calendarContainer.getBoundingClientRect();
    
    // Find navigation height
    const navigation = document.querySelector('swp-calendar-nav');
    const navHeight = navigation ? navigation.getBoundingClientRect().height : 0;
    
    // Find week header height
    const weekHeader = document.querySelector('swp-week-header');
    const headerHeight = weekHeader ? weekHeader.getBoundingClientRect().height : 80;
    
    // Calculate available height for scrollable content
    const availableHeight = containerRect.height - headerHeight;
    
    console.log('ScrollManager: Dynamic height calculation');
    console.log('- Container height:', containerRect.height);
    console.log('- Navigation height:', navHeight);
    console.log('- Header height:', headerHeight);
    console.log('- Available height:', availableHeight);
    
    // Set the height on scrollable content
    if (availableHeight > 0) {
      this.scrollableContent.style.height = `${availableHeight}px`;
      
      // Recalculate scroll bounds after height change
      setTimeout(() => {
        this.calculateScrollBounds();
        this.updateHandlePosition();
      }, 0);
    }
  }

  /**
   * Hide native scrollbar while keeping scroll functionality
   */
  private hideNativeScrollbar(): void {
    if (!this.scrollableContent) return;

    // Apply CSS to hide scrollbar
    this.scrollableContent.style.scrollbarWidth = 'none'; // Firefox
    (this.scrollableContent.style as any).msOverflowStyle = 'none'; // IE/Edge
    
    // Add webkit scrollbar hiding
    const style = document.createElement('style');
    style.textContent = `
      swp-scrollable-content::-webkit-scrollbar {
        display: none; /* Chrome/Safari/Opera */
      }
    `;
    document.head.appendChild(style);
  }

  /**
   * Setup scroll synchronization between scrollable content and time axis
   */
  private setupScrollSynchronization(): void {
    if (!this.scrollableContent || !this.timeAxis) return;

    console.log('ScrollManager: Setting up scroll synchronization');

    // Throttle scroll events for better performance
    let scrollTimeout: number | null = null;

    this.scrollableContent.addEventListener('scroll', () => {
      if (scrollTimeout) {
        cancelAnimationFrame(scrollTimeout);
      }

      scrollTimeout = requestAnimationFrame(() => {
        this.syncTimeAxisPosition();
        this.updateHandlePosition();
      });
    });
  }

  /**
   * Synchronize time axis position with scrollable content
   */
  private syncTimeAxisPosition(): void {
    if (!this.scrollableContent || !this.timeAxis) return;

    const scrollTop = this.scrollableContent.scrollTop;
    
    // Use transform for smooth performance
    this.timeAxis.style.transform = `translateY(-${scrollTop}px)`;
    
    // Debug logging (can be removed later)
    if (scrollTop % 100 === 0) { // Only log every 100px to avoid spam
      console.log(`ScrollManager: Synced time-axis to scrollTop: ${scrollTop}px`);
    }
  }

  /**
   * Cleanup resources
   */
  destroy(): void {
    if (this.resizeObserver) {
      this.resizeObserver.disconnect();
      this.resizeObserver = null;
    }
  }
}