'use strict';

const HomePage = (function () {
    function HomePage() {
        BasePage.call(this);
    }

    HomePage.prototype = Object.create(BasePage.prototype);
    HomePage.prototype.constructor = HomePage;

    HomePage.prototype.render = function () {
        return `
      <div class="page home-page">
        <h2 class="page-subtitle">Home</h2>
        <div class="widget-grid" id="widgetGrid"></div>
      </div>
    `;
    };

    HomePage.prototype.afterMount = function () {
        const widgetGrid = document.getElementById('widgetGrid');
        if (!widgetGrid) return;

        const widgets = [
            {
                title: 'Online Members',
                content: '<p class="widget-stat">12 / 48</p>'
            },
            {
                title: 'Next Operation',
                content: '<p class="widget-text">Saturday 20:00<br/>Operation Blackout</p>'
            },
            {
                title: 'Recent Activity',
                content: '<p class="widget-text">3 new recruits<br/>2 promotions</p>'
            },
            {
                title: 'Clan Stats',
                content: '<p class="widget-text">Missions: 156<br/>Hours: 2,340</p>'
            }
        ];

        for (let i = 0; i < widgets.length; i++) {
            const widgetWrapper = document.createElement('div');
            widgetGrid.appendChild(widgetWrapper);

            const widget = new DashboardWidget(widgetWrapper, widgets[i]);
            widget.mount();
            this.components.push(widget);
        }
    };

    return HomePage;
})();
