<?php
/**
 * Template Name: Cashback Categories
 *
 * User-facing page to select cashback categories
 * Route: /cashback-categories/
 */

if ( ! is_user_logged_in() ) {
	wp_redirect( home_url( '/login/' ) );
	exit;
}

$settings     = matreshka_cashback_settings();
$whitelist    = matreshka_get_cashback_whitelist_data();
$user_cats    = matreshka_get_user_cashback_categories();
$max_cats     = $settings['user_limit'];
$icons_url    = get_template_directory_uri() . '/assets/icons/';

get_header();
?>

<link rel="stylesheet" href="<?php echo esc_url( get_template_directory_uri() . '/assets/css/cashback.css?v=1.0.0' ); ?>">
<style>.footer, .footer-menu { margin-top: 0; }</style>

<main class="cashback-page">
	<div class="container">
		<div class="cashback-header">
			<h2 class="cashback-title montserrat-bold">Категории кешбека</h2>
			<p class="cashback-subtitle montserrat-medium">
				Выберите до <?php echo esc_html( $max_cats ); ?> категорий с повышенным кешбеком
			</p>
			<div class="cashback-default-info montserrat-medium">
				<img src="<?php echo esc_url( $icons_url . 'UndoLeftRound.svg' ); ?>" alt="" width="20">
				<span>Общий кешбек: <strong><?php echo esc_html( str_replace( '.', ',', $settings['default_percent'] ) ); ?>%</strong></span>
			</div>
		</div>

		<div class="cashback-counter montserrat-medium" id="cashback-counter">
			Выбрано: <strong><span id="selected-count"><?php echo count( $user_cats ); ?></span> / <?php echo esc_html( $max_cats ); ?></strong>
		</div>

		<?php if ( ! empty( $whitelist ) ) : ?>
		<div class="cashback-categories-grid" id="cashback-grid">
			<?php foreach ( $whitelist as $cat ) :
				$is_selected = in_array( $cat['id'], $user_cats );
			?>
			<label class="cashback-cat-card <?php echo $is_selected ? 'selected' : ''; ?>" data-id="<?php echo esc_attr( $cat['id'] ); ?>">
				<input type="checkbox" name="cashback_cats[]" value="<?php echo esc_attr( $cat['id'] ); ?>"
					   <?php checked( $is_selected ); ?> class="cashback-cat-checkbox">
				<div class="cashback-cat-inner">
					<?php if ( $cat['image'] ) : ?>
						<img src="<?php echo esc_url( $cat['image'] ); ?>" alt="<?php echo esc_attr( $cat['name'] ); ?>" class="cashback-cat-img">
					<?php else : ?>
						<div class="cashback-cat-img cashback-cat-placeholder">
							<img src="<?php echo esc_url( $icons_url . 'UndoLeftRound.svg' ); ?>" alt="" width="32">
						</div>
					<?php endif; ?>
					<div class="cashback-cat-info">
						<span class="cashback-cat-name montserrat-semibold"><?php echo esc_html( $cat['name'] ); ?></span>
						<span class="cashback-cat-percent montserrat-bold"><?php echo esc_html( str_replace( '.', ',', $cat['percent'] ) ); ?>%</span>
					</div>
				</div>
				<div class="cashback-cat-check">
					<svg width="20" height="20" viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="9" stroke="currentColor" stroke-width="2"/><path d="M6 10l3 3 5-5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
				</div>
			</label>
			<?php endforeach; ?>
		</div>
		<?php else : ?>
			<p class="text-center montserrat-medium mt-4">Категории пока не настроены администратором.</p>
		<?php endif; ?>

		<div class="cashback-actions">
			<button type="button" id="btn-save-cashback" class="btn btn-red-primary montserrat-bold w-100" disabled>
				Сохранить
			</button>
		</div>

		<div id="cashback-message" class="cashback-message" style="display:none;"></div>
	</div>
</main>

<script>
jQuery(function($) {
	var maxCats = <?php echo (int) $max_cats; ?>;
	var $grid   = $('#cashback-grid');
	var $count  = $('#selected-count');
	var $btn    = $('#btn-save-cashback');
	var $msg    = $('#cashback-message');

	function updateUI() {
		var checked = $grid.find('input:checked').length;
		$count.text(checked);

		// Toggle selected class
		$grid.find('.cashback-cat-card').each(function() {
			var $card = $(this);
			$card.toggleClass('selected', $card.find('input').is(':checked'));
		});

		// Disable unchecked if limit reached
		if (checked >= maxCats) {
			$grid.find('input:not(:checked)').prop('disabled', true).closest('.cashback-cat-card').addClass('disabled');
		} else {
			$grid.find('input:disabled').prop('disabled', false).closest('.cashback-cat-card').removeClass('disabled');
		}

		$btn.prop('disabled', false);
	}

	$grid.on('change', 'input', updateUI);

	$btn.on('click', function() {
		var cats = [];
		$grid.find('input:checked').each(function() {
			cats.push(parseInt($(this).val()));
		});

		$btn.prop('disabled', true).text('Сохранение...');

		$.post('<?php echo admin_url( "admin-ajax.php" ); ?>', {
			action: 'matreshka_save_cashback_categories',
			nonce: '<?php echo wp_create_nonce( "matreshka_cashback_nonce" ); ?>',
			categories: cats
		}, function(r) {
			if (r.success) {
				window.location.href = '<?php echo esc_url( home_url( "/" ) ); ?>';
				return;
			} else {
				$msg.text(r.data.message || 'Ошибка').removeClass('success').addClass('error').show();
			}
			$btn.prop('disabled', false).text('Сохранить');
		}).fail(function() {
			$msg.text('Ошибка сети').removeClass('success').addClass('error').show();
			$btn.prop('disabled', false).text('Сохранить');
		});
	});
});
</script>

<?php get_footer(); ?>