controls.js

let stopAfterCurrent = false;

document.addEventListener("DOMContentLoaded", () => {
    console.log("Controls.js: Initializing...");

    // Get DOM elements
    const audio = document.getElementById("audio");
    const progressBar = document.getElementById("progress-bar");
    const progressContainer = document.getElementById("progress-container");
    const timeDisplay = document.getElementById("time-display");

    const btnPlay = document.getElementById("btn-play");
    const btnPause = document.getElementById("btn-pause");
    const btnStopAfter = document.getElementById("btn-stop-after");
    const btnStop = document.getElementById("btn-stop");
    const btnNext = document.getElementById("btn-next");

    const btnVolDown = document.getElementById("btn-vol-down");
    const btnVolUp = document.getElementById("btn-vol-up");
    const volDisplay = document.getElementById("vol-display");

    if (!btnPlay || !audio) {
        console.error("Controls.js: Critical elements missing!");
        return;
    }

    // Volume logic
    function updateVolume(newVol) {
        // Clamp between 0 and 1
        newVol = Math.max(0, Math.min(1, newVol));
        audio.volume = newVol;
        volDisplay.textContent = Math.round(newVol * 100) + "%";
        
        // Save to localStorage if desired, for now just update UI
    }

    // Initialize volume (default 0.5 or current)
    updateVolume(audio.volume);

    btnVolDown.addEventListener("click", () => {
        updateVolume(audio.volume - 0.05);
    });

    btnVolUp.addEventListener("click", () => {
        updateVolume(audio.volume + 0.05);
    });

    // Button click handlers
    btnPlay.addEventListener("click", () => {
        console.log("Play clicked");
        audio.play().catch(e => console.error("Play failed:", e));
        updateTimeDisplay();
    });

    btnPause.addEventListener("click", () => {
        console.log("Pause clicked");
        audio.pause();
    });

    btnStopAfter.addEventListener("click", () => {
        console.log("Stop After clicked");
        stopAfterCurrent = true;
        btnStopAfter.style.background = "rgba(0, 212, 170, 0.5)";
    });

    btnStop.addEventListener("click", () => {
        console.log("Stop clicked");
        stopAfterCurrent = false;
        btnStopAfter.style.background = "";
        audio.pause();
        audio.currentTime = 0;
        updateProgress();
        updateTimeDisplay();
    });

    btnNext.addEventListener("click", async () => {
        console.log("Next clicked");
        stopAfterCurrent = false;
        btnStopAfter.style.background = "";
        if (typeof getSong === "function") {
            await getSong();
            // Wait a bit for the src to be set and potentially start loading
            setTimeout(() => {
                audio.play().catch(e => console.error("Auto-play next failed:", e));
            }, 100);
        }
    });

    // Progress bar click handler
    progressContainer.addEventListener("click", (e) => {
        console.log("Progress bar clicked");
        const rect = progressContainer.getBoundingClientRect();
        const percent = (e.clientX - rect.left) / rect.width;
        audio.currentTime = percent * audio.duration;
    });

    // Update progress bar and time display
    function updateProgress() {
        if (audio.duration) {
            const percent = (audio.currentTime / audio.duration) * 100;
            progressBar.style.width = percent + "%";
        }
    }

    function formatTime(seconds) {
        if (isNaN(seconds)) return "0:00";
        const mins = Math.floor(seconds / 60);
        const secs = Math.floor(seconds % 60);
        return `${mins}:${secs.toString().padStart(2, "0")}`;
    }

    function updateTimeDisplay() {
        const current = formatTime(audio.currentTime);
        const duration = formatTime(audio.duration);
        timeDisplay.textContent = `${current} / ${duration}`;
    }

    // Audio event listeners
    audio.addEventListener("timeupdate", () => {
        updateProgress();
        updateTimeDisplay();
    });

    audio.addEventListener("ended", async () => {
        if (stopAfterCurrent) {
            stopAfterCurrent = false;
            btnStopAfter.style.background = "";
            audio.pause();
            audio.currentTime = 0;
        } else {
            // Default behavior - play next song
            if (typeof getSong === "function") {
                await getSong();
                setTimeout(() => {
                    audio.play().catch(e => console.error("Auto-advance failed:", e));
                }, 100);
            }
        }
        updateProgress();
        updateTimeDisplay();
    });

    audio.addEventListener("loadedmetadata", () => {
        updateTimeDisplay();
    });

    audio.addEventListener("play", () => {
        btnPlay.style.background = "rgba(0, 212, 170, 0.5)";
    });

    audio.addEventListener("pause", () => {
        btnPlay.style.background = "";
    });

    // Hotkey handlers
    document.addEventListener("keydown", (e) => {
        // Ignore if user is typing in an input
        if (e.target.tagName === "INPUT" || e.target.tagName === "TEXTAREA") return;

        switch (e.key) {
            case "F3": // Play
                e.preventDefault();
                audio.play();
                break;
            case "F4": // Stop after current
                e.preventDefault();
                stopAfterCurrent = true;
                btnStopAfter.style.background = "rgba(0, 212, 170, 0.5)";
                break;
            case "F5": // Pause
                e.preventDefault();
                audio.pause();
                break;
            case "F6": // Stop
                e.preventDefault();
                stopAfterCurrent = false;
                btnStopAfter.style.background = "";
                audio.pause();
                audio.currentTime = 0;
                updateProgress();
                updateTimeDisplay();
                break;
            case "F7": // Next
                e.preventDefault();
                stopAfterCurrent = false;
                btnStopAfter.style.background = "";
                if (typeof getSong === "function") {
                    getSong();
                }
                break;
            case " ": // Spacebar for play/pause
                e.preventDefault();
                if (audio.paused) {
                    audio.play();
                } else {
                    audio.pause();
                }
                break;
            case "ArrowRight": // Seek forward 5 seconds
                e.preventDefault();
                audio.currentTime = Math.min(audio.currentTime + 5, audio.duration);
                break;
            case "ArrowLeft": // Seek backward 5 seconds
                e.preventDefault();
                audio.currentTime = Math.max(audio.currentTime - 5, 0);
                break;
            case "ArrowUp": // Volume Up
                e.preventDefault();
                updateVolume(audio.volume + 0.05);
                break;
            case "ArrowDown": // Volume Down
                e.preventDefault();
                updateVolume(audio.volume - 0.05);
                break;
        }
    });

    // Initialize
    updateProgress();
    updateTimeDisplay();
    console.log("Controls.js: Initialized");
});