{% extends "base.html" %}

{% block title %}Stacked Chart - Classified Questions{% endblock %}

{% block content %}
<style>
    /* ── Subject Filter Pills ── */
    .subject-filter-bar {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        justify-content: center;
        padding: 10px 0;
    }

    .subject-pill {
        display: none;
    }

    .subject-pill-label {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        padding: 6px 16px;
        border-radius: 20px;
        border: 2px solid rgba(255, 255, 255, 0.25);
        background: rgba(255, 255, 255, 0.06);
        color: rgba(255, 255, 255, 0.7);
        font-weight: 600;
        font-size: 0.85rem;
        cursor: pointer;
        transition: all 0.2s ease;
        user-select: none;
        letter-spacing: 0.5px;
    }

    .subject-pill-label:hover {
        border-color: rgba(255, 255, 255, 0.5);
        background: rgba(255, 255, 255, 0.1);
        color: #fff;
    }

    .subject-pill:checked+.subject-pill-label {
        border-color: #0d6efd;
        background: rgba(13, 110, 253, 0.25);
        color: #fff;
        box-shadow: 0 0 8px rgba(13, 110, 253, 0.3);
    }

    .subject-pill:checked+.subject-pill-label[data-subject-key="P"] {
        border-color: #f97316;
        background: rgba(249, 115, 22, 0.25);
        box-shadow: 0 0 8px rgba(249, 115, 22, 0.3);
    }

    .subject-pill:checked+.subject-pill-label[data-subject-key="C"] {
        border-color: #22d3ee;
        background: rgba(34, 211, 238, 0.25);
        box-shadow: 0 0 8px rgba(34, 211, 238, 0.3);
    }

    .subject-pill:checked+.subject-pill-label[data-subject-key="B"] {
        border-color: #4ade80;
        background: rgba(74, 222, 128, 0.25);
        box-shadow: 0 0 8px rgba(74, 222, 128, 0.3);
    }

    .subject-pill:checked+.subject-pill-label[data-subject-key="Z"] {
        border-color: #a78bfa;
        background: rgba(167, 139, 250, 0.25);
        box-shadow: 0 0 8px rgba(167, 139, 250, 0.3);
    }

    .subject-pill:checked+.subject-pill-label[data-subject-key="M"] {
        border-color: #fb7185;
        background: rgba(251, 113, 133, 0.25);
        box-shadow: 0 0 8px rgba(251, 113, 133, 0.3);
    }

    /* ── Chart containers ── */
    .chart-container-main {
        position: relative;
        width: 100%;
        overflow-x: auto;
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 8px;
        background: rgba(0, 0, 0, 0.2);
        padding: 12px;
    }

    .chart-container-main::-webkit-scrollbar,
    .data-table-scroll::-webkit-scrollbar {
        height: 8px;
        width: 8px;
    }

    .chart-container-main::-webkit-scrollbar-track,
    .data-table-scroll::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.05);
        border-radius: 4px;
    }

    .chart-container-main::-webkit-scrollbar-thumb,
    .data-table-scroll::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.2);
        border-radius: 4px;
    }

    .data-table-scroll::-webkit-scrollbar-thumb:hover,
    .chart-container-main::-webkit-scrollbar-thumb:hover {
        background: rgba(255, 255, 255, 0.35);
    }

    .chart-inner {
        min-width: 800px;
        height: 450px;
    }

    .chart-container-topic {
        position: relative;
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 8px;
        background: rgba(0, 0, 0, 0.2);
        padding: 12px;
    }

    /* ── Section dividers ── */
    .section-title {
        font-size: 1.1rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 1.5px;
        opacity: 0.85;
        padding-bottom: 8px;
        border-bottom: 2px solid rgba(255, 255, 255, 0.1);
        margin-bottom: 16px;
    }

    /* ── Sort toggle ── */
    .sort-toggle {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 6px 16px;
        border-radius: 20px;
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid rgba(255, 255, 255, 0.15);
        font-size: 0.85rem;
    }

    .sort-toggle .form-check-input:checked {
        background-color: #f59e0b;
        border-color: #f59e0b;
    }

    /* ── Scrollable Table ── */
    .data-table-wrapper {
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 8px;
        overflow: hidden;
    }

    .data-table-scroll {
        max-height: 480px;
        overflow-y: auto;
        overflow-x: auto;
    }

    .data-table-wrapper .table {
        margin: 0;
        font-size: 0.88rem;
    }

    .data-table-wrapper .table thead th {
        background: rgba(30, 30, 40, 0.95);
        border-bottom: 2px solid rgba(255, 255, 255, 0.15);
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 1px;
        padding: 12px 16px;
        white-space: nowrap;
        position: sticky;
        top: 0;
        z-index: 2;
    }

    .data-table-wrapper .table td {
        padding: 10px 16px;
        vertical-align: middle;
        border-color: rgba(255, 255, 255, 0.06);
    }

    /* ── Loading state ── */
    .loading-overlay {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 120px;
        color: rgba(255, 255, 255, 0.5);
        font-size: 0.9rem;
    }
