script.js

class TimeTracker {
    constructor() {
        this.currentSession = null;
        this.startTime = null;
        this.endTime = null;
        this.isRunning = false;
        this.isPaused = false;
        this.pausedTime = 0;
        this.currentProject = 'general';
        this.projects = this.loadProjects();
        this.dailyData = this.loadDailyData();
        this.streak = this.loadStreak();
        this.dailyGoal = this.loadDailyGoal();
        
        // Break reminder properties
        this.breakSettings = this.loadBreakSettings();
        this.lastBreakTime = this.loadLastBreakTime();
        this.breakInterval = null;
        this.breakCountdownInterval = null;
        this.isOnBreak = false;
        this.breakPostponeCount = 0;

        // Calendar properties
        this.currentCalendarMonth = new Date();
        this.daySettings = this.loadDaySettings();
        this.selectedDate = null;
        
        // Section visibility state
        this.sectionVisibility = this.loadSectionVisibility();
        
        // Full focus mode properties
        this.focusMode = false;
        this.focusGoalTime = 90 * 60 * 1000; // Default 1.5 hours
        this.wakeLock = null; // Add wake lock property for preventing sleep mode

        this.initializeElements();
        this.initializeEventListeners();
        this.initializeDragAndDrop();
        this.updateDisplay();
        this.updateStats();
        this.updateProjectSelector();
        this.initializeBreakReminders();
        this.loadTheme();
        this.startDisplayTimer();
        this.startRealTimeClock();
        // Remove automatic notification permission request
        // this.requestNotificationPermission();
        this.renderCalendar();
        this.initializeSectionVisibility();
    }

    initializeElements() {
        // Timer elements
        this.mainTimer = document.getElementById('mainTimer');
        this.startBtn = document.getElementById('startBtn');
        this.pauseBtn = document.getElementById('pauseBtn');
        this.stopBtn = document.getElementById('stopBtn');
        this.sessionStatus = document.getElementById('sessionStatus');
        
        // Break reminder elements
        this.breakReminder = document.getElementById('breakReminder');
        this.breakCountdown = document.getElementById('breakCountdown');
        this.breakActions = document.getElementById('breakActions');
        this.takeBreakBtn = document.getElementById('takeBreakBtn');
        this.postponeBreakBtn = document.getElementById('postponeBreakBtn');
        
        // Project elements
        this.currentProjectSelect = document.getElementById('currentProject');
        this.addProjectBtn = document.getElementById('addProjectBtn');
        this.projectsGrid = document.getElementById('projectsGrid');
        
        // Modal elements
        this.modalOverlay = document.getElementById('modalOverlay');
        this.modalClose = document.getElementById('modalClose');
        this.projectForm = document.getElementById('projectForm');
        this.cancelBtn = document.getElementById('cancelBtn');
        
        // Stats elements
        this.todayTotal = document.getElementById('todayTotal');
        this.projectCount = document.getElementById('projectCount');
        this.streakCount = document.getElementById('streakCount');
        
        // Historical elements
        this.weekTotal = document.getElementById('weekTotal');
        this.monthTotal = document.getElementById('monthTotal');
        this.totalHours = document.getElementById('totalHours');
        this.activeDays = document.getElementById('activeDays');
        this.balanceValue = document.getElementById('balanceValue');
        this.balanceDescription = document.getElementById('balanceDescription');
        this.balanceFill = document.getElementById('balanceFill');
        
        // Data management elements
        this.exportDataBtn = document.getElementById('exportDataBtn');
        this.importDataBtn = document.getElementById('importDataBtn');
        this.importFileInput = document.getElementById('importFileInput');
        
        // Project edit elements
        this.projectEditModalOverlay = document.getElementById('projectEditModalOverlay');
        this.projectEditModalClose = document.getElementById('projectEditModalClose');
        this.projectEditForm = document.getElementById('projectEditForm');
        this.editProjectName = document.getElementById('editProjectName');
        this.editProjectColor = document.getElementById('editProjectColor');
        this.editProjectGoalHours = document.getElementById('editProjectGoalHours');
        this.editProjectGoalMinutes = document.getElementById('editProjectGoalMinutes');
        this.editProjectTime = document.getElementById('editProjectTime');
        this.editProjectSessions = document.getElementById('editProjectSessions');
        this.deleteProjectBtn = document.getElementById('deleteProjectBtn');
        this.editCancelBtn = document.getElementById('editCancelBtn');
        this.currentEditingProjectId = null;
        
        // Settings elements
        this.settingsBtn = document.getElementById('settingsBtn');
        this.settingsModalOverlay = document.getElementById('settingsModalOverlay');
        this.settingsModalClose = document.getElementById('settingsModalClose');
        this.natureThemeBtn = document.getElementById('natureThemeBtn');
        this.spaceThemeBtn = document.getElementById('spaceThemeBtn');
        this.breakRemindersEnabled = document.getElementById('breakRemindersEnabled');
        this.breakIntervalHours = document.getElementById('breakIntervalHours');
        this.breakIntervalMinutes = document.getElementById('breakIntervalMinutes');
        this.breakNotificationsEnabled = document.getElementById('breakNotificationsEnabled');
        this.autoStartEnabled = document.getElementById('autoStartEnabled');
        
        // Clear data button
        this.clearDataBtn = document.getElementById('clearDataBtn');
        
        // Current time elements
        this.currentTime = document.getElementById('currentTime');
        this.currentDate = document.getElementById('currentDate');
        
        // Goal elements
        this.setDailyGoalBtn = document.getElementById('setDailyGoalBtn');
        this.dailyGoalModalOverlay = document.getElementById('dailyGoalModalOverlay');
        this.dailyGoalModalClose = document.getElementById('dailyGoalModalClose');
        this.dailyGoalForm = document.getElementById('dailyGoalForm');
        this.dailyGoalCancelBtn = document.getElementById('dailyGoalCancelBtn');
        this.dailyGoalTime = document.getElementById('dailyGoalTime');
        this.dailyProgressFill = document.getElementById('dailyProgressFill');
        this.dailyProgressText = document.getElementById('dailyProgressText');
        
        // Calendar elements
        this.prevMonthBtn = document.getElementById('prevMonthBtn');
        this.nextMonthBtn = document.getElementById('nextMonthBtn');
        this.currentMonth = document.getElementById('currentMonth');
        this.calendarDays = document.getElementById('calendarDays');
        
        // Day settings modal elements
        this.daySettingsModalOverlay = document.getElementById('daySettingsModalOverlay');
        this.daySettingsModalClose = document.getElementById('daySettingsModalClose');
        this.daySettingsTitle = document.getElementById('daySettingsTitle');
        this.selectedDate = document.getElementById('selectedDate');
        this.dayTrackedTime = document.getElementById('dayTrackedTime');
        this.isWorkDay = document.getElementById('isWorkDay');
        this.dayGoalHours = document.getElementById('dayGoalHours');
        this.dayGoalMinutes = document.getElementById('dayGoalMinutes');
        this.dayNote = document.getElementById('dayNote');
        this.goalSettingGroup = document.getElementById('goalSettingGroup');
        
        // Section toggle elements
        this.currentSessionToggle = document.getElementById('currentSessionToggle');
        this.dailySummaryToggle = document.getElementById('dailySummaryToggle');
        this.projectsToggle = document.getElementById('projectsToggle');
        this.historicalToggle = document.getElementById('historicalToggle');
        this.calendarToggle = document.getElementById('calendarToggle');
        
        // Section content elements
        this.currentSessionContent = document.getElementById('currentSessionContent');
        this.dailySummaryContent = document.getElementById('dailySummaryContent');
        this.projectsContent = document.getElementById('projectsContent');
        this.historicalContent = document.getElementById('historicalContent');
        this.calendarContent = document.getElementById('calendarContent');
        
        // Full focus mode elements
        this.fullFocusBtn = document.getElementById('fullFocusBtn');
        this.focusOverlay = document.getElementById('focusOverlay');
        this.focusClose = document.getElementById('focusClose');
        this.focusProjectName = document.getElementById('focusProjectName');
        this.focusTimer = document.getElementById('focusTimer');
        this.focusGoal = document.getElementById('focusGoal');
        this.focusRemaining = document.getElementById('focusRemaining');
        this.fuelFill = document.getElementById('fuelFill');
        this.boosterFlames = document.getElementById('boosterFlames');
        this.focusStartBtn = document.getElementById('focusStartBtn');
        this.focusPauseBtn = document.getElementById('focusPauseBtn');
        this.focusStopBtn = document.getElementById('focusStopBtn');
        this.wakeLockStatus = document.getElementById('wakeLockStatus');
        
        // Bulk edit elements
        this.bulkEditBtn = document.getElementById('bulkEditBtn');
        this.bulkEditModalOverlay = document.getElementById('bulkEditModalOverlay');
        this.bulkEditModalClose = document.getElementById('bulkEditModalClose');
        this.bulkStartDate = document.getElementById('bulkStartDate');
        this.bulkEndDate = document.getElementById('bulkEndDate');
        this.bulkMarkAsNoWork = document.getElementById('bulkMarkAsNoWork');
        this.bulkNote = document.getElementById('bulkNote');
        this.applyDateRangeBtn = document.getElementById('applyDateRangeBtn');
        this.markWeekendsMonthBtn = document.getElementById('markWeekendsMonthBtn');
        this.markWeekendsYearBtn = document.getElementById('markWeekendsYearBtn');
        this.clearWeekendsMonthBtn = document.getElementById('clearWeekendsMonthBtn');
        this.clearCurrentMonthBtn = document.getElementById('clearCurrentMonthBtn');
        this.clearCurrentYearBtn = document.getElementById('clearCurrentYearBtn');
    }

