'use strict';

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

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

    MissionsPage.prototype.render = function () {
        return `
      <div class="page missions-page">
        <h2 class="page-subtitle">Operations</h2>
        <div class="missions-list" id="missionsList"></div>
      </div>
    `;
    };

    MissionsPage.prototype.afterMount = function () {
        const missions = this.fetchMissions();
        const missionsList = document.getElementById('missionsList');

        if (!missionsList) return;

        for (let i = 0; i < missions.length; i++) {
            const missionCard = document.createElement('div');
            missionCard.className = 'neu-card mission-card';
            missionCard.innerHTML = `
        <div class="neu-card-header">
          <h3>${missions[i].name}</h3>
          <span class="mission-date">${missions[i].date}</span>
        </div>
        <div class="neu-card-body">
          <p>${missions[i].description}</p>
          <div class="mission-stats">
            <span>Participants: ${missions[i].participants}</span>
            <span class="mission-status ${missions[i].status}">${missions[i].status}</span>
          </div>
        </div>
      `;
            missionsList.appendChild(missionCard);
        }
    };

    MissionsPage.prototype.fetchMissions = function () {
        // Mock data - replace with actual data
        return [
            {
                name: 'Operation Blackout',
                date: '2025-10-20',
                description: 'Night raid on enemy compound',
                participants: 24,
                status: 'success'
            },
            {
                name: 'Operation Steel Rain',
                date: '2025-10-13',
                description: 'Combined arms assault',
                participants: 32,
                status: 'success'
            },
            {
                name: 'Operation Silent Watch',
                date: '2025-10-06',
                description: 'Reconnaissance mission',
                participants: 12,
                status: 'partial'
            }
        ];
    };

    return MissionsPage;
})();
