MUSIC PLAYER PLAYLIST

-- Music Playlist ( Local Script Pasang Di SPS )
-- Icons Fixed + Smooth Hover
-- By @KitooStudioLite ( GPT )

local Players = game:GetService("Players")
local TweenService = game:GetService("TweenService")
local SoundService = game:GetService("SoundService")
local player = Players.LocalPlayer

-- 🎵 Playlist
local playlist = {
{ name = "ABG TUA", id = 139825186779265 },
{ name = "DJ DROP", id = 81414840530987 },
{ name = "THE HARDSTYLE", id = 88691296316236 },
{ name = "DAMEUNGKER", id = 133361466559971 },
{ name = "DJ COBA COBA", id = 77533933904801 },
{ name = "JAMILAH AISYAH", id = 116255319981650 },
{ name = "GARAM & MADU", id = 89831490305285 }
}

-- 🔊 Suara klik
local clickSound = Instance.new("Sound")
clickSound.SoundId = "rbxassetid://9118823101"
clickSound.Volume = 0.5
clickSound.Parent = SoundService

-- 📦 GUI
local gui = Instance.new("ScreenGui")
gui.Name = "MusicPlayerUI"
gui.ResetOnSpawn = false
gui.IgnoreGuiInset = true
gui.Parent = player:WaitForChild("PlayerGui")

-- 🎵 Tombol toggle
local toggleBtn = Instance.new("TextButton")
toggleBtn.Size = UDim2.new(0, 40, 0, 40)
toggleBtn.Position = UDim2.new(1, -450, 0, 15)
toggleBtn.BackgroundColor3 = Color3.fromRGB(35, 35, 40)
toggleBtn.TextColor3 = Color3.fromRGB(255, 255, 255)
toggleBtn.Text = "🎵"
toggleBtn.Font = Enum.Font.GothamBold
toggleBtn.TextSize = 18
toggleBtn.AutoButtonColor = false
toggleBtn.Parent = gui
Instance.new("UICorner", toggleBtn).CornerRadius = UDim.new(1)
Instance.new("UIStroke", toggleBtn).Color = Color3.fromRGB(60, 60, 70)

toggleBtn.MouseEnter:Connect(function()
    TweenService:Create(toggleBtn, TweenInfo.new(0.15), {BackgroundColor3 = Color3.fromRGB(55, 55, 60)}):Play()
end)
toggleBtn.MouseLeave:Connect(function()
    TweenService:Create(toggleBtn, TweenInfo.new(0.15), {BackgroundColor3 = Color3.fromRGB(35, 35, 40)}):Play()
end)

-- 🪟 Frame utama
local main = Instance.new("Frame")
main.Size = UDim2.new(0, 300, 0, 270)
main.Position = UDim2.new(1, 320, 1, -280)
main.BackgroundColor3 = Color3.fromRGB(25, 25, 30)
main.BorderSizePixel = 0
main.Visible = false
main.ClipsDescendants = true
main.ZIndex = 10
main.Parent = gui

Instance.new("UICorner", main).CornerRadius = UDim.new(0, 16)
Instance.new("UIStroke", main).Color = Color3.fromRGB(60, 60, 70)

-- 🌫 Shadow
local shadow = Instance.new("ImageLabel")
shadow.Image = "rbxassetid://5587865193"
shadow.ImageTransparency = 0.5
shadow.ScaleType = Enum.ScaleType.Slice
shadow.SliceCenter = Rect.new(10, 10, 118, 118)
shadow.Size = UDim2.new(1, 30, 1, 30)
shadow.Position = UDim2.new(0, -15, 0, -15)
shadow.BackgroundTransparency = 1
shadow.ZIndex = 0
shadow.Parent = main

-- 🏷️ Title (Rainbow Modern)
local title = Instance.new("TextLabel")
title.Size = UDim2.new(1, 0, 0, 40)
title.Position = UDim2.new(0, 0, 0, 5)
title.BackgroundTransparency = 1
title.Text = "Music Playlist"
title.Font = Enum.Font.GothamBold
title.TextColor3 = Color3.fromRGB(255, 255, 255)
title.TextSize = 20
title.TextXAlignment = Enum.TextXAlignment.Center
title.ZIndex = 11
title.Parent = main

-- 🌈 Efek warna rainbow halus
task.spawn(function()
    local hue = 0
    while task.wait(0.05) do
        hue = (hue + 0.01) % 1
        local color = Color3.fromHSV(hue, 0.8, 1)
        TweenService:Create(title, TweenInfo.new(0.15), {TextColor3 = color}):Play()
    end
end)