</style>

<div class="container-fluid px-3 px-md-5 mt-4 mb-5">
    <div class="card bg-dark text-white border-0 shadow">
        <div class="card-header text-center py-4" style="background: rgba(255,255,255,0.03); border-bottom: 1px solid rgba(255,255,255,0.1);">
            <h1 class="h3 mb-1 fw-bold">Classified Questions</h1>
            <p class="mb-3 text-white-50 small">Session → Subjects → Topics</p>
            
            <div class="d-flex justify-content-center align-items-center gap-2">
                <span class="small text-white-50">View Group:</span>
                <select id="groupSelector" class="form-select form-select-sm bg-dark text-white border-secondary" style="width: auto; min-width: 150px;">
                    <option value="">Main (No Group)</option>
                    {% for group in groups %}
                    <option value="{{ group }}">{{ group }}</option>
                    {% endfor %}
                </select>
            </div>
        </div>
        <div class="card-body px-3 px-md-4 py-4">

            <!-- ═══════════════ SECTION 1: STACKED CHART ═══════════════ -->
            <div class="mb-5">
                <div class="section-title text-center">Session Breakdown</div>

                <div class="subject-filter-bar mb-3" id="mainChartSubjectCheckboxes"></div>

                <div class="chart-container-main">
                    <div class="chart-inner" id="chartWrapper">
                        <canvas id="stackedChart"></canvas>
                    </div>
                </div>
            </div>

            <!-- ═══════════════ SECTION 2: TOPIC CHART ═══════════════ -->
            <div class="mb-5">
                <div class="section-title text-center">Topic-wise Aggregate</div>

                <div class="d-flex flex-wrap align-items-center justify-content-center gap-3 mb-3">
                    <div class="subject-filter-bar" id="subjectCheckboxes"></div>

                    <div class="sort-toggle">
                        <div class="form-check form-switch mb-0">
                            <input class="form-check-input" type="checkbox" id="sortByWrongRatio">
                            <label class="form-check-label" for="sortByWrongRatio">Sort by Wrong Ratio</label>
                        </div>
                    </div>
                </div>

                <div class="chart-container-topic">
                    <canvas id="topicChart" width="400" height="300"></canvas>
                </div>
            </div>

            <!-- ═══════════════ SECTION 3: DATA TABLE ═══════════════ -->
            <div>
                <div class="section-title text-center">Raw Data</div>
                <div class="data-table-wrapper">
                    <div class="data-table-scroll">
                        <table class="table table-dark table-striped table-hover">
                            <thead>
                                <tr>
                                    <th>Session ID</th>
                                    <th>Session Name</th>
                                    <th>Subject</th>
                                    <th>Topic</th>
                                    <th>Questions</th>
                                    <th>Wrong Ratio</th>
                                </tr>
                            </thead>
                            <tbody id="dataTableBody">
                                <tr>
                                    <td colspan="6">
                                        <div class="loading-overlay">
                                            <div class="spinner-border spinner-border-sm me-2" role="status"></div>
                                            Loading data…
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
let stackedChartInstance = null;
let topicChartInstance = null;
let originalData = null;
let selectedSubjects = new Set();
let sortByWrongRatio = false;

function getSortedSessionIds(data) {
    return Object.keys(data).sort((a, b) => {
        return new Date(data[b].created_at) - new Date(data[a].created_at);
    });
}

const SUBJECT_PALETTE = {
    P: { border: '#f97316' },
    C: { border: '#22d3ee' },
    B: { border: '#4ade80' },
    Z: { border: '#a78bfa' },
    M: { border: '#fb7185' },
};

