import './style.css';
import 'bootstrap/dist/js/bootstrap.bundle.min.js'; // Bootstrap JS
import { renderLoginPage } from './pages/LoginPage';
import { renderRegisterPage } from './pages/RegisterPage';
import { renderDashboardPage } from './pages/DashboardPage';
import { renderProfilePage } from './pages/ProfilePage';
import { renderClassroomsPage } from './pages/ClassroomsPage';
import { renderAdminPage } from './pages/AdminPage';
import { renderManageStudentPage } from './pages/ManageStudentPage';
import { setupGlobalAPI } from './api/api';
import { updateLoggedInState } from './utils/utils';

const app = document.querySelector<HTMLDivElement>('#app');
if (!app) {
    throw new Error("App root element not found.");
}

// Initialize Global API
setupGlobalAPI();

// --- Routing and Page Rendering ---
const routes: { [key: string]: () => void } = {
    '/': renderLoginPage,
    '/login': renderLoginPage,
    '/register': renderRegisterPage,
    '/dashboard': renderDashboardPage,
    '/profile': renderProfilePage,
    '/classrooms': renderClassroomsPage,
    '/admin': renderAdminPage,
    '/manage-students': renderManageStudentPage,
};

const renderRoute = () => {
    const path = window.location.hash.slice(1) || '/';
    const routeRenderer = routes[path];
    if (routeRenderer) {
        app.innerHTML = ''; // Clear current content
        routeRenderer();
    } else {
        app.innerHTML = '<div><h1>404 Not Found</h1></div>';
    }
};

window.addEventListener('hashchange', renderRoute);
renderRoute(); // Initial render

// --- Mock Login for Prototype ---
// For demonstration, automatically log in on dashboard page load
if (window.location.hash === '#/dashboard' || window.location.hash === '#/profile' || window.location.hash === '#/admin' || window.location.hash === '#/manage-students') {
    updateLoggedInState(true); // Simulate logged in state
} else {
    updateLoggedInState(false);
}