{% load i18n %}

{% if questions %}
    {% for question in questions %}
        <div class="ai-question-item">
            <div class="ai-question-header">
                <div class="ai-question-badges">
                    <span class="ai-question-badge badge-{{ question.type|lower }}">
                        {% if question.type == 'Technical' %}
                            <i class="fas fa-code me-1"></i>
                        {% elif question.type == 'Behavioral' %}
                            <i class="fas fa-users me-1"></i>
                        {% elif question.type == 'Situational' %}
                            <i class="fas fa-lightbulb me-1"></i>
                        {% endif %}
                        {{ question.type }}
                    </span>
                    <span class="ai-question-badge badge-{{ question.difficulty|lower }}">
                        {% if question.difficulty == 'Easy' %}
                            <i class="fas fa-smile me-1"></i>
                        {% elif question.difficulty == 'Medium' %}
                            <i class="fas fa-meh me-1"></i>
                        {% elif question.difficulty == 'Hard' %}
                            <i class="fas fa-frown me-1"></i>
                        {% endif %}
                        {{ question.difficulty }}
                    </span>
                    {% if question.category %}
                        <span class="ai-question-badge badge-technical">
                            <i class="fas fa-tag me-1"></i>
                            {{ question.category }}
                        </span>
                    {% endif %}
                </div>
            </div>

            <div class="ai-question-text">
                {{ question.text|linebreaksbr }}
            </div>

            <div class="ai-question-meta">
                <div class="ai-question-category">
                    <i class="fas fa-clock"></i>
                    <small>{% trans "Generated" %}: {{ question.created_at|date:"d M Y, H:i" }}</small>
                </div>
                <div class="ai-question-actions">
                    <button type="button"
                            class="btn btn-sm"
                            onclick="copyQuestionText('{{ question.id }}')"
                            title="{% trans 'Copy question' %}">
                        <i class="fas fa-copy"></i>
                    </button>
                    <button type="button"
                            class="btn btn-sm"
                            onclick="toggleQuestionNotes('{{ question.id }}')"
                            title="{% trans 'Add notes' %}">
                        <i class="fas fa-sticky-note"></i>
                    </button>
                </div>
            </div>

            <!-- Hidden notes section -->
            <div id="questionNotes_{{ question.id }}" class="mt-3" style="display: none;">
                <textarea class="form-control"
                          rows="3"
                          placeholder="{% trans 'Add your notes for this question...' %}"></textarea>
                <div class="mt-2">
                    <button type="button"
                            class="btn btn-main-action btn-sm"
                            onclick="saveQuestionNotes('{{ question.id }}')">
                        <i class="fas fa-save me-1"></i> {% trans "Save Notes" %}
                    </button>
                </div>
            </div>
        </div>
    {% endfor %}
{% else %}
    <div class="ai-questions-empty">
        <i class="fas fa-brain fa-3x mb-3"></i>
        <h5 class="mb-3">{% trans "No AI Questions Available" %}</h5>
        <p class="mb-0">{% trans "Click 'Generate Questions' to create personalized interview questions based on the candidate's profile and job requirements." %}</p>
    </div>
{% endif %}

<script>
// Copy question text to clipboard
function copyQuestionText(questionId) {
    const questionText = document.querySelector(`#questionText_${questionId}`);
    if (questionText) {
        navigator.clipboard.writeText(questionText.textContent).then(() => {
            // Show success feedback
            showNotification('{% trans "Question copied to clipboard!" %}', 'success');
        }).catch(err => {
            console.error('Failed to copy text: ', err);
            showNotification('{% trans "Failed to copy question" %}', 'error');
        });
    }
}

// Toggle question notes visibility
function toggleQuestionNotes(questionId) {
    const notesSection = document.getElementById(`questionNotes_${questionId}`);
    if (notesSection) {
        if (notesSection.style.display === 'none') {
            notesSection.style.display = 'block';
        } else {
            notesSection.style.display = 'none';
        }
    }
}

// Save question notes (placeholder function)
function saveQuestionNotes(questionId) {
    const notesTextarea = document.querySelector(`#questionNotes_${questionId} textarea`);
    if (notesTextarea) {
        // Here you would typically save to backend
        const notes = notesTextarea.value;
        console.log(`Saving notes for question ${questionId}:`, notes);
        showNotification('{% trans "Notes saved successfully!" %}', 'success');

        // Hide notes section after saving
        setTimeout(() => {
            toggleQuestionNotes(questionId);
        }, 1000);
    }
}

// Show notification (helper function)
function showNotification(message, type = 'info') {
    // Create notification element
    const notification = document.createElement('div');
    notification.className = `alert alert-${type === 'success' ? 'success' : type === 'error' ? 'danger' : 'info'} alert-dismissible fade show position-fixed`;
    notification.style.cssText = `
        position: fixed;
        top: 20px;
        right: 20px;
        z-index: 9999;
        min-width: 300px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    `;
    notification.innerHTML = `
        ${message}
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    `;

    document.body.appendChild(notification);

    // Auto-remove after 3 seconds
    setTimeout(() => {
        if (notification.parentNode) {
            notification.parentNode.removeChild(notification);
        }
    }, 3000);
}

// Initialize question text elements with IDs for copying
document.addEventListener('DOMContentLoaded', function() {
    const questionTexts = document.querySelectorAll('.ai-question-text');
    questionTexts.forEach((element, index) => {
        // Add ID to question text elements for copying functionality
        const questionItem = element.closest('.ai-question-item');
        if (questionItem) {
            const questionId = questionItem.querySelector('[onclick*="copyQuestionText"]')?.getAttribute('onclick').match(/'(\d+)'/)?.[1];
            if (questionId) {
                element.id = `questionText_${questionId}`;
            }
        }
    });
});
</script>