{% extends "base.html" %}

{% block content %}
{% if cache_built %}
<div class="row mb-3">
    <div class="col-12">
        <div class="alert alert-info alert-dismissible fade show" role="alert">
            <i class="fas fa-info-circle"></i>
            <strong>Initial Data Loaded</strong> - Project and Git repository lists have been fetched and cached.
            This initial load may have taken a moment. The interface will now be much faster on subsequent visits.
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    </div>
</div>
{% endif %}
<!-- Marked Git Pool Repositories Section -->
<div class="row mb-4">
    <div class="col-12">
        <div class="card border-0 shadow">
            <div class="card-header bg-gradient border-0">
                <h4 class="mb-0">
                    <i class="fas fa-star text-info"></i> Sources in Package Git Repositories
                    <span class="badge bg-info text-dark float-end" id="markedPackagesCount">0</span>
                </h4>
            </div>
            <div class="card-body">
                <div class="text-center py-3" id="markedPackagesLoader">
                    <div class="spinner-border text-info" role="status">
                        <span class="visually-hidden">Loading...</span>
                    </div>
                </div>
                <div id="markedPackagesContent" style="display: none;">
                    <div class="row" id="markedPackagesList">
                        <!-- Marked packages will be inserted here -->
                    </div>
                    <div class="text-center mt-3">
                        <a href="/packages" class="btn btn-primary">
                            <i class="fab fa-git-square"></i> View All {{ total_packages }} Git Pool Repositories
                        </a>
                        <a href="/organisations" class="btn btn-outline-secondary ms-2">
                            <i class="fas fa-sitemap"></i> Browse Organisations
                        </a>
                    </div>
                </div>
                <div id="markedPackagesEmpty" class="text-center py-4" style="display: none;">
                    <i class="far fa-star fa-3x text-muted mb-3"></i>
                    <h5 class="text-muted">No Marked Package Git Repositories</h5>
                    <p class="text-muted mb-3">Mark your favorite package git repositories to see them here</p>
                    <a href="/packages" class="btn btn-primary">
                        <i class="fab fa-git-square"></i> Browse All {{ total_packages }} Git Pool Repositories
                    </a>
                    <a href="/organisations" class="btn btn-outline-secondary ms-2">
                        <i class="fas fa-sitemap"></i> Browse Organisations
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Marked Projects Section -->
<div class="row mb-4">
    <div class="col-12">
        <div class="card border-0 shadow">
            <div class="card-header bg-gradient border-0">
                <h4 class="mb-0">
                    <i class="fas fa-star text-warning"></i> States in Build Areas
                    <span class="badge bg-warning text-dark float-end" id="markedProjectsCount">0</span>
                </h4>
            </div>
            <div class="card-body">
                <div class="text-center py-3" id="markedProjectsLoader">
                    <div class="spinner-border text-warning" role="status">
                        <span class="visually-hidden">Loading...</span>
                    </div>
                </div>
                <div id="markedProjectsContent" style="display: none;">
                    <div class="row" id="markedProjectsList">
                        <!-- Marked projects will be inserted here -->
                    </div>
                    <div class="text-center mt-3">
                        <a href="/projects" class="btn btn-primary">
                            <i class="fas fa-list"></i> View All {{ total_projects }} OBS Projects
                        </a>
                    </div>
                </div>
                <div id="markedProjectsEmpty" class="text-center py-4" style="display: none;">
                    <i class="far fa-star fa-3x text-muted mb-3"></i>
                    <h5 class="text-muted">No Marked Build Areas</h5>
                    <p class="text-muted mb-3">Mark your favorite build areas to see them here</p>
                    <a href="/projects" class="btn btn-primary">
                        <i class="fas fa-list"></i> Browse All {{ total_projects }} Build Areas
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Binary Search Section -->
<div class="row">
    <div class="col-12">
        <div class="card border-0 shadow">
            <div class="card-header bg-gradient border-0">
                <h4 class="mb-0">
                    <i class="fas fa-search text-success"></i> Published Binaries
                </h4>
            </div>
            <div class="card-body">
                <p class="text-muted small mb-3">Search for published binaries across all repositories</p>

                <!-- Search Input -->
                <div class="input-group mb-3">
                    <input type="text"
                           class="form-control search-box"
                           id="binarySearchInput"
                           placeholder="Enter binary name (e.g., bash, python3, gcc)..."
                           aria-label="Binary search">
                    <button class="btn btn-success" type="button" id="binarySearchBtn">
                        <i class="fas fa-search"></i> Search
                    </button>
                </div>

                <!-- Filter Options -->
                <div class="form-check mb-3">
                    <input class="form-check-input" type="checkbox" id="filterSecondaryBinaries" checked>
                    <label class="form-check-label" for="filterSecondaryBinaries">
                        Filter secondary binaries (.src.rpm, .nosrc.rpm)
                    </label>
                </div>

                <!-- Search Status -->
                <div id="binarySearchStatus" style="display: none;">
                    <div class="alert alert-info mb-3">
                        <i class="fas fa-info-circle"></i>
                        <span id="binarySearchStatusText">Searching...</span>
                    </div>
                </div>

                <!-- Loading Indicator -->
                <div class="text-center py-3" id="binarySearchLoader" style="display: none;">
                    <div class="spinner-border text-success" role="status">
                        <span class="visually-hidden">Searching...</span>
                    </div>
                    <p class="text-muted mt-2">Searching for binaries (this may take a moment)...</p>
                </div>

                <!-- Results Container -->
                <div id="binarySearchResults" style="display: none;">
                    <h5 class="mb-3">
                        <i class="fas fa-list"></i> Search Results
                        <span class="badge bg-success" id="binaryResultCount">0</span>
                    </h5>
                    <div id="binaryResultsList">
                        <!-- Results will be inserted here -->
                    </div>
                </div>

                <!-- Empty/Initial State -->
                <div id="binarySearchEmpty" class="text-center py-4">
                    <i class="fas fa-search fa-3x text-muted mb-3"></i>
                    <h5 class="text-muted">Search for Published Binaries</h5>
                    <p class="text-muted">Enter a binary name above and press Enter or click Search</p>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
