import React from 'react';
import { createRoot } from 'react-dom/client';
import App from './App';
import Boundary from './components/Boundary';
import './styles.css';

/*
 * Boot.
 *
 * Two things can go wrong before a single component renders, and both used to
 * end in an empty panel: the inline configuration can be missing — a caching
 * or optimisation plugin that strips inline script from the page takes
 * window.airanksuiteData with it — and any render can throw. Neither should look
 * like "the plugin is broken"; both should say what happened.
 */
const mount = document.getElementById('airanksuite-root');

if (mount) {
	if (!window.airanksuiteData || !window.airanksuiteData.restUrl) {
		// Rendered as plain DOM on purpose: if the configuration is missing,
		// the React app has no REST base to talk to and would fail anyway.
		// Deliberately NOT translated: this renders exactly when scripts were
		// stripped from the page, so wp-i18n may be missing too. English is the
		// one language this diagnostic can rely on. (i18n codemods: skip here.)
		mount.innerHTML =
			'<div class="ars-boundary"><div class="ars-boundary-mark">!</div><div>' +
			'<h2 class="m-0 text-[17px] font-semibold">The plugin could not read its own settings</h2>' +
			'<p class="m-0 mt-2 text-[13px]">The small script that carries this screen’s configuration did not reach the page. ' +
			'That is almost always a caching or "optimise JavaScript" feature removing inline script — in LiteSpeed, WP Rocket or Autoptimize, ' +
			'exclude this plugin from JavaScript combining and clear the cache.</p>' +
			'</div></div>';
	} else {
		createRoot(mount).render(
			<Boundary>
				<App />
			</Boundary>
		);
	}
}