/**
 * Floating JSON export panel — visible outside SO modals and widget-area popups.
 */
( function ( window ) {
	'use strict';

	var PANEL_ID = 'rsmspark-cw-export-json-panel';
	var config = window.rsmsparkCwExportJsonUi || {};
	var i18n = config.i18n || {};

	function t( key, fallback ) {
		return i18n[ key ] || fallback;
	}

	function isAppearanceWidgetsScreen() {
		return ( window.location.pathname || '' ).indexOf( 'widgets.php' ) !== -1;
	}

	function ensurePanel() {
		var panel = document.getElementById( PANEL_ID );
		if ( panel ) {
			return panel;
		}

		panel = document.createElement( 'div' );
		panel.id = PANEL_ID;
		panel.className = 'rsmspark-cw-export-json-panel';
		panel.hidden = true;
		panel.setAttribute( 'role', 'dialog' );
		panel.setAttribute( 'aria-live', 'polite' );
		panel.setAttribute(
			'aria-label',
			t( 'panelLabel', 'RSM JSON export' )
		);

		panel.innerHTML =
			'<div class="rsmspark-cw-export-json-panel__inner">' +
			'<div class="rsmspark-cw-export-json-panel__head">' +
			'<strong class="rsmspark-cw-export-json-panel__title"></strong>' +
			'<button type="button" class="rsmspark-cw-export-json-panel__close" aria-label="' +
			t( 'close', 'Close' ) +
			'">&times;</button>' +
			'</div>' +
			'<p class="rsmspark-cw-export-json-panel__help description"></p>' +
			'<p class="rsmspark-cw-export-json-panel__note description" hidden></p>' +
			'<pre class="rsmspark-cw-export-json-panel__pre" tabindex="0" role="textbox" aria-readonly="true"></pre>' +
			'</div>';

		panel
			.querySelector( '.rsmspark-cw-export-json-panel__close' )
			.addEventListener( 'click', function ( event ) {
				if ( event.preventDefault ) {
					event.preventDefault();
				}
				hidePanel();
			} );

		document.body.appendChild( panel );
		return panel;
	}

	function hidePanel() {
		var panel = document.getElementById( PANEL_ID );
		if ( ! panel ) {
			return;
		}
		panel.classList.remove( 'is-visible' );
		panel.hidden = true;
	}

	function showPanel( text, options ) {
		options = options || {};
		var exportText = String( text || '' );

		if ( ! exportText.trim() ) {
			return;
		}

		var panel = ensurePanel();
		var titleEl = panel.querySelector( '.rsmspark-cw-export-json-panel__title' );
		var helpEl = panel.querySelector( '.rsmspark-cw-export-json-panel__help' );
		var noteEl = panel.querySelector( '.rsmspark-cw-export-json-panel__note' );
		var preEl = panel.querySelector( '.rsmspark-cw-export-json-panel__pre' );
		var widgetArea = !! options.widgetArea || isAppearanceWidgetsScreen();

		titleEl.textContent =
			options.title || t( 'title', 'JSON export ready' );
		helpEl.textContent =
			options.help ||
			t(
				'help',
				'Copied to your clipboard. Select the JSON below to copy again or save as a file.'
			);
		preEl.textContent = exportText;

		if ( widgetArea ) {
			noteEl.textContent =
				options.widgetAreaNote ||
				t(
					'widgetAreaNote',
					'Appearance → Widgets: export always copies to your clipboard. Paste into Import JSON on a page, post, or block editor widget — inline preview inside the footer widget form may not show when Gutenberg blocks are enabled for widget areas.'
				);
			noteEl.hidden = false;
		} else {
			noteEl.textContent = '';
			noteEl.hidden = true;
		}

		panel.hidden = false;
		panel.classList.add( 'is-visible' );

		window.requestAnimationFrame( function () {
			if ( typeof preEl.focus === 'function' ) {
				preEl.focus( { preventScroll: true } );
			}
		} );
	}

	window.RsmCwExportJsonUi = {
		show: showPanel,
		hide: hidePanel,
	};
} )( window );
