// widgets/StudentsWidget.ts
import { Widget } from '../components/Widget';
import { createElement, navigateTo } from '../utils/utils';
import { globalAPI, ApiResponse, AdminDashboardData } from '../api/api'; // Import API and types (now exported)

export class StudentsWidget extends Widget {
    private studentCount: number = 0;

    constructor() {
        super();
        this.fetchStudentCount();
    }

    async fetchStudentCount() {
        try {
            const response: ApiResponse<AdminDashboardData> = await globalAPI.getAdminDashboardData();
            if (response.success && response.data) {
                this.studentCount = response.data.studentsCount || 0;
                this.render();
            } else {
                console.error("Failed to fetch admin dashboard data");
            }
        } catch (error) {
            console.error("Error fetching admin dashboard data:", error);
        }
    }

    render(): HTMLElement {
        this.container.innerHTML = '';

        const header = createElement('div');
        header.classList.add('widget-header');
        header.textContent = 'Students';
        this.container.appendChild(header);

        const widgetBody = createElement('div');
        widgetBody.classList.add('widget-body', 'text-center');

        const countDisplay = createElement('h3');
        countDisplay.textContent = String(this.studentCount);
        widgetBody.appendChild(countDisplay);

        const manageButton = createElement('button');
        manageButton.classList.add('btn', 'btn-primary', 'btn-sm');
        manageButton.textContent = 'Manage Students';
        manageButton.addEventListener('click', () => {
            navigateTo('/manage-students');
        });
        widgetBody.appendChild(manageButton);

        this.container.appendChild(widgetBody);
        return this.container;
    }
}