{% extends "base.html" %}

{% block content %}
<div class="row">
    <div class="col-12">
        <div class="card border-0 shadow">
            <div class="card-header bg-gradient border-0">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <h2 class="mb-0"><i class="fas fa-cubes"></i> Products</h2>
                        <p class="text-muted mb-0">SPDX Product Data</p>
                    </div>
                    <a href="/products/packages" class="btn btn-outline-light">
                        <i class="fas fa-search"></i> Search All Packages
                    </a>
                </div>
            </div>
            <div class="card-body">
                {% if cache_rebuilding %}
                <div class="alert alert-info alert-dismissible fade show" role="alert">
                    <h5 class="alert-heading">
                        <i class="fas fa-sync-alt fa-spin"></i> Database Rebuilding
                    </h5>
                    <p class="mb-0">
                        The cache daemon is currently rebuilding the database. Product data will appear here once the SPDX scan completes.
                        This process may take several minutes depending on the number of SPDX files.
                    </p>
                    <hr>
                    <p class="mb-0 small text-muted">
                        <i class="fas fa-info-circle"></i> Projects and basic OBS data are being indexed first. SPDX product data will follow.
                        Check the daemon logs for progress.
                    </p>
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
                {% endif %}

                {% if grouped_products %}
                <div class="mb-3">
                    <p class="text-muted mb-2">
                        <strong>{{ grouped_products | length }}</strong> product name(s), <strong>{{ total_product_count }}</strong> total product medium(s)
                    </p>
                </div>

                <!-- Search Tabs -->
                <div class="mb-4">
                    <!-- Loading Overlay -->
                    <div id="searchLoadingOverlay" class="position-relative" style="min-height: 200px;">
                        <div class="position-absolute top-50 start-50 translate-middle text-center" style="z-index: 10;">
                            <div class="spinner-border text-primary mb-3" role="status" style="width: 3rem; height: 3rem;">
                                <span class="visually-hidden">Loading...</span>
                            </div>
                            <p class="text-muted">Initializing search interface...</p>
                        </div>
                    </div>

                    <div id="searchInterface" style="display: none;">
                        <ul class="nav nav-tabs" id="searchTabs" role="tablist">
                            <li class="nav-item" role="presentation">
                                <button class="nav-link active" id="binary-search-tab" data-bs-toggle="tab" data-bs-target="#binary-search-pane" type="button" role="tab" aria-controls="binary-search-pane" aria-selected="true">
                                    <i class="fas fa-box"></i> Search Binary Packages
                                </button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" id="file-search-tab" data-bs-toggle="tab" data-bs-target="#file-search-pane" type="button" role="tab" aria-controls="file-search-pane" aria-selected="false">
                                    <i class="fas fa-file"></i> Search Files
                                </button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" id="vcs-search-tab" data-bs-toggle="tab" data-bs-target="#vcs-search-pane" type="button" role="tab" aria-controls="vcs-search-pane" aria-selected="false">
                                    <i class="fas fa-code-branch"></i> Search VCS Repository
                                </button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" id="catalog-tab" data-bs-toggle="tab" data-bs-target="#catalog-pane" type="button" role="tab" aria-controls="catalog-pane" aria-selected="false">
                                    <i class="fas fa-cubes"></i> Product Catalog
                                </button>
                            </li>
                        </ul>

                        <div class="tab-content border border-top-0 p-3" id="searchTabContent">
                        <!-- Binary Search Tab -->
                        <div class="tab-pane fade show active" id="binary-search-pane" role="tabpanel" aria-labelledby="binary-search-tab">
                            <div class="input-group mb-3">
                                <span class="input-group-text"><i class="fas fa-box"></i></span>
                                <input type="text" id="binarySearch" class="form-control"
                                       placeholder="Page is loading..."
                                       onkeypress="if(event.key === 'Enter') searchBinaries()"
                                       disabled>
                                <button class="btn btn-outline-secondary" type="button" onclick="clearBinarySearch()" disabled>
                                    <i class="fas fa-times"></i>
                                </button>
                            </div>

                            <!-- Binary Search Results -->
                            <div id="binarySearchResults" style="display: none;">
                                <div class="card border-info">
                                    <div class="card-header bg-info text-white">
                                        <h6 class="mb-0">
                                            <i class="fas fa-box"></i> Package Search Results
                                            <span id="searchResultCount" class="badge bg-light text-dark ms-2"></span>
                                        </h6>
                                    </div>
                                    <div class="card-body p-0">
                                        <div class="table-responsive" style="max-height: 500px; overflow-y: auto;">
                                            <table class="table table-sm table-striped mb-0">
                                                <thead class="table-light sticky-top">
                                                    <tr>
                                                        <th style="width: 12%;">Package Name</th>
                                                        <th style="width: 6%;">Arch</th>
                                                        <th style="width: 15%;">Package Filename</th>
                                                        <th style="width: 22%;">VCS</th>
                                                        <th style="width: 15%;">Build Area</th>
                                                        <th style="width: 30%;">Found in Products</th>
                                                    </tr>
                                                </thead>
                                                <tbody id="binarySearchResultsBody">
                                                    <!-- Results populated by JavaScript -->
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- File Search Tab -->
                        <div class="tab-pane fade" id="file-search-pane" role="tabpanel" aria-labelledby="file-search-tab">
                            <div class="input-group mb-3">
                                <span class="input-group-text"><i class="fas fa-file"></i></span>
                                <input type="text" id="fileSearch" class="form-control"
                                       placeholder="Page is loading..."
                                       onkeypress="if(event.key === 'Enter') searchFiles()"
                                       disabled>
                                <button class="btn btn-outline-secondary" type="button" onclick="clearFileSearch()" disabled>
                                    <i class="fas fa-times"></i>
                                </button>
                            </div>

                            <!-- File Search Results -->
                            <div id="fileSearchResults" style="display: none;">
                                <div class="card border-success">
                                    <div class="card-header bg-success text-white">
                                        <h6 class="mb-0">
                                            <i class="fas fa-file"></i> File Search Results
                                            <span id="fileSearchResultCount" class="badge bg-light text-dark ms-2"></span>
                                        </h6>
                                    </div>
                                    <div class="card-body p-0">
                                        <div class="table-responsive" style="max-height: 500px; overflow-y: auto;">
                                            <table class="table table-sm table-striped mb-0">
                                                <thead class="table-light sticky-top">
                                                    <tr>
                                                        <th style="width: 22%;">File Path</th>
                                                        <th style="width: 10%;">Package Name</th>
                                                        <th style="width: 6%;">Arch</th>
                                                        <th style="width: 13%;">Package Filename</th>
                                                        <th style="width: 16%;">VCS</th>
                                                        <th style="width: 13%;">Build Area</th>
                                                        <th style="width: 20%;">Found in Products</th>
                                                    </tr>
                                                </thead>
                                                <tbody id="fileSearchResultsBody">
                                                    <!-- Results populated by JavaScript -->
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- VCS Search Tab -->
                        <div class="tab-pane fade" id="vcs-search-pane" role="tabpanel" aria-labelledby="vcs-search-tab">
                            <div class="input-group mb-3">
                                <span class="input-group-text"><i class="fas fa-code-branch"></i></span>
                                <input type="text" id="vcsSearch" class="form-control"
                                       placeholder="Page is loading..."
                                       onkeypress="if(event.key === 'Enter') searchVCS()"
                                       disabled>
                                <button class="btn btn-outline-secondary" type="button" onclick="clearVCSSearch()" disabled>
                                    <i class="fas fa-times"></i>
                                </button>
                            </div>

                            <!-- Help text -->
                            <div class="alert alert-info small mb-3">
                                <strong>Search formats:</strong>
                                <ul class="mb-0 mt-1">
                                    <li><code>org/repo@branch</code> - Search by organization, repository, and branch (e.g., <code>pool/glibc@leap-16.0</code>)</li>
                                    <li><code>repo@branch</code> - Search by repository and branch (any organization)</li>
                                    <li><code>repo</code> - Search by repository name only</li>
                                    <li><code>a1b2c3d4...</code> - Search by commit hash (8+ characters)</li>
                                </ul>
                                <hr class="my-2">
                                <small class="text-muted"><i class="fas fa-lightbulb"></i> <strong>Tip:</strong> You can also navigate here from any package detail page by clicking the "Find in Products" button next to a branch. Both <code>@</code> and <code>#</code> separators are supported.</small>
                            </div>

                            <!-- VCS Search Results -->
                            <div id="vcsSearchResults" style="display: none;">
                                <div class="card border-warning">
                                    <div class="card-header bg-warning text-dark">
                                        <h6 class="mb-0">
                                            <i class="fas fa-code-branch"></i> VCS Repository Search Results
                                            <span id="vcsSearchResultCount" class="badge bg-light text-dark ms-2"></span>
                                        </h6>
                                    </div>
                                    <div class="card-body p-0">
                                        <div class="table-responsive" style="max-height: 500px; overflow-y: auto;">
                                            <table class="table table-sm table-striped mb-0">
                                                <thead class="table-light sticky-top">
                                                    <tr>
                                                        <th style="width: 12%;">Package Name</th>
                                                        <th style="width: 6%;">Arch</th>
                                                        <th style="width: 15%;">Package Filename</th>
                                                        <th style="width: 22%;">VCS</th>
                                                        <th style="width: 15%;">Build Area</th>
                                                        <th style="width: 30%;">Found in Products</th>
                                                    </tr>
                                                </thead>
                                                <tbody id="vcsSearchResultsBody">
                                                    <!-- Results populated by JavaScript -->
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Product Catalog Tab -->
                        <div class="tab-pane fade" id="catalog-pane" role="tabpanel" aria-labelledby="catalog-tab">
                            {% if grouped_products %}
                            <!-- Filter Options -->
                            <div class="mb-3">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="showDebugSourceProducts" onchange="toggleDebugSourceProducts()">
                                    <label class="form-check-label" for="showDebugSourceProducts">
                                        Load Debug and Source product media
                                    </label>
                                </div>
                            </div>

                            <div class="table-responsive">
                                <table class="table table-hover" id="productCatalogTable">
                                    <thead>
                                        <tr>
                                            <th>Product Name</th>
                                            <th>Variants</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {% for group in grouped_products %}
                                        {% set group_index = loop.index %}
                                        <!-- Product Group Header -->
                                        <tr class="table-secondary product-group-row">
                                            <td colspan="2" style="cursor: pointer;"
                                                onclick="toggleProductGroup('group-{{ loop.index }}')"
                                                data-bs-toggle="collapse"
                                                data-bs-target="#group-{{ loop.index }}">
                                                <strong><i class="fas fa-compact-disc"></i> {{ group.name }}</strong>
                                                <span class="badge bg-secondary ms-2">{{ group.count }} variant{{ 's' if group.count != 1 else '' }}</span>
                                                <i class="fas fa-chevron-down float-end" id="group-{{ loop.index }}-icon"></i>
                                            </td>
                                        </tr>
                                        <!-- Product Variants (collapsed by default) -->
                                        <tr class="collapse product-group-details" id="group-{{ loop.index }}">
                                            <td colspan="2" class="p-0">
                                                <table class="table table-sm mb-0" id="group-{{ loop.index }}-table">
                                                    <thead class="table-light">
                                                        <tr>
                                                            <th style="width: 35%; cursor: pointer;" onclick="sortGroupProducts({{ loop.index }}, 'full_name')">
                                                                Name <i class="fas fa-sort" id="group-{{ loop.index }}-sort-full_name"></i>
                                                            </th>
                                                            <th style="width: 12%; cursor: pointer;" onclick="sortGroupProducts({{ loop.index }}, 'version')">
                                                                Version <i class="fas fa-sort" id="group-{{ loop.index }}-sort-version"></i>
                                                            </th>
                                                            <th style="width: 12%; cursor: pointer;" onclick="sortGroupProducts({{ loop.index }}, 'build_number')">
                                                                Build Number <i class="fas fa-sort" id="group-{{ loop.index }}-sort-build_number"></i>
                                                            </th>
                                                            <th style="width: 13%;">Packages</th>
                                                            <th style="width: 10%;">Actions</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody id="group-{{ loop.index }}-tbody">
                                                        {% for product in group.products %}
                                                        {% set is_debug_or_source = product.full_name.endswith('-Debug') or product.full_name.endswith('-Source') %}
                                                        <tr class="product-variant-row" data-full-name="{{ product.full_name }}"
                                                            data-version="{{ product.version }}"
                                                            data-build-number="{{ product.build_number }}"
                                                            data-product-index="{{ loop.index }}"
                                                            data-is-debug-source="{{ 'true' if is_debug_or_source else 'false' }}"
                                                            style="{{ 'display: none;' if is_debug_or_source else '' }}">
                                                            <td><code>{{ product.full_name }}</code></td>
                                                            <td>{{ product.version }}</td>
                                                            <td><span class="badge bg-primary">{{ product.build_number }}</span></td>
                                                            <td>{{ product.package_count }} packages</td>
                                                            <td>
                                                                <button class="btn btn-sm btn-outline-primary"
                                                                        onclick="toggleProductDetails('product-{{ group_index }}-{{ loop.index }}')"
                                                                        data-bs-toggle="collapse"
                                                                        data-bs-target="#product-{{ group_index }}-{{ loop.index }}">
                                                                    <i class="fas fa-chevron-down"></i> Details
                                                                </button>
                                                            </td>
                                                        </tr>
                                                        <tr class="collapse product-variant-details" id="product-{{ group_index }}-{{ loop.index }}"
                                                            data-is-debug-source="{{ 'true' if is_debug_or_source else 'false' }}"
                                                            style="{{ 'display: none;' if is_debug_or_source else '' }}">
                                                            <td colspan="6">
                                                                <div class="card bg-light border-0">
                                                                    <div class="card-body">
                                                                        <h5>Product Details</h5>
                                                                        <dl class="row mb-3">
                                                                            <dt class="col-sm-3">SPDX File</dt>
                                                                            <dd class="col-sm-9"><code>{{ product.file_name }}</code></dd>

                                                                            <dt class="col-sm-3">Last Modified</dt>
                                                                            <dd class="col-sm-9">{{ product.file_mtime | int | timestamp_to_datetime }}</dd>
                                                                        </dl>

                                                                        {% if product.packages %}
                                                                        <div class="d-flex justify-content-between align-items-center mt-4 mb-2">
                                                                            <h6 class="mb-0">Packages (<span id="product-{{ group_index }}-{{ loop.index }}-total">{{ product.packages | length }}</span>)</h6>
                                                                            <input type="text" class="form-control form-control-sm"
                                                                                   style="max-width: 300px;"
                                                                                   placeholder="🔍 Search binaries..."
                                                                                   onkeyup="filterProductPackages('{{ group_index }}-{{ loop.index }}', this.value)">
                                                                        </div>
                                                                        <div class="table-responsive" style="max-height: 500px; overflow-y: auto;">
                                                                            <table class="table table-sm table-striped" id="product-{{ group_index }}-{{ loop.index }}-packages">
                                                                                <thead class="table-light sticky-top">
                                                                                    <tr>
                                                                                        <th style="width: 15%;">Package Name</th>
                                                                                        <th style="width: 8%;">Arch</th>
                                                                                        <th style="width: 20%;">Source Filename</th>
                                                                                        <th style="width: 30%;">VCS</th>
                                                                                        <th style="width: 27%;">Build Area</th>
                                                                                    </tr>
                                                                                </thead>
                                                                                <tbody id="product-{{ group_index }}-{{ loop.index }}-packages-tbody">
                                                                                    <!-- Rendered by JavaScript -->
                                                                                </tbody>
                                                                            </table>
                                                                        </div>
                                                                        <div class="d-flex justify-content-between align-items-center mt-2">
                                                                            <div>
                                                                                <small class="text-muted" id="product-{{ group_index }}-{{ loop.index }}-page-info">Page 1</small>
                                                                            </div>
                                                                            <div>
                                                                                <button class="btn btn-sm btn-outline-secondary" id="product-{{ group_index }}-{{ loop.index }}-prev" onclick="changeProductPage('{{ group_index }}-{{ loop.index }}', -1)">
                                                                                    <i class="fas fa-chevron-left"></i> Previous
                                                                                </button>
                                                                                <button class="btn btn-sm btn-outline-secondary" id="product-{{ group_index }}-{{ loop.index }}-next" onclick="changeProductPage('{{ group_index }}-{{ loop.index }}', 1)">
                                                                                    Next <i class="fas fa-chevron-right"></i>
                                                                                </button>
                                                                            </div>
                                                                        </div>
                                                                        <script type="application/json" id="product-{{ group_index }}-{{ loop.index }}-packages-data">
                                                                            {{ product.packages | tojson }}
                                                                        </script>
                                                                        {% else %}
                                                                        <p class="text-muted">No packages found in this product.</p>
                                                                        {% endif %}
                                                                    </div>
                                                                </div>
                                                            </td>
                                                        </tr>
                                                        {% endfor %}
                                                    </tbody>
                                                </table>
                                            </td>
                                        </tr>
                                        {% endfor %}
                                    </tbody>
                                </table>
                            </div>
                            {% else %}
                            <div class="text-center py-5">
                                {% if cache_rebuilding %}
                                <i class="fas fa-sync-alt fa-spin fa-3x text-muted mb-3"></i>
                                <h4>Database Rebuilding</h4>
                                <p class="text-muted">The cache daemon is currently rebuilding the database.</p>
                                <p class="text-muted">
                                    Product data will appear here automatically once the SPDX scan completes.<br>
                                    <small>Please wait a few minutes and refresh this page.</small>
                                </p>
                                {% else %}
                                <i class="fas fa-inbox fa-3x text-muted mb-3"></i>
                                <h4>No Products Found</h4>
                                <p class="text-muted">No SPDX product data available in cache.</p>
                                <p class="text-muted">
                                    Configure SPDX scanning in <code>config.ini</code> under <code>[spdx]</code> section.<br>
                                    Then restart the cache daemon to populate SPDX data.
                                </p>
                                {% endif %}
                            </div>
                            {% endif %}
                        </div>
                    </div>
                    </div> <!-- Close searchInterface -->
                </div> <!-- Close mb-4 -->
                {% else %}
                <!-- No products available -->
                <div class="text-center py-5">
                    {% if cache_rebuilding %}
                    <i class="fas fa-sync-alt fa-spin fa-3x text-muted mb-3"></i>
                    <h4>Database Rebuilding</h4>
                    <p class="text-muted">The cache daemon is currently rebuilding the database.</p>
                    <p class="text-muted">
                        Product data will appear here automatically once the SPDX scan completes.<br>
                        <small>Please wait a few minutes and refresh this page.</small>
                    </p>
                    {% else %}
                    <i class="fas fa-inbox fa-3x text-muted mb-3"></i>
                    <h4>No Products Found</h4>
                    <p class="text-muted">No SPDX product data available in cache.</p>
                    <p class="text-muted">
                        Configure SPDX scanning in <code>config.ini</code> under <code>[spdx]</code> section.<br>
                        Then restart the cache daemon to populate SPDX data.
                    </p>
                    {% endif %}
                </div>
                {% endif %}

                <!-- Immediate URL parameter handler (runs before DOMContentLoaded) -->
                <script>
                (function() {
                    // Check URL parameters immediately
                    const urlParams = new URLSearchParams(window.location.search);
                    const vcsSearchParam = urlParams.get('vcs_search');

                    if (vcsSearchParam) {
                        // Switch active tab classes immediately (before Bootstrap tabs are initialized)
                        document.getElementById('binary-search-tab')?.classList.remove('active');
                        document.getElementById('binary-search-pane')?.classList.remove('show', 'active');

                        document.getElementById('vcs-search-tab')?.classList.add('active');
                        document.getElementById('vcs-search-pane')?.classList.add('show', 'active');

                        // Set aria-selected attributes
                        document.getElementById('binary-search-tab')?.setAttribute('aria-selected', 'false');
                        document.getElementById('vcs-search-tab')?.setAttribute('aria-selected', 'true');

                        // Pre-fill the search input (decode URL encoding)
                        const vcsSearchInput = document.getElementById('vcsSearch');
                        if (vcsSearchInput) {
                            vcsSearchInput.value = decodeURIComponent(vcsSearchParam);
                        }
                    }
                })();
                </script>

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

