app.js

// Track Split Calculator - Main Application
// UI logic and race management

// Mobile Browser Control Hiding Module - DISABLED
/* COMMENTED OUT TO PREVENT ERRORS
const MobileOptimization = (() => {
    let deferredPrompt = null;
    let isFullscreenSupported = false;
    let installPromptShown = false;
    
    function init() {
        detectCapabilities();
        setupFullscreenHandlers();
        setupPWAHandlers();
        setupOrientationLock();
        showInstallGuidance();
        
        console.log('Mobile optimization initialized');
    }
    
    function detectCapabilities() {
        // Check fullscreen API support
        isFullscreenSupported = !!(document.documentElement.requestFullscreen ||
            document.documentElement.webkitRequestFullscreen ||
            document.documentElement.mozRequestFullScreen ||
            document.documentElement.msRequestFullscreen);
        
        // Detect mobile browsers
        const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent);
        const isAndroid = /Android/.test(navigator.userAgent);
        const isSafari = /Safari/.test(navigator.userAgent) && !/Chrome/.test(navigator.userAgent);
        const isChrome = /Chrome/.test(navigator.userAgent);
        
        console.log('Mobile capabilities:', {
            isFullscreenSupported,
            isIOS,
            isAndroid,
            isSafari,
            isChrome,
            standalone: window.navigator.standalone || window.matchMedia('(display-mode: standalone)').matches
        });
    }
    
    function setupFullscreenHandlers() {
        // Add fullscreen toggle capability for Android Chrome
        if (isFullscreenSupported) {
            // Listen for fullscreen change events
            document.addEventListener('fullscreenchange', handleFullscreenChange);
            document.addEventListener('webkitfullscreenchange', handleFullscreenChange);
            document.addEventListener('mozfullscreenchange', handleFullscreenChange);
            document.addEventListener('MSFullscreenChange', handleFullscreenChange);
        }
        
        // Auto-enter fullscreen when race starts (Android Chrome)
        document.addEventListener('raceStarted', requestFullscreen);
    }
    
    function setupPWAHandlers() {
        // Listen for PWA install prompt
        window.addEventListener('beforeinstallprompt', (e) => {
            e.preventDefault();
            deferredPrompt = e;
            showPWAInstallPrompt();
        });
        
        // Listen for PWA installed event
        window.addEventListener('appinstalled', () => {
            console.log('PWA installed successfully');
            hidePWAInstallPrompt();
            deferredPrompt = null;
        });
    }
    
    function setupOrientationLock() {
        // Lock orientation to portrait for better UX
        if (screen.orientation && screen.orientation.lock) {
            screen.orientation.lock('portrait-primary').catch(err => {
                console.log('Orientation lock not supported:', err);
            });
        }
    }
    
    function requestFullscreen() {
        if (!isFullscreenSupported || isInFullscreen()) return;
        
        const element = document.documentElement;
        const requestMethod = element.requestFullscreen ||
                            element.webkitRequestFullscreen ||
                            element.mozRequestFullScreen ||
                            element.msRequestFullscreen;
        
        if (requestMethod) {
            requestMethod.call(element).catch(err => {
                console.log('Fullscreen request failed:', err);
            });
        }
    }
    
    function exitFullscreen() {
        if (!isInFullscreen()) return;
        
        const exitMethod = document.exitFullscreen ||
                         document.webkitExitFullscreen ||
                         document.mozCancelFullScreen ||
                         document.msExitFullscreen;
        
        if (exitMethod) {
            exitMethod.call(document).catch(err => {
                console.log('Exit fullscreen failed:', err);
            });
        }
    }
    
    function isInFullscreen() {
        return !!(document.fullscreenElement ||
                document.webkitFullscreenElement ||
                document.mozFullScreenElement ||
                document.msFullscreenElement);
    }
    
    function handleFullscreenChange() {
        const isFullscreen = isInFullscreen();
        document.body.classList.toggle('fullscreen-active', isFullscreen);
        console.log('Fullscreen state changed:', isFullscreen);
    }
    
    function showInstallGuidance() {
        // Only show guidance if not already installed as PWA
        if (window.navigator.standalone || window.matchMedia('(display-mode: standalone)').matches) {
            return; // Already installed or in standalone mode
        }
        
        // Check if we should show mobile-specific guidance
        const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent);
        const isAndroid = /Android/.test(navigator.userAgent);
        
        if (isIOS) {
            // iOS Safari guidance will be shown via CSS and can be dismissed
            setTimeout(showIOSGuidance, 2000);
        } else if (isAndroid && deferredPrompt) {
            // Android Chrome - use native install prompt
            setTimeout(showPWAInstallPrompt, 3000);
        }
    }
    
    function showIOSGuidance() {
        if (installPromptShown) return;
        
        const guidance = document.createElement('div');
        guidance.id = 'iosInstallGuidance';
        guidance.innerHTML = `
            <div class="install-guidance ios-guidance">
                <div class="guidance-content">
                    <h3>🏃‍♂️ Install Spliterator</h3>
                    <p>For the best racing experience with full-screen timing:</p>
                    <ol>
                        <li>Tap the share button <span class="share-icon">⬆️</span></li>
                        <li>Scroll down and tap "Add to Home Screen"</li>
                        <li>Tap "Add" to install</li>
                    </ol>
                    <p class="guidance-benefit">✨ No more browser controls blocking your Start Race button!</p>
                    <button class="guidance-dismiss" onclick="this.parentElement.parentElement.remove()">Got it</button>
                </div>
            </div>
        `;
        
        document.body.appendChild(guidance);
        installPromptShown = true;
        
        // Auto-hide after 15 seconds
        setTimeout(() => {
            if (guidance.parentElement) {
                guidance.remove();
            }
        }, 15000);
    }
    
    function showPWAInstallPrompt() {
        if (!deferredPrompt || installPromptShown) return;
        
        const prompt = document.createElement('div');
        prompt.id = 'pwaInstallPrompt';
        prompt.innerHTML = `
            <div class="install-guidance pwa-guidance">
                <div class="guidance-content">
                    <h3>🏃‍♂️ Install Spliterator</h3>
                    <p>Install for better performance and full-screen timing without browser controls.</p>
                    <div class="guidance-actions">
                        <button class="install-button">Install App</button>
                        <button class="guidance-dismiss">Maybe Later</button>
                    </div>
                </div>
            </div>
        `;
        
        document.body.appendChild(prompt);
        installPromptShown = true;
        
        // Handle install button
        prompt.querySelector('.install-button').addEventListener('click', async () => {
            if (deferredPrompt) {
                deferredPrompt.prompt();
                const { outcome } = await deferredPrompt.userChoice;
                console.log('PWA install outcome:', outcome);
                deferredPrompt = null;
            }
            prompt.remove();
        });
        
        // Handle dismiss button
        prompt.querySelector('.guidance-dismiss').addEventListener('click', () => {
            prompt.remove();
        });
        
        // Auto-hide after 20 seconds
        setTimeout(() => {
            if (prompt.parentElement) {
                prompt.remove();
            }
        }, 20000);
    }
    
    function hidePWAInstallPrompt() {
        const prompt = document.getElementById('pwaInstallPrompt');
        if (prompt) {
            prompt.remove();
        }
    }
    
    // Public API
    return {
        init,
        requestFullscreen,
        exitFullscreen,
        isInFullscreen
    };
})();
END COMMENTED OUT SECTION */

