{% extends "base.html" %}

{% block content %}
<div class="container">
    <!-- Summary stats with color coding (dynamic) -->
    <section class="summary-header-section" id="stats-section">
        <div class="stats-row">
            <div class="stat-item" id="stat-line-cov">
                <div class="stat-value" id="stat-line-pct">{{ coverage.line_coverage_percent|format_percent }}</div>
                <div class="stat-label">Line Coverage</div>
            </div>
            <div class="stat-item">
                <div class="stat-value" id="stat-lines">{{ coverage.covered_lines }} / {{ coverage.total_lines }}</div>
                <div class="stat-label">Lines</div>
            </div>
            <div class="stat-item" id="stat-func-cov">
                <div class="stat-value" id="stat-func-pct">{{ coverage.function_coverage_percent|format_percent }}</div>
                <div class="stat-label">Function Coverage</div>
            </div>
            <div class="stat-item">
                <div class="stat-value" id="stat-files">{{ coverage.total_files }}</div>
                <div class="stat-label">Files</div>
            </div>
        </div>
    </section>

    <!-- Coverage Trend (if history available) -->
    {% include "components/trend.html" %}

    <!-- Coverage by Author (if blame enabled) -->
    {% include "components/authors.html" %}

    <!-- Tab navigation -->
    <nav class="tab-nav">
        {% if baseline %}
        <button class="tab-btn active" data-tab="comparison">
            <span class="tab-icon">📊</span>
            <span class="tab-text">Comparison</span>
        </button>
        <button class="tab-btn" data-tab="modules">
            <span class="tab-icon">📁</span>
            <span class="tab-text">Modules</span>
        </button>
        {% else %}
        <button class="tab-btn active" data-tab="modules">
            <span class="tab-icon">📁</span>
            <span class="tab-text">Modules</span>
        </button>
        {% endif %}
        <button class="tab-btn" data-tab="files">
            <span class="tab-icon">📄</span>
            <span class="tab-text">All Files</span>
        </button>
    </nav>

    <!-- Tab: Comparison (if baseline) -->
    {% if baseline %}
    <div class="tab-content active" id="tab-comparison">
        {% set line_delta = coverage.line_coverage_percent - baseline.line_coverage_percent %}
        {% set lines_delta = coverage.total_lines - baseline.total_lines %}
        {% set hits_delta = coverage.covered_lines - baseline.covered_lines %}
        {% set misses_delta = coverage.uncovered_lines - baseline.uncovered_lines %}
        {% set func_delta = coverage.function_coverage_percent - baseline.function_coverage_percent %}
        {% set files_delta = coverage.total_files - baseline.total_files %}
        
        <!-- Coverage Diff Block (CodeCov style) -->
        <div class="coverage-diff-block">
            <div class="diff-header">
                <span class="diff-title">@@</span>
                <span class="diff-title-text">Coverage Diff</span>
                <span class="diff-title">@@</span>
            </div>
            <div class="diff-subheader">
                <span class="diff-col-label">##</span>
                <span class="diff-col">base</span>
                <span class="diff-col">head</span>
                <span class="diff-col">+/-</span>
                <span class="diff-col-label">##</span>
            </div>
            <div class="diff-separator"></div>
            
            <!-- Coverage row (highlighted) -->
            <div class="diff-row diff-row-highlight {% if line_delta >= 0 %}diff-row-positive{% else %}diff-row-negative{% endif %}">
                <span class="diff-indicator">{% if line_delta >= 0 %}+{% else %}-{% endif %}</span>
                <span class="diff-metric">Coverage</span>
                <span class="diff-value">{{ "%.2f"|format(baseline.line_coverage_percent) }}%</span>
                <span class="diff-value">{{ "%.2f"|format(coverage.line_coverage_percent) }}%</span>
                <span class="diff-delta {% if line_delta >= 0 %}delta-positive{% else %}delta-negative{% endif %}">
                    {% if line_delta >= 0 %}+{% endif %}{{ "%.2f"|format(line_delta) }}%
                </span>
            </div>
            <div class="diff-separator"></div>
            
            <!-- Files -->
            <div class="diff-row">
                <span class="diff-indicator"></span>
                <span class="diff-metric">Files</span>
                <span class="diff-value">{{ baseline.total_files }}</span>
                <span class="diff-value">{{ coverage.total_files }}</span>
                <span class="diff-delta {% if files_delta != 0 %}{% if files_delta > 0 %}delta-positive{% else %}delta-negative{% endif %}{% endif %}">
                    {% if files_delta != 0 %}{% if files_delta > 0 %}+{% endif %}{{ files_delta }}{% endif %}
                </span>
            </div>
            
            <!-- Lines -->
            <div class="diff-row">
                <span class="diff-indicator"></span>
                <span class="diff-metric">Lines</span>
                <span class="diff-value">{{ baseline.total_lines }}</span>
                <span class="diff-value">{{ coverage.total_lines }}</span>
                <span class="diff-delta {% if lines_delta != 0 %}{% if lines_delta > 0 %}delta-positive{% else %}delta-negative{% endif %}{% endif %}">
                    {% if lines_delta != 0 %}{% if lines_delta > 0 %}+{% endif %}{{ lines_delta }}{% endif %}
                </span>
            </div>
            
            <!-- Branches (if available) -->
            {% if baseline.total_branches > 0 or coverage.total_branches > 0 %}
            {% set branches_delta = coverage.total_branches - baseline.total_branches %}
            <div class="diff-row">
                <span class="diff-indicator"></span>
                <span class="diff-metric">Branches</span>
                <span class="diff-value">{{ baseline.total_branches }}</span>
                <span class="diff-value">{{ coverage.total_branches }}</span>
                <span class="diff-delta {% if branches_delta != 0 %}{% if branches_delta > 0 %}delta-positive{% else %}delta-negative{% endif %}{% endif %}">
                    {% if branches_delta != 0 %}{% if branches_delta > 0 %}+{% endif %}{{ branches_delta }}{% endif %}
                </span>
            </div>
            {% endif %}
            
            <div class="diff-separator"></div>
            
            <!-- Hits -->
            <div class="diff-row">
                <span class="diff-indicator"></span>
                <span class="diff-metric">Hits</span>
                <span class="diff-value">{{ baseline.covered_lines }}</span>
                <span class="diff-value">{{ coverage.covered_lines }}</span>
                <span class="diff-delta {% if hits_delta > 0 %}delta-positive{% elif hits_delta < 0 %}delta-negative{% endif %}">
                    {% if hits_delta != 0 %}{% if hits_delta > 0 %}+{% endif %}{{ hits_delta }}{% endif %}
                </span>
            </div>
            
            <!-- Misses -->
            <div class="diff-row {% if misses_delta > 0 %}diff-row-negative{% elif misses_delta < 0 %}diff-row-positive{% endif %}">
                <span class="diff-indicator">{% if misses_delta > 0 %}-{% elif misses_delta < 0 %}+{% endif %}</span>
                <span class="diff-metric">Misses</span>
                <span class="diff-value">{{ baseline.uncovered_lines }}</span>
                <span class="diff-value">{{ coverage.uncovered_lines }}</span>
                <span class="diff-delta {% if misses_delta > 0 %}delta-negative{% elif misses_delta < 0 %}delta-positive{% endif %}">
                    {% if misses_delta != 0 %}{% if misses_delta > 0 %}+{% endif %}{{ misses_delta }}{% endif %}
                </span>
            </div>
            
            <!-- Partials (if branches available) -->
            {% if baseline.total_branches > 0 or coverage.total_branches > 0 %}
            {% set baseline_partials = baseline.total_branches - baseline.covered_branches %}
            {% set current_partials = coverage.total_branches - coverage.covered_branches %}
            {% set partials_delta = current_partials - baseline_partials %}
            <div class="diff-row">
                <span class="diff-indicator"></span>
                <span class="diff-metric">Partials</span>
                <span class="diff-value">{{ baseline_partials }}</span>
                <span class="diff-value">{{ current_partials }}</span>
                <span class="diff-delta {% if partials_delta > 0 %}delta-negative{% elif partials_delta < 0 %}delta-positive{% endif %}">
                    {% if partials_delta != 0 %}{% if partials_delta > 0 %}+{% endif %}{{ partials_delta }}{% endif %}
                </span>
            </div>
            {% endif %}
        </div>
        
        <!-- Impacted Modules Section -->
        {% if impacted_modules %}
        <div class="impacted-section">
            <h3 class="impacted-title">Impacted Modules</h3>
            <table class="impacted-table">
                <thead>
                    <tr>
                        <th>Module</th>
                        <th class="text-right">Coverage Δ</th>
                    </tr>
                </thead>
                <tbody>
                    {% for module in impacted_modules %}
                    <tr class="{% if module.delta and module.delta >= 0 %}row-positive{% elif module.delta and module.delta < 0 %}row-negative{% endif %}">
                        <td>
                            <a href="#" class="impacted-link" onclick="navigateToModule('{{ module.path }}'); return false;">
                                📁 {{ module.name }}
                            </a>
                        </td>
                        <td class="text-right">
                            <span class="coverage-value">{{ "%.2f"|format(module.coverage) }}%</span>
                            {% if module.is_new %}
                            <span class="delta-badge delta-new">new</span>
                            {% elif module.delta is not none %}
                            <span class="delta-badge {% if module.delta >= 0 %}delta-positive{% else %}delta-negative{% endif %}">
                                ({% if module.delta >= 0 %}+{% endif %}{{ "%.2f"|format(module.delta) }}%)
                            </span>
                            {% endif %}
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        {% endif %}
        
        <!-- Impacted Files Section -->
        {% if impacted_files %}
        <div class="impacted-section">
            <h3 class="impacted-title">Impacted Files</h3>
            <table class="impacted-table">
                <thead>
                    <tr>
                        <th>File</th>
                        <th class="text-right">Coverage Δ</th>
                    </tr>
                </thead>
                <tbody>
                    {% for file in impacted_files %}
                    <tr class="{% if file.delta and file.delta >= 0 %}row-positive{% elif file.delta and file.delta < 0 %}row-negative{% endif %}">
                        <td>
                            <a href="files/{{ file.path|replace('/', '_')|replace('\\', '_') }}.html" class="impacted-link">
                                <span class="file-list-icon" data-ext="{{ file.rel_path.split('.')[-1] }}"></span>
                                {{ file.rel_path }}
                            </a>
                        </td>
                        <td class="text-right">
                            <span class="coverage-value">{{ "%.2f"|format(file.coverage) }}%</span>
                            {% if file.is_new %}
                            <span class="delta-badge delta-new">new</span>
                            {% elif file.delta is not none %}
                            <span class="delta-badge {% if file.delta >= 0 %}delta-positive{% else %}delta-negative{% endif %}">
                                ({% if file.delta >= 0 %}+{% endif %}{{ "%.2f"|format(file.delta) }}%)
                            </span>
                            {% endif %}
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        {% endif %}
    </div>
    {% endif %}

    <!-- Tab: Modules -->
    <div class="tab-content{% if not baseline %} active{% endif %}" id="tab-modules">
      <div class="modules-layout">
        <div class="modules-browser">
        <div class="files-table-container">
            <table class="files-table directory-table" id="browser-table">
                <thead id="browser-thead">
                    <tr>
                        <th></th>
                        <th colspan="3" class="text-center">Line Coverage</th>
                        <th colspan="3" class="text-center">Function Coverage</th>
                    </tr>
                    <tr class="subheader">
                        <th class="sortable-header" data-sort="name">Name <span class="sort-indicator">↑</span></th>
                        <th class="text-center sortable-header" data-sort="line-rate">Rate</th>
                        <th class="text-center sortable-header" data-sort="line-total">Total</th>
                        <th class="text-center sortable-header" data-sort="line-hit">Hit</th>
                        <th class="text-center sortable-header" data-sort="func-rate">Rate</th>
                        <th class="text-center sortable-header" data-sort="func-total">Total</th>
                        <th class="text-center sortable-header" data-sort="func-hit">Hit</th>
                    </tr>
                </thead>
                <tbody id="browser-tbody">
                </tbody>
            </table>
        </div>
        </div>
        <div class="modules-chart">
            {% include "components/sunburst.html" %}
        </div>
      </div>
    </div>

    <!-- Tab: All Files -->
    <div class="tab-content" id="tab-files">
        <div class="files-toolbar">
            <input type="text" id="file-search" class="search-input" placeholder="🔍 Search files...">
            <div class="sort-buttons">
                <span class="sort-label">Sort by:</span>
                <button class="sort-btn active" data-sort="uncovered"
                        title="Most uncovered lines first — by absolute count of missing lines, regardless of file size">Uncovered lines ↓</button>
                <button class="sort-btn" data-sort="coverage"
                        title="Lowest coverage first — by percentage of lines covered, regardless of file size">Coverage&nbsp;% ↑</button>
                {% if baseline %}<button class="sort-btn" data-sort="delta"
                        title="Biggest coverage change vs baseline first">Δ vs baseline ↓</button>{% endif %}
                <button class="sort-btn" data-sort="name"
                        title="Alphabetical by file path">Name A–Z</button>
            </div>
        </div>
        <div class="files-list" id="files-list">
            {% for file in files %}
            <a href="files/{{ file.path|replace('/', '_')|replace('\\', '_') }}.html" 
               class="file-list-item{% if file.is_new_file %} file-new{% endif %}" 
               data-path="{{ file.rel_path or file.path }}"
               data-coverage="{{ file.coverage_percent }}"
               data-uncovered="{{ file.uncovered_lines or 0 }}"
               data-delta="{{ file.coverage_delta if file.coverage_delta is not none else 0 }}">
                <span class="file-list-icon" data-ext="{{ file.name.split('.')[-1] }}"></span>
                <span class="file-list-path">
                    {{ file.rel_path or file.path }}
                    {% if file.is_new_file %}<span class="badge-new-file">NEW</span>{% endif %}
                </span>
                <span class="file-list-stats">
                    <span class="file-list-coverage {{ file.coverage_percent|coverage_class }}">{{ file.coverage_percent|format_percent }}</span>
                    {% if baseline and file.coverage_delta is not none %}
                        {% set abs_delta = file.coverage_delta|abs %}
                        {% set intensity = [0.5 + (abs_delta / 100) * 0.5, 1.0]|min %}
                        {% if abs_delta < 0.05 %}
                    <span class="file-list-delta delta-zero">— {{ "%.1f"|format(abs_delta) }}%</span>
                        {% elif file.coverage_delta >= 0 %}
                    <span class="file-list-delta" style="color: rgba(34, 197, 94, {{ intensity }})">▲ +{{ "%.1f"|format(abs_delta) }}%</span>
                        {% else %}
                    <span class="file-list-delta" style="color: rgba(239, 68, 68, {{ intensity }})">▼ -{{ "%.1f"|format(abs_delta) }}%</span>
                        {% endif %}
                    {% elif file.is_new_file %}
                    <span class="file-list-delta delta-new">NEW</span>
                    {% endif %}
                </span>
            </a>
            {% endfor %}
        </div>
    </div>

    <!-- Embedded data for JS navigation -->
    <script>
    const coverageData = {{ full_tree_data | tojson }};
    {% if baseline_tree_data %}
    const baselineData = {{ baseline_tree_data | tojson }};
    const hasBaseline = true;
    {% else %}
    const baselineData = {};
    const hasBaseline = false;
    {% endif %}
    const rootStats = {
        line_coverage_percent: {{ coverage.line_coverage_percent }},
        covered_lines: {{ coverage.covered_lines }},
        total_lines: {{ coverage.total_lines }},
        function_coverage_percent: {{ coverage.function_coverage_percent }},
        covered_functions: {{ coverage.covered_functions }},
        total_functions: {{ coverage.total_functions }},
        total_files: {{ coverage.total_files }}
    };
    {% if baseline %}
    const baselineRootStats = {
        line_coverage_percent: {{ baseline.line_coverage_percent }},
        covered_lines: {{ baseline.covered_lines }},
        total_lines: {{ baseline.total_lines }},
        function_coverage_percent: {{ baseline.function_coverage_percent }},
        covered_functions: {{ baseline.covered_functions }},
        total_functions: {{ baseline.total_functions }},
        total_files: {{ baseline.total_files }}
    };
    {% else %}
    const baselineRootStats = null;
    {% endif %}
    let currentPath = '';

    // ── Modules ⇄ Sunburst sync ───────────────────────────────────────────
    // navigateTo() is the single source of truth for "which directory are we
    // looking at". It drives both the table and the sunburst. _syncingNav
    // guards against the sunburst's own click handlers bouncing back into a
    // second navigation while we're already navigating.
    let _syncingNav = false;

    // The sunburst calls this when the user zooms via a slice / center / crumb.
    window.onSunburstNavigate = function(sbPath) {
        if (_syncingNav) return;
        navigateTo((!sbPath || sbPath === 'root') ? '' : sbPath);
    };

    // The sunburst reads this on first render to align with the table.
    window.getCurrentModulePath = function() { return currentPath; };

    function formatDelta(delta, isPercent = false) {
        if (delta === null || delta === undefined) return '';
        const val = isPercent ? delta.toFixed(1) + '%' : delta;
        
        // Zero delta - gray
        if (Math.abs(delta) < 0.05) {
            return '<span class="delta-inline delta-zero">— ' + val + '</span>';
        }
        
        const sign = delta >= 0 ? '+' : '';
        const arrow = delta >= 0 ? '▲' : '▼';
        
        // Calculate intensity based on delta magnitude (0-100% maps to 0.5-1.0 opacity)
        const absDelta = Math.abs(delta);
        const intensity = Math.min(0.5 + (absDelta / 100) * 0.5, 1.0);
        
        // Use inline style for variable intensity
        const color = delta >= 0 
            ? 'rgba(34, 197, 94, ' + intensity + ')' 
            : 'rgba(239, 68, 68, ' + intensity + ')';
        
        return '<span class="delta-inline" style="color: ' + color + '">' + arrow + ' ' + sign + val + '</span>';
    }
    
    function getBaselineStats(path) {
        if (!hasBaseline) return null;
        if (!path) return baselineRootStats;
        if (baselineData[path]) return baselineData[path].stats;
        return null;
    }
    
    function getBaselineFile(path, filename) {
        if (!hasBaseline || !baselineData[path]) return null;
        return baselineData[path].files ? baselineData[path].files[filename] : null;
    }

    function getCoverageClass(pct) {
        if (pct >= 80) return 'coverage-high';
        if (pct >= 50) return 'coverage-medium';
        return 'coverage-low';
    }
    
    function navigateToModule(modulePath) {
        // Switch to Modules tab and navigate to the module
        document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
        document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));
        document.querySelector('[data-tab="modules"]').classList.add('active');
        document.getElementById('tab-modules').classList.add('active');
        navigateTo(modulePath);
    }

    function formatPercent(val) {
        return val.toFixed(1) + '%';
    }

    // Sorting state
    let currentSort = 'name';
    let sortAsc = true;

    function sortItems(dirs, files) {
        const sortFn = getSortFunction();
        dirs.sort((a, b) => {
            const result = sortFn(a, b, true);
            return sortAsc ? result : -result;
        });
        files.sort((a, b) => {
            const result = sortFn(a, b, false);
            return sortAsc ? result : -result;
        });
    }

    function getSortFunction() {
        switch (currentSort) {
            case 'name':
                return (a, b, isDir) => (a.name || '').localeCompare(b.name || '');
            case 'line-rate':
                return (a, b, isDir) => {
                    const aVal = isDir ? (a.stats?.line_coverage_percent || 0) : (a.line_coverage_percent || 0);
                    const bVal = isDir ? (b.stats?.line_coverage_percent || 0) : (b.line_coverage_percent || 0);
                    return aVal - bVal;
                };
            case 'line-total':
                return (a, b, isDir) => {
                    const aVal = isDir ? (a.stats?.total_lines || 0) : (a.total_lines || 0);
                    const bVal = isDir ? (b.stats?.total_lines || 0) : (b.total_lines || 0);
                    return aVal - bVal;
                };
            case 'line-hit':
                return (a, b, isDir) => {
                    const aVal = isDir ? (a.stats?.covered_lines || 0) : (a.covered_lines || 0);
                    const bVal = isDir ? (b.stats?.covered_lines || 0) : (b.covered_lines || 0);
                    return aVal - bVal;
                };
            case 'func-rate':
                return (a, b, isDir) => {
                    const aVal = isDir ? (a.stats?.function_coverage_percent || 0) : (a.function_coverage_percent || 0);
                    const bVal = isDir ? (b.stats?.function_coverage_percent || 0) : (b.function_coverage_percent || 0);
                    return aVal - bVal;
                };
            case 'func-total':
                return (a, b, isDir) => {
                    const aVal = isDir ? (a.stats?.total_functions || 0) : (a.total_functions || 0);
                    const bVal = isDir ? (b.stats?.total_functions || 0) : (b.total_functions || 0);
                    return aVal - bVal;
                };
            case 'func-hit':
                return (a, b, isDir) => {
                    const aVal = isDir ? (a.stats?.covered_functions || 0) : (a.covered_functions || 0);
                    const bVal = isDir ? (b.stats?.covered_functions || 0) : (b.covered_functions || 0);
                    return aVal - bVal;
                };
            default:
                return (a, b) => 0;
        }
    }

    function updateSortHeaders() {
        document.querySelectorAll('.sortable-header').forEach(th => {
            const indicator = th.querySelector('.sort-indicator');
            if (th.dataset.sort === currentSort) {
                if (!indicator) {
                    th.innerHTML = th.textContent.trim() + ' <span class="sort-indicator">' + (sortAsc ? '↑' : '↓') + '</span>';
                } else {
                    indicator.textContent = sortAsc ? '↑' : '↓';
                }
            } else {
                if (indicator) indicator.remove();
            }
        });
    }

    function getFileIcon(filename) {
        const ext = filename.split('.').pop().toLowerCase();
        const icons = {
            // C/C++ implementation
            'c': '<span class="file-icon icon-c">C</span>',
            'cpp': '<span class="file-icon icon-cpp">C++</span>',
            'cc': '<span class="file-icon icon-cpp">C++</span>',
            'cxx': '<span class="file-icon icon-cpp">C++</span>',
            // C/C++ headers
            'h': '<span class="file-icon icon-h">H</span>',
            'hpp': '<span class="file-icon icon-hpp">H++</span>',
            'hxx': '<span class="file-icon icon-hpp">H++</span>',
            'inl': '<span class="file-icon icon-hpp">inl</span>',
            // Python
            'py': '<span class="file-icon icon-py">PY</span>',
            // JavaScript/TypeScript
            'js': '<span class="file-icon icon-js">JS</span>',
            'ts': '<span class="file-icon icon-ts">TS</span>',
            'jsx': '<span class="file-icon icon-js">JSX</span>',
            'tsx': '<span class="file-icon icon-ts">TSX</span>',
            // Go
            'go': '<span class="file-icon icon-go">GO</span>',
            // Rust
            'rs': '<span class="file-icon icon-rs">RS</span>',
            // Java/Kotlin
            'java': '<span class="file-icon icon-java">JV</span>',
            'kt': '<span class="file-icon icon-kt">KT</span>',
            // Other
            'rb': '<span class="file-icon icon-rb">RB</span>',
            'php': '<span class="file-icon icon-php">PHP</span>',
            'swift': '<span class="file-icon icon-swift">SW</span>',
            'cs': '<span class="file-icon icon-cs">C#</span>',
            'sh': '<span class="file-icon icon-sh">SH</span>',
            'sql': '<span class="file-icon icon-sql">SQL</span>',
        };
        return icons[ext] || '<span class="file-icon icon-default">📄</span>';
    }

    function navigateTo(path, pushState = true) {
        currentPath = path;
        updateStats(path);
        updateTable(path);

        // Keep the sunburst focused on the same directory (animated).
        _syncingNav = true;
        if (window.sunburstFocus) window.sunburstFocus(path);
        _syncingNav = false;

        // Update browser history
        if (pushState) {
            const url = path ? '#' + path : '#';
            history.pushState({ path: path }, '', url);
        }
    }
    
    // Handle browser back/forward
    window.addEventListener('popstate', function(event) {
        const path = event.state ? event.state.path : '';
        navigateTo(path, false);
    });

    function updateStats(path) {
        let stats = rootStats;
        if (path && coverageData[path]) {
            stats = coverageData[path].stats;
        }
        
        const linePct = stats.line_coverage_percent || 0;
        const funcPct = stats.function_coverage_percent || 0;
        
        document.getElementById('stat-line-pct').textContent = formatPercent(linePct);
        document.getElementById('stat-lines').textContent = (stats.covered_lines || 0) + ' / ' + (stats.total_lines || 0);
        document.getElementById('stat-func-pct').textContent = formatPercent(funcPct);
        document.getElementById('stat-files').textContent = stats.file_count || stats.total_files || '-';
        
        // Update color classes
        const lineEl = document.getElementById('stat-line-cov');
        const funcEl = document.getElementById('stat-func-cov');
        lineEl.className = 'stat-item ' + getCoverageClass(linePct);
        funcEl.className = 'stat-item ' + getCoverageClass(funcPct);
    }

    function updateTable(path) {
        const tbody = document.getElementById('browser-tbody');
        const thead = document.getElementById('browser-thead');
        
        let dirs = [];
        let files = [];
        
        if (!path) {
            // Get subdirs from root node (empty key) or top-level dirs
            if (coverageData[''] && coverageData[''].subdirs) {
                coverageData[''].subdirs.forEach(sub => {
                    if (coverageData[sub]) {
                        dirs.push({ ...coverageData[sub], path: sub, isDir: true });
                    }
                });
            } else {
                dirs = Object.keys(coverageData)
                    .filter(k => k && !k.includes('/'))
                    .map(k => ({ ...coverageData[k], path: k, isDir: true }));
            }
            // Files that live directly at the repo root, not under any dir.
            if (coverageData[''] && coverageData[''].files) {
                coverageData[''].files.forEach(f => files.push({ ...f, isDir: false }));
            }
        } else if (coverageData[path]) {
            const node = coverageData[path];
            if (node.subdirs) {
                node.subdirs.forEach(sub => {
                    const subPath = path + '/' + sub;
                    if (coverageData[subPath]) {
                        dirs.push({ ...coverageData[subPath], path: subPath, name: sub, isDir: true });
                    }
                });
            }
            if (node.files) {
                node.files.forEach(f => {
                    files.push({ ...f, isDir: false });
                });
            }
        }

        // Sort by current sort setting (default: name)
        sortItems(dirs, files);

        const hasFiles = files.length > 0;
        const hasDirs = dirs.length > 0;
        
        updateSortHeaders();

        let html = '';
        
        // Parent directory link (..)
        if (path) {
            const parentPath = path.includes('/') ? path.substring(0, path.lastIndexOf('/')) : '';
            html += '<tr class="directory-row parent-row">';
            html += '<td class="dir-name"><a href="#" onclick="navigateTo(\'' + parentPath + '\'); return false;">📂 ..</a></td>';
            html += '<td colspan="6" class="text-muted">Parent directory</td>';
            html += '</tr>';
        }
        
        // Directories first
        dirs.forEach(item => {
            const stats = item.stats || {};
            const linePct = stats.line_coverage_percent || 0;
            const funcPct = stats.function_coverage_percent || 0;
            const lineClass = getCoverageClass(linePct);
            const funcClass = getCoverageClass(funcPct);
            
            // Get baseline delta for directory
            const baselineStats = getBaselineStats(item.path);
            let lineDelta = '';
            let funcDelta = '';
            if (baselineStats) {
                const baseLinePct = baselineStats.line_coverage_percent || 0;
                const baseFuncPct = baselineStats.function_coverage_percent || 0;
                lineDelta = formatDelta(linePct - baseLinePct, true);
                funcDelta = formatDelta(funcPct - baseFuncPct, true);
            }
            
            html += '<tr class="directory-row">';
            html += '<td class="dir-name"><a href="#" onclick="navigateTo(\'' + item.path + '\'); return false;">📁 ' + item.name + '</a></td>';
            html += '<td><div class="coverage-cell"><div class="lcov-bar"><div class="lcov-bar-fill ' + lineClass + '" style="width:' + linePct + '%"></div></div>';
            html += '<span class="' + lineClass + '">' + formatPercent(linePct) + '</span>' + lineDelta + '</div></td>';
            html += '<td class="text-center">' + (stats.total_lines || 0) + '</td>';
            html += '<td class="text-center">' + (stats.covered_lines || 0) + '</td>';
            html += '<td><div class="coverage-cell"><div class="lcov-bar"><div class="lcov-bar-fill ' + funcClass + '" style="width:' + funcPct + '%"></div></div>';
            html += '<span class="' + funcClass + '">' + formatPercent(funcPct) + '</span>' + funcDelta + '</div></td>';
            html += '<td class="text-center">' + (stats.total_functions || 0) + '</td>';
            html += '<td class="text-center">' + (stats.covered_functions || 0) + '</td>';
            html += '</tr>';
        });
        
        // Then files
        files.forEach(item => {
            const linePct = item.line_coverage_percent || 0;
            const funcPct = item.function_coverage_percent || 0;
            const lineClass = getCoverageClass(linePct);
            const funcClass = getCoverageClass(funcPct);
            const safePath = item.full_path ? item.full_path.replace(/\//g, '_').replace(/\\/g, '_') : item.name;
            
            // Get baseline delta for file
            const baselineFile = getBaselineFile(path, item.name);
            let lineDelta = '';
            let funcDelta = '';
            let isNewFile = false;
            if (hasBaseline && !baselineFile) {
                isNewFile = true;
            } else if (baselineFile) {
                const baseLinePct = baselineFile.line_coverage_percent || 0;
                const baseFuncPct = baselineFile.function_coverage_percent || 0;
                lineDelta = formatDelta(linePct - baseLinePct, true);
                funcDelta = formatDelta(funcPct - baseFuncPct, true);
            }
            
            const newBadge = isNewFile ? '<span class="badge-new-inline">NEW</span>' : '';
            
            html += '<tr class="directory-row file-row' + (isNewFile ? ' file-new' : '') + '">';
            html += '<td class="dir-name"><a href="files/' + safePath + '.html">' + getFileIcon(item.name) + ' ' + item.name + '</a>' + newBadge + '</td>';
            html += '<td><div class="coverage-cell"><div class="lcov-bar"><div class="lcov-bar-fill ' + lineClass + '" style="width:' + linePct + '%"></div></div>';
            html += '<span class="' + lineClass + '">' + formatPercent(linePct) + '</span>' + lineDelta + '</div></td>';
            html += '<td class="text-center">' + (item.total_lines || 0) + '</td>';
            html += '<td class="text-center">' + (item.covered_lines || 0) + '</td>';
            html += '<td><div class="coverage-cell"><div class="lcov-bar"><div class="lcov-bar-fill ' + funcClass + '" style="width:' + funcPct + '%"></div></div>';
            html += '<span class="' + funcClass + '">' + formatPercent(funcPct) + '</span>' + funcDelta + '</div></td>';
            html += '<td class="text-center">' + (item.total_functions || 0) + '</td>';
            html += '<td class="text-center">' + (item.covered_functions || 0) + '</td>';
            html += '</tr>';
        });
        
        tbody.innerHTML = html;
    }

    // Tab switching
    document.querySelectorAll('.tab-btn').forEach(btn => {
        btn.addEventListener('click', function() {
            document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
            document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));
            this.classList.add('active');
            document.getElementById('tab-' + this.dataset.tab).classList.add('active');
        });
    });

    // Sortable headers click handler
    document.querySelectorAll('.sortable-header').forEach(th => {
        th.style.cursor = 'pointer';
        th.addEventListener('click', function() {
            const newSort = this.dataset.sort;
            if (currentSort === newSort) {
                sortAsc = !sortAsc;
            } else {
                currentSort = newSort;
                sortAsc = true;
            }
            updateTable(currentPath);
        });
    });

    // File search
    const fileSearch = document.getElementById('file-search');
    if (fileSearch) {
        fileSearch.addEventListener('input', function() {
            const query = this.value.toLowerCase();
            document.querySelectorAll('#files-list .file-list-item').forEach(item => {
                const path = item.dataset.path.toLowerCase();
                item.style.display = path.includes(query) ? '' : 'none';
            });
        });
    }

    // File list icons
    const iconMap = {
        'c': ['C', 'rgba(0,68,130,0.85)', '#fff'],
        'cpp': ['C++', 'rgba(0,68,130,0.85)', '#fff'],
        'cc': ['C++', 'rgba(0,68,130,0.85)', '#fff'],
        'cxx': ['C++', 'rgba(0,68,130,0.85)', '#fff'],
        'h': ['H', 'rgba(101,154,210,0.85)', '#fff'],
        'hpp': ['H++', 'rgba(101,154,210,0.85)', '#fff'],
        'hxx': ['H++', 'rgba(101,154,210,0.85)', '#fff'],
        'inl': ['inl', 'rgba(101,154,210,0.85)', '#fff'],
        'py': ['PY', 'rgba(55,118,171,0.85)', '#ffd43b'],
        'js': ['JS', 'rgba(247,223,30,0.9)', '#323330'],
        'ts': ['TS', 'rgba(49,120,198,0.85)', '#fff'],
        'go': ['GO', 'rgba(0,173,216,0.85)', '#fff'],
        'rs': ['RS', 'rgba(222,165,132,0.9)', '#000'],
        'java': ['JV', 'rgba(237,139,0,0.85)', '#fff'],
        'rb': ['RB', 'rgba(204,52,45,0.85)', '#fff'],
        'sh': ['SH', 'rgba(78,170,37,0.85)', '#fff'],
    };
    document.querySelectorAll('.file-list-icon').forEach(icon => {
        const ext = icon.dataset.ext;
        const info = iconMap[ext] || ['📄', 'transparent', 'inherit'];
        icon.textContent = info[0];
        icon.style.background = info[1];
        icon.style.color = info[2];
    });

    // File list sorting
    document.querySelectorAll('.sort-btn').forEach(btn => {
        btn.addEventListener('click', function() {
            document.querySelectorAll('.sort-btn').forEach(b => b.classList.remove('active'));
            this.classList.add('active');
            
            const list = document.getElementById('files-list');
            const items = Array.from(list.querySelectorAll('.file-list-item'));
            const sortBy = this.dataset.sort;
            
            items.sort((a, b) => {
                if (sortBy === 'name') {
                    return a.dataset.path.localeCompare(b.dataset.path);
                } else if (sortBy === 'coverage') {
                    return parseFloat(a.dataset.coverage) - parseFloat(b.dataset.coverage);
                } else if (sortBy === 'delta') {
                    return parseFloat(b.dataset.delta) - parseFloat(a.dataset.delta);
                } else { // uncovered
                    return parseFloat(b.dataset.uncovered) - parseFloat(a.dataset.uncovered);
                }
            });
            
            items.forEach(item => list.appendChild(item));
        });
    });

    // When the project's real content sits below a chain of single-child
    // directories (e.g. only `storage/` at the root, then only `orthus/`
    // inside that, …), opening at the bare root shows a tedious run of
    // one-row listings. Descend from the root through those single-child
    // links and start at the first level that actually branches — the
    // first directory holding more than one element (subdir or file).
    function findInitialPath() {
        let path = '';
        let node = coverageData[''] || null;
        for (let depth = 0; node && depth < 64; depth++) {
            const subdirs = node.subdirs || [];
            const files = node.files || [];
            // Collapse only a lone subdirectory with nothing beside it.
            if (subdirs.length !== 1 || files.length !== 0) break;
            const next = path ? path + '/' + subdirs[0] : subdirs[0];
            if (!coverageData[next]) break;
            path = next;
            node = coverageData[next];
        }
        return path;
    }

    // Initialize from URL hash or default
    document.addEventListener('DOMContentLoaded', function() {
        const hash = window.location.hash.slice(1); // Remove #
        const initial = hash || findInitialPath();
        navigateTo(initial, false);
        // Replace initial state
        history.replaceState({ path: initial }, '', window.location.href);
    });
    </script>
</div>
{% endblock %}