/* global kramarCustomStatuses */
( function () {

	var cfg = kramarCustomStatuses;

	// ── Color picker + hex sync ──
	document.querySelectorAll( '.kramar-cs-color' ).forEach( function ( wrap ) {
		var picker = wrap.querySelector( 'input[type="color"]' );
		var hex    = wrap.querySelector( '.kramar-cs-hex' );
		if ( ! picker || ! hex ) { return; }
		picker.addEventListener( 'input', function () { hex.value = picker.value; } );
		hex.addEventListener( 'input', function () {
			if ( /^#[0-9a-f]{6}$/i.test( hex.value ) ) { picker.value = hex.value; }
		} );
		hex.addEventListener( 'change', function () {
			picker.value = hex.value;
			hex.value    = picker.value;
		} );
	} );

	// ── Slug preview on the add form ──
	// The slug is stored as wc-{slug} in a varchar(20) column, so anything over
	// cfg.maxSlug characters is rejected server-side. Mirror the name into the
	// slug field as the user types and flag an over-long value before submit.
	( function () {
		var wrap = document.getElementById( 'kramar-os-add-form-wrap' );
		if ( ! wrap ) { return; }

		var nameInput = wrap.querySelector( 'input[name="kramar_status_label"]' );
		var slugInput = wrap.querySelector( '.kramar-os-slug-input' );
		var hint      = wrap.querySelector( '.kramar-os-slug-hint' );
		if ( ! nameInput || ! slugInput || ! hint ) { return; }

		var defaultHint = hint.textContent;
		var edited      = false;

		function slugify( value ) {
			return value
				.normalize( 'NFD' )
				.replace( /[\u0300-\u036f]/g, '' )
				.toLowerCase()
				.replace( /[^a-z0-9]+/g, '-' )
				.replace( /^-+|-+$/g, '' );
		}

		function refresh() {
			var slug     = slugify( slugInput.value );
			var tooLong  = slug.length > cfg.maxSlug;
			slugInput.classList.toggle( 'is-too-long', tooLong );
			hint.classList.toggle( 'is-too-long', tooLong );
			hint.textContent = tooLong
				? cfg.i18n.slugTooLong
					.replace( '{count}', slug.length )
					.replace( '{max}', cfg.maxSlug )
				: defaultHint;
		}

		slugInput.addEventListener( 'input', function () {
			edited = '' !== slugInput.value;
			refresh();
		} );

		nameInput.addEventListener( 'input', function () {
			if ( ! edited ) {
				slugInput.value = slugify( nameInput.value );
			}
			refresh();
		} );
	} )();

	// ── Add Status button: show/hide add form ──
	document.querySelectorAll( '.kramar-os-add-btn' ).forEach( function ( btn ) {
		btn.addEventListener( 'click', function () {
			var wrap = document.getElementById( 'kramar-os-add-form-wrap' );
			if ( ! wrap ) { return; }
			var isHidden = wrap.style.display === 'none';
			wrap.style.display = isHidden ? '' : 'none';
			if ( isHidden ) {
				var nameInput = wrap.querySelector( 'input[name="kramar_status_label"]' );
				if ( nameInput ) { nameInput.focus(); }
			}
		} );
	} );

	// ── Cancel add form ──
	document.querySelectorAll( '.kramar-os-cancel-add' ).forEach( function ( btn ) {
		btn.addEventListener( 'click', function () {
			var wrap = document.getElementById( 'kramar-os-add-form-wrap' );
			if ( wrap ) { wrap.style.display = 'none'; }
		} );
	} );

	// ── Edit button: expand inline edit form ──
	document.querySelectorAll( '.kramar-os-edit-btn' ).forEach( function ( btn ) {
		btn.addEventListener( 'click', function () {
			var slug = btn.getAttribute( 'data-slug' );
			var editWrap = document.getElementById( 'kramar-os-edit-' + slug );
			if ( ! editWrap ) { return; }
			var isHidden = editWrap.style.display === 'none';
			// Close any other open edit forms first.
			document.querySelectorAll( '.kramar-os-edit-form-wrap' ).forEach( function ( w ) {
				w.style.display = 'none';
			} );
			if ( isHidden ) {
				editWrap.style.display = '';
				var nameInput = editWrap.querySelector( 'input[name="kramar_status_label"]' );
				if ( nameInput ) { nameInput.focus(); }
			}
		} );
	} );

	// ── Cancel edit form ──
	document.querySelectorAll( '.kramar-os-cancel-edit' ).forEach( function ( btn ) {
		btn.addEventListener( 'click', function () {
			var slug = btn.getAttribute( 'data-slug' );
			var editWrap = document.getElementById( 'kramar-os-edit-' + slug );
			if ( editWrap ) { editWrap.style.display = 'none'; }
		} );
	} );

	// ── Delete: confirm with order count warning ──
	document.querySelectorAll( '.kramar-os-delete-form' ).forEach( function ( form ) {
		form.addEventListener( 'submit', function ( e ) {
			var btn   = form.querySelector( '.kramar-cs-delete' );
			var count = parseInt( btn ? btn.getAttribute( 'data-count' ) || '0' : '0', 10 );
			var msg;
			if ( count > 0 ) {
				msg = cfg.i18n.deleteWithCount.replace( '{count}', count );
			} else {
				msg = cfg.i18n.deleteConfirm;
			}
			if ( ! window.confirm( msg ) ) {
				e.preventDefault();
			}
		} );
	} );

} )();