    initializeEventListeners() {
        // Timer controls
        this.startBtn.addEventListener('click', () => this.startTimer());
        this.pauseBtn.addEventListener('click', () => this.pauseTimer());
        this.stopBtn.addEventListener('click', () => this.stopTimer());
        
        // Break reminder controls
        this.takeBreakBtn.addEventListener('click', () => this.startBreak());
        this.postponeBreakBtn.addEventListener('click', () => this.postponeBreak());
        
        // Project management
        this.addProjectBtn.addEventListener('click', () => this.showAddProjectModal());
        this.currentProjectSelect.addEventListener('change', (e) => {
            this.currentProject = e.target.value;
        });
        
        // Modal controls
        this.modalClose.addEventListener('click', () => this.hideAddProjectModal());
        this.cancelBtn.addEventListener('click', () => this.hideAddProjectModal());
        this.projectForm.addEventListener('submit', (e) => this.handleAddProject(e));
        this.modalOverlay.addEventListener('click', (e) => {
            if (e.target === this.modalOverlay) {
                this.hideAddProjectModal();
            }
        });
        
        // Settings controls
        this.settingsBtn.addEventListener('click', () => this.showSettingsModal());
        this.settingsModalClose.addEventListener('click', () => this.hideSettingsModal());
        this.settingsModalOverlay.addEventListener('click', (e) => {
            if (e.target === this.settingsModalOverlay) {
                this.hideSettingsModal();
            }
        });
        
        // Immediate settings event listeners
        this.natureThemeBtn.addEventListener('click', () => {
            this.selectTheme('nature');
            this.applyTheme('nature');
        });
        this.spaceThemeBtn.addEventListener('click', () => {
            this.selectTheme('space');
            this.applyTheme('space');
        });
        this.breakRemindersEnabled.addEventListener('change', () => this.saveSettingsInstantly());
        this.breakIntervalHours.addEventListener('change', () => this.saveSettingsInstantly());
        this.breakIntervalMinutes.addEventListener('change', () => this.saveSettingsInstantly());
        this.breakNotificationsEnabled.addEventListener('change', () => this.handleNotificationToggle());
        this.autoStartEnabled.addEventListener('change', () => this.saveSettingsInstantly());
        
        // Calendar controls
        this.prevMonthBtn.addEventListener('click', () => this.previousMonth());
        this.nextMonthBtn.addEventListener('click', () => this.nextMonth());
        
        // Day settings modal
        this.daySettingsModalClose.addEventListener('click', () => this.hideDaySettingsModal());
        this.daySettingsModalOverlay.addEventListener('click', (e) => {
            if (e.target === this.daySettingsModalOverlay) {
                this.hideDaySettingsModal();
            }
        });
        this.isWorkDay.addEventListener('change', () => this.toggleWorkDay());
        this.dayGoalHours.addEventListener('change', () => this.saveDaySettings());
        this.dayGoalMinutes.addEventListener('change', () => this.saveDaySettings());
        this.dayNote.addEventListener('change', () => this.saveDaySettings());
        
        // Section toggle controls
        this.currentSessionToggle.addEventListener('click', () => this.toggleSection('currentSession'));
        this.dailySummaryToggle.addEventListener('click', () => this.toggleSection('dailySummary'));
        this.projectsToggle.addEventListener('click', () => this.toggleSection('projects'));
        this.historicalToggle.addEventListener('click', () => this.toggleSection('historical'));
        this.calendarToggle.addEventListener('click', () => this.toggleSection('calendar'));
        
        // Clear data
        this.clearDataBtn.addEventListener('click', () => this.clearAllData());
        
        // Data management
        this.exportDataBtn.addEventListener('click', () => this.exportData());
        this.importDataBtn.addEventListener('click', () => this.importFileInput.click());
        this.importFileInput.addEventListener('change', (e) => this.importData(e));
        
        // Project editing
        this.projectEditModalClose.addEventListener('click', () => this.hideProjectEditModal());
        this.editCancelBtn.addEventListener('click', () => this.hideProjectEditModal());
        this.projectEditForm.addEventListener('submit', (e) => this.handleEditProject(e));
        this.deleteProjectBtn.addEventListener('click', () => this.handleDeleteProject());
        this.projectEditModalOverlay.addEventListener('click', (e) => {
            if (e.target === this.projectEditModalOverlay) {
                this.hideProjectEditModal();
            }
        });
        
        // Goal management
        this.setDailyGoalBtn.addEventListener('click', () => this.showDailyGoalModal());
        this.dailyGoalModalClose.addEventListener('click', () => this.hideDailyGoalModal());
        this.dailyGoalCancelBtn.addEventListener('click', () => this.hideDailyGoalModal());
        this.dailyGoalForm.addEventListener('submit', (e) => this.handleSetDailyGoal(e));
        this.dailyGoalModalOverlay.addEventListener('click', (e) => {
            if (e.target === this.dailyGoalModalOverlay) {
                this.hideDailyGoalModal();
            }
        });
        
        // Full focus mode controls
        this.fullFocusBtn.addEventListener('click', () => this.showFocusMode());
        this.focusClose.addEventListener('click', () => this.hideFocusMode());
        this.focusOverlay.addEventListener('click', (e) => {
            if (e.target === this.focusOverlay) {
                this.hideFocusMode();
            }
        });
        this.focusStartBtn.addEventListener('click', () => this.startTimer());
        this.focusPauseBtn.addEventListener('click', () => this.pauseTimer());
        this.focusStopBtn.addEventListener('click', () => this.stopTimer());
        
        // Bulk edit calendar controls
        this.bulkEditBtn.addEventListener('click', () => this.showBulkEditModal());
        this.bulkEditModalClose.addEventListener('click', () => this.hideBulkEditModal());
        this.bulkEditModalOverlay.addEventListener('click', (e) => {
            if (e.target === this.bulkEditModalOverlay) {
                this.hideBulkEditModal();
            }
        });
        
        // Date range application
        this.applyDateRangeBtn.addEventListener('click', () => this.applyDateRange());
        
        // Weekend management
        this.markWeekendsMonthBtn.addEventListener('click', () => this.markWeekends('month'));
        this.markWeekendsYearBtn.addEventListener('click', () => this.markWeekends('year'));
        this.clearWeekendsMonthBtn.addEventListener('click', () => this.clearWeekends('month'));
        
        // Data clearing
        this.clearCurrentMonthBtn.addEventListener('click', () => this.clearCalendarData('month'));
        this.clearCurrentYearBtn.addEventListener('click', () => this.clearCalendarData('year'));
        
        // Holiday presets
        document.addEventListener('click', (e) => {
            if (e.target.classList.contains('holiday-preset')) {
                const holiday = e.target.dataset.holiday;
                this.applyHolidayPreset(holiday);
            }
        });
        
        // Keyboard shortcuts
        document.addEventListener('keydown', (e) => {
            if (e.ctrlKey || e.metaKey) {
                switch(e.key) {
                    case ' ':
                        e.preventDefault();
                        if (this.isRunning && !this.isPaused) {
                            this.pauseTimer();
                        } else {
                            this.startTimer();
                        }
                        break;
                    case 'Enter':
                        e.preventDefault();
                        this.stopTimer();
                        break;
                }
            }
            
            // Focus mode shortcuts
            if (e.key === 'Escape' && this.focusMode) {
                e.preventDefault();
                this.hideFocusMode();
            }
            if (e.key === 'F11') {
                e.preventDefault();
                if (this.focusMode) {
                    this.hideFocusMode();
                } else {
                    this.showFocusMode();
                }
            }
        });

        // Handle page visibility change for wake lock re-acquisition
        document.addEventListener('visibilitychange', () => {
            if (this.focusMode && !document.hidden && !this.wakeLock) {
                // Tab became visible again and we're in focus mode but don't have wake lock
                this.requestWakeLock();
            }
        });
    }

    startTimer() {
        if (!this.isRunning) {
            this.startTime = Date.now();
            this.isRunning = true;
            this.isPaused = false;
            this.pausedTime = 0;
            
            // Reset break if coming back from break
            if (this.isOnBreak) {
                this.isOnBreak = false;
                this.breakActions.style.display = 'none';
                this.breakReminder.classList.remove('break-due');
                this.lastBreakTime = Date.now();
                this.saveLastBreakTime();
            }
        } else if (this.isPaused) {
            this.startTime = Date.now() - this.pausedTime;
            this.isPaused = false;
        }

        this.updateButtonStates();
        this.updateSessionStatus('Running', '#10b981');
        this.startBreakCountdown();
        
        // Rebuild projects grid to show active indicator
        this.buildProjectsGrid();
        
        document.body.classList.add('timer-active');
    }

    pauseTimer() {
        if (this.isRunning && !this.isPaused) {
            this.pausedTime = Date.now() - this.startTime;
            this.isPaused = true;
            this.updateButtonStates();
            this.updateSessionStatus('Paused', '#f59e0b');
            this.stopBreakCountdown();
            document.body.classList.remove('timer-active');
        }
    }

    stopTimer() {
        if (this.isRunning) {
            const sessionTime = this.isPaused ? this.pausedTime : Date.now() - this.startTime;
            this.saveSession(sessionTime);
            this.resetTimer();
            this.stopBreakCountdown();
            
            // Rebuild projects grid to remove active indicator and show final times
            this.buildProjectsGrid();
        }
    }

    resetTimer() {
        this.isRunning = false;
        this.isPaused = false;
        this.startTime = null;
        this.pausedTime = 0;
        this.updateButtonStates();
        this.updateSessionStatus('Ready to work', '#10b981');
        this.updateDisplay();
        document.body.classList.remove('timer-active');
    }

    updateButtonStates() {
        this.startBtn.disabled = this.isRunning && !this.isPaused;
        this.pauseBtn.disabled = !this.isRunning || this.isPaused;
        this.stopBtn.disabled = !this.isRunning;

        // Update button text
        if (this.isRunning && !this.isPaused) {
            this.startBtn.innerHTML = '<i class="fas fa-play"></i> Running';
        } else {
            this.startBtn.innerHTML = '<i class="fas fa-play"></i> Start';
        }
    }

    updateSessionStatus(text, color) {
        this.sessionStatus.innerHTML = `<span class="status-indicator" style="background: ${color}"></span> ${text}`;
    }

    saveSession(duration) {
        const session = {
            project: this.currentProject,
            duration: duration,
            date: new Date().toDateString(),
            timestamp: Date.now()
        };

        // Add to project data
        if (!this.projects[this.currentProject]) {
            this.projects[this.currentProject] = {
                name: this.currentProject,
                color: '#10b981',
                totalTime: 0,
                sessions: [],
                goal: 0
            };
        }

        this.projects[this.currentProject].totalTime += duration;
        this.projects[this.currentProject].sessions.push(session);

        // Add to daily data
        const today = new Date().toDateString();
        if (!this.dailyData[today]) {
            this.dailyData[today] = 0;
        }
        this.dailyData[today] += duration;

        // Update streak
        this.updateStreak();

        // Save to localStorage
        this.saveData();
        this.updateStats();
        this.updateProjectsGrid();
        this.renderCalendar();
        this.initializeSectionVisibility();
    }

    updateStreak() {
        const today = new Date().toDateString();
        const yesterday = new Date(Date.now() - 86400000).toDateString();
        
        if (this.dailyData[today] > 0) {
            if (this.dailyData[yesterday] > 0 || this.streak === 0) {
                this.streak++;
            }
        }
        
        localStorage.setItem('timetracker_streak', this.streak.toString());
    }

    formatTime(milliseconds) {
        const totalSeconds = Math.floor(milliseconds / 1000);
        const hours = Math.floor(totalSeconds / 3600);
        const minutes = Math.floor((totalSeconds % 3600) / 60);
        const seconds = totalSeconds % 60;

        return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
    }

    formatDuration(milliseconds) {
        const totalMinutes = Math.floor(milliseconds / (1000 * 60));
        const hours = Math.floor(totalMinutes / 60);
        const minutes = totalMinutes % 60;

        if (hours > 0) {
            return `${hours}h ${minutes}m`;
        } else {
            return `${minutes}m`;
        }
    }

