{% extends "base.html" %}

{% block title %}PolyglotMiner — Polyglot Discovery{% endblock %}

{% block extra_head %}
<style>
  :root {
    --corpus-border: #e2e8f0;
    --corpus-border-subtle: #f1f5f9;
    --corpus-bg-subtle: #f8fafc;
    --corpus-text-main: #0f172a;
    --corpus-text-muted: #64748b;
  }

  @keyframes shimmer-wave {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
  }
  .skeleton-shimmer {
    background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
    background-size: 200% 100%;
    animation: shimmer-wave 1.6s infinite ease-in-out;
    border-radius: 4px;
  }

  .discovery-panel {
    background: #ffffff;
    border: 1px solid var(--corpus-border);
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02), 0 1px 2px rgba(0, 0, 0, 0.02);
    width: 100%;
    box-sizing: border-box;
  }

  .filter-control {
    height: 34px;
    padding: 0 0.65rem;
    background: #ffffff;
    border: 1px solid var(--corpus-border);
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--corpus-text-main);
    outline: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
    transition: all 0.15s ease;
    box-sizing: border-box;
  }
  .filter-control:hover:not(:disabled) {
    border-color: #94a3b8;
  }
  .filter-control:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
  }
  select.filter-control {
    padding-right: 1.75rem;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.55rem center;
    background-size: 11px 11px;
    cursor: pointer;
  }

  /* Clean Minimalist Status Badges */
  .status-badge {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    white-space: nowrap;
    line-height: 1.25;
    border: 1px solid transparent;
  }
  .status-badge.confirmed {
    background: #f0fdf4;
    color: #166534;
    border-color: #bbf7d0;
  }
  .status-badge.displacement {
    background: #fef2f2;
    color: #991b1b;
    border-color: #fecaca;
  }
  .status-badge.evolution {
    background: #faf5ff;
    color: #6b21a8;
    border-color: #e9d5ff;
  }
  .status-badge.scanned {
    background: #eff6ff;
    color: #1e40af;
    border-color: #bfdbfe;
  }
  .status-badge.unanalyzed {
    background: #f8fafc;
    color: #64748b;
    border-color: #e2e8f0;
  }

  /* Clean Table Styling */
  .corpus-table-wrapper {
    width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
  }

  .corpus-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    text-align: left;
    margin: 0;
  }
  .corpus-table th {
    padding: 0.65rem 0.75rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #64748b;
    background: #fafafa;
    border-bottom: 1px solid var(--corpus-border);
    box-sizing: border-box;
  }
  .corpus-table td {
    padding: 0.65rem 0.75rem;
    vertical-align: middle;
    border-bottom: 1px solid var(--corpus-border-subtle);
    box-sizing: border-box;
  }
  .corpus-row {
    transition: background-color 0.1s ease;
  }
  .corpus-row:hover {
    background-color: #f8fafc;
  }
  .corpus-row:last-child td {
    border-bottom: none;
  }

  .repo-avatar {
    width: 26px;
    height: 26px;
    border-radius: 5px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    object-fit: cover;
    background: #f1f5f9;
    flex-shrink: 0;
  }

  /* Compact Professional Action Buttons */
  .btn-action-compact {
    height: 25px;
    padding: 0 0.45rem;
    font-size: 0.72rem;
    font-weight: 600;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    text-decoration: none;
    border: 1px solid var(--corpus-border);
    background: #ffffff;
    color: #334155;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.12s ease;
  }
  .btn-action-compact:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
    color: #0f172a;
  }
  .btn-action-compact.primary {
    background: #f0fdf4;
    color: #166534;
    border-color: #bbf7d0;
  }
  .btn-action-compact.primary:hover {
    background: #dcfce7;
    border-color: #86efac;
  }

  /* Composition Segmented Bar */
  .composition-bar {
    width: 100%;
    height: 4px;
    background: #e2e8f0;
    border-radius: 9999px;
    overflow: hidden;
    display: flex;
    margin-top: 0.25rem;
  }

  .mono-num {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
    font-family: var(--font-mono, monospace);
  }

  /* Pagination Bar */
  .pagination-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.65rem 1.25rem;
    background: #fafafa;
    border-top: 1px solid var(--corpus-border);
    font-size: 0.78rem;
    color: #64748b;
    flex-wrap: wrap;
    gap: 0.6rem;
  }
  .pagination-pages {
    display: flex;
    align-items: center;
    gap: 0.2rem;
  }
  .page-btn {
    height: 26px;
    min-width: 26px;
    padding: 0 0.35rem;
    border: 1px solid var(--corpus-border);
    background: #ffffff;
    color: #334155;
    border-radius: 4px;
    font-size: 0.74rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.12s ease;
  }
  .page-btn:hover:not(:disabled) {
    background: #f1f5f9;
    border-color: #cbd5e1;
    color: #0f172a;
  }
  .page-btn.active {
    background: #2563eb;
    color: #ffffff;
    border-color: #2563eb;
  }
  .page-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
  }
