{% extends "base.html" %}

{% block title %}{{ snapshot.repo_name }} — PolyglotMiner Report{% endblock %}

{% block extra_head %}
<style>
  .sortable-th {
    cursor: pointer;
    user-select: none;
    transition: background 0.15s ease;
  }
  .sortable-th:hover {
    background: var(--bg-surface-alt);
    color: var(--primary);
  }
  .sort-icon {
    display: inline-block;
    margin-left: 0.3rem;
    font-size: 0.72rem;
    color: var(--text-muted);
    vertical-align: middle;
  }
  .sortable-th.sorted .sort-icon {
    color: var(--primary);
    font-weight: 800;
  }
  .stepper-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: #ffffff;
    border: 1px solid var(--border-subtle);
    border-radius: 4px;
    cursor: pointer;
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--text-secondary);
    transition: all 0.15s ease;
  }
  .stepper-btn:hover {
    background: var(--primary-light);
    color: var(--primary);
    border-color: var(--primary-border);
  }
  .copy-path-btn {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    padding: 0.2rem 0.45rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
  }
  .copy-path-btn:hover {
    background: var(--primary-light);
    color: var(--primary);
    border-color: var(--primary-border);
  }
  .page-num-btn {
    min-width: 28px;
    height: 28px;
    padding: 0 0.4rem;
    border-radius: 4px;
    border: 1px solid var(--border-subtle);
    background: #ffffff;
    color: var(--text-primary);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
  }
  .page-num-btn:hover {
    background: var(--bg-surface-alt);
    border-color: var(--border-strong);
  }
  .page-num-btn.active {
    background: var(--primary);
    color: #ffffff;
    border-color: var(--primary);
  }
</style>
{% endblock %}

{% block content %}
<!-- Breadcrumb & Top Bar -->
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; flex-wrap: wrap; gap: 1rem;">
  <div style="display: flex; align-items: center; gap: 0.5rem; font-size: 0.88rem; color: var(--text-muted);">
    <a href="{{ root_path }}index.html" style="color: var(--text-muted); text-decoration: none; display: flex; align-items: center; gap: 0.35rem;">
      <svg width="15" height="15" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/></svg>
      Dashboard
    </a>
    <span>/</span>
    <span style="color: var(--text-primary); font-weight: 600;">{{ snapshot.repo_name }}</span>
    <span>/</span>
    <span class="mono" style="color: var(--text-muted); font-size: 0.8rem;">{{ snapshot.scan_id }}</span>
  </div>
  <div style="display: flex; gap: 0.6rem; align-items: center;">
    <button type="button" class="btn btn-secondary" onclick="openFilterModal()" style="font-size: 0.82rem; padding: 0.45rem 0.85rem;">
      <svg width="15" height="15" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"/></svg>
      <span>Filter Settings</span>
      <span class="badge" id="reportFilterBadge" style="background: var(--primary-light); color: var(--primary); font-size: 0.72rem;">Code Only</span>
    </button>
    <a href="{{ root_path }}index.html" class="btn btn-secondary">
      <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"/></svg>
      Dashboard
    </a>
  </div>
</div>

<!-- Header Hero Card -->
<div class="card" style="margin-bottom: 1.75rem; padding: 1.75rem 2rem; background: linear-gradient(180deg, #ffffff 0%, #fcfdfe 100%);">
  <div style="display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 1.25rem;">
    <div>
      <div style="display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.5rem;">
        <h1 style="font-size: 2rem; font-weight: 800; color: #0f172a; letter-spacing: -0.03em;">{{ snapshot.repo_name }}</h1>
        <span class="badge" style="background: var(--primary-light); color: var(--primary); border-color: var(--primary-border);">
          Snapshot
        </span>
        <span class="badge" id="overrideStatusBadge" style="display: none; background: #fef3c7; color: #92400e; border-color: #fde68a;">
          Custom Override
        </span>
      </div>
      <div style="display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; font-size: 0.86rem; color: var(--text-secondary);">
        <div style="display: flex; align-items: center; gap: 0.4rem;">
          <svg width="15" height="15" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"/></svg>
          {% if snapshot.repo_path.startswith('http') %}
            <a href="{{ snapshot.repo_path }}" target="_blank" rel="noopener noreferrer" style="color: var(--primary); font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 0.25rem;">
              {{ snapshot.repo_path }}
              <svg width="12" height="12" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/></svg>
            </a>
          {% else %}
            <span class="mono" style="color: #1e293b;">{{ snapshot.repo_path }}</span>
          {% endif %}
        </div>
        {% if snapshot.commit_hash %}
        <div style="display: flex; align-items: center; gap: 0.4rem;">
          <svg width="15" height="15" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"/></svg>
          Commit: <code class="mono" style="background: var(--bg-surface-alt); padding: 0.15rem 0.45rem; border-radius: 4px; color: #047857; font-weight: 600;">{{ snapshot.commit_hash }}</code>
        </div>
        {% endif %}
        {% if snapshot.branch %}
        <div style="display: flex; align-items: center; gap: 0.4rem;">
          <svg width="15" height="15" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 20l4-16m2 16l4-16M6 9h14M4 15h14"/></svg>
          Branch: <span style="font-weight: 600; color: #0284c7;">{{ snapshot.branch }}</span>
        </div>
        {% endif %}
        <div style="display: flex; align-items: center; gap: 0.4rem; color: var(--text-muted);">
          <svg width="15" height="15" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
          {{ snapshot.timestamp }}
        </div>
      </div>
    </div>
  </div>
</div>

<!-- KPI Metric Cards (dynamically recalculated) -->
<div class="stats-grid">
  <div class="stat-card primary">
    <div class="stat-top">
      <span class="stat-label">Total Files</span>
      <div class="stat-icon">
        <svg width="18" height="18" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
      </div>
    </div>
    <div class="stat-value" id="kpi-files">-</div>
    <div class="stat-sub" id="kpi-langs-sub">- unique languages</div>
  </div>

  <div class="stat-card green">
    <div class="stat-top">
      <span class="stat-label">Code Lines (LOC)</span>
      <div class="stat-icon">
        <svg width="18" height="18" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"/></svg>
      </div>
    </div>
    <div class="stat-value" id="kpi-code" style="color: #047857;">-</div>
    <div class="stat-sub" id="kpi-code-sub">- of active lines</div>
  </div>

  <div class="stat-card blue">
    <div class="stat-top">
      <span class="stat-label">Comments</span>
      <div class="stat-icon">
        <svg width="18" height="18" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"/></svg>
      </div>
    </div>
    <div class="stat-value" id="kpi-comments" style="color: #0284c7;">-</div>
    <div class="stat-sub" id="kpi-comments-sub">- comment density</div>
  </div>

  <div class="stat-card slate">
    <div class="stat-top">
      <span class="stat-label">Blank & Total Lines</span>
      <div class="stat-icon">
        <svg width="18" height="18" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"/></svg>
      </div>
    </div>
    <div class="stat-value" id="kpi-total">-</div>
    <div class="stat-sub" id="kpi-blanks-sub">- blank lines</div>
  </div>
</div>