<script>
// Hostname mappings for VCS URLs
const HOSTNAME_MAPPINGS = {{ hostname_mappings | tojson | safe }};
console.log('[HOSTNAME_MAPPINGS] Loaded mappings:', HOSTNAME_MAPPINGS);

// Function to map hostname in URL
function mapHostname(url) {
    if (!url || !HOSTNAME_MAPPINGS) {
        console.log('[mapHostname] No URL or no mappings:', {url, HOSTNAME_MAPPINGS});
        return url;
    }

    try {
        const urlObj = new URL(url);
        const hostname = urlObj.hostname;
        console.log('[mapHostname] Input URL:', url, 'Hostname:', hostname);

        if (HOSTNAME_MAPPINGS[hostname]) {
            const newHostname = HOSTNAME_MAPPINGS[hostname];
            console.log('[mapHostname] Mapping', hostname, '->', newHostname);
            urlObj.hostname = newHostname;
            const result = urlObj.toString();
            console.log('[mapHostname] Result:', result);
            return result;
        }
        console.log('[mapHostname] No mapping found for hostname:', hostname);
        return url;
    } catch (e) {
        // Invalid URL, return as-is
        console.error('[mapHostname] Error:', e, 'URL:', url);
        return url;
    }
}

// Build package index from grouped products
const groupedProductsData = {{ grouped_products | tojson | safe }};
const packageIndex = {};