</style>
{% endblock %}

{% block content %}
<div style="width: 100%; box-sizing: border-box;">

  <!-- Clean Top Bar Header -->
  <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.25rem; flex-wrap: wrap; gap: 1rem;">
    <div>
      <h1 style="font-size: 1.5rem; font-weight: 700; color: #0f172a; letter-spacing: -0.02em; margin: 0 0 0.2rem 0;">
        Polyglot Discovery
      </h1>
      <p style="font-size: 0.84rem; color: #64748b; margin: 0;">
        Repository catalog, empirical composition, and status index across mined research projects.
      </p>
    </div>

    <!-- Stats Summary Strip -->
    <div style="display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;">
      <div style="padding: 0.35rem 0.75rem; background: #ffffff; border: 1px solid var(--corpus-border); border-radius: 6px; font-size: 0.78rem; display: flex; align-items: center; gap: 0.4rem;">
        <span style="color: #64748b;">Discovered:</span>
        <span class="mono-num" style="font-weight: 700; color: #0f172a;">{{ discovered_repos|length }}</span>
      </div>
      <div style="padding: 0.35rem 0.75rem; background: #ffffff; border: 1px solid var(--corpus-border); border-radius: 6px; font-size: 0.78rem; display: flex; align-items: center; gap: 0.4rem;">
        <span style="color: #64748b;">Scanned:</span>
        <span class="mono-num" style="font-weight: 700; color: #16a34a;">{{ scanned_count }}</span>
      </div>
      <div style="padding: 0.35rem 0.75rem; background: #ffffff; border: 1px solid var(--corpus-border); border-radius: 6px; font-size: 0.78rem; display: flex; align-items: center; gap: 0.4rem;">
        <span style="color: #64748b;">Evolutions:</span>
        <span class="mono-num" style="font-weight: 700; color: #7c3aed;">{{ evol_count }}</span>
      </div>
    </div>
  </div>

  <!-- Corpus Table Card -->
  <div class="discovery-panel" style="overflow: hidden;">
    
    <!-- Table Header Toolbar -->
    <div style="display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1rem; border-bottom: 1px solid var(--corpus-border); background: #ffffff; flex-wrap: wrap; gap: 0.6rem;">
      <div style="display: flex; align-items: center; gap: 0.5rem;">
        <span style="font-size: 0.88rem; font-weight: 700; color: #0f172a;">Repositories Corpus</span>
        <span class="mono-num" id="tableCountBadge" style="font-size: 0.74rem; background: #eff6ff; color: #2563eb; padding: 0.1rem 0.5rem; border-radius: 4px; font-weight: 700; border: 1px solid #bfdbfe;">
          {{ discovered_repos|length }}
        </span>
      </div>

      <!-- Toolbar Actions -->
      <div style="display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap;">

        <!-- Search Input -->
        <div style="position: relative; display: flex; align-items: center;">
          <svg width="12" height="12" fill="none" stroke="#94a3b8" viewBox="0 0 24 24" style="position: absolute; left: 0.55rem; pointer-events: none;"><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="corpusSearchInput" class="filter-control" placeholder="Search repos..." style="padding-left: 1.75rem; width: 145px; height: 30px; font-size: 0.78rem;" oninput="filterCorpusTable(true)">
        </div>

        <!-- Curated / Saved Filter -->
        <select id="corpusSavedSelect" class="filter-control" style="height: 30px; font-size: 0.78rem;" onchange="filterCorpusTable(true)">
          <option value="ALL">All Repositories</option>
          <option value="SAVED">Curated Benchmarks Only</option>
        </select>

        <!-- Status Filter -->
        <select id="corpusStatusSelect" class="filter-control" style="height: 30px; font-size: 0.78rem; font-weight: 600;" onchange="filterCorpusTable(true)">
          <option value="ALL">All Statuses</option>
          <option value="Migration Confirmed">Confirmed Migrations</option>
          <option value="Discovered">Discovered</option>
          <option value="Snapshot Scanned">Scanned</option>
          <option value="Evolution Analyzed">Evolution</option>
        </select>

        <!-- Export -->
        <button type="button" class="btn-action-compact" onclick="exportTargetsFile()" style="height: 30px;" title="Export targets.txt">
          <svg width="11" height="11" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 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>
          <span>Export</span>
        </button>

        <!-- Clear -->
        <button type="button" class="btn-action-compact" onclick="clearDiscoveryCache()" style="color: #dc2626; height: 30px;" title="Clear cache">
          <svg width="11" height="11" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
          <span>Clear</span>
        </button>
      </div>
    </div>

    <!-- Table Content (Zero Horizontal Scroll on standard viewports) -->
    <div class="corpus-table-wrapper">
      <table class="corpus-table">
        <thead>
          <tr>
            <th style="width: 34%; padding-left: 1rem; cursor: pointer; user-select: none;" onclick="sortCorpusTable('name_with_owner')" title="Sort by Repository Name">
              <div style="display: flex; align-items: center; gap: 0.35rem;">
                <span>Repository</span>
                <span id="sort_icon_name_with_owner" class="sort-icon" style="color: #94a3b8; font-size: 0.72rem;">⇅</span>
              </div>
            </th>
            <th style="width: 20%; cursor: pointer; user-select: none;" onclick="sortCorpusTable('composition')" title="Sort by Target Language %">
              <div style="display: flex; align-items: center; gap: 0.35rem;">
                <span>Composition</span>
                <span id="sort_icon_composition" class="sort-icon" style="color: #94a3b8; font-size: 0.72rem;">⇅</span>
              </div>
            </th>
            <th style="width: 18%; cursor: pointer; user-select: none;" onclick="sortCorpusTable('status')" title="Sort by Migration Status">
              <div style="display: flex; align-items: center; gap: 0.35rem;">
                <span>Pattern / Status</span>
                <span id="sort_icon_status" class="sort-icon" style="color: #94a3b8; font-size: 0.72rem;">⇅</span>
              </div>
            </th>
            <th style="width: 8%; text-align: right; cursor: pointer; user-select: none;" onclick="sortCorpusTable('stars')" title="Sort by GitHub Stars">
              <div style="display: flex; align-items: center; justify-content: flex-end; gap: 0.35rem;">
                <span>Stars</span>
                <span id="sort_icon_stars" class="sort-icon" style="color: #2563eb; font-weight: 800; font-size: 0.72rem;">▼</span>
              </div>
            </th>
            <th style="width: 8%; text-align: right; cursor: pointer; user-select: none;" onclick="sortCorpusTable('total_commits')" title="Sort by Total Commits">
              <div style="display: flex; align-items: center; justify-content: flex-end; gap: 0.35rem;">
                <span>Commits</span>
                <span id="sort_icon_total_commits" class="sort-icon" style="color: #94a3b8; font-size: 0.72rem;">⇅</span>
              </div>
            </th>
            <th style="width: 12%; text-align: right; padding-right: 1rem;">Actions</th>
          </tr>
        </thead>
        <tbody id="discoveryTableBody">
          {% for i in range(8) %}
          <tr>
            <td style="padding-left: 1rem;"><div class="skeleton-shimmer" style="height: 18px; width: 65%;"></div></td>
            <td><div class="skeleton-shimmer" style="height: 16px; width: 80%;"></div></td>
            <td><div class="skeleton-shimmer" style="height: 18px; width: 70%;"></div></td>
            <td style="text-align: right;"><div class="skeleton-shimmer" style="height: 16px; width: 45px; margin-left: auto;"></div></td>
            <td style="text-align: right;"><div class="skeleton-shimmer" style="height: 16px; width: 45px; margin-left: auto;"></div></td>
            <td style="text-align: right; padding-right: 1rem;"><div class="skeleton-shimmer" style="height: 24px; width: 70px; margin-left: auto;"></div></td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>

    <!-- Clean Pagination Footer -->
    <div class="pagination-container" id="paginationContainer">
      <div id="paginationSummaryText" style="font-weight: 500;">
        Showing 1–25 of {{ discovered_repos|length }} repositories
      </div>

      <div style="display: flex; align-items: center; gap: 0.85rem;">
        <!-- Page Size Selector -->
        <div style="display: flex; align-items: center; gap: 0.35rem; font-size: 0.76rem;">
          <span>Rows:</span>
          <select id="pageSizeSelect" class="filter-control" style="height: 26px; padding: 0 0.35rem; font-size: 0.74rem;" onchange="changePageSize(this.value)">
            <option value="15">15</option>
            <option value="25" selected>25</option>
            <option value="50">50</option>
            <option value="100">100</option>
            <option value="999999">All</option>
          </select>
        </div>

        <!-- Page Buttons -->
        <div class="pagination-pages" id="paginationPages">
          <!-- Dynamically populated -->
        </div>
      </div>
    </div>

  </div>