<!-- Language Distribution Progress Card -->
<div class="card" style="margin-bottom: 2rem;">
  <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.25rem;">
    <h2 style="font-size: 1.05rem; font-weight: 700; color: #0f172a;">Language Share (by Code Lines)</h2>
    <span style="font-size: 0.8rem; color: var(--text-muted);">Hover segments for details</span>
  </div>
  <div class="lang-bar-container" id="reportLangBar"></div>
  <div id="reportLangBadges" style="display: flex; flex-wrap: wrap; gap: 0.85rem; font-size: 0.85rem;"></div>
</div>

<!-- Visual Charts Section (3 Distributions with Interactive Center Telemetry Gauges) -->
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); gap: 1.5rem; margin-bottom: 2.5rem;">
  <!-- Chart 1: Code LOC Language Distribution -->
  <div class="card" style="display: flex; flex-direction: column; align-items: center;">
    <div style="display: flex; justify-content: space-between; align-items: center; width: 100%; margin-bottom: 0.75rem; flex-wrap: wrap; gap: 0.5rem;">
      <h3 style="font-size: 0.95rem; font-weight: 700; color: #0f172a; margin: 0;">
        Language Share (LOC)
      </h3>
      <div style="display: flex; align-items: center; gap: 0.35rem; background: var(--bg-surface-alt); padding: 0.2rem 0.45rem; border-radius: var(--radius-sm); border: 1px solid var(--border-subtle);">
        <span style="font-size: 0.74rem; font-weight: 600; color: var(--text-secondary);">Slices:</span>
        <button type="button" class="stepper-btn" onclick="changeSliceLimit(-1)" title="Show fewer slices">−</button>
        <input type="number" id="sliceCountInput" value="5" min="2" style="width: 38px; height: 22px; text-align: center; font-weight: 700; font-size: 0.8rem; border: 1px solid var(--border-subtle); border-radius: 4px; background: #ffffff; color: var(--text-primary); outline: none;" onchange="setSliceLimit(this.value)">
        <button type="button" class="stepper-btn" onclick="changeSliceLimit(1)" title="Show more slices">+</button>
      </div>
    </div>
    <div style="width: 100%; max-width: 300px; position: relative; padding: 0.5rem 0; display: flex; justify-content: center; align-items: center;">
      <canvas id="langDoughnutChart"></canvas>
      <div id="langCenterOverlay" style="position: absolute; top: 38%; left: 50%; transform: translate(-50%, -50%); text-align: center; pointer-events: none; width: 160px;">
        <div id="langCenterVal" style="font-size: 1.25rem; font-weight: 800; color: #0f172a; line-height: 1.1;">-</div>
        <div id="langCenterSub" style="font-size: 0.7rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; margin-top: 2px;">Code LOC</div>
      </div>
    </div>
  </div>

  <!-- Chart 2: File Count Distribution -->
  <div class="card" style="display: flex; flex-direction: column; align-items: center;">
    <div style="display: flex; justify-content: space-between; align-items: center; width: 100%; margin-bottom: 0.75rem; flex-wrap: wrap; gap: 0.5rem;">
      <h3 style="font-size: 0.95rem; font-weight: 700; color: #0f172a; margin: 0;">
        File Distribution (Count)
      </h3>
      <div style="display: flex; align-items: center; gap: 0.35rem; background: var(--bg-surface-alt); padding: 0.2rem 0.45rem; border-radius: var(--radius-sm); border: 1px solid var(--border-subtle);">
        <span style="font-size: 0.74rem; font-weight: 600; color: var(--text-secondary);">Slices:</span>
        <button type="button" class="stepper-btn" onclick="changeFileSliceLimit(-1)" title="Show fewer slices">−</button>
        <input type="number" id="fileSliceCountInput" value="5" min="2" style="width: 38px; height: 22px; text-align: center; font-weight: 700; font-size: 0.8rem; border: 1px solid var(--border-subtle); border-radius: 4px; background: #ffffff; color: var(--text-primary); outline: none;" onchange="setFileSliceLimit(this.value)">
        <button type="button" class="stepper-btn" onclick="changeFileSliceLimit(1)" title="Show more slices">+</button>
      </div>
    </div>
    <div style="width: 100%; max-width: 300px; position: relative; padding: 0.5rem 0; display: flex; justify-content: center; align-items: center;">
      <canvas id="fileDoughnutChart"></canvas>
      <div id="fileCenterOverlay" style="position: absolute; top: 38%; left: 50%; transform: translate(-50%, -50%); text-align: center; pointer-events: none; width: 160px;">
        <div id="fileCenterVal" style="font-size: 1.25rem; font-weight: 800; color: #0f172a; line-height: 1.1;">-</div>
        <div id="fileCenterSub" style="font-size: 0.7rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; margin-top: 2px;">Total Files</div>
      </div>
    </div>
  </div>

  <!-- Chart 3: Source Line Composition Chart -->
  <div class="card" style="display: flex; flex-direction: column; align-items: center;">
    <div style="width: 100%; text-align: left; margin-bottom: 0.75rem;">
      <h3 style="font-size: 0.95rem; font-weight: 700; color: #0f172a; margin: 0;">
        Source Line Composition
      </h3>
    </div>
    <div style="width: 100%; max-width: 300px; position: relative; padding: 0.5rem 0; display: flex; justify-content: center; align-items: center;">
      <canvas id="lineCompositionChart"></canvas>
      <div id="lineCompCenterOverlay" style="position: absolute; top: 38%; left: 50%; transform: translate(-50%, -50%); text-align: center; pointer-events: none; width: 160px;">
        <div id="lineCompCenterVal" style="font-size: 1.25rem; font-weight: 800; color: #0f172a; line-height: 1.1;">-</div>
        <div id="lineCompCenterSub" style="font-size: 0.7rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; margin-top: 2px;">Total Lines</div>
      </div>
    </div>
  </div>
</div>

<!-- Languages Summary Table with Interactive Sorting -->
<div style="margin-bottom: 3rem;">
  <div style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1rem;">
    <div class="section-title" style="margin-bottom: 0;">
      Languages Breakdown <span id="tableLangCount"></span>
    </div>
    <span style="font-size: 0.78rem; color: var(--text-muted);">Click any column header to sort</span>
  </div>
  <div class="table-container">
    <table class="data-table" id="languagesTable">
      <thead>
        <tr>
          <th class="sortable-th" id="th-name" onclick="sortTable('name')">
            Language <span class="sort-icon" id="icon-name">↕</span>
          </th>
          <th class="sortable-th" id="th-category" onclick="sortTable('category')">
            Category <span class="sort-icon" id="icon-category">↕</span>
          </th>
          <th class="sortable-th" id="th-file_count" onclick="sortTable('file_count')" style="text-align: right;">
            Files <span class="sort-icon" id="icon-file_count">↕</span>
          </th>
          <th class="sortable-th" id="th-file_share" onclick="sortTable('file_count')" style="text-align: right;">
            File Share <span class="sort-icon" id="icon-file_share">↕</span>
          </th>
          <th class="sortable-th sorted" id="th-code_lines" onclick="sortTable('code_lines')" style="text-align: right;">
            Code LOC <span class="sort-icon" id="icon-code_lines">▼</span>
          </th>
          <th class="sortable-th" id="th-comment_lines" onclick="sortTable('comment_lines')" style="text-align: right;">
            Comments <span class="sort-icon" id="icon-comment_lines">↕</span>
          </th>
          <th class="sortable-th" id="th-blank_lines" onclick="sortTable('blank_lines')" style="text-align: right;">
            Blanks <span class="sort-icon" id="icon-blank_lines">↕</span>
          </th>
          <th class="sortable-th" id="th-total_lines" onclick="sortTable('total_lines')" style="text-align: right;">
            Total Lines <span class="sort-icon" id="icon-total_lines">↕</span>
          </th>
          <th class="sortable-th" id="th-code_share" onclick="sortTable('code_lines')" style="text-align: right;">
            Code Share <span class="sort-icon" id="icon-code_share">↕</span>
          </th>
        </tr>
      </thead>
      <tbody>
        <!-- Dynamically rendered via JS -->
      </tbody>
    </table>
  </div>
