/**
 * Shared in-editor preview fallbacks for GravityView page-builder modules.
 *
 * Some View layouts can't render in a builder's preview pane because they
 * depend on browser-side AJAX (DataTables) or external scripts that aren't
 * loaded in the editor (Maps). Replace those elements with a friendly notice
 * so the user sees something explanatory instead of an empty/broken widget.
 *
 * Used by both the Gutenberg block editor preview and the Divi Visual
 * Builder React component.
 *
 * @package GravityKit\GravityView\PageBuilders
 */

const NOTICE_STYLE = 'text-align:center; padding:20px; color:#666; font-style:italic;';

// Google Maps pin glyph used as the Maps fallback illustration.
const MAPS_SVG = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 232597 333333" width="48" height="48" style="display:block;margin:0 auto 8px;" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd"><path d="M151444 5419C140355 1916 128560 0 116311 0 80573 0 48591 16155 27269 41534l54942 46222 69232-82338z" fill="#1a73e8"/><path d="M27244 41534C10257 61747 0 87832 0 116286c0 21876 4360 39594 11517 55472l70669-84002-54942-46222z" fill="#ea4335"/><path d="M116311 71828c24573 0 44483 19910 44483 44483 0 10938-3957 20969-10509 28706 0 0 35133-41786 69232-82313-14089-27093-38510-47936-68048-57286L82186 87756c8166-9753 20415-15928 34125-15928z" fill="#4285f4"/><path d="M116311 160769c-24573 0-44483-19910-44483-44483 0-10863 3906-20818 10358-28555l-70669 84027c12072 26791 32159 48289 52851 75381l85891-102122c-8141 9628-20339 15752-33948 15752z" fill="#fbbc04"/><path d="M148571 275014c38787-60663 84026-88210 84026-158728 0-19331-4738-37552-13080-53581L64393 247140c6578 8620 13206 17793 19683 27900 23590 36444 17037 58294 32260 58294 15172 0 8644-21876 32235-58320z" fill="#34a853"/></svg>';

/**
 * Apply preview-pane fallbacks to View HTML.
 *
 * @param {string} html              Raw View HTML.
 * @param {Object} [options]         Options.
 * @param {string} [options.dataTablesNotice] Message shown for empty DataTables.
 * @param {string} [options.mapsNotice]       Message shown for Map canvases.
 * @param {boolean} [options.stripScripts=true] Strip <script> tags.
 * @return {string} HTML with substitutions applied.
 */
export function applyBuilderPreviewFallbacks( html, options = {} ) {
	if ( ! html ) {
		return html;
	}

	const dataTablesNotice = options.dataTablesNotice
		|| 'Entries from the DataTables layout are not available in this preview.';
	const mapsNotice = options.mapsNotice
		|| 'Map is not available in this preview.';
	const stripScripts = options.stripScripts !== false;

	const temp = document.createElement( 'div' );
	temp.innerHTML = html;

	if ( stripScripts ) {
		[ ...temp.getElementsByTagName( 'script' ) ].forEach( ( el ) => el.remove() );
	}

	if ( /gv-datatables/.test( html ) ) {
		[ ...temp.querySelectorAll( 'table.gv-datatables' ) ].forEach( ( el ) => {
			const headerCount = el.querySelectorAll( 'th' ).length || 1;
			const tbody = document.createElement( 'tbody' );
			tbody.innerHTML = `
				<tr>
					<td colspan="${ headerCount }" style="${ NOTICE_STYLE }">
						${ dataTablesNotice }
					</td>
				</tr>
			`;
			const existing = el.querySelector( 'tbody' );
			if ( existing ) {
				existing.replaceWith( tbody );
			} else {
				el.appendChild( tbody );
			}
		} );
	}

	if ( /gv-map-container/.test( html ) ) {
		[ ...temp.querySelectorAll( '.gv-map-canvas' ) ].forEach( ( el ) => {
			el.innerHTML = `${ MAPS_SVG }<p style="${ NOTICE_STYLE }">${ mapsNotice }</p>`;
		} );
	}

	return temp.innerHTML;
}