</div>

<!-- Bookmark & Categorization Modal -->
<div id="bookmarkModal" class="filter-modal-overlay" style="display: none;" onclick="if(event.target === this) closeBookmarkModal()">
  <div class="filter-modal-dialog" style="max-width: 440px; background: #ffffff; border-radius: 12px; overflow: hidden; box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1);">
    <div style="display: flex; justify-content: space-between; align-items: center; padding: 1.1rem 1.4rem; border-bottom: 1px solid #f1f5f9;">
      <h3 style="font-size: 1rem; font-weight: 700; color: #0f172a; margin: 0;">Curate Research Benchmark</h3>
      <button type="button" class="modal-close-btn" onclick="closeBookmarkModal()">&times;</button>
    </div>
    <div style="padding: 1.4rem;">
      <div style="margin-bottom: 1rem;">
        <label style="display: block; font-size: 0.78rem; font-weight: 600; color: #334155; margin-bottom: 0.35rem;">Repository</label>
        <input type="text" id="bmRepoNameInput" class="filter-control" style="width: 100%; background: #f8fafc;" readonly>
      </div>
      <div style="margin-bottom: 1rem;">
        <label style="display: block; font-size: 0.78rem; font-weight: 600; color: #334155; margin-bottom: 0.35rem;">Research Category / Tag</label>
        <input type="text" id="bmCategoryInput" class="filter-control" placeholder="e.g. Java -> Kotlin Benchmark, Android Core" style="width: 100%;">
      </div>
      <div style="margin-bottom: 1rem;">
        <label style="display: block; font-size: 0.78rem; font-weight: 600; color: #334155; margin-bottom: 0.35rem;">Notes & Thesis Rationale</label>
        <textarea id="bmNotesInput" class="filter-control" style="width: 100%; height: 75px; padding: 0.5rem; resize: vertical;" placeholder="Add qualitative observations or notes..."></textarea>
      </div>
      <div style="display: flex; align-items: center; justify-content: space-between;">
        <label style="display: flex; align-items: center; gap: 0.5rem; font-size: 0.82rem; font-weight: 600; color: #0f172a; cursor: pointer;">
          <input type="checkbox" id="bmIsSavedCheckbox" style="width: 16px; height: 16px;">
          <span>Bookmark in Curated Corpus</span>
        </label>
      </div>
    </div>
    <div style="display: flex; justify-content: flex-end; gap: 0.6rem; padding: 0.85rem 1.4rem; background: #f8fafc; border-top: 1px solid #f1f5f9;">
      <button type="button" class="btn btn-secondary" onclick="closeBookmarkModal()" style="height: 32px; font-size: 0.8rem;">Cancel</button>
      <button type="button" class="btn btn-primary" onclick="saveBookmarkModal()" style="height: 32px; font-size: 0.8rem;">Save</button>
    </div>
  </div>