const TOPIC_SHADES = {};
function getTopicColor(subject, topic) {
    const key = `${subject}|${topic}`;
    if (TOPIC_SHADES[key]) return TOPIC_SHADES[key];

    const base = SUBJECT_PALETTE[subject.charAt(0).toUpperCase()];
    if (!base) {
        const c = `hsl(${Math.abs(hashStr(key)) % 360}, 60%, 55%)`;
        TOPIC_SHADES[key] = c;
        return c;
    }

    const count = Object.keys(TOPIC_SHADES).filter(k => k.startsWith(subject + '|')).length;
    const hsl = hexToHSL(base.border);
    const lightness = Math.max(30, Math.min(75, hsl.l + (count * 8 - 16)));
    const color = `hsl(${hsl.h}, ${hsl.s}%, ${lightness}%)`;
    TOPIC_SHADES[key] = color;
    return color;
}

function hashStr(str) {
    let hash = 0;
    for (let i = 0; i < str.length; i++) {
        hash = ((hash << 5) - hash) + str.charCodeAt(i);
        hash |= 0;
    }
    return hash;
}

function hexToHSL(hex) {
    let r = parseInt(hex.slice(1, 3), 16) / 255;
    let g = parseInt(hex.slice(3, 5), 16) / 255;
    let b = parseInt(hex.slice(5, 7), 16) / 255;
    const max = Math.max(r, g, b), min = Math.min(r, g, b);
    let h, s, l = (max + min) / 2;
    if (max === min) { h = s = 0; }
    else {
        const d = max - min;
        s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
        switch (max) {
            case r: h = ((g - b) / d + (g < b ? 6 : 0)) / 6; break;
            case g: h = ((b - r) / d + 2) / 6; break;
            case b: h = ((r - g) / d + 4) / 6; break;
        }
    }
    return { h: Math.round(h * 360), s: Math.round(s * 100), l: Math.round(l * 100) };
}

const GRID_COLOR = 'rgba(255, 255, 255, 0.12)';
const GRID_COLOR_BOLD = 'rgba(255, 255, 255, 0.25)';
const TICK_COLOR = 'rgba(255, 255, 255, 0.7)';
const TITLE_COLOR = 'rgba(255, 255, 255, 0.85)';

// Plugin to draw top axis ticks and labels
const topAxisPlugin = {
    id: 'topAxisMirror',
    afterDraw(chart) {
        if (chart.canvas.id !== 'topicChart') return;
        const xScale = chart.scales.x;
        if (!xScale) return;
        
        const ctx = chart.ctx;
        const top = chart.chartArea.top;
        
        ctx.save();
        ctx.strokeStyle = GRID_COLOR_BOLD;
        ctx.lineWidth = 1;
        
        // Draw top border line
        ctx.beginPath();
        ctx.moveTo(chart.chartArea.left, top);
        ctx.lineTo(chart.chartArea.right, top);
        ctx.stroke();
        
        // Draw tick marks and labels
        ctx.fillStyle = TICK_COLOR;
        ctx.font = '11px sans-serif';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'bottom';
        
        xScale.ticks.forEach(tick => {
            const x = xScale.getPixelForValue(tick.value);
            // Tick mark
            ctx.beginPath();
            ctx.moveTo(x, top);
            ctx.lineTo(x, top - 6);
            ctx.stroke();
            // Label
            ctx.fillText(tick.label, x, top - 8);
        });
        
        ctx.restore();
    }
};

document.addEventListener('DOMContentLoaded', function () {
    const groupSelector = document.getElementById('groupSelector');
    
    function fetchData(group = '') {
        // Show loading state in table
        document.getElementById('dataTableBody').innerHTML = `
            <tr>
                <td colspan="6">
                    <div class="loading-overlay">
                        <div class="spinner-border spinner-border-sm me-2" role="status"></div>
                        Loading group data…
                    </div>
                </td>
            </tr>`;
            
        const url = group ? `/api/stacked_chart_data?group=${encodeURIComponent(group)}` : '/api/stacked_chart_data';
        
        fetch(url)
            .then(r => r.json())
            .then(data => {
                originalData = data;

                const allSubjects = new Set();
                Object.keys(data).forEach(sid => {
                    Object.keys(data[sid].subjects).forEach(s => allSubjects.add(s));
                });

                const subjectList = Array.from(allSubjects);
                // Reset selected subjects to include all from the new data
                selectedSubjects = new Set();
                subjectList.forEach(s => selectedSubjects.add(s));

                createSubjectCheckboxes(subjectList);
                createMainChartSubjectCheckboxes(subjectList);

                createStackedChart(data);
                createTopicChart(data);
                populateDataTable(data);
            })
            .catch(err => {
                console.error('Error fetching chart data:', err);
                document.getElementById('dataTableBody').innerHTML = '<tr><td colspan="6" class="text-center text-danger">Error loading data</td></tr>';
            });
    }

    // Initial fetch
    fetchData(groupSelector.value);

    // Fetch on group change
    groupSelector.addEventListener('change', function() {
        fetchData(this.value);
    });

    document.getElementById('sortByWrongRatio').addEventListener('change', function () {
        sortByWrongRatio = this.checked;
        applySubjectFilter();
    });
});

