botui/ui/suite/calendar/calendar.js

/* Calendar Module JavaScript */

(function() {
    'use strict';

    // State
    let currentDate = new Date();
    let currentView = 'week';
    let selectedDate = new Date();
    let events = [];

    // DOM Elements
    let miniCalDays, miniCalTitle, currentPeriod;
    let dayView, weekView, monthView;
    let eventModal, eventPopup;

    /**
     * Initialize calendar module
     */
    function init() {
        // Get DOM elements
        miniCalDays = document.getElementById('mini-cal-days');
        miniCalTitle = document.getElementById('mini-cal-title');
        currentPeriod = document.getElementById('current-period');
        dayView = document.getElementById('day-view');
        weekView = document.getElementById('week-view');
        monthView = document.getElementById('month-view');
        eventModal = document.getElementById('event-modal');
        eventPopup = document.getElementById('event-popup');

        if (!miniCalDays) return; // Not on calendar page

        generateTimeSlots();
        renderMiniCalendar();
        renderCurrentView();
        updateCurrentTimeIndicator();
        setInterval(updateCurrentTimeIndicator, 60000);
        bindEvents();
    }

    /**
     * Generate time slots for day/week views
     */
    function generateTimeSlots() {
        const dayTimeSlots = document.getElementById('day-time-slots');
        const weekTimeSlots = document.getElementById('week-time-slots');

        let html = '';
        for (let i = 0; i < 24; i++) {
            const hour = i === 0 ? '12 AM' : i < 12 ? `${i} AM` : i === 12 ? '12 PM' : `${i - 12} PM`;
            html += `<div class="time-slot">${hour}</div>`;
        }

        if (dayTimeSlots) dayTimeSlots.innerHTML = html;
        if (weekTimeSlots) weekTimeSlots.innerHTML = html;

        // Generate week grid columns
        const weekGrid = document.getElementById('week-grid');
        if (weekGrid) {
            let gridHtml = '';
            for (let d = 0; d < 7; d++) {
                gridHtml += '<div class="day-column">';
                for (let h = 0; h < 24; h++) {
                    gridHtml += '<div class="hour-row"></div>';
                }
                gridHtml += '</div>';
            }
            weekGrid.innerHTML = gridHtml;
        }
    }

    /**
     * Render mini calendar in sidebar
     */
    function renderMiniCalendar() {
        if (!miniCalDays || !miniCalTitle) return;

        const year = currentDate.getFullYear();
        const month = currentDate.getMonth();

        miniCalTitle.textContent = new Date(year, month).toLocaleDateString('en-US', {
            month: 'long',
            year: 'numeric'
        });

        const firstDay = new Date(year, month, 1);
        const lastDay = new Date(year, month + 1, 0);
        const startDay = firstDay.getDay();
        const daysInMonth = lastDay.getDate();

        let html = '';
        const today = new Date();

        // Previous month days
        const prevMonthLastDay = new Date(year, month, 0).getDate();
        for (let i = startDay - 1; i >= 0; i--) {
            html += `<button class="mini-day other-month" data-date="${year}-${month - 1}-${prevMonthLastDay - i}">${prevMonthLastDay - i}</button>`;
        }

        // Current month days
        for (let d = 1; d <= daysInMonth; d++) {
            const isToday = today.getDate() === d && today.getMonth() === month && today.getFullYear() === year;
            const isSelected = selectedDate.getDate() === d && selectedDate.getMonth() === month && selectedDate.getFullYear() === year;
            const classes = ['mini-day'];
            if (isToday) classes.push('today');
            if (isSelected) classes.push('selected');
            html += `<button class="${classes.join(' ')}" data-date="${year}-${month + 1}-${d}">${d}</button>`;
        }

        // Next month days
        const remainingDays = 42 - (startDay + daysInMonth);
        for (let i = 1; i <= remainingDays; i++) {
            html += `<button class="mini-day other-month" data-date="${year}-${month + 2}-${i}">${i}</button>`;
        }

        miniCalDays.innerHTML = html;
    }

    /**
     * Render current view (day, week, or month)
     */
    function renderCurrentView() {
        switch (currentView) {
            case 'day':
                renderDayView();
                break;
            case 'week':
                renderWeekView();
                break;
            case 'month':
                renderMonthView();
                break;
        }
        updatePeriodTitle();
    }

    /**
     * Render day view
     */
    function renderDayView() {
        if (!dayView || !weekView || !monthView) return;

        dayView.classList.remove('hidden');
        weekView.classList.add('hidden');
        monthView.classList.add('hidden');

        const dayName = document.getElementById('day-view-name');
        const dayNumber = document.getElementById('day-view-number');

        if (dayName) dayName.textContent = selectedDate.toLocaleDateString('en-US', { weekday: 'long' });
        if (dayNumber) {
            dayNumber.textContent = selectedDate.getDate();
            const today = new Date();
            if (selectedDate.toDateString() === today.toDateString()) {
                dayNumber.classList.add('today');
            } else {
                dayNumber.classList.remove('today');
            }
        }
    }

    /**
     * Render week view
     */
    function renderWeekView() {
        if (!dayView || !weekView || !monthView) return;

        dayView.classList.add('hidden');
        weekView.classList.remove('hidden');
        monthView.classList.add('hidden');

        const weekDaysHeader = document.getElementById('week-days-header');
        if (!weekDaysHeader) return;

        const weekStart = getWeekStart(selectedDate);
        let html = '';
        const today = new Date();

        for (let i = 0; i < 7; i++) {
            const day = new Date(weekStart);
            day.setDate(weekStart.getDate() + i);
            const isToday = day.toDateString() === today.toDateString();

            html += `
                <div class="week-day-header">
                    <span class="day-name">${day.toLocaleDateString('en-US', { weekday: 'short' })}</span>
                    <span class="day-number ${isToday ? 'today' : ''}">${day.getDate()}</span>
                </div>
            `;
        }

        weekDaysHeader.innerHTML = html;
    }

    /**
     * Render month view
     */
    function renderMonthView() {
        if (!dayView || !weekView || !monthView) return;

        dayView.classList.add('hidden');
        weekView.classList.add('hidden');
        monthView.classList.remove('hidden');

        const monthGrid = document.getElementById('month-grid');
        if (!monthGrid) return;

        const year = currentDate.getFullYear();
        const month = currentDate.getMonth();

        const firstDay = new Date(year, month, 1);
        const lastDay = new Date(year, month + 1, 0);
        const startDay = firstDay.getDay();
        const daysInMonth = lastDay.getDate();

        let html = '';
        const today = new Date();

        // Previous month days
        const prevMonthLastDay = new Date(year, month, 0).getDate();
        for (let i = startDay - 1; i >= 0; i--) {
            html += `
                <div class="month-day other-month">
                    <span class="month-day-number">${prevMonthLastDay - i}</span>
                    <div class="month-day-events"></div>
                </div>
            `;
        }

        // Current month days
        for (let d = 1; d <= daysInMonth; d++) {
            const isToday = today.getDate() === d && today.getMonth() === month && today.getFullYear() === year;
            html += `
                <div class="month-day ${isToday ? 'today' : ''}" data-date="${year}-${month + 1}-${d}">
                    <span class="month-day-number">${d}</span>
                    <div class="month-day-events"></div>
                </div>
            `;
        }

        // Next month days
        const totalCells = Math.ceil((startDay + daysInMonth) / 7) * 7;
        const remainingDays = totalCells - (startDay + daysInMonth);
        for (let i = 1; i <= remainingDays; i++) {
            html += `
                <div class="month-day other-month">
                    <span class="month-day-number">${i}</span>
                    <div class="month-day-events"></div>
                </div>
            `;
        }

        monthGrid.innerHTML = html;
    }

    /**
     * Update period title based on current view
     */
    function updatePeriodTitle() {
        if (!currentPeriod) return;

        let title = '';
        switch (currentView) {
            case 'day':
                title = selectedDate.toLocaleDateString('en-US', {
                    weekday: 'long',
                    month: 'long',
                    day: 'numeric',
                    year: 'numeric'
                });
                break;
            case 'week':
                const weekStart = getWeekStart(selectedDate);
                const weekEnd = new Date(weekStart);
                weekEnd.setDate(weekStart.getDate() + 6);
                if (weekStart.getMonth() === weekEnd.getMonth()) {
                    title = `${weekStart.toLocaleDateString('en-US', { month: 'long' })} ${weekStart.getDate()} - ${weekEnd.getDate()}, ${weekStart.getFullYear()}`;
                } else {
                    title = `${weekStart.toLocaleDateString('en-US', { month: 'short' })} ${weekStart.getDate()} - ${weekEnd.toLocaleDateString('en-US', { month: 'short' })} ${weekEnd.getDate()}, ${weekEnd.getFullYear()}`;
                }
                break;
            case 'month':
                title = currentDate.toLocaleDateString('en-US', {
                    month: 'long',
                    year: 'numeric'
                });
                break;
        }
        currentPeriod.textContent = title;
    }

    /**
     * Get start of week (Sunday)
     * @param {Date} date - Date to get week start for
     * @returns {Date} - Start of week
     */
    function getWeekStart(date) {
        const d = new Date(date);
        const day = d.getDay();
        d.setDate(d.getDate() - day);
        return d;
    }

    /**
     * Update current time indicator position
     */
    function updateCurrentTimeIndicator() {
        const indicator = document.getElementById('current-time-indicator');
        if (!indicator) return;

        const now = new Date();
        const minutes = now.getHours() * 60 + now.getMinutes();
        const top = (minutes / 60) * 48; // 48px per hour

        indicator.style.top = `${top + 52}px`; // Offset for header

        // Only show in day/week view
        if (currentView === 'month') {
            indicator.style.display = 'none';
        } else {
            indicator.style.display = 'block';
        }
    }

    /**
     * Navigate by direction (-1 or 1)
     * @param {number} direction - Direction to navigate
     */
    function navigate(direction) {
        switch (currentView) {
            case 'day':
                selectedDate.setDate(selectedDate.getDate() + direction);
                break;
            case 'week':
                selectedDate.setDate(selectedDate.getDate() + (direction * 7));
                break;
            case 'month':
                currentDate.setMonth(currentDate.getMonth() + direction);
                break;
        }
        currentDate = new Date(selectedDate);
        renderMiniCalendar();
        renderCurrentView();
    }

    /**
     * Bind event listeners
     */
    function bindEvents() {
        // View selector
        document.querySelectorAll('.view-btn').forEach(btn => {
            btn.addEventListener('click', function() {
                document.querySelectorAll('.view-btn').forEach(b => b.classList.remove('active'));
                this.classList.add('active');
                currentView = this.dataset.view;
                renderCurrentView();
            });
        });

        // Today button
        const todayBtn = document.getElementById('today-btn');
        if (todayBtn) {
            todayBtn.addEventListener('click', () => {
                currentDate = new Date();
                selectedDate = new Date();
                renderMiniCalendar();
                renderCurrentView();
            });
        }

        // Navigation
        const prevPeriod = document.getElementById('prev-period');
        const nextPeriod = document.getElementById('next-period');
        const prevMonth = document.getElementById('prev-month');
        const nextMonth = document.getElementById('next-month');

        if (prevPeriod) prevPeriod.addEventListener('click', () => navigate(-1));
        if (nextPeriod) nextPeriod.addEventListener('click', () => navigate(1));
        if (prevMonth) prevMonth.addEventListener('click', () => {
            currentDate.setMonth(currentDate.getMonth() - 1);
            renderMiniCalendar();
        });
        if (nextMonth) nextMonth.addEventListener('click', () => {
            currentDate.setMonth(currentDate.getMonth() + 1);
            renderMiniCalendar();
        });

        // Mini calendar day click
        if (miniCalDays) {
            miniCalDays.addEventListener('click', (e) => {
                if (e.target.classList.contains('mini-day')) {
                    const dateParts = e.target.dataset.date.split('-');
                    selectedDate = new Date(dateParts[0], dateParts[1] - 1, dateParts[2]);
                    currentDate = new Date(selectedDate);
                    renderMiniCalendar();
                    renderCurrentView();
                }
            });
        }

        // New event button
        const newEventBtn = document.getElementById('new-event-btn');
        if (newEventBtn && eventModal) {
            newEventBtn.addEventListener('click', () => {
                eventModal.classList.remove('hidden');
            });
        }

        // Close modal
        document.querySelectorAll('.close-modal').forEach(btn => {
            btn.addEventListener('click', () => {
                if (eventModal) eventModal.classList.add('hidden');
            });
        });

        // Close modal on backdrop click
        if (eventModal) {
            eventModal.addEventListener('click', (e) => {
                if (e.target === eventModal) {
                    eventModal.classList.add('hidden');
                }
            });
        }

        // Close popup
        const closePopup = document.querySelector('.close-popup');
        if (closePopup && eventPopup) {
            closePopup.addEventListener('click', () => {
                eventPopup.classList.add('hidden');
            });
        }

        // Toggle sidebar
        const toggleSidebarBtn = document.getElementById('toggle-cal-sidebar');
        const calendarSidebar = document.getElementById('calendar-sidebar');
        if (toggleSidebarBtn && calendarSidebar) {
            toggleSidebarBtn.addEventListener('click', () => {
                calendarSidebar.classList.toggle('collapsed');
            });
        }

        // Month day click (create event)
        const monthGrid = document.getElementById('month-grid');
        if (monthGrid && eventModal) {
            monthGrid.addEventListener('click', (e) => {
                const monthDay = e.target.closest('.month-day');
                if (monthDay && !monthDay.classList.contains('other-month')) {
                    const dateParts = monthDay.dataset.date?.split('-');
                    if (dateParts) {
                        selectedDate = new Date(dateParts[0], dateParts[1] - 1, dateParts[2]);
                        eventModal.classList.remove('hidden');

                        // Pre-fill date in form
                        const startInput = document.querySelector('input[name="start"]');
                        const endInput = document.querySelector('input[name="end"]');
                        if (startInput && endInput) {
                            const dateStr = selectedDate.toISOString().slice(0, 10);
                            startInput.value = `${dateStr}T09:00`;
                            endInput.value = `${dateStr}T10:00`;
                        }
                    }
                }
            });
        }

        // Event form submit
        const eventForm = document.getElementById('event-form');
        if (eventForm && eventModal) {
            eventForm.addEventListener('submit', (e) => {
                e.preventDefault();
                // Form is handled by HTMX, but we can add validation here
                eventModal.classList.add('hidden');
            });
        }

        // Keyboard shortcuts
        document.addEventListener('keydown', (e) => {
            if (e.key === 'Escape') {
                if (eventModal) eventModal.classList.add('hidden');
                if (eventPopup) eventPopup.classList.add('hidden');
            }

            // Only handle if not in input
            if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;

            switch (e.key) {
                case 't':
                    document.getElementById('today-btn')?.click();
                    break;
                case 'd':
                    document.querySelector('[data-view="day"]')?.click();
                    break;
                case 'w':
                    document.querySelector('[data-view="week"]')?.click();
                    break;
                case 'm':
                    document.querySelector('[data-view="month"]')?.click();
                    break;
                case 'ArrowLeft':
                    navigate(-1);
                    break;
                case 'ArrowRight':
                    navigate(1);
                    break;
                case 'n':
                    document.getElementById('new-event-btn')?.click();
                    break;
            }
        });
    }

    // Export functions for external use
    window.CalendarModule = {
        init,
        navigate,
        renderCurrentView,
        setView: function(view) {
            currentView = view;
            renderCurrentView();
        }
    };

    // Auto-initialize when DOM is ready
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', init);
    } else {
        init();
    }
})();