</div>

<script id="discoveryCorpusData" type="application/json">{{ discovered_repos_json|safe }}</script>
<script>
let currentTargetRepo = null;
let currentActionType = null;
let activePollInterval = null;
let isActionRunning = false;

// Client-Side High Performance Virtual Pagination State
let currentPage = 1;
let pageSize = 25;
let ALL_CORPUS_DATA = [];
let filteredCorpusList = [];

try {
  const rawData = document.getElementById('discoveryCorpusData');
  if (rawData && rawData.textContent) {
    ALL_CORPUS_DATA = JSON.parse(rawData.textContent);
  }
} catch (e) {
  console.warn('Failed to parse discovery corpus JSON:', e);
  ALL_CORPUS_DATA = [];
}

function escapeHtml(str) {
  if (!str) return '';
  return String(str)
    .replace(/&/g, '&amp;')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/"/g, '&quot;')
    .replace(/'/g, '&#039;');
}

function formatNumber(num) {
  if (num === null || num === undefined) return '0';
  return Number(num).toLocaleString();
}

function renderTableRows(items) {
  const tbody = document.getElementById('discoveryTableBody');
  if (!tbody) return;

  if (!items || items.length === 0) {
    tbody.innerHTML = `
      <tr id="corpusNoFilterMatchRow">
        <td colspan="6" style="padding: 2.5rem 1rem; text-align: center; color: #94a3b8;">
          <div style="font-size: 0.92rem; font-weight: 600; color: #475569;">No repositories match the selected filter</div>
          <div style="font-size: 0.78rem; margin-top: 0.2rem; color: #64748b;">Try adjusting your search keyword or switching the status filter back to "All Statuses".</div>
        </td>
      </tr>
    `;
    return;
  }

  let html = '';
  for (const repo of items) {
    const owner = escapeHtml(repo.owner || (repo.name_with_owner.split('/')[0] || ''));
    const safeName = escapeHtml(repo.name_with_owner);
    const safeNotes = escapeHtml(repo.saved_notes || repo.description || 'No description available.');
    const safeCategory = repo.saved_category ? escapeHtml(repo.saved_category) : '';
    const isSaved = repo.is_saved ? 1 : 0;
    const targetLang = escapeHtml(repo.target_language || repo.primary_language || 'Unknown');
    const sourceLang = escapeHtml(repo.source_language || '');
    const targetPct = (repo.target_percentage || 0).toFixed(1);
    const sourcePct = (repo.source_percentage || 0).toFixed(1);
    const starsFormatted = formatNumber(repo.stars || 0);
    const commitsFormatted = formatNumber(repo.total_commits || 0);

    let statusBadge = '';
    if (repo.status === 'Migration Confirmed') {
      statusBadge = `<span class="status-badge confirmed" title="${repo.file_replacements_count || 0} direct file replacements">Confirmed · ${repo.file_replacements_count || 0} replaced</span>`;
    } else if (repo.migration_archetype === 'Active Displacement') {
      statusBadge = `<span class="status-badge displacement" title="Source contracted by ${repo.source_contraction_pct || 0}%">Displacement · -${repo.source_contraction_pct || 0}%</span>`;
    } else if (repo.status === 'Evolution Analyzed') {
      statusBadge = `<span class="status-badge evolution">Evolution Analyzed</span>`;
    } else if (repo.status === 'Snapshot Scanned') {
      statusBadge = `<span class="status-badge scanned">Snapshot Scanned</span>`;
    } else {
      statusBadge = `<span class="status-badge unanalyzed">Discovered</span>`;
    }

    const starIcon = isSaved
      ? `<svg width="14" height="14" fill="#eab308" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>`
      : `<svg width="14" height="14" fill="none" stroke="#cbd5e1" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z"/></svg>`;

    const categoryTag = safeCategory
      ? `<span style="font-size: 0.65rem; font-weight: 700; background: #fef9c3; color: #854d0e; padding: 0.05rem 0.35rem; border-radius: 4px; border: 1px solid #fef08a; white-space: nowrap;">${safeCategory}</span>`
      : '';

    html += `
      <tr class="corpus-row">
        <td style="padding-left: 1rem;">
          <div style="display: flex; align-items: center; gap: 0.55rem;">
            <button type="button" onclick="toggleSaveRepo('${safeName}')" style="background: none; border: none; cursor: pointer; padding: 0.15rem; display: inline-flex; align-items: center; line-height: 1; transition: transform 0.15s ease;" onmouseover="this.style.transform='scale(1.2)'" onmouseout="this.style.transform='scale(1)'" title="${isSaved ? 'Remove from Curated Benchmarks' : 'Bookmark in Curated Corpus'}">
              ${starIcon}
            </button>
            <img class="repo-avatar" src="https://github.com/${owner}.png?size=56" alt="${owner}" loading="lazy" onerror="this.onerror=null; this.src='data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%2226%22 height=%2226%22 fill=%22%2394a3b8%22 viewBox=%220 0 24 24%22><path d=%22M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z%22/></svg>'">
            <div style="min-width: 0; flex: 1;">
              <div style="display: flex; align-items: center; gap: 0.3rem; flex-wrap: wrap;">
                <a href="${escapeHtml(repo.url)}" target="_blank" rel="noopener noreferrer" style="font-weight: 600; color: #0f172a; text-decoration: none; font-size: 0.84rem; word-break: break-all;">
                  ${safeName}
                </a>
                ${categoryTag}
                <a href="${escapeHtml(repo.url)}" target="_blank" rel="noopener noreferrer" style="color: #94a3b8; display: inline-flex; align-items: center;" title="Open in GitHub">
                  <svg width="9" height="9" 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>
              </div>
              <div style="font-size: 0.72rem; color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 360px; margin-top: 0.1rem;">
                ${safeNotes}
              </div>
            </div>
          </div>
        </td>
        <td>
          <div style="display: flex; flex-direction: column; gap: 0.2rem;">
            <div style="display: flex; justify-content: space-between; align-items: center; font-size: 0.72rem; line-height: 1.2;">
              <span style="font-weight: 600; color: #2563eb;">
                ${targetLang} <span class="mono-num" style="font-weight: 700;">${targetPct}%</span>
              </span>
              <span style="font-weight: 500; color: #64748b;">
                ${sourceLang} <span class="mono-num" style="font-weight: 600;">${sourcePct}%</span>
              </span>
            </div>
            <div class="composition-bar" title="${targetLang}: ${targetPct}% | ${sourceLang}: ${sourcePct}%">
              <div style="width: ${targetPct}%; background: #2563eb; transition: width 0.3s ease;"></div>
              <div style="width: ${sourcePct}%; background: #94a3b8; transition: width 0.3s ease;"></div>
            </div>
          </div>
        </td>
        <td>${statusBadge}</td>
        <td style="text-align: right; font-size: 0.78rem; color: #334155;">
          <div style="display: inline-flex; align-items: center; gap: 0.2rem; font-weight: 600;">
            <svg width="10" height="10" fill="#eab308" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
            <span class="mono-num">${starsFormatted}</span>
          </div>
        </td>
        <td style="text-align: right; font-size: 0.76rem; color: #64748b;">
          <span class="mono-num">${commitsFormatted}</span>
        </td>
        <td style="text-align: right; padding-right: 1rem;">
          <div style="display: inline-flex; gap: 0.35rem; justify-content: flex-end;">
            <button type="button" class="btn-action-compact" onclick="copyCliCommand('polyglotminer history ${safeName}')" title="Copy CLI mining command">
              <span>Copy CLI</span>
            </button>
            <a href="/${safeName.replace('/', '_')}/evolution_latest.html" class="btn-action-compact primary" title="View Evolution Report" style="text-decoration: none; display: inline-flex; align-items: center;">
              <span>View</span>
            </a>
          </div>
        </td>
      </tr>
    `;
  }
  tbody.innerHTML = html;
}

// Column Sorting State & Handler
let currentSortCol = 'stars';
let currentSortDir = 'desc';

function sortCorpusTable(col) {
  if (currentSortCol === col) {
    currentSortDir = currentSortDir === 'asc' ? 'desc' : 'asc';
  } else {
    currentSortCol = col;
    currentSortDir = (col === 'stars' || col === 'total_commits' || col === 'composition') ? 'desc' : 'asc';
  }

  // Update sort icons in table header
  const cols = ['name_with_owner', 'composition', 'status', 'stars', 'total_commits'];
  cols.forEach(c => {
    const iconEl = document.getElementById(`sort_icon_${c}`);
    if (iconEl) {
      if (c === currentSortCol) {
        iconEl.textContent = currentSortDir === 'asc' ? '▲' : '▼';
        iconEl.style.color = '#2563eb';
        iconEl.style.fontWeight = '800';
      } else {
        iconEl.textContent = '⇅';
        iconEl.style.color = '#94a3b8';
        iconEl.style.fontWeight = 'normal';
      }
    }
  });

  filterCorpusTable(false);
}

// Client-Side High-Speed Filtering and Virtual Pagination
function filterCorpusTable(resetPage = true) {
  if (resetPage) {
    currentPage = 1;
  }
  const query = (document.getElementById('corpusSearchInput')?.value || '').toLowerCase().trim();
  const statusFilter = document.getElementById('corpusStatusSelect')?.value || 'ALL';
  const savedFilter = document.getElementById('corpusSavedSelect')?.value || 'ALL';

  try {
    sessionStorage.setItem('polyglotminer_discovery_filter_state_v1', JSON.stringify({
      q: document.getElementById('corpusSearchInput')?.value || '',
      status: statusFilter,
      saved: savedFilter,
      page: currentPage,
      sortCol: currentSortCol,
      sortDir: currentSortDir,
      savedAt: Date.now()
    }));
  } catch (e) {}

  filteredCorpusList = ALL_CORPUS_DATA.filter(repo => {
    const name = (repo.name_with_owner || '').toLowerCase();
    const status = repo.status || '';
    const archetype = repo.migration_archetype || '';
    const isSaved = repo.is_saved ? 1 : 0;
    
    const matchesQuery = !query || name.includes(query);
    const matchesStatus = (
      statusFilter === 'ALL' ||
      status === statusFilter ||
      (statusFilter === 'Migration Confirmed' && (status === 'Migration Confirmed' || status.includes('Confirmed') || archetype.includes('Replacement') || archetype.includes('Refactoring')))
    );
    const matchesSaved = (savedFilter === 'ALL' || (savedFilter === 'SAVED' && isSaved === 1));

    return matchesQuery && matchesStatus && matchesSaved;
  });

  // Apply sorting
  filteredCorpusList.sort((a, b) => {
    let valA, valB;
    if (currentSortCol === 'composition') {
      valA = parseFloat(a.target_language_percentage) || 0;
      valB = parseFloat(b.target_language_percentage) || 0;
    } else if (currentSortCol === 'stars') {
      valA = parseInt(a.stars) || 0;
      valB = parseInt(b.stars) || 0;
    } else if (currentSortCol === 'total_commits') {
      valA = parseInt(a.total_commits) || 0;
      valB = parseInt(b.total_commits) || 0;
    } else if (currentSortCol === 'status') {
      valA = (a.status || '').toLowerCase();
      valB = (b.status || '').toLowerCase();
    } else {
      valA = (a.name_with_owner || '').toLowerCase();
      valB = (b.name_with_owner || '').toLowerCase();
    }

    if (valA < valB) return currentSortDir === 'asc' ? -1 : 1;
    if (valA > valB) return currentSortDir === 'asc' ? 1 : -1;
    return 0;
  });

  const totalMatches = filteredCorpusList.length;
  const badge = document.getElementById('tableCountBadge');
  if (badge) {
    badge.textContent = `${totalMatches}`;
  }

  // Calculate pages
  const totalPages = Math.max(1, Math.ceil(totalMatches / pageSize));
  if (currentPage > totalPages) {
    currentPage = totalPages;
  }

  const startIndex = (currentPage - 1) * pageSize;
  const endIndex = Math.min(startIndex + pageSize, totalMatches);
  const pageSlice = filteredCorpusList.slice(startIndex, endIndex);

  // Render only the active 25 rows into the DOM
  renderTableRows(pageSlice);

  // Render pagination UI controls
  renderPaginationControls(totalMatches, totalPages, startIndex, endIndex);
}

function renderPaginationControls(totalMatches, totalPages, startIndex, endIndex) {
  const summaryEl = document.getElementById('paginationSummaryText');
  if (summaryEl) {
    if (totalMatches === 0) {
      summaryEl.textContent = 'Showing 0 repositories';
    } else {
      summaryEl.textContent = `Showing ${startIndex + 1}–${endIndex} of ${totalMatches} repositories`;
    }
  }

  const pagesContainer = document.getElementById('paginationPages');
  if (!pagesContainer) return;

  if (totalMatches <= pageSize) {
    pagesContainer.innerHTML = '';
    return;
  }

  let html = '';

  // Prev Button
  html += `<button type="button" class="page-btn" onclick="goToPage(${currentPage - 1})" ${currentPage === 1 ? 'disabled' : ''} title="Previous Page">‹</button>`;

  // Page Numbers with smart ellipsis
  let startP = Math.max(1, currentPage - 2);
  let endP = Math.min(totalPages, currentPage + 2);

  if (startP > 1) {
    html += `<button type="button" class="page-btn ${currentPage === 1 ? 'active' : ''}" onclick="goToPage(1)">1</button>`;
    if (startP > 2) {
      html += `<span style="padding: 0 0.2rem; color: #94a3b8;">...</span>`;
    }
  }

  for (let p = startP; p <= endP; p++) {
    html += `<button type="button" class="page-btn ${p === currentPage ? 'active' : ''}" onclick="goToPage(${p})">${p}</button>`;
  }

  if (endP < totalPages) {
    if (endP < totalPages - 1) {
      html += `<span style="padding: 0 0.2rem; color: #94a3b8;">...</span>`;
    }
    html += `<button type="button" class="page-btn ${currentPage === totalPages ? 'active' : ''}" onclick="goToPage(${totalPages})">${totalPages}</button>`;
  }

  // Next Button
  html += `<button type="button" class="page-btn" onclick="goToPage(${currentPage + 1})" ${currentPage === totalPages ? 'disabled' : ''} title="Next Page">›</button>`;

  pagesContainer.innerHTML = html;
}

function goToPage(page) {
  currentPage = page;
  filterCorpusTable(false);
  const tableEl = document.querySelector('.discovery-panel');
  if (tableEl) {
    tableEl.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
  }
}

function changePageSize(newSize) {
  pageSize = parseInt(newSize) || 25;
  currentPage = 1;
  filterCorpusTable(true);
}

// 1-Click Star Bookmark Toggle
async function toggleSaveRepo(repoName) {
  try {
    const res = await fetch('/api/discovery/toggle-save', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ repo: repoName })
    });
    const data = await res.json();
    if (data.status === 'ok') {
      const isSaved = data.is_saved === 1;
      const target = ALL_CORPUS_DATA.find(r => r.name_with_owner === repoName);
      if (target) {
        target.is_saved = isSaved ? 1 : 0;
      }
      filterCorpusTable(false);
      if (typeof window.showToast === 'function') {
        window.showToast(isSaved ? `⭐ Saved ${repoName} to Curated Benchmarks` : `Removed ${repoName} from Curated Benchmarks`);
      }
    }
  } catch (err) {
    if (typeof window.showToast === 'function') {
      window.showToast(`Bookmark error: ${err.message}`);
    }
  }
}