function buildPills(container, subjects, idPrefix, labelFn) {
    container.innerHTML = '';
    subjects.forEach(subject => {
        const id = `${idPrefix}-${subject}`;
        const key = subject.charAt(0).toUpperCase();

        const input = document.createElement('input');
        input.type = 'checkbox';
        input.className = 'subject-pill';
        input.id = id;
        input.value = subject;
        input.checked = true;
        input.addEventListener('change', function () {
            if (this.checked) selectedSubjects.add(subject);
            else selectedSubjects.delete(subject);
            syncPillStates(subject, this.checked);
            applySubjectFilter();
        });

        const label = document.createElement('label');
        label.className = 'subject-pill-label';
        label.htmlFor = id;
        label.setAttribute('data-subject-key', key);
        label.textContent = labelFn(subject);

        container.appendChild(input);
        container.appendChild(label);
    });
}

function syncPillStates(subject, checked) {
    document.querySelectorAll(`input[value="${subject}"]`).forEach(el => {
        el.checked = checked;
    });
}

function createSubjectCheckboxes(subjects) {
    buildPills(document.getElementById('subjectCheckboxes'), subjects, 'subject', s => s);
}

function createMainChartSubjectCheckboxes(subjects) {
    const pcbzm = subjects.filter(s => ['P', 'C', 'B', 'Z', 'M'].includes(s.charAt(0).toUpperCase()));
    buildPills(document.getElementById('mainChartSubjectCheckboxes'), pcbzm, 'main-subject', s => s.charAt(0).toUpperCase());
}

function applySubjectFilter() {
    if (!originalData) return;

    if (selectedSubjects.size === 0) {
        createStackedChart({});
        createTopicChart({});
        return;
    }

    const filtered = {};
    getSortedSessionIds(originalData).forEach(sid => {
        filtered[sid] = {
            session_name: originalData[sid].session_name,
            created_at: originalData[sid].created_at,
            subjects: {},
            wrong_ratios: originalData[sid].wrong_ratios
        };
        Object.keys(originalData[sid].subjects).forEach(sub => {
            if (selectedSubjects.has(sub)) {
                filtered[sid].subjects[sub] = originalData[sid].subjects[sub];
            }
        });
    });

    createStackedChart(filtered);
    createTopicChart(filtered);
}