-- ❌ Tombol close
local closeBtn = Instance.new("ImageButton")
closeBtn.Size = UDim2.new(0, 28, 0, 28)
closeBtn.Position = UDim2.new(1, -38, 0, 10)
closeBtn.BackgroundColor3 = Color3.fromRGB(45, 45, 50)
closeBtn.Image = "rbxassetid://3926305904"
closeBtn.ImageRectOffset = Vector2.new(924, 724)
closeBtn.ImageRectSize = Vector2.new(36, 36)
closeBtn.AutoButtonColor = false
closeBtn.ZIndex = 11
closeBtn.Parent = main
Instance.new("UICorner", closeBtn).CornerRadius = UDim.new(1)
Instance.new("UIStroke", closeBtn).Color = Color3.fromRGB(80, 80, 90)

-- 🎶 Info lagu
local songLabel = Instance.new("TextLabel")
songLabel.Size = UDim2.new(1, -20, 0, 25)
songLabel.Position = UDim2.new(0, 10, 0, 45)
songLabel.BackgroundTransparency = 1
songLabel.TextColor3 = Color3.fromRGB(200, 200, 200)
songLabel.Font = Enum.Font.Gotham
songLabel.TextSize = 14
songLabel.Text = "No song playing"
songLabel.ZIndex = 11
songLabel.Parent = main

-- 📜 Playlist
local playlistFrame = Instance.new("ScrollingFrame")
playlistFrame.Size = UDim2.new(1, -20, 0, 120)
playlistFrame.Position = UDim2.new(0, 10, 0, 75)
playlistFrame.BackgroundColor3 = Color3.fromRGB(30, 30, 35)
playlistFrame.ScrollBarThickness = 6
playlistFrame.BorderSizePixel = 0
playlistFrame.AutomaticCanvasSize = Enum.AutomaticSize.Y
playlistFrame.CanvasSize = UDim2.new(0, 0, 0, 0)
playlistFrame.ZIndex = 11
playlistFrame.Parent = main
Instance.new("UICorner", playlistFrame).CornerRadius = UDim.new(0, 10)
Instance.new("UIStroke", playlistFrame).Color = Color3.fromRGB(55, 55, 65)
Instance.new("UIListLayout", playlistFrame).Padding = UDim.new(0, 5)

-- 🎛 Kontrol musik
local controls = Instance.new("Frame")
controls.Size = UDim2.new(1, 0, 0, 55)
controls.Position = UDim2.new(0, 0, 1, -60)
controls.BackgroundTransparency = 1
controls.ZIndex = 11
controls.Parent = main

-- 🎚 Tombol kontrol (ikon baru)
local icons = {
Prev = "rbxassetid://12662712394",  -- ⏮️
Play = "rbxassetid://6813750207",  -- ▶️
Pause = "rbxassetid://6813750293", -- ⏸️
Next = "rbxassetid://12662720464"   -- ⏭️
}

local buttons = {}
local names = {"Prev", "PlayPause", "Next"}
local offsets = {-80, 0, 80}
for i, name in ipairs(names) do
    local btn = Instance.new("ImageButton")
    btn.Size = UDim2.new(0, 40, 0, 40)
    btn.Position = UDim2.new(0.5, offsets[i], 0.5, 0)
    btn.AnchorPoint = Vector2.new(0.5, 0.5)
    btn.BackgroundColor3 = Color3.fromRGB(40, 40, 45)
    btn.Image = (name == "PlayPause") and icons.Play or icons[name]
    btn.AutoButtonColor = false
    btn.ZIndex = 12
    btn.Parent = controls
    Instance.new("UICorner", btn).CornerRadius = UDim.new(1)
    Instance.new("UIStroke", btn).Color = Color3.fromRGB(70, 70, 80)

    btn.MouseEnter:Connect(function()
        TweenService:Create(btn, TweenInfo.new(0.15), {BackgroundColor3 = Color3.fromRGB(65, 65, 70)}):Play()
    end)
    btn.MouseLeave:Connect(function()
        TweenService:Create(btn, TweenInfo.new(0.15), {BackgroundColor3 = Color3.fromRGB(40, 40, 45)}):Play()
    end)
    buttons[name] = btn
end

-- 🎶 Sistem lagu
local currentIndex = 1
local currentSound
local isPlaying = false
local songButtons = {}

