'use strict';

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

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

    MembersPage.prototype.render = function () {
        return `
      <div class="page members-page">
        <h2 class="page-subtitle">Members</h2>
        <div class="members-grid" id="membersGrid"></div>
      </div>
    `;
    };

    MembersPage.prototype.afterMount = function () {
        const members = this.fetchMembers();
        const membersGrid = document.getElementById('membersGrid');

        if (!membersGrid) return;

        for (let i = 0; i < members.length; i++) {
            const cardWrapper = document.createElement('div');
            membersGrid.appendChild(cardWrapper);

            const card = new MemberCard(cardWrapper, members[i]);
            card.mount();
            this.components.push(card);
        }
    };

    MembersPage.prototype.fetchMembers = function () {
        // Mock data - replace with actual data from A3API or window.orgData
        return [
            { name: 'J. Schmidt', rank: 'Owner', online: true },
            { name: 'M. Anderson', rank: 'Executive', online: true },
            { name: 'K. Rodriguez', rank: 'Director', online: false },
            { name: 'T. Williams', rank: 'Manager', online: true },
            { name: 'R. Chen', rank: 'Associate', online: false },
            { name: 'S. Patel', rank: 'Member', online: true }
        ];
    };

    return MembersPage;
})();
