const root = ReactDOM.createRoot(document.getElementById('root'));

const Debugger = () => {
    // 🔥 নোট: এখানে 'status' স্টেটটি ডিলিট করা হয়েছে কারণ আমরা আর লোডিং টেক্সট দেখাব না
    const [missing, setMissing] = React.useState([]);

    React.useEffect(() => {
        // 🔥 নোট: টাইমআউট ১০০০ (1 sec) থেকে কমিয়ে ১০০ (0.1 sec) করা হয়েছে যাতে অ্যাপ দ্রুত চালু হয়
        setTimeout(() => {
            // ফাইল চেক লিস্ট
            const required = [
                { name: 'Header', obj: window.Header },
                { name: 'Footer', obj: window.Footer },
                { name: 'Sidebar', obj: window.Sidebar },
                { name: 'Inbox', obj: window.Inbox },
                { name: 'ComposeModal', obj: window.ComposeModal },
                { name: 'AdSlot', obj: window.AdSlot },
                { name: 'SeoEngine', obj: window.SeoEngine },
                { name: 'Analytics', obj: window.Analytics },
                { name: 'InfoSection', obj: window.InfoSection },
                { name: 'BlogPage', obj: window.BlogPage },
                { name: 'App', obj: window.App }
            ];

            const failed = required.filter(item => !item.obj).map(item => item.name);

            if (failed.length > 0) {
                setMissing(failed);
                console.error("CRITICAL ERROR: Files failed to load ->", failed);
            } else {
                // সব ঠিক থাকলে অ্যাপ রান হবে
                const App = window.App;

                // 🔥 Analytics এবং App রেন্ডার করা হচ্ছে
                root.render(
                    <React.Fragment>
                        <window.Analytics />
                        <App />
                    </React.Fragment>
                );
            }
        }, 100); 
    }, []);

    // যদি কোনো ফাইল মিসিং থাকে, শুধু তখনই এরর স্ক্রিন দেখাবে
    if (missing.length > 0) {
        return (
            <div className="p-10 bg-slate-900 text-white min-h-screen relative z-50">
                <h1 className="text-3xl text-red-500 font-bold mb-4">⚠️ SYSTEM FAILURE</h1>
                <p className="mb-4 text-gray-400">Missing Components:</p>
                <ul className="list-disc ml-8 text-yellow-400 font-mono text-lg">
                    {missing.map(m => <li key={m}>{m}.jsx</li>)}
                </ul>
            </div>
        );
    }

    // 🔥 খুবই গুরুত্বপূর্ণ পরিবর্তন:
    // এখানে আমরা 'Checking system...' এর বদলে 'null' রিটার্ন করছি।
    // এর ফলে React কিছু দেখাবে না, আর পেছনের HTML Skeleton ডিজাইনটি দৃশ্যমান থাকবে।
    return null;
};

root.render(<Debugger />);