import React from "react";
import { createRoot } from "react-dom/client";
import { LeaderboardChristmasPage } from "./pages/LeaderboardChristmasPage";
import { Provider } from "react-redux";
import { ToastProvider } from "./admin/ui";
import { store } from "./admin/store";
import { AdminClansPage } from "./admin/pages/AdminClansPage";
import { AdminCrewsPage } from "./admin/pages/AdminCrewsPage";
import { AdminClanWarPage } from "./admin/pages/AdminClanWarPage";
import { AdminShadowWarsPage } from "./admin/pages/AdminShadowWarsPage";
import { AdminSettingsPage } from "./admin/pages/AdminSettingsPage";
import { AdminLoginUsersPage } from "./admin/pages/AdminLoginUsersPage";
import { AdminNinjaSageLoginPage } from "./admin/pages/AdminNinjaSageLoginPage";
import { AdminAmfPlayNinjaSagePage } from "./admin/pages/AdminAmfPlayNinjaSagePage";
import { AdminKoneversiPasswordPage } from "./admin/pages/AdminKoneversiPasswordPage";
import { AdminLoginUserKuPage } from "./admin/pages/AdminLoginUserKuPage";

function renderReact() {
    const container = document.getElementById('react-root');
    if (!container) return false;

    if (!container.__reactRoot) {
        container.__reactRoot = createRoot(container);
    }

    const page = container.dataset.page?.trim();

    const node =
        page === "leaderboard-christmas" ? (
            <LeaderboardChristmasPage />
        ) : page === "admin-clans" ? (
            <AdminClansPage />
        ) : page === "admin-crews" ? (
            <AdminCrewsPage />
        ) : page === "admin-clan-war" ? (
            <AdminClanWarPage />
        ) : page === "admin-shadow-wars" ? (
            <AdminShadowWarsPage />
        ) : page === "admin-settings" ? (
            <AdminSettingsPage />
        ) : page === "admin-login-users" ? (
            <AdminLoginUsersPage />
        ) : page === "admin-ninja-sage-login" ? (
            <AdminNinjaSageLoginPage />
        ) : page === "admin-amf-play-ninjasage" ? (
            <AdminAmfPlayNinjaSagePage />
        ) : page === "admin-koneversi-password" ? (
            <AdminKoneversiPasswordPage />
        ) : page === "admin-login-userku" ? (
            <AdminLoginUserKuPage />
        ) : (
            <div className="w-full max-w-4xl px-4">
                <div className="mb-6 rounded-xl border border-black/10 bg-white/80 p-4 text-sm text-[#1b1b18] shadow-sm backdrop-blur dark:border-white/10 dark:bg-[#161615]/70 dark:text-[#EDEDEC]">
                    <div className="font-semibold">React aktif</div>
                    <div className="mt-1 text-[#706f6c] dark:text-[#A1A09A]">
                        Komponen ini dirender dari React via Vite. (Page: {page})
                    </div>
                </div>
            </div>
        );

    container.__reactRoot.render(
        <React.StrictMode>
            <Provider store={store}>
                <ToastProvider>{node}</ToastProvider>
            </Provider>
        </React.StrictMode>,
    );

    return true;
}

if (!renderReact()) {
    window.addEventListener('DOMContentLoaded', () => {
        renderReact();
    });
}