// widgets/LoginWidget.ts
import { Widget } from '../components/Widget';
import { createElement, navigateTo } from '../utils/utils';
import { globalAPI, ApiResponse, LoginResponseData } from '../api/api';

export class LoginWidget extends Widget {
    constructor() {
        super();
    }

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

        // Create a logo container
        const logoContainer = createElement('div') as HTMLElement;
        logoContainer.classList.add('logo'); // Add class for circular logo
        this.container.appendChild(logoContainer);

        // Create header
        const header = createElement('h2');
        header.classList.add('widget-header');
        header.textContent = 'Login';
        this.container.appendChild(header);

        // Create form
        const form = createElement('form');

        // User ID input group
        const userIdInputGroup = this.createInputGroup('userId', 'Student ID', 'text', 'Student ID');
        form.appendChild(userIdInputGroup);

        // Password input group
        const passwordInputGroup = this.createInputGroup('password', 'Password', 'password', 'Password');
        form.appendChild(passwordInputGroup);

        // Login button
        const loginButton = createElement('button');
        loginButton.type = 'submit';
        loginButton.classList.add('btn', 'btn-primary');
        loginButton.textContent = 'Login';
        form.appendChild(loginButton);

        // Form submission handler
        form.addEventListener('submit', async (event) => {
            event.preventDefault();
            const userId = (userIdInputGroup.querySelector('input') as HTMLInputElement).value;
            const password = (passwordInputGroup.querySelector('input') as HTMLInputElement).value;

            try {
                const response: ApiResponse<LoginResponseData> = await globalAPI.login({ userId, password });
                if (response.success) {
                    navigateTo('/dashboard');
                } else {
                    alert('Login failed: ' + response.message);
                }
            } catch (error) {
                console.error('Login error:', error);
                alert('Login error occurred.');
            }
        });

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

    private createInputGroup(id: string, labelText: string, inputType: string, placeholder: string): HTMLElement {
        const inputGroup = createElement('div');
        inputGroup.classList.add('mb-3');

        const label = createElement('label') as HTMLLabelElement;
        label.classList.add('form-label');
        label.htmlFor = id;
        label.textContent = labelText;

        const input = createElement('input') as HTMLInputElement;
        input.type = inputType;
        input.classList.add('form-control');
        input.id = id;
        input.placeholder = placeholder;

        inputGroup.appendChild(label);
        inputGroup.appendChild(input);

        return inputGroup;
    }
}