/* global mraAdmin, mraTools */
( function ( $ ) {
	'use strict';

	// -------------------------------------------------------------------------
	// Batch runner — Tools page
	// -------------------------------------------------------------------------

	function initRunner( type ) {
		var running = false;
		var stopReq = false;

		var $card  = $( '#mra-runner-' + type );
		var $start = $card.find( '.mra-runner-start' );
		var $stop  = $card.find( '.mra-runner-stop' );
		var $prog  = $card.find( '.mra-runner-progress' );
		var $fill  = $card.find( '.mra-runner-bar-fill' );
		var $label = $card.find( '.mra-runner-label' );

		$start.on( 'click', function () {
			if ( running ) { return; }
			running = true;
			stopReq = false;
			$start.prop( 'disabled', true );
			$stop.prop( 'hidden', false );
			$prog.prop( 'hidden', false );
			$fill.css( 'width', '0%' );
			$label.text( '' );
			runBatch();
		} );

		$stop.on( 'click', function () {
			stopReq = true;
			$( this ).prop( 'disabled', true );
		} );

		function runBatch() {
			if ( stopReq ) {
				finish( mraTools.i18n.stopped );
				return;
			}
			$.ajax( {
				url:  mraTools.ajaxUrl,
				type: 'POST',
				data: {
					action: 'mra_run_batch',
					type:   type,
					nonce:  mraTools.nonce
				},
				success: function ( res ) {
					if ( ! res.success ) {
						finish( mraTools.i18n.error );
						return;
					}
					var d   = res.data;
					var pct = d.total > 0 ? Math.round( ( d.done / d.total ) * 100 ) : 100;
					$fill.css( 'width', pct + '%' );
					$label.text( d.done + ' / ' + d.total );
					if ( d.remaining > 0 ) {
						setTimeout( runBatch, 300 );
					} else {
						$fill.css( 'width', '100%' );
						finish( mraTools.i18n.done );
					}
				},
				error: function () {
					finish( mraTools.i18n.error );
				}
			} );
		}

		function finish( msg ) {
			running = false;
			$start.prop( 'disabled', false );
			$stop.prop( 'hidden', true ).prop( 'disabled', false );
			$label.text( msg );
		}
	}

	// -------------------------------------------------------------------------
	// Modal — Audit page
	// -------------------------------------------------------------------------

	var $overlay, $modalTitle, $modalBody;

	function openModal( attachmentId ) {
		$modalTitle.text( mraAdmin.i18n.detailsTitle );
		$modalBody.html( '<p>' + mraAdmin.i18n.loading + '</p>' );
		$overlay.addClass( 'is-open' );

		$.ajax( {
			url: mraAdmin.ajaxUrl,
			type: 'POST',
			data: {
				action: 'mra_usage_details',
				attachment_id: attachmentId,
				nonce: mraAdmin.nonce
			},
			success: function ( response ) {
				if ( response.success ) {
					$modalTitle.text( response.data.title );
					$modalBody.html( response.data.html );
				} else {
					$modalBody.html( '<p>' + mraAdmin.i18n.errorLoading + '</p>' );
				}
			},
			error: function () {
				$modalBody.html( '<p>' + mraAdmin.i18n.errorLoading + '</p>' );
			}
		} );
	}

	function closeModal() {
		$overlay.removeClass( 'is-open' );
		$modalBody.html( '' );
	}

	$( function () {
		// Initialize batch runners if mraTools is available (Tools page only).
		if ( typeof mraTools !== 'undefined' ) {
			[ 'index', 'usage', 'external' ].forEach( initRunner );
		}

		$overlay    = $( '#mra-modal-overlay' );
		$modalTitle = $overlay.find( '.mra-modal-title' );
		$modalBody  = $overlay.find( '.mra-modal-body' );

		// Close on × button.
		$overlay.on( 'click', '.mra-modal-close', closeModal );

		// Close when clicking the dark backdrop (not the box itself).
		$overlay.on( 'click', function ( e ) {
			if ( $( e.target ).is( $overlay ) ) {
				closeModal();
			}
		} );

		// Close on Escape key.
		$( document ).on( 'keydown', function ( e ) {
			if ( 27 === e.which && $overlay.hasClass( 'is-open' ) ) {
				closeModal();
			}
		} );

		// "View Details" links (row action or "N more" link in usages column).
		$( document ).on( 'click', '.mra-view-details', function ( e ) {
			e.preventDefault();
			openModal( $( this ).data( 'id' ) );
		} );

		// Dismiss toggle — Alerts page.
		$( document ).on( 'click', '.mra-dismiss-toggle', function () {
			var targetId = $( this ).data( 'target' );
			var $row = $( '#' + targetId );
			$row.prop( 'hidden', function ( i, v ) { return !v; } );
			$( this ).text( $row.prop( 'hidden' ) ? 'Dismiss' : 'Cancel' );
		} );

		// Cancel button inside dismiss form row.
		$( document ).on( 'click', '.mra-dismiss-cancel', function () {
			var $row = $( this ).closest( 'tr.mra-dismiss-row' );
			var rowId = $row.attr( 'id' );
			$row.prop( 'hidden', true );
			$( '[data-target="' + rowId + '"]' ).text( 'Dismiss' );
		} );
	} );
} ( jQuery ) );