/**
 * Admin Dashboard Entry Point
 * 
 * Main entry point for React admin interface
 * 
 * @package ThinkRank
 * @since 1.0.0
 */

import { createRoot } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import './stores';
import './styles/admin.scss';
import './styles/sitemap.xsl';
import './styles/sitemap-index.xsl';
import App from './components/App';

/**
 * Initialize admin interface
 */
document.addEventListener('DOMContentLoaded', () => {
    // Find admin containers
    const containers = {
        dashboard: document.getElementById('thinkrank-dashboard'),
        'essential-seo': document.getElementById('thinkrank-essential-seo'),
        'ai-tools': document.getElementById('thinkrank-ai-tools'),
        settings: document.getElementById('thinkrank-settings'),
        credits: document.getElementById('thinkrank-credits'),
        analytics: document.getElementById('thinkrank-analytics'),
    };

    // Render appropriate component based on container
    Object.entries(containers).forEach(([page, container]) => {
        if (container) {
            renderAdminPage(page, container);
        }
    });
});

/**
 * Render admin page component
 *
 * @param {string} page Page identifier
 * @param {Element} container DOM container
 */
function renderAdminPage(page, container) {
    try {
        // Create root and render component using React 18 API
        const root = createRoot(container);
        root.render(<App page={page} />);
    } catch (error) {
        console.error('ThinkRank: Failed to render admin page', error);

        // Fallback error display
        container.innerHTML = `
            <div class="notice notice-error">
                <p>${__('Failed to load ThinkRank interface. Please refresh the page.', 'thinkrank')}</p>
            </div>
        `;
    }
}