Calendar/src/renderers/EventRendererManager.ts

import { EventBus } from '../core/EventBus';
import { IEventBus, CalendarEvent, RenderContext } from '../types/CalendarTypes';
import { CoreEvents } from '../constants/CoreEvents';
import { calendarConfig } from '../core/CalendarConfig';
import { CalendarTypeFactory } from '../factories/CalendarTypeFactory';
import { EventManager } from '../managers/EventManager';
import { EventRendererStrategy } from './EventRenderer';
import { SwpEventElement } from '../elements/SwpEventElement';
import { DragStartEventPayload, DragMoveEventPayload, DragEndEventPayload, DragMouseEnterHeaderEventPayload, DragMouseLeaveHeaderEventPayload, DragColumnChangeEventPayload, HeaderReadyEventPayload, ResizeEndEventPayload } from '../types/EventTypes';
import { DateService } from '../utils/DateService';
import { ColumnBounds } from '../utils/ColumnDetectionUtils';
/**
 * EventRenderingService - Render events i DOM med positionering using Strategy Pattern
 * Håndterer event positioning og overlap detection
 */
export class EventRenderingService {
    private eventBus: IEventBus;
    private eventManager: EventManager;
    private strategy: EventRendererStrategy;
    private dateService: DateService;

    private dragMouseLeaveHeaderListener: ((event: Event) => void) | null = null;

    constructor(eventBus: IEventBus, eventManager: EventManager) {
        this.eventBus = eventBus;
        this.eventManager = eventManager;

        // Cache strategy at initialization
        const calendarType = calendarConfig.getCalendarMode();
        this.strategy = CalendarTypeFactory.getEventRenderer(calendarType);

        // Initialize DateService
        const timezone = calendarConfig.getTimezone?.();
        this.dateService = new DateService(timezone);

        this.setupEventListeners();
    }

    /**
     * Render events in a specific container for a given period
     */
    public renderEvents(context: RenderContext): void {
        // Clear existing events in the specific container first
        this.strategy.clearEvents(context.container);

        // Get events from EventManager for the period
        const events = this.eventManager.getEventsForPeriod(
            context.startDate,
            context.endDate
        );

        if (events.length === 0) {
            return;
        }

        // Filter events by type - only render timed events here
        const timedEvents = events.filter(event => !event.allDay);

        console.log('🎯 EventRenderingService: Event filtering', {
            totalEvents: events.length,
            timedEvents: timedEvents.length,
            allDayEvents: events.length - timedEvents.length
        });

        // Render timed events using existing strategy
        if (timedEvents.length > 0) {
            this.strategy.renderEvents(timedEvents, context.container);
        }

        // Emit EVENTS_RENDERED event for filtering system
        this.eventBus.emit(CoreEvents.EVENTS_RENDERED, {
            events: events,
            container: context.container
        });
    }

    private setupEventListeners(): void {

        this.eventBus.on(CoreEvents.GRID_RENDERED, (event: Event) => {
            this.handleGridRendered(event as CustomEvent);
        });

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


        // Handle all drag events and delegate to appropriate renderer
        this.setupDragEventListeners();

        // Listen for conversion from all-day event to time event
        this.eventBus.on('drag:convert-to-time_event', (event: Event) => {
            const { draggedElement, mousePosition, column } = (event as CustomEvent).detail;
            console.log('🔄 EventRendererManager: Received drag:convert-to-time_event', {
                draggedElement: draggedElement?.dataset.eventId,
                mousePosition,
                column
            });
            this.handleConvertToTimeEvent(draggedElement, mousePosition, column);
        });

    }


    /**
     * Handle GRID_RENDERED event - render events in the current grid
     */
    private handleGridRendered(event: CustomEvent): void {
        const { container, startDate, endDate, currentDate, isNavigation } = event.detail;

        if (!container) {
            return;
        }


        let periodStart: Date;
        let periodEnd: Date;

        if (startDate && endDate) {
            // Direct date format - use as provided
            periodStart = startDate;
            periodEnd = endDate;
        } else if (currentDate) {
            return;
        } else {
            return;
        }

        this.renderEvents({
            container: container,
            startDate: periodStart,
            endDate: periodEnd
        });
    }


    /**
     * Handle VIEW_CHANGED event - clear and re-render for new view
     */
    private handleViewChanged(event: CustomEvent): void {
        // Clear all existing events since view structure may have changed
        this.clearEvents();

        // New rendering will be triggered by subsequent GRID_RENDERED event
    }