// Non-blocking 3-second Toast Copy Function
function copyCliCommand(cmd) {
  if (navigator.clipboard && navigator.clipboard.writeText) {
    navigator.clipboard.writeText(cmd).then(() => {
      if (typeof window.showToast === 'function') {
        window.showToast(`📋 Copied: ${cmd}`);
      }
    }).catch(() => {
      fallbackCopy(cmd);
    });
  } else {
    fallbackCopy(cmd);
  }
}

function fallbackCopy(cmd) {
  const ta = document.createElement('textarea');
  ta.value = cmd;
  document.body.appendChild(ta);
  ta.select();
  try {
    document.execCommand('copy');
    if (typeof window.showToast === 'function') {
      window.showToast(`📋 Copied: ${cmd}`);
    }
  } catch (e) {
    console.warn('Clipboard write error', e);
  }
  document.body.removeChild(ta);
}

async function exportTargetsFile() {
  try {
    const res = await fetch('/api/discovery/export', { method: 'POST' });
    const data = await res.json();
    if (data.success) {
      if (typeof window.showToast === 'function') {
        window.showToast(`Exported ${data.count} repositories to ${data.file_path}`);
      }
    } else {
      if (typeof window.showToast === 'function') {
        window.showToast(`Export error: ${data.error}`);
      }
    }
  } catch (err) {
    if (typeof window.showToast === 'function') {
      window.showToast(`Export request failed: ${err.message}`);
    }
  }
}