    updateDisplay() {
        if (this.isRunning) {
            const currentTime = this.isPaused ? this.pausedTime : Date.now() - this.startTime;
            this.mainTimer.textContent = this.formatTime(currentTime);
            
            // Update focus mode display
            if (this.focusMode) {
                this.updateFocusDisplay(currentTime);
            }
            
            // Update real-time daily progress during active session
            this.updateRealTimeDailyProgress(currentTime);
            
            // Update only the active project's time display (no rebuilding)
            this.updateActiveProjectTime(currentTime);
        } else {
            this.mainTimer.textContent = '00:00:00';
            
            // Update focus mode display
            if (this.focusMode) {
                this.updateFocusDisplay(0);
            }
        }
    }

    updateFocusDisplay(currentTime) {
        const focusTime = currentTime - this.focusGoalTime;
        const focusRemaining = this.focusGoalTime - focusTime;
        
        if (focusRemaining > 0) {
            this.focusRemaining.textContent = this.formatDuration(focusRemaining);
            this.fuelFill.style.width = `${Math.min((focusRemaining / this.focusGoalTime) * 100, 100)}%`;
        } else {
            this.focusRemaining.textContent = 'Focus Time!';
            this.fuelFill.style.width = '100%';
        }
    }

    updateRealTimeDailyProgress(currentSessionTime = 0) {
        // Get today's saved time
        const today = new Date().toDateString();
        const savedTodayTime = this.dailyData[today] || 0;
        
        // Add current session time to get total time including active session
        const totalTimeToday = savedTodayTime + currentSessionTime;
        
        // Update today's total display
        this.todayTotal.textContent = this.formatDuration(totalTimeToday);
        
        // Update daily goal progress if goal is set
        if (this.dailyGoal > 0) {
            const progress = Math.min((totalTimeToday / this.dailyGoal) * 100, 100);
            this.dailyProgressFill.style.width = `${progress}%`;
            
            if (progress >= 100) {
                this.dailyProgressText.textContent = '🎉 Goal Completed!';
                this.dailyProgressFill.style.background = 'linear-gradient(90deg, #8fb68f 0%, #7ba87b 100%)';
            } else {
                this.dailyProgressText.textContent = `${Math.round(progress)}%`;
            }
        }
    }

    updateActiveProjectTime(currentSessionTime = 0) {
        if (!this.isRunning || currentSessionTime <= 0) return;
        
        // Find the active project card and update only its time-related elements
        const projectCards = this.projectsGrid.querySelectorAll('.project-card');
        
        projectCards.forEach((card, index) => {
            const projectId = Object.keys(this.projects)[index];
            const project = this.projects[projectId];
            
            if (projectId === this.currentProject) {
                // Update time display
                const timeElement = card.querySelector('.project-time');
                const sessionsElement = card.querySelector('.project-sessions');
                const progressFill = card.querySelector('.project-progress-fill');
                const progressText = card.querySelector('.project-progress-text');
                
                if (timeElement) {
                    const displayTime = project.totalTime + currentSessionTime;
                    timeElement.textContent = this.formatDuration(displayTime);
                }
                
                if (sessionsElement) {
                    const sessionNote = ` (+${this.formatDuration(currentSessionTime)} current session)`;
                    sessionsElement.textContent = `${project.sessions.length} sessions${sessionNote}`;
                }
                
                // Update goal progress if exists
                if (progressFill && progressText && project.goal > 0) {
                    const displayTime = project.totalTime + currentSessionTime;
                    const progress = Math.min((displayTime / project.goal) * 100, 100);
                    const progressTextContent = progress >= 100 ? '🎉 Complete!' : `${Math.round(progress)}%`;
                    
                    progressFill.style.width = `${progress}%`;
                    progressText.textContent = progressTextContent;
                }
            }
        });
    }

    startDisplayTimer() {
        setInterval(() => {
            this.updateDisplay();
        }, 1000);
    }

    startRealTimeClock() {
        // Update immediately
        this.updateCurrentDateTime();
        
        // Update every second
        setInterval(() => {
            this.updateCurrentDateTime();
        }, 1000);
    }

    updateCurrentDateTime() {
        const now = new Date();
        
        // Format time (HH:MM:SS)
        const timeString = now.toLocaleTimeString('en-US', {
            hour12: false,
            hour: '2-digit',
            minute: '2-digit',
            second: '2-digit'
        });
        
        // Format date
        const dateString = now.toLocaleDateString('en-US', {
            weekday: 'long',
            year: 'numeric',
            month: 'long',
            day: 'numeric'
        });
        
        // Update DOM elements
        if (this.currentTime) {
            this.currentTime.textContent = timeString;
        }
        if (this.currentDate) {
            this.currentDate.textContent = dateString;
        }
    }

    updateStats() {
        // Update real-time daily progress (this will handle today's total and goal progress)
        this.updateRealTimeDailyProgress();

        // Project count
        this.projectCount.textContent = Object.keys(this.projects).length;

        // Streak
        this.streakCount.textContent = this.streak;
        
        // Historical stats
        this.updateHistoricalStats();
        
        // Time balance
        this.updateTimeBalance();
        
        // Update goal displays
        this.updateDailyGoalDisplay();
    }

    updateHistoricalStats() {
        const now = new Date();
        
        // Calculate week total (Monday to Sunday)
        const startOfWeek = new Date(now);
        const day = startOfWeek.getDay();
        const diff = startOfWeek.getDate() - day + (day === 0 ? -6 : 1); // Adjust for Monday start
        startOfWeek.setDate(diff);
        startOfWeek.setHours(0, 0, 0, 0);
        
        let weekTotal = 0;
        for (let i = 0; i < 7; i++) {
            const date = new Date(startOfWeek);
            date.setDate(startOfWeek.getDate() + i);
            const dateString = date.toDateString();
            weekTotal += this.dailyData[dateString] || 0;
        }
        
        // Calculate month total
        const startOfMonth = new Date(now.getFullYear(), now.getMonth(), 1);
        let monthTotal = 0;
        const today = new Date();
        for (let d = new Date(startOfMonth); d <= today; d.setDate(d.getDate() + 1)) {
            const dateString = d.toDateString();
            monthTotal += this.dailyData[dateString] || 0;
        }
        
        // Calculate all-time total
        let allTimeTotal = 0;
        let activeDaysCount = 0;
        Object.values(this.dailyData).forEach(time => {
            allTimeTotal += time;
            if (time > 0) activeDaysCount++;
        });
        
        // Update displays
        this.weekTotal.textContent = this.formatDuration(weekTotal);
        this.monthTotal.textContent = this.formatDuration(monthTotal);
        this.totalHours.textContent = this.formatDuration(allTimeTotal);
        this.activeDays.textContent = activeDaysCount;
    }

    updateTimeBalance() {
        if (this.dailyGoal <= 0) {
            this.balanceValue.textContent = 'No goal set';
            this.balanceDescription.textContent = 'Set a daily goal to track balance';
            this.balanceFill.style.width = '0%';
            this.balanceFill.className = 'balance-fill neutral';
            return;
        }

        // Calculate balance over last 30 days
        const now = new Date();
        let totalWorked = 0;
        let totalGoal = 0;
        let daysWithGoal = 0;

        for (let i = 0; i < 30; i++) {
            const date = new Date(now);
            date.setDate(now.getDate() - i);
            const dateString = date.toDateString();
            
            const dayWorked = this.dailyData[dateString] || 0;
            totalWorked += dayWorked;
            
            // Only count days with work toward goal calculation
            if (dayWorked > 0) {
                totalGoal += this.dailyGoal;
                daysWithGoal++;
            }
        }

        const balance = totalWorked - totalGoal;
        const isPositive = balance >= 0;
        const isNeutral = Math.abs(balance) < (30 * 60 * 1000); // Less than 30 minutes difference

        // Update balance display
        const balanceFormatted = this.formatDuration(Math.abs(balance));
        this.balanceValue.textContent = `${isPositive ? '+' : '-'}${balanceFormatted}`;
        
        // Update styling
        this.balanceValue.className = `balance-value ${isNeutral ? 'neutral' : isPositive ? 'positive' : 'negative'}`;
        this.balanceFill.className = `balance-fill ${isNeutral ? 'neutral' : isPositive ? 'positive' : 'negative'}`;
        
        // Update description
        if (isNeutral) {
            this.balanceDescription.textContent = 'Perfectly balanced!';
        } else if (isPositive) {
            this.balanceDescription.textContent = 'Ahead of your goals! 🎉';
        } else {
            this.balanceDescription.textContent = 'Behind your goals. Keep going! 💪';
        }
        
        // Update progress bar
        const maxBalance = this.dailyGoal * 7; // One week worth of goals
        const balancePercent = Math.min(Math.abs(balance) / maxBalance * 50, 50); // 50% max width
        this.balanceFill.style.width = `${balancePercent}%`;
    }

    updateProjectSelector() {
        const currentValue = this.currentProjectSelect.value;
        this.currentProjectSelect.innerHTML = '';

        Object.keys(this.projects).forEach(projectId => {
            const option = document.createElement('option');
            option.value = projectId;
            option.textContent = this.projects[projectId].name;
            this.currentProjectSelect.appendChild(option);
        });

        // Restore selection or set to first project
        if (currentValue && this.projects[currentValue]) {
            this.currentProjectSelect.value = currentValue;
        } else if (Object.keys(this.projects).length > 0) {
            this.currentProjectSelect.value = Object.keys(this.projects)[0];
            this.currentProject = Object.keys(this.projects)[0];
        }
    }

    updateProjectsGrid() {
        // Full rebuild of projects grid (only when needed)
        this.buildProjectsGrid();
    }

    buildProjectsGrid() {
        this.projectsGrid.innerHTML = '';

        Object.keys(this.projects).forEach(projectId => {
            const project = this.projects[projectId];
            const projectCard = document.createElement('div');
            projectCard.className = 'project-card';
            projectCard.dataset.projectId = projectId; // Add data attribute for identification
            
            let goalProgressHtml = '';
            if (project.goal && project.goal > 0) {
                const progress = Math.min((project.totalTime / project.goal) * 100, 100);
                const progressText = progress >= 100 ? '🎉 Complete!' : `${Math.round(progress)}%`;
                
                goalProgressHtml = `
                    <div class="project-goal-progress">
                        <div class="project-goal-info">
                            <span class="project-goal-label">Goal:</span>
                            <span class="project-goal-time">${this.formatDuration(project.goal)}</span>
                        </div>
                        <div class="project-progress-bar">
                            <div class="project-progress-fill" style="width: ${progress}%"></div>
                        </div>
                        <div class="project-progress-text">${progressText}</div>
                    </div>
                `;
            }
            
            // Add active session indicator if this project is currently being worked on
            const activeIndicator = (this.isRunning && this.currentProject === projectId) 
                ? '<div class="project-active-indicator">🔥 Active</div>' 
                : '';
            
            // Add edit buttons (don't show for general project or if it's the active project)
            const canEdit = projectId !== 'general' && (!this.isRunning || this.currentProject !== projectId);
            const editButtons = canEdit ? `
                <div class="project-actions">
                    <button class="project-action-btn" onclick="timeTracker.showProjectEditModal('${projectId}')">
                        <i class="fas fa-edit"></i> Edit
                    </button>
                </div>
            ` : '';
            
            projectCard.innerHTML = `
                <div class="project-header">
                    <div class="project-color" style="background: ${project.color}"></div>
                    <div class="project-name">${project.name}</div>
                    ${editButtons}
                </div>
                ${activeIndicator}
                <div class="project-time">${this.formatDuration(project.totalTime)}</div>
                <div class="project-sessions">${project.sessions.length} sessions</div>
                ${goalProgressHtml}
            `;

            this.projectsGrid.appendChild(projectCard);
        });
    }