    /**
     * Setup all drag event listeners - moved from EventRenderer for better separation of concerns
     */
    private setupDragEventListeners(): void {
        this.eventBus.on('drag:start', (event: Event) => {
            const dragStartPayload = (event as CustomEvent<DragStartEventPayload>).detail;
            
            if (dragStartPayload.draggedElement.hasAttribute('data-allday')) {
                return; 
            }

            if (dragStartPayload.draggedElement && this.strategy.handleDragStart && dragStartPayload.columnBounds) {
                this.strategy.handleDragStart(dragStartPayload);
            }
        });

        this.eventBus.on('drag:move', (event: Event) => {
            let dragEvent = (event as CustomEvent<DragMoveEventPayload>).detail;

            if (dragEvent.draggedElement.hasAttribute('data-allday')) {
                return;  
            }
            if (this.strategy.handleDragMove) {
                this.strategy.handleDragMove(dragEvent);
            }
        });

        this.eventBus.on('drag:auto-scroll', (event: Event) => {
            const { draggedElement, snappedY } = (event as CustomEvent).detail;
            if (this.strategy.handleDragAutoScroll) {
                const eventId = draggedElement.dataset.eventId || '';
                this.strategy.handleDragAutoScroll(eventId, snappedY);
            }
        });

        // Handle drag end events and delegate to appropriate renderer
        this.eventBus.on('drag:end', (event: Event) => {
            const { originalElement: draggedElement, sourceColumn, finalPosition, target } = (event as CustomEvent<DragEndEventPayload>).detail;
            const finalColumn = finalPosition.column;
            const finalY = finalPosition.snappedY;
            const eventId = draggedElement.dataset.eventId || '';

            // Only handle day column drops for EventRenderer
            if (target === 'swp-day-column' && finalColumn) {
                // Find dragged clone - use draggedElement as original
                const draggedClone = document.querySelector(`swp-day-column swp-event[data-event-id="clone-${eventId}"]`) as HTMLElement;

                if (draggedElement && draggedClone && this.strategy.handleDragEnd) {
                    this.strategy.handleDragEnd(eventId, draggedElement, draggedClone, finalColumn, finalY);
                }

                // Update event data in EventManager with new position from clone
                if (draggedClone) {
                    const swpEvent = draggedClone as SwpEventElement;
                    const newStart = swpEvent.start;
                    const newEnd = swpEvent.end;

                    this.eventManager.updateEvent(eventId, {
                        start: newStart,
                        end: newEnd
                    });

                    console.log('📝 EventRendererManager: Updated event in EventManager', {
                        eventId,
                        newStart,
                        newEnd
                    });
                }

                // Re-render affected columns for stacking/grouping (now with updated data)
                this.reRenderAffectedColumns(sourceColumn, finalColumn);
            }

            // Clean up any remaining day event clones
            const dayEventClone = document.querySelector(`swp-day-column swp-event[data-event-id="clone-${eventId}"]`);
            if (dayEventClone) {
                dayEventClone.remove();
            }
        });

        // Handle column change
        this.eventBus.on('drag:column-change', (event: Event) => {
            let columnChangeEvent = (event as CustomEvent<DragColumnChangeEventPayload>).detail;

            // Filter: Only handle events where clone is NOT an all-day event (normal timed events)
            if (columnChangeEvent.draggedClone && columnChangeEvent.draggedClone.hasAttribute('data-allday')) {
                return;
            }

            if (this.strategy.handleColumnChange) {
                this.strategy.handleColumnChange(columnChangeEvent);
            }
        });


        this.dragMouseLeaveHeaderListener = (event: Event) => {
            const { targetDate, mousePosition, originalElement, draggedClone: cloneElement } = (event as CustomEvent<DragMouseLeaveHeaderEventPayload>).detail;

            if (cloneElement)
                cloneElement.style.display = '';

            console.log('🚪 EventRendererManager: Received drag:mouseleave-header', {
                targetDate,
                originalElement: originalElement,
                cloneElement: cloneElement
            });

        };

        this.eventBus.on('drag:mouseleave-header', this.dragMouseLeaveHeaderListener);

        // Handle resize end events
        this.eventBus.on('resize:end', (event: Event) => {
            const { eventId, element } = (event as CustomEvent<ResizeEndEventPayload>).detail;

            // Update event data in EventManager with new end time from resized element
            const swpEvent = element as SwpEventElement;
            const newStart = swpEvent.start;
            const newEnd = swpEvent.end;

            this.eventManager.updateEvent(eventId, {
                start: newStart,
                end: newEnd
            });

            console.log('📝 EventRendererManager: Updated event after resize', {
                eventId,
                newStart,
                newEnd
            });

            // Find the column for this event
            const columnElement = element.closest('swp-day-column') as HTMLElement;
            if (columnElement) {
                const columnDate = columnElement.dataset.date;
                if (columnDate) {
                    // Re-render the column to recalculate stacking/grouping
                    this.renderSingleColumn(columnDate);
                }
            }
        });

        // Handle navigation period change
        this.eventBus.on(CoreEvents.NAVIGATION_COMPLETED, () => {
            // Delegate to strategy if it handles navigation
            if (this.strategy.handleNavigationCompleted) {
                this.strategy.handleNavigationCompleted();
            }
        });
    }