const App = (() => {
    let raceConfig = null;
    let raceStartTime = null;
    let currentLapNumber = 1;
    let raceTimer = null;
    
    // DOM elements
    const screens = {
        config: null,
        race: null,
        results: null
    };
    
    const elements = {};
    
    // Initialize application
    function init() {
        // Cache DOM elements
        cacheElements();
        
        // Setup event listeners
        setupEventListeners();
        
        // Initialize form inputs
        initializeConfigForm();
        
        // Initialize mobile optimizations (disabled for debugging)
        // MobileOptimization.init();
        
        // Load saved race data if exists
        loadSavedRace();
        
        console.log('App initialized');
    }
    
    // Cache DOM elements for better performance
    function cacheElements() {
        // Screens
        screens.config = document.getElementById('configScreen');
        screens.race = document.getElementById('raceScreen');
        screens.results = document.getElementById('resultsScreen');
        
        // Config screen elements
        elements.configForm = document.getElementById('configForm');
        elements.trackSize = document.getElementById('trackSize');
        elements.raceDistance = document.getElementById('raceDistance');
        elements.goalMinutes = document.getElementById('goalMinutes');
        elements.goalSeconds = document.getElementById('goalSeconds');
        
        // Race screen elements
        elements.raceMainTitle = document.getElementById('raceMainTitle');
        elements.lapTableBody = document.getElementById('lapTableBody');
        elements.splitButton = document.getElementById('splitButton');
        elements.undoButton = document.getElementById('undoButton');
        elements.resetBtn = document.getElementById('resetBtn');
        
        // Dashboard elements
        elements.dashGoalTime = document.getElementById('dashGoalTime');
        elements.dashElapsedTime = document.getElementById('dashElapsedTime');
        elements.dashPredictedTime = document.getElementById('dashPredictedTime');
        elements.dashLapGoal = document.getElementById('dashLapGoal');
        elements.dashLapSplit = document.getElementById('dashLapSplit');
        elements.dashLapNumber = document.getElementById('dashLapNumber');
        elements.dashLastLapFeedback = document.getElementById('dashLastLapFeedback');
        
        // Results screen elements
        elements.resultsTitle = document.getElementById('resultsTitle');
        elements.finalTime = document.getElementById('finalTime');
        elements.goalTimeSummary = document.getElementById('goalTimeSummary');
        elements.timeDifference = document.getElementById('timeDifference');
        elements.avgLapPace = document.getElementById('avgLapPace');
        elements.avgMilePace = document.getElementById('avgMilePace');
        elements.avgKmPace = document.getElementById('avgKmPace');
        elements.fastestLap = document.getElementById('fastestLap');
        elements.slowestLap = document.getElementById('slowestLap');
        elements.resultsTableBody = document.getElementById('resultsTableBody');
        elements.shareButton = document.getElementById('shareButton');
        elements.newRaceButton = document.getElementById('newRaceButton');
        
        // Preview elements
        elements.splitPreview = document.getElementById('splitPreview');
        elements.previewTableBody = document.getElementById('previewTableBody');
    }
    
    // Setup event listeners
    function setupEventListeners() {
        // Config form
        elements.configForm.addEventListener('submit', handleConfigSubmit);
        elements.trackSize.addEventListener('change', updateRaceDistances);
        elements.trackSize.addEventListener('change', updateSplitPreview);
        elements.raceDistance.addEventListener('change', updateSplitPreview);
        elements.goalMinutes.addEventListener('change', updateSplitPreview);
        elements.goalSeconds.addEventListener('change', updateSplitPreview);
        
        // Race controls
        elements.splitButton.addEventListener('click', handleSplitButton);
        elements.undoButton.addEventListener('click', handleUndo);
        elements.resetBtn.addEventListener('click', handleReset);
        
        // Results actions
        elements.shareButton.addEventListener('click', handleShare);
        elements.newRaceButton.addEventListener('click', handleNewRace);
    }
    
    // Initialize configuration form
    function initializeConfigForm() {
        // Populate minutes (0-60)
        for (let i = 0; i <= 60; i++) {
            const option = document.createElement('option');
            option.value = i;
            option.textContent = i.toString().padStart(2, '0');
            if (i === 5) option.selected = true; // Default 5 minutes
            elements.goalMinutes.appendChild(option);
        }
        
        // Populate seconds (0-59)
        for (let i = 0; i < 60; i++) {
            const option = document.createElement('option');
            option.value = i;
            option.textContent = i.toString().padStart(2, '0');
            if (i === 0) option.selected = true; // Default 0 seconds
            elements.goalSeconds.appendChild(option);
        }
        
        // Update race distances for default track
        updateRaceDistances();
        
        // Show initial preview
        updateSplitPreview();
    }
    
    // Update race distance options based on selected track
    function updateRaceDistances() {
        const trackSize = elements.trackSize.value;
        const races = SplitEngine.TRACK_CONFIGS[trackSize].races;
        
        elements.raceDistance.innerHTML = '';
        races.forEach(race => {
            const option = document.createElement('option');
            option.value = race.name;
            option.textContent = race.name;
            // Set 1 Mile as default
            if (race.name === '1 Mile') {
                option.selected = true;
            }
            elements.raceDistance.appendChild(option);
        });
    }
    
    // Update split preview when configuration changes
    function updateSplitPreview() {
        try {
            const trackSize = parseInt(elements.trackSize.value);
            const raceName = elements.raceDistance.value;
            const minutes = parseInt(elements.goalMinutes.value);
            const seconds = parseInt(elements.goalSeconds.value);
            const goalTimeSeconds = SplitEngine.parseTime(minutes, seconds);
            
            // Calculate preview config
            const previewConfig = SplitEngine.calculateRaceConfig(trackSize, raceName, goalTimeSeconds);
            
            // Populate preview table
            elements.previewTableBody.innerHTML = '';
            previewConfig.laps.forEach(lap => {
                const row = document.createElement('tr');
                
                // Lap number
                const lapCell = document.createElement('td');
                lapCell.textContent = lap.lapNumber;
                row.appendChild(lapCell);
                
                // Distance
                const distanceCell = document.createElement('td');
                distanceCell.textContent = `${lap.distance}m`;
                row.appendChild(distanceCell);
                
                // Target split
                const targetCell = document.createElement('td');
                targetCell.textContent = SplitEngine.formatTime(lap.targetSplit);
                row.appendChild(targetCell);
                
                // Cumulative
                const cumulativeCell = document.createElement('td');
                cumulativeCell.textContent = SplitEngine.formatTime(lap.targetCumulative);
                row.appendChild(cumulativeCell);
                
                elements.previewTableBody.appendChild(row);
            });
            
            // Show the preview
            elements.splitPreview.classList.add('visible');
        } catch (error) {
            console.error('Failed to update preview:', error);
            elements.splitPreview.classList.remove('visible');
        }
    }
    
    // Handle configuration form submission
    function handleConfigSubmit(e) {
        e.preventDefault();
        
        const trackSize = parseInt(elements.trackSize.value);
        const raceName = elements.raceDistance.value;
        const minutes = parseInt(elements.goalMinutes.value);
        const seconds = parseInt(elements.goalSeconds.value);
        const goalTimeSeconds = SplitEngine.parseTime(minutes, seconds);
        
        // Calculate race configuration
        try {
            raceConfig = SplitEngine.calculateRaceConfig(trackSize, raceName, goalTimeSeconds);
            startRace();
        } catch (error) {
            console.error('Failed to create race configuration:', error);
            alert('Error configuring race. Please try again.');
        }
    }
    
    // Start the race
    function startRace() {
        // Switch to race screen
        switchScreen('race');
        
        // Reset race state and START THE TIMER
        raceStartTime = performance.now();
        currentLapNumber = 1;
        
        // Stop any existing timer
        if (raceTimer) {
            cancelAnimationFrame(raceTimer);
            raceTimer = null;
        }
        
        // Update UI (main title and dashboard are handled by initializeDashboard)
        
        // Initialize dashboard
        initializeDashboard();
        
        // Populate lap table
        populateLapTable();
        
        // Update split button
        updateSplitButton();
        
        // Disable undo button
        elements.undoButton.disabled = true;
        
        // Start the running timer display
        updateTimer();
        
        // Save race config
        saveRaceConfig();
    }
    
    // Populate lap table with target splits
    function populateLapTable() {
        elements.lapTableBody.innerHTML = '';
        
        raceConfig.laps.forEach(lap => {
            const row = createLapRow(lap);
            elements.lapTableBody.appendChild(row);
        });
        
        // Highlight current lap
        highlightCurrentLap();
    }
    
    // Create a lap table row
    function createLapRow(lap) {
        const row = document.createElement('tr');
        row.id = `lap-${lap.lapNumber}`;
        row.className = lap.lapNumber === currentLapNumber ? 'current-lap' : '';
        
        // Lap number
        const lapCell = document.createElement('td');
        lapCell.textContent = lap.lapNumber;
        row.appendChild(lapCell);
        
        // Target split
        const targetCell = document.createElement('td');
        targetCell.textContent = SplitEngine.formatTime(lap.targetSplit);
        row.appendChild(targetCell);
        
        // Actual split
        const actualCell = document.createElement('td');
        actualCell.className = 'actual-split';
        actualCell.textContent = lap.actualSplit !== null ? SplitEngine.formatTime(lap.actualSplit) : '--';
        row.appendChild(actualCell);
        
        // Difference
        const diffCell = document.createElement('td');
        diffCell.className = 'difference';
        if (lap.difference !== null) {
            const diffText = lap.difference > 0 ? `+${lap.difference}` : lap.difference.toString();
            diffCell.textContent = diffText;
            diffCell.classList.add(lap.difference > 0 ? 'diff-positive' : lap.difference < 0 ? 'diff-negative' : 'diff-zero');
        } else {
            diffCell.textContent = '--';
        }
        row.appendChild(diffCell);
        
        // Cumulative time (actual or projected)
        const cumulativeCell = document.createElement('td');
        cumulativeCell.className = 'cumulative';
        
        if (lap.actualCumulative !== null) {
            // Show actual cumulative for completed laps
            cumulativeCell.textContent = SplitEngine.formatTime(lap.actualCumulative);
        } else {
            // Calculate and show projected cumulative for future laps
            const projectedTime = calculateProjectedCumulative(lap.lapNumber);
            if (projectedTime !== null) {
                cumulativeCell.textContent = SplitEngine.formatTime(projectedTime);
                cumulativeCell.style.fontStyle = 'italic';
                cumulativeCell.style.opacity = '0.7';
            } else {
                cumulativeCell.textContent = '--';
            }
        }
        row.appendChild(cumulativeCell);
        
        // Add fastest/slowest markers
        if (lap.isFastest) row.classList.add('fastest-lap');
        if (lap.isSlowest) row.classList.add('slowest-lap');
        if (lap.actualSplit !== null) row.classList.add('completed-lap');
        
        return row;
    }
    
    // Calculate projected cumulative time for future laps
    function calculateProjectedCumulative(lapNumber) {
        if (!raceConfig) return null;
        
        // Find the last completed lap
        let lastCompletedLap = null;
        for (let i = lapNumber - 2; i >= 0; i--) {
            if (raceConfig.laps[i].actualCumulative !== null) {
                lastCompletedLap = raceConfig.laps[i];
                break;
            }
        }
        
        // If no laps completed yet, use target cumulative
        if (!lastCompletedLap) {
            return raceConfig.laps[lapNumber - 1].targetCumulative;
        }
        
        // Calculate projected time: actual cumulative of last lap + remaining target splits
        let projectedTime = lastCompletedLap.actualCumulative;
        for (let i = lastCompletedLap.lapNumber; i < lapNumber; i++) {
            projectedTime += raceConfig.laps[i].targetSplit;
        }
        
        return projectedTime;
    }
    
    // Initialize dashboard with race data
    function initializeDashboard() {
        if (!raceConfig) return;
        
        // Set main race title
        elements.raceMainTitle.textContent = `Spliterator: ${raceConfig.raceName}`;
        
        // Set race info in dashboard
        elements.dashGoalTime.textContent = SplitEngine.formatTime(raceConfig.goalTimeSeconds, false);
        elements.dashElapsedTime.textContent = '0:00';
        elements.dashPredictedTime.textContent = SplitEngine.formatTime(raceConfig.goalTimeSeconds);
        
        // Set current lap info with tenths
        const currentLap = raceConfig.laps[currentLapNumber - 1];
        elements.dashLapGoal.textContent = currentLap.targetSplit.toFixed(1);
        elements.dashLapSplit.textContent = '0.0';
        elements.dashLapNumber.textContent = currentLapNumber;
        
        // Initialize feedback line - set ready state
        console.log('Attempting to initialize feedback bar...');
        const feedbackElement = document.getElementById('dashLastLapFeedback');
        console.log('feedbackElement:', feedbackElement);
        
        if (feedbackElement) {
            const feedbackTextEl = feedbackElement.querySelector('.feedback-text');
            console.log('feedbackTextEl:', feedbackTextEl);
            
            if (feedbackTextEl) {
                feedbackTextEl.textContent = "And they're off!";
                feedbackElement.className = 'last-lap-feedback on-pace';
                console.log('Feedback bar initialized successfully:', feedbackTextEl.textContent);
            } else {
                console.error('feedback-text span not found inside dashLastLapFeedback!');
            }
        } else {
            console.error('dashLastLapFeedback element not found! Check HTML structure.');
        }
        
        console.log('Dashboard initialization complete');
    }
    
    // Update dashboard with real-time data
    function updateDashboard(elapsedSeconds) {
        if (!raceConfig) return;
        
        // Update elapsed time
        elements.dashElapsedTime.textContent = SplitEngine.formatTime(elapsedSeconds);
        
        // Calculate current lap split
        const previousLap = currentLapNumber > 1 ? raceConfig.laps[currentLapNumber - 2] : null;
        const currentLapSplit = previousLap 
            ? elapsedSeconds - previousLap.actualCumulative 
            : elapsedSeconds;
        
        // Update lap split with tenths formatting
        elements.dashLapSplit.textContent = currentLapSplit.toFixed(1);
        
        // Calculate predicted finish time
        let predictedFinish = elapsedSeconds;
        const currentLap = raceConfig.laps[currentLapNumber - 1];
        
        // Add remaining time for current lap
        const remainingCurrentLap = Math.max(0, currentLap.targetSplit - currentLapSplit);
        predictedFinish += remainingCurrentLap;
        
        // Add target splits for remaining laps
        for (let i = currentLapNumber; i < raceConfig.totalLaps; i++) {
            predictedFinish += raceConfig.laps[i].targetSplit;
        }
        
        elements.dashPredictedTime.textContent = SplitEngine.formatTime(predictedFinish);
        
        // Color code based on pace
        const targetSplit = currentLap.targetSplit;
        const splitDiff = currentLapSplit - targetSplit;
        
        // Reset classes
        elements.dashLapSplit.className = 'dash-value-large';
        elements.dashPredictedTime.className = 'dash-value-large';
        
        // Apply lap split status classes
        if (Math.abs(splitDiff) < 1) {
            // On pace (within 1 second)
            elements.dashLapSplit.classList.add('on-pace');
        } else if (splitDiff > 0) {
            // Slow
            elements.dashLapSplit.classList.add('slow');
        } else {
            // Fast
            elements.dashLapSplit.classList.add('fast');
        }
        
        // Color predicted time based on goal comparison
        const goalDiff = predictedFinish - raceConfig.goalTimeSeconds;
        if (goalDiff > 0.5) {
            // Slower than goal - red
            elements.dashPredictedTime.classList.add('slow');
        } else if (goalDiff < -0.5) {
            // Faster than goal - green
            elements.dashPredictedTime.classList.add('fast');
        } else {
            // Close to goal - blue
            elements.dashPredictedTime.classList.add('on-pace');
        }
    }
    
    // Update running timer display
    function updateTimer() {
        if (raceStartTime === null) {
            raceTimer = requestAnimationFrame(updateTimer);
            return;
        }
        
        const now = performance.now();
        const elapsedMs = now - raceStartTime;
        const elapsedSeconds = elapsedMs / 1000;
        
        // Race timer now handled by dashboard elapsed time display
        
        // Update dashboard
        updateDashboard(elapsedSeconds);
        
        // Update current lap split time in the table (only if lap is in progress)
        const currentRow = document.getElementById(`lap-${currentLapNumber}`);
        if (currentRow) {
            const actualCell = currentRow.querySelector('.actual-split');
            const currentLap = raceConfig.laps[currentLapNumber - 1];
            
            // Only update if the lap hasn't been recorded (actualSplit is null)
            if (actualCell && currentLap.actualSplit === null) {
                // Calculate current lap split
                const previousLap = currentLapNumber > 1 ? raceConfig.laps[currentLapNumber - 2] : null;
                const currentLapSplit = previousLap 
                    ? elapsedSeconds - previousLap.actualCumulative 
                    : elapsedSeconds;
                
                actualCell.textContent = SplitEngine.formatTime(currentLapSplit);
                
                // Color code based on pace vs target
                const targetSplit = currentLap.targetSplit;
                const splitDiff = currentLapSplit - targetSplit;
                
                if (Math.abs(splitDiff) < 1) {
                    // On pace (within 1 second)
                    actualCell.style.color = 'var(--primary-color)';
                } else if (splitDiff > 0) {
                    // Slow (red)
                    actualCell.style.color = 'var(--danger-color)';
                } else {
                    // Fast (green)
                    actualCell.style.color = 'var(--success-color)';
                }
            }
        }
        
        // Continue updating if race is not complete
        if (currentLapNumber <= raceConfig.totalLaps) {
            raceTimer = requestAnimationFrame(updateTimer);
        }
    }
    
    // Handle split button tap
    function handleSplitButton() {
        const now = performance.now();
        
        // Calculate elapsed time in seconds
        const elapsedMs = now - raceStartTime;
        const elapsedSeconds = elapsedMs / 1000;
        
        // Record the lap
        try {
            const result = SplitEngine.recordLapSplit(raceConfig, currentLapNumber, elapsedSeconds);
            
            // Play audio feedback
            AudioFeedback.playFeedback(result.difference);
            
            // Update UI
            updateLapRow(currentLapNumber);
            
            // Update projected times for all future laps
            updateProjectedTimes();
            
            // Update last lap feedback
            updateLastLapFeedback();
            
            // Enable undo button
            elements.undoButton.disabled = false;
            
            // Check if race is complete
            if (result.isComplete) {
                // Stop timer
                if (raceTimer) {
                    cancelAnimationFrame(raceTimer);
                    raceTimer = null;
                }
                completeRace();
            } else {
                // Move to next lap
                currentLapNumber++;
                updateSplitButton();
                highlightCurrentLap();
                scrollToCurrentLap();
            }
            
            // Save progress
            saveRaceProgress();
        } catch (error) {
            console.error('Failed to record lap:', error);
        }
    }
    
    // Update lap row with actual data
    function updateLapRow(lapNumber) {
        const lap = raceConfig.laps[lapNumber - 1];
        const row = document.getElementById(`lap-${lapNumber}`);
        if (!row) return;
        
        // Update actual split
        const actualCell = row.querySelector('.actual-split');
        actualCell.textContent = SplitEngine.formatTime(lap.actualSplit);
        actualCell.style.color = ''; // Reset color after lap is recorded
        
        // Update difference with arrows
        const diffCell = row.querySelector('.difference');
        let diffText;
        if (lap.difference > 0) {
            diffText = `↓${lap.difference}`; // Too slow (down arrow)
        } else if (lap.difference < 0) {
            diffText = `↑${Math.abs(lap.difference)}`; // Too fast (up arrow)
        } else {
            diffText = '0';
        }
        diffCell.textContent = diffText;
        diffCell.className = 'difference';
        diffCell.classList.add(lap.difference > 0 ? 'diff-positive' : lap.difference < 0 ? 'diff-negative' : 'diff-zero');
        
        // Update cumulative (reset to normal style for completed lap)
        const cumulativeCell = row.querySelector('.cumulative');
        cumulativeCell.textContent = SplitEngine.formatTime(lap.actualCumulative);
        cumulativeCell.style.fontStyle = '';
        cumulativeCell.style.opacity = '';
        
        // Update classes
        row.classList.remove('current-lap');
        row.classList.add('completed-lap');
        
        if (lap.isFastest) row.classList.add('fastest-lap');
        else row.classList.remove('fastest-lap');
        
        if (lap.isSlowest) row.classList.add('slowest-lap');
        else row.classList.remove('slowest-lap');
    }
    
    // Clear lap row back to dashes (for undo)
    function clearLapRow(lapNumber) {
        const lap = raceConfig.laps[lapNumber - 1];
        const row = document.getElementById(`lap-${lapNumber}`);
        if (!row) return;
        
        // Clear actual split back to dashes
        const actualCell = row.querySelector('.actual-split');
        actualCell.textContent = '--';
        actualCell.style.color = '';
        
        // Clear difference back to dashes
        const diffCell = row.querySelector('.difference');
        diffCell.textContent = '--';
        diffCell.className = 'difference';
        
        // Reset cumulative to projected or dashes
        const cumulativeCell = row.querySelector('.cumulative');
        const projectedTime = calculateProjectedCumulative(lapNumber);
        if (projectedTime !== null) {
            cumulativeCell.textContent = SplitEngine.formatTime(projectedTime);
            cumulativeCell.style.fontStyle = 'italic';
            cumulativeCell.style.opacity = '0.7';
        } else {
            cumulativeCell.textContent = '--';
            cumulativeCell.style.fontStyle = '';
            cumulativeCell.style.opacity = '';
        }
        
        // Reset classes
        row.classList.remove('completed-lap', 'fastest-lap', 'slowest-lap');
        row.classList.add('current-lap');
    }
    
    // Update last lap performance feedback
    function updateLastLapFeedback() {
        if (!raceConfig || !elements.dashLastLapFeedback) {
            console.log('updateLastLapFeedback: Missing raceConfig or element', {
                raceConfig: !!raceConfig,
                element: !!elements.dashLastLapFeedback
            });
            return;
        }
        
        // Find the last completed lap
        const completedLaps = raceConfig.laps.filter(lap => lap.actualSplit !== null);
        
        if (completedLaps.length === 0) {
            // No laps completed yet - show starting message
            elements.dashLastLapFeedback.querySelector('.feedback-text').textContent = "And they’re off!";
            elements.dashLastLapFeedback.className = 'last-lap-feedback on-pace';
            return;
        }
        
        const lastLap = completedLaps[completedLaps.length - 1];
        // Format time for feedback bar (remove 0: prefix and leading zeros)
        let lapTime = SplitEngine.formatTime(lastLap.actualSplit);
        if (lapTime.startsWith('0:')) {
            lapTime = lapTime.substring(2); // Remove "0:" prefix
            // Also remove leading zero from single-digit seconds (e.g., "07.3" -> "7.3")
            if (lapTime.startsWith('0') && lapTime.length > 1 && lapTime[1] !== '0') {
                lapTime = lapTime.substring(1);
            }
        }
        const difference = lastLap.difference; // Use exact difference from engine
        
        let feedbackText;
        let statusClass;
        
        if (difference === 0) {
            // Exactly on pace
            feedbackText = `${lapTime} — On pace`;
            statusClass = 'on-pace';
        } else if (difference > 0) {
            // Too slow
            const seconds = Math.abs(difference) === 1 ? 'second' : 'seconds';
            feedbackText = `${lapTime} — ${Math.abs(difference)} ${seconds} slow`;
            statusClass = 'slow';
        } else {
            // Too fast
            const seconds = Math.abs(difference) === 1 ? 'second' : 'seconds';
            feedbackText = `${lapTime} — ${Math.abs(difference)} ${seconds} fast`;
            statusClass = 'fast';
        }
        
        elements.dashLastLapFeedback.querySelector('.feedback-text').textContent = feedbackText;
        elements.dashLastLapFeedback.className = `last-lap-feedback ${statusClass}`;
    }
    
    // Update projected cumulative times for all future laps
    function updateProjectedTimes() {
        for (let i = currentLapNumber; i <= raceConfig.totalLaps; i++) {
            const lap = raceConfig.laps[i - 1];
            if (lap.actualCumulative === null) {
                const row = document.getElementById(`lap-${i}`);
                if (row) {
                    const cumulativeCell = row.querySelector('.cumulative');
                    const projectedTime = calculateProjectedCumulative(i);
                    if (projectedTime !== null) {
                        cumulativeCell.textContent = SplitEngine.formatTime(projectedTime);
                        cumulativeCell.style.fontStyle = 'italic';
                        cumulativeCell.style.opacity = '0.7';
                    }
                }
            }
        }
    }
    
    // Update split button text
    function updateSplitButton() {
        const lap = raceConfig.laps[currentLapNumber - 1];
        elements.splitButton.querySelector('.split-button-lap').textContent = `Lap ${currentLapNumber}`;
        
        // Update dashboard lap info with tenths
        elements.dashLapGoal.textContent = lap.targetSplit.toFixed(1);
        elements.dashLapNumber.textContent = currentLapNumber;
        
        // Note: Legacy elements removed in dashboard redesign
    }
    
    // Highlight current lap in table
    function highlightCurrentLap() {
        const rows = elements.lapTableBody.querySelectorAll('tr');
        rows.forEach(row => row.classList.remove('current-lap'));
        
        const currentRow = document.getElementById(`lap-${currentLapNumber}`);
        if (currentRow) {
            currentRow.classList.add('current-lap');
        }
    }
    
    // Scroll to keep current lap visible
    function scrollToCurrentLap() {
        const currentRow = document.getElementById(`lap-${currentLapNumber}`);
        if (currentRow) {
            currentRow.scrollIntoView({ behavior: 'smooth', block: 'center' });
        }
    }
    
    // Handle undo button
    function handleUndo() {
        // Find the lap that will be undone (the last completed lap)
        const lastCompletedLapIndex = raceConfig.laps.findIndex((lap, index) => {
            return lap.actualSplit !== null && 
                   (index === raceConfig.laps.length - 1 || raceConfig.laps[index + 1].actualSplit === null);
        });
        
        if (lastCompletedLapIndex === -1) return; // No laps to undo
        
        const lapToUndo = lastCompletedLapIndex + 1; // Convert to lap number
        
        // Call the engine to undo the lap
        SplitEngine.undoLastLap(raceConfig);
        
        // Set current lap to the one that was just undone (we'll re-time it)
        currentLapNumber = lapToUndo;
        
        // Clear the undone lap row display
        clearLapRow(currentLapNumber);
        
        // Update dashboard and UI
        updateSplitButton();
        highlightCurrentLap();
        
        // Update all projected times for future laps
        updateProjectedTimes();
        
        // Update last lap feedback (will show previous lap or reset)
        updateLastLapFeedback();
        
        // Disable undo if no more laps to undo
        const hasCompletedLaps = raceConfig.laps.some(lap => lap.actualSplit !== null);
        elements.undoButton.disabled = !hasCompletedLaps;
        
        // Save progress
        saveRaceProgress();
    }
    
    // Handle reset button
    function handleReset() {
        if (confirm('Are you sure you want to reset this race?')) {
            // Stop timer
            if (raceTimer) {
                cancelAnimationFrame(raceTimer);
                raceTimer = null;
            }
            clearSavedRace();
            // Reload the entire app to pick up any code changes
            window.location.reload();
        }
    }
    
    // Complete the race
    function completeRace() {
        const stats = SplitEngine.calculateRaceStats(raceConfig);
        if (!stats) return;
        
        // Set dynamic results title
        elements.resultsTitle.textContent = `Spliterator: ${raceConfig.raceName} Results`;
        
        // Populate results dashboard grid
        elements.goalTimeSummary.textContent = SplitEngine.formatTime(stats.goalTime);
        elements.finalTime.textContent = SplitEngine.formatTime(stats.finalTime);
        
        const diffText = stats.timeDifference > 0 ? `+${SplitEngine.formatTime(Math.abs(stats.timeDifference))}` : `-${SplitEngine.formatTime(Math.abs(stats.timeDifference))}`;
        elements.timeDifference.textContent = diffText;
        elements.timeDifference.className = 'dash-value-large ' + (stats.timeDifference > 0 ? 'positive' : 'negative');
        
        elements.avgLapPace.textContent = SplitEngine.formatTime(stats.avgLapPace);
        elements.avgMilePace.textContent = SplitEngine.formatTime(stats.avgMilePace, false);
        elements.avgKmPace.textContent = SplitEngine.formatTime(stats.avgKmPace, false);
        
        elements.fastestLap.textContent = `Lap ${stats.fastestLap}: ${SplitEngine.formatTime(stats.fastestTime)}`;
        elements.slowestLap.textContent = `Lap ${stats.slowestLap}: ${SplitEngine.formatTime(stats.slowestTime)}`;
        
        // Populate results table
        elements.resultsTableBody.innerHTML = '';
        raceConfig.laps.forEach(lap => {
            if (lap.actualSplit !== null) {
                const row = createLapRow(lap);
                elements.resultsTableBody.appendChild(row);
            }
        });
        
        // Save final results
        saveRaceResults(stats);
        
        // Switch to results screen
        switchScreen('results');
    }
    
    // Handle share button
    function handleShare() {
        const stats = SplitEngine.calculateRaceStats(raceConfig);
        if (!stats) return;
        
        // Build enhanced share text with all race details
        const now = new Date();
        const dateTimeString = now.toLocaleString('en-US', {
            weekday: 'long',
            year: 'numeric',
            month: 'long',
            day: 'numeric',
            hour: 'numeric',
            minute: '2-digit',
            hour12: true
        });
        
        let shareText = `Spliterator: ${raceConfig.raceName} Results\n${dateTimeString}\n\n`;
        
        // Race summary
        shareText += `Track: ${raceConfig.trackName}\n`;
        shareText += `Goal Time: ${SplitEngine.formatTime(stats.goalTime)}\n`;
        shareText += `Final Time: ${SplitEngine.formatTime(stats.finalTime)}\n`;
        shareText += `Difference: ${stats.timeDifference > 0 ? '+' : ''}${SplitEngine.formatTime(Math.abs(stats.timeDifference))}\n\n`;
        
        // Pace summary
        shareText += `Avg Lap Pace: ${SplitEngine.formatTime(stats.avgLapPace)}\n`;
        shareText += `Avg Mile Pace: ${SplitEngine.formatTime(stats.avgMilePace, false)}\n`;
        shareText += `Avg Km Pace: ${SplitEngine.formatTime(stats.avgKmPace, false)}\n\n`;
        
        // Fastest and slowest laps
        shareText += `Fastest Lap: ${stats.fastestLap} (${SplitEngine.formatTime(stats.fastestTime)})\n`;
        shareText += `Slowest Lap: ${stats.slowestLap} (${SplitEngine.formatTime(stats.slowestTime)})\n\n`;
        
        // Individual lap breakdown
        shareText += `LAP BREAKDOWN:\n`;
        shareText += `Lap | Target | Actual | Diff | Total\n`;
        shareText += `----+--------+--------+------+-------\n`;
        
        const completedLaps = raceConfig.laps.filter(lap => lap.actualSplit !== null);
        completedLaps.forEach(lap => {
            const diffText = lap.difference > 0 ? `+${lap.difference}` : lap.difference.toString();
            shareText += `${lap.lapNumber.toString().padStart(2)} | ${SplitEngine.formatTime(lap.targetSplit).padStart(6)} | ${SplitEngine.formatTime(lap.actualSplit).padStart(6)} | ${diffText.padStart(4)} | ${SplitEngine.formatTime(lap.actualCumulative)}\n`;
        });
        
        if (navigator.share) {
            navigator.share({
                title: `Spliterator: ${raceConfig.raceName} Results`,
                text: shareText
            }).catch(err => console.log('Share failed:', err));
        } else {
            // Fallback - copy to clipboard
            navigator.clipboard.writeText(shareText).then(() => {
                alert('Results copied to clipboard!');
            }).catch(err => {
                console.error('Failed to copy:', err);
                alert('Unable to share results');
            });
        }
    }
    
    // Handle new race button
    function handleNewRace() {
        clearSavedRace();
        switchScreen('config');
    }
    
    // Switch between screens
    function switchScreen(screenName) {
        Object.values(screens).forEach(screen => screen.classList.remove('active'));
        screens[screenName].classList.add('active');
    }
    
    // Save race configuration to localStorage
    function saveRaceConfig() {
        try {
            localStorage.setItem('raceConfig', JSON.stringify(raceConfig));
        } catch (error) {
            console.error('Failed to save race config:', error);
        }
    }
    
    // Save race progress to localStorage
    function saveRaceProgress() {
        try {
            const data = {
                raceConfig,
                raceStartTime,
                currentLapNumber
            };
            localStorage.setItem('raceProgress', JSON.stringify(data));
        } catch (error) {
            console.error('Failed to save race progress:', error);
        }
    }
    
    // Save race results to localStorage
    function saveRaceResults(stats) {
        try {
            const data = {
                raceConfig,
                stats,
                timestamp: new Date().toISOString()
            };
            localStorage.setItem('lastRaceResults', JSON.stringify(data));
        } catch (error) {
            console.error('Failed to save race results:', error);
        }
    }
    
    // Load saved race from localStorage
    function loadSavedRace() {
        try {
            const saved = localStorage.getItem('raceProgress');
            if (saved) {
                const data = JSON.parse(saved);
                // TODO: Implement race restoration if needed
            }
        } catch (error) {
            console.error('Failed to load saved race:', error);
        }
    }
    
    // Clear saved race data
    function clearSavedRace() {
        try {
            localStorage.removeItem('raceProgress');
            localStorage.removeItem('raceConfig');
        } catch (error) {
            console.error('Failed to clear saved race:', error);
        }
    }
    
    // Public API
    return {
        init
    };
})();

// Initialize app when DOM is ready
if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', App.init);
} else {
    App.init();
}