{% extends "base.html" %}

{% block extra_head %}
<!-- Highlight.js for syntax highlighting -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/cpp.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/python.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/go.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/rust.min.js"></script>
{% endblock %}

{% block content %}
<div class="container">
    <nav class="breadcrumb">
        <a href="../index.html">← Back to Summary</a>
    </nav>

    <header class="file-header">
        <h1 class="file-title">{{ file_name }}</h1>
        <p class="file-full-path">{{ file_path }}</p>

        {% if pr_coverage %}
        <div class="file-stats">
            <span class="stat">
                <strong>{{ pr_coverage.total_new_lines }}</strong> new lines
            </span>
            <span class="stat stat-success">
                <strong>{{ pr_coverage.covered_new_lines }}</strong> covered
            </span>
            <span class="stat stat-danger">
                <strong>{{ pr_coverage.uncovered_new_lines }}</strong> uncovered
            </span>
            <span class="stat">
                <strong>{{ pr_coverage.new_lines_coverage_percent|format_percent }}</strong> new code coverage
            </span>
        </div>
        {% elif coverage %}
        <div class="file-stats">
            <span class="stat">
                <strong>{{ coverage.total_lines }}</strong> lines
            </span>
            <span class="stat stat-success">
                <strong>{{ coverage.covered_lines }}</strong> covered
            </span>
            <span class="stat stat-danger">
                <strong>{{ coverage.uncovered_lines }}</strong> uncovered
            </span>
            <span class="stat">
                <strong>{{ coverage.line_coverage_percent|format_percent }}</strong> coverage
                {% if baseline_coverage %}
                {% set delta = coverage.line_coverage_percent - baseline_coverage.line_coverage_percent %}
                <span class="stat-delta {% if delta >= 0 %}delta-positive{% else %}delta-negative{% endif %}">
                    {% if delta >= 0 %}▲{% else %}▼{% endif %}{{ pct_fmt|format(delta|abs) }}%
                </span>
                {% endif %}
            </span>
        </div>
        {% if baseline_coverage %}
        <div class="file-baseline-comparison">
            <span class="baseline-label">vs Baseline:</span>
            <span class="baseline-stat">{{ baseline_coverage.line_coverage_percent|format_percent }} coverage</span>
            <span class="baseline-stat">{{ baseline_coverage.covered_lines }}/{{ baseline_coverage.total_lines }} lines</span>
        </div>
        {% endif %}
        {% endif %}
    </header>

    <!-- Function navigator with search -->
    {% if coverage and coverage.functions %}
    <div class="function-nav">
        <div class="func-search-container">
            <input type="text" id="func-search" class="func-search" placeholder="🔍 Search functions..." autocomplete="off">
            <div id="func-dropdown" class="func-dropdown hidden">
                {# Uncovered functions first (is_covered False sorts before True),
                   alphabetical within each group — sort is stable. #}
                {% for func in coverage.functions|sort(attribute='demangled_name')|sort(attribute='is_covered') %}
                <div class="func-item {% if func.is_covered %}func-item-covered{% else %}func-item-uncovered{% endif %}"
                     data-line="{{ func.start_line }}"
                     data-name="{{ (func.demangled_name or func.name)|lower }}">
                    <span class="func-status-dot">●</span>
                    <span class="func-item-name">{{ func.demangled_name or func.name }}</span>
                    <span class="func-item-calls">{{ func.execution_count }}×</span>
                </div>
                {% endfor %}
            </div>
        </div>
        <span class="func-stats">
            <span class="func-stat-covered">{{ coverage.covered_functions }}</span> /
            <span class="func-stat-total">{{ coverage.total_functions }}</span> covered
        </span>
    </div>
    {% endif %}

    <div class="view-controls">
        {% if baseline_coverage %}
        <div class="view-mode-toggle">
            <button class="view-mode-btn active" data-mode="diff" id="btn-diff">Diff View</button>
            <button class="view-mode-btn" data-mode="full" id="btn-full">Full File</button>
        </div>
        <div class="coverage-legend">
            <span class="legend-item legend-covered">Covered</span>
            <span class="legend-item legend-uncovered">Uncovered</span>
        </div>
        {% endif %}
    </div>

    {% if not source_lines and coverage and coverage.lines %}
    <div class="source-missing-note">
        ⚠️ Source file not found on disk ({{ file_path }}) — showing coverage data only
        (line numbers + hit counts). Generate the report where the sources live to see code.
    </div>
    {% endif %}

    <div class="source-container">
        <table class="source-table" id="source-table">
            <tbody>
                {% for line in source_lines %}
                {% set line_num = loop.index %}
                {% set is_added = line_num in added_lines %}
                {% set line_cov = coverage.lines.get(line_num) if coverage else none %}
                {% set is_covered = line_cov.is_covered if line_cov else none %}
                {% set exec_count = line_cov.count if line_cov else none %}
                {% set baseline_line_cov = baseline_coverage.lines.get(line_num) if baseline_coverage else none %}
                {% set baseline_is_covered = baseline_line_cov.is_covered if baseline_line_cov else none %}
                {% set coverage_changed = baseline_coverage and is_covered is not none and baseline_is_covered is not none and is_covered != baseline_is_covered %}
                {% set newly_covered = coverage_changed and is_covered == true %}
                {% set newly_uncovered = coverage_changed and is_covered == false %}

                <tr class="source-line
                    {% if is_added %}line-added{% endif %}
                    {% if is_covered == true %}line-covered{% elif is_covered == false %}line-uncovered{% else %}line-neutral{% endif %}
                    {% if newly_covered %}line-newly-covered line-coverage-changed{% elif newly_uncovered %}line-newly-uncovered line-coverage-changed{% endif %}"
                    data-line="{{ line_num }}"
                    data-added="{{ is_added|lower }}"
                    data-covered="{{ is_covered|lower if is_covered is not none else 'na' }}"
                    data-baseline-covered="{{ baseline_is_covered|lower if baseline_is_covered is not none else 'na' }}"
                    data-changed="{{ (coverage_changed or is_added)|lower }}">

                    <td class="line-number">{{ line_num }}</td>
                    <td class="line-status">
                        {% if is_added %}
                            {% if is_covered == true %}
                            <span class="status-icon status-covered" title="Covered">●</span>
                            {% elif is_covered == false %}
                            <span class="status-icon status-uncovered" title="Not covered">●</span>
                            {% else %}
                            <span class="status-icon status-neutral" title="Not executable">○</span>
                            {% endif %}
                        {% elif is_covered == true %}
                        <span class="status-icon status-covered-dim" title="Covered">●</span>
                        {% elif is_covered == false %}
                        <span class="status-icon status-uncovered-dim" title="Not covered">●</span>
                        {% endif %}
                    </td>
                    <td class="line-hits">
                        {% if exec_count is not none %}
                        <span class="hits-count">{{ exec_count }}×</span>
                        {% endif %}
                    </td>
                    <td class="line-code"><pre><code class="language-{{ language }}">{{ line|e }}</code></pre></td>
                </tr>
                {% endfor %}

                {# Fallback: no source on disk, but we have coverage data.
                   Render one row per executable line so the page isn't blank. #}
                {% if not source_lines and coverage and coverage.lines %}
                {% for line_num, line_cov in coverage.lines|dictsort %}
                {% set is_covered = line_cov.is_covered %}
                <tr class="source-line {% if is_covered %}line-covered{% else %}line-uncovered{% endif %}"
                    data-line="{{ line_num }}"
                    data-covered="{{ is_covered|lower }}"
                    data-changed="false">
                    <td class="line-number">{{ line_num }}</td>
                    <td class="line-status">
                        {% if is_covered %}
                        <span class="status-icon status-covered-dim" title="Covered">●</span>
                        {% else %}
                        <span class="status-icon status-uncovered-dim" title="Not covered">●</span>
                        {% endif %}
                    </td>
                    <td class="line-hits"><span class="hits-count">{{ line_cov.count }}×</span></td>
                    <td class="line-code"><pre><code class="language-{{ language }}"></code></pre></td>
                </tr>
                {% endfor %}
                {% endif %}
            </tbody>
        </table>
    </div>

</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Apply syntax highlighting to each line
    document.querySelectorAll('.line-code code').forEach(function(block) {
        hljs.highlightElement(block);
    });

    // Diff/Full view toggle
    const btnDiff = document.getElementById('btn-diff');
    const btnFull = document.getElementById('btn-full');
    const sourceTable = document.getElementById('source-table');

    function applyViewMode(mode) {
        if (!sourceTable) return;

        const lines = sourceTable.querySelectorAll('.source-line');

        if (mode === 'full') {
            // Full view - show all lines
            lines.forEach(line => line.classList.remove('diff-hidden'));
            removeDiffSeparators();
            return;
        }

        // Diff mode - show only changed lines and context (3 lines before/after)
        const changedIndices = [];
        lines.forEach((line, idx) => {
            if (line.dataset.changed === 'true') {
                changedIndices.push(idx);
            }
        });

        // If no changes, show all lines
        if (changedIndices.length === 0) {
            lines.forEach(line => line.classList.remove('diff-hidden'));
            removeDiffSeparators();
            return;
        }

        // Hide lines not in context of changes
        lines.forEach((line, idx) => {
            let showLine = false;
            for (const changedIdx of changedIndices) {
                if (Math.abs(idx - changedIdx) <= 3) {
                    showLine = true;
                    break;
                }
            }

            if (showLine) {
                line.classList.remove('diff-hidden');
            } else {
                line.classList.add('diff-hidden');
            }
        });

        // Add separators between non-contiguous chunks
        addDiffSeparators();
    }

    function addDiffSeparators() {
        removeDiffSeparators();
        if (!sourceTable) return;

        const lines = Array.from(sourceTable.querySelectorAll('.source-line'));
        let prevVisibleIdx = -999;

        lines.forEach((line, idx) => {
            if (!line.classList.contains('diff-hidden')) {
                if (prevVisibleIdx >= 0 && idx - prevVisibleIdx > 1) {
                    // Gap detected, add separator
                    const separator = document.createElement('tr');
                    separator.className = 'diff-separator-row';
                    separator.innerHTML = '<td colspan="4" class="diff-separator-cell">···</td>';
                    line.parentNode.insertBefore(separator, line);
                }
                prevVisibleIdx = idx;
            }
        });
    }

    function removeDiffSeparators() {
        if (!sourceTable) return;
        sourceTable.querySelectorAll('.diff-separator-row').forEach(el => el.remove());
    }

    // Bind click handlers
    if (btnDiff) {
        btnDiff.addEventListener('click', function() {
            btnDiff.classList.add('active');
            if (btnFull) btnFull.classList.remove('active');
            applyViewMode('diff');
        });
    }

    if (btnFull) {
        btnFull.addEventListener('click', function() {
            if (btnDiff) btnDiff.classList.remove('active');
            btnFull.classList.add('active');
            applyViewMode('full');
        });
    }

    // Initialize diff view if buttons exist
    if (btnDiff) {
        applyViewMode('diff');
    }

    // Function search and dropdown
    const funcSearch = document.getElementById('func-search');
    const funcDropdown = document.getElementById('func-dropdown');

    if (funcSearch && funcDropdown) {
        const funcItems = funcDropdown.querySelectorAll('.func-item');

        // Show dropdown on focus
        funcSearch.addEventListener('focus', function() {
            funcDropdown.classList.remove('hidden');
        });

        // Filter functions on input
        funcSearch.addEventListener('input', function() {
            const query = this.value.toLowerCase();
            funcItems.forEach(function(item) {
                const name = item.getAttribute('data-name');
                if (name.includes(query)) {
                    item.classList.remove('hidden');
                } else {
                    item.classList.add('hidden');
                }
            });
            funcDropdown.classList.remove('hidden');
        });

        // Click on function item
        funcItems.forEach(function(item) {
            item.addEventListener('click', function() {
                const lineNum = this.getAttribute('data-line');
                const funcName = this.querySelector('.func-item-name').textContent;
                funcSearch.value = funcName;
                funcDropdown.classList.add('hidden');
                if (lineNum && lineNum !== '0') {
                    scrollToLine(lineNum);
                }
            });
        });

        // Hide dropdown when clicking outside
        document.addEventListener('click', function(e) {
            if (!funcSearch.contains(e.target) && !funcDropdown.contains(e.target)) {
                funcDropdown.classList.add('hidden');
            }
        });

        // Keyboard navigation
        funcSearch.addEventListener('keydown', function(e) {
            if (e.key === 'Escape') {
                funcDropdown.classList.add('hidden');
            }
        });
    }

    function scrollToLine(lineNum) {
        const targetRow = document.querySelector('.source-line[data-line="' + lineNum + '"]');
        if (targetRow) {
            targetRow.scrollIntoView({ behavior: 'smooth', block: 'center' });
            // Highlight the line briefly
            targetRow.style.outline = '3px solid #3b82f6';
            targetRow.style.outlineOffset = '-1px';
            setTimeout(function() {
                targetRow.style.outline = '';
                targetRow.style.outlineOffset = '';
            }, 2500);
        }
    }
});
</script>
{% endblock %}