script.js

// DOM Elements
const app = document.getElementById('app');
const setupScreen = document.getElementById('setup-screen');
const timerScreen = document.getElementById('timer-screen');
const timerBackground = document.getElementById('timer-background');
const intervalsContainer = document.getElementById('intervals-container');
const numSetsInput = document.getElementById('num-sets');
const btnStart = document.getElementById('btn-start-timer');

// Timer Display Elements
const statusText = document.getElementById('interval-status');
const timeDisplay = document.getElementById('time-display');
const currentIntervalSpan = document.getElementById('current-interval');
const totalIntervalsSpan = document.getElementById('total-intervals');
const btnPause = document.getElementById('btn-pause');
const pausedControls = document.getElementById('paused-controls');
const btnResume = document.getElementById('btn-resume');
const btnReset = document.getElementById('btn-reset');
const btnStop = document.getElementById('btn-stop');

// State
let state = {
    sets: 1,
    intervals: [], // Array of objects { work: 30, rest: 30 }
    currentIntervalIndex: 0,
    isWorkPhase: true, // true = work, false = rest
    timeRemaining: 0,
    isRunning: false,
    intervalId: null,
    audioCtx: null
};

// --- Initialization & Setup Logic ---

function init() {
    loadState();
    renderRows();
    
    // Event Listeners
    numSetsInput.addEventListener('input', handleSetsChange);
    intervalsContainer.addEventListener('input', handleIntervalInputChange);
    btnStart.addEventListener('click', startWorkout);
    
    btnPause.addEventListener('click', pauseTimer);
    btnResume.addEventListener('click', resumeTimer);
    btnReset.addEventListener('click', resetCurrentInterval);
    btnStop.addEventListener('click', stopWorkout);
}

function loadState() {
    const saved = localStorage.getItem('timerSetup');
    if (saved) {
        const parsed = JSON.parse(saved);
        state.sets = parsed.sets || 1;
        state.intervals = parsed.intervals || [{work: 30, rest: 30}];
        
        // Ensure intervals array matches sets count
        if (state.intervals.length < state.sets) {
            // Fill missing with last known
            const last = state.intervals[state.intervals.length - 1] || {work: 30, rest: 30};
            while(state.intervals.length < state.sets) {
                state.intervals.push({...last});
            }
        }
    } else {
        // Default
        state.sets = 1;
        state.intervals = [{work: 30, rest: 30}];
    }
    
    numSetsInput.value = state.sets;
}

function saveState() {
    const dataToSave = {
        sets: state.sets,
        intervals: state.intervals
    };
    localStorage.setItem('timerSetup', JSON.stringify(dataToSave));
}

function handleSetsChange(e) {
    const newSets = parseInt(e.target.value) || 1;
    if (newSets < 1) return;
    
    const oldSets = state.sets;
    state.sets = newSets;

    // Adjust intervals array
    if (newSets > oldSets) {
        // Add rows
        const template = state.intervals.length > 0 ? state.intervals[0] : {work: 30, rest: 30};
        for (let i = oldSets; i < newSets; i++) {
            state.intervals.push({...template});
        }
    } else {
        // Remove rows
        state.intervals = state.intervals.slice(0, newSets);
    }

    renderRows();
    saveState();
}

function handleIntervalInputChange(e) {
    if (!e.target.matches('input')) return;

    const row = e.target.closest('.input-row');
    const index = parseInt(row.dataset.index);
    const type = e.target.dataset.type; // 'work' or 'rest'
    const value = parseInt(e.target.value) || 0;

    // Update state
    state.intervals[index][type] = value;

    // "When someone fills in the first row, all rows duplicate immediately"
    // Interpretation: If editing row 1 (index 0), update all other rows IF they matched row 0 previously?
    // Or just strictly overwrite everything? User said: "duplicate immediately, but can be over written."
    // Simple approach: If Row 0 changes, update ALL rows. This is aggressive but fits the description.
    if (index === 0) {
        for (let i = 1; i < state.intervals.length; i++) {
            state.intervals[i][type] = value;
            // Update inputs in DOM without full re-render to keep focus
            const rowEl = document.querySelector(`.input-row[data-index="${i}"]`);
            if (rowEl) {
                const input = rowEl.querySelector(`input[data-type="${type}"]`);
                if (input) input.value = value;
            }
        }
    }

    saveState();
}

function renderRows() {
    intervalsContainer.innerHTML = '';
    
    state.intervals.forEach((interval, index) => {
        const row = document.createElement('div');
        row.className = 'input-row';
        row.dataset.index = index;
        
        row.innerHTML = `
            <div>${index + 1}</div>
            <div><input type="number" value="${interval.work}" min="0" data-type="work"></div>
            <div><input type="number" value="${interval.rest}" min="0" data-type="rest"></div>
        `;
        intervalsContainer.appendChild(row);
    });
}

// --- Audio System ---
function initAudio() {
    if (!state.audioCtx) {
        const AudioContext = window.AudioContext || window.webkitAudioContext;
        state.audioCtx = new AudioContext();
    }
    if (state.audioCtx.state === 'suspended') {
        state.audioCtx.resume();
    }
}

