script.js

const libraryToggle = document.querySelector('.library-toggle');
const library = document.getElementById('library');
const libraryList = document.getElementById('library-list');
const player = document.getElementById('player');
const spotifyIframe = document.getElementById('spotify-iframe');
const addPlaylistBtn = document.getElementById('add-playlist-btn');
const playlistUrlInput = document.getElementById('playlist-url');

// Function to save playlists to localStorage
function savePlaylistsToLocalStorage() {
    const playlists = Array.from(libraryList.children).map((item) => ({
        id: item.querySelector('span').textContent.split(':')[1].trim(),
        name: item.querySelector('span').textContent.trim(),
    }));
    localStorage.setItem('playlists', JSON.stringify(playlists));
}

// Function to load playlists from localStorage
function loadPlaylistsFromLocalStorage() {
    const savedPlaylists = JSON.parse(localStorage.getItem('playlists') || '[]');
    savedPlaylists.forEach((playlist) => {
        const newPlaylistItem = document.createElement('li');
        newPlaylistItem.innerHTML = `
            <span class="clickable">Playlist: ${playlist.id}</span>
            <button class="rename-btn">Rename</button>
            <button class="delete-btn">Delete</button>
        `;
        libraryList.appendChild(newPlaylistItem);
    });
}

// Toggle Library
libraryToggle.addEventListener('click', () => {
    library.style.display = library.style.display === 'block' ? 'none' : 'block';
});

// Add Playlist and Play
addPlaylistBtn.addEventListener('click', () => {
    const playlistUrl = playlistUrlInput.value.trim();
    if (playlistUrl) {
        const playlistMatch = playlistUrl.match(/playlist\/([\w\d]+)/);
        if (playlistMatch) {
            const playlistId = playlistMatch[1];
            spotifyIframe.src = `https://open.spotify.com/embed/playlist/${playlistId}?utm_source=generator`;
            const newPlaylistItem = document.createElement('li');
            newPlaylistItem.innerHTML = `
                <span class="clickable">Playlist: ${playlistId}</span>
                <button class="rename-btn">Rename</button>
                <button class="delete-btn">Delete</button>
            `;
            libraryList.appendChild(newPlaylistItem);
            savePlaylistsToLocalStorage();
            playlistUrlInput.value = '';
            alert('Playlist added and is now playing!');
        } else {
            alert('Invalid Spotify Playlist URL.');
        }
    } else {
        alert('Please enter a Spotify Playlist URL.');
    }
});

// Delete Playlist
libraryList.addEventListener('click', (e) => {
    if (e.target.classList.contains('delete-btn')) {
        const playlistItem = e.target.closest('li');
        playlistItem.remove();
        savePlaylistsToLocalStorage();
    }
});

// Rename Playlist
libraryList.addEventListener('click', (e) => {
    if (e.target.classList.contains('rename-btn')) {
        const playlistItem = e.target.closest('li');
        const currentName = playlistItem.firstChild.textContent.trim();
        const newName = prompt('Rename Playlist:', currentName);
        if (newName) {
            playlistItem.firstChild.textContent = newName;
            savePlaylistsToLocalStorage();
        }
    }
});

// Play Playlist on Click
libraryList.addEventListener('click', (e) => {
    if (e.target.classList.contains('clickable')) {
        const playlistId = e.target.textContent.split(':')[1]?.trim();
        if (playlistId) {
            spotifyIframe.src = `https://open.spotify.com/embed/playlist/${playlistId}?utm_source=generator`;
        }
    }
});

// Load saved playlists on page load
document.addEventListener('DOMContentLoaded', loadPlaylistsFromLocalStorage);