frontend/src/components/SavedPlaylists.js

"use client";
import React, { useState, useEffect } from "react";
import { useMusicPlayer } from "@/context/MusicPlayerContext";
import { formatTitle } from "@/lib/utils";
import { FaTrash, FaEdit } from "react-icons/fa";
import "./SavedPlaylists.css";

const SavedPlaylists = () => {
  const { initializePlayer, addToPlayqueue } = useMusicPlayer();
  const [playlists, setPlaylists] = useState({});

  useEffect(() => {
    const storedPlaylists = JSON.parse(localStorage.getItem("playlists")) || {};
    setPlaylists(storedPlaylists);
  }, []);

  const handlePlayPlaylist = (tracks) => {
    if (tracks.length > 0) {
      initializePlayer(tracks[0].source, tracks[0].title);
      tracks.slice(1).forEach(track => addToPlayqueue({ source: track.source, title: track.title }));
    }
  };

  const handleDeletePlaylist = (name) => {
    const updatedPlaylists = { ...playlists };
    delete updatedPlaylists[name];
    setPlaylists(updatedPlaylists);
    localStorage.setItem("playlists", JSON.stringify(updatedPlaylists));
  };

  const handleDeleteAllPlaylists = () => {
    setPlaylists({});
    localStorage.removeItem("playlists");
  };

  const handleEditPlaylist = (name) => {
    // Logic to edit the playlist can be implemented as needed
  };

  return (
    <div className="saved-playlists-container">
      <h2>Saved Playlists</h2>
      <button onClick={handleDeleteAllPlaylists} className="delete-all-button">Delete All Playlists</button>
      {Object.keys(playlists).length === 0 ? (
        <p>No saved playlists</p>
      ) : (
        <table className="saved-playlists-table">
          <thead>
            <tr>
              <th>Playlist Name</th>
              <th>Actions</th>
            </tr>
          </thead>
          <tbody>
            {Object.entries(playlists).map(([name, tracks]) => (
              <tr key={name}>
                <td>{name}</td>
                <td className="playlist-controls">
                  <button onClick={() => handlePlayPlaylist(tracks)} className="play-button">Play</button>
                  <button onClick={() => handleEditPlaylist(name)} className="edit-button"><FaEdit /></button>
                  <button onClick={() => handleDeletePlaylist(name)} className="remove-button"><FaTrash /></button>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      )}
    </div>
  );
};

export default SavedPlaylists;