import { useParams } from "react-router-dom";
import Navbar from "../components/Navbar";
import { useEffect, useState } from "react";
import { getPlaylistById, deletePlaylist, deleteVideo } from "../services/playlist.service.js";
import VideoCard from "../components/VideoCard.jsx";
import VerificationModal from "../modals/VerificationModal.jsx";
import { useNavigate } from "react-router-dom";

export default function Playlist() {

    const { id } = useParams();
    const navigate = useNavigate();

    const [alerts, setAlerts] = useState([]);
    const [playlist, setPlaylist] = useState(null);
    const [isDeletePlaylistModalOpen, setIsDeletePlaylistModalOpen] = useState(false);

    const fetchPlaylistDetails = async () => {
        const token = localStorage.getItem("token");
        const data = await getPlaylistById(id, token, addAlert);
        setPlaylist(data);
    }

    useEffect(() => {
        fetchPlaylistDetails();
    }, [id]);

    const addAlert = (type, message) => {
        const newAlert = { type, message, id: Date.now() }; // Add unique ID
        setAlerts([...alerts, newAlert]);
    };

    const onCloseAlert = (alertToRemove) => {
        setAlerts(alerts.filter(alert => alert !== alertToRemove));
    };

    const onDeletePlaylist = async () => {
        const token = localStorage.getItem("token");
        await deletePlaylist(id, token, addAlert);
        setIsDeletePlaylistModalOpen(false);
        navigate("/profile");
    }

    const onDeleteVideo = async (videoId) => {
        const token = localStorage.getItem("token");
        await deleteVideo(id, videoId, token, addAlert);
        fetchPlaylistDetails();
    }

    return (
        <div className="min-w-screen min-h-screen  bg-linear-to-br from-left-gradient to-right-gradient">
            <Navbar isSearchPage={false} alerts={alerts} onCloseAlert={onCloseAlert} />

            <main className="px-36 w-full pt-[118px]">

                <h1 className="font-bold font-montserrat text-3xl text-white" >{playlist && playlist.name}</h1>
                {/* CONTROLS */}
                <div className="mt-4">
                    <button 
                        className="bg-primary px-3 py-2 rounded-sm text-white font-montserrat text-lg font-semibold cursor-pointer"
                        onClick={() => console.log("Modifier playlist")}
                    >
                        modifier
                    </button>
                    <button 
                        className="bg-red-500 ml-4 px-3 py-2 rounded-sm text-white font-montserrat text-lg font-semibold cursor-pointer"
                        onClick={() => setIsDeletePlaylistModalOpen(true)}
                    >
                        supprimer
                    </button>
                </div>

                <div className="grid grid-cols-4 gap-8 mt-12">
                    {
                        playlist && playlist.videos && playlist.videos.length > 0 ? playlist.videos.map(video => (
                            <VideoCard 
                                key={video.id}
                                video={video} 
                                showControls={true} 
                                onDelete={onDeleteVideo}
                                link={`/video/${video.id}?playlistId=${playlist.id}`}
                            />
                        )) : (
                            <p className="text-white">Aucun vidéo trouvée dans cette playlist.</p>
                        )
                    }
                </div>
            </main>
            <VerificationModal
                title="Confirmer la suppression"
                onConfirm={() => onDeletePlaylist()}
                onCancel={() => setIsDeletePlaylistModalOpen(false)}
                isOpen={isDeletePlaylistModalOpen}
            />
        </div>
    );

}