document.addEventListener("DOMContentLoaded", () => {
    
    // =========================================
    // 1. MOBILE RESPONSIVE NAV
    // =========================================
    const burger = document.querySelector('.burger');
    const nav = document.querySelector('.nav-bar');
    const navLinks = document.querySelectorAll('.nav-links li a');

    burger.addEventListener('click', () => {
        nav.classList.toggle('nav-active');
        burger.classList.toggle('toggle');
    });

    // Close menu when links are clicked on mobile
    navLinks.forEach(link => {
        link.addEventListener('click', () => {
            nav.classList.remove('nav-active');
            burger.classList.remove('toggle');
            
            // Active state
            navLinks.forEach(l => l.classList.remove('active'));
            link.classList.add('active');
        });
    });


    // =========================================
    // 2. STICKY HEADER SCROLL
    // =========================================
    const header = document.querySelector('.main-header');
    window.addEventListener('scroll', () => {
        if(window.scrollY > 100) {
            header.classList.add('header-scrolled');
        } else {
            header.classList.remove('header-scrolled');
        }
    });


    // =========================================
    // 3. AUDIO PLAYER
    // =========================================
    const audioPlayer = document.getElementById('audio-player');
    const playPauseBtn = document.getElementById('play-pause-btn');
    const seekSlider = document.getElementById('seek-slider');
    const currentTimeEl = document.getElementById('current-time');
    const durationTimeEl = document.getElementById('duration-time');
    const muteBtn = document.getElementById('mute-btn');
    const waveform = document.getElementById('waveform');
    
    const currentTitle = document.getElementById('current-title');
    const currentCover = document.getElementById('current-cover');
    const playlistItems = document.querySelectorAll('.playlist-item');

    let isPlaying = false;

    // Toggle Play/Pause
    function togglePlay() {
        if (isPlaying) {
            audioPlayer.pause();
            waveform.classList.remove('playing');
            playPauseBtn.innerHTML = '<i class="fa-solid fa-play"></i>';
        } else {
            // Note: In local file deployments (or without an actual audio URL), this might throw an error.
            // We'll wrap it in a try-catch for graceful silent handling.
            try {
                audioPlayer.play();
                waveform.classList.add('playing');
                playPauseBtn.innerHTML = '<i class="fa-solid fa-pause"></i>';
            } catch (e) {
                console.log("Audio play simulation triggered.");
                waveform.classList.add('playing');
                playPauseBtn.innerHTML = '<i class="fa-solid fa-pause"></i>';
            }
        }
        isPlaying = !isPlaying;
    }

    playPauseBtn.addEventListener('click', togglePlay);

    // Track Selection from Playlist
    playlistItems.forEach(item => {
        item.addEventListener('click', () => {
            // Remove active from all
            playlistItems.forEach(i => i.classList.remove('active'));
            // Add to clicked
            item.classList.add('active');

            // Update active Display
            const src = item.getAttribute('data-src');
            const title = item.getAttribute('data-title');
            const cover = item.getAttribute('data-cover');

            audioPlayer.src = src;
            currentTitle.textContent = title;
            currentCover.src = cover;

            // Reset UI and play
            isPlaying = false;
            togglePlay();
        });
    });

    // Seek Slider Event
    audioPlayer.addEventListener('timeupdate', () => {
        if(audioPlayer.duration) {
            const progress = (audioPlayer.currentTime / audioPlayer.duration) * 100;
            seekSlider.value = progress;
            currentTimeEl.textContent = formatTime(audioPlayer.currentTime);
            durationTimeEl.textContent = formatTime(audioPlayer.duration);
        } else {
            // Static simulation if duration is 0/Infinity due to lack of real mp3 file
            seekSlider.value = 0;
            currentTimeEl.textContent = "0:00";
        }
    });

    seekSlider.addEventListener('input', () => {
        const seekTo = audioPlayer.duration * (seekSlider.value / 100);
        audioPlayer.currentTime = seekTo;
    });

    function formatTime(sec) {
        if(isNaN(sec)) return "0:00";
        const minutes = Math.floor(sec / 60);
        const seconds = Math.floor(sec % 60);
        return `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
    }

    muteBtn.addEventListener('click', () => {
        if (audioPlayer.muted) {
            audioPlayer.muted = false;
            muteBtn.innerHTML = '<i class="fa-solid fa-volume-high"></i>';
        } else {
            audioPlayer.muted = true;
            muteBtn.innerHTML = '<i class="fa-solid fa-volume-xmark"></i>';
        }
    });


    // =========================================
    // 4. LIGHTBOX EFFECTS
    // =========================================
    const lightbox = document.getElementById('lightbox');
    const lightboxImg = document.getElementById('lightbox-img');
    const closeLightbox = document.querySelector('.lightbox-close');
    const imageTriggers = document.querySelectorAll('.lightbox-trigger');

    imageTriggers.forEach(img => {
        img.addEventListener('click', (e) => {
            lightbox.style.display = 'flex';
            lightboxImg.src = e.target.getAttribute('data-full');
        });
    });

    closeLightbox.addEventListener('click', () => {
        lightbox.style.display = 'none';
    });

    // Close on overlay click
    lightbox.addEventListener('click', (e) => {
        if(e.target === lightbox) {
            lightbox.style.display = 'none';
        }
    });

});