{% extends "base.html" %}
{% set active_page = "index" %}

{% block morejs %}
    <script type="text/javascript">
        const user_login = {{ user_login }};
        let is_demo = {{ is_demo }};
        let demo_highlights_location = [[],[],[]];
    </script>
    <script type="text/javascript" src="{{ reverse_url('trans.js') }}?lang={{ user.language }}"></script>

    <!-- Utilities -->
    <script type="text/javascript" src="{{ static_url('js/utilities.js') }}"></script>

    <script src="{{ static_url('js/project/intro.js') }}"></script>
{% endblock %}

{% block contents %}
<div class="container py-4">
    {% if show_credits %}
    <div class="credits-container">
        <div class="credits-info-box">
            <p>{% trans %}Maintained by{% endtrans %}</p>
            <div class="credits-logo"></div>
        </div>
    </div>
    {% endif %}
    {% if multiuser %}
    <h1>{% trans user_login=user.login %}Welcome {{ user_display_name }}{% endtrans %}</h1>
    {% else %}
    <h1>{% trans %}Welcome!{% endtrans %}</h1>
    {% endif %}

    <!-- Actions list -->
    <div class="d-flex flex-column flex-sm-row justify-content-start mb-4 mt-4">
        {% if can_create_project %}
        <a href="{{ reverse_url('new_project') }}" class="btn btn-primary me-sm-3 mb-2">
            <i class="fas fa-plus"></i> {% trans %}Create a new project{% endtrans %}
        </a>
        {% endif %}

        {% if can_import_project %}
        <a href="{{ reverse_url('import_project') }}" class="btn btn-primary me-sm-3 mb-2">
            <i class="fas fa-file-download"></i> {% trans %}Import a project file{% endtrans %}
        </a>
        {% endif %}
        {% if can_change_role and is_multiuser %}
            <a href="{{ reverse_url('permissions') }}" class="btn btn-primary me-sm-3 mb-2">
                <i class="fas fa-user-lock"></i> {% trans %}Sponsor someone{% endtrans %}
            </a>
        {% endif %}
        <a href="#" class="btn btn-secondary me-sm-3 mb-2" id="a-start-demo">
            <i class="fas fa-play"></i> {% trans %}Demo project{% endtrans %}
        </a>
        <a href="{{ reverse_url('archived_projects') }}" class="btn btn-outline-secondary me-sm-3 mb-2">
            <i class="fas fa-archive"></i> {% trans %}Archived projects{% endtrans %}
        </a>
    </div>

    {% if projects|length > 1 %}
    <div class="mb-3">
        <div class="input-group" style="max-width: 300px;">
            <span class="input-group-text"><i class="fas fa-search"></i></span>
            <input type="text" class="form-control" id="project-search" placeholder="{% trans %}Search projects...{% endtrans %}">
        </div>
    </div>
    {% endif %}
    {% if not can_import_project %}
        <p class="alert alert-info">{% trans %}Please note that you cannot create a project at this time. You must be sponsored by a Canadian Access Federation (CAF) user.{% endtrans %}</p>
    {% endif %}
    <!-- Projects List -->
    <div class="main">
        <div class="row row-cols-1 row-cols-sm-2 row-cols-md-2 row-cols-lg-4 g-4" id="demo-project-container">
            {% if projects %}
                {% for project in projects %}
                    {% include 'partials/project_card.html' %}
                {% endfor %}
            {% else %}
                <div class="col project empty">
                    <div class="col project">
                        <a href="#" class="no-underline">
                            <div class="project-card">
                                <div class="d-flex justify-content-end px-3 pt-3">
                                    <!-- <i class="fas fa-edit" onclick=""></i>-->
                                </div>
                                <div class="px-3 d-flex align-items-center">
                                    <div class="project-icon mr-2 d-flex align-items-center justify-content-center">
                                        <span class="text"></span>
                                    </div>
                                    <h3 class="name px-3"></h3>
                                </div>
                                <div class="px-3 pt-4 description-container">
                                    <p class="quote2 description-text">{% trans %}No projects available at the moment. Create or import one to get started.{% endtrans %}</p>
                                </div>
                                <hr class="custom-hr mt-auto">
                                <div class="d-flex justify-content-between px-3 pb-3 stats-container">
                                    <div class="d-flex align-items-center">
                                        <i class="fas fa-file"></i>
                                        <span class="quote2 mx-2"></span>
                                    </div>
                                    <div class="d-flex align-items-center">
                                        <i class="fas fa-tag"></i>
                                        <span class="quote2 mx-2"></span>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div>
                </div>
            {% endif %}
        </div>

        <!-- No results message -->
        <div id="no-results-message" class="text-center py-4 d-none">
            <i class="fas fa-search fa-2x text-muted mb-2"></i>
            <p class="text-muted">{% trans %}No projects found matching your search.{% endtrans %}</p>
        </div>

        <!-- Pagination buttons -->
        {% if projects|length > 8 %}
        <div class="text-center mt-4" id="projects-pagination">
            <button class="btn btn-outline-primary" id="btn-show-more">
                <i class="fas fa-chevron-down"></i> {% trans %}Show more{% endtrans %}
                <span class="badge bg-secondary ms-2" id="hidden-count">{{ projects|length - 8 }}</span>
            </button>
            <button class="btn btn-outline-secondary d-none" id="btn-show-less">
                <i class="fas fa-chevron-up"></i> {% trans %}Show less{% endtrans %}
            </button>
        </div>
        {% endif %}
    </div>
</div>