    showAddProjectModal() {
        this.modalOverlay.classList.add('active');
        document.getElementById('projectName').focus();
    }

    hideAddProjectModal() {
        this.modalOverlay.classList.remove('active');
        this.projectForm.reset();
    }

    handleAddProject(e) {
        e.preventDefault();
        const projectName = document.getElementById('projectName').value.trim();
        const projectColor = document.getElementById('projectColor').value;
        const goalHours = parseInt(document.getElementById('projectGoalHours').value) || 0;
        const goalMinutes = parseInt(document.getElementById('projectGoalMinutes').value) || 0;
        const goalTime = (goalHours * 60 + goalMinutes) * 60 * 1000; // Convert to milliseconds

        if (projectName) {
            const projectId = projectName.toLowerCase().replace(/\s+/g, '-');
            
            this.projects[projectId] = {
                name: projectName,
                color: projectColor,
                totalTime: 0,
                sessions: [],
                goal: goalTime
            };

            this.saveData();
            this.updateProjectSelector();
            this.updateProjectsGrid();
            this.updateStats();
            this.hideAddProjectModal();
        }
    }

    toggleTheme() {
        // This method is no longer used - theme switching is now handled in settings
    }

    clearAllData() {
        if (confirm('Are you sure you want to clear all data? This cannot be undone.')) {
            localStorage.removeItem('timetracker_projects');
            localStorage.removeItem('timetracker_daily');
            localStorage.removeItem('timetracker_streak');
            localStorage.removeItem('timetracker_daily_goal');
            localStorage.removeItem('timetracker_break_settings');
            localStorage.removeItem('timetracker_last_break');
            localStorage.removeItem('timetracker_day_settings');
            localStorage.removeItem('timetracker_section_visibility');
            
            this.projects = { general: { name: 'General Work', color: '#10b981', totalTime: 0, sessions: [], goal: 0 } };
            this.dailyData = {};
            this.streak = 0;
            this.dailyGoal = 0;
            this.daySettings = {};
            this.breakSettings = this.loadBreakSettings();
            this.lastBreakTime = Date.now();
            this.sectionVisibility = this.loadSectionVisibility();
            
            this.resetTimer();
            this.updateProjectSelector();
            this.updateProjectsGrid();
            this.updateStats();
            this.updateDailyGoalDisplay();
            this.initializeBreakReminders();
            this.renderCalendar();
            this.initializeSectionVisibility();
        }
    }

    saveData() {
        localStorage.setItem('timetracker_projects', JSON.stringify(this.projects));
        localStorage.setItem('timetracker_daily', JSON.stringify(this.dailyData));
        localStorage.setItem('timetracker_streak', this.streak.toString());
        localStorage.setItem('timetracker_daily_goal', this.dailyGoal.toString());
        localStorage.setItem('timetracker_break_settings', JSON.stringify(this.breakSettings));
        localStorage.setItem('timetracker_last_break', this.lastBreakTime.toString());
        localStorage.setItem('timetracker_day_settings', JSON.stringify(this.daySettings));
    }

    loadProjects() {
        const saved = localStorage.getItem('timetracker_projects');
        if (saved) {
            return JSON.parse(saved);
        }
        return {
            general: {
                name: 'General Work',
                color: '#10b981',
                totalTime: 0,
                sessions: [],
                goal: 0
            }
        };
    }

    loadDailyData() {
        const saved = localStorage.getItem('timetracker_daily');
        return saved ? JSON.parse(saved) : {};
    }

    loadStreak() {
        const saved = localStorage.getItem('timetracker_streak');
        return saved ? parseInt(saved) : 0;
    }

    loadDailyGoal() {
        const saved = localStorage.getItem('timetracker_daily_goal');
        return saved ? parseInt(saved) : 0;
    }

    loadTheme() {
        const saved = localStorage.getItem('timetracker_theme');
        if (saved === 'space') {
            document.body.classList.remove('nature-theme');
            document.body.classList.add('space-theme');
            document.querySelector('.logo i').className = 'fas fa-rocket';
        } else {
            document.body.classList.remove('space-theme');
            document.body.classList.add('nature-theme');
            document.querySelector('.logo i').className = 'fas fa-leaf';
        }
    }

    updateDailyGoalDisplay() {
        const goalElement = this.dailyGoalTime;
        
        if (this.dailyGoal > 0) {
            goalElement.textContent = this.formatDuration(this.dailyGoal);
        } else {
            goalElement.textContent = 'Not set';
            // Reset progress bar when no goal is set
            this.dailyProgressFill.style.width = '0%';
            this.dailyProgressText.textContent = 'Set a goal to track progress';
        }
    }

    showDailyGoalModal() {
        this.dailyGoalModalOverlay.classList.add('active');
        
        // Pre-fill with current goal if set
        if (this.dailyGoal > 0) {
            const hours = Math.floor(this.dailyGoal / (1000 * 60 * 60));
            const minutes = Math.floor((this.dailyGoal % (1000 * 60 * 60)) / (1000 * 60));
            document.getElementById('dailyGoalHours').value = hours;
            document.getElementById('dailyGoalMinutes').value = minutes;
        }
        
        document.getElementById('dailyGoalHours').focus();
    }

    hideDailyGoalModal() {
        this.dailyGoalModalOverlay.classList.remove('active');
        this.dailyGoalForm.reset();
    }

    handleSetDailyGoal(e) {
        e.preventDefault();
        const goalHours = parseInt(document.getElementById('dailyGoalHours').value) || 0;
        const goalMinutes = parseInt(document.getElementById('dailyGoalMinutes').value) || 0;
        
        this.dailyGoal = (goalHours * 60 + goalMinutes) * 60 * 1000; // Convert to milliseconds
        
        this.saveData();
        this.updateDailyGoalDisplay();
        this.hideDailyGoalModal();
    }

    // Break reminder methods
    initializeBreakReminders() {
        this.breakInterval = this.breakSettings.interval;
        
        // Update break reminder display
        if (this.breakSettings.enabled) {
            this.breakReminder.style.display = 'block';
            this.updateBreakCountdown();
        } else {
            this.breakReminder.style.display = 'none';
        }
    }

    updateBreakReminder() {
        if (this.breakSettings.enabled && this.breakInterval) {
            const workTime = Date.now() - this.lastBreakTime;
            const timeUntilBreak = this.breakInterval - workTime;
            
            if (timeUntilBreak <= 0) {
                this.triggerBreakReminder();
            } else {
                this.breakCountdown.textContent = this.formatTime(timeUntilBreak);
            }
        } else {
            this.breakCountdown.textContent = '--:--';
        }
    }

    startBreak() {
        this.isOnBreak = false;
        this.breakActions.style.display = 'none';
        this.breakReminder.classList.remove('break-due');
        this.lastBreakTime = Date.now();
        this.saveLastBreakTime();
        this.breakPostponeCount = 0;
        
        this.updateSessionStatus('Break taken', '#10b981');
        
        // Auto-start timer if enabled
        if (this.breakSettings.autoStartEnabled && !this.isRunning) {
            setTimeout(() => {
                this.startTimer();
            }, 1000);
        }
    }

    postponeBreak() {
        this.breakPostponeCount++;
        const postponeTime = 5 * 60 * 1000; // 5 minutes
        this.lastBreakTime = Date.now() - this.breakInterval + postponeTime;
        this.saveLastBreakTime();
        
        this.isOnBreak = false;
        this.breakActions.style.display = 'none';
        this.breakReminder.classList.remove('break-due');
        
        this.updateSessionStatus(`Break postponed (+5 min)`, '#f59e0b');
        
        // Resume timer if it was running
        if (!this.isRunning && !this.isPaused) {
            this.startTimer();
        }
    }

    // Settings methods
    showSettingsModal() {
        this.settingsModalOverlay.classList.add('active');
        this.loadSettingsIntoModal();
        this.updateThemeSelection();
    }

    hideSettingsModal() {
        this.settingsModalOverlay.classList.remove('active');
    }

    loadSettingsIntoModal() {
        // Load break settings
        this.breakRemindersEnabled.checked = this.breakSettings.enabled;
        
        // Convert interval (milliseconds) to hours and minutes
        const intervalMinutes = Math.floor(this.breakSettings.interval / (1000 * 60));
        const hours = Math.floor(intervalMinutes / 60);
        const minutes = intervalMinutes % 60;
        
        this.breakIntervalHours.value = hours;
        this.breakIntervalMinutes.value = minutes;
        this.breakNotificationsEnabled.checked = this.breakSettings.notificationsEnabled;
        this.autoStartEnabled.checked = this.breakSettings.autoStartEnabled;
        
        // Update notification UI to show current permission status
        this.updateNotificationUI();
    }

    updateThemeSelection() {
        const isSpaceTheme = document.body.classList.contains('space-theme');
        this.natureThemeBtn.classList.toggle('active', !isSpaceTheme);
        this.spaceThemeBtn.classList.toggle('active', isSpaceTheme);
    }

    selectTheme(theme) {
        this.natureThemeBtn.classList.remove('active');
        this.spaceThemeBtn.classList.remove('active');
        
        if (theme === 'nature') {
            this.natureThemeBtn.classList.add('active');
        } else {
            this.spaceThemeBtn.classList.add('active');
        }
    }

    saveSettings() {
        // Save theme (already handled by immediate theme buttons)
        
        // Save break settings
        const intervalHours = parseInt(this.breakIntervalHours.value) || 1;
        const intervalMinutes = parseInt(this.breakIntervalMinutes.value) || 0;
        const newInterval = (intervalHours * 60 + intervalMinutes) * 60 * 1000;
        
        this.breakSettings = {
            enabled: this.breakRemindersEnabled.checked,
            interval: newInterval,
            notificationsEnabled: this.breakNotificationsEnabled.checked,
            autoStartEnabled: this.autoStartEnabled.checked
        };
        
        this.breakInterval = newInterval;
        
        // Save to localStorage
        localStorage.setItem('timetracker_break_settings', JSON.stringify(this.breakSettings));
        localStorage.setItem('timetracker_last_break', this.lastBreakTime.toString());
        
        // Restart break countdown with new settings
        if (this.isRunning) {
            this.stopBreakCountdown();
            this.startBreakCountdown();
        }
        
        // Update break reminder display
        this.initializeBreakReminders();
    }

    applyTheme(theme) {
        const body = document.body;
        if (theme === 'nature') {
            body.classList.remove('space-theme');
            body.classList.add('nature-theme');
            document.querySelector('.logo i').className = 'fas fa-leaf';
        } else {
            body.classList.remove('nature-theme');
            body.classList.add('space-theme');
            document.querySelector('.logo i').className = 'fas fa-rocket';
        }
        localStorage.setItem('timetracker_theme', theme);
    }