// Backend identifier for cookie namespacing
const BACKEND_ID = '{{ backend_id }}';

// Cookie utilities
function getCookie(name) {
    const value = `; ${document.cookie}`;
    const parts = value.split(`; ${name}=`);
    if (parts.length === 2) return parts.pop().split(';').shift();
    return '';
}

function setCookie(name, value, days = 365) {
    const date = new Date();
    date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
    document.cookie = `${name}=${value};expires=${date.toUTCString()};path=/`;
}

// Get marked projects from cookies
function getMarkedProjects() {
    const marked = getCookie(`markedProjects_${BACKEND_ID}`);
    return marked ? JSON.parse(decodeURIComponent(marked)) : [];
}

// Save marked projects to cookies
function saveMarkedProjects(projects) {
    setCookie(`markedProjects_${BACKEND_ID}`, encodeURIComponent(JSON.stringify(projects)));
}

// Get marked packages from cookies
function getMarkedPackages() {
    const marked = getCookie(`markedPackages_${BACKEND_ID}`);
    return marked ? JSON.parse(decodeURIComponent(marked)) : [];
}

// Save marked packages to cookies
function saveMarkedPackages(packages) {
    setCookie(`markedPackages_${BACKEND_ID}`, encodeURIComponent(JSON.stringify(packages)));
}

// Toggle project mark
function toggleProjectMark(projectName) {
    let marked = getMarkedProjects();
    const index = marked.indexOf(projectName);

    if (index > -1) {
        marked.splice(index, 1);
    } else {
        marked.push(projectName);
    }

    saveMarkedProjects(marked);
    updateProjectsUI();
}

// Toggle package mark
function togglePackageMark(packageName) {
    let marked = getMarkedPackages();
    const index = marked.indexOf(packageName);

    if (index > -1) {
        marked.splice(index, 1);
    } else {
        marked.push(packageName);
    }

    saveMarkedPackages(marked);
    updatePackagesUI();
}