<!-- Edit Project Modal -->
<div class="modal fade" id="editProjectModal" tabindex="-1" aria-labelledby="editProjectModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="editProjectModalLabel">{% trans %}Edit project{% endtrans %}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="edit-project-form">
                    <input type="hidden" id="edit-project-id">
                    <div class="mb-3">
                        <label for="edit-project-name" class="form-label">{% trans %}Name{% endtrans %}</label>
                        <input type="text" class="form-control" id="edit-project-name" required>
                    </div>
                    <div class="mb-3">
                        <label for="edit-project-description" class="form-label">{% trans %}Description{% endtrans %}</label>
                        <textarea class="form-control" id="edit-project-description" rows="3"></textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{% trans %}Cancel{% endtrans %}</button>
                <button type="button" class="btn btn-primary" id="btn-save-project">{% trans %}Save{% endtrans %}</button>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const btnShowMore = document.getElementById('btn-show-more');
    const btnShowLess = document.getElementById('btn-show-less');
    const hiddenCount = document.getElementById('hidden-count');
    const container = document.getElementById('demo-project-container');
    const searchInput = document.getElementById('project-search');
    const paginationDiv = document.getElementById('projects-pagination');
    const noResultsMsg = document.getElementById('no-results-message');

    if (!container) return;

    const projects = Array.from(container.querySelectorAll('.col.project'));
    const initialCount = 8;
    const stepCount = 4;
    let visibleCount = initialCount;
    let filteredProjects = projects;
    let searchTerm = '';

    function filterProjects() {
        if (!searchTerm) {
            filteredProjects = projects;
        } else {
            const term = searchTerm.toLowerCase();
            filteredProjects = projects.filter(function(el) {
                const name = el.querySelector('h3')?.textContent?.toLowerCase() || '';
                const desc = el.querySelector('.description-text')?.textContent?.toLowerCase() || '';
                return name.includes(term) || desc.includes(term);
            });
        }
    }

    function updateVisibility() {
        const isSearching = searchTerm.length > 0;

        projects.forEach(function(el) {
            el.style.display = 'none';
        });

        if (isSearching) {
            // Show all matching results when searching
            filteredProjects.forEach(function(el) {
                el.style.display = '';
            });
            // Hide pagination when searching
            if (paginationDiv) paginationDiv.style.display = 'none';
            // Show no results message if needed
            if (noResultsMsg) {
                if (filteredProjects.length === 0) {
                    noResultsMsg.classList.remove('d-none');
                } else {
                    noResultsMsg.classList.add('d-none');
                }
            }
        } else {
            // Hide no results message
            if (noResultsMsg) noResultsMsg.classList.add('d-none');
            // Normal pagination
            filteredProjects.slice(0, visibleCount).forEach(function(el) {
                el.style.display = '';
            });

            if (paginationDiv) {
                paginationDiv.style.display = '';
                const remaining = filteredProjects.length - visibleCount;

                if (remaining > 0) {
                    btnShowMore.classList.remove('d-none');
                    hiddenCount.textContent = remaining;
                } else {
                    btnShowMore.classList.add('d-none');
                }

                if (visibleCount > initialCount) {
                    btnShowLess.classList.remove('d-none');
                } else {
                    btnShowLess.classList.add('d-none');
                }
            }
        }
    }

    // Initial state
    updateVisibility();

    if (btnShowMore) {
        btnShowMore.addEventListener('click', function() {
            visibleCount = Math.min(visibleCount + stepCount, filteredProjects.length);
            updateVisibility();
        });
    }

    if (btnShowLess) {
        btnShowLess.addEventListener('click', function() {
            visibleCount = initialCount;
            updateVisibility();
        });
    }

    if (searchInput) {
        searchInput.addEventListener('input', function() {
            searchTerm = this.value.trim();
            visibleCount = initialCount;
            filterProjects();
            updateVisibility();
        });
    }

    // Edit project functionality
    const editModal = document.getElementById('editProjectModal');
    const editProjectId = document.getElementById('edit-project-id');
    const editProjectName = document.getElementById('edit-project-name');
    const editProjectDescription = document.getElementById('edit-project-description');
    const btnSaveProject = document.getElementById('btn-save-project');

    document.querySelectorAll('.action-edit').forEach(function(link) {
        link.addEventListener('click', function(e) {
            e.preventDefault();
            const projectId = this.dataset.projectId;
            const projectName = this.dataset.projectName;
            const projectDescription = this.dataset.projectDescription || '';

            editProjectId.value = projectId;
            editProjectName.value = projectName;
            editProjectDescription.value = projectDescription;

            const modal = new bootstrap.Modal(editModal);
            modal.show();
        });
    });

    if (btnSaveProject) {
        btnSaveProject.addEventListener('click', function() {
            const projectId = editProjectId.value;
            const name = editProjectName.value.trim();
            const description = editProjectDescription.value.trim();

            if (!name) {
                editProjectName.classList.add('is-invalid');
                return;
            }
            editProjectName.classList.remove('is-invalid');

            const xsrf = getCookie('_xsrf');
            fetch('/api/project/' + projectId + '?_xsrf=' + encodeURIComponent(xsrf), {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    name: name,
                    description: description
                })
            })
            .then(function(response) {
                if (response.ok) {
                    window.location.reload();
                } else {
                    console.error('Error saving project');
                }
            })
            .catch(function(error) {
                console.error('Error saving project:', error);
            });
        });
    }

    // Archive project functionality
    document.querySelectorAll('.action-archive').forEach(function(link) {
        link.addEventListener('click', function(e) {
            e.preventDefault();
            const projectId = this.dataset.projectId;
            const xsrf = getCookie('_xsrf');
            fetch('/project/' + projectId + '/archive?_xsrf=' + encodeURIComponent(xsrf), {
                method: 'POST'
            }).then(function(response) {
                if (response.ok) {
                    window.location.reload();
                }
            });
        });
    });
});
</script>
{% endblock %}