import React from "react";
import { createRoot } from "react-dom/client";

// --- PREVIEW PANEL STABILIZATION HARNESS ---
// Signal that the application script has loaded using standard JS syntax.
window['__APP_MOUNTED__'] = true;

import { App } from "./src/App.js";

// Preloading application modules to ensure the sandbox registry is populated.
import './src/constants.js';
import './src/pages/ResultsPage.js';
import './src/pages/SmartHomePage.js';
import './src/pages/FavoritesPage.js';
import './src/pages/SettingsPage.js';
import './src/pages/InfoPage.js';
import './src/pages/DictionaryPage.js';
import './src/pages/AiSummaryPage.js';
import './src/pages/LocationPage.js';

// --- APPLICATION BOOTSTRAP ---
const container = document.getElementById("root");

if (!container) {
    console.error("CRITICAL: Root element not found in DOM!");
} else if (window['__APP_BOOTSTRAPPED__']) {
    console.log("App already running. Skipping redundant mount via index.tsx");
} else {
    // Claim the session to prevent other entry points from double-mounting
    window['__APP_BOOTSTRAPPED__'] = true;
    
    try {
        const root = createRoot(container);
        root.render(React.createElement(App));
        console.log(`[${new Date().toLocaleTimeString()}] [App] Application successfully mounted via index.tsx`);
    } catch (e) {
        console.error("Application Crash during mount:", e);
        container.innerHTML = `
            <div style="color: var(--text-main); padding: 20px; font-family: monospace; text-align: center; margin-top: 50px;">
                <h2 style="font-size: 24px; margin-bottom: 10px;">⚠️ Application Failed to Start</h2>
                <p style="color: var(--utility-error);">${e.message}</p>
                <p style="font-size: 12px; color: var(--text-muted); margin-top: 20px;">Check the console for more details.</p>
            </div>
        `;
    }
}