function playBeep(frequency = 800, duration = 0.1, type = 'sine') {
    if (!state.audioCtx) return;
    
    const osc = state.audioCtx.createOscillator();
    const gain = state.audioCtx.createGain();
    
    osc.type = type;
    osc.frequency.setValueAtTime(frequency, state.audioCtx.currentTime);
    
    gain.gain.setValueAtTime(0.5, state.audioCtx.currentTime);
    gain.gain.exponentialRampToValueAtTime(0.01, state.audioCtx.currentTime + duration);
    
    osc.connect(gain);
    gain.connect(state.audioCtx.destination);
    
    osc.start();
    osc.stop(state.audioCtx.currentTime + duration);
}

// --- Timer Logic ---

function startWorkout() {
    initAudio();
    
    // Prepare timer state
    state.currentIntervalIndex = 0;
    state.isWorkPhase = true;
    state.intervals = state.intervals; // Already updated in state
    
    // Load first interval
    setupInterval();
    
    // Switch Screens
    setupScreen.classList.add('hidden');
    timerScreen.classList.remove('hidden');
    
    startTimerLoop();
}

function setupInterval() {
    const current = state.intervals[state.currentIntervalIndex];
    if (state.isWorkPhase) {
        state.timeRemaining = current.work;
        statusText.innerText = 'WORK';
        timerBackground.className = 'fullscreen-bg mode-work';
    } else {
        state.timeRemaining = current.rest;
        statusText.innerText = 'REST';
        timerBackground.className = 'fullscreen-bg mode-rest';
    }
    
    currentIntervalSpan.innerText = state.currentIntervalIndex + 1;
    totalIntervalsSpan.innerText = state.sets;
    updateTimeDisplay();
}

function updateTimeDisplay() {
    // Format mm:ss or just seconds? User asked for "countown of minutes / seconds in large print"
    const mins = Math.floor(state.timeRemaining / 60);
    const secs = state.timeRemaining % 60;
    const timeStr = `${mins}:${secs.toString().padStart(2, '0')}`;
    timeDisplay.innerText = timeStr;
}

function startTimerLoop() {
    if (state.isRunning) return;
    state.isRunning = true;
    
    // Hide paused controls, show pause button
    btnPause.classList.remove('hidden');
    pausedControls.classList.add('hidden');
    
    // Use setInterval for 1 second ticks
    state.intervalId = setInterval(tick, 1000);
}

function tick() {
    if (state.timeRemaining > 0) {
        // Check for beeps (5, 4, 3, 2, 1)
        if (state.timeRemaining <= 5) {
            playBeep(1000, 0.2); // High pitch for countdown
        }
        
        state.timeRemaining--;
        updateTimeDisplay();
    } else {
        // Time is up
        handlePhaseComplete();
    }
}

function handlePhaseComplete() {
    playBeep(600, 0.8, 'square'); // Longer, different tone for complete
    
    if (state.isWorkPhase) {
        // Work finished
        const currentRest = state.intervals[state.currentIntervalIndex].rest;
        if (currentRest > 0) {
            // Switch to Rest
            state.isWorkPhase = false;
            setupInterval();
        } else {
            // No rest, go straight to next work if exists
            nextInterval();
        }
    } else {
        // Rest finished
        nextInterval();
    }
}

function nextInterval() {
    state.currentIntervalIndex++;
    if (state.currentIntervalIndex < state.sets) {
        state.isWorkPhase = true;
        setupInterval();
    } else {
        // Workout Complete
        finishWorkout();
    }
}

function finishWorkout() {
    clearInterval(state.intervalId);
    state.isRunning = false;
    statusText.innerText = 'DONE';
    timerBackground.className = 'fullscreen-bg'; // Neutral
    timeDisplay.innerText = "DONE";
    
    playBeep(1200, 0.1);
    setTimeout(() => playBeep(1200, 0.1), 150);
    setTimeout(() => playBeep(1200, 0.1), 300);

    // Show reset options
    btnPause.classList.add('hidden');
    pausedControls.classList.remove('hidden');
    btnResume.classList.add('hidden'); // Cannot resume finished workout
    btnReset.innerText = "RESTART WORKOUT";
    btnReset.onclick = startWorkout;
}

function pauseTimer() {
    clearInterval(state.intervalId);
    state.isRunning = false;
    
    btnPause.classList.add('hidden');
    pausedControls.classList.remove('hidden');
    btnResume.classList.remove('hidden');
    btnReset.innerText = "RESET INTERVAL";
    btnReset.onclick = resetCurrentInterval;
}

function resumeTimer() {
    startTimerLoop();
}

function resetCurrentInterval() {
    clearInterval(state.intervalId);
    state.isRunning = false;
    // Reload current interval start
    setupInterval();
    // Auto-resume? Or wait? 
    // "if the pause is hit, there is a reset, and start button" -> Start implies Resume or Start Over.
    // I implemented Resume. Reset logic here just resets time.
    // Let's assume user wants to click Start/Resume to go again.
    btnResume.classList.remove('hidden');
    // We are still in paused state visually
    updateTimeDisplay();
}

function stopWorkout() {
    clearInterval(state.intervalId);
    state.isRunning = false;
    
    timerScreen.classList.add('hidden');
    setupScreen.classList.remove('hidden');
}

// Initialize
init();