/**
 * Role-multiplier repeater (Settings → Earning).
 *
 * Compact add/remove rows for per-role earning multipliers. The number input's
 * name is role_multiplier[<slug>], assigned here from the row's role <select>, so
 * the POST shape stays identical to the old one-row-per-role layout and the PHP
 * collect_role_multipliers() is unchanged. A role already used in another row is
 * disabled in the remaining selects to avoid duplicate keys. Vanilla JS, no build.
 */
( function () {
	'use strict';

	var repeater = document.querySelector( '.acrwd-role-repeater' );
	if ( ! repeater ) {
		return;
	}

	var rows = repeater.querySelector( '.acrwd-role-rows' );
	var template = repeater.querySelector( '.acrwd-role-row-template' );
	var addBtn = repeater.querySelector( '.acrwd-role-add' );
	if ( ! rows || ! template || ! addBtn ) {
		return;
	}

	function syncName( row ) {
		var select = row.querySelector( '.acrwd-role-select' );
		var input = row.querySelector( '.acrwd-role-value' );
		if ( select && input ) {
			input.name = 'role_multiplier[' + select.value + ']';
		}
	}

	function usedSlugs( exceptRow ) {
		var used = [];
		rows.querySelectorAll( '.acrwd-role-row' ).forEach( function ( row ) {
			if ( row === exceptRow ) {
				return;
			}
			var select = row.querySelector( '.acrwd-role-select' );
			if ( select ) {
				used.push( select.value );
			}
		} );
		return used;
	}

	function refreshOptions() {
		rows.querySelectorAll( '.acrwd-role-row' ).forEach( function ( row ) {
			var select = row.querySelector( '.acrwd-role-select' );
			if ( ! select ) {
				return;
			}
			var used = usedSlugs( row );
			Array.prototype.forEach.call( select.options, function ( opt ) {
				opt.disabled = used.indexOf( opt.value ) !== -1;
			} );
		} );
	}

	function firstFreeSlug() {
		var used = usedSlugs( null );
		var opts = template.content.querySelector( '.acrwd-role-select' ).options;
		for ( var i = 0; i < opts.length; i++ ) {
			if ( used.indexOf( opts[ i ].value ) === -1 ) {
				return opts[ i ].value;
			}
		}
		return null;
	}

	function toggleEmpty() {
		repeater.classList.toggle(
			'is-empty',
			rows.querySelectorAll( '.acrwd-role-row' ).length === 0
		);
	}

	function bindRow( row ) {
		var select = row.querySelector( '.acrwd-role-select' );
		var remove = row.querySelector( '.acrwd-role-remove' );
		if ( select ) {
			select.addEventListener( 'change', function () {
				syncName( row );
				refreshOptions();
			} );
		}
		if ( remove ) {
			remove.addEventListener( 'click', function () {
				row.remove();
				refreshOptions();
				toggleEmpty();
			} );
		}
	}

	addBtn.addEventListener( 'click', function () {
		var slug = firstFreeSlug();
		if ( slug === null ) {
			return; // Every role already has a row.
		}
		var node = template.content.firstElementChild.cloneNode( true );
		rows.appendChild( node );
		var select = node.querySelector( '.acrwd-role-select' );
		if ( select ) {
			select.value = slug;
		}
		syncName( node );
		bindRow( node );
		refreshOptions();
		toggleEmpty();
	} );

	rows.querySelectorAll( '.acrwd-role-row' ).forEach( bindRow );
	refreshOptions();
	toggleEmpty();
}() );