    // Data Loading Methods
    loadBreakSettings() {
        const saved = localStorage.getItem('timetracker_break_settings');
        if (saved) {
            return JSON.parse(saved);
        }
        return {
            enabled: true,
            interval: 60 * 60 * 1000, // 1 hour default
            notificationsEnabled: true,
            autoStartEnabled: false
        };
    }

    loadLastBreakTime() {
        const saved = localStorage.getItem('timetracker_last_break');
        return saved ? parseInt(saved) : Date.now();
    }

    saveLastBreakTime() {
        localStorage.setItem('timetracker_last_break', this.lastBreakTime.toString());
    }

    // Notification methods
    requestNotificationPermission() {
        if ('Notification' in window) {
            // Only request if permission is default (not yet asked)
            if (Notification.permission === "default") {
                return Notification.requestPermission().then(function(permission) {
                    if (permission === "granted") {
                        console.log('Notification permission granted.');
                        return true;
                    } else {
                        console.log('Notification permission denied.');
                        return false;
                    }
                });
            } else if (Notification.permission === "granted") {
                return Promise.resolve(true);
            } else {
                // Permission was denied
                return Promise.resolve(false);
            }
        }
        return Promise.resolve(false);
    }

    async handleNotificationToggle() {
        if (this.breakNotificationsEnabled.checked) {
            // User wants to enable notifications
            if (Notification.permission === "default") {
                // Ask for permission
                const granted = await this.requestNotificationPermission();
                if (!granted) {
                    // Permission denied, uncheck the toggle
                    this.breakNotificationsEnabled.checked = false;
                    alert('Notifications were not enabled. You can enable them in your browser settings if you change your mind.');
                }
            } else if (Notification.permission === "denied") {
                // Permission was previously denied
                this.breakNotificationsEnabled.checked = false;
                alert('Notifications are blocked. Please enable them in your browser settings and refresh the page.');
            }
            // If permission is "granted", the toggle stays checked
        }
        // Save settings regardless
        this.saveSettingsInstantly();
        // Update UI to reflect current status
        this.updateNotificationUI();
    }

    startBreakCountdown() {
        if (this.breakSettings.enabled && this.breakInterval) {
            this.breakCountdownInterval = setInterval(() => {
                this.updateBreakCountdown();
            }, 1000);
        }
    }

    stopBreakCountdown() {
        if (this.breakCountdownInterval) {
            clearInterval(this.breakCountdownInterval);
            this.breakCountdownInterval = null;
        }
    }

    updateBreakCountdown() {
        if (!this.isRunning || this.isOnBreak || !this.breakSettings.enabled) {
            this.breakCountdown.textContent = '--:--';
            return;
        }

        const workTime = Date.now() - this.lastBreakTime;
        const timeUntilBreak = this.breakInterval - workTime;

        if (timeUntilBreak <= 0) {
            this.triggerBreakReminder();
        } else {
            this.breakCountdown.textContent = this.formatTime(timeUntilBreak);
        }
    }

    triggerBreakReminder() {
        if (!this.isOnBreak) {
            this.isOnBreak = true;
            this.breakReminder.classList.add('break-due');
            this.breakActions.style.display = 'block';
            this.breakCountdown.textContent = 'Break Time!';
            
            // Show notification if enabled
            if (this.breakSettings.notificationsEnabled && Notification.permission === "granted") {
                new Notification('TimeFlow - Break Reminder', {
                    body: '💪 Time to take a break! You\'ve been working hard.',
                    icon: '/favicon.ico',
                    tag: 'break-reminder'
                });
            }
            
            // Auto pause timer if enabled
            if (this.isRunning) {
                this.pauseTimer();
            }
        }
    }

    // Data Export/Import Methods
    exportData() {
        const exportData = {
            version: '1.0',
            exportDate: new Date().toISOString(),
            projects: this.projects,
            dailyData: this.dailyData,
            streak: this.streak,
            dailyGoal: this.dailyGoal,
            daySettings: this.daySettings,
            breakSettings: this.breakSettings,
            lastBreakTime: this.lastBreakTime,
            sectionVisibility: this.sectionVisibility,
            theme: localStorage.getItem('timetracker_theme') || 'nature'
        };

        const dataStr = JSON.stringify(exportData, null, 2);
        const dataBlob = new Blob([dataStr], { type: 'application/json' });
        
        const link = document.createElement('a');
        link.href = URL.createObjectURL(dataBlob);
        const date = new Date().toISOString().split('T')[0];
        link.download = `timetracker-backup-${date}.json`;
        
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
        
        // Show success message
        this.updateSessionStatus('Data exported successfully! 📁', '#10b981');
        setTimeout(() => {
            this.updateSessionStatus('Ready to work', '#10b981');
        }, 3000);
    }

    importData(event) {
        const file = event.target.files[0];
        if (!file) return;

        const reader = new FileReader();
        reader.onload = (e) => {
            try {
                const importedData = JSON.parse(e.target.result);
                
                // Validate data structure
                if (!importedData.projects || !importedData.dailyData) {
                    throw new Error('Invalid backup file format');
                }

                // Ask for confirmation
                if (!confirm('This will replace all your current data. Are you sure you want to import this backup?')) {
                    return;
                }

                // Import data
                this.projects = importedData.projects;
                this.dailyData = importedData.dailyData;
                this.streak = importedData.streak || 0;
                this.dailyGoal = importedData.dailyGoal || 0;
                this.daySettings = importedData.daySettings || {};
                this.breakSettings = importedData.breakSettings || this.loadBreakSettings();
                this.lastBreakTime = importedData.lastBreakTime || Date.now();
                this.sectionVisibility = importedData.sectionVisibility || this.loadSectionVisibility();

                // Apply theme if included
                if (importedData.theme) {
                    this.applyTheme(importedData.theme);
                }

                // Save imported data
                this.saveData();

                // Update all displays
                this.updateProjectSelector();
                this.updateProjectsGrid();
                this.updateStats();
                this.updateDailyGoalDisplay();
                this.initializeBreakReminders();
                this.renderCalendar();
                this.initializeSectionVisibility();

                // Show success message
                this.updateSessionStatus('Data imported successfully! 🎉', '#10b981');
                setTimeout(() => {
                    this.updateSessionStatus('Ready to work', '#10b981');
                }, 3000);

            } catch (error) {
                alert('Error importing data: ' + error.message);
            }
        };
        
        reader.readAsText(file);
        
        // Reset file input
        event.target.value = '';
    }

    // This method is now unused - kept for compatibility but does nothing
    updateRealTimeProjectProgress(currentSessionTime = 0) {
        // This method has been replaced with targeted updates to prevent flickering
        // Projects grid is now only rebuilt when necessary, and live updates
        // are handled by updateActiveProjectTime() for better performance
    }

    // Project editing methods
    hideProjectEditModal() {
        this.projectEditModalOverlay.classList.remove('active');
        this.projectEditForm.reset();
    }

    handleEditProject(e) {
        e.preventDefault();
        const projectId = this.currentEditingProjectId;
        const project = this.projects[projectId];
        
        project.name = this.editProjectName.value.trim();
        project.color = this.editProjectColor.value;
        project.goal = (parseInt(this.editProjectGoalHours.value) * 60 + parseInt(this.editProjectGoalMinutes.value)) * 60 * 1000;

        this.saveData();
        this.updateProjectSelector();
        this.updateProjectsGrid();
        this.updateStats();
        this.hideProjectEditModal();
    }

    showProjectEditModal(projectId) {
        this.currentEditingProjectId = projectId;
        const project = this.projects[projectId];
        
        // Fill form with current project data
        this.editProjectName.value = project.name;
        this.editProjectColor.value = project.color;
        
        const goalHours = Math.floor(project.goal / (1000 * 60 * 60));
        const goalMinutes = Math.floor((project.goal % (1000 * 60 * 60)) / (1000 * 60));
        this.editProjectGoalHours.value = goalHours;
        this.editProjectGoalMinutes.value = goalMinutes;
        
        // Show project stats
        this.editProjectTime.textContent = this.formatDuration(project.totalTime);
        this.editProjectSessions.textContent = project.sessions.length;
        
        // Disable delete button for general project
        this.deleteProjectBtn.disabled = projectId === 'general';
        if (projectId === 'general') {
            this.deleteProjectBtn.textContent = 'Cannot delete General Work';
        } else {
            this.deleteProjectBtn.innerHTML = '<i class="fas fa-trash"></i> Delete Project';
        }
        
        this.projectEditModalOverlay.classList.add('active');
        this.editProjectName.focus();
    }

    handleDeleteProject() {
        const projectId = this.currentEditingProjectId;
        const project = this.projects[projectId];
        
        if (projectId === 'general') {
            alert('Cannot delete the General Work project.');
            return;
        }
        
        const confirmMessage = `Are you sure you want to delete "${project.name}"?\n\nThis will transfer ${this.formatDuration(project.totalTime)} of tracked time to "General Work".`;
        
        if (confirm(confirmMessage)) {
            // Transfer time and sessions to general project
            if (!this.projects.general) {
                this.projects.general = {
                    name: 'General Work',
                    color: '#10b981',
                    totalTime: 0,
                    sessions: [],
                    goal: 0
                };
            }
            
            // Add time and sessions to general project
            this.projects.general.totalTime += project.totalTime;
            this.projects.general.sessions = this.projects.general.sessions.concat(
                project.sessions.map(session => ({
                    ...session,
                    project: 'general',
                    originalProject: project.name
                }))
            );
            
            // Remove the project
            delete this.projects[projectId];
            
            // If this was the current selected project, switch to general
            if (this.currentProject === projectId) {
                this.currentProject = 'general';
            }
            
            this.saveData();
            this.updateProjectSelector();
            this.buildProjectsGrid();
            this.updateStats();
            this.hideProjectEditModal();
            
            // Show success message
            this.updateSessionStatus(`Project deleted. Time transferred to General Work.`, '#f59e0b');
            setTimeout(() => {
                this.updateSessionStatus('Ready to work', '#10b981');
            }, 3000);
        }
    }

    saveSettingsInstantly() {
        this.saveSettings();
    }

    renderCalendar() {
        const year = this.currentCalendarMonth.getFullYear();
        const month = this.currentCalendarMonth.getMonth();
        
        // Update month display
        this.currentMonth.textContent = new Intl.DateTimeFormat('en-US', { 
            month: 'long', 
            year: 'numeric' 
        }).format(this.currentCalendarMonth);
        
        // Clear existing days
        this.calendarDays.innerHTML = '';
        
        // Get first day of month and number of days
        const firstDay = new Date(year, month, 1);
        const lastDay = new Date(year, month + 1, 0);
        const daysInMonth = lastDay.getDate();
        
        // Adjust for Monday start (0 = Sunday, 1 = Monday, etc.)
        const startDayOfWeek = (firstDay.getDay() + 6) % 7;
        
        // Add previous month's trailing days
        const prevMonth = new Date(year, month - 1, 0);
        for (let i = startDayOfWeek - 1; i >= 0; i--) {
            const dayNum = prevMonth.getDate() - i;
            const dayElement = this.createDayElement(dayNum, year, month - 1, true);
            this.calendarDays.appendChild(dayElement);
        }
        
        // Add current month's days
        for (let day = 1; day <= daysInMonth; day++) {
            const dayElement = this.createDayElement(day, year, month, false);
            this.calendarDays.appendChild(dayElement);
        }
        
        // Add next month's leading days
        const totalCells = this.calendarDays.children.length;
        const remainingCells = 42 - totalCells; // 6 rows * 7 days
        for (let day = 1; day <= remainingCells; day++) {
            const dayElement = this.createDayElement(day, year, month + 1, true);
            this.calendarDays.appendChild(dayElement);
        }
    }