// Flatten grouped products for indexing
const productsData = [];
groupedProductsData.forEach(group => {
    group.products.forEach(product => {
        productsData.push(product);
    });
});

// Index all packages with their product info
// Group by package_name:arch:commit_hash to avoid mixing different versions
productsData.forEach(product => {
    const productInfo = {
        name: product.name,
        version: product.version,
        build_number: product.build_number,
        full_name: product.full_name
    };

    if (product.packages) {
        product.packages.forEach(pkg => {
            // Use commit_hash in key to separate different versions of the same package
            const key = `${pkg.package_name}:${pkg.arch || 'noarch'}:${pkg.commit_hash || ''}`;

            if (!packageIndex[key]) {
                packageIndex[key] = {
                    package_name: pkg.package_name,
                    arch: pkg.arch,
                    filename: pkg.filename,
                    vcs_url: pkg.vcs_url,
                    vcs_org: pkg.vcs_org,
                    tracking_branch: pkg.tracking_branch,
                    commit_hash: pkg.commit_hash,
                    disturl: pkg.disturl,
                    products: []
                };
            }

            // Add this product to the package's product list
            packageIndex[key].products.push(productInfo);
        });
    }
});

function searchBinaries() {
    const input = document.getElementById('binarySearch');
    const searchTerm = input.value.trim().toLowerCase();
    const resultsDiv = document.getElementById('binarySearchResults');
    const resultsBody = document.getElementById('binarySearchResultsBody');
    const resultCount = document.getElementById('searchResultCount');

    if (searchTerm.length < 2) {
        resultsDiv.style.display = 'none';
        return;
    }

    // Search through package index
    const matches = [];
    for (const key in packageIndex) {
        const pkg = packageIndex[key];
        const searchableText = `${pkg.package_name} ${pkg.filename || ''} ${pkg.arch || ''}`.toLowerCase();

        if (searchableText.indexOf(searchTerm) !== -1) {
            matches.push(pkg);
        }
    }

    // Sort matches by package name
    matches.sort((a, b) => a.package_name.localeCompare(b.package_name));

    // Display results
    if (matches.length > 0) {
        resultsDiv.style.display = 'block';
        resultCount.textContent = `${matches.length} package${matches.length !== 1 ? 's' : ''}`;

        let html = '';
        matches.forEach(pkg => {
            html += '<tr>';
            html += `<td><code>${escapeHtml(pkg.package_name)}</code></td>`;
            html += '<td>';
            if (pkg.arch) {
                html += `<code class="small">${escapeHtml(pkg.arch)}</code>`;
            } else {
                html += '<span class="text-muted">-</span>';
            }
            html += '</td>';
            html += '<td>';
            if (pkg.filename) {
                html += `<small class="text-muted">${escapeHtml(pkg.filename)}</small>`;
            } else {
                html += '<span class="text-muted">-</span>';
            }
            html += '</td>';
            html += '<td>';
            if (pkg.vcs_url) {
                html += '<div>';
                // Repository name links to internal /packages/ URL
                const repoName = pkg.vcs_url.split('/').pop();
                const internalUrl = `/packages/${encodeURIComponent(repoName)}${pkg.vcs_org ? `?org=${encodeURIComponent(pkg.vcs_org)}` : ''}`;
                html += `<a href="${internalUrl}" class="text-decoration-none small">`;
                html += `<i class="fas fa-code-branch"></i> ${escapeHtml(repoName)}`;
                html += '</a>';
                if (pkg.tracking_branch) {
                    html += `<br><small class="text-muted">Branch: <a href="${escapeHtml(mapHostname(pkg.vcs_url))}/src/branch/${escapeHtml(pkg.tracking_branch)}" target="_blank" class="text-decoration-none"><code>${escapeHtml(pkg.tracking_branch)}</code></a></small>`;
                }
                if (pkg.commit_hash) {
                    html += `<br><small class="text-muted">Commit: <a href="${escapeHtml(mapHostname(pkg.vcs_url))}/commit/${escapeHtml(pkg.commit_hash)}" target="_blank" class="text-decoration-none" title="${escapeHtml(pkg.commit_hash)}"><code>${escapeHtml(pkg.commit_hash.substring(0, 8))}...</code></a></small>`;
                }
                html += '</div>';
            } else {
                html += '<span class="text-muted">-</span>';
            }
            html += '</td>';
            html += '<td>';
            if (pkg.disturl) {
                html += formatDisturl(pkg.disturl, pkg.vcs_org);
            } else {
                html += '<span class="text-muted">-</span>';
            }
            html += '</td>';
            html += '<td>';
            // Show all products containing this package (deduplicated by product name + version)
            const uniqueProducts = new Map();
            pkg.products.forEach((product) => {
                const key = `${product.name}:${product.version || ''}`;
                if (!uniqueProducts.has(key)) {
                    uniqueProducts.set(key, product);
                }
            });

            let productIdx = 0;
            uniqueProducts.forEach((product) => {
                if (productIdx > 0) html += '<br>';
                html += `<a href="#" class="text-decoration-none" onclick="jumpToProduct('${escapeHtml(product.full_name)}', '${escapeHtml(pkg.filename || '')}'); return false;">`;
                html += `<strong>${escapeHtml(product.name)}</strong>`;
                if (product.version) {
                    html += ` <span class="text-muted">v${escapeHtml(product.version)}</span>`;
                }
                html += '</a>';
                productIdx++;
            });
            html += '</td>';
            html += '</tr>';
        });

        resultsBody.innerHTML = html;
    } else {
        resultsDiv.style.display = 'block';
        resultCount.textContent = '0 packages';
        resultsBody.innerHTML = '<tr><td colspan="6" class="text-center text-muted py-3">No packages found matching your search</td></tr>';
    }
}

