/**
 * @fileoverview Login Form Component for Rantii
 * @author retoor <retoor@molodetz.nl>
 * @description User authentication form with validation
 * @keywords login, form, authentication, credentials, signin
 */

import { BaseComponent } from './base-component.js';

class LoginForm extends BaseComponent {
    init() {
        this.isLoading = false;
        this.render();
        this.bindEvents();
    }

    render() {
        this.setHtml(`
            <form class="login-form">
                <div class="form-header">
                    <h2 class="form-title">Sign In</h2>
                    <p class="form-subtitle">Enter your DevRant credentials</p>
                </div>
                <div class="form-group">
                    <label for="login-username" class="form-label">Username</label>
                    <input type="text"
                           id="login-username"
                           class="form-input"
                           name="username"
                           autocomplete="username"
                           required
                           ${this.isLoading ? 'disabled' : ''}>
                </div>
                <div class="form-group">
                    <label for="login-password" class="form-label">Password</label>
                    <input type="password"
                           id="login-password"
                           class="form-input"
                           name="password"
                           autocomplete="current-password"
                           required
                           ${this.isLoading ? 'disabled' : ''}>
                </div>
                <div class="form-group form-checkbox">
                    <input type="checkbox"
                           id="login-remember"
                           name="remember"
                           checked
                           ${this.isLoading ? 'disabled' : ''}>
                    <label for="login-remember">Remember me</label>
                </div>
                <div class="form-error" hidden></div>
                <button type="submit"
                        class="form-submit"
                        ${this.isLoading ? 'disabled' : ''}>
                    ${this.isLoading ? '<loading-spinner size="small"></loading-spinner>' : 'Sign In'}
                </button>
            </form>
        `);
    }

    bindEvents() {
        const form = this.$('form');
        if (form) {
            this.on(form, 'submit', this.handleSubmit);
        }
    }

    async handleSubmit(e) {
        e.preventDefault();

        if (this.isLoading) return;

        const username = this.$('#login-username').value.trim();
        const password = this.$('#login-password').value;
        const remember = this.$('#login-remember').checked;

        if (!username || !password) {
            this.showError('Please enter username and password');
            return;
        }

        this.setLoading(true);
        this.hideError();

        try {
            const result = await this.getAuth()?.login(username, password, remember);
            if (result?.success) {
                this.emit('login-success', { user: result.user });
                this.getRouter()?.goHome();
            } else {
                this.showError(result?.error || 'Login failed');
            }
        } catch (error) {
            this.showError('Connection error. Please try again.');
        } finally {
            this.setLoading(false);
        }
    }

    setLoading(loading) {
        this.isLoading = loading;
        this.render();
        this.bindEvents();
    }

    showError(message) {
        const errorEl = this.$('.form-error');
        if (errorEl) {
            errorEl.textContent = message;
            errorEl.hidden = false;
        }
    }

    hideError() {
        const errorEl = this.$('.form-error');
        if (errorEl) {
            errorEl.hidden = true;
        }
    }

    reset() {
        const form = this.$('form');
        if (form) {
            form.reset();
        }
        this.hideError();
    }
}

customElements.define('login-form', LoginForm);

export { LoginForm };