    /**
     * Handle conversion from all-day event to time event
     */
    private handleConvertToTimeEvent(draggedElement: HTMLElement, mousePosition: { x: number; y: number }, column: string): void {
        // Use the provided draggedElement directly
        const allDayClone = draggedElement;
        const draggedEventId = draggedElement?.dataset.eventId?.replace('clone-', '') || '';


        // Use SwpEventElement factory to create day event from all-day event
        const dayElement = SwpEventElement.fromAllDayElement(allDayClone as HTMLElement);

        // Remove the all-day clone - it's no longer needed since we're converting to day event
        allDayClone.remove();

        // Set clone ID
        dayElement.dataset.eventId = `clone-${draggedEventId}`;

        // Find target column
        const columnElement = document.querySelector(`swp-day-column[data-date="${column}"]`);
        if (!columnElement) {
            console.warn('EventRendererManager: Target column not found', { column });
            return;
        }

        // Find events layer in the column
        const eventsLayer = columnElement.querySelector('swp-events-layer');
        if (!eventsLayer) {
            console.warn('EventRendererManager: Events layer not found in column');
            return;
        }

        // Add to events layer
        eventsLayer.appendChild(dayElement);

        // Position based on mouse Y coordinate
        const columnRect = columnElement.getBoundingClientRect();
        const relativeY = Math.max(0, mousePosition.y - columnRect.top);
        dayElement.style.top = `${relativeY}px`;

        // Set drag styling
        dayElement.style.zIndex = '1000';
        dayElement.style.cursor = 'grabbing';
        dayElement.style.opacity = '';
        dayElement.style.transform = '';

        console.log('✅ EventRendererManager: Converted all-day event to time event', {
            draggedEventId,
            column,
            mousePosition,
            relativeY
        });
    }

    /**
     * Re-render affected columns after drag to recalculate stacking/grouping
     */
    private reRenderAffectedColumns(sourceColumn: ColumnBounds | null, targetColumn: ColumnBounds | null): void {
        const columnsToRender = new Set<string>();

        // Add source column if exists
        if (sourceColumn) {
            columnsToRender.add(sourceColumn.date);
        }

        // Add target column if exists and different from source
        if (targetColumn && targetColumn.date !== sourceColumn?.date) {
            columnsToRender.add(targetColumn.date);
        }

        // Re-render each affected column
        columnsToRender.forEach(columnDate => {
            this.renderSingleColumn(columnDate);
        });
    }

    /**
     * Render events for a single column by re-rendering entire container
     */
    private renderSingleColumn(columnDate: string): void {
        // Find the column element
        const columnElement = document.querySelector(`swp-day-column[data-date="${columnDate}"]`) as HTMLElement;
        if (!columnElement) {
            console.warn('EventRendererManager: Column not found', { columnDate });
            return;
        }

        // Find the parent container (swp-day-columns)
        const container = columnElement.closest('swp-day-columns') as HTMLElement;
        if (!container) {
            console.warn('EventRendererManager: Container not found');
            return;
        }

        // Get all columns in container to determine date range
        const allColumns = Array.from(container.querySelectorAll<HTMLElement>('swp-day-column'));
        if (allColumns.length === 0) return;

        // Get date range from first and last column
        const firstColumnDate = allColumns[0].dataset.date;
        const lastColumnDate = allColumns[allColumns.length - 1].dataset.date;

        if (!firstColumnDate || !lastColumnDate) return;

        const startDate = this.dateService.parseISO(`${firstColumnDate}T00:00:00`);
        const endDate = this.dateService.parseISO(`${lastColumnDate}T23:59:59.999`);

        // Re-render entire container (this will recalculate stacking for all columns)
        this.renderEvents({
            container,
            startDate,
            endDate
        });

        console.log('🔄 EventRendererManager: Re-rendered container for column', {
            columnDate,
            startDate: firstColumnDate,
            endDate: lastColumnDate
        });
    }

    private clearEvents(container?: HTMLElement): void {
        this.strategy.clearEvents(container);
    }

    public refresh(container?: HTMLElement): void {
        this.clearEvents(container);
    }
}