function createStackedChart(data) {
    const ctx = document.getElementById('stackedChart').getContext('2d');
    const sessionIds = getSortedSessionIds(data);
    const sessionNames = sessionIds.map(id => data[id].session_name || id);

    const datasetMap = {};
    sessionIds.forEach((sid, idx) => {
        const sd = data[sid];
        Object.keys(sd.subjects).forEach(subject => {
            Object.keys(sd.subjects[subject]).forEach(topic => {
                const key = `${subject}|${topic}`;
                if (!datasetMap[key]) {
                    datasetMap[key] = {
                        subject, topic,
                        counts: new Array(sessionIds.length).fill(0),
                        wrong_ratios: new Array(sessionIds.length).fill(null)
                    };
                }
                datasetMap[key].counts[idx] = sd.subjects[subject][topic];
                if (sd.wrong_ratios && sd.wrong_ratios[subject] && sd.wrong_ratios[subject][topic]) {
                    const td = sd.wrong_ratios[subject][topic];
                    datasetMap[key].wrong_ratios[idx] = `${td.total_occurrences}/${td.total_sessions_with_topic}`;
                } else {
                    datasetMap[key].wrong_ratios[idx] = '0/0';
                }
            });
        });
    });

    const datasets = Object.values(datasetMap).map(item => ({
        label: `${item.subject} – ${item.topic}`,
        backgroundColor: getTopicColor(item.subject, item.topic),
        borderColor: 'rgba(0,0,0,0.2)',
        borderWidth: 0.5,
        data: item.counts,
        stack: item.subject,
        wrong_ratios: item.wrong_ratios
    }));

    const wrapper = document.getElementById('chartWrapper');
    wrapper.style.minWidth = Math.max(800, sessionIds.length * 180) + 'px';

    if (stackedChartInstance) stackedChartInstance.destroy();

    stackedChartInstance = new Chart(ctx, {
        type: 'bar',
        data: { labels: sessionNames, datasets },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                title: {
                    display: true,
                    text: 'Questions by Session → Subject → Topic',
                    color: TITLE_COLOR,
                    font: { size: 14, weight: '600' },
                    padding: { bottom: 16 }
                },
                legend: {
                    display: true,
                    position: 'right',
                    labels: { boxWidth: 12, padding: 8, font: { size: 10 }, color: TICK_COLOR }
                },
                tooltip: {
                    backgroundColor: 'rgba(15,23,42,0.95)',
                    titleColor: '#fff',
                    bodyColor: 'rgba(255,255,255,0.85)',
                    borderColor: 'rgba(255,255,255,0.15)',
                    borderWidth: 1,
                    cornerRadius: 6,
                    padding: 10,
                    callbacks: {
                        label: ctx2 => {
                            const wr = ctx2.dataset.wrong_ratios[ctx2.dataIndex] || '0/0';
                            return `${ctx2.dataset.label}: ${ctx2.parsed.y}  (Wrong: ${wr})`;
                        }
                    }
                }
            },
            scales: {
                x: {
                    stacked: true,
                    title: { display: true, text: 'Sessions', color: TITLE_COLOR, font: { weight: '600' } },
                    ticks: { color: TICK_COLOR, font: { size: 11 } },
                    grid: { color: GRID_COLOR, lineWidth: 1 }
                },
                y: {
                    stacked: true,
                    title: { display: true, text: 'Question Count', color: TITLE_COLOR, font: { weight: '600' } },
                    ticks: { color: TICK_COLOR, stepSize: 1 },
                    grid: { color: GRID_COLOR, lineWidth: 1 },
                    border: { color: GRID_COLOR_BOLD }
                }
            }
        }
    });
}

function createTopicChart(data) {
    const topicCounts = {};
    const topicWrongRatios = {};
    const topicSubjects = {};

    Object.keys(data).forEach(sid => {
        const subjects = data[sid].subjects;
        Object.keys(subjects).forEach(subject => {
            Object.keys(subjects[subject]).forEach(topic => {
                const key = `${subject} – ${topic}`;
                topicCounts[key] = (topicCounts[key] || 0) + subjects[subject][topic];
                topicSubjects[key] = subject;
                if (data[sid].wrong_ratios && data[sid].wrong_ratios[subject] && data[sid].wrong_ratios[subject][topic]) {
                    const td = data[sid].wrong_ratios[subject][topic];
                    topicWrongRatios[key] = `${td.total_occurrences}/${td.total_sessions_with_topic}`;
                } else if (!topicWrongRatios[key]) {
                    topicWrongRatios[key] = '0/0';
                }
            });
        });
    });

    let sortedEntries = Object.entries(topicCounts);
    if (sortByWrongRatio) {
        sortedEntries.sort((a, b) => parseWrongRatio(topicWrongRatios[b[0]]) - parseWrongRatio(topicWrongRatios[a[0]]));
    } else {
        sortedEntries.sort((a, b) => b[1] - a[1]);
    }

    const labels = sortedEntries.map(e => e[0]);
    const counts = sortedEntries.map(e => e[1]);
    const colors = labels.map(l => getTopicColor(topicSubjects[l], l));
    const wrongRatios = labels.map(l => topicWrongRatios[l] || '0/0');

    const topicCanvas = document.getElementById('topicChart');
    const dynamicHeight = Math.max(300, labels.length * 28);
    topicCanvas.parentElement.style.height = dynamicHeight + 'px';

    const ctx = topicCanvas.getContext('2d');
    if (topicChartInstance) topicChartInstance.destroy();

    topicChartInstance = new Chart(ctx, {
        type: 'bar',
        data: {
            labels,
            datasets: [{
                label: 'Total Questions',
                data: counts,
                backgroundColor: colors,
                borderColor: 'rgba(0,0,0,0.15)',
                borderWidth: 0.5,
                borderRadius: 3,
                wrong_ratios: wrongRatios
            }]
        },
        options: {
            indexAxis: 'y',
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: { display: false },
                title: {
                    display: true,
                    text: sortByWrongRatio ? 'Topics Sorted by Wrong Ratio' : 'Topic-wise Question Distribution',
                    color: TITLE_COLOR,
                    font: { size: 14, weight: '600' },
                    padding: { bottom: 12 }
                },
                tooltip: {
                    backgroundColor: 'rgba(15,23,42,0.95)',
                    titleColor: '#fff',
                    bodyColor: 'rgba(255,255,255,0.85)',
                    borderColor: 'rgba(255,255,255,0.15)',
                    borderWidth: 1,
                    cornerRadius: 6,
                    padding: 10,
                    callbacks: {
                        label: ctx2 => {
                            const wr = ctx2.dataset.wrong_ratios[ctx2.dataIndex] || '0/0';
                            return `Questions: ${ctx2.parsed.x}  (Wrong: ${wr})`;
                        }
                    }
                }
            },
            scales: {
                x: {
                    position: 'bottom',
                    title: { display: true, text: 'Count', color: TITLE_COLOR, font: { weight: '600' } },
                    ticks: { color: TICK_COLOR },
                    grid: { color: GRID_COLOR, lineWidth: 1 },
                    border: { color: GRID_COLOR_BOLD }
                },
                xTop: {
                    position: 'top',
                    type: 'linear',
                    min: 0,
                    ticks: { color: TICK_COLOR },
                    grid: { drawOnChartArea: false },
                    border: { color: GRID_COLOR_BOLD },
                    afterBuildTicks: function(axis) {
                        // Copy the exact range from the bottom x axis
                        const bottomAxis = axis.chart.scales.x;
                        if (bottomAxis) {
                            axis.min = bottomAxis.min;
                            axis.max = bottomAxis.max;
                        }
                    },
                    // Add padding to prevent overlap with title
                    afterFit: function(scale) {
                        scale.paddingTop = 10;
                    }
                },
                y: {
                    ticks: { color: TICK_COLOR, font: { size: 11 } },
                    grid: { color: GRID_COLOR, lineWidth: 1 }
                }
            }
        }
    });
}

