// pages/DashboardPage.ts
import { ThreeColumnLayout } from '../layouts/ThreeColumnLayout';
import { Widget } from '../components/Widget';
import { createElement } from '../utils/utils';

// Dummy Widgets for Dashboard
class WelcomeWidget extends Widget {
    render(): HTMLElement {
        const widgetDiv = createElement('div');
        widgetDiv.classList.add('widget', 'welcome-widget');
        widgetDiv.innerHTML = `
            <div class="widget-header">Welcome to the Dashboard</div>
            <div class="widget-body">
                This is your dashboard. More widgets will be added here.
            </div>
        `;
        return widgetDiv;
    }
}

class QuickLinksWidget extends Widget {
    render(): HTMLElement {
        const widgetDiv = createElement('div');
        widgetDiv.classList.add('widget', 'quick-links-widget');
        widgetDiv.innerHTML = `
            <div class="widget-header">Quick Links</div>
            <div class="widget-body">
                <ul class="list-unstyled">
                    <li><a href="#/profile">View Profile</a></li>
                    <li><a href="#/classrooms">Go to Classrooms</a></li>
                    <li><a href="#/admin">Admin Panel</a></li>
                </ul>
            </div>
        `;
        return widgetDiv;
    }
}

class PlaceholderWidget extends Widget {
    render(): HTMLElement {
        const div = createElement('div');
        div.classList.add('widget', 'placeholder-widget');
        div.textContent = 'Placeholder Widget';
        return div;
    }
}

export const renderDashboardPage = () => {
    const layout = new ThreeColumnLayout();
    const welcomeWidget = new WelcomeWidget();
    const quickLinksWidget = new QuickLinksWidget();
    const placeholderWidget = new PlaceholderWidget();

    layout.setColumn1Content(welcomeWidget.render());
    layout.setColumn2Content(quickLinksWidget.render());
    layout.setColumn3Content(placeholderWidget.render());

    document.querySelector<HTMLDivElement>('#app')?.appendChild(layout.render());
};