function clearBinarySearch() {
    document.getElementById('binarySearch').value = '';
    document.getElementById('binarySearchResults').style.display = 'none';
}

function searchFiles() {
    const input = document.getElementById('fileSearch');
    const searchTerm = input.value.trim();
    const resultsDiv = document.getElementById('fileSearchResults');
    const resultsBody = document.getElementById('fileSearchResultsBody');
    const resultCount = document.getElementById('fileSearchResultCount');

    if (searchTerm.length < 2) {
        resultsDiv.style.display = 'none';
        return;
    }

    // Show loading
    resultsDiv.style.display = 'block';
    resultCount.textContent = 'Searching...';
    resultsBody.innerHTML = '<tr><td colspan="7" class="text-center py-3"><i class="fas fa-spinner fa-spin"></i> Searching...</td></tr>';

    // Call API to search files in database
    fetch(`/api/products/files?q=${encodeURIComponent(searchTerm)}`)
        .then(response => response.json())
        .then(data => {
            if (data.error) {
                resultsBody.innerHTML = `<tr><td colspan="7" class="text-center text-danger py-3">${escapeHtml(data.error)}</td></tr>`;
                resultCount.textContent = 'Error';
                return;
            }

            const results = data.results || [];
            const count = data.count || 0;

            if (count > 0) {
                resultCount.textContent = `${count} file${count !== 1 ? 's' : ''}`;

                let html = '';
                results.forEach(result => {
                    const packages = result.packages || [];
                    const firstPkg = packages[0] || {};

                    html += '<tr>';
                    html += `<td><code class="small">${escapeHtml(result.file_path)}</code></td>`;
                    html += `<td><code>${escapeHtml(firstPkg.package_name || '-')}</code></td>`;
                    html += '<td>';
                    if (firstPkg.arch) {
                        html += `<code class="small">${escapeHtml(firstPkg.arch)}</code>`;
                    } else {
                        html += '<span class="text-muted">-</span>';
                    }
                    html += '</td>';
                    html += '<td>';
                    html += `<small class="text-muted">${escapeHtml(result.rpm_filename)}</small>`;
                    html += '</td>';
                    html += '<td>';
                    if (firstPkg.vcs_url) {
                        html += '<div>';
                        // Repository name links to internal /packages/ URL
                        const repoName = firstPkg.vcs_url.split('/').pop();
                        const internalUrl = `/packages/${encodeURIComponent(repoName)}${firstPkg.vcs_org ? `?org=${encodeURIComponent(firstPkg.vcs_org)}` : ''}`;
                        html += `<a href="${internalUrl}" class="text-decoration-none small">`;
                        html += `<i class="fas fa-code-branch"></i> ${escapeHtml(repoName)}`;
                        html += '</a>';
                        if (firstPkg.tracking_branch) {
                            html += `<br><small class="text-muted">Branch: <a href="${escapeHtml(mapHostname(firstPkg.vcs_url))}/src/branch/${escapeHtml(firstPkg.tracking_branch)}" target="_blank" class="text-decoration-none"><code>${escapeHtml(firstPkg.tracking_branch)}</code></a></small>`;
                        }
                        if (firstPkg.commit_hash) {
                            html += `<br><small class="text-muted">Commit: <a href="${escapeHtml(mapHostname(firstPkg.vcs_url))}/commit/${escapeHtml(firstPkg.commit_hash)}" target="_blank" class="text-decoration-none" title="${escapeHtml(firstPkg.commit_hash)}"><code>${escapeHtml(firstPkg.commit_hash.substring(0, 8))}...</code></a></small>`;
                        }
                        html += '</div>';
                    } else {
                        html += '<span class="text-muted">-</span>';
                    }
                    html += '</td>';
                    html += '<td>';
                    if (firstPkg.disturl) {
                        html += formatDisturl(firstPkg.disturl, firstPkg.vcs_org);
                    } else {
                        html += '<span class="text-muted">-</span>';
                    }
                    html += '</td>';
                    html += '<td>';
                    // Show all products containing this RPM (deduplicated by product name + version)
                    const uniqueProducts = new Map();
                    packages.forEach((pkg) => {
                        const key = `${pkg.product_name}:${pkg.product_version || ''}`;
                        if (!uniqueProducts.has(key)) {
                            uniqueProducts.set(key, pkg);
                        }
                    });

                    let productIdx = 0;
                    uniqueProducts.forEach((pkg) => {
                        if (productIdx > 0) html += '<br>';
                        html += `<small><a href="#" class="text-decoration-none" onclick="jumpToProduct('${escapeHtml(pkg.product_full_name || '')}', '${escapeHtml(result.rpm_filename || '')}'); return false;">`;
                        html += `<strong>${escapeHtml(pkg.product_name)}</strong>`;
                        if (pkg.product_version) {
                            html += ` <span class="text-muted">v${escapeHtml(pkg.product_version)}</span>`;
                        }
                        html += '</a></small>';
                        productIdx++;
                    });
                    html += '</td>';
                    html += '</tr>';
                });

                resultsBody.innerHTML = html;
            } else {
                resultCount.textContent = '0 files';
                resultsBody.innerHTML = '<tr><td colspan="7" class="text-center text-muted py-3">No files found matching your search</td></tr>';
            }
        })
        .catch(error => {
            console.error('File search error:', error);
            resultCount.textContent = 'Error';
            resultsBody.innerHTML = '<tr><td colspan="7" class="text-center text-danger py-3">Error searching files</td></tr>';
        });
}

