/**
 * PRO Upgrade Tooltip — shows a contextual popup when free users
 * click on PRO-locked elements (badges, disabled sections, etc.)
 *
 * @package PrivexPasswordProtect
 */
(function () {
	'use strict';

	// Only run if Freemius data is available and user is NOT PRO.
	if ( typeof ppmstrAdmin === 'undefined' || ppmstrAdmin.isPro ) {
		return;
	}

	var upgradeUrl = ppmstrAdmin.upgradeUrl || '#';
	var i18n       = ppmstrAdmin.i18n || {};
	var tooltip    = null;
	var hideTimer  = null;

	/* ----------------------------------------------------------------
	 * Create the singleton tooltip element
	 * ---------------------------------------------------------------- */
	function createTooltip() {
		if ( tooltip ) return;

		tooltip = document.createElement( 'div' );
		tooltip.id = 'ppmstr-pro-tooltip';
		tooltip.setAttribute( 'role', 'tooltip' );
		tooltip.innerHTML =
			'<div class="ppmstr-pro-tooltip-inner">' +
				'<div class="ppmstr-pro-tooltip-header">' +
					'<span class="ppmstr-pro-tooltip-badge">⚡ PRO</span>' +
					'<button class="ppmstr-pro-tooltip-close" aria-label="Close">&times;</button>' +
				'</div>' +
				'<p class="ppmstr-pro-tooltip-msg">' + ( i18n.proMessage || 'Upgrade to unlock this feature.' ) + '</p>' +
				'<a href="' + upgradeUrl + '" class="ppmstr-pro-tooltip-btn" target="_blank" rel="noopener noreferrer">' +
					( i18n.upgradeCta || '⚡ Upgrade to PRO' ) +
				'</a>' +
			'</div>';

		document.body.appendChild( tooltip );

		// Close button.
		tooltip.querySelector( '.ppmstr-pro-tooltip-close' ).addEventListener( 'click', function ( e ) {
			e.stopPropagation();
			hideTooltip();
		} );
	}

	/* ----------------------------------------------------------------
	 * Show tooltip (fixed bottom right) and auto-hide
	 * ---------------------------------------------------------------- */
	function showTooltip() {
		createTooltip();

		if ( hideTimer ) {
			clearTimeout( hideTimer );
		}

		tooltip.style.display = 'block';
		
		// Small delay to allow display:block to apply before animating opacity
		requestAnimationFrame( function () {
			tooltip.style.opacity   = '1';
			tooltip.style.transform = 'translateY(0)';
		} );

		// Auto-hide after 5 seconds
		hideTimer = setTimeout( function () {
			hideTooltip();
		}, 5000 );
	}

	function hideTooltip() {
		if ( ! tooltip ) return;
		if ( hideTimer ) {
			clearTimeout( hideTimer );
		}
		tooltip.style.opacity   = '0';
		tooltip.style.transform = 'translateY(10px)';
		setTimeout( function () {
			if ( tooltip ) tooltip.style.display = 'none';
		}, 200 );
	}

	/* ----------------------------------------------------------------
	 * Determine if an element is PRO-locked
	 * ---------------------------------------------------------------- */
	function isProLocked( el ) {
		// Direct PRO badge click.
		if ( el.classList.contains( 'ppmstr-pro-badge' ) ) return true;
		// Inside a pro-locked section.
		if ( el.closest( '.pro-locked' ) ) return true;
		if ( el.closest( '[style*="pointer-events:none"]' ) ) return false; // Already blocked by CSS — no tooltip needed from parent.
		// Disabled input/textarea/select inside a PRO section.
		if ( ( el.tagName === 'INPUT' || el.tagName === 'TEXTAREA' || el.tagName === 'SELECT' ) && el.disabled ) {
			if ( el.closest( '.ppmstr-card' ) ) {
				var header = el.closest( '.ppmstr-card' ).querySelector( '.ppmstr-pro-badge' );
				if ( header ) return true;
			}
		}
		// Block item in palette (greyed out in free mode).
		if ( el.closest( '.ppmstr-block-item' ) && el.closest( '.ppmstr-block-item' ).style.cursor === 'not-allowed' ) return true;
		return false;
	}

	/* ----------------------------------------------------------------
	 * Global click handler
	 * ---------------------------------------------------------------- */
	document.addEventListener( 'click', function ( e ) {
		// Close if clicking outside tooltip.
		if ( tooltip && tooltip.style.display === 'block' ) {
			if ( ! tooltip.contains( e.target ) ) {
				hideTooltip();
				return;
			}
			return; // Click inside tooltip — let it propagate normally.
		}

		// Check PRO badge clicks anywhere on the page.
		var badge = e.target.closest( '.ppmstr-pro-badge' );
		if ( badge ) {
			e.preventDefault();
			e.stopPropagation();
			showTooltip();
			return;
		}

		// Check clicks on locked sections wrapper.
		var lockedWrap = e.target.closest( '.ppmstr-pro-locked-wrap' );
		if ( lockedWrap ) {
			e.preventDefault();
			e.stopPropagation();
			showTooltip();
			return;
		}
	}, true );

	/* ----------------------------------------------------------------
	 * Close on Escape key
	 * ---------------------------------------------------------------- */
	document.addEventListener( 'keydown', function ( e ) {
		if ( e.key === 'Escape' ) hideTooltip();
	} );

	/* ----------------------------------------------------------------
	 * Inject CSS (scoped, no external dependency)
	 * ---------------------------------------------------------------- */
	var style = document.createElement( 'style' );
	style.textContent = [
		'#ppmstr-pro-tooltip {',
		'  position: fixed;',
		'  bottom: 30px;',
		'  right: 30px;',
		'  z-index: 999999;',
		'  display: none;',
		'  width: 280px;',
		'  opacity: 0;',
		'  transform: translateY(10px);',
		'  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);',
		'  pointer-events: auto;',
		'}',
		'.ppmstr-pro-tooltip-inner {',
		'  background: #1A1030;',
		'  border: 1px solid rgba(168,85,247,0.35);',
		'  border-radius: 10px;',
		'  padding: 14px 16px;',
		'  box-shadow: 0 8px 32px rgba(0,0,0,0.45), 0 0 0 1px rgba(108,92,231,0.12);',
		'}',
		'.ppmstr-pro-tooltip-header {',
		'  display: flex;',
		'  align-items: center;',
		'  justify-content: space-between;',
		'  margin-bottom: 8px;',
		'}',
		'.ppmstr-pro-tooltip-badge {',
		'  display: inline-flex;',
		'  align-items: center;',
		'  background: linear-gradient(90deg, #6C5CE7, #A855F7);',
		'  color: #fff;',
		'  font-size: 10px;',
		'  font-weight: 700;',
		'  padding: 2px 8px;',
		'  border-radius: 4px;',
		'  letter-spacing: 0.5px;',
		'}',
		'.ppmstr-pro-tooltip-close {',
		'  background: none;',
		'  border: none;',
		'  color: rgba(255,255,255,0.45);',
		'  font-size: 16px;',
		'  cursor: pointer;',
		'  line-height: 1;',
		'  padding: 0;',
		'  transition: color 0.15s;',
		'}',
		'.ppmstr-pro-tooltip-close:hover { color: #fff; }',
		'.ppmstr-pro-tooltip-msg {',
		'  color: rgba(255,255,255,0.7);',
		'  font-size: 12px;',
		'  line-height: 1.5;',
		'  margin: 0 0 12px;',
		'}',
		'.ppmstr-pro-tooltip-btn {',
		'  display: block;',
		'  text-align: center;',
		'  background: linear-gradient(135deg, #6C5CE7, #A855F7);',
		'  color: #fff !important;',
		'  font-size: 12px;',
		'  font-weight: 700;',
		'  padding: 8px 12px;',
		'  border-radius: 6px;',
		'  text-decoration: none !important;',
		'  transition: opacity 0.15s;',
		'  box-shadow: 0 3px 12px rgba(108,92,231,0.4);',
		'}',
		'.ppmstr-pro-tooltip-btn:hover { opacity: 0.88; }',
		/* PRO Locked Section Overlay */
		'.ppmstr-pro-locked-wrap {',
		'  position: relative;',
		'  opacity: 0.55;',
		'  filter: blur(0.5px);',
		'  pointer-events: auto !important;',
		'  cursor: pointer !important;',
		'  user-select: none;',
		'}',
		'.ppmstr-pro-locked-wrap::after {',
		'  content: "";',
		'  position: absolute;',
		'  inset: 0;',
		'  z-index: 5;',
		'}',
		'.ppmstr-pro-locked-wrap * {',
		'  pointer-events: none !important;',
		'}',
	].join( '\n' );
	document.head.appendChild( style );

})();