async function clearDiscoveryCache() {
  if (!confirm('Are you sure you want to clear all discovered repositories from the cache?')) return;
  try {
    sessionStorage.removeItem('polyglotminer_discovery_filter_state_v1');
  } catch (e) {}
  try {
    const res = await fetch('/api/discovery/clear', { method: 'POST' });
    const data = await res.json();
    if (data.success) {
      window.location.reload();
    }
  } catch (err) {
    if (typeof window.showToast === 'function') {
      window.showToast(`Failed to clear cache: ${err.message}`);
    }
  }
}

// Initialize pagination & restore cached state on DOM load
document.addEventListener('DOMContentLoaded', () => {
  try {
    const saved = JSON.parse(sessionStorage.getItem('polyglotminer_discovery_filter_state_v1') || 'null');
    if (saved) {
      if (saved.q) {
        const qEl = document.getElementById('corpusSearchInput');
        if (qEl) qEl.value = saved.q;
      }
      if (saved.status) {
        const sEl = document.getElementById('corpusStatusSelect');
        if (sEl) sEl.value = saved.status;
      }
      if (saved.saved) {
        const svEl = document.getElementById('corpusSavedSelect');
        if (svEl) svEl.value = saved.saved;
      }
      if (saved.sortCol) currentSortCol = saved.sortCol;
      if (saved.sortDir) currentSortDir = saved.sortDir;
      if (saved.page) currentPage = saved.page;
    }
  } catch (e) {}
  filterCorpusTable(false);
});
</script>

<style>
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
</style>
{% endblock %}