/**
 * "Unlock multiple reviewers" upsell. Two surfaces: 1. Gutenberg — hooks
 * `flow_ew_reviewer_field_extras`. Pro's multi-reviewer hooks the same filter
 * at higher priority and returns its chip combobox first; our filter only
 * fires when no prior filter returned content. 2. Classic / Elementor / Bricks
 * — injects after the reviewer combobox when a reviewer is selected.
 */
( function () {
	'use strict';

	var data = window.flowEwUpsellReviewer;
	if ( ! data || ! data.label ) {
		return;
	}

	var LINK_STYLE = [
		'display:inline-block',
		'margin-top:14px',
		'color:#018170',
		'font-weight:600',
		'text-decoration:underline',
		'cursor:pointer',
	].join( ';' );

	var BADGE_STYLE = [
		'display:inline-block',
		'padding:1px 6px',
		'margin-right:4px',
		'font-size:9px',
		'font-weight:600',
		'letter-spacing:0.04em',
		'line-height:1.4',
		'border-radius:8px',
		'background:#d0f9ec',
		'color:#09121e',
		'vertical-align:1px',
	].join( ';' );

	var HELP_STYLE = [
		'margin-top:4px',
		'color:#757575',
		'font-size:12px',
		'line-height:1.4',
	].join( ';' );

	// Gutenberg
	if ( window.wp && window.wp.hooks && window.wp.element ) {
		var createElement = window.wp.element.createElement;
		window.wp.hooks.addFilter(
			'flow_ew_reviewer_field_extras',
			'flow-ew/upsell-reviewer',
			function ( existing, ctx ) {
				if ( existing ) {
					return existing;
				}
				var review = ctx && ctx.review;
				var hasReviewer = !! ( review && ( ( review.reviewer && Number( review.reviewer.id ) > 0 ) || Number( review.reviewer_id ) > 0 ) );
				if ( ! hasReviewer ) {
					return null;
				}
				// PanelBody already provides 16px horizontal indent; we
				// only need vertical spacing here.
				return createElement(
					'div',
					{ className: 'flow-ew-upsell-reviewer', style: { padding: '14px 0 0' } },
					createElement(
						'a',
						{
							href: data.href,
							style: { display: 'inline-block', marginTop: '0', color: '#018170', fontWeight: 600, textDecoration: 'underline', cursor: 'pointer' },
						},
						createElement(
							'span',
							{ style: { display: 'inline-block', padding: '1px 6px', marginRight: '4px', fontSize: '9px', fontWeight: 600, letterSpacing: '0.04em', lineHeight: 1.4, borderRadius: '8px', background: '#d0f9ec', color: '#09121e', verticalAlign: '1px' } },
							'PRO'
						),
						data.label
					),
					data.helpText
						? createElement(
								'p',
								{ style: { marginTop: '4px', color: '#757575', fontSize: '12px', lineHeight: 1.4 } },
								data.helpText
						  )
						: null
				);
			}
		);
	}

	function buildUpsellNode() {
		var wrap = document.createElement( 'div' );
		wrap.className = 'flow-ew-upsell-reviewer';
		wrap.setAttribute( 'data-flow-ew-upsell-reviewer', '1' );

		var a = document.createElement( 'a' );
		a.href = data.href;
		a.style.cssText = LINK_STYLE;

		var badge = document.createElement( 'span' );
		badge.style.cssText = BADGE_STYLE;
		badge.textContent = 'PRO';
		a.appendChild( badge );
		a.appendChild( document.createTextNode( data.label ) );
		wrap.appendChild( a );

		if ( data.helpText ) {
			var help = document.createElement( 'p' );
			help.style.cssText = HELP_STYLE;
			help.textContent = data.helpText;
			wrap.appendChild( help );
		}
		return wrap;
	}

	function selectHasReviewer( select ) {
		if ( ! select ) return false;
		var v = Number( select.value || 0 );
		return v > 0;
	}

	function syncReviewerUpsell() {
		var select = document.getElementById( 'flow-ew-reviewer-select' );
		if ( ! select ) return;
		// Anchor on the combobox, not on `#flow-ew-classic-reviewer-slot`
		var anchor =
			document.getElementById( 'flow-ew-reviewer-combobox' )
			|| select.parentElement;
		if ( ! anchor || ! anchor.parentElement ) return;

		var existing = anchor.parentElement.querySelector(
			'[data-flow-ew-upsell-reviewer]'
		);

		if ( selectHasReviewer( select ) ) {
			if ( ! existing ) {
				anchor.parentElement.insertBefore(
					buildUpsellNode(),
					anchor.nextSibling
				);
			}
		} else if ( existing ) {
			existing.parentNode.removeChild( existing );
		}
	}

	function init() {
		syncReviewerUpsell();

		document.addEventListener( 'flow-ew:classic-render', syncReviewerUpsell );
		document.addEventListener( 'change', function ( e ) {
			if ( e.target && e.target.id === 'flow-ew-reviewer-select' ) {
				syncReviewerUpsell();
			}
		} );

		if ( typeof MutationObserver !== 'undefined' ) {
			var mo = new MutationObserver( function ( muts ) {
				for ( var i = 0; i < muts.length; i++ ) {
					if ( muts[ i ].addedNodes && muts[ i ].addedNodes.length ) {
						syncReviewerUpsell();
						return;
					}
				}
			} );
			mo.observe( document.body, { childList: true, subtree: true } );
		}
	}

	if ( document.readyState === 'loading' ) {
		document.addEventListener( 'DOMContentLoaded', init );
	} else {
		init();
	}
} )();