function clearFileSearch() {
    document.getElementById('fileSearch').value = '';
    document.getElementById('fileSearchResults').style.display = 'none';
}

function searchVCS() {
    const input = document.getElementById('vcsSearch');
    const searchTerm = input.value.trim();
    const resultsDiv = document.getElementById('vcsSearchResults');
    const resultsBody = document.getElementById('vcsSearchResultsBody');
    const resultCount = document.getElementById('vcsSearchResultCount');

    if (searchTerm.length < 2) {
        resultsDiv.style.display = 'none';
        return;
    }

    // Show loading
    resultsDiv.style.display = 'block';
    resultCount.textContent = 'Searching...';
    resultsBody.innerHTML = '<tr><td colspan="6" class="text-center py-3"><i class="fas fa-spinner fa-spin"></i> Searching...</td></tr>';

    // Call API to search VCS
    fetch(`/api/products/vcs-search?q=${encodeURIComponent(searchTerm)}`)
        .then(response => response.json())
        .then(data => {
            if (data.error) {
                resultsBody.innerHTML = `<tr><td colspan="6" class="text-center text-danger py-3">${escapeHtml(data.error)}</td></tr>`;
                resultCount.textContent = 'Error';
                return;
            }

            const packages = data.packages || [];
            const count = data.count || 0;

            if (count > 0) {
                resultCount.textContent = `${count} package${count !== 1 ? 's' : ''}`;

                let html = '';
                packages.forEach(pkg => {
                    html += '<tr>';
                    html += `<td><code>${escapeHtml(pkg.package_name)}</code></td>`;
                    html += '<td>';
                    if (pkg.arch) {
                        html += `<code class="small">${escapeHtml(pkg.arch)}</code>`;
                    } else {
                        html += '<span class="text-muted">-</span>';
                    }
                    html += '</td>';
                    html += '<td>';
                    if (pkg.filename) {
                        html += `<small class="text-muted">${escapeHtml(pkg.filename)}</small>`;
                    } else {
                        html += '<span class="text-muted">-</span>';
                    }
                    html += '</td>';
                    html += '<td>';
                    if (pkg.vcs_url) {
                        html += '<div>';
                        // Repository name links to internal /packages/ URL
                        const repoName = pkg.vcs_url.split('/').pop();
                        const internalUrl = `/packages/${encodeURIComponent(repoName)}${pkg.vcs_org ? `?org=${encodeURIComponent(pkg.vcs_org)}` : ''}`;
                        html += `<a href="${internalUrl}" class="text-decoration-none small">`;
                        html += `<i class="fas fa-code-branch"></i> ${escapeHtml(repoName)}`;
                        html += '</a>';
                        if (pkg.tracking_branch) {
                            html += `<br><small class="text-muted">Branch: <a href="${escapeHtml(mapHostname(pkg.vcs_url))}/src/branch/${escapeHtml(pkg.tracking_branch)}" target="_blank" class="text-decoration-none"><code>${escapeHtml(pkg.tracking_branch)}</code></a></small>`;
                        }
                        if (pkg.commit_hash) {
                            html += `<br><small class="text-muted">Commit: <a href="${escapeHtml(mapHostname(pkg.vcs_url))}/commit/${escapeHtml(pkg.commit_hash)}" target="_blank" class="text-decoration-none" title="${escapeHtml(pkg.commit_hash)}"><code>${escapeHtml(pkg.commit_hash.substring(0, 8))}...</code></a></small>`;
                        }
                        html += '</div>';
                    } else {
                        html += '<span class="text-muted">-</span>';
                    }
                    html += '</td>';
                    html += '<td>';
                    if (pkg.disturl) {
                        html += formatDisturl(pkg.disturl, pkg.vcs_org);
                    } else {
                        html += '<span class="text-muted">-</span>';
                    }
                    html += '</td>';
                    html += '<td>';
                    // Show product containing this package
                    const product = pkg.product || {};
                    html += `<a href="#" class="text-decoration-none" onclick="jumpToProduct('${escapeHtml(product.full_name || '')}', '${escapeHtml(pkg.filename || '')}'); return false;">`;
                    html += `<strong>${escapeHtml(product.name)}</strong>`;
                    if (product.version) {
                        html += ` <span class="text-muted">v${escapeHtml(product.version)}</span>`;
                    }
                    html += '</a>';
                    html += '</td>';
                    html += '</tr>';
                });

                resultsBody.innerHTML = html;
            } else {
                resultCount.textContent = '0 packages';
                resultsBody.innerHTML = '<tr><td colspan="6" class="text-center text-muted py-3">No packages found matching your VCS criteria</td></tr>';
            }
        })
        .catch(error => {
            console.error('VCS search error:', error);
            resultCount.textContent = 'Error';
            resultsBody.innerHTML = '<tr><td colspan="6" class="text-center text-danger py-3">Error searching VCS repositories</td></tr>';
        });
}

function clearVCSSearch() {
    document.getElementById('vcsSearch').value = '';
    document.getElementById('vcsSearchResults').style.display = 'none';
}