    createDayElement(day, year, month, isOtherMonth) {
        const dayElement = document.createElement('div');
        dayElement.className = 'calendar-day';
        
        if (isOtherMonth) {
            dayElement.classList.add('other-month');
        }
        
        const dateKey = `${year}-${month.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')}`;
        const today = new Date();
        const isToday = dateKey === `${today.getFullYear()}-${(today.getMonth()).toString().padStart(2, '0')}-${today.getDate().toString().padStart(2, '0')}`;
        
        if (isToday && !isOtherMonth) {
            dayElement.classList.add('today');
        }
        
        // Get day settings
        const daySettings = this.daySettings[dateKey] || { isWorkDay: true, goal: this.dailyGoal, note: '' };
        const trackedTime = this.dailyData[new Date(year, month, day).toDateString()] || 0;
        
        // Add day number
        const dayNumber = document.createElement('div');
        dayNumber.className = 'day-number';
        dayNumber.textContent = day;
        dayElement.appendChild(dayNumber);
        
        if (!isOtherMonth) {
            // Add styling based on day type
            if (!daySettings.isWorkDay) {
                dayElement.classList.add('no-work-day');
                const noWorkIndicator = document.createElement('div');
                noWorkIndicator.className = 'no-work-indicator';
                noWorkIndicator.textContent = 'No work';
                dayElement.appendChild(noWorkIndicator);
            } else {
                // Show goal and progress for work days
                if (daySettings.goal > 0) {
                    const dayGoal = document.createElement('div');
                    dayGoal.className = 'day-goal';
                    dayGoal.textContent = `Goal: ${this.formatDuration(daySettings.goal)}`;
                    dayElement.appendChild(dayGoal);
                    
                    // Check if goal is met
                    if (trackedTime >= daySettings.goal) {
                        dayElement.classList.add('goal-met');
                        if (trackedTime > daySettings.goal * 1.2) {
                            dayElement.classList.add('goal-exceeded');
                        }
                    }
                }
                
                if (trackedTime > 0) {
                    const dayProgress = document.createElement('div');
                    dayProgress.className = 'day-progress';
                    dayProgress.textContent = this.formatDuration(trackedTime);
                    dayElement.appendChild(dayProgress);
                }
            }
            
            // Add note indicator
            if (daySettings.note) {
                const noteDisplay = document.createElement('div');
                noteDisplay.className = 'day-note-text';
                noteDisplay.textContent = daySettings.note;
                noteDisplay.title = daySettings.note; // Keep tooltip for longer notes
                dayElement.appendChild(noteDisplay);
            }
            
            // Add click handler
            dayElement.addEventListener('click', () => this.showDaySettings(year, month, day));
        }
        
        return dayElement;
    }

    previousMonth() {
        this.currentCalendarMonth.setMonth(this.currentCalendarMonth.getMonth() - 1);
        this.renderCalendar();
    }

    nextMonth() {
        this.currentCalendarMonth.setMonth(this.currentCalendarMonth.getMonth() + 1);
        this.renderCalendar();
    }

    showDaySettings(year, month, day) {
        const dateKey = `${year}-${month.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')}`;
        const date = new Date(year, month, day);
        this.selectedDateKey = dateKey;
        
        // Fill modal with current settings
        const daySettings = this.daySettings[dateKey] || { 
            isWorkDay: true, 
            goal: this.dailyGoal || 8 * 60 * 60 * 1000, 
            note: '' 
        };
        
        this.daySettingsTitle.textContent = `Settings for ${date.toLocaleDateString()}`;
        this.selectedDate.textContent = date.toLocaleDateString('en-US', { 
            weekday: 'long', 
            year: 'numeric', 
            month: 'long', 
            day: 'numeric' 
        });
        
        const trackedTime = this.dailyData[date.toDateString()] || 0;
        this.dayTrackedTime.textContent = this.formatDuration(trackedTime);
        
        this.isWorkDay.checked = daySettings.isWorkDay;
        
        const goalHours = Math.floor(daySettings.goal / (1000 * 60 * 60));
        const goalMinutes = Math.floor((daySettings.goal % (1000 * 60 * 60)) / (1000 * 60));
        this.dayGoalHours.value = goalHours;
        this.dayGoalMinutes.value = goalMinutes;
        
        this.dayNote.value = daySettings.note;
        
        this.toggleWorkDay();
        this.daySettingsModalOverlay.classList.add('active');
    }

    hideDaySettingsModal() {
        this.daySettingsModalOverlay.classList.remove('active');
        this.selectedDateKey = null;
    }

    toggleWorkDay() {
        const isWork = this.isWorkDay.checked;
        if (isWork) {
            this.goalSettingGroup.classList.remove('disabled');
        } else {
            this.goalSettingGroup.classList.add('disabled');
        }
        this.saveDaySettings();
    }

    saveDaySettings() {
        if (!this.selectedDateKey) return;
        
        const goalHours = parseInt(this.dayGoalHours.value) || 0;
        const goalMinutes = parseInt(this.dayGoalMinutes.value) || 0;
        const goal = (goalHours * 60 + goalMinutes) * 60 * 1000;
        
        this.daySettings[this.selectedDateKey] = {
            isWorkDay: this.isWorkDay.checked,
            goal: goal,
            note: this.dayNote.value.trim()
        };
        
        localStorage.setItem('timetracker_day_settings', JSON.stringify(this.daySettings));
        this.renderCalendar();
    }

    loadDaySettings() {
        const saved = localStorage.getItem('timetracker_day_settings');
        return saved ? JSON.parse(saved) : {};
    }

    initializeSectionVisibility() {
        // Apply saved visibility states
        this.applySectionVisibility('currentSession', this.currentSessionContent, this.currentSessionToggle);
        this.applySectionVisibility('dailySummary', this.dailySummaryContent, this.dailySummaryToggle);
        this.applySectionVisibility('projects', this.projectsContent, this.projectsToggle);
        this.applySectionVisibility('historical', this.historicalContent, this.historicalToggle);
        this.applySectionVisibility('calendar', this.calendarContent, this.calendarToggle);
    }

    toggleSection(sectionName) {
        const isVisible = this.sectionVisibility[sectionName];
        this.sectionVisibility[sectionName] = !isVisible;
        
        // Get the appropriate elements
        let contentElement, toggleElement;
        switch (sectionName) {
            case 'currentSession':
                contentElement = this.currentSessionContent;
                toggleElement = this.currentSessionToggle;
                break;
            case 'dailySummary':
                contentElement = this.dailySummaryContent;
                toggleElement = this.dailySummaryToggle;
                break;
            case 'projects':
                contentElement = this.projectsContent;
                toggleElement = this.projectsToggle;
                break;
            case 'historical':
                contentElement = this.historicalContent;
                toggleElement = this.historicalToggle;
                break;
            case 'calendar':
                contentElement = this.calendarContent;
                toggleElement = this.calendarToggle;
                break;
        }
        
        this.applySectionVisibility(sectionName, contentElement, toggleElement);
        this.saveSectionVisibility();
    }

    applySectionVisibility(sectionName, contentElement, toggleElement) {
        const isVisible = this.sectionVisibility[sectionName];
        
        if (isVisible) {
            contentElement.classList.remove('collapsed');
            toggleElement.classList.remove('collapsed');
            toggleElement.title = `Hide ${this.getSectionDisplayName(sectionName)}`;
        } else {
            contentElement.classList.add('collapsed');
            toggleElement.classList.add('collapsed');
            toggleElement.title = `Show ${this.getSectionDisplayName(sectionName)}`;
        }
    }

    getSectionDisplayName(sectionName) {
        const names = {
            'currentSession': 'Current Session',
            'dailySummary': 'Today\'s Progress',
            'projects': 'Projects',
            'historical': 'Long-term Progress',
            'calendar': 'Calendar'
        };
        return names[sectionName] || sectionName;
    }

    loadSectionVisibility() {
        const saved = localStorage.getItem('timetracker_section_visibility');
        if (saved) {
            return JSON.parse(saved);
        }
        // Default: all sections visible
        return {
            currentSession: true,
            dailySummary: true,
            projects: true,
            historical: true,
            calendar: true
        };
    }

    saveSectionVisibility() {
        localStorage.setItem('timetracker_section_visibility', JSON.stringify(this.sectionVisibility));
    }

    // Full Focus Mode Methods
    showFocusMode() {
        this.focusMode = true;
        this.focusOverlay.classList.add('active');
        
        // Update project name
        const currentProjectName = this.projects[this.currentProject]?.name || 'General Work';
        this.focusProjectName.textContent = currentProjectName;
        
        // Set goal time (default 1.5 hours or current project goal)
        const projectGoal = this.projects[this.currentProject]?.goal;
        if (projectGoal && projectGoal > 0) {
            this.focusGoalTime = projectGoal;
        } else {
            this.focusGoalTime = 90 * 60 * 1000; // 1.5 hours default
        }
        this.focusGoal.textContent = this.formatDuration(this.focusGoalTime);
        
        // Update displays
        this.updateFocusDisplay(this.isRunning ? (this.isPaused ? this.pausedTime : Date.now() - this.startTime) : 0);
        this.updateFocusControls();
        
        // Request wake lock to prevent screen from sleeping
        this.requestWakeLock();
        
        // Request fullscreen if supported
        if (document.documentElement.requestFullscreen) {
            document.documentElement.requestFullscreen().catch(() => {
                // Fullscreen failed, continue anyway
            });
        }
        
        // Hide body scroll
        document.body.style.overflow = 'hidden';
    }
    
    hideFocusMode() {
        this.focusMode = false;
        this.focusOverlay.classList.remove('active');
        
        // Release wake lock to allow screen to sleep normally
        this.releaseWakeLock();
        
        // Exit fullscreen if active
        if (document.fullscreenElement) {
            document.exitFullscreen().catch(() => {
                // Exit fullscreen failed, continue anyway
            });
        }
        
        // Restore body scroll
        document.body.style.overflow = '';
    }
    
