// Base module for common functionality
class BaseModule {
    constructor() {
        this.questions = [];
        this.currentIndex = 0;
        this.loading = false;
    }

    // Common DOM utilities
    static getElementById(id) {
        return document.getElementById(id);
    }

    static show(element) {
        if (typeof element === 'string') {
            element = document.getElementById(element);
        }
        if (element) element.style.display = 'block';
    }

    static hide(element) {
        if (typeof element === 'string') {
            element = document.getElementById(element);
        }
        if (element) element.style.display = 'none';
    }

    static showFlex(element) {
        if (typeof element === 'string') {
            element = document.getElementById(element);
        }
        if (element) element.style.display = 'flex';
    }

    // Common API calls
    async fetchQuestions(params = {}) {
        const url = new URL('/api/questions', window.location.origin);
        Object.keys(params).forEach(key => {
            if (params[key] !== undefined && params[key] !== null) {
                url.searchParams.append(key, params[key]);
            }
        });

        try {
            const response = await fetch(url);
            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }
            return await response.json();
        } catch (error) {
            console.error('Error fetching questions:', error);
            this.showNotification('Error al cargar las preguntas', 'danger');
            throw error;
        }
    }

    // Common notification wrapper
    showNotification(message, type = 'info', duration = 3000) {
        if (window.Utils) {
            Utils.showNotification(message, type, duration);
        } else {
            alert(message);
        }
    }

    // Common sound wrapper
    playSound(type) {
        if (window.Utils) {
            Utils.playSound(type);
        }
    }

    // Common loading states
    showLoading(loadingId = 'loading') {
        BaseModule.showFlex(loadingId);
    }

    hideLoading(loadingId = 'loading') {
        BaseModule.hide(loadingId);
    }

    // Common question display utilities
    createQuestionHTML(question, currentIndex, totalQuestions) {
        let html = `
            <div class="d-flex justify-content-between align-items-center mb-3">
                <h5 class="mb-0">Pregunta ${question.id}</h5>
                <span class="badge bg-primary">${currentIndex + 1} de ${totalQuestions}</span>
            </div>
        `;

        if (question.has_image && question.image) {
            html += `<img src="${question.image}" class="question-image" alt="Imagen de la pregunta">`;
        }

        html += `<p class="lead mb-4">${question.question}</p>`;
        return html;
    }

    // Common option creation
    createOptionsHTML(options, correctAnswer, optionClass = 'option-btn') {
        let html = '<div class="options-container">';
        options.forEach((option, index) => {
            const letter = String.fromCharCode(97 + index); // a, b, c, d
            const isCorrect = letter === correctAnswer;
            html += `
                <div class="${optionClass} mb-2 p-3 border rounded"
                     data-correct="${isCorrect}" data-letter="${letter}">
                    <strong>${option}</strong>
                    <i class="fas fa-check-circle text-success ms-2 answer-indicator" style="display: none;"></i>
                </div>
            `;
        });
        html += '</div>';
        return html;
    }

    // Common navigation update
    updateNavigation(prevBtnId, nextBtnId, currentQuestionId) {
        const prevBtn = BaseModule.getElementById(prevBtnId);
        const nextBtn = BaseModule.getElementById(nextBtnId);
        const currentQuestionEl = BaseModule.getElementById(currentQuestionId);

        if (prevBtn) prevBtn.disabled = this.currentIndex === 0;
        if (nextBtn) nextBtn.disabled = this.currentIndex === this.questions.length - 1;
        if (currentQuestionEl) currentQuestionEl.textContent = this.currentIndex + 1;
    }

    // Common progress update
    updateProgress(progressBarId) {
        const progressBar = BaseModule.getElementById(progressBarId);
        if (progressBar && this.questions.length > 0) {
            const progress = ((this.currentIndex + 1) / this.questions.length) * 100;
            progressBar.style.width = progress + '%';
        }
    }
}

// Export for global use
window.BaseModule = BaseModule;