jQuery(document).ready(function($) {

	$('.ffa-edit-points-btn').on('click', function () {
		const userId = $(this).data('user-id');
		const userName = $(this).data('user-name');
		const userEmail = $(this).data('user-email');
		const currentPoints = $(this).data('user-points');

		$('#popup-user-name').html(`<strong>Nombre de cliente:</strong> ${userName}`);
		$('#popup-user-email').html(`<strong>Correo electrónico:</strong> ${userEmail}`);
		$('#popup-user-points').html(`<strong>Puntos actuales:</strong> ${currentPoints}`);
		$('#numeric-stepper').val(0.0);
		$('#apply-points-btn').data('user-id', userId).data('current-points', currentPoints);

		$('#ffa-popup').show();
	});

	// Crear el contenedor del popup
	$('body').append(`
		<div id="ffa-popup" style="display:none; position:fixed; top:50%; left:50%; transform:translate(-50%, -50%); z-index:9999; background:white; border:1px solid #ddd; border-radius:10px; padding:20px; width:300px; box-shadow:0 5px 15px rgba(0,0,0,0.3);">
			<button id="close-popup-btn" class="close-popup-btn" aria-label="Cerrar" style="position:absolute; top:10px; right:10px; background:none; border:none; font-size:20px; cursor:pointer;">&times;</button>
			<div class="popup-content">
				<label id="popup-user-name">Nombre de cliente</label>
				<br>
				<label id="popup-user-email">Correo electrónico</label>
				<br>
				<label id="popup-user-points" style="margin-bottom:20px;">Puntos actuales</label>
				<br>
				<br>
				<p><strong>¿Cuántos puntos quieres añadir/restar?</strong></p>
				<input id="numeric-stepper" type="number" step="0.01" min="-99.99" max="99.99" value="0.00" style="width:100px;">
				<p for="reason-textarea"><strong>Razón de la modificación de puntos</strong> (opcional)</p>
				<textarea id="reason-textarea" placeholder="Escribe aquí la razón..." style="width:100%; height:60px; border:1px solid #ddd; border-radius:5px; padding:5px;"></textarea>
				<div style="text-align: right; margin-top: 20px;">
					<button id="apply-points-btn">Aplicar</button>
				</div>
			</div>
		</div>
	`);

	// Cerrar el popup
	$('#close-popup-btn').on('click', function () {
		$('#ffa-popup').hide();
	});

	// Aplicar cambios de puntos
	$('#apply-points-btn').on('click', function () {
		const userId = $(this).data('user-id');
		const pointsToAdd = parseFloat($('#numeric-stepper').val());
		const reason = $('#reason-textarea').val();

		if (!userId || isNaN(pointsToAdd)) {
			alert('Datos inválidos.');
			return;
		}
		
		if (pointsToAdd == 0) {
			alert('Introduce un valor positivo para añadir puntos o negativo para quitarlos');
			return;
		}
		
		// Llamada AJAX para actualizar los puntos
		$.ajax({
			url: ffa_admin_data.ajax_url,
			method: 'POST',
			data: {
				action: 'ffa_update_user_points',
				user_id: userId,
				points_to_add: pointsToAdd,
				reason: reason,
				nonce: ffa_admin_data.nonce
			},
			success: function (response) {
				if (response.success) {
					// Actualizar los puntos en la lista
					$(`.modify-points-btn[data-user-id="${userId}"]`).data('user-points', response.data.new_points).closest('tr').find('td:nth-child(4)').text(response.data.new_points.toFixed(2));

					window.location.reload();

				} else {
					alert(response.data.message || 'Error al actualizar puntos.');
				}
			},
			error: function () {
				alert('Error al procesar la solicitud.');
			}
		});
	});
});