/**
 * Admin App Entry Point
 *
 * @package Everyone_Accessibility_Suite
 */

import App from './App';
import './styles/main.scss';

// Initialize app
function initApp() {
	const rootElement = document.getElementById('evas-admin-root');
	if (!rootElement) {
		console.error('❌ EVAS: Container #evas-admin-root not found');
		return;
	}

	// Get React and createElement from WordPress globals
	const { createElement, render } = window.wp?.element || {};
	const React = window.React;
	const ReactDOM = window.ReactDOM;

	if (!React || !createElement) {
		console.error('React or WordPress element not available. Please ensure React and WordPress are loaded.');
		return;
	}

	try {
		// Try to use createRoot from react-dom/client (React 18)
		// If not available, fallback to render from @wordpress/element (React 17)
		if (ReactDOM?.createRoot) {
			// React 18 with createRoot
			const root = ReactDOM.createRoot(rootElement);
			root.render(createElement(App));
		} else if (render) {
			// React 17 with render (WordPress default)
			render(createElement(App), rootElement);
		} else {
			console.error('React DOM render method not available.');
		}
	} catch (error) {
		console.error('❌ EVAS: React render error:', error);
		rootElement.innerHTML = '<div style="padding: 20px;"><h1>Error loading admin app</h1><p>' + error.message + '</p></div>';
	}
}

// Wait for DOM to be ready
if (document.readyState === 'loading') {
	document.addEventListener('DOMContentLoaded', initApp);
} else {
	// DOM is already loaded
	initApp();
}