{% 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 project 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 %}
<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="fas fa-folder"></i> Projects <span class="badge bg-primary">{{ projects|length }}</span></h2>
            </div>
            <div class="card-body">
                <div class="mb-3">
                    <input type="text" id="projectSearch" class="form-control search-box" placeholder="🔍 Search projects..." autofocus>
                    <small class="text-muted" id="searchResults"></small>
                </div>

                <div id="projectsContainer">
                    {% if projects %}
                        <div class="table-responsive">
                            <table class="table table-striped">
                                <thead>
                                    <tr>
                                        <th style="width: 50px;"></th>
                                        <th>Project Name</th>
                                    </tr>
                                </thead>
                                <tbody id="projectsTableBody">
                                    <!-- Rendered dynamically by JavaScript -->
                                </tbody>
                            </table>
                        </div>
                    {% else %}
                        <div class="text-center py-5">
                            <i class="fas fa-folder-open fa-3x text-muted mb-3"></i>
                            <h4>No projects found</h4>
                            <p class="text-muted">The OBS backend returned no projects</p>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>

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

// All projects data
const allProjects = {{ projects|tojson }};
const MAX_DISPLAY = 500; // Maximum projects 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 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)));
}

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

// Render projects to table
function renderProjects() {
    const tbody = document.getElementById('projectsTableBody');
    const searchResults = document.getElementById('searchResults');
    const marked = getMarkedProjects();

    // Filter projects
    let filtered;
    if (currentFilter) {
        filtered = allProjects.filter(p => p.toLowerCase().includes(currentFilter));

        // Sort: prefix matches first, then substring matches
        // Within each group, maintain alphabetical order
        const prefixMatches = [];
        const substringMatches = [];

        filtered.forEach(p => {
            if (p.toLowerCase().startsWith(currentFilter)) {
                prefixMatches.push(p);
            } else {
                substringMatches.push(p);
            }
        });

        // Both groups are already alphabetically sorted from allProjects
        // Just concatenate them
        filtered = [...prefixMatches, ...substringMatches];
    } else {
        filtered = allProjects;
    }

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

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

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

    tbody.innerHTML = html;

    // Update search results
    if (currentFilter) {
        const msg = hasMore
            ? `Found ${filtered.length} projects (showing first ${MAX_DISPLAY})`
            : `Found ${filtered.length} project${filtered.length !== 1 ? 's' : ''}`;
        searchResults.textContent = msg;
    } else {
        const msg = hasMore
            ? `Showing ${toDisplay.length} of ${allProjects.length} projects (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);

            toggleProjectMark(this.getAttribute('data-project'));
        });
    });
}

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

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

    // Initial render
    renderProjects();

    // 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 %}