// @ts-nocheck

jQuery( document ).ready( function ( $ ) {
	let dataTableInitialized = false;
	let currentIsMobile = window.matchMedia( '(max-width: 767px)' ).matches;

	/**
	 * Initialize DataTable with given responsive setting
	 *
	 * @param {boolean} isMobile
	 */
	function initializeDataTable( isMobile ) {
		if ( dataTableInitialized ) {
			const table = $( '#data-table' ).DataTable();
			table.destroy();
			// Remove any existing dt-last-visible classes before reinitializing
			$( '#data-table thead th' ).removeClass( 'dt-last-visible' );
		}

		$( '#data-table' ).DataTable( {
			paging: false,
			searching: false,
			ordering: false,
			info: false,
			columnDefs: [ {
				width: '20%',
				targets: 0
			} ],
			fixedColumns: true,
			scrollCollapse: true,
			scrollX: true,
			responsive: isMobile,
			// Callback after table is drawn
			/**
			 * Set the last visible <th> after the table is drawn
			 */
			drawCallback: function () {
				setLastVisibleTh();
			}
		} );

		dataTableInitialized = true;

		// Initialize tooltips only if not mobile
		if ( ! isMobile ) {
			initializeTooltips();
		}
	}

	/**
	 * Initialize tooltips for non-mobile views
	 */
	function initializeTooltips() {
		tippy( '.tooltip-icon', {
			/**
			 * @param reference
			 */
			content: ( reference ) => reference.getAttribute( 'data-tooltip' ),
			allowHTML: true,
			placement: 'top',
			arrow: true,
			maxWidth: 300
		} );
	}

	/**
	 * Set the 'dt-last-visible' class on the last visible <th>
	 */
	function setLastVisibleTh() {
		const table = $( '#data-table' ).DataTable();
		const columns = table.columns().indexes().toArray();

		// Remove the class from all headers first
		$( '#data-table thead th' ).removeClass( 'dt-last-visible' );

		// Iterate from the end to find the last visible column
		for ( let i = columns.length - 1; i >= 0; i-- ) {
			if ( table.column( columns[i] ).visible() ) {
				const header = $( table.column( columns[i] ).header() );

				// Ensure the header is visible via jQuery
				if ( header.is( ':visible' ) ) {
					header.addClass( 'dt-last-visible' );
					break;
				}
			}
		}
	}

	initializeDataTable( currentIsMobile );
	setLastVisibleTh();

	/**
	 * Debounce utility function
	 *
	 * @param {Function} func  The function to debounce.
	 * @param {number} wait  The number of milliseconds to delay.
	 * @returns {Function} The debounced function.
	 */
	function debounce( func, wait ) {
		let timeout;
		return function () {
			const context = this,
				args = arguments;
			clearTimeout( timeout );
			timeout = setTimeout( () => func.apply( context, args ), wait );
		};
	}

	$( window ).resize( debounce( function () {
		const isMobile = window.matchMedia( '(max-width: 767px)' ).matches;
		if ( isMobile !== currentIsMobile ) {
			currentIsMobile = isMobile;
			initializeDataTable( currentIsMobile );
			// After re-initialization, set the last visible <th>
			setLastVisibleTh();
		}
	}, 250 ) );

	/**
	 * Listen for DataTable responsive events to update dt-last-visible
	 */
	$( '#data-table' ).on( 'responsive-display', function () {
		setLastVisibleTh();
	} );
} );