</div>

<!-- Interactive Files Explorer with Pagination & Sorting -->
<div style="margin-bottom: 3rem;">
  <div style="display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.25rem;">
    <div>
      <div class="section-title" style="margin-bottom: 0.25rem;">
        File Explorer <span id="fileExplorerCountSpan">({{ total_file_count }} files)</span>
      </div>
      <div style="font-size: 0.82rem; color: var(--text-muted);">
        Search, sort, paginate, and copy file paths across all analyzed project files.
      </div>
    </div>
    
    <div style="display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: center;">
      <div class="search-wrapper">
        <svg class="search-icon" width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
        <input type="text" id="fileSearchInput" class="search-input" placeholder="Search by file path or name..." oninput="onFileSearchInput()">
      </div>
      <select id="langFilterSelect" class="select-input" onchange="onLangSelectChange(this.value)">
        <option value="">All Filtered Languages</option>
        {% for lang in snapshot.languages.values() %}
        <option value="{{ lang.name }}">{{ lang.name }} ({{ lang.file_count }})</option>
        {% endfor %}
      </select>
    </div>
  </div>

  <!-- Filter Pills Bar & Page Size Selector -->
  <div style="margin-bottom: 1rem; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem;">
    <div class="filter-pills" id="langPills">
      <span class="filter-pill active" data-lang="" onclick="onLangPillClick('')">All</span>
      {% for lang in snapshot.languages.values() %}
        <span class="filter-pill" data-lang="{{ lang.name }}" id="pill-{{ lang.name }}" onclick="onLangPillClick('{{ lang.name }}')">
          <span class="lang-dot" style="background-color: {{ lang.color }};"></span>
          {{ lang.name }}
        </span>
      {% endfor %}
    </div>

    <div style="display: flex; align-items: center; gap: 0.75rem;">
      <div style="display: flex; align-items: center; gap: 0.35rem; font-size: 0.8rem; color: var(--text-secondary);">
        <span style="font-weight: 600;">Per Page:</span>
        <select id="filePageSizeSelect" class="select-input" style="padding: 0.25rem 0.5rem; font-size: 0.8rem;" onchange="setFilePageSize(this.value)">
          <option value="25">25</option>
          <option value="50" selected>50</option>
          <option value="100">100</option>
          <option value="all">All</option>
        </select>
      </div>
      <div id="fileCountBadge" style="font-size: 0.8rem; color: var(--text-muted); font-weight: 600;">
        Showing - files
      </div>
    </div>
  </div>

  <div class="table-container">
    <table class="data-table" id="fileExplorerTable">
      <thead>
        <tr>
          <th class="sortable-th" id="th-file-relative_path" onclick="sortFilesTable('relative_path')">
            File Path <span class="sort-icon" id="icon-file-relative_path">↕</span>
          </th>
          <th class="sortable-th" id="th-file-language" onclick="sortFilesTable('language')">
            Language <span class="sort-icon" id="icon-file-language">↕</span>
          </th>
          <th class="sortable-th sorted" id="th-file-code_lines" onclick="sortFilesTable('code_lines')" style="text-align: right;">
            Code LOC <span class="sort-icon" id="icon-file-code_lines">▼</span>
          </th>
          <th class="sortable-th" id="th-file-comment_lines" onclick="sortFilesTable('comment_lines')" style="text-align: right;">
            Comments <span class="sort-icon" id="icon-file-comment_lines">↕</span>
          </th>
          <th class="sortable-th" id="th-file-blank_lines" onclick="sortFilesTable('blank_lines')" style="text-align: right;">
            Blanks <span class="sort-icon" id="icon-file-blank_lines">↕</span>
          </th>
          <th class="sortable-th" id="th-file-total_lines" onclick="sortFilesTable('total_lines')" style="text-align: right;">
            Total Lines <span class="sort-icon" id="icon-file-total_lines">↕</span>
          </th>
          <th class="sortable-th" id="th-file-size_bytes" onclick="sortFilesTable('size_bytes')" style="text-align: right;">
            File Size <span class="sort-icon" id="icon-file-size_bytes">↕</span>
          </th>
          <th style="width: 60px; text-align: center;">Action</th>
        </tr>
      </thead>
      <tbody id="fileExplorerTbody">
        <!-- Dynamically rendered via JS -->
      </tbody>
    </table>
  </div>

  <!-- Pagination Controls -->
  <div id="filePaginationContainer" style="display: flex; justify-content: space-between; align-items: center; margin-top: 1rem; flex-wrap: wrap; gap: 0.75rem;">
    <div id="paginationInfo" style="font-size: 0.82rem; color: var(--text-muted);">
      Page 1 of 1
    </div>
    <div style="display: flex; gap: 0.35rem; align-items: center;">
      <button type="button" class="btn btn-secondary" id="prevPageBtn" onclick="changeFilePage(-1)" style="padding: 0.35rem 0.8rem; font-size: 0.8rem;">&larr; Previous</button>
      <div id="paginationPageNumbers" style="display: flex; gap: 0.25rem;"></div>
      <button type="button" class="btn btn-secondary" id="nextPageBtn" onclick="changeFilePage(1)" style="padding: 0.35rem 0.8rem; font-size: 0.8rem;">Next &rarr;</button>
    </div>
  </div>
</div>
{% endblock %}

