{% 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">
                    <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>
                    </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>
                    </div>
                </div>

                <!-- Products Table - Grouped by Name -->

                <div class="table-responsive">
                    <table class="table table-hover">
                        <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">
                                <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" 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 %}
                                            <tr data-full-name="{{ product.full_name }}"
                                                data-version="{{ product.version }}"
                                                data-build-number="{{ product.build_number }}"
                                                data-product-index="{{ loop.index }}">
                                                <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" id="product-{{ group_index }}-{{ loop.index }}">
                                                <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>
</div>

<script>
// 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(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(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 += `<strong>${escapeHtml(product.name)}</strong>`;
                if (product.version) {
                    html += ` <span class="text-muted">v${escapeHtml(product.version)}</span>`;
                }
                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(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(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><strong>${escapeHtml(pkg.product_name)}</strong>`;
                        if (pkg.product_version) {
                            html += ` <span class="text-muted">v${escapeHtml(pkg.product_version)}</span>`;
                        }
                        html += '</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 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 });
}

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(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(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);
        }
    });

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

    if (binarySearchInput) {
        binarySearchInput.disabled = false;
        binarySearchInput.placeholder = 'Search binary packages (press Enter)...';
    }
    if (fileSearchInput) {
        fileSearchInput.disabled = false;
        fileSearchInput.placeholder = 'Search files (press Enter)...';
    }

    // Enable clear buttons
    const clearButtons = document.querySelectorAll('#binarySearch ~ button, #fileSearch ~ button');
    clearButtons.forEach(btn => btn.disabled = false);
});
</script>
{% endblock %}