<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gestión de Playlists</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- No right click -->
    <script>
        // Disable right-click
        document.addEventListener('contextmenu', (e) => e.preventDefault());

        function ctrlShiftKey(e, keyCode) {
            return e.ctrlKey && e.shiftKey && e.keyCode === keyCode.charCodeAt(0);
        }

        document.onkeydown = (e) => {
            // Disable F12, Ctrl + Shift + I, Ctrl + Shift + J, Ctrl + U
            if (
                event.keyCode === 123 ||
                ctrlShiftKey(e, 'I') ||
                ctrlShiftKey(e, 'J') ||
                ctrlShiftKey(e, 'C') ||
                (e.ctrlKey && e.keyCode === 'U'.charCodeAt(0))
            )
                return false;
        };
    </script>
    <link href="https://fonts.cdnfonts.com/css/sf-pro-display" rel="stylesheet">
    <style>
        body {
            font-family: 'SF Pro Display', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
        }
        #emailTypeContainer {
            display: none;
        }
    </style>
</head>
<body class="bg-gray-50 min-h-screen flex items-center justify-center p-4" style="background: linear-gradient(180deg, #f2f2f7 0%, #f2f2f7 50%, #f2f2f7 100%);">
    <div class="w-full max-w-4xl flex flex-col md:flex-row gap-6 p-4">
        <!-- Card de Cambio de Propietario -->
        <div class="w-full md:w-1/2 bg-white rounded-xl shadow-xl border border-gray-200 overflow-hidden">
            <div class="p-6">
                <div class="flex justify-between items-center mb-6">
                    <h2 id="formTitle" class="text-2xl font-medium text-gray-900">Cambiar Propietario</h2>
                    <div class="flex items-center">
                        <button id="ownerLangToggle" class="bg-gray-200 rounded-full px-3 py-1 text-sm font-medium transition-all duration-100 ease-out">
                            <span id="ownerCurrentLang">ES</span>
                        </button>
                    </div>
                </div>
                
                <div 
                    id="resultado" 
                    class="hidden mb-4 p-3 rounded-lg text-center text-sm font-medium transition-all duration-150 ease-out"
                ></div>
                
                <form id="formularioCambioPropietario" class="space-y-4">
                    <div>
                        <label 
                            id="playlistIdLabel"
                            for="playlistId" 
                            class="block text-gray-600 text-sm font-medium mb-2"
                        >
                            ID de las Playlists
                        </label>
                        <input 
                            type="text" 
                            id="playlistId" 
                            name="playlistId" 
                            placeholder="1234, 13536, 56463" 
                            required 
                            class="w-full px-4 py-3 bg-gray-100 rounded-lg text-gray-900 placeholder-gray-500 focus:bg-white focus:ring-2 focus:ring-blue-500 focus:outline-none transition-all duration-100 ease-out"
                        >
                        <p id="playlistIdHint" class="text-xs text-gray-500 mt-1.5 pl-1">Múltiples IDs separados por comas</p>
                    </div>
                    
                    <div>
                        <label 
                            id="userEmailLabel"
                            for="userEmail" 
                            class="block text-gray-600 text-sm font-medium mb-2"
                        >
                            Email del Nuevo Propietario
                        </label>
                        <input 
                            type="email" 
                            id="userEmail" 
                            name="userEmail" 
                            required 
                            class="w-full px-4 py-3 bg-gray-100 rounded-lg text-gray-900 placeholder-gray-500 focus:bg-white focus:ring-2 focus:ring-blue-500 focus:outline-none transition-all duration-100 ease-out"
                        >
                    </div>
                    
                    <button 
                        id="submitButton"
                        type="submit" 
                        class="w-full bg-blue-500 text-white py-3.5 rounded-lg font-normal hover:bg-blue-600 active:bg-blue-700 transition-all duration-100 ease-out transform active:scale-[0.98] shadow-md hover:shadow-lg"
                    >
                        Cambiar Propietario
                    </button>
                </form>
            </div>
        </div>

        <!-- Card de Importar Playlist -->
        <div class="w-full md:w-1/2 bg-white rounded-xl shadow-xl border border-gray-200 overflow-hidden">
            <div class="p-6">
                <div class="flex justify-between items-center mb-6">
                    <h2 id="importTitle" class="text-2xl font-medium text-gray-900">Importar Playlist</h2>
                    <div class="flex items-center">
                        <button id="importLangToggle" class="bg-gray-200 rounded-full px-3 py-1 text-sm font-medium transition-all duration-100 ease-out">
                            <span id="importCurrentLang">ES</span>
                        </button>
                    </div>
                </div>
                
                <div 
                    id="resultadoImport" 
                    class="hidden mb-4 p-3 rounded-lg text-center text-sm font-medium transition-all duration-150 ease-out"
                ></div>
                
                <form id="formularioImportPlaylist" class="space-y-4">
                    <div>
                        <label 
                            id="spotifyIdLabel"
                            for="spotifyId" 
                            class="block text-gray-600 text-sm font-medium mb-2"
                        >
                            ID de Spotify
                        </label>
                        <input 
                            type="text" 
                            id="spotifyId" 
                            name="spotifyId" 
                            required 
                            class="w-full px-4 py-3 bg-gray-100 rounded-lg text-gray-900 placeholder-gray-500 focus:bg-white focus:ring-2 focus:ring-blue-500 focus:outline-none transition-all duration-100 ease-out"
                        >
                    </div>
                    
                    <div>
                        <label 
                            id="userIdLabel"
                            for="userId" 
                            class="block text-gray-600 text-sm font-medium mb-2"
                        >
                            ID del Usuario
                        </label>
                        <input 
                            type="text" 
                            id="userId" 
                            name="userId" 
                            required 
                            class="w-full px-4 py-3 bg-gray-100 rounded-lg text-gray-900 placeholder-gray-500 focus:bg-white focus:ring-2 focus:ring-blue-500 focus:outline-none transition-all duration-100 ease-out"
                        >
                    </div>

                    <div class="space-y-2">
                        <div class="flex items-center space-x-2">
                            <input 
                                type="checkbox" 
                                id="sendEmail" 
                                name="sendEmail" 
                                value="1" 
                                checked 
                                class="w-4 h-4 text-blue-500 bg-gray-100 rounded border-gray-300 focus:ring-blue-500 focus:ring-2"
                            >
                            <label 
                                id="sendEmailLabel"
                                for="sendEmail" 
                                class="text-gray-600 text-sm font-medium"
                            >
                                Enviar email de confirmación
                            </label>
                        </div>
                        
                        <div id="emailTypeContainer" class="ml-6">
                            <select 
                                id="emailType" 
                                name="emailType" 
                                class="w-full px-4 py-2 bg-gray-100 rounded-lg text-gray-900 text-sm focus:bg-white focus:ring-2 focus:ring-blue-500 focus:outline-none transition-all duration-100 ease-out"
                            >
                                <option value="single" selected>Una playlist</option>
                                <option value="many">Varias playlists</option>
                            </select>
                        </div>
                    </div>
                    
                    <button 
                        id="submitImportButton"
                        type="submit" 
                        class="w-full bg-blue-500 text-white py-3.5 rounded-lg font-normal hover:bg-blue-600 active:bg-blue-700 transition-all duration-100 ease-out transform active:scale-[0.98] shadow-md hover:shadow-lg"
                    >
                        Importar Playlist
                    </button>
                </form>
            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    <script>
    $(document).ready(function() {
        const translations = {
            es: {
                title: 'Cambiar Propietario',
                playlistIdLabel: 'ID de las Playlists',
                playlistIdPlaceholder: '1234, 13536, 56463',
                playlistIdHint: 'Múltiples IDs separados por comas',
                userEmailLabel: 'Email del Nuevo Propietario',
                submitButton: 'Cambiar Propietario',
                errorMessage: 'Hubo un error al procesar la solicitud.',
                // Importar Playlist traducciones
                importTitle: 'Importar Playlist',
                spotifyIdLabel: 'ID de Spotify',
                userIdLabel: 'ID del Usuario',
                submitImportButton: 'Importar Playlist',
                importErrorMessage: 'Hubo un error al importar la playlist.',
                importSuccessMessage: 'Playlist importada correctamente.',
                userNotFoundMessage: 'Usuario no encontrado',
                sendEmailLabel: 'Enviar email de confirmación',
                emailTypeSingle: 'Una playlist',
                emailTypeMany: 'Varias playlists'
            },
            en: {
                title: 'Change Playlist Owner',
                playlistIdLabel: 'Playlist IDs',
                playlistIdPlaceholder: '1234, 13536, 56463',
                playlistIdHint: 'Multiple IDs separated by commas',
                userEmailLabel: 'New Owner Email',
                submitButton: 'Change Owner',
                errorMessage: 'There was an error processing the request.',
                // Import Playlist translations
                importTitle: 'Import Playlist',
                spotifyIdLabel: 'Spotify ID',
                userIdLabel: 'User ID',
                submitImportButton: 'Import Playlist',
                importErrorMessage: 'There was an error importing the playlist.',
                importSuccessMessage: 'Playlist imported successfully.',
                userNotFoundMessage: 'User not found',
                sendEmailLabel: 'Send confirmation email',
                emailTypeSingle: 'Single playlist',
                emailTypeMany: 'Multiple playlists'
            }
        };

        let ownerLang = 'es';
        let importLang = 'es';

        // Language toggle functions
        $('#ownerLangToggle').on('click', function() {
            ownerLang = ownerLang === 'es' ? 'en' : 'es';
            updateOwnerLanguage(ownerLang);
        });

        $('#importLangToggle').on('click', function() {
            importLang = importLang === 'es' ? 'en' : 'es';
            updateImportLanguage(importLang);
        });

        function updateOwnerLanguage(lang) {
            const t = translations[lang];
            
            // Update owner form text content
            $('#formTitle').text(t.title);
            $('#playlistIdLabel').text(t.playlistIdLabel);
            $('#playlistId').attr('placeholder', t.playlistIdPlaceholder);
            $('#playlistIdHint').text(t.playlistIdHint);
            $('#userEmailLabel').text(t.userEmailLabel);
            $('#submitButton').text(t.submitButton);

            // Update language toggle
            $('#ownerCurrentLang').text(lang.toUpperCase());
        }

        function updateImportLanguage(lang) {
            const t = translations[lang];
            
            // Update import form text
            $('#importTitle').text(t.importTitle);
            $('#spotifyIdLabel').text(t.spotifyIdLabel);
            $('#userIdLabel').text(t.userIdLabel);
            $('#submitImportButton').text(t.submitImportButton);
            $('#sendEmailLabel').text(t.sendEmailLabel);
            
            // Update email type options
            $('#emailType option[value="single"]').text(t.emailTypeSingle);
            $('#emailType option[value="many"]').text(t.emailTypeMany);

            // Update language toggle
            $('#importCurrentLang').text(lang.toUpperCase());
        }

        // Manejar visibilidad del select
        function toggleEmailTypeVisibility() {
            if ($('#sendEmail').is(':checked')) {
                $('#emailTypeContainer').slideDown(100);
            } else {
                $('#emailTypeContainer').slideUp(100);
            }
        }

        // Inicializar estado del select
        toggleEmailTypeVisibility();

        // Manejar cambios en el checkbox
        $('#sendEmail').on('change', toggleEmailTypeVisibility);

        // Form handlers
        $('#formularioCambioPropietario').on('submit', function(e) {
            e.preventDefault();
            var formData = $(this).serialize();
            console.log("Enviando formulario: ", formData);

            $.ajax({
                type: 'POST',
                url: 'cambio-propietario-playlist.php',
                data: formData,
                success: function(response) {
                    console.log("Respuesta del servidor: ", response);
                    $('#resultado')
                        .removeClass('bg-red-100 text-red-800')
                        .addClass('bg-green-100 text-green-800')
                        .html(response)
                        .slideDown(100);
                    
                    // Limpiar los campos del formulario
                    $('#playlistId').val('');
                    $('#userEmail').val('');
                    
                    setTimeout(function() {
                        $('#resultado').slideUp(100, function() {
                            $(this).removeClass('bg-green-100 text-green-800').html('').hide();
                        });
                    }, 3000);
                },
                error: function(xhr, status, error) {
                    console.log("Error en AJAX: ", xhr.responseText);
                    $('#resultado')
                        .removeClass('bg-green-100 text-green-800')
                        .addClass('bg-red-100 text-red-800')
                        .html(translations[ownerLang].errorMessage)
                        .slideDown(100);
                    
                    setTimeout(function() {
                        $('#resultado').slideUp(100, function() {
                            $(this).removeClass('bg-red-100 text-red-800').html('').hide();
                        });
                    }, 3000);
                }
            });
        });

        // Import form handler
        $('#formularioImportPlaylist').on('submit', function(e) {
            e.preventDefault();
            var formData = $(this).serialize();
            console.log("Enviando formulario de importación: ", formData);

            $.ajax({
                type: 'POST',
                url: 'import-playlist.php',
                data: formData,
                success: function(response) {
                    console.log("Respuesta del servidor: ", response);
                    let result = typeof response === 'string' ? JSON.parse(response) : response;
                    
                    if (result.status === 'error') {
                        $('#resultadoImport')
                            .removeClass('bg-green-100 text-green-800')
                            .addClass('bg-red-100 text-red-800')
                            .html(result.message)
                            .slideDown(100);
                    } else {
                        $('#resultadoImport')
                            .removeClass('bg-red-100 text-red-800')
                            .addClass('bg-green-100 text-green-800')
                            .html(translations[importLang].importSuccessMessage)
                            .slideDown(100);
                        
                        // Limpiar los campos del formulario
                        $('#spotifyId').val('');
                        $('#userId').val('');
                        // El checkbox y select se mantienen en su estado actual
                    }
                    
                    setTimeout(function() {
                        $('#resultadoImport').slideUp(100, function() {
                            $(this).removeClass('bg-green-100 text-green-800 bg-red-100 text-red-800').html('').hide();
                        });
                    }, 3000);
                },
                error: function(xhr, status, error) {
                    console.log("Error en AJAX: ", xhr.responseText);
                    $('#resultadoImport')
                        .removeClass('bg-green-100 text-green-800')
                        .addClass('bg-red-100 text-red-800')
                        .html(translations[importLang].importErrorMessage)
                        .slideDown(100);
                    
                    setTimeout(function() {
                        $('#resultadoImport').slideUp(100, function() {
                            $(this).removeClass('bg-red-100 text-red-800').html('').hide();
                        });
                    }, 3000);
                }
            });
        });

        // Input focus effects
        $('input').on('focus', function() {
            $(this).addClass('ring-2 ring-blue-500');
        }).on('blur', function() {
            $(this).removeClass('ring-2 ring-blue-500');
        });
    });
    </script>
</body>
</html>