console.log("Playlist manager JS yüklendi");

document.addEventListener('click', function(e) {
    if (!e.target.classList.contains('add-to-playlist')) return;

    const btn = e.target;

    // 1. Kullanıcının çalma listelerini getir
    fetch(playlistAjax.ajax_url, {
        method: 'POST',
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
        body: new URLSearchParams({ action: 'get_user_playlists' })
    })
    .then(res => res.json())
    .then(response => {
        if (!response.success) return alert("Çalma listeleri yüklenemedi.");

        // 2. Şık modal oluştur
        const modal = document.createElement('div');
        modal.style.cssText = `
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.7);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 9999999;
            animation: fadeIn 0.2s ease-out;
        `;

        const box = document.createElement('div');
        box.style.cssText = `
            background: #fff;
            padding: 24px;
            border-radius: 10px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.2);
            width: 100%;
            max-width: 360px;
            font-family: sans-serif;
        `;

        box.innerHTML = `
            <h2 style="margin-top:0;font-size:20px; color:black;">Çalma Listesine Ekle</h2>
            <label style="display:block;margin:10px 0 5px; color:black;">Çalma listesi seçin veya yeni oluşturun:</label>
            <select id="playlistSelect" style="width:100%;padding:8px;border-radius:6px;border:1px solid #ccc;">
                ${response.data.map(pl => `<option value="${pl.file}">${pl.title}</option>`).join('')}
                <option value="__new__">+ Yeni Çalma Listesi Oluştur</option>
            </select>
            <input id="newPlaylistInput" type="text" placeholder="Yeni çalma listesi adı"
                   style="display:none;width:100%;margin-top:10px;padding:8px;border-radius:6px;border:1px solid #ccc;" />
            <div style="margin-top:20px;text-align:right;">
                <button id="cancelPlaylist" style="padding:8px 12px;margin-right:10px;border:none;border-radius:5px;background:#ccc;color:#333;">İptal</button>
                <button id="confirmPlaylist" style="padding:8px 14px;border:none;border-radius:5px;background:#0073aa;color:white;">Ekle</button>
            </div>
        `;

        modal.appendChild(box);
        document.body.appendChild(modal);

        const select = box.querySelector('#playlistSelect');
        const input = box.querySelector('#newPlaylistInput');

        // Show input field immediately if "__new__" is selected by default
        if (select.value === '__new__') {
            input.style.display = 'block';
        }

        select.addEventListener('change', () => {
            input.style.display = select.value === '__new__' ? 'block' : 'none';
        });

        box.querySelector('#cancelPlaylist').onclick = () => modal.remove();

        box.querySelector('#confirmPlaylist').onclick = () => {
            let selected = select.value;
            if (selected === '__new__') {
                selected = input.value.trim();
                if (!selected) return alert("Lütfen geçerli bir isim girin.");
            }

            const data = {
                action: 'add_to_playlist',
                id: btn.dataset.id,
                title: btn.dataset.title,
                url: btn.dataset.url,
                thumbnail: btn.dataset.thumbnail,
                playlist: selected
            };

            fetch(playlistAjax.ajax_url, {
                method: 'POST',
                headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
                body: new URLSearchParams(data)
            })
            .then(res => res.json())
            .then(res => {
                alert(res.data?.message || 'Hata oluştu.');
                modal.remove();
            });
        };
    });
});