src/main.js

import { renderLandingView, setupLandingEvents } from './views/LandingView.js';
import { renderInstructorView, setupInstructorEvents } from './views/InstructorView.js';
import { renderStudentView, setupStudentEvents } from './views/StudentView.js';
import { renderAdminView, setupAdminEvents } from './views/AdminView.js';

const app = document.querySelector('#app');

function navigateTo(view) {
    // Update hash maybe? For now simple switch
    switch (view) {
        case 'landing':
            app.innerHTML = renderLandingView();
            setupLandingEvents(navigateTo);
            break;
        case 'instructor':
            app.innerHTML = '載入中...';
            // Async render because Instructor view fetches challenges for column headers
            renderInstructorView().then(html => {
                app.innerHTML = html;
                setupInstructorEvents();
            });
            break;
        case 'student':
            app.innerHTML = '載入中...';
            // Async render because Student view fetches challenges
            renderStudentView().then(html => {
                app.innerHTML = html;
                setupStudentEvents();
            }).catch(err => {
                console.error("Student View Load Error:", err);
                app.innerHTML = `<div class="p-10 text-center text-red-500">

                    <h2 class="text-xl font-bold mb-2">載入失敗</h2>

                    <p class="mb-4">${err.message}</p>

                    <button onclick="window.location.reload()" class="bg-gray-700 text-white px-4 py-2 rounded">重新整理</button>

                </div>`;
            });
            break;
        case 'admin':
            app.innerHTML = renderAdminView();
            setupAdminEvents();
            break;
        default:
            app.innerHTML = renderLandingView();
            setupLandingEvents(navigateTo);
    }
}

// Route Handler
function handleRoute() {
    const hash = window.location.hash.slice(1);
    if (hash === 'admin') {
        navigateTo('admin');
        return;
    }
    if (hash === 'instructor') {
        navigateTo('instructor');
        return;
    }



    const roomCode = localStorage.getItem('vibecoding_room_code');
    const userId = localStorage.getItem('vibecoding_user_id'); // Changed key to match new logic

    if (roomCode && userId && !hash) {
        navigateTo('student');
    } else {
        navigateTo('landing');
    }
}

// Listen to hash changes
window.addEventListener('hashchange', handleRoute);

// Initial Load
handleRoute();