script.js

// مصفوفة تراكات Musical المحدثة بأغانيك المحلية الحقيقية من المجلد
// مصفوفة التراكات النهائية المطابقة لأسماء ملفاتك الجديدة
// مصفوفة التراكات النهائية بالصور المخصصة والأغاني المحلية
const trackList = [
    {
        name: "نسيتيني",
        artist: "بيغ سام - Big Sam",
        image: "images/bigsam.jpg",
        path: "Music/nesyetny.mp3"
    },
    {
        name: "لو على قلبي",
        artist: "فضل شاكر",
        image: "images/fadl.jpg",
        path: "Music/law.mp3"
    },
    {
        name: "بلغني",
        artist: "محمد حماقي",
        image: "images/hamaki.jpg",
        path: "Music/blghny.mp3"
    }
];
// استهداف عناصر الميديا والـ DOM والواجهات
const mainAudio = document.getElementById('main-audio');
const playPauseBtn = document.getElementById('play-pause-btn');
const prevBtn = document.getElementById('prev-btn');
const nextBtn = document.getElementById('next-btn');
const shuffleBtn = document.getElementById('shuffle-btn');
const repeatBtn = document.getElementById('repeat-btn');

const trackArt = document.getElementById('track-art');
const trackName = document.getElementById('track-name');
const trackArtist = document.getElementById('track-artist');

const progressBar = document.getElementById('progress-bar');
const currentTimeElement = document.getElementById('current-time');
const totalDurationElement = document.getElementById('total-duration');

const volumeSlider = document.getElementById('volume-slider');
const volumeIcon = document.getElementById('volume-icon');

const playlistToggle = document.getElementById('playlist-toggle');
const playlistClose = document.getElementById('playlist-close');
const playlistPanel = document.getElementById('playlist-panel');
const playlistTracksContainer = document.getElementById('playlist-tracks');

let trackIndex = 0;
let isPlaying = false;
let isShuffle = false;
let isRepeat = false;

// تهيئة التراك ومسارات البث
function loadTrack(index) {
    const track = trackList[index];
    mainAudio.src = track.path;
    mainAudio.load();

    trackName.textContent = track.name;
    trackArtist.textContent = track.artist;
    trackArt.style.backgroundImage = `url('${track.image}')`;

    progressBar.value = 0;
    currentTimeElement.textContent = "00:00";
    
    updatePlaylistActiveState();
}

// تشغيل وإيقاف الصوت وحركات دوران الألبوم
function playTrack() {
    isPlaying = true;
    mainAudio.play().catch(error => {
        console.log("تأكد من صحة مسار الملف أو تفاعل مع الصفحة أولاً:", error);
    });
    playPauseBtn.innerHTML = '<i class="fas fa-pause"></i>';
    trackArt.classList.add('rotate');
}

function pauseTrack() {
    isPlaying = false;
    mainAudio.pause();
    playPauseBtn.innerHTML = '<i class="fas fa-play"></i>';
    trackArt.classList.remove('rotate');
}

playPauseBtn.addEventListener('click', () => {
    isPlaying ? pauseTrack() : playTrack();
});

// منطق التقدم والتراجع (Next & Prev)
function nextTrack() {
    if (isShuffle) {
        trackIndex = Math.floor(Math.random() * trackList.length);
    } else {
        trackIndex = (trackIndex + 1) % trackList.length;
    }
    loadTrack(trackIndex);
    playTrack();
}

function prevTrack() {
    trackIndex = (trackIndex - 1 + trackList.length) % trackList.length;
    loadTrack(trackIndex);
    playTrack();
}

nextBtn.addEventListener('click', nextTrack);
prevBtn.addEventListener('click', prevTrack);

// تحديث الـ Progress Bar والعداد الزمني تلقائياً أثناء التشغيل
mainAudio.addEventListener('timeupdate', () => {
    if (mainAudio.duration) {
        const progressPercent = (mainAudio.currentTime / mainAudio.duration) * 100;
        progressBar.value = progressPercent;

        let currentMins = Math.floor(mainAudio.currentTime / 60);
        let currentSecs = Math.floor(mainAudio.currentTime % 60);
        if (currentSecs < 10) currentSecs = `0${currentSecs}`;
        currentTimeElement.textContent = `${currentMins}:${currentSecs}`;

        let durationMins = Math.floor(mainAudio.duration / 60);
        let durationSecs = Math.floor(mainAudio.duration % 60);
        if (durationSecs < 10) durationSecs = `0${durationSecs}`;
        totalDurationElement.textContent = `${durationMins}:${durationSecs}`;
    }
});

// سحب شريط التقدم والتخطي الفوري
progressBar.addEventListener('input', () => {
    const seekTime = (progressBar.value / 100) * mainAudio.duration;
    mainAudio.currentTime = seekTime;
});

// التحكم في مستويات الصوت وأيقوناتها
volumeSlider.addEventListener('input', () => {
    mainAudio.volume = volumeSlider.value / 100;
    if (volumeSlider.value == 0) {
        volumeIcon.className = 'fas fa-volume-mute';
    } else if (volumeSlider.value < 50) {
        volumeIcon.className = 'fas fa-volume-down';
    } else {
        volumeIcon.className = 'fas fa-volume-up';
    }
});

// تفعيل ميزات الـ Shuffle والـ Repeat والـ Autoplay عند الانتهاء
shuffleBtn.addEventListener('click', () => {
    isShuffle = !isShuffle;
    shuffleBtn.classList.toggle('active', isShuffle);
});

repeatBtn.addEventListener('click', () => {
    isRepeat = !isRepeat;
    repeatBtn.classList.toggle('active', isRepeat);
});

mainAudio.addEventListener('ended', () => {
    if (isRepeat) {
        mainAudio.currentTime = 0;
        playTrack();
    } else {
        nextTrack();
    }
});

// إنشاء الـ Playlist ديناميكياً
playlistToggle.addEventListener('click', () => playlistPanel.classList.add('active'));
playlistClose.addEventListener('click', () => playlistPanel.classList.remove('active'));

function buildPlaylist() {
    playlistTracksContainer.innerHTML = "";
    trackList.forEach((track, index) => {
        const li = document.createElement('li');
        
        // إنشاء العناصر الداخلية وفصلها لحماية النصوص وتجنب تحذير الـ Template Literal
        const div = document.createElement('div');
        
        const pName = document.createElement('p');
        pName.style.fontWeight = "500";
        pName.style.textAlign = "left";
        pName.textContent = track.name; // استخدام textContent الآمن لمنع التحذير
        
        const pArtist = document.createElement('p');
        pArtist.style.fontSize = "0.8rem";
        pArtist.style.color = "var(--text-muted)";
        pArtist.style.textAlign = "left";
        pArtist.textContent = track.artist;
        
        div.appendChild(pName);
        div.appendChild(pArtist);
        
        const span = document.createElement('span');
        span.className = "duration";
        span.innerHTML = '<i class="fas fa-play-circle"></i>';
        
        li.appendChild(div);
        li.appendChild(span);
        
        li.addEventListener('click', () => {
            trackIndex = index;
            loadTrack(trackIndex);
            playTrack();
            playlistPanel.classList.remove('active');
        });
        
        playlistTracksContainer.appendChild(li);
    });
}

function updatePlaylistActiveState() {
    const listItems = playlistTracksContainer.querySelectorAll('li');
    listItems.forEach((item, index) => {
        item.classList.toggle('playing', index === trackIndex);
    });
}

// تهيئة مشغل Musical وبناء القائمة فور تحميل الصفحة
buildPlaylist();
loadTrack(trackIndex);