function jumpToProduct(fullName, packageFilename) {
    if (!fullName) {
        console.error('[jumpToProduct] No full_name provided');
        return;
    }

    console.log('[jumpToProduct] Jumping to product:', fullName, 'Package:', packageFilename);

    // Find the product in groupedProductsData
    let foundGroupIndex = null;
    let foundVariantIndex = null;

    groupedProductsData.forEach((group, groupIdx) => {
        group.products.forEach((product, variantIdx) => {
            if (product.full_name === fullName) {
                foundGroupIndex = groupIdx + 1; // 1-based index
                foundVariantIndex = variantIdx + 1; // 1-based index
            }
        });
    });

    if (!foundGroupIndex || !foundVariantIndex) {
        console.error('[jumpToProduct] Product not found:', fullName);
        return;
    }

    const productId = `product-${foundGroupIndex}-${foundVariantIndex}`;
    const groupId = `group-${foundGroupIndex}`;

    console.log('[jumpToProduct] Found product:', productId, 'in group:', groupId);

    // Switch to Product Catalog tab
    const catalogTab = document.getElementById('catalog-tab');
    if (catalogTab) {
        const bsTab = new bootstrap.Tab(catalogTab);
        bsTab.show();
    }

    // Expand the group if not already expanded
    const groupElement = document.getElementById(groupId);
    if (groupElement && !groupElement.classList.contains('show')) {
        const groupToggle = document.querySelector(`[data-bs-target="#${groupId}"]`);
        if (groupToggle) {
            groupToggle.click();
        }
    }

    // Wait for group to expand, then expand the product
    setTimeout(() => {
        const productElement = document.getElementById(productId);
        if (productElement && !productElement.classList.contains('show')) {
            const productToggle = document.querySelector(`[data-bs-target="#${productId}"]`);
            if (productToggle) {
                productToggle.click();
            }
        }

        // Wait for product to expand, then scroll and fill search
        setTimeout(() => {
            // Scroll to the product
            const productRow = document.querySelector(`[data-bs-target="#${productId}"]`);
            if (productRow) {
                productRow.scrollIntoView({ behavior: 'smooth', block: 'center' });
            }

            // Fill in the package filename in the search field
            if (packageFilename) {
                const searchInput = document.querySelector(`#${productId} input[placeholder*="Search binaries"]`);
                if (searchInput) {
                    searchInput.value = packageFilename;
                    // Trigger the filter function
                    const filterFuncName = `filterProductPackages('${foundGroupIndex}-${foundVariantIndex}', '${packageFilename}')`;
                    filterProductPackages(`${foundGroupIndex}-${foundVariantIndex}`, packageFilename);
                    console.log('[jumpToProduct] Filled search field with:', packageFilename);
                }
            }
        }, 350); // Wait for collapse animation
    }, 350); // Wait for collapse animation
}

function escapeHtml(text) {
    if (!text) return '';
    const div = document.createElement('div');
    div.textContent = text;
    return div.innerHTML;
}

function parseDisturl(disturl, vcsOrg) {
    // Parse disturl format: obs://build.opensuse.org/PROJECT/REPOSITORY/HASH-PACKAGE
    // Returns: { org: "ORG", project: "PROJECT", package: "PACKAGE" }
    // Uses vcsOrg from VCS URL if available, otherwise extracts from project
    if (!disturl || !disturl.startsWith('obs://')) {
        return null;
    }

    try {
        // Remove obs:// prefix and split by /
        const parts = disturl.substring(6).split('/');

        if (parts.length < 4) {
            return null;
        }

        // parts[0] = instance (e.g., build.opensuse.org)
        // parts[1] = project (e.g., openSUSE:Backports:SLE-16.1)
        // parts[2] = repository (e.g., standard)
        // parts[3] = hash-package (e.g., 4d2f00d54aade3a65ca2ac15633d87e6-0ad)

        const project = parts[1];
        const hashPackage = parts[3];

        // Use VCS org if provided, otherwise extract from project name
        let org = vcsOrg;
        if (!org) {
            const colonIndex = project.indexOf(':');
            org = colonIndex !== -1 ? project.substring(0, colonIndex) : project;
        }

        // Extract package name from hash-package
        // Format: HASH-PACKAGENAME where HASH is typically 32 hex chars
        const dashIndex = hashPackage.indexOf('-');
        const packageName = dashIndex !== -1 ? hashPackage.substring(dashIndex + 1) : hashPackage;

        return {
            org: org,
            project: project,
            package: packageName,
            url: `/packages/${encodeURIComponent(packageName)}?org=${encodeURIComponent(org)}&project=${encodeURIComponent(project)}`
        };
    } catch (e) {
        console.error('Error parsing disturl:', disturl, e);
        return null;
    }
}

function formatDisturl(disturl, vcsOrg) {
    const parsed = parseDisturl(disturl, vcsOrg);
    if (parsed) {
        return `<a href="${parsed.url}" class="text-decoration-none" title="View in ${escapeHtml(parsed.project)}">` +
               `<i class="fas fa-link"></i> <small>${escapeHtml(parsed.project)}/${escapeHtml(parsed.package)}</small>` +
               `</a>`;
    } else {
        return `<small class="text-muted" title="${escapeHtml(disturl)}">${escapeHtml(disturl.split('/').pop())}</small>`;
    }
}

// Track sort state for each group
const groupSortState = {};

function toggleProductGroup(id) {
    const element = document.getElementById(id);
    const icon = document.getElementById(`${id}-icon`);

    element.addEventListener('shown.bs.collapse', function() {
        icon.classList.remove('fa-chevron-down');
        icon.classList.add('fa-chevron-up');

        // Set initial sort state to full_name when first opened
        const groupIndex = id.replace('group-', '');
        if (!groupSortState[groupIndex]) {
            groupSortState[groupIndex] = {
                field: 'full_name',
                ascending: true
            };
            // Update icon to show it's sorted by full_name
            const nameIcon = document.getElementById(`group-${groupIndex}-sort-full_name`);
            if (nameIcon) {
                nameIcon.className = 'fas fa-sort-up';
            }
        }
    }, { once: true });

    element.addEventListener('hidden.bs.collapse', function() {
        icon.classList.remove('fa-chevron-up');
        icon.classList.add('fa-chevron-down');
    }, { once: true });
}

// State for lazy loading Debug/Source products
let debugSourceProductsLoaded = false;
let debugSourceProductsCache = null;

function toggleDebugSourceProducts() {
    const checkbox = document.getElementById('showDebugSourceProducts');
    const showDebugSource = checkbox.checked;

    if (showDebugSource && !debugSourceProductsLoaded) {
        // First time showing - load from API
        console.log('[toggleDebugSourceProducts] Loading Debug/Source products from API...');

        // Disable checkbox while loading
        checkbox.disabled = true;

        fetch('/api/products/debug-source')
            .then(response => {
                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }
                return response.json();
            })
            .then(data => {
                console.log(`[toggleDebugSourceProducts] Loaded ${data.grouped_products.length} Debug/Source product groups`);
                debugSourceProductsCache = data.grouped_products;
                injectDebugSourceProducts(data.grouped_products);
                debugSourceProductsLoaded = true;
                checkbox.disabled = false;
            })
            .catch(error => {
                console.error('[toggleDebugSourceProducts] Error loading Debug/Source products:', error);
                alert('Failed to load Debug/Source products. Please try again.');
                checkbox.checked = false;
                checkbox.disabled = false;
            });
    } else if (showDebugSource && debugSourceProductsLoaded) {
        // Already loaded - just show them
        console.log('[toggleDebugSourceProducts] Showing cached Debug/Source products');
        showCachedDebugSourceProducts();
    } else {
        // Hide them
        console.log('[toggleDebugSourceProducts] Hiding Debug/Source products');
        hideCachedDebugSourceProducts();
    }
}

