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

export class TeachersWidget extends Widget {
    private teacherCount: number = 0;

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

    async fetchTeacherCount() {
        try {
            const response: ApiResponse<AdminDashboardData> = await globalAPI.getAdminDashboardData();
            if (response.success && response.data) {
                this.teacherCount = response.data.teachersCount || 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 = 'Teachers';
        this.container.appendChild(header);

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

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

        // In this prototype, teacher management page is not specified, so button is disabled or can link to a placeholder page.
        const manageButton = createElement('button');
        manageButton.classList.add('btn', 'btn-secondary', 'btn-sm', 'disabled'); // Disabled for prototype
        manageButton.textContent = 'Manage Teachers (Coming Soon)';
        widgetBody.appendChild(manageButton);

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