    updateFocusDisplay(currentTime) {
        // Update timer
        this.focusTimer.textContent = this.formatTime(currentTime);
        
        // Calculate progress percentage for fuel gauge
        const progressPercent = Math.min((currentTime / this.focusGoalTime) * 100, 100);
        this.fuelFill.style.height = `${progressPercent}%`;
        
        // Update remaining time
        const remaining = Math.max(this.focusGoalTime - currentTime, 0);
        if (remaining > 0) {
            this.focusRemaining.textContent = this.formatDuration(remaining);
        } else {
            this.focusRemaining.textContent = '🎉 Goal Reached!';
        }
        
        // Update booster flames based on timer state
        if (this.isRunning && !this.isPaused) {
            this.boosterFlames.classList.add('active');
        } else {
            this.boosterFlames.classList.remove('active');
        }
        
        // Update controls
        this.updateFocusControls();
    }
    
    updateFocusControls() {
        // Update button states to match main timer
        this.focusStartBtn.style.display = (this.isRunning && !this.isPaused) ? 'none' : 'flex';
        this.focusPauseBtn.style.display = (this.isRunning && !this.isPaused) ? 'flex' : 'none';
        this.focusStopBtn.disabled = !this.isRunning;
    }

    // Wake Lock API Methods
    async requestWakeLock() {
        // Check if Wake Lock API is supported
        if ('wakeLock' in navigator) {
            try {
                this.wakeLock = await navigator.wakeLock.request('screen');
                console.log('🔒 Wake lock acquired - screen will stay awake during focus mode');
                
                // Show wake lock status indicator
                if (this.wakeLockStatus) {
                    this.wakeLockStatus.classList.add('active');
                }
                
                // Listen for wake lock release (can happen when tab becomes inactive)
                this.wakeLock.addEventListener('release', () => {
                    console.log('🔓 Wake lock released');
                    if (this.wakeLockStatus) {
                        this.wakeLockStatus.classList.remove('active');
                    }
                });
            } catch (err) {
                console.warn('Failed to acquire wake lock:', err.message);
                // Wake lock failed, but focus mode can continue without it
                if (this.wakeLockStatus) {
                    this.wakeLockStatus.classList.remove('active');
                }
            }
        } else {
            console.warn('Wake Lock API not supported in this browser');
            // Continue without wake lock - not all browsers support it
            if (this.wakeLockStatus) {
                this.wakeLockStatus.classList.remove('active');
            }
        }
    }

    releaseWakeLock() {
        if (this.wakeLock) {
            try {
                this.wakeLock.release();
                this.wakeLock = null;
                console.log('🔓 Wake lock manually released');
            } catch (err) {
                console.warn('Failed to release wake lock:', err.message);
            }
        }
        
        // Hide wake lock status indicator
        if (this.wakeLockStatus) {
            this.wakeLockStatus.classList.remove('active');
        }
    }

    // Bulk Calendar Edit Methods
    showBulkEditModal() {
        this.bulkEditModalOverlay.classList.add('active');
        
        // Set default dates to current month
        const today = new Date();
        const startOfMonth = new Date(today.getFullYear(), today.getMonth(), 1);
        const endOfMonth = new Date(today.getFullYear(), today.getMonth() + 1, 0);
        
        this.bulkStartDate.value = startOfMonth.toISOString().split('T')[0];
        this.bulkEndDate.value = endOfMonth.toISOString().split('T')[0];
    }

    hideBulkEditModal() {
        this.bulkEditModalOverlay.classList.remove('active');
        this.bulkStartDate.value = '';
        this.bulkEndDate.value = '';
        this.bulkNote.value = '';
        this.bulkMarkAsNoWork.checked = true;
    }

    applyDateRange() {
        const startDate = new Date(this.bulkStartDate.value);
        const endDate = new Date(this.bulkEndDate.value);
        const isNoWork = this.bulkMarkAsNoWork.checked;
        const note = this.bulkNote.value.trim();

        if (!this.bulkStartDate.value || !this.bulkEndDate.value) {
            alert('Please select both start and end dates.');
            return;
        }

        if (startDate > endDate) {
            alert('Start date must be before or equal to end date.');
            return;
        }

        const confirmMessage = `Apply settings to ${Math.ceil((endDate - startDate) / (1000 * 60 * 60 * 24)) + 1} days from ${startDate.toLocaleDateString()} to ${endDate.toLocaleDateString()}?`;
        
        if (!confirm(confirmMessage)) {
            return;
        }

        // Apply settings to date range
        const currentDate = new Date(startDate);
        let daysModified = 0;

        while (currentDate <= endDate) {
            const dateKey = `${currentDate.getFullYear()}-${(currentDate.getMonth()).toString().padStart(2, '0')}-${currentDate.getDate().toString().padStart(2, '0')}`;
            
            if (!this.daySettings[dateKey]) {
                this.daySettings[dateKey] = {
                    isWorkDay: true,
                    goal: this.dailyGoal || 8 * 60 * 60 * 1000,
                    note: ''
                };
            }

            this.daySettings[dateKey].isWorkDay = !isNoWork;
            if (note) {
                this.daySettings[dateKey].note = note;
            }

            daysModified++;
            currentDate.setDate(currentDate.getDate() + 1);
        }

        localStorage.setItem('timetracker_day_settings', JSON.stringify(this.daySettings));
        this.renderCalendar();
        this.hideBulkEditModal();

        alert(`Successfully updated ${daysModified} days!`);
    }

    markWeekends(period) {
        const today = new Date();
        let startDate, endDate;
        
        if (period === 'month') {
            startDate = new Date(today.getFullYear(), today.getMonth(), 1);
            endDate = new Date(today.getFullYear(), today.getMonth() + 1, 0);
        } else { // year
            startDate = new Date(today.getFullYear(), 0, 1);
            endDate = new Date(today.getFullYear(), 11, 31);
        }

        const confirmMessage = `Mark all weekends in ${period === 'month' ? 'this month' : 'this year'} as no-work days?`;
        
        if (!confirm(confirmMessage)) {
            return;
        }

        const currentDate = new Date(startDate);
        let weekendsMarked = 0;

        while (currentDate <= endDate) {
            const dayOfWeek = currentDate.getDay();
            
            // Saturday (6) or Sunday (0)
            if (dayOfWeek === 0 || dayOfWeek === 6) {
                const dateKey = `${currentDate.getFullYear()}-${(currentDate.getMonth()).toString().padStart(2, '0')}-${currentDate.getDate().toString().padStart(2, '0')}`;
                
                if (!this.daySettings[dateKey]) {
                    this.daySettings[dateKey] = {
                        isWorkDay: true,
                        goal: this.dailyGoal || 8 * 60 * 60 * 1000,
                        note: ''
                    };
                }

                this.daySettings[dateKey].isWorkDay = false;
                if (!this.daySettings[dateKey].note) {
                    this.daySettings[dateKey].note = 'Weekend';
                }
                weekendsMarked++;
            }

            currentDate.setDate(currentDate.getDate() + 1);
        }

        localStorage.setItem('timetracker_day_settings', JSON.stringify(this.daySettings));
        this.renderCalendar();

        alert(`Successfully marked ${weekendsMarked} weekend days!`);
    }

    clearWeekends(period) {
        const today = new Date();
        let startDate, endDate;
        
        if (period === 'month') {
            startDate = new Date(today.getFullYear(), today.getMonth(), 1);
            endDate = new Date(today.getFullYear(), today.getMonth() + 1, 0);
        } else { // year
            startDate = new Date(today.getFullYear(), 0, 1);
            endDate = new Date(today.getFullYear(), 11, 31);
        }

        const confirmMessage = `Clear weekend settings for ${period === 'month' ? 'this month' : 'this year'}?`;
        
        if (!confirm(confirmMessage)) {
            return;
        }

        const currentDate = new Date(startDate);
        let weekendsCleared = 0;

        while (currentDate <= endDate) {
            const dayOfWeek = currentDate.getDay();
            
            // Saturday (6) or Sunday (0)
            if (dayOfWeek === 0 || dayOfWeek === 6) {
                const dateKey = `${currentDate.getFullYear()}-${(currentDate.getMonth()).toString().padStart(2, '0')}-${currentDate.getDate().toString().padStart(2, '0')}`;
                
                if (this.daySettings[dateKey]) {
                    this.daySettings[dateKey].isWorkDay = true;
                    if (this.daySettings[dateKey].note === 'Weekend') {
                        this.daySettings[dateKey].note = '';
                    }
                    weekendsCleared++;
                }
            }

            currentDate.setDate(currentDate.getDate() + 1);
        }

        localStorage.setItem('timetracker_day_settings', JSON.stringify(this.daySettings));
        this.renderCalendar();

        alert(`Successfully cleared ${weekendsCleared} weekend settings!`);
    }

    applyHolidayPreset(holiday) {
        const today = new Date();
        const year = today.getFullYear();
        let startDate, endDate, note;

        switch (holiday) {
            case 'christmas':
                startDate = new Date(year, 11, 23); // Dec 23
                endDate = new Date(year, 11, 30);   // Dec 30
                note = 'Christmas Week';
                break;
            case 'newyear':
                startDate = new Date(year, 11, 31); // Dec 31
                endDate = new Date(year + 1, 0, 5); // Jan 5
                note = 'New Year Week';
                break;
            case 'easter':
                // Simple Easter calculation (not perfect but good enough)
                const easter = this.calculateEaster(year);
                startDate = new Date(easter);
                startDate.setDate(easter.getDate() - 1); // Good Friday
                endDate = new Date(easter);
                endDate.setDate(easter.getDate() + 1); // Easter Monday
                note = 'Easter Weekend';
                break;
            case 'summer':
                startDate = new Date(year, 6, 15); // July 15
                endDate = new Date(year, 6, 28);   // July 28
                note = 'Summer Break';
                break;
            default:
                return;
        }

        const confirmMessage = `Apply ${note} from ${startDate.toLocaleDateString()} to ${endDate.toLocaleDateString()}?`;
        
        if (!confirm(confirmMessage)) {
            return;
        }

        const currentDate = new Date(startDate);
        let daysMarked = 0;

        while (currentDate <= endDate) {
            const dateKey = `${currentDate.getFullYear()}-${(currentDate.getMonth()).toString().padStart(2, '0')}-${currentDate.getDate().toString().padStart(2, '0')}`;
            
            if (!this.daySettings[dateKey]) {
                this.daySettings[dateKey] = {
                    isWorkDay: true,
                    goal: this.dailyGoal || 8 * 60 * 60 * 1000,
                    note: ''
                };
            }

            this.daySettings[dateKey].isWorkDay = false;
            this.daySettings[dateKey].note = note;
            daysMarked++;

            currentDate.setDate(currentDate.getDate() + 1);
        }

        localStorage.setItem('timetracker_day_settings', JSON.stringify(this.daySettings));
        this.renderCalendar();

        alert(`Successfully applied ${note} to ${daysMarked} days!`);
    }

    calculateEaster(year) {
        // Simple Easter calculation (Western Christianity)
        const a = year % 19;
        const b = Math.floor(year / 100);
        const c = year % 100;
        const d = Math.floor(b / 4);
        const e = b % 4;
        const f = Math.floor((b + 8) / 25);
        const g = Math.floor((b - f + 1) / 3);
        const h = (19 * a + b - d - g + 15) % 30;
        const i = Math.floor(c / 4);
        const k = c % 4;
        const l = (32 + 2 * e + 2 * i - h - k) % 7;
        const m = Math.floor((a + 11 * h + 22 * l) / 451);
        const month = Math.floor((h + l - 7 * m + 114) / 31);
        const day = ((h + l - 7 * m + 114) % 31) + 1;
        
        return new Date(year, month - 1, day);
    }

