// widgets/StudentFinancialWidget.ts
import { Widget } from '../components/Widget';
import { createElement } from '../utils/utils';
import { globalAPI, ApiResponse, StudentFinancialData } from '../api/api'; // Import API and types

export class StudentFinancialWidget extends Widget {
    private studentId: string;
    private financialData: StudentFinancialData | null = null;
    private isLoading: boolean = true;
    private hasError: boolean = false;

    constructor(studentId: string) {
        super();
        this.studentId = studentId;
        this.fetchFinancialData();
    }

    async fetchFinancialData() {
        this.isLoading = true;
        this.hasError = false;
        this.render(); // Re-render to show loading state

        try {
            const response: ApiResponse<StudentFinancialData> = await globalAPI.getStudentFinancialData(this.studentId);
            if (response.success && response.data) {
                this.financialData = response.data;
            } else {
                this.hasError = true;
                console.error("Failed to fetch student financial data:", response.message);
            }
        } catch (error) {
            this.hasError = true;
            console.error("Error fetching student financial data:", error);
        } finally {
            this.isLoading = false;
            this.render(); // Re-render with fetched data or error state
        }
    }

    render(): HTMLElement {
        this.container.innerHTML = ''; // Clear previous content

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

        if (this.isLoading) {
            widgetBody.textContent = 'Loading financial data...';
        } else if (this.hasError) {
            widgetBody.textContent = 'Failed to load financial data.';
        } else if (this.financialData) {
            const header = createElement('div');
            header.classList.add('widget-header');
            header.textContent = 'Payment Information';
            this.container.appendChild(header);

            this.container.appendChild(header);

            widgetBody.innerHTML = `
                <div class="row mb-2">
                    <div class="col-sm-6">Tuition Fee:</div>
                    <div class="col-sm-6">₱ ${this.financialData.tuitionFee}</div>
                </div>
                <div class="row mb-2">
                    <div class="col-sm-6">Miscellaneous:</div>
                    <div class="col-sm-6">₱ ${this.financialData.miscellaneousFee}</div>
                </div>
                <div class="row mb-2">
                    <div class="col-sm-6">Lab Fee:</div>
                    <div class="col-sm-6">₱ ${this.financialData.labFee}</div>
                </div>
                <div class="row mb-2">
                    <div class="col-sm-6">Current:</div>
                    <div class="col-sm-6">₱ ${this.financialData.currentAccount}</div>
                </div>
                <div class="row mb-2">
                    <div class="col-sm-6">Down:</div>
                    <div class="col-sm-6">₱ ${this.financialData.downPayment}</div>
                </div>
                <div class="row mb-2">
                    <div class="col-sm-6">Midterms:</div>
                    <div class="col-sm-6">₱ ${this.financialData.midtermPayment}</div>
                </div>
                <div class="row mb-2">
                    <div class="col-sm-6">Prefinals:</div>
                    <div class="col-sm-6">₱ ${this.financialData.prefinalPayment}</div>
                </div>
                <div class="row mb-2">
                    <div class="col-sm-6">Finals:</div>
                    <div class="col-sm-6">₱ ${this.financialData.finalPayment}</div>
                </div>
            `;
        } else {
            widgetBody.textContent = 'No financial data available.'; // Should not usually reach here if no error but no data
        }

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