// Register SureRank's apiFetch middleware before any apiFetch call so
// metabox saves automatically fall back to admin-ajax.php when a
// security plugin or WAF blocks /wp-json/. See #2362.
import '@Functions/api-fetch-middleware';

import { createRoot } from 'react-dom';
import Modal from '@SeoPopup/modal';
import RegisterMenu from './register-menu';
import { registerPlugin } from '@wordpress/plugins';
import { select, useDispatch } from '@wordpress/data';
import { STORE_NAME } from '@Store/constants';
import { SureRankMonoLogo } from '@GlobalComponents/icons';
import { useEffect } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import PageCheckStatusIndicator from '@AdminComponents/page-check-status-indicator';
import usePageCheckStatus from './hooks/usePageCheckStatus';

import '@Store/store';
import './style.scss';

if ( select( 'core/editor' ) ) {
	// If Gutenberg editor, then only.
	registerPlugin( 'surerank-page-level-settings', { render: RegisterMenu } );
}

const RenderTriggerPopupButton = () => {
	const { updateModalState } = useDispatch( STORE_NAME );

	// Get page checks status for indicator
	const { status, initializing, counts } = usePageCheckStatus();
	const isSidebarVariant =
		document
			.querySelector( '#surerank-classic-seo-popup-trigger' )
			?.getAttribute( 'data-surerank-variant' ) === 'sidebar';

	// Mirror the Gutenberg label condition from SpectraPageSettingsPopup.
	const getButtonText = () => {
		if ( status === 'success' || counts.errorAndWarnings === 0 ) {
			return __( 'Manage Your SEO', 'surerank' );
		}
		return __( 'Optimize Here', 'surerank' );
	};

	useEffect( () => {
		const adminBar = document.querySelector( '#wpadminbar' );
		if ( adminBar ) {
			adminBar.style.zIndex = '10';
		}
	}, [] );

	if ( isSidebarVariant ) {
		return (
			<div className="surerank-classic-sidebar-trigger-wrap">
				<button
					className="button button-primary"
					type="button"
					onClick={ () => updateModalState( true ) }
				>
					{ getButtonText() }
				</button>
			</div>
		);
	}

	return (
		<div className="relative inline-flex">
			<button
				className="inline-flex w-auto h-auto p-1 rounded-full border-0 bg-transparent focus:outline-none outline-none cursor-pointer"
				type="button"
				onClick={ () => updateModalState( true ) }
			>
				<SureRankMonoLogo className="size-6" />
			</button>
			<PageCheckStatusIndicator
				className="z-auto"
				status={ status }
				errorAndWarnings={ counts.errorAndWarnings }
				initializing={ initializing }
			/>
		</div>
	);
};

const getClassicTriggerMountTarget = () => {
	const sidebarTrigger = document.querySelector(
		'#surerank-classic-seo-popup-trigger'
	);
	if ( sidebarTrigger ) {
		return sidebarTrigger;
	}

	// Term edit page: #seo-popup is PHP-rendered inside <form>, so move it
	// into .wrap > h1 to appear beside the page heading (matches old insertRoot behaviour).
	const seoPopup = document.querySelector( '#seo-popup' );
	const pageHeading = document.querySelector( '.wrap > h1' );
	if ( seoPopup && pageHeading ) {
		pageHeading.appendChild( seoPopup );
	}
	return seoPopup;
};

const mountClassicTrigger = () => {
	if ( surerank_seo_popup.editor_type !== 'classic' ) {
		return;
	}
	const targetElement = getClassicTriggerMountTarget();
	if ( ! targetElement ) {
		return;
	}
	const root = createRoot( targetElement );
	root.render( <RenderTriggerPopupButton /> );
};

// Metabox markup is server-rendered in the body, but this script may load in
// the head. Defer mount until the DOM has parsed the metabox container.
if ( document.readyState === 'loading' ) {
	document.addEventListener( 'DOMContentLoaded', mountClassicTrigger );
} else {
	mountClassicTrigger();
}

document.addEventListener( 'DOMContentLoaded', function () {
	let node = document.querySelector( '#surerank-root' );

	if ( ! node ) {
		node = document.body.appendChild( document.createElement( 'div' ) );
		node.id = 'surerank-root';
		node.className = 'surerank-root';
	}

	setTimeout( function () {
		const root = createRoot( node );
		root.render( <Modal /> );
	}, 1000 );
} );