    clearCalendarData(period) {
        const today = new Date();
        let startDate, endDate;
        
        if (period === 'month') {
            startDate = new Date(today.getFullYear(), today.getMonth(), 1);
            endDate = new Date(today.getFullYear(), today.getMonth() + 1, 0);
        } else { // year
            startDate = new Date(today.getFullYear(), 0, 1);
            endDate = new Date(today.getFullYear(), 11, 31);
        }

        const confirmMessage = `Clear all calendar settings for ${period === 'month' ? 'this month' : 'this year'}? This will reset all days to default work day settings.`;
        
        if (!confirm(confirmMessage)) {
            return;
        }

        const currentDate = new Date(startDate);
        let daysCleared = 0;

        while (currentDate <= endDate) {
            const dateKey = `${currentDate.getFullYear()}-${(currentDate.getMonth()).toString().padStart(2, '0')}-${currentDate.getDate().toString().padStart(2, '0')}`;
            
            if (this.daySettings[dateKey]) {
                delete this.daySettings[dateKey];
                daysCleared++;
            }

            currentDate.setDate(currentDate.getDate() + 1);
        }

        localStorage.setItem('timetracker_day_settings', JSON.stringify(this.daySettings));
        this.renderCalendar();

        alert(`Successfully cleared settings for ${daysCleared} days!`);
    }
    
    // Drag and Drop Module Rearrangement
    initializeDragAndDrop() {
        this.moduleOrder = this.loadModuleOrder();
        this.applyModuleOrder();
        this.setupDragAndDropEvents();
    }
    
    loadModuleOrder() {
        const saved = localStorage.getItem('timetracker_module_order');
        return saved ? JSON.parse(saved) : ['currentSession', 'dailySummary', 'projects', 'historical', 'calendar'];
    }
    
    saveModuleOrder() {
        localStorage.setItem('timetracker_module_order', JSON.stringify(this.moduleOrder));
    }
    
    applyModuleOrder() {
        const mainContent = document.querySelector('.main-content');
        const modules = {};
        
        // Collect all modules
        this.moduleOrder.forEach(moduleId => {
            const module = document.querySelector(`[data-module="${moduleId}"]`);
            if (module) {
                modules[moduleId] = module;
            }
        });
        
        // Reorder modules according to saved order
        this.moduleOrder.forEach(moduleId => {
            if (modules[moduleId]) {
                mainContent.appendChild(modules[moduleId]);
            }
        });
    }
    
    setupDragAndDropEvents() {
        const modules = document.querySelectorAll('.draggable-module');
        const mainContent = document.querySelector('.main-content');
        
        modules.forEach(module => {
            const dragHandle = module.querySelector('.drag-handle');
            
            // Make module draggable via drag handle
            dragHandle.addEventListener('mousedown', (e) => {
                this.startDrag(e, module);
            });
            
            // Prevent text selection during drag
            dragHandle.addEventListener('selectstart', (e) => {
                e.preventDefault();
            });
        });
        
        // Create drop indicators
        this.createDropIndicators();
    }
    
    createDropIndicators() {
        const mainContent = document.querySelector('.main-content');
        const modules = mainContent.querySelectorAll('.draggable-module');
        
        // Remove existing indicators
        const existingIndicators = mainContent.querySelectorAll('.drop-indicator');
        existingIndicators.forEach(indicator => indicator.remove());
        
        // Add indicator before first module
        const firstIndicator = document.createElement('div');
        firstIndicator.className = 'drop-indicator';
        firstIndicator.dataset.position = '0';
        mainContent.insertBefore(firstIndicator, modules[0]);
        
        // Add indicators between and after modules
        modules.forEach((module, index) => {
            const indicator = document.createElement('div');
            indicator.className = 'drop-indicator';
            indicator.dataset.position = (index + 1).toString();
            
            // Insert after each module
            if (module.nextSibling) {
                mainContent.insertBefore(indicator, module.nextSibling);
            } else {
                mainContent.appendChild(indicator);
            }
        });
    }
    
    startDrag(e, module) {
        e.preventDefault();
        
        this.draggedModule = module;
        this.dragStartY = e.clientY;
        this.draggedModuleId = module.dataset.module;
        
        // Add dragging class
        module.classList.add('dragging');
        
        // Add event listeners for mouse movement and release
        document.addEventListener('mousemove', this.handleDragMove.bind(this));
        document.addEventListener('mouseup', this.handleDragEnd.bind(this));
        
        // Disable text selection
        document.body.style.userSelect = 'none';
        document.body.style.cursor = 'grabbing';
    }
    
    handleDragMove(e) {
        if (!this.draggedModule) return;
        
        const currentY = e.clientY;
        const mainContent = document.querySelector('.main-content');
        const indicators = mainContent.querySelectorAll('.drop-indicator');
        const modules = mainContent.querySelectorAll('.draggable-module:not(.dragging)');
        
        // Clear previous active indicators
        indicators.forEach(indicator => indicator.classList.remove('active'));
        modules.forEach(module => module.classList.remove('drag-over'));
        
        // Find the closest drop position
        let closestIndicator = null;
        let closestDistance = Infinity;
        
        indicators.forEach(indicator => {
            const rect = indicator.getBoundingClientRect();
            const distance = Math.abs(currentY - (rect.top + rect.height / 2));
            
            if (distance < closestDistance) {
                closestDistance = distance;
                closestIndicator = indicator;
            }
        });
        
        // Activate closest indicator
        if (closestIndicator && closestDistance < 100) {
            closestIndicator.classList.add('active');
            this.targetPosition = parseInt(closestIndicator.dataset.position);
        }
    }
    
    handleDragEnd(e) {
        if (!this.draggedModule) return;
        
        // Remove dragging class
        this.draggedModule.classList.remove('dragging');
        
        // Clear drag over states
        const modules = document.querySelectorAll('.draggable-module');
        const indicators = document.querySelectorAll('.drop-indicator');
        
        modules.forEach(module => module.classList.remove('drag-over'));
        indicators.forEach(indicator => indicator.classList.remove('active'));
        
        // If we have a valid target position, reorder the modules
        if (this.targetPosition !== undefined) {
            this.reorderModules(this.draggedModuleId, this.targetPosition);
        }
        
        // Clean up
        document.removeEventListener('mousemove', this.handleDragMove.bind(this));
        document.removeEventListener('mouseup', this.handleDragEnd.bind(this));
        document.body.style.userSelect = '';
        document.body.style.cursor = '';
        
        this.draggedModule = null;
        this.targetPosition = undefined;
    }
    
    reorderModules(draggedModuleId, targetPosition) {
        const currentIndex = this.moduleOrder.indexOf(draggedModuleId);
        
        if (currentIndex === -1) return;
        
        // Remove the dragged module from its current position
        this.moduleOrder.splice(currentIndex, 1);
        
        // Insert at new position
        // If target position is after the original position, adjust for the removal
        let insertPosition = targetPosition;
        if (targetPosition > currentIndex) {
            insertPosition = targetPosition - 1;
        }
        
        this.moduleOrder.splice(insertPosition, 0, draggedModuleId);
        
        // Apply the new order and save
        this.applyModuleOrder();
        this.createDropIndicators();
        this.saveModuleOrder();
        
        // Show feedback
        this.showReorderFeedback();
    }
    
    showReorderFeedback() {
        // Create temporary feedback message
        const feedback = document.createElement('div');
        feedback.textContent = 'Module order saved!';
        feedback.style.cssText = `
            position: fixed;
            top: 20px;
            right: 20px;
            background: linear-gradient(135deg, #8fb68f 0%, #7ba87b 100%);
            color: white;
            padding: 12px 20px;
            border-radius: 8px;
            font-weight: 500;
            z-index: 10000;
            opacity: 0;
            transform: translateY(-20px);
            transition: all 0.3s ease;
            box-shadow: 0 4px 12px rgba(143, 182, 143, 0.3);
        `;
        
        document.body.appendChild(feedback);
        
        // Animate in
        setTimeout(() => {
            feedback.style.opacity = '1';
            feedback.style.transform = 'translateY(0)';
        }, 100);
        
        // Remove after delay
        setTimeout(() => {
            feedback.style.opacity = '0';
            feedback.style.transform = 'translateY(-20px)';
            
            setTimeout(() => {
                if (feedback.parentNode) {
                    feedback.parentNode.removeChild(feedback);
                }
            }, 300);
        }, 2000);
    }

    updateNotificationUI() {
        const notificationSetting = document.querySelector('.setting-item:has(#breakNotificationsEnabled)');
        const existingStatus = notificationSetting.querySelector('.permission-status');
        
        // Remove existing status indicator
        if (existingStatus) {
            existingStatus.remove();
        }
        
        // Add status indicator
        const statusElement = document.createElement('div');
        statusElement.className = 'permission-status';
        statusElement.style.fontSize = '0.8rem';
        statusElement.style.marginTop = '5px';
        statusElement.style.opacity = '0.8';
        
        if (!('Notification' in window)) {
            statusElement.textContent = 'Notifications not supported in this browser';
            statusElement.style.color = '#c49494';
            this.breakNotificationsEnabled.disabled = true;
            this.breakNotificationsEnabled.checked = false;
        } else if (Notification.permission === 'granted') {
            statusElement.textContent = 'Notifications allowed';
            statusElement.style.color = '#8fb68f';
            this.breakNotificationsEnabled.disabled = false;
        } else if (Notification.permission === 'denied') {
            statusElement.textContent = 'Notifications blocked - enable in browser settings and refresh';
            statusElement.style.color = '#c49494';
            this.breakNotificationsEnabled.disabled = false; // Allow user to try again
            this.breakNotificationsEnabled.checked = false;
        } else {
            statusElement.textContent = 'Click to enable notifications';
            statusElement.style.color = '#d4b896';
            this.breakNotificationsEnabled.disabled = false;
        }
        
        notificationSetting.appendChild(statusElement);
    }
}

// Initialize the app when the page loads
document.addEventListener('DOMContentLoaded', () => {
    // Make timeTracker globally accessible for onclick handlers
    window.timeTracker = new TimeTracker();
    
    // Add some nice loading animation
    document.body.style.opacity = '0';
    document.body.style.transition = 'opacity 0.5s ease';
    
    setTimeout(() => {
        document.body.style.opacity = '1';
    }, 100);
    
    // Show welcome message for first-time users
    if (!localStorage.getItem('timetracker_projects')) {
        setTimeout(() => {
            alert('Welcome to Don\'t Overwork It! 🌿\n\nUse Ctrl/Cmd + Space to start/pause timer\nUse Ctrl/Cmd + Enter to stop timer\n\nEnjoy tracking your time beautifully!');
        }, 1000);
    }
});