function injectDebugSourceProducts(groupedProducts) {
    // For each Debug/Source group, find the matching group in the DOM and append products
    groupedProducts.forEach(group => {
        // Find the product group header by name
        const groupHeaders = document.querySelectorAll('.product-group-row strong');
        let matchingGroupIndex = null;

        groupHeaders.forEach((header, idx) => {
            const groupName = header.textContent.trim().split('\n')[0].replace('💿 ', '').trim();
            if (groupName === group.name) {
                matchingGroupIndex = idx + 1; // Groups are 1-indexed
            }
        });

        if (matchingGroupIndex === null) {
            console.warn(`[injectDebugSourceProducts] Could not find group: ${group.name}`);
            return;
        }

        const tbody = document.getElementById(`group-${matchingGroupIndex}-tbody`);
        if (!tbody) {
            console.warn(`[injectDebugSourceProducts] Could not find tbody for group ${matchingGroupIndex}`);
            return;
        }

        // Find the next product index (count existing products in this group)
        const existingProducts = tbody.querySelectorAll('.product-variant-row').length;

        // Append each Debug/Source product to the group's tbody
        group.products.forEach((product, productIdx) => {
            const globalProductIndex = existingProducts + productIdx + 1;
            const productId = `product-${matchingGroupIndex}-${globalProductIndex}`;

            // Create product variant row
            const variantRow = document.createElement('tr');
            variantRow.className = 'product-variant-row';
            variantRow.setAttribute('data-full-name', product.full_name);
            variantRow.setAttribute('data-version', product.version);
            variantRow.setAttribute('data-build-number', product.build_number);
            variantRow.setAttribute('data-product-index', globalProductIndex);
            variantRow.setAttribute('data-is-debug-source', 'true');

            variantRow.innerHTML = `
                <td><code>${product.full_name}</code></td>
                <td>${product.version}</td>
                <td><span class="badge bg-primary">${product.build_number}</span></td>
                <td>${product.package_count} packages</td>
                <td>
                    <button class="btn btn-sm btn-outline-primary"
                            onclick="toggleProductDetails('${productId}')"
                            data-bs-toggle="collapse"
                            data-bs-target="#${productId}">
                        <i class="fas fa-chevron-down"></i> Details
                    </button>
                </td>
            `;

            // Create product details row
            const detailsRow = document.createElement('tr');
            detailsRow.className = 'collapse product-variant-details';
            detailsRow.id = productId;
            detailsRow.setAttribute('data-is-debug-source', 'true');

            // Build packages table HTML
            let packagesHtml = '';
            if (product.packages && product.packages.length > 0) {
                const packagesJson = JSON.stringify(product.packages).replace(/'/g, '&apos;');
                packagesHtml = `
                    <div class="d-flex justify-content-between align-items-center mt-4 mb-2">
                        <h6 class="mb-0">Packages (<span id="${productId}-total">${product.packages.length}</span>)</h6>
                        <input type="text" class="form-control form-control-sm"
                               style="max-width: 300px;"
                               placeholder="🔍 Search binaries..."
                               onkeyup="filterProductPackages('${matchingGroupIndex}-${globalProductIndex}', this.value)">
                    </div>
                    <div class="table-responsive" style="max-height: 500px; overflow-y: auto;">
                        <table class="table table-sm table-hover">
                            <thead class="sticky-top bg-white">
                                <tr>
                                    <th>Binary Package</th>
                                </tr>
                            </thead>
                            <tbody id="${productId}-packages">
                                ${product.packages.map(pkg => `
                                    <tr class="package-row">
                                        <td><code>${pkg}</code></td>
                                    </tr>
                                `).join('')}
                            </tbody>
                        </table>
                    </div>
                    <script type="application/json" id="${productId}-packages-data">${packagesJson}<\/script>
                `;
            }

            detailsRow.innerHTML = `
                <td colspan="6">
                    <div class="card bg-light border-0">
                        <div class="card-body">
                            <h5>Product Details</h5>
                            <dl class="row mb-3">
                                <dt class="col-sm-3">SPDX File</dt>
                                <dd class="col-sm-9"><code>${product.file_name}</code></dd>

                                <dt class="col-sm-3">Last Modified</dt>
                                <dd class="col-sm-9">${new Date(product.file_mtime * 1000).toLocaleString()}</dd>
                            </dl>
                            ${packagesHtml}
                        </div>
                    </div>
                </td>
            `;

            // Append both rows to tbody
            tbody.appendChild(variantRow);
            tbody.appendChild(detailsRow);
        });

        // Update the variant count badge for this group
        // The badge is in the group header row (previous sibling of the collapse row)
        const collapseRow = document.getElementById(`group-${matchingGroupIndex}`);
        if (collapseRow) {
            const headerRow = collapseRow.previousElementSibling;
            const badge = headerRow?.querySelector('.badge');
            if (badge) {
                const currentCount = parseInt(badge.textContent);
                const newCount = currentCount + group.products.length;
                badge.textContent = `${newCount} variant${newCount !== 1 ? 's' : ''}`;
            }
        }
    });

    console.log('[injectDebugSourceProducts] Injection complete');
}

function showCachedDebugSourceProducts() {
    const debugSourceRows = document.querySelectorAll('.product-variant-row[data-is-debug-source="true"], .product-variant-details[data-is-debug-source="true"]');
    debugSourceRows.forEach(row => {
        row.style.display = '';
    });
    console.log(`[showCachedDebugSourceProducts] Showed ${debugSourceRows.length / 2} Debug/Source variants`);
}

function hideCachedDebugSourceProducts() {
    const debugSourceRows = document.querySelectorAll('.product-variant-row[data-is-debug-source="true"], .product-variant-details[data-is-debug-source="true"]');
    debugSourceRows.forEach(row => {
        row.style.display = 'none';

        // If this is a details row that's expanded, collapse it
        if (row.classList.contains('product-variant-details') && row.classList.contains('show')) {
            const collapseInstance = bootstrap.Collapse.getInstance(row);
            if (collapseInstance) {
                collapseInstance.hide();
            }
        }
    });
    console.log(`[hideCachedDebugSourceProducts] Hid ${debugSourceRows.length / 2} Debug/Source variants`);
}

function sortGroupProducts(groupIndex, sortBy) {
    const tbody = document.getElementById(`group-${groupIndex}-tbody`);
    if (!tbody) return;

    const rows = Array.from(tbody.querySelectorAll('tr[data-product-index]'));

    // Initialize sort state for this group if needed
    if (!groupSortState[groupIndex]) {
        groupSortState[groupIndex] = {};
    }

    // Toggle sort direction if clicking the same column
    const currentSort = groupSortState[groupIndex];
    let ascending = true;
    if (currentSort.field === sortBy) {
        ascending = !currentSort.ascending;
    }

    // Sort rows
    rows.sort((a, b) => {
        let aVal, bVal;

        if (sortBy === 'full_name') {
            aVal = a.getAttribute('data-full-name');
            bVal = b.getAttribute('data-full-name');
        } else if (sortBy === 'version') {
            aVal = a.getAttribute('data-version');
            bVal = b.getAttribute('data-version');
        } else if (sortBy === 'build_number') {
            aVal = a.getAttribute('data-build-number');
            bVal = b.getAttribute('data-build-number');
        }

        if (aVal < bVal) return ascending ? -1 : 1;
        if (aVal > bVal) return ascending ? 1 : -1;
        return 0;
    });

    // Clear tbody and re-append sorted rows
    tbody.innerHTML = '';
    rows.forEach(row => tbody.appendChild(row));

    // Update sort state
    groupSortState[groupIndex] = {
        field: sortBy,
        ascending: ascending
    };

    // Update sort icons
    ['full_name', 'version', 'build_number'].forEach(field => {
        const icon = document.getElementById(`group-${groupIndex}-sort-${field}`);
        if (icon) {
            icon.className = 'fas fa-sort';
            if (field === sortBy) {
                icon.className = ascending ? 'fas fa-sort-up' : 'fas fa-sort-down';
            }
        }
    });
}

function toggleProductDetails(id) {
    const element = document.getElementById(id);
    const button = document.querySelector(`[data-bs-target="#${id}"] i`);

    element.addEventListener('shown.bs.collapse', function() {
        button.classList.remove('fa-chevron-down');
        button.classList.add('fa-chevron-up');
    });

    element.addEventListener('hidden.bs.collapse', function() {
        button.classList.remove('fa-chevron-up');
        button.classList.add('fa-chevron-down');
    });
}

// Pagination state for each product
const productPaginationState = {};
const PACKAGES_PER_PAGE = 100;

function initializeProductPackages(productIndex) {
    const dataElement = document.getElementById(`product-${productIndex}-packages-data`);
    if (!dataElement) return;

    const packages = JSON.parse(dataElement.textContent);

    productPaginationState[productIndex] = {
        allPackages: packages,
        filteredPackages: packages,
        currentPage: 1,
        filter: ''
    };

    renderProductPackages(productIndex);
}

function renderProductPackages(productIndex) {
    const state = productPaginationState[productIndex];
    if (!state) return;

    const tbody = document.getElementById(`product-${productIndex}-packages-tbody`);
    const pageInfo = document.getElementById(`product-${productIndex}-page-info`);
    const prevButton = document.getElementById(`product-${productIndex}-prev`);
    const nextButton = document.getElementById(`product-${productIndex}-next`);
    const totalElement = document.getElementById(`product-${productIndex}-total`);

    const totalPackages = state.filteredPackages.length;
    const totalPages = Math.ceil(totalPackages / PACKAGES_PER_PAGE);
    const startIndex = (state.currentPage - 1) * PACKAGES_PER_PAGE;
    const endIndex = Math.min(startIndex + PACKAGES_PER_PAGE, totalPackages);
    const packagesToShow = state.filteredPackages.slice(startIndex, endIndex);

    // Update total count
    if (totalElement) {
        totalElement.textContent = totalPackages;
    }

    // Render packages
    let html = '';
    packagesToShow.forEach(pkg => {
        html += '<tr>';
        html += `<td><code>${escapeHtml(pkg.package_name || '')}</code></td>`;
        html += '<td>';
        if (pkg.arch) {
            html += `<code class="small">${escapeHtml(pkg.arch)}</code>`;
        } else {
            html += '<span class="text-muted">-</span>';
        }
        html += '</td>';
        html += '<td>';
        if (pkg.filename) {
            html += `<small class="text-muted">${escapeHtml(pkg.filename)}</small>`;
        } else {
            html += '<span class="text-muted">-</span>';
        }
        html += '</td>';
        html += '<td>';
        if (pkg.vcs_url) {
            html += '<div>';
            // Repository name links to internal /packages/ URL
            const repoName = pkg.vcs_url.split('/').pop();
            const internalUrl = `/packages/${encodeURIComponent(repoName)}${pkg.vcs_org ? `?org=${encodeURIComponent(pkg.vcs_org)}` : ''}`;
            html += `<a href="${internalUrl}" class="text-decoration-none small">`;
            html += `<i class="fas fa-code-branch"></i> ${escapeHtml(repoName)}`;
            html += '</a>';
            if (pkg.tracking_branch) {
                html += `<br><small class="text-muted">Branch: <a href="${escapeHtml(mapHostname(pkg.vcs_url))}/src/branch/${escapeHtml(pkg.tracking_branch)}" target="_blank" class="text-decoration-none"><code>${escapeHtml(pkg.tracking_branch)}</code></a></small>`;
            }
            if (pkg.commit_hash) {
                html += `<br><small class="text-muted">Commit: <a href="${escapeHtml(mapHostname(pkg.vcs_url))}/commit/${escapeHtml(pkg.commit_hash)}" target="_blank" class="text-decoration-none" title="${escapeHtml(pkg.commit_hash)}"><code>${escapeHtml(pkg.commit_hash.substring(0, 8))}...</code></a></small>`;
            }
            html += '</div>';
        } else {
            html += '<span class="text-muted">-</span>';
        }
        html += '</td>';
        html += '<td>';
        if (pkg.disturl) {
            html += `<span class="disturl-link" data-disturl="${escapeHtml(pkg.disturl)}" data-vcs-org="${escapeHtml(pkg.vcs_org || '')}"></span>`;
        } else {
            html += '<span class="text-muted">-</span>';
        }
        html += '</td>';
        html += '</tr>';
    });
    tbody.innerHTML = html;

    // Process disturl links
    tbody.querySelectorAll('.disturl-link').forEach(element => {
        const disturl = element.getAttribute('data-disturl');
        const vcsOrg = element.getAttribute('data-vcs-org');
        if (disturl) {
            element.innerHTML = formatDisturl(disturl, vcsOrg);
        }
    });

    // Update pagination info
    if (totalPackages > 0) {
        pageInfo.textContent = `Page ${state.currentPage} of ${totalPages} (showing ${startIndex + 1}-${endIndex} of ${totalPackages})`;
    } else {
        pageInfo.textContent = 'No packages found';
    }

    // Update button states
    prevButton.disabled = state.currentPage === 1;
    nextButton.disabled = state.currentPage >= totalPages || totalPackages === 0;
}

function changeProductPage(productIndex, delta) {
    const state = productPaginationState[productIndex];
    if (!state) return;

    const totalPages = Math.ceil(state.filteredPackages.length / PACKAGES_PER_PAGE);
    const newPage = state.currentPage + delta;

    if (newPage >= 1 && newPage <= totalPages) {
        state.currentPage = newPage;
        renderProductPackages(productIndex);
    }
}

function filterProductPackages(productIndex, searchText) {
    const state = productPaginationState[productIndex];
    if (!state) return;

    const filter = searchText.toLowerCase().trim();
    state.filter = filter;

    if (filter === '') {
        state.filteredPackages = state.allPackages;
    } else {
        state.filteredPackages = state.allPackages.filter(pkg => {
            const searchableText = `${pkg.package_name || ''} ${pkg.filename || ''} ${pkg.arch || ''}`.toLowerCase();
            return searchableText.indexOf(filter) !== -1;
        });
    }

    // Reset to page 1 when filtering
    state.currentPage = 1;
    renderProductPackages(productIndex);
}

// Process disturl links on page load
document.addEventListener('DOMContentLoaded', function() {
    const disturlElements = document.querySelectorAll('.disturl-link');
    disturlElements.forEach(element => {
        const disturl = element.getAttribute('data-disturl');
        if (disturl) {
            element.innerHTML = formatDisturl(disturl);
        }
    });

    // Initialize pagination for all products (now with groupIndex-variantIndex format)
    const productDataElements = document.querySelectorAll('[id$="-packages-data"]');
    productDataElements.forEach(element => {
        const match = element.id.match(/^product-(\d+-\d+)-packages-data$/);
        if (match) {
            const productIndex = match[1]; // e.g., "1-1", "1-2", etc.
            initializeProductPackages(productIndex);
        }
    });

    // Hide loading overlay and show search interface
    const loadingOverlay = document.getElementById('searchLoadingOverlay');
    const searchInterface = document.getElementById('searchInterface');

    if (loadingOverlay) {
        loadingOverlay.style.display = 'none';
    }
    if (searchInterface) {
        searchInterface.style.display = 'block';
    }

    // Enable search fields after initialization is complete
    const binarySearchInput = document.getElementById('binarySearch');
    const fileSearchInput = document.getElementById('fileSearch');
    const vcsSearchInput = document.getElementById('vcsSearch');

    if (binarySearchInput) {
        binarySearchInput.disabled = false;
        binarySearchInput.placeholder = 'Search binary packages (press Enter)...';
    }
    if (fileSearchInput) {
        fileSearchInput.disabled = false;
        fileSearchInput.placeholder = 'Search files (press Enter)...';
    }
    if (vcsSearchInput) {
        vcsSearchInput.disabled = false;
        vcsSearchInput.placeholder = 'e.g., pool/glibc@leap-16.0 or commit hash (press Enter)...';
    }

    // Enable clear buttons
    const clearButtons = document.querySelectorAll('#binarySearch ~ button, #fileSearch ~ button, #vcsSearch ~ button');
    clearButtons.forEach(btn => btn.disabled = false);

    // Check URL parameters for auto-search (tab was already switched in immediate script)
    const urlParams = new URLSearchParams(window.location.search);
    const vcsSearchParam = urlParams.get('vcs_search');

    if (vcsSearchParam) {
        // Value was already set in immediate script, just trigger search
        setTimeout(() => searchVCS(), 100);
    }
});
</script>
{% endblock %}