{% 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-boxes"></i> Product Packages</h2>
                        <p class="text-muted mb-0">All packages from SPDX products</p>
                    </div>
                    <a href="/products" class="btn btn-outline-light">
                        <i class="fas fa-arrow-left"></i> Back to Products
                    </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. More package data will appear as the SPDX scan progresses.
                    </p>
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
                {% endif %}

                {% if packages %}
                <div class="mb-3">
                    <div class="row">
                        <div class="col-md-6">
                            <p class="text-muted mb-2">
                                <strong>{{ package_count }}</strong> package(s) total
                            </p>
                        </div>
                        <div class="col-md-6">
                            <input type="text" id="packageSearch" class="form-control"
                                   placeholder="🔍 Search packages by name, filename, VCS, or product..."
                                   onkeyup="filterPackages()">
                        </div>
                    </div>
                </div>

                <div class="table-responsive">
                    <table class="table table-hover table-striped" id="packagesTable">
                        <thead class="table-light sticky-top">
                            <tr>
                                <th style="width: 12%;">Package Name</th>
                                <th style="width: 8%;">Arch</th>
                                <th style="width: 15%;">Source Filename</th>
                                <th style="width: 25%;">VCS</th>
                                <th style="width: 15%;">Build Area</th>
                                <th style="width: 25%;">Product</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for pkg in packages %}
                            <tr>
                                <td><code>{{ pkg.package_name }}</code></td>
                                <td>
                                    {% if pkg.arch %}
                                    <code class="small">{{ pkg.arch }}</code>
                                    {% else %}
                                    <span class="text-muted">-</span>
                                    {% endif %}
                                </td>
                                <td>
                                    {% if pkg.filename %}
                                    <small class="text-muted">{{ pkg.filename }}</small>
                                    {% else %}
                                    <span class="text-muted">-</span>
                                    {% endif %}
                                </td>
                                <td>
                                    {% if pkg.vcs_url %}
                                    <div>
                                        {% set repo_name = pkg.vcs_url.split('/')[-1] %}
                                        <a href="/packages/{{ repo_name }}{% if pkg.vcs_org %}?org={{ pkg.vcs_org }}{% endif %}" class="text-decoration-none small">
                                            <i class="fas fa-code-branch"></i> {{ repo_name }}
                                        </a>
                                        {% if pkg.tracking_branch %}
                                        <br><small class="text-muted">Branch: <a href="{{ pkg.vcs_url }}/src/branch/{{ pkg.tracking_branch }}" target="_blank" class="text-decoration-none"><code>{{ pkg.tracking_branch }}</code></a></small>
                                        {% endif %}
                                        {% if pkg.commit_hash %}
                                        <br><small class="text-muted">Commit: <a href="{{ pkg.vcs_url }}/commit/{{ pkg.commit_hash }}" target="_blank" class="text-decoration-none" title="{{ pkg.commit_hash }}"><code>{{ pkg.commit_hash[:8] }}...</code></a></small>
                                        {% endif %}
                                    </div>
                                    {% else %}
                                    <span class="text-muted">-</span>
                                    {% endif %}
                                </td>
                                <td>
                                    {% if pkg.disturl %}
                                    <span class="disturl-link" data-disturl="{{ pkg.disturl }}"></span>
                                    {% else %}
                                    <span class="text-muted">-</span>
                                    {% endif %}
                                </td>
                                <td>
                                    <div>
                                        <strong>{{ pkg.product.name }}</strong>
                                        {% if pkg.product.version %}
                                        <span class="text-muted">v{{ pkg.product.version }}</span>
                                        {% endif %}
                                    </div>
                                    <small class="text-muted">
                                        Build {{ pkg.product.build_number }}
                                    </small>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>

                <div class="mt-3">
                    <p class="text-muted small">
                        <i class="fas fa-info-circle"></i>
                        Showing <span id="visibleCount">{{ package_count }}</span> of {{ package_count }} packages
                    </p>
                </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">
                        Package 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 Packages Found</h4>
                    <p class="text-muted">No package data available from SPDX products.</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>
function filterPackages() {
    const input = document.getElementById('packageSearch');
    const filter = input.value.toLowerCase();
    const table = document.getElementById('packagesTable');
    const rows = table.getElementsByTagName('tbody')[0].getElementsByTagName('tr');

    let visibleCount = 0;

    for (let i = 0; i < rows.length; i++) {
        const row = rows[i];
        const text = row.textContent || row.innerText;

        if (text.toLowerCase().indexOf(filter) > -1) {
            row.style.display = '';
            visibleCount++;
        } else {
            row.style.display = 'none';
        }
    }

    // Update visible count
    const countElement = document.getElementById('visibleCount');
    if (countElement) {
        countElement.textContent = visibleCount;
    }
}

function parseDisturl(disturl) {
    // Parse disturl format: obs://build.opensuse.org/PROJECT/REPOSITORY/HASH-PACKAGE
    // Returns: { org: "ORG", project: "PROJECT", package: "PACKAGE" }
    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];

        // Extract organization from project (first part before colon)
        const colonIndex = project.indexOf(':');
        const 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) {
    const parsed = parseDisturl(disturl);
    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 {
        const escapedDisturl = escapeHtml(disturl);
        const escapedText = escapeHtml(disturl.split('/').pop());
        return `<small class="text-muted" title="${escapedDisturl}">${escapedText}</small>`;
    }
}

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

// 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);
        }
    });
});
</script>
{% endblock %}