{% block scripts %}
<script>
  // Raw Snapshot Data
  const SNAPSHOT = {{ snapshot_json|safe }};
  const ALL_FILES_DATA = {{ files_json|safe }};
  const REPO_SLUG = "{{ snapshot.repo_name|lower|replace(' ', '_') }}";

  const REPO_LANGUAGES = Object.values(SNAPSHOT.languages);

  let activeLanguageMap = {};
  let isCustomOverride = false;

  // Sorting state for languages table
  let currentSortKey = 'code_lines';
  let currentSortDir = 'desc';

  // Doughnut chart slice limits
  let currentSliceLimit = 5;
  let currentFileSliceLimit = 5;

  let doughnutChart = null;
  let fileDoughnutChart = null;
  let lineCompChart = null;

  // Current metric totals for telemetry gauges
  let currentTotCode = 0;
  let currentTotFiles = 0;
  let currentTotLines = 0;

  function changeSliceLimit(delta) {
    const nextVal = currentSliceLimit + delta;
    if (nextVal >= 2) {
      currentSliceLimit = nextVal;
      document.getElementById('sliceCountInput').value = currentSliceLimit;
      updateDoughnutChart();
    }
  }

  function setSliceLimit(val) {
    const num = parseInt(val, 10);
    currentSliceLimit = (!isNaN(num) && num >= 2) ? num : 2;
    document.getElementById('sliceCountInput').value = currentSliceLimit;
    updateDoughnutChart();
  }

  function changeFileSliceLimit(delta) {
    const nextVal = currentFileSliceLimit + delta;
    if (nextVal >= 2) {
      currentFileSliceLimit = nextVal;
      document.getElementById('fileSliceCountInput').value = currentFileSliceLimit;
      updateFileDoughnutChart();
    }
  }

  function setFileSliceLimit(val) {
    const num = parseInt(val, 10);
    currentFileSliceLimit = (!isNaN(num) && num >= 2) ? num : 2;
    document.getElementById('fileSliceCountInput').value = currentFileSliceLimit;
    updateFileDoughnutChart();
  }

  function loadReportFilterState() {
    const overrideSaved = localStorage.getItem(`polyglotminer_override_${REPO_SLUG}`);
    if (overrideSaved) {
      isCustomOverride = true;
      try {
        activeLanguageMap = JSON.parse(overrideSaved);
      } catch (e) {
        setDefaultReportFilter();
      }
    } else {
      isCustomOverride = false;
      const globalSaved = localStorage.getItem('polyglotminer_global_language_filter');
      let loaded = false;
      if (globalSaved) {
        try {
          const parsed = JSON.parse(globalSaved);
          if (parsed && typeof parsed === 'object' && Object.keys(parsed).length > 0) {
            const hasAnyEnabled = Object.values(parsed).some(v => v === true);
            if (hasAnyEnabled) {
              activeLanguageMap = {};
              REPO_LANGUAGES.forEach(l => {
                activeLanguageMap[l.name] = (parsed[l.name] !== undefined) ? Boolean(parsed[l.name]) : (l.category === 'Programming');
              });
              loaded = true;
            }
          }
        } catch (e) {}
      }
      if (!loaded) {
        setDefaultReportFilter();
      }
    }
  }

  function setDefaultReportFilter() {
    activeLanguageMap = {};
    let progCount = 0;
    REPO_LANGUAGES.forEach(l => {
      const isProg = (l.category === 'Programming');
      if (isProg) progCount++;
      activeLanguageMap[l.name] = isProg;
    });
    if (progCount === 0) {
      REPO_LANGUAGES.forEach(l => {
        activeLanguageMap[l.name] = true;
      });
    }
  }

  function openFilterModal() {
    const overrideCard = document.getElementById('overrideNoticeCard');
    const overrideToggle = document.getElementById('overrideToggle');
    const resetBtn = document.getElementById('resetOverrideBtn');

    if (overrideCard) overrideCard.style.display = 'block';
    if (overrideToggle) overrideToggle.checked = isCustomOverride;
    if (resetBtn) resetBtn.style.display = isCustomOverride ? 'inline-block' : 'none';

    renderModalChecklist();
    document.getElementById('filterModal').style.display = 'flex';
  }

  function closeFilterModal() {
    document.getElementById('filterModal').style.display = 'none';
  }

  function toggleReportOverride(checked) {
    isCustomOverride = checked;
    const resetBtn = document.getElementById('resetOverrideBtn');
    if (resetBtn) resetBtn.style.display = isCustomOverride ? 'inline-block' : 'none';
  }

  function resetToGlobalFilters() {
    isCustomOverride = false;
    localStorage.removeItem(`polyglotminer_override_${REPO_SLUG}`);
    loadReportFilterState();
    const overrideToggle = document.getElementById('overrideToggle');
    const resetBtn = document.getElementById('resetOverrideBtn');
    if (overrideToggle) overrideToggle.checked = false;
    if (resetBtn) resetBtn.style.display = 'none';
    renderModalChecklist();
  }

  function renderModalChecklist() {
    const container = document.getElementById('modalFilterBody');
    container.innerHTML = '';

    const categories = ['Programming', 'Data', 'Markup', 'Config', 'Other'];
    const grouped = {};

    categories.forEach(c => grouped[c] = []);
    REPO_LANGUAGES.forEach(l => {
      const cat = grouped[l.category] ? l.category : 'Other';
      grouped[cat].push(l);
    });

    categories.forEach(cat => {
      const langs = grouped[cat];
      if (langs.length === 0) return;

      const groupEl = document.createElement('div');
      groupEl.className = 'category-group';

      const allEnabled = langs.every(l => activeLanguageMap[l.name]);
      const catEmoji = cat === 'Programming' ? '💻' : (cat === 'Data' ? '🗄️' : (cat === 'Markup' ? '🎨' : '⚙️'));

      groupEl.innerHTML = `
        <div class="category-group-header" onclick="toggleCategoryGroup('${cat}')">
          <label style="display: flex; align-items: center; gap: 0.5rem; cursor: pointer; margin: 0;" onclick="event.stopPropagation()">
            <input type="checkbox" id="cat-chk-${cat}" ${allEnabled ? 'checked' : ''} onchange="onCategoryCheckboxChange('${cat}', this.checked)">
            <span style="font-weight: 700; font-size: 0.88rem; color: #0f172a;">${catEmoji} ${cat}</span>
            <span class="badge" style="font-size: 0.7rem;">${langs.length} type${langs.length > 1 ? 's' : ''}</span>
          </label>
          <span style="font-size: 0.78rem; color: var(--text-muted);">Click to toggle all</span>
        </div>
        <div class="lang-checkbox-grid" id="grid-${cat}">
          ${langs.map(l => `
            <label class="lang-item-label">
              <input type="checkbox" class="lang-chk" data-lang="${l.name}" data-cat="${cat}" ${activeLanguageMap[l.name] ? 'checked' : ''} onchange="onSingleLangCheckboxChange()">
              <span class="lang-dot" style="background-color: ${l.color};"></span>
              <span style="font-weight: 600; font-size: 0.84rem; flex: 1;">${l.name}</span>
              <span style="font-size: 0.72rem; color: var(--text-muted);">${l.code_lines.toLocaleString()} LOC</span>
            </label>
          `).join('')}
        </div>
      `;

      container.appendChild(groupEl);
    });

    updateModalSummary();
  }

  function onCategoryCheckboxChange(cat, isChecked) {
    const grid = document.getElementById(`grid-${cat}`);
    if (grid) {
      grid.querySelectorAll('.lang-chk').forEach(chk => {
        chk.checked = isChecked;
      });
    }
    updateModalSummary();
  }

  function toggleCategoryGroup(cat) {
    const catChk = document.getElementById(`cat-chk-${cat}`);
    if (catChk) {
      catChk.checked = !catChk.checked;
      onCategoryCheckboxChange(cat, catChk.checked);
    }
  }

  function onSingleLangCheckboxChange() {
    ['Programming', 'Data', 'Markup', 'Config', 'Other'].forEach(cat => {
      const catChk = document.getElementById(`cat-chk-${cat}`);
      const grid = document.getElementById(`grid-${cat}`);
      if (catChk && grid) {
        const langChks = Array.from(grid.querySelectorAll('.lang-chk'));
        if (langChks.length > 0) {
          catChk.checked = langChks.every(c => c.checked);
        }
      }
    });
    updateModalSummary();
  }

  function applyPreset(preset) {
    const chks = document.querySelectorAll('#modalFilterBody .lang-chk');
    chks.forEach(chk => {
      const cat = chk.getAttribute('data-cat');
      if (preset === 'prog') {
        chk.checked = (cat === 'Programming');
      } else if (preset === 'all') {
        chk.checked = true;
      } else if (preset === 'no-data') {
        chk.checked = (cat !== 'Data');
      } else if (preset === 'clear') {
        chk.checked = false;
      }
    });
    onSingleLangCheckboxChange();
  }

  function updateModalSummary() {
    const chks = document.querySelectorAll('#modalFilterBody .lang-chk');
    let enabledCount = 0;
    let enabledLOC = 0;

    chks.forEach(chk => {
      if (chk.checked) {
        enabledCount++;
        const langName = chk.getAttribute('data-lang');
        const langObj = REPO_LANGUAGES.find(l => l.name === langName);
        if (langObj) enabledLOC += langObj.code_lines;
      }
    });

    const summaryEl = document.getElementById('modalSummaryText');
    if (summaryEl) {
      summaryEl.innerHTML = `<strong>${enabledCount} of ${REPO_LANGUAGES.length}</strong> types selected (${enabledLOC.toLocaleString()} code LOC)`;
    }
  }

  function saveAndApplyModalFilters() {
    const chks = document.querySelectorAll('#modalFilterBody .lang-chk');
    chks.forEach(chk => {
      const lang = chk.getAttribute('data-lang');
      activeLanguageMap[lang] = chk.checked;
    });

    if (isCustomOverride) {
      localStorage.setItem(`polyglotminer_override_${REPO_SLUG}`, JSON.stringify(activeLanguageMap));
    } else {
      localStorage.removeItem(`polyglotminer_override_${REPO_SLUG}`);
      const globalSaved = localStorage.getItem('polyglotminer_global_language_filter');
      const globalMap = globalSaved ? JSON.parse(globalSaved) : {};
      Object.assign(globalMap, activeLanguageMap);
      localStorage.setItem('polyglotminer_global_language_filter', JSON.stringify(globalMap));
    }

    closeFilterModal();
    renderDynamicReport();
    renderFileExplorerTable();
  }

  // Interactive Table Column Sorting
  function sortTable(key) {
    if (currentSortKey === key) {
      currentSortDir = (currentSortDir === 'asc') ? 'desc' : 'asc';
    } else {
      currentSortKey = key;
      currentSortDir = (key === 'name' || key === 'category') ? 'asc' : 'desc';
    }
    renderDynamicReport();
  }

  function updateSortHeaderIcons() {
    const cols = ['name', 'category', 'file_count', 'code_lines', 'comment_lines', 'blank_lines', 'total_lines'];
    cols.forEach(c => {
      const th = document.getElementById(`th-${c}`);
      const icon = document.getElementById(`icon-${c}`);
      if (th && icon) {
        if (currentSortKey === c) {
          th.classList.add('sorted');
          icon.textContent = currentSortDir === 'asc' ? '▲' : '▼';
        } else {
          th.classList.remove('sorted');
          icon.textContent = '↕';
        }
      }
    });
  }

  // Get active languages
  function getActiveFilteredLanguages() {
    const active = [];
    REPO_LANGUAGES.forEach(lang => {
      if (activeLanguageMap[lang.name]) {
        active.push(lang);
      }
    });
    return active;
  }

  // Update Doughnut Chart (Language Share LOC) with Telemetry Center
  function updateDoughnutChart() {
    const activeLangs = getActiveFilteredLanguages();
    activeLangs.sort((a, b) => b.code_lines - a.code_lines);

    const totalActive = activeLangs.length;
    const K = currentSliceLimit;

    let chartLabels = [];
    let chartData = [];
    let chartColors = [];

    if (totalActive <= K) {
      chartLabels = activeLangs.map(l => l.name);
      chartData = activeLangs.map(l => l.code_lines);
      chartColors = activeLangs.map(l => l.color);
    } else {
      const topCount = K - 1;
      const topLangs = activeLangs.slice(0, topCount);
      const otherLangs = activeLangs.slice(topCount);

      chartLabels = topLangs.map(l => l.name);
      chartData = topLangs.map(l => l.code_lines);
      chartColors = topLangs.map(l => l.color);

      const otherLOC = otherLangs.reduce((sum, l) => sum + l.code_lines, 0);
      chartLabels.push(`Other (${otherLangs.length} types)`);
      chartData.push(otherLOC);
      chartColors.push('#94a3b8');
    }

    const centerValEl = document.getElementById('langCenterVal');
    const centerSubEl = document.getElementById('langCenterSub');
    if (centerValEl) centerValEl.textContent = currentTotCode.toLocaleString();
    if (centerSubEl) centerSubEl.textContent = 'Code LOC';

    if (doughnutChart) {
      doughnutChart.data.labels = chartLabels;
      doughnutChart.data.datasets[0].data = chartData;
      doughnutChart.data.datasets[0].backgroundColor = chartColors;
      doughnutChart.update();
    } else {
      const ctx = document.getElementById('langDoughnutChart');
      if (ctx) {
        doughnutChart = new Chart(ctx, {
          type: 'doughnut',
          data: {
            labels: chartLabels,
            datasets: [{
              data: chartData,
              backgroundColor: chartColors,
              borderWidth: 2,
              borderColor: '#ffffff',
              hoverOffset: 6
            }]
          },
          options: {
            responsive: true,
            onHover: (event, activeElements) => {
              if (activeElements && activeElements.length > 0) {
                const idx = activeElements[0].index;
                const lbl = doughnutChart.data.labels[idx];
                const val = doughnutChart.data.datasets[0].data[idx];
                const tot = doughnutChart.data.datasets[0].data.reduce((a, b) => a + b, 0);
                const pct = tot > 0 ? ((val / tot) * 100).toFixed(1) : 0;
                if (centerValEl) centerValEl.textContent = `${pct}%`;
                if (centerSubEl) centerSubEl.textContent = lbl;
              } else {
                if (centerValEl) centerValEl.textContent = currentTotCode.toLocaleString();
                if (centerSubEl) centerSubEl.textContent = 'Code LOC';
              }
            },
            plugins: {
              legend: {
                position: 'bottom',
                labels: {
                  color: '#475569',
                  font: { family: "'Plus Jakarta Sans', sans-serif", size: 11, weight: '600' },
                  padding: 8,
                  usePointStyle: true,
                  pointStyle: 'circle'
                }
              }
            },
            cutout: '72%'
          }
        });
      }
    }
  }

  // Update File Count Doughnut Chart with Telemetry Center
  function updateFileDoughnutChart() {
    const activeLangs = getActiveFilteredLanguages();
    activeLangs.sort((a, b) => b.file_count - a.file_count);

    const totalActive = activeLangs.length;
    const K = currentFileSliceLimit;

    let chartLabels = [];
    let chartData = [];
    let chartColors = [];

    if (totalActive <= K) {
      chartLabels = activeLangs.map(l => l.name);
      chartData = activeLangs.map(l => l.file_count);
      chartColors = activeLangs.map(l => l.color);
    } else {
      const topCount = K - 1;
      const topLangs = activeLangs.slice(0, topCount);
      const otherLangs = activeLangs.slice(topCount);

      chartLabels = topLangs.map(l => l.name);
      chartData = topLangs.map(l => l.file_count);
      chartColors = topLangs.map(l => l.color);

      const otherFiles = otherLangs.reduce((sum, l) => sum + l.file_count, 0);
      chartLabels.push(`Other (${otherLangs.length} types)`);
      chartData.push(otherFiles);
      chartColors.push('#94a3b8');
    }

    const centerValEl = document.getElementById('fileCenterVal');
    const centerSubEl = document.getElementById('fileCenterSub');
    if (centerValEl) centerValEl.textContent = currentTotFiles.toLocaleString();
    if (centerSubEl) centerSubEl.textContent = 'Total Files';

    if (fileDoughnutChart) {
      fileDoughnutChart.data.labels = chartLabels;
      fileDoughnutChart.data.datasets[0].data = chartData;
      fileDoughnutChart.data.datasets[0].backgroundColor = chartColors;
      fileDoughnutChart.update();
    } else {
      const ctxFile = document.getElementById('fileDoughnutChart');
      if (ctxFile) {
        fileDoughnutChart = new Chart(ctxFile, {
          type: 'doughnut',
          data: {
            labels: chartLabels,
            datasets: [{
              data: chartData,
              backgroundColor: chartColors,
              borderWidth: 2,
              borderColor: '#ffffff',
              hoverOffset: 6
            }]
          },
          options: {
            responsive: true,
            onHover: (event, activeElements) => {
              if (activeElements && activeElements.length > 0) {
                const idx = activeElements[0].index;
                const lbl = fileDoughnutChart.data.labels[idx];
                const val = fileDoughnutChart.data.datasets[0].data[idx];
                const tot = fileDoughnutChart.data.datasets[0].data.reduce((a, b) => a + b, 0);
                const pct = tot > 0 ? ((val / tot) * 100).toFixed(1) : 0;
                if (centerValEl) centerValEl.textContent = `${pct}%`;
                if (centerSubEl) centerSubEl.textContent = lbl;
              } else {
                if (centerValEl) centerValEl.textContent = currentTotFiles.toLocaleString();
                if (centerSubEl) centerSubEl.textContent = 'Total Files';
              }
            },
            plugins: {
              legend: {
                position: 'bottom',
                labels: {
                  color: '#475569',
                  font: { family: "'Plus Jakarta Sans', sans-serif", size: 11, weight: '600' },
                  padding: 8,
                  usePointStyle: true,
                  pointStyle: 'circle'
                }
              },
              tooltip: {
                callbacks: {
                  label: function(context) {
                    const label = context.label || '';
                    const val = context.raw || 0;
                    const total = context.dataset.data.reduce((a, b) => a + b, 0);
                    const pct = total > 0 ? ((val / total) * 100).toFixed(1) : 0;
                    return ` ${label}: ${val.toLocaleString()} files (${pct}%)`;
                  }
                }
              }
            },
            cutout: '72%'
          }
        });
      }
    }
  }

  // Single Report Dynamic Recalculation Engine
  function renderDynamicReport() {
    const filteredLangs = getActiveFilteredLanguages();
    let totFiles = 0;
    let totCode = 0;
    let totComments = 0;
    let totBlanks = 0;
    let totLines = 0;

    filteredLangs.forEach(lang => {
      totFiles += lang.file_count;
      totCode += lang.code_lines;
      totComments += lang.comment_lines;
      totBlanks += lang.blank_lines;
      totLines += lang.total_lines;
    });

    currentTotCode = totCode;
    currentTotFiles = totFiles;
    currentTotLines = totLines;

    // Apply Sorting to table rows
    filteredLangs.sort((a, b) => {
      let valA = a[currentSortKey];
      let valB = b[currentSortKey];

      if (typeof valA === 'string') {
        return currentSortDir === 'asc'
          ? valA.localeCompare(valB)
          : valB.localeCompare(valA);
      }
      return currentSortDir === 'asc' ? valA - valB : valB - valA;
    });

    updateSortHeaderIcons();

    // Badges & Override Status
    const overrideBadge = document.getElementById('overrideStatusBadge');
    const reportFilterBadge = document.getElementById('reportFilterBadge');
    const navFilterBadge = document.getElementById('navFilterBadge');

    if (overrideBadge) overrideBadge.style.display = isCustomOverride ? 'inline-flex' : 'none';

    const activeCount = filteredLangs.length;
    const badgeText = (activeCount === REPO_LANGUAGES.length) ? 'All Types' :
                      (activeCount === 0 ? 'None' :
                      (activeLanguageMap['JSON'] === false && activeLanguageMap['Java'] ? 'Code Only' : `${activeCount} Types`));

    if (reportFilterBadge) reportFilterBadge.textContent = badgeText;
    if (navFilterBadge) navFilterBadge.textContent = badgeText;

    // Update KPI cards
    document.getElementById('kpi-files').textContent = totFiles.toLocaleString();
    document.getElementById('kpi-langs-sub').textContent = `${filteredLangs.length} active language${filteredLangs.length === 1 ? '' : 's'}`;

    document.getElementById('kpi-code').textContent = totCode.toLocaleString();
    const codePct = totLines > 0 ? ((totCode / totLines) * 100).toFixed(1) : 0;
    document.getElementById('kpi-code-sub').textContent = `${codePct}% of active physical lines`;

    document.getElementById('kpi-comments').textContent = totComments.toLocaleString();
    const commentDensity = (totCode + totComments) > 0 ? ((totComments / (totCode + totComments)) * 100).toFixed(1) : 0;
    document.getElementById('kpi-comments-sub').textContent = `${commentDensity}% comment density`;

    document.getElementById('kpi-total').textContent = totLines.toLocaleString();
    document.getElementById('kpi-blanks-sub').textContent = `${totBlanks.toLocaleString()} blank lines`;

    // Render Mini Bar
    const barEl = document.getElementById('reportLangBar');
    const badgesEl = document.getElementById('reportLangBadges');
    barEl.innerHTML = '';
    badgesEl.innerHTML = '';

    if (totCode > 0) {
      filteredLangs.forEach(lang => {
        const pct = ((lang.code_lines / totCode) * 100).toFixed(1);
        if (pct > 0) {
          const seg = document.createElement('div');
          seg.className = 'lang-bar-segment';
          seg.style.width = `${pct}%`;
          seg.style.backgroundColor = lang.color;
          seg.title = `${lang.name}: ${pct}% (${lang.code_lines.toLocaleString()} code LOC)`;
          barEl.appendChild(seg);

          if (pct >= 0.2) {
            const badge = document.createElement('div');
            badge.style.display = 'flex';
            badge.style.alignItems = 'center';
            badge.style.gap = '0.4rem';
            badge.innerHTML = `
              <span class="lang-dot" style="background-color: ${lang.color};"></span>
              <span style="font-weight: 600; color: #1e293b;">${lang.name}</span>
              <span style="color: var(--text-muted); font-size: 0.8rem;">${pct}%</span>
            `;
            badgesEl.appendChild(badge);
          }
        }
      });
    }

    // Update Doughnut Charts with Slices Limit & Center Gauges
    updateDoughnutChart();
    updateFileDoughnutChart();

    // Update Line Composition Chart with Center Gauge
    const lineCenterValEl = document.getElementById('lineCompCenterVal');
    const lineCenterSubEl = document.getElementById('lineCompCenterSub');
    if (lineCenterValEl) lineCenterValEl.textContent = totLines.toLocaleString();
    if (lineCenterSubEl) lineCenterSubEl.textContent = 'Total Lines';

    if (lineCompChart) {
      lineCompChart.data.datasets[0].data = [totCode, totComments, totBlanks];
      lineCompChart.update();
    } else {
      const ctxComp = document.getElementById('lineCompositionChart');
      if (ctxComp) {
        lineCompChart = new Chart(ctxComp, {
          type: 'doughnut',
          data: {
            labels: ['Code LOC', 'Comments', 'Blank Lines'],
            datasets: [{
              data: [totCode, totComments, totBlanks],
              backgroundColor: ['#059669', '#0284c7', '#94a3b8'],
              borderWidth: 2,
              borderColor: '#ffffff',
              hoverOffset: 6
            }]
          },
          options: {
            responsive: true,
            onHover: (event, activeElements) => {
              if (activeElements && activeElements.length > 0) {
                const idx = activeElements[0].index;
                const lbl = lineCompChart.data.labels[idx];
                const val = lineCompChart.data.datasets[0].data[idx];
                const tot = lineCompChart.data.datasets[0].data.reduce((a, b) => a + b, 0);
                const pct = tot > 0 ? ((val / tot) * 100).toFixed(1) : 0;
                if (lineCenterValEl) lineCenterValEl.textContent = `${pct}%`;
                if (lineCenterSubEl) lineCenterSubEl.textContent = lbl;
              } else {
                if (lineCenterValEl) lineCenterValEl.textContent = totLines.toLocaleString();
                if (lineCenterSubEl) lineCenterSubEl.textContent = 'Total Lines';
              }
            },
            plugins: {
              legend: {
                position: 'bottom',
                labels: {
                  color: '#475569',
                  font: { family: "'Plus Jakarta Sans', sans-serif", size: 11, weight: '600' },
                  padding: 8,
                  usePointStyle: true,
                  pointStyle: 'circle'
                }
              }
            },
            cutout: '72%'
          }
        });
      }
    }

    // Update Languages Breakdown Table Rows
    const tbody = document.querySelector('#languagesTable tbody');
    tbody.innerHTML = '';
    document.getElementById('tableLangCount').textContent = `(${filteredLangs.length} active)`;

    filteredLangs.forEach(lang => {
      const filePct = totFiles > 0 ? ((lang.file_count / totFiles) * 100).toFixed(1) : 0;
      const codeShare = totCode > 0 ? ((lang.code_lines / totCode) * 100).toFixed(1) : 0;

      const tr = document.createElement('tr');
      tr.innerHTML = `
        <td>
          <div style="display: flex; align-items: center; gap: 0.55rem;">
            <span class="lang-dot" style="background-color: ${lang.color};"></span>
            <strong style="color: #0f172a;">${lang.name}</strong>
          </div>
        </td>
        <td><span class="badge">${lang.category}</span></td>
        <td style="text-align: right; font-weight: 600;">${lang.file_count.toLocaleString()}</td>
        <td style="text-align: right; color: var(--text-muted);">${filePct}%</td>
        <td style="text-align: right; font-weight: 700; color: #047857;">${lang.code_lines.toLocaleString()}</td>
        <td style="text-align: right; color: #0284c7;">${lang.comment_lines.toLocaleString()}</td>
        <td style="text-align: right; color: var(--text-muted);">${lang.blank_lines.toLocaleString()}</td>
        <td style="text-align: right; font-weight: 600; color: #1e293b;">${lang.total_lines.toLocaleString()}</td>
        <td style="text-align: right;">
          <div style="display: flex; align-items: center; justify-content: flex-end; gap: 0.5rem;">
            <span style="font-weight: 700; color: #0f172a;">${codeShare}%</span>
            <div style="width: 48px; height: 6px; background: var(--border-subtle); border-radius: 3px; overflow: hidden;">
              <div style="width: ${codeShare}%; height: 100%; background: ${lang.color};"></div>
            </div>
          </div>
        </td>
      `;
      tbody.appendChild(tr);
    });

    // Update filter pills in file explorer
    REPO_LANGUAGES.forEach(lang => {
      const pill = document.getElementById(`pill-${lang.name}`);
      if (pill) {
        pill.style.display = activeLanguageMap[lang.name] ? 'inline-flex' : 'none';
      }
    });
  }

  // --- Interactive File Explorer Engine (Sorting, Filtering, Pagination, Copy) ---
  let fileSortKey = 'code_lines';
  let fileSortDir = 'desc';
  let fileCurrentPage = 1;
  let filePageSize = 50;
  let fileSearchQuery = '';
  let fileActiveLang = '';

  function sortFilesTable(key) {
    if (fileSortKey === key) {
      fileSortDir = (fileSortDir === 'asc') ? 'desc' : 'asc';
    } else {
      fileSortKey = key;
      fileSortDir = (key === 'relative_path' || key === 'language') ? 'asc' : 'desc';
    }
    fileCurrentPage = 1;
    renderFileExplorerTable();
  }

  function updateFileSortIcons() {
    const cols = ['relative_path', 'language', 'code_lines', 'comment_lines', 'blank_lines', 'total_lines', 'size_bytes'];
    cols.forEach(c => {
      const th = document.getElementById(`th-file-${c}`);
      const icon = document.getElementById(`icon-file-${c}`);
      if (th && icon) {
        if (fileSortKey === c) {
          th.classList.add('sorted');
          icon.textContent = fileSortDir === 'asc' ? '▲' : '▼';
        } else {
          th.classList.remove('sorted');
          icon.textContent = '↕';
        }
      }
    });
  }

  function onFileSearchInput() {
    fileSearchQuery = document.getElementById('fileSearchInput').value.toLowerCase().trim();
    fileCurrentPage = 1;
    renderFileExplorerTable();
  }

  function onLangSelectChange(val) {
    fileActiveLang = val;
    updatePills(fileActiveLang);
    fileCurrentPage = 1;
    renderFileExplorerTable();
  }

  function onLangPillClick(lang) {
    fileActiveLang = lang;
    const select = document.getElementById('langFilterSelect');
    if (select) select.value = lang;
    updatePills(lang);
    fileCurrentPage = 1;
    renderFileExplorerTable();
  }

  function updatePills(selected) {
    document.querySelectorAll('#langPills .filter-pill').forEach(p => {
      if (p.getAttribute('data-lang') === selected) {
        p.classList.add('active');
      } else {
        p.classList.remove('active');
      }
    });
  }

  function setFilePageSize(val) {
    filePageSize = (val === 'all') ? 999999 : (parseInt(val, 10) || 50);
    fileCurrentPage = 1;
    renderFileExplorerTable();
  }

  function changeFilePage(delta) {
    fileCurrentPage += delta;
    renderFileExplorerTable();
  }

  function goToPage(p) {
    fileCurrentPage = p;
    renderFileExplorerTable();
  }

  function copyFilePath(path, btnEl) {
    navigator.clipboard.writeText(path).then(() => {
      const origText = btnEl.innerHTML;
      btnEl.innerHTML = '✓ Copied!';
      btnEl.style.color = '#15803d';
      btnEl.style.backgroundColor = '#dcfce7';
      setTimeout(() => {
        btnEl.innerHTML = origText;
        btnEl.style.color = '';
        btnEl.style.backgroundColor = '';
      }, 1800);
    });
  }

  function renderFileExplorerTable() {
    updateFileSortIcons();

    // Filter ALL_FILES_DATA
    const filteredFiles = ALL_FILES_DATA.filter(file => {
      const isLangActive = (activeLanguageMap[file.language] === true);
      const matchesSearch = !fileSearchQuery || file.relative_path.toLowerCase().includes(fileSearchQuery);
      const matchesLang = !fileActiveLang || file.language === fileActiveLang;
      return isLangActive && matchesSearch && matchesLang;
    });

    // Sort filtered files
    filteredFiles.sort((a, b) => {
      let valA = a[fileSortKey];
      let valB = b[fileSortKey];

      if (typeof valA === 'string') {
        return fileSortDir === 'asc' ? valA.localeCompare(valB) : valB.localeCompare(valA);
      }
      return fileSortDir === 'asc' ? valA - valB : valB - valA;
    });

    const totalCount = filteredFiles.length;
    const badgeEl = document.getElementById('fileCountBadge');
    if (badgeEl) {
      badgeEl.textContent = `Showing ${totalCount.toLocaleString()} file${totalCount === 1 ? '' : 's'}`;
    }

    // Pagination calculations
    const effectivePageSize = (filePageSize === 999999) ? (totalCount || 1) : filePageSize;
    const totalPages = Math.max(1, Math.ceil(totalCount / effectivePageSize));

    if (fileCurrentPage > totalPages) fileCurrentPage = totalPages;
    if (fileCurrentPage < 1) fileCurrentPage = 1;

    const startIdx = (fileCurrentPage - 1) * effectivePageSize;
    const pageFiles = filteredFiles.slice(startIdx, startIdx + effectivePageSize);

    const tbody = document.getElementById('fileExplorerTbody');
    if (!tbody) return;
    tbody.innerHTML = '';

    if (pageFiles.length === 0) {
      tbody.innerHTML = `
        <tr>
          <td colspan="8" style="text-align: center; padding: 2rem; color: var(--text-muted);">
            No matching files found for the active search and language filters.
          </td>
        </tr>
      `;
    } else {
      pageFiles.forEach(file => {
        const langObj = SNAPSHOT.languages[file.language];
        const langColor = langObj ? langObj.color : '#94a3b8';

        let sizeFormatted = '';
        if (file.size_bytes < 1024) {
          sizeFormatted = `${file.size_bytes} B`;
        } else if (file.size_bytes < 1048576) {
          sizeFormatted = `${(file.size_bytes / 1024).toFixed(1)} KB`;
        } else {
          sizeFormatted = `${(file.size_bytes / 1048576).toFixed(1)} MB`;
        }

        const tr = document.createElement('tr');
        tr.innerHTML = `
          <td>
            <div style="display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;">
              <span class="mono" style="color: #1e293b; font-weight: 500; word-break: break-all;">${file.relative_path}</span>
            </div>
          </td>
          <td>
            <span class="badge">
              <span class="lang-dot" style="background-color: ${langColor};"></span>
              ${file.language}
            </span>
          </td>
          <td style="text-align: right; color: #047857; font-weight: 700;">${file.code_lines.toLocaleString()}</td>
          <td style="text-align: right; color: #0284c7;">${file.comment_lines.toLocaleString()}</td>
          <td style="text-align: right; color: var(--text-muted);">${file.blank_lines.toLocaleString()}</td>
          <td style="text-align: right; font-weight: 600; color: #0f172a;">${file.total_lines.toLocaleString()}</td>
          <td style="text-align: right; color: var(--text-muted); font-size: 0.8rem;">${sizeFormatted}</td>
          <td style="text-align: center;">
            <button type="button" class="copy-path-btn" onclick="copyFilePath('${file.relative_path.replace(/'/g, "\\'")}', this)" title="Copy relative path">
              <svg width="12" height="12" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3"/></svg>
              Copy
            </button>
          </td>
        `;
        tbody.appendChild(tr);
      });
    }

    // Update Pagination UI
    const infoEl = document.getElementById('paginationInfo');
    if (infoEl) {
      const from = totalCount === 0 ? 0 : startIdx + 1;
      const to = Math.min(startIdx + effectivePageSize, totalCount);
      infoEl.textContent = `Showing ${from}–${to} of ${totalCount.toLocaleString()} files (Page ${fileCurrentPage} of ${totalPages})`;
    }

    const prevBtn = document.getElementById('prevPageBtn');
    const nextBtn = document.getElementById('nextPageBtn');
    if (prevBtn) prevBtn.disabled = (fileCurrentPage <= 1);
    if (nextBtn) nextBtn.disabled = (fileCurrentPage >= totalPages);

    const pagesContainer = document.getElementById('paginationPageNumbers');
    if (pagesContainer) {
      pagesContainer.innerHTML = '';
      if (totalPages <= 7) {
        for (let p = 1; p <= totalPages; p++) {
          const btn = document.createElement('button');
          btn.className = `page-num-btn ${p === fileCurrentPage ? 'active' : ''}`;
          btn.textContent = p;
          btn.onclick = () => goToPage(p);
          pagesContainer.appendChild(btn);
        }
      } else {
        // Dynamic truncated pagination: 1, current-1, current, current+1, total
        const pagesToShow = new Set([1, fileCurrentPage - 1, fileCurrentPage, fileCurrentPage + 1, totalPages]);
        let lastP = 0;
        Array.from(pagesToShow).sort((a, b) => a - b).forEach(p => {
          if (p >= 1 && p <= totalPages) {
            if (lastP > 0 && p - lastP > 1) {
              const dots = document.createElement('span');
              dots.style.padding = '0 0.2rem';
              dots.style.color = 'var(--text-muted)';
              dots.textContent = '…';
              pagesContainer.appendChild(dots);
            }
            const btn = document.createElement('button');
            btn.className = `page-num-btn ${p === fileCurrentPage ? 'active' : ''}`;
            btn.textContent = p;
            btn.onclick = () => goToPage(p);
            pagesContainer.appendChild(btn);
            lastP = p;
          }
        });
      }
    }
  }

  // ESC shortcut to close modal
  document.addEventListener('keydown', (e) => {
    if (e.key === 'Escape') closeFilterModal();
  });

  // Initial Boot
  loadReportFilterState();
  renderDynamicReport();
  renderFileExplorerTable();
</script>
{% endblock %}