{% 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>Cache Built Successfully</strong> - The Git repository list has been fetched and cached.
            This may have taken a moment. Subsequent visits will be faster as data is served from cache.
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    </div>
</div>
{% endif %}
<!-- Info Notice -->
<div class="row mb-3">
    <div class="col-12">
        <div class="alert alert-info d-flex align-items-start">
            <i class="fas fa-info-circle fa-2x me-3 mt-1"></i>
            <div>
                <strong>Official Git Pool Repositories</strong>
                <p class="mb-0">
                    These are the official git repositories from the <strong>{{ gitea_org }}</strong> organization,
                    used for any official product.
                    For more repositories beyond the {{ gitea_org }} organization, please visit the
                    <a href="{{ gitea_url }}/explore/repos" target="_blank" class="alert-link">
                        <i class="fas fa-search"></i> Gitea Repository Search
                    </a>.
                </p>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-12">
        <div class="card border-0 shadow">
            <div class="card-header bg-gradient border-0">
                <h2 class="mb-0"><i class="fab fa-git-square"></i> Git Pool Repositories <span class="badge bg-primary">{{ packages|length }}</span></h2>
            </div>
            <div class="card-body">
                <div class="mb-3">
                    <input type="text" id="packageSearch" class="form-control search-box" placeholder="🔍 Search git repositories...">
                    <small class="text-muted" id="searchResults"></small>
                </div>

                <div id="packagesContainer">
                    {% if packages %}
                        <div class="table-responsive">
                            <table class="table table-striped">
                                <thead>
                                    <tr>
                                        <th style="width: 50px;"></th>
                                        <th>Repository Name</th>
                                    </tr>
                                </thead>
                                <tbody id="packagesTableBody">
                                    <!-- Rendered dynamically by JavaScript -->
                                </tbody>
                            </table>
                        </div>
                    {% else %}
                        <div class="text-center py-5">
                            <i class="fab fa-git-square fa-3x text-muted mb-3"></i>
                            <h4>No git repositories found</h4>
                            <p class="text-muted">Could not fetch repositories from Gitea</p>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>

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

// All packages data
const allPackages = {{ packages|tojson }};
const MAX_DISPLAY = 500; // Maximum packages to display at once
let currentFilter = '';
let debounceTimer = null;


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

// Render packages to table
function renderPackages() {
    const tbody = document.getElementById('packagesTableBody');
    const searchResults = document.getElementById('searchResults');
    const marked = getMarkedPackages();

    // Filter packages
    const filtered = currentFilter
        ? allPackages.filter(p => p.toLowerCase().includes(currentFilter))
        : allPackages;

    // Limit display
    const toDisplay = filtered.slice(0, MAX_DISPLAY);
    const hasMore = filtered.length > MAX_DISPLAY;

    // Build HTML
    let html = '';
    toDisplay.forEach(pkg => {
        const isMarked = marked.includes(pkg);
        const starClass = isMarked ? 'fas fa-star text-info' : 'far fa-star text-muted';
        const starTitle = isMarked ? 'Unmark package' : 'Mark package';

        html += `<tr class="package-row" data-package="${pkg}">
            <td>
                <button class="btn btn-sm btn-link mark-btn p-0" data-package="${pkg}" title="${starTitle}">
                    <i class="${starClass}"></i>
                </button>
            </td>
            <td>
                <a href="/packages/${encodeURIComponent(pkg)}" class="project-link">${pkg}</a>
            </td>
        </tr>`;
    });

    tbody.innerHTML = html;

    // Update search results
    if (currentFilter) {
        const msg = hasMore
            ? `Found ${filtered.length} git repositories (showing first ${MAX_DISPLAY})`
            : `Found ${filtered.length} git ${filtered.length !== 1 ? 'repositories' : 'repository'}`;
        searchResults.textContent = msg;
    } else {
        const msg = hasMore
            ? `Showing ${toDisplay.length} of ${allPackages.length} git repositories (use search to filter)`
            : '';
        searchResults.textContent = msg;
    }

    // Attach event listeners
    document.querySelectorAll('.mark-btn').forEach(btn => {
        btn.addEventListener('click', function(e) {
            e.preventDefault();
            const icon = this.querySelector('i');

            // Add pulse animation
            icon.style.transform = 'scale(1.5)';
            setTimeout(() => {
                icon.style.transform = 'scale(1)';
            }, 200);

            togglePackageMark(this.getAttribute('data-package'));
        });
    });
}

// Debounced search
function performSearch(searchTerm) {
    currentFilter = searchTerm.toLowerCase().trim();
    renderPackages();
}

document.addEventListener('DOMContentLoaded', function() {
    const searchInput = document.getElementById('packageSearch');

    // Initial render
    renderPackages();

    // Focus search input
    searchInput.focus();

    // Debounced search input
    searchInput.addEventListener('input', function(e) {
        clearTimeout(debounceTimer);
        debounceTimer = setTimeout(() => {
            performSearch(e.target.value);
        }, 150); // 150ms debounce
    });
});
</script>
{% endblock %}