// Update projects UI based on marked projects
function updateProjectsUI() {
    const marked = getMarkedProjects();
    const loader = document.getElementById('markedProjectsLoader');
    const content = document.getElementById('markedProjectsContent');
    const empty = document.getElementById('markedProjectsEmpty');
    const markedList = document.getElementById('markedProjectsList');
    const markedCount = document.getElementById('markedProjectsCount');

    // Update count
    markedCount.textContent = marked.length;

    // Hide loader
    loader.style.display = 'none';

    // Show content or empty state
    if (marked.length > 0) {
        content.style.display = '';
        empty.style.display = 'none';

        // Populate marked projects
        markedList.innerHTML = marked.map(project => `
            <div class="col-md-6 col-lg-4 mb-2">
                <div class="p-2 rounded hover-highlight d-flex align-items-center justify-content-between">
                    <div>
                        <i class="fas fa-industry text-warning me-2"></i>
                        <a href="/projects/${encodeURIComponent(project)}" class="project-link text-decoration-none">${project}</a>
                    </div>
                    <button class="btn btn-sm btn-link mark-btn p-0" data-project="${project}" title="Unmark project">
                        <i class="fas fa-star text-warning"></i>
                    </button>
                </div>
            </div>
        `).join('');

        // Add event listeners to marked project buttons
        markedList.querySelectorAll('.mark-btn').forEach(btn => {
            btn.addEventListener('click', function(e) {
                e.preventDefault();
                toggleProjectMark(this.getAttribute('data-project'));
            });
        });
    } else {
        content.style.display = 'none';
        empty.style.display = '';
    }
}

// Update packages UI based on marked packages
function updatePackagesUI() {
    const marked = getMarkedPackages();
    const loader = document.getElementById('markedPackagesLoader');
    const content = document.getElementById('markedPackagesContent');
    const empty = document.getElementById('markedPackagesEmpty');
    const markedList = document.getElementById('markedPackagesList');
    const markedCount = document.getElementById('markedPackagesCount');

    // Update count
    markedCount.textContent = marked.length;

    // Hide loader
    loader.style.display = 'none';

    // Show content or empty state
    if (marked.length > 0) {
        content.style.display = '';
        empty.style.display = 'none';

        // Populate marked packages
        markedList.innerHTML = marked.map(pkg => `
            <div class="col-md-6 col-lg-4 mb-2">
                <div class="p-2 rounded hover-highlight d-flex align-items-center justify-content-between">
                    <div>
                        <i class="fab fa-git-square text-info me-2"></i>
                        <a href="/packages/${encodeURIComponent(pkg)}" class="project-link text-decoration-none">${pkg}</a>
                    </div>
                    <button class="btn btn-sm btn-link mark-pkg-btn p-0" data-package="${pkg}" title="Unmark package">
                        <i class="fas fa-star text-info"></i>
                    </button>
                </div>
            </div>
        `).join('');

        // Add event listeners to marked package buttons
        markedList.querySelectorAll('.mark-pkg-btn').forEach(btn => {
            btn.addEventListener('click', function(e) {
                e.preventDefault();
                togglePackageMark(this.getAttribute('data-package'));
            });
        });
    } else {
        content.style.display = 'none';
        empty.style.display = '';
    }
}

// Binary Search Functionality
let currentBinarySearch = null;
let showNonScmResults = false;
let filterSecondaryBinaries = true;  // Default: hide .src.rpm and .nosrc.rpm
let lastSearchData = null;  // Store last search results for re-rendering

// Extract repository URL from binary download URL
// Example: https://download.opensuse.org/repositories/PROJECT/REPO/ARCH/file.rpm
// Result: https://download.opensuse.org/repositories/PROJECT/REPO/
function getRepositoryUrl(downloadUrl) {
    if (!downloadUrl) return null;

    // Remove the last two path segments (arch/filename)
    const parts = downloadUrl.split('/');
    if (parts.length < 2) return null;

    // Remove filename and arch
    parts.pop(); // Remove filename
    parts.pop(); // Remove arch

    return parts.join('/') + '/';
}