local function playSong(index)
    if currentSound then currentSound:Destroy() end
    local song = playlist[index]
    if not song then return end

    currentSound = Instance.new("Sound")
    currentSound.SoundId = "rbxassetid://" .. song.id
    currentSound.Volume = 0.6
    currentSound.Parent = SoundService
    currentSound:Play()
    isPlaying = true
    songLabel.Text = "Now Playing: " .. song.name

    buttons.PlayPause.Image = icons.Pause
    clickSound:Play()

    for i, btn in ipairs(songButtons) do
        if i == index then
            TweenService:Create(btn, TweenInfo.new(0.25), {BackgroundColor3 = Color3.fromRGB(70, 120, 255), TextColor3 = Color3.fromRGB(255, 255, 255)}):Play()
        else
            TweenService:Create(btn, TweenInfo.new(0.25), {BackgroundColor3 = Color3.fromRGB(35, 35, 40), TextColor3 = Color3.fromRGB(230, 230, 230)}):Play()
        end
    end

    currentSound.Ended:Connect(function()
        currentIndex = (currentIndex % #playlist) + 1
        playSong(currentIndex)
    end)
end

-- 🔁 Playlist tombol
for i, song in ipairs(playlist) do
    local btn = Instance.new("TextButton")
    btn.Size = UDim2.new(1, -5, 0, 32)
    btn.BackgroundColor3 = Color3.fromRGB(35, 35, 40)
    btn.Text = "🎵 " .. song.name
    btn.TextColor3 = Color3.fromRGB(230, 230, 230)
    btn.Font = Enum.Font.Gotham
    btn.TextSize = 14
    btn.AutoButtonColor = false
    btn.ZIndex = 11
    btn.Parent = playlistFrame
    Instance.new("UICorner", btn).CornerRadius = UDim.new(0, 8)
    Instance.new("UIStroke", btn).Color = Color3.fromRGB(55, 55, 65)

    btn.MouseEnter:Connect(function()
        if currentIndex ~= i then
            TweenService:Create(btn, TweenInfo.new(0.15), {BackgroundColor3 = Color3.fromRGB(50, 50, 55)}):Play()
        end
    end)
    btn.MouseLeave:Connect(function()
        if currentIndex ~= i then
            TweenService:Create(btn, TweenInfo.new(0.15), {BackgroundColor3 = Color3.fromRGB(35, 35, 40)}):Play()
        end
    end)

    btn.MouseButton1Click:Connect(function()
        clickSound:Play()
        local tweenOut = TweenService:Create(btn, TweenInfo.new(0.1), {Size = UDim2.new(1, -10, 0, 28)})
        local tweenIn = TweenService:Create(btn, TweenInfo.new(0.1), {Size = UDim2.new(1, -5, 0, 32)})
        tweenOut:Play(); tweenOut.Completed:Connect(function() tweenIn:Play() end)

            currentIndex = i
            playSong(currentIndex)
        end)

        table.insert(songButtons, btn)
    end

    -- ▶️ Kontrol tombol
    buttons.PlayPause.MouseButton1Click:Connect(function()
        if not currentSound then
            playSong(currentIndex)
        else
            if isPlaying then
                currentSound:Pause()
                isPlaying = false
                songLabel.Text = "Paused: " .. playlist[currentIndex].name
                buttons.PlayPause.Image = icons.Play
            else
                currentSound:Resume()
                isPlaying = true
                songLabel.Text = "Now Playing: " .. playlist[currentIndex].name
                buttons.PlayPause.Image = icons.Pause
            end
        end
    end)

    buttons.Next.MouseButton1Click:Connect(function()
        currentIndex = (currentIndex % #playlist) + 1
        playSong(currentIndex)
    end)

    buttons.Prev.MouseButton1Click:Connect(function()
        currentIndex = ((currentIndex - 2) % #playlist) + 1
        playSong(currentIndex)
    end)

    -- 📂 Buka / Tutup UI
    local isOpen = false
    local function openUI()
        clickSound:Play()
        isOpen = true
        main.Visible = true
        TweenService:Create(main, TweenInfo.new(0.35, Enum.EasingStyle.Quint), {Position = UDim2.new(1, -320, 1, -280)}):Play()
    end

    local function closeUI()
        clickSound:Play()
        isOpen = false
        TweenService:Create(main, TweenInfo.new(0.35, Enum.EasingStyle.Quint), {Position = UDim2.new(1, 320, 1, -280)}):Play()
        task.wait(0.3)
        main.Visible = false
    end

    toggleBtn.MouseButton1Click:Connect(function()
        if isOpen then closeUI() else openUI() end
    end)
    closeBtn.MouseButton1Click:Connect(closeUI)

    print("✅ Music Playlist Simple By @KitooStudioLite")