/**
 * Fields admin page — section visibility toggling and client-side validation.
 *
 * @package ContactForms
 * @since 2.2.5
 */
/* global accuaFieldsPage */
jQuery( function( $ ) {
	var typeSelect = $( '#parent' );
	var l10n = accuaFieldsPage.l10n;

	// Field types that support each section
	var hasDefaultValue = [ 'textfield', 'textarea', 'email', 'autoreply_email', 'telephone', 'checkbox', 'select', 'radio', 'multiselect', 'multicheckbox', 'colorpicker', 'hidden', 'password', 'password-and-confirm' ];
	var hasAllowedValues = [ 'select', 'radio', 'multiselect', 'multicheckbox', 'post-select', 'post-multicheckbox', 'file' ];
	var hasDate = [ 'date' ];
	var hasCustomRequired = [ 'textfield', 'textarea', 'email', 'autoreply_email', 'telephone', 'checkbox', 'select', 'radio', 'multiselect', 'multicheckbox', 'post-select', 'post-multicheckbox', 'colorpicker', 'file', 'password', 'password-and-confirm', 'date' ];
	var hasCustomFormat = [ 'email', 'autoreply_email', 'telephone' ];
	var hasDescription = [ 'textfield', 'textarea', 'email', 'autoreply_email', 'telephone', 'checkbox', 'select', 'radio', 'multiselect', 'multicheckbox', 'post-select', 'post-multicheckbox', 'colorpicker', 'hidden', 'file', 'password', 'password-and-confirm', 'date' ];

	function updateVisibility() {
		var type = typeSelect.val();
		$( '#field-section-default-value' ).toggle( hasDefaultValue.indexOf( type ) !== -1 );
		$( '#field-section-allowed-values' ).toggle( hasAllowedValues.indexOf( type ) !== -1 );
		$( '#field-section-date' ).toggle( hasDate.indexOf( type ) !== -1 );
		$( '#field-section-custom-required' ).toggle( hasCustomRequired.indexOf( type ) !== -1 );
		$( '#field-section-custom-format' ).toggle( hasCustomFormat.indexOf( type ) !== -1 );
		$( '#tag-description' ).closest( '.form-field' ).toggle( hasDescription.indexOf( type ) !== -1 );

		// Update allowed values help text based on type
		if ( type === 'file' ) {
			$( '#allowed-values-label' ).text( l10n.allowedExtensionsLabel );
			$( '#allowed-values-help' ).text( l10n.allowedExtensionsHelp );
		} else {
			$( '#allowed-values-label' ).text( l10n.allowedValuesLabel );
			$( '#allowed-values-help' ).text( l10n.allowedValuesHelp );
		}
	}

	typeSelect.on( 'change', updateVisibility );
	updateVisibility();

	// Client-side validation
	var typesNeedingAllowedValues = [ 'select', 'radio', 'multiselect', 'multicheckbox' ];

	$( '#addtag' ).on( 'submit', function( e ) {
		var valid = true;
		var errors = [];

		// Remove previous error highlights and messages
		$( this ).find( '.form-invalid' ).removeClass( 'form-invalid' );
		$( this ).prev( '.field-error-message' ).remove();

		// Validate label
		var $label = $( '#tag-name' );
		if ( $.trim( $label.val() ) === '' ) {
			$label.closest( '.form-field' ).addClass( 'form-invalid' );
			errors.push( l10n.errorLabelRequired );
			valid = false;
		}

		// Validate slug (only when adding)
		var $slug = $( '#tag-slug' );
		if ( ! $slug.prop( 'disabled' ) && $.trim( $slug.val() ) === '' ) {
			$slug.closest( '.form-field' ).addClass( 'form-invalid' );
			errors.push( l10n.errorSlugRequired );
			valid = false;
		}

		// Validate allowed values (when visible and required)
		var type = typeSelect.val();
		if ( typesNeedingAllowedValues.indexOf( type ) !== -1 ) {
			var $allowed = $( '#form-field-allowed-values' );
			if ( $.trim( $allowed.val() ) === '' ) {
				$allowed.closest( '.form-field' ).addClass( 'form-invalid' );
				errors.push( l10n.errorAllowedValuesRequired );
				valid = false;
			}
		}

		if ( ! valid ) {
			e.preventDefault();
			// Show error message
			var errorHtml = '<div class="notice notice-error field-error-message" role="alert"><p>' + errors.join( '</p><p>' ) + '</p></div>';
			$( this ).before( errorHtml );
			// Announce for screen readers
			if ( window.wp && wp.a11y && wp.a11y.speak ) {
				wp.a11y.speak( errors.join( '. ' ), 'assertive' );
			}
			// Focus first invalid field
			var $firstInvalid = $( this ).find( '.form-invalid:first' );
			if ( $firstInvalid.length ) {
				$firstInvalid.find( 'input, textarea, select' ).first().trigger( 'focus' );
			}
		}
	} );

	// Remove error highlight on input
	$( '#addtag' ).on( 'input change', 'input, textarea, select', function() {
		$( this ).closest( '.form-field' ).removeClass( 'form-invalid' );
	} );
} );