function buildResultsTable(results, tableId) {
    // Filter results if secondary binary filter is enabled
    let filteredResults = results;
    if (filterSecondaryBinaries) {
        filteredResults = results.filter(result => {
            const name = result.name || '';
            return !name.endsWith('.src.rpm') && !name.endsWith('.nosrc.rpm');
        });
    }

    let html = `<div class="table-responsive" id="${tableId}">`;
    html += '<table class="table table-sm table-striped">';
    html += '<thead><tr>';
    html += '<th style="width: 40px;"></th>';
    html += '<th style="width: 40px;"></th>';
    html += '<th>Binary Name</th>';
    html += '<th>Build Area</th>';
    html += '<th>Repository</th>';
    html += '<th>Architecture</th>';
    html += '<th>Version</th>';
    html += '</tr></thead><tbody>';

    filteredResults.forEach(result => {
        html += '<tr>';

        // Gitea icon column
        html += '<td>';
        if (result.source_url) {
            html += `<a href="${result.source_url}" target="_blank" title="View in Gitea">`;
            html += `<i class="fab fa-git-alt text-info"></i>`;
            html += '</a>';
        }
        html += '</td>';

        // Repository download button column
        html += '<td>';
        const repoUrl = getRepositoryUrl(result.download_url);
        if (repoUrl) {
            html += `<a href="${repoUrl}" target="_blank" title="View repository">`;
            html += `<i class="fas fa-database text-success"></i>`;
            html += '</a>';
        }
        html += '</td>';

        // Binary name - clickable download link
        html += '<td>';
        if (result.download_url) {
            html += `<a href="${result.download_url}" class="project-link" download>`;
            html += `<code>${result.name}</code>`;
            html += '</a>';
        } else {
            html += `<code>${result.name}</code>`;
        }
        html += '</td>';

        // Build Area column - link to Git repository page if available
        html += '<td>';
        if (result.git_org && result.git_repo) {
            // Link to git repository page with organization query parameter
            html += `<a href="/packages/${encodeURIComponent(result.git_repo)}?org=${encodeURIComponent(result.git_org)}" class="project-link">`;
            html += `${result.project}/${result.package}`;
            html += '</a>';
        } else {
            // No git info, just show project/package name
            html += `${result.project}/${result.package || '-'}`;
        }
        html += '</td>';

        html += `<td>${result.repository || '-'}</td>`;
        html += `<td>${result.arch || '-'}</td>`;
        html += `<td>${result.version || '-'}</td>`;
        html += '</tr>';
    });

    html += '</tbody></table></div>';
    return html;
}

function renderSearchResults(data, searchTerm) {
    const withScmCount = data.count_with_scm || 0;
    const withoutScmCount = data.count_without_scm || 0;
    const totalCount = data.total_count || 0;

    // Update count badge
    const resultCount = document.getElementById('binaryResultCount');
    // Count only non-filtered results
    let displayCount = withScmCount;
    if (filterSecondaryBinaries && data.results_with_scm) {
        displayCount = data.results_with_scm.filter(r => {
            const name = r.name || '';
            return !name.endsWith('.src.rpm') && !name.endsWith('.nosrc.rpm');
        }).length;
    }
    resultCount.textContent = displayCount;

    const resultsList = document.getElementById('binaryResultsList');

    if (totalCount === 0) {
        resultsList.innerHTML = `
            <div class="alert alert-info">
                <i class="fas fa-info-circle"></i>
                No binaries found matching "${searchTerm}"
            </div>
        `;
    } else {
        let html = '';

        // Show results with SCM
        if (withScmCount > 0) {
            html += '<h6 class="mb-2"><i class="fas fa-code-branch text-success"></i> Git-Managed Binaries</h6>';
            html += buildResultsTable(data.results_with_scm, 'resultsWithScm');
        } else {
            html += `
                <div class="alert alert-info">
                    <i class="fas fa-info-circle"></i>
                    No git-managed binaries found matching "${searchTerm}"
                </div>
            `;
        }

        // Add toggle button if there are results without SCM
        if (withoutScmCount > 0) {
            html += `
                <div class="mt-3 mb-3">
                    <button class="btn btn-sm btn-outline-secondary" id="toggleNonScmResults">
                        <i class="fas fa-eye"></i> Show ${withoutScmCount} Legacy Result(s) without Git Source
                    </button>
                </div>
                <div id="nonScmResults" style="display: none;">
                    <h6 class="mb-2"><i class="fas fa-box text-muted"></i> Legacy Binaries (No Git Source)</h6>
                    ${buildResultsTable(data.results_without_scm, 'resultsWithoutScm')}
                </div>
            `;
        }

        resultsList.innerHTML = html;

        // Add event listener for toggle button
        const toggleBtn = document.getElementById('toggleNonScmResults');
        if (toggleBtn) {
            toggleBtn.addEventListener('click', function() {
                showNonScmResults = !showNonScmResults;
                const nonScmDiv = document.getElementById('nonScmResults');
                const icon = this.querySelector('i');

                if (showNonScmResults) {
                    nonScmDiv.style.display = 'block';
                    icon.className = 'fas fa-eye-slash';
                    this.innerHTML = `<i class="fas fa-eye-slash"></i> Hide Legacy Results`;
                } else {
                    nonScmDiv.style.display = 'none';
                    icon.className = 'fas fa-eye';
                    this.innerHTML = `<i class="fas fa-eye"></i> Show ${withoutScmCount} Legacy Result(s) without Git Source`;
                }
            });
        }
    }

    document.getElementById('binarySearchResults').style.display = 'block';
}