function parseWrongRatio(ratioStr) {
    if (!ratioStr) return 0;
    const parts = ratioStr.split('/');
    if (parts.length !== 2) return 0;
    const num = parseInt(parts[0]);
    const den = parseInt(parts[1]);
    if (den === 0) return 0;
    return num / den;
}

function populateDataTable(data) {
    const tbody = document.getElementById('dataTableBody');
    tbody.innerHTML = '';
    const sessionIds = getSortedSessionIds(data);

    sessionIds.forEach(sid => {
        const sd = data[sid];
        const subjects = Object.keys(sd.subjects);

        let totalTopics = 0;
        subjects.forEach(sub => { totalTopics += Object.keys(sd.subjects[sub]).length; });

        let firstRow = true;
        subjects.forEach(sub => {
            const topics = Object.keys(sd.subjects[sub]);
            topics.forEach((topic, ti) => {
                const tr = document.createElement('tr');

                if (firstRow) {
                    const tdSid = document.createElement('td');
                    tdSid.rowSpan = totalTopics;
                    tdSid.textContent = sid;
                    tr.appendChild(tdSid);

                    const tdName = document.createElement('td');
                    tdName.rowSpan = totalTopics;
                    tdName.textContent = sd.session_name || sid;
                    tr.appendChild(tdName);
                    firstRow = false;
                }

                if (ti === 0) {
                    const tdSub = document.createElement('td');
                    tdSub.rowSpan = topics.length;
                    tdSub.textContent = sub;
                    tr.appendChild(tdSub);
                }

                const tdTopic = document.createElement('td');
                tdTopic.textContent = topic;
                tr.appendChild(tdTopic);

                const tdCount = document.createElement('td');
                tdCount.textContent = sd.subjects[sub][topic];
                tr.appendChild(tdCount);

                const tdWR = document.createElement('td');
                if (sd.wrong_ratios && sd.wrong_ratios[sub] && sd.wrong_ratios[sub][topic]) {
                    const wd = sd.wrong_ratios[sub][topic];
                    // Use the correct format: total_occurrences / total_sessions_with_topic
                    tdWR.textContent = `${wd.total_occurrences}/${wd.total_sessions_with_topic}`;
                } else {
                    tdWR.textContent = '0/0';
                }
                tr.appendChild(tdWR);

                tbody.appendChild(tr);
            });
        });
    });
}
</script>
{% endblock %}