// widgets/ProfileWidget.ts
import { Widget } from '../components/Widget';
import { createElement } from '../utils/utils';
import { globalAPI, ApiResponse, ProfileResponseData } from '../api/api';

export class ProfileWidget extends Widget {
    private profileData: ProfileResponseData | null = null;

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

    async fetchProfileData() {
        try {
            const response: ApiResponse<ProfileResponseData> = await globalAPI.getProfile('mockUserId');
            if (response.success && response.data) {
                this.profileData = response.data;
                this.render();
            } else {
                console.error("Failed to fetch profile data");
            }
        } catch (error) {
            console.error("Error fetching profile data:", error);
        }
    }


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

        if (!this.profileData) { // Null check here
            this.container.textContent = 'Loading profile...';
            return this.container;
        }

        const header = createElement('div');
        header.classList.add('widget-header', 'd-flex', 'justify-content-between', 'align-items-center');
        const headerText = createElement('div');
        headerText.classList.add('widget-title');
        headerText.textContent = 'Profile Information';
        header.appendChild(headerText);

        const kebabMenuButton = createElement('button');
        kebabMenuButton.classList.add('btn', 'btn-outline-secondary', 'btn-sm', 'dropdown-toggle');
        kebabMenuButton.type = 'button';
        kebabMenuButton.id = 'profileKebabMenu';
        kebabMenuButton.setAttribute('data-bs-toggle', 'dropdown');
        kebabMenuButton.setAttribute('aria-expanded', 'false');
        kebabMenuButton.innerHTML = '⋮'; // Kebab menu icon (vertical ellipsis)
        header.appendChild(kebabMenuButton);

        const dropdownMenu = createElement('ul');
        dropdownMenu.classList.add('dropdown-menu', 'dropdown-menu-end');
        dropdownMenu.setAttribute('aria-labelledby', 'profileKebabMenu');

        const accountSettingsMenuItem = createElement('li');
        const accountSettingsLink = createElement('a');
        accountSettingsLink.classList.add('dropdown-item');
        accountSettingsLink.href = '#/profile';
        accountSettingsLink.setAttribute('data-action', 'open-account-settings');
        accountSettingsLink.textContent = 'Account settings';
        accountSettingsMenuItem.appendChild(accountSettingsLink);
        dropdownMenu.appendChild(accountSettingsMenuItem);
        header.appendChild(dropdownMenu);


        this.container.appendChild(header);

        const widgetBody = createElement('div');
        widgetBody.classList.add('widget-body', 'row', 'g-3');

        const profileImageCol = createElement('div');
        profileImageCol.classList.add('col-md-4');
        const profileImage = createElement('img');
        if (this.profileData.profilePicture) { // Null check before accessing properties
            profileImage.src = this.profileData.profilePicture;
        } else {
            profileImage.src = 'src/assets/vite.svg'; // Default image if no profile picture
        }
        profileImage.alt = 'Profile Picture';
        profileImage.classList.add('img-fluid', 'rounded-circle');
        profileImageCol.appendChild(profileImage);
        widgetBody.appendChild(profileImageCol);

        const detailsCol = createElement('div');
        detailsCol.classList.add('col-md-8');
        const fullNamePara = createElement('p');
        if (this.profileData.fullName) { // Null check before accessing properties
            fullNamePara.innerHTML = `${this.profileData.fullName}`;
        } else {
            fullNamePara.innerHTML = `<small>Full Name:</small><br>N/A`; // Or some default text
        }
        const schoolIdPara = createElement('p');
        if (this.profileData.schoolId) { // Null check before accessing properties
            schoolIdPara.innerHTML = `<small><strong>School ID:</small></strong><br>${this.profileData.schoolId}`;
        } else {
            schoolIdPara.innerHTML = `<small><strong>School ID:</strong></small><br>N/A`;
        }
        const birthdatePara = createElement('p');
        birthdatePara.innerHTML = `<small><strong>Birthdate:</strong></small><br><span class="text-muted">(Hidden from others)</span>`;
        detailsCol.appendChild(fullNamePara);
        detailsCol.appendChild(schoolIdPara);
        detailsCol.appendChild(birthdatePara);
        widgetBody.appendChild(detailsCol);

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