function performBinarySearch(searchTerm) {
    if (!searchTerm || searchTerm.trim() === '') {
        return;
    }

    searchTerm = searchTerm.trim();
    showNonScmResults = false;

    // Show loading state
    document.getElementById('binarySearchEmpty').style.display = 'none';
    document.getElementById('binarySearchResults').style.display = 'none';
    document.getElementById('binarySearchStatus').style.display = 'none';
    document.getElementById('binarySearchLoader').style.display = 'block';

    // Cancel previous search if still running
    if (currentBinarySearch) {
        currentBinarySearch.abort();
    }

    // Create new AbortController for this search
    currentBinarySearch = new AbortController();

    // Perform the search
    fetch(`/api/search/binary?q=${encodeURIComponent(searchTerm)}`, {
        signal: currentBinarySearch.signal
    })
    .then(response => response.json())
    .then(data => {
        currentBinarySearch = null;

        // Hide loading
        document.getElementById('binarySearchLoader').style.display = 'none';

        if (data.error) {
            // Show error
            document.getElementById('binarySearchStatus').style.display = 'block';
            document.getElementById('binarySearchStatusText').innerHTML =
                `<i class="fas fa-exclamation-triangle"></i> Error: ${data.error}`;
            document.querySelector('#binarySearchStatus .alert').className = 'alert alert-danger mb-3';
        } else {
            // Store search data for re-rendering when filter changes
            lastSearchData = { data: data, searchTerm: searchTerm };
            renderSearchResults(data, searchTerm);
        }
    })
    .catch(error => {
        currentBinarySearch = null;

        if (error.name === 'AbortError') {
            console.log('Search aborted');
            return;
        }

        // Hide loading
        document.getElementById('binarySearchLoader').style.display = 'none';

        // Show error
        document.getElementById('binarySearchStatus').style.display = 'block';
        document.getElementById('binarySearchStatusText').innerHTML =
            `<i class="fas fa-exclamation-triangle"></i> Search failed: ${error.message}`;
        document.querySelector('#binarySearchStatus .alert').className = 'alert alert-danger mb-3';
    });
}

// Set up binary search event listeners
document.getElementById('binarySearchBtn').addEventListener('click', function() {
    const searchTerm = document.getElementById('binarySearchInput').value;
    performBinarySearch(searchTerm);
});

document.getElementById('binarySearchInput').addEventListener('keypress', function(e) {
    if (e.key === 'Enter') {
        e.preventDefault();
        const searchTerm = this.value;
        performBinarySearch(searchTerm);
    }
});

// Filter checkbox event listener
document.getElementById('filterSecondaryBinaries').addEventListener('change', function(e) {
    filterSecondaryBinaries = e.target.checked;

    // Re-render results if we have cached search data
    if (lastSearchData) {
        renderSearchResults(lastSearchData.data, lastSearchData.searchTerm);
    }
});

// Initialize UI on page load
updateProjectsUI();
updatePackagesUI();
</script>
{% endblock %}