import { createRoot } from 'react-dom/client';
import { flushSync } from 'react-dom';
import { App } from './App';
import configScriptUrl from '../js/01-config.js?url';
import navigationScriptUrl from '../js/02-navigation.js?url';
import dashboardScriptUrl from '../js/03-dashboard.js?url';
import appInitScriptUrl from '../js/04-app-init.js?url';
import formBuilderScriptUrl from '../js/05-form-builder.js?url';
import saveDraftScriptUrl from '../js/06-save-draft.js?url';
import reportExportScriptUrl from '../js/07-report-export.js?url';
import historyScriptUrl from '../js/08-history.js?url';
import statisticsScriptUrl from '../js/09-statistics.js?url';
import geminiScriptUrl from '../js/10-gemini.js?url';
import backupImportScriptUrl from '../js/11-backup-import.js?url';

declare global {
    interface Window {
        __legacyScriptsLoaded?: boolean;
    }
}

const legacyScripts = [
    configScriptUrl,
    navigationScriptUrl,
    dashboardScriptUrl,
    formBuilderScriptUrl,
    saveDraftScriptUrl,
    reportExportScriptUrl,
    historyScriptUrl,
    statisticsScriptUrl,
    geminiScriptUrl,
    backupImportScriptUrl,
    appInitScriptUrl,
];

function loadScript(src: string) {
    return new Promise<void>((resolve, reject) => {
        const script = document.createElement('script');
        script.src = src;
        script.onload = () => resolve();
        script.onerror = () => reject(new Error('Gagal memuat ' + src));
        document.body.appendChild(script);
    });
}

async function loadLegacyScripts() {
    if (window.__legacyScriptsLoaded) return;
    window.__legacyScriptsLoaded = true;

    for (const src of legacyScripts) {
        await loadScript(src);
    }
}

const rootElement = document.getElementById('root');

if (!rootElement) {
    throw new Error('Root element tidak ditemukan.');
}

flushSync(() => {
    createRoot(rootElement).render(<App />);
});

void loadLegacyScripts();