{% csrf_token %}
<input type="hidden" id="current-question-id" value="{{ question.id }}">
<input type="hidden" id="current-question-number" value="{{ current_number }}">

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

<style>
    .matching-table {
        width: 100%;
        border-collapse: collapse;
        margin: 2rem 0;
    }

    .matching-table th,
    .matching-table td {
        border: 2px solid var(--border);
        padding: 1rem;
        text-align: center;
        vertical-align: middle;
    }

    .matching-table .corner-cell {
        background: #f8f9fb;
        border: none;
    }

    .matching-table th.rotated-header {
        background: #f8f9fb;
        font-weight: 600;
        color: var(--text-main);
        height: 150px;
        white-space: nowrap;
        vertical-align: bottom;
        padding: 0.5rem;
    }

    .matching-table th.rotated-header>div {
        transform: rotate(-45deg);
        transform-origin: bottom left;
        width: 30px;
        position: relative;
        left: 15px;
        bottom: 10px;
    }

    .matching-table .left-item {
        text-align: left;
        font-weight: 500;
        background: #f8f9fb;
        min-width: 200px;
    }

    .matching-table .radio-cell {
        width: 60px;
        background: white;
        cursor: pointer;
        transition: all 0.2s;
    }

    .matching-table .radio-cell:hover:not(.diagonal-block) {
        background: #f0f4ff;
        border-color: var(--primary);
    }

    .matching-table .diagonal-block {
        background: #e5e7eb;
        color: #9ca3af;
        font-size: 1.5rem;
        cursor: not-allowed;
    }

    .matching-table input[type="radio"] {
        width: 1.25rem;
        height: 1.25rem;
        cursor: pointer;
    }

    .matching-table input[type="radio"]:checked {
        accent-color: var(--primary);
    }

    .top-items-legend {
        background: #f0f4ff;
        border: 2px solid var(--primary);
        border-radius: 0.75rem;
        padding: 1.5rem;
        margin-top: 1.5rem;
    }

    .top-items-legend h4 {
        margin: 0 0 1rem 0;
        color: var(--primary);
        font-size: 1rem;
    }

    .top-item-label {
        margin: 0.5rem 0;
        padding: 0.5rem;
        background: white;
        border-radius: 0.375rem;
        font-size: 0.9rem;
    }
</style>

<div class="matching-question">
    <table class="matching-table">
        <thead>
            <tr>
                <th class="corner-cell"></th>
                {% for top_item in question.matching_data.top_items %}
                <th class="rotated-header">
                    <div>{{ forloop.counter }}. {{ top_item|truncatewords:4 }}</div>
                </th>
                {% endfor %}
            </tr>
        </thead>
        <tbody>
            {% for left_item in question.matching_data.left_items %}
            <tr>
                <td class="left-item">
                    <strong>{{ forloop.counter }}.</strong> {{ left_item }}
                </td>
                {% for top_item in question.matching_data.top_items %}
                <td class="radio-cell" data-left="{{ forloop.parentloop.counter0 }}" data-top="{{ forloop.counter0 }}">
                    {% if forloop.parentloop.counter0 != forloop.counter0 %}
                    <input type="radio" name="match-{{ forloop.parentloop.counter0 }}" value="{{ forloop.counter0 }}"
                        data-left="{{ forloop.parentloop.counter0 }}" data-top="{{ forloop.counter0 }}"
                        id="radio-{{ forloop.parentloop.counter0 }}-{{ forloop.counter0 }}"
                        style="pointer-events: none;">
                    {% else %}
                    <!-- Diagonal - no radio button -->
                    <span class="diagonal-block">—</span>
                    {% endif %}
                </td>
                {% endfor %}
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>

<script>
    (function () {
        // Handle radio button changes
        const quizContent = document.getElementById('quiz-content');
        if (!quizContent) return;

        // Handle clicks on table cells to select radio buttons
        quizContent.addEventListener('click', (e) => {
            const cell = e.target.closest('.radio-cell');
            if (!cell) return;

            // Don't do anything for diagonal cells
            if (cell.querySelector('.diagonal-block')) return;

            const leftIdx = cell.dataset.left;
            const topIdx = cell.dataset.top;

            if (leftIdx !== undefined && topIdx !== undefined) {
                const radio = document.getElementById('radio-' + leftIdx + '-' + topIdx);
                if (radio) {
                    radio.checked = true;
                    saveMatchingAnswer();
                }
            }
        });

        quizContent.addEventListener('change', (e) => {
            if (e.target.type === 'radio' && e.target.dataset.left) {
                saveMatchingAnswer();
            }
        });

        function saveMatchingAnswer() {
            const questionId = document.getElementById('current-question-id').value;
            const selected = [];

            // Collect all selected radio buttons
            const radios = document.querySelectorAll('input[type="radio"]:checked[data-left]');
            radios.forEach(radio => {
                const leftIdx = parseInt(radio.dataset.left);
                const topIdx = parseInt(radio.dataset.top);
                selected.push([leftIdx, topIdx]);
            });

            // Save to localStorage
            const sessionId = SESSION_ID;
            const key = 'quiz_' + sessionId + '_answers';
            const answers = JSON.parse(localStorage.getItem(key) || '{}');
            answers[questionId] = JSON.stringify(selected);  // Store as JSON string
            localStorage.setItem(key, JSON.stringify(answers));

            if (typeof updateQuestionPills === 'function') {
                updateQuestionPills();
            }
        }

        function restoreMatchingAnswers() {
            const questionId = document.getElementById('current-question-id')?.value;
            if (!questionId) return;

            const sessionId = SESSION_ID;
            const key = 'quiz_' + sessionId + '_answers';
            const answers = JSON.parse(localStorage.getItem(key) || '{}');
            const saved = answers[questionId];

            if (saved) {
                try {
                    const selected = JSON.parse(saved);
                    selected.forEach(pair => {
                        const [leftIdx, topIdx] = pair;
                        const radio = document.getElementById('radio-' + leftIdx + '-' + topIdx);
                        if (radio) {
                            radio.checked = true;
                        }
                    });
                } catch (e) {
                    console.error('Error restoring matching answers:', e);
                }
            }
        }

        // Restore on load
        setTimeout(restoreMatchingAnswers, 50);
    })();
</script>