#!/bin/bash
# generate-js.sh
# Create all JS modules for the generic learning app

JS_DIR="./js"

echo "📦 Generating JS modules..."
mkdir -p "$JS_DIR"

###############################################
# markdown-viewer.js
###############################################
cat << 'EOF' > "$JS_DIR/markdown-viewer.js"
async function loadStepDoc(stepId) {
    const config = await (await fetch('learning-config.json')).json();
    const step = config.steps.find(s => s.id == stepId);
    if (!step) return;

    const response = await fetch('docs/' + step.doc);
    const text = await response.text();

    const viewer = document.getElementById('docViewer');
    viewer.textContent = text;

    // Save active step
    localStorage.setItem('activeStep', stepId);
    loadNotes(stepId);
    updateProgressUI(stepId);
}

document.addEventListener('DOMContentLoaded', () => {
    document.querySelectorAll('.step-card').forEach(card => {
        card.addEventListener('click', () => {
            const stepId = card.dataset.step;
            loadStepDoc(stepId);
        });
    });

    const active = localStorage.getItem('activeStep') || 1;
    loadStepDoc(active);

    const searchInput = document.getElementById('searchDocs');
    if (searchInput) {
        searchInput.addEventListener('input', () => {
            const viewer = document.getElementById('docViewer');
            const text = viewer.textContent;
            const query = searchInput.value.trim();
            if (!query) return;
            // Simple highlight (non-destructive)
            // For now, just scroll to first occurrence
            const idx = text.toLowerCase().indexOf(query.toLowerCase());
            if (idx !== -1) {
                viewer.scrollTop = (idx / text.length) * viewer.scrollHeight;
            }
        });
    }
});
EOF

###############################################
# progress.js
###############################################
cat << 'EOF' > "$JS_DIR/progress.js"
function updateProgressUI(activeStepId) {
    const cards = document.querySelectorAll('.step-card');
    let total = cards.length;
    let completed = 0;

    cards.forEach(card => {
        const id = card.dataset.step;
        const status = document.getElementById('status-' + id);
        const isCompleted = !!localStorage.getItem('completed-' + id);

        if (id == activeStepId) {
            card.classList.add('step-active');
            card.classList.remove('step-complete', 'step-pending');
            status.textContent = isCompleted ? 'Completed (Active)' : 'Active';
            status.className = 'badge bg-primary';
        } else if (isCompleted) {
            card.classList.add('step-complete');
            card.classList.remove('step-active', 'step-pending');
            status.textContent = 'Completed';
            status.className = 'badge bg-success';
        } else {
            card.classList.add('step-pending');
            card.classList.remove('step-active', 'step-complete');
            status.textContent = 'Pending';
            status.className = 'badge bg-secondary';
        }

        if (isCompleted) completed++;
    });

    const percent = total > 0 ? Math.round((completed / total) * 100) : 0;
    const bar = document.getElementById('globalProgress');
    if (bar) {
        bar.style.width = percent + '%';
        bar.textContent = percent + '%';
    }

    const completeBtn = document.getElementById('completeStep');
    if (completeBtn) {
        completeBtn.style.display = 'block';
        completeBtn.onclick = () => {
            localStorage.setItem('completed-' + activeStepId, 'true');
            updateProgressUI(activeStepId);
        };
    }
}

function loadNotes(stepId) {
    const notes = localStorage.getItem('notes-' + stepId) || '';
    const notesEl = document.getElementById('notes');
    if (notesEl) {
        notesEl.value = notes;
        notesEl.oninput = () => {
            localStorage.setItem('notes-' + stepId, notesEl.value);
        };
    }
}

document.addEventListener('DOMContentLoaded', () => {
    const active = localStorage.getItem('activeStep') || 1;
    updateProgressUI(active);
});
EOF

###############################################
# quiz-engine.js
###############################################
cat << 'EOF' > "$JS_DIR/quiz-engine.js"
const QUIZZES = {
    // Example quiz structure; extend per step as needed
    2: {
        question: "What does debug.php primarily handle?",
        options: [
            "Database connections",
            "Performance profiling",
            "Formatting and logging debug messages",
            "Bootstrap UI rendering"
        ],
        answerIndex: 2
    }
};

async function loadQuiz(stepId) {
    const quizPanel = document.getElementById('quizPanel');
    const quizContent = document.getElementById('quizContent');
    const submitBtn = document.getElementById('submitQuiz');

    const quiz = QUIZZES[stepId];
    if (!quiz || !quizPanel || !quizContent || !submitBtn) {
        if (quizPanel) quizPanel.style.display = 'none';
        return;
    }

    quizPanel.style.display = 'block';
    quizContent.innerHTML = `
        <p><strong>${quiz.question}</strong></p>
        ${quiz.options.map((opt, idx) => `
            <div class="form-check">
                <input class="form-check-input" type="radio" name="quizOption" id="quizOpt${idx}" value="${idx}">
                <label class="form-check-label" for="quizOpt${idx}">
                    ${opt}
                </label>
            </div>
        `).join('')}
        <div id="quizFeedback" class="mt-2 small"></div>
    `;

    submitBtn.onclick = () => {
        const selected = document.querySelector('input[name="quizOption"]:checked');
        const feedback = document.getElementById('quizFeedback');
        if (!selected) {
            feedback.textContent = "Please select an answer.";
            feedback.className = "text-warning small";
            return;
        }
        const idx = parseInt(selected.value, 10);
        if (idx === quiz.answerIndex) {
            feedback.textContent = "Correct! ✔";
            feedback.className = "text-success small";
            // Optionally mark step complete automatically
            const active = localStorage.getItem('activeStep') || 1;
            localStorage.setItem('completed-' + active, 'true');
            updateProgressUI(active);
        } else {
            feedback.textContent = "Not quite. Try again.";
            feedback.className = "text-danger small";
        }
    };
}

document.addEventListener('DOMContentLoaded', () => {
    const active = localStorage.getItem('activeStep') || 1;
    loadQuiz(active);

    document.querySelectorAll('.step-card').forEach(card => {
        card.addEventListener('click', () => {
            const stepId = card.dataset.step;
            loadQuiz(stepId);
        });
    });
});
EOF

###############################################
# theme.js
###############################################
cat << 'EOF' > "$JS_DIR/theme.js"
document.addEventListener('DOMContentLoaded', () => {
    const body = document.getElementById('body');
    const toggle = document.getElementById('toggleTheme');
    const saved = localStorage.getItem('theme') || 'light';

    if (saved === 'dark') {
        body.classList.add('dark-mode');
    }

    if (toggle) {
        toggle.onclick = () => {
            body.classList.toggle('dark-mode');
            const mode = body.classList.contains('dark-mode') ? 'dark' : 'light';
            localStorage.setItem('theme', mode);
        };
    }
});
EOF

echo "✅ JS modules generated in $JS_DIR/"