{% extends "base.html" %}


{% block content %}
{% include 'nav.html' %}
<div id="content" class="container-fluid mt-3">

    <div class="row gy-2 gx-3 align-items-center justify-content-md-center">

        <div class="col-auto">
            <div class="btn-group dropdown-center" role="group">
                <div class="btn-group" role="group">
                    <button id="filterDropdownBtn" type="button" class="btn btn-primary dropdown-toggle"
                        data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
                        <i class="bi bi-funnel-fill"></i>
                    </button>
                    <ul class="dropdown-menu">
                        <li>
                            <div class="dropdown-item">
                                <div class="btn-group w-100" role="group" aria-label="Type filter">
                                    <input type="radio" class="btn-check type-toggle" name="typeFilter" id="typeAll" autocomplete="off" checked>
                                    <label class="btn btn-outline-primary" for="typeAll">All</label>

                                    <input type="radio" class="btn-check type-toggle" name="typeFilter" id="typeBase" autocomplete="off">
                                    <label class="btn btn-outline-primary" for="typeBase">Base</label>

                                    <input type="radio" class="btn-check type-toggle" name="typeFilter" id="typeDlc" autocomplete="off">
                                    <label class="btn btn-outline-primary" for="typeDlc">DLC</label>
                                </div>
                            </div>
                        </li>
                        <li>
                            <hr class="dropdown-divider">
                        </li>
                        <li>
                            <div class="dropdown-item">
                                <div class="btn-group w-100" role="group" aria-label="Ownership filter">
                                    <input type="radio" class="btn-check ownership-toggle" name="ownershipFilter" id="ownershipAll" autocomplete="off" checked>
                                    <label class="btn btn-outline-primary" for="ownershipAll">All</label>

                                    <input type="radio" class="btn-check ownership-toggle" name="ownershipFilter" id="ownershipOwned" autocomplete="off">
                                    <label class="btn btn-outline-primary" for="ownershipOwned">Owned</label>

                                    <input type="radio" class="btn-check ownership-toggle" name="ownershipFilter" id="ownershipMissing" autocomplete="off">
                                    <label class="btn btn-outline-primary" for="ownershipMissing">Missing</label>
                                </div>
                            </div>
                        </li>
                        <li>
                            <hr class="dropdown-divider">
                        </li>
                        <li>
                            <div class="dropdown-item">
                                <div class="btn-group w-100" role="group" aria-label="Update filter">
                                    <input type="radio" class="btn-check update-toggle" name="updateFilter" id="updateAll" autocomplete="off" checked>
                                    <label class="btn btn-outline-primary" for="updateAll">All</label>

                                    <input type="radio" class="btn-check update-toggle" name="updateFilter" id="updateUpToDate" autocomplete="off">
                                    <label class="btn btn-outline-primary" for="updateUpToDate">Up to date</label>

                                    <input type="radio" class="btn-check update-toggle" name="updateFilter" id="updateMissingUpdate" autocomplete="off">
                                    <label class="btn btn-outline-primary" for="updateMissingUpdate">Missing Update</label>
                                </div>
                            </div>
                        </li>
                        <li>
                            <hr class="dropdown-divider">
                        </li>
                        <li>
                            <div class="dropdown-item">
                                <div class="btn-group w-100" role="group" aria-label="Completion filter">
                                    <input type="radio" class="btn-check completion-toggle" name="completionFilter" id="completionAll" autocomplete="off" checked>
                                    <label class="btn btn-outline-primary" for="completionAll">All</label>

                                    <input type="radio" class="btn-check completion-toggle" name="completionFilter" id="completionComplete" autocomplete="off">
                                    <label class="btn btn-outline-primary" for="completionComplete">Complete</label>

                                    <input type="radio" class="btn-check completion-toggle" name="completionFilter" id="completionMissingDlc" autocomplete="off">
                                    <label class="btn btn-outline-primary" for="completionMissingDlc">Missing DLC</label>
                                </div>
                            </div>
                        </li>
                        <!-- <div class="text-center m-2">
                            <button id="btnApplyFilters" type="button" class="btn btn-primary" style="width: 85%;">Apply
                                filters</button>
                        </div> -->
                    </ul>
                </div>
            </div>
        </div>

        <div class="col-auto">
            <input type="text" id="textFilter" class="form-control" placeholder="Search titles...">
        </div>
        <div class="col-auto">
            <div class="btn-group" role="group">
                <button id="view-toggle-btn-card" type="button" class="btn btn-primary view-toggle-btn active" data-view="card"><i
                        class="bi bi-card-heading"></i></button>
                <button id="view-toggle-btn-icon" type="button" class="btn btn-primary view-toggle-btn" data-view="icon"><i
                        class="bi bi-grid-fill"></i></button>
                <button id="view-toggle-btn-list" type="button" class="btn btn-primary view-toggle-btn" data-view="list" disabled=""><i
                        class="bi bi-list-ul"></i></button>
            </div>
        </div>
        <div class="col-auto">
            <div class="btn-group dropdown-center" role="group">
                <button id="itemsPerPageDropdownBtn" type="button" class="btn btn-primary dropdown-toggle"
                    data-bs-toggle="dropdown" aria-expanded="false">
                    Items per page
                </button>
                <ul class="dropdown-menu" aria-labelledby="itemsPerPageDropdownBtn">
                    <li><button class="dropdown-item items-per-page" data-value="9">9</button></li>
                    <li><button class="dropdown-item items-per-page" data-value="12">12</button></li>
                    <li><button class="dropdown-item items-per-page" data-value="18">18</button></li>
                    <li><button class="dropdown-item items-per-page" data-value="27">27</button></li>
                    <li>
                        <div class="dropdown-item">
                            <input type="number" id="customItemsPerPage" class="form-control" placeholder="Custom">
                            <button id="applyCustomItemsPerPage" class="btn btn-primary mt-2">Apply</button>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <!-- Card size slider -->
        <div class="col-auto">
            <!-- <label for="cardSizeRange" class="form-label">Card Size</label> -->
            <input type="range" class="form-range" min="1" max="5" step="1" id="cardSizeRange">
        </div>
    </div>
    <div class="grid-container" id="gridContainer">
        <div class="row g-3" id="gameGrid"></div>
        <!-- <div class="row row-cols-1 row-cols-md-3 g-4" id="gameGrid"></div> -->
    </div>

    <!-- Pagination controls -->
    <nav aria-label="Page navigation" class="mt-3">
        <ul class="pagination justify-content-center" id="paginationControls"></ul>
    </nav>
</div>

<script>
    let games;
    let filteredGames;
    let itemsPerPage = 12;
    let currentPage = 1;
    let totalGames = 0;
    let cardSize = 3; // Default card size
    let currentView = 'card'; // Default view is 'card'

    function fetchGames() {
        return new Promise((resolve, reject) => {
            $.get(`/api/titles`, function (data) {
                totalGames = data.total;
                games = data.games;
                filteredGames = games;
                resolve();
            }).fail(function() {
                reject();
            });
        });
    }

    function renderGames() {
        // Set slider to show `cardsize` columns by default
        $('#cardSizeRange').val(cardSize);

        if (currentView === 'card') {
            renderCardView();
            adjustCardSizes();
        } else if (currentView === 'icon') {
            renderIconView();
            adjustIconSizes();
        }

        // init version tooltips
        const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
        const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))

        // init version popovers
        const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
        const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))
    }

    function renderCardView() {
        // Render card view logic...
        const gameGrid = $('#gameGrid');
        gameGrid.empty(); // Clear existing games

        // Get games for the current page
        start = (currentPage - 1) * itemsPerPage
        end = start + itemsPerPage
        paginatedGames = filteredGames.slice(start, end);

        paginatedGames.forEach(function (game) {
            const gameCol = $('<div class="col game-col"></div>').addClass(`col-${12 / getColumnsForCardSize(cardSize)}`);

            const card = $('<div class="card text-bg-dark game-card"></div>');

            const img = $('<img class="card-img"></img>').attr('src', game.bannerUrl);
            card.append(img);

            const cardOverlay = $('<div class="card-img-overlay game-info"></div>');

            const title = $('<h5 class="card-title game-title"></h5>').text(game.title_id_name || game.name);
            cardOverlay.append(title);

            const description = $('<p class="card-text game-description"></p>');
            if (game.app_type === 'DLC') {
                const small = $('<small></small>').text(`${game.name} | `);
                description.append(small);
            }
            const small = $('<small></small>').text(game.id);
            description.append(small);
            cardOverlay.append(description);

            const tagsContainer = $('<div class="tags-container"></div>');

            const typeBadgeClass = (game.owned === false) ? 'text-bg-warning' : 'text-bg-info';
            const typeBadge = $(`<span class="badge rounded-pill ${typeBadgeClass} game-tag"></span>`).text(game.app_type);
            tagsContainer.append(typeBadge);

            if (game.has_latest_version !== undefined) {
                const versionBadge = $(`<span class="badge rounded-pill game-tag version-tag" title="${game.name} [${game.title_id}] Updates"></span>`)
                    .addClass(`text-bg-${game.has_latest_version ? 'success' : 'warning'}`)
                    .html(`<i class="bi ${game.has_latest_version ? 'bi-check-circle-fill' : 'bi-arrow-down-circle'}"></i>`);
                if (game.version !== undefined && game.version.length && Array.isArray(game.version)) {
                    const popoverContent = game.version.map(version => 
                        `${version.release_date}: v${version.version} ${version.owned ? 'Owned' : 'Missing'}`
                    ).join('\n');
                    versionBadge.popover({
                        content: popoverContent,
                        trigger: 'click',
                        placement: 'top',
                    });
                    versionBadge.css('cursor', 'pointer');
                } else {
                    // version tooltip on hover
                    versionBadge.attr("data-bs-toggle", "tooltip")
                    versionBadge.attr("data-bs-placement", "top")

                    if (game.version !== undefined && !game.version.length && Array.isArray(game.version)){
                        versionBadge.attr("data-bs-title", "Version v0")
                    } else if (game.version !== undefined && game.version.length) {
                        versionBadge.attr("data-bs-title", "Version v" + game.version)
                    }
                }
                tagsContainer.append(versionBadge);
            }

            if (game.has_all_dlcs !== undefined) {
                const dlcBadge = $('<span class="badge rounded-pill game-tag"></span>').addClass(`text-bg-${game.has_all_dlcs ? 'success' : 'warning'}`).html('<i class="bi bi-box-seam-fill"></i>');
                tagsContainer.append(dlcBadge);
            }

            cardOverlay.append(tagsContainer);
            card.append(cardOverlay);
            gameCol.append(card);
            gameGrid.append(gameCol);
        });
        // Update pagination
        updatePaginationControls(filteredGames.length)

    }

    function renderIconView() {
        // Render icon view logic...
        const gameGrid = $('#gameGrid');
        gameGrid.empty(); // Clear existing games
        // Get games for the current page
        start = (currentPage - 1) * itemsPerPage
        end = start + itemsPerPage
        baseGames = filteredGames.filter(game => game.app_type === 'BASE');
        paginatedGames = baseGames.slice(start, end);

        paginatedGames.forEach(game => {
            const icon = $('<img class="game-icon">').attr('src', game.iconUrl);
            gameGrid.append(icon);
        });

        // Adjust icon sizes based on the slider value
        adjustIconSizes(cardSize);
        // Update pagination
        updatePaginationControls(baseGames.length)
    }

    function getColumnsForCardSize(size) {
        switch (size) {
            case 1: return 1; // 2 columns
            case 2: return 2; // 3 columns
            case 3: return 3; // 4 columns
            case 4: return 4; // 6 columns
            case 5: return 6; // 8 columns
            default: return 4; // default to 3 columns
        }
    }

    function updatePaginationControls(nbDisplayedGames) {
        const paginationControls = $('#paginationControls');
        paginationControls.empty(); // Clear existing pagination

        const totalPages = Math.ceil(nbDisplayedGames / itemsPerPage);

        // Previous button
        const prevButton = $('<li class="page-item"></li>').addClass(`page-item ${currentPage === 1 ? 'disabled' : ''}`).html(`
                <a class="page-link" href="#" aria-label="Previous">
                    <span aria-hidden="true">&laquo;</span>
                </a>`);
        prevButton.click(function (e) {
            e.preventDefault();
            if (currentPage > 1) {
                currentPage--;
                renderGames();
            }
        });
        paginationControls.append(prevButton);

        // Page numbers
        for (let i = 1; i <= totalPages; i++) {
            const pageButton = $('<li class="page-item"></li>').addClass(`page-item ${i === currentPage ? 'active' : ''}`).html(`<a class="page-link" href="#">${i}</a>`);
            pageButton.click(function (e) {
                e.preventDefault();
                currentPage = i;
                renderGames();
            });
            paginationControls.append(pageButton);
        }

        // Next button
        const nextButton = $('<li class="page-item"></li>').addClass(`page-item ${currentPage === totalPages ? 'disabled' : ''}`).html(`
                <a class="page-link" href="#" aria-label="Next">
                    <span aria-hidden="true">&raquo;</span>
                </a>`);
        nextButton.click(function (e) {
            e.preventDefault();
            if (currentPage < totalPages) {
                currentPage++;
                renderGames();
            }
        });
        paginationControls.append(nextButton);
    }

    function adjustCardSizes() {
        const gameGrid = $('#gameGrid');
        const gameCols = gameGrid.find('.game-col');
        gameCols.each(function () {
            $(this).removeClass().addClass(`col game-col col-${12 / getColumnsForCardSize(cardSize)}`);
        });
    }

    function adjustIconSizes() {
        // Calculate the size of the icons based on the slider value
        const iconSize = 100 / (cardSize + 3); // Assuming 100 is the maximum size

        // Update the CSS of the game icons
        $('.game-icon').css('width', `${iconSize}%`);
    }

    function saveFiltersToStorage() {
        const filters = {
            type: "",
            ownership: "",
            update: "",
            completion: ""
        };

        if ($('#typeBase').is(':checked')) {
            filters.type = 'BASE';
        } else if ($('#typeDlc').is(':checked')) {
            filters.type = 'DLC';
        }

        if ($('#ownershipOwned').is(':checked')) {
            filters.ownership = 'Owned';
        } else if ($('#ownershipMissing').is(':checked')) {
            filters.ownership = 'Missing';
        }

        if ($('#updateUpToDate').is(':checked')) {
            filters.update = 'Up to date';
        } else if ($('#updateMissingUpdate').is(':checked')) {
            filters.update = 'Outdated';
        }

        if ($('#completionComplete').is(':checked')) {
            filters.completion = 'Complete';
        } else if ($('#completionMissingDlc').is(':checked')) {
            filters.completion = 'Missing DLC';
        }

        localStorage.setItem('activeFilters', JSON.stringify(filters));
    }

    function loadFiltersFromStorage() {
        const savedFilters = localStorage.getItem('activeFilters');
        if (savedFilters) {
            const filters = JSON.parse(savedFilters);

            $('#typeBase').prop('checked', filters.type === 'BASE');
            $('#typeDlc').prop('checked', filters.type === 'DLC');

            $('#ownershipOwned').prop('checked', filters.ownership === 'Owned');
            $('#ownershipMissing').prop('checked', filters.ownership === 'Missing');

            $('#updateUpToDate').prop('checked', filters.update === 'Up to date');
            $('#updateMissingUpdate').prop('checked', filters.update === 'Outdated');

            $('#completionComplete').prop('checked', filters.completion === 'Complete');
            $('#completionMissingDlc').prop('checked', filters.completion === 'Missing DLC');

            updateFilter();
        }

        const savedSearch = localStorage.getItem('searchTerm');
        if (savedSearch) {
            $('#textFilter').val(savedSearch);
        }

        applyFilters()
    }

    $(document).ready(function () {
        const savedItemsPerPage = localStorage.getItem('itemsPerPage');
        if (savedItemsPerPage) {
            itemsPerPage = parseInt(savedItemsPerPage);
        }

        const savedCurrentView = localStorage.getItem('currentView');
        if (savedCurrentView) {
            currentView = savedCurrentView;
        }

        const savedCardSize = localStorage.getItem('cardSize');
        if (savedCardSize){
            cardSize = parseInt(savedCardSize);
        }

        // Fetch initial set of games and render
        fetchGames().then(() => {
            loadFiltersFromStorage();
        });

        // Event listeners for items per page dropdown
        $('.items-per-page').click(function () {
            itemsPerPage = $(this).data('value');
            localStorage.setItem('itemsPerPage', itemsPerPage);
            currentPage = 1; // Reset to first page
            renderGames();
        });

        $('#applyCustomItemsPerPage').click(function () {
            const customValue = $('#customItemsPerPage').val();
            if (customValue && customValue > 0) {
                itemsPerPage = parseInt(customValue);
                localStorage.setItem('itemsPerPage', itemsPerPage);
                currentPage = 1; // Reset to first page
                renderGames();
            }
        });

        // Event listener for card size slider
        $('#cardSizeRange').on('input', function () {
            cardSize = parseInt($(this).val());
            localStorage.setItem('cardSize', cardSize);
            if (currentView === 'icon') {
                adjustIconSizes(cardSize);
            } else {
                adjustCardSizes(cardSize);
            }
        });

        // Event listener for view buttons
        $('.view-toggle-btn').click(function () {
            $('.view-toggle-btn').removeClass("active"); 
            $(this).addClass("active");
            const view = $(this).data('view');
            localStorage.setItem('currentView', view)
            if (view === 'card') {
                currentView = 'card';
            } else if (view === 'icon') {
                currentView = 'icon';
            }
            renderGames(games);
        });

        // Handle type filter toggle buttons
        $('.type-toggle').change(function () {
            if ($('#typeBase').is(':checked')) {
                activeTypeFilter = 'BASE';
            } else if ($('#typeDlc').is(':checked')) {
                activeTypeFilter = 'DLC';
            } else {
                activeTypeFilter = '';
            }
            applyFilters();
            saveFiltersToStorage();
        });

        // Handle ownership filter toggle buttons
        $('.ownership-toggle').change(function () {
            if ($('#ownershipOwned').is(':checked')) {
                activeOwnershipFilter = 'Owned';
            } else if ($('#ownershipMissing').is(':checked')) {
                activeOwnershipFilter = 'Missing';
            } else {
                activeOwnershipFilter = '';
            }
            applyFilters();
            saveFiltersToStorage();
        });

        // Handle update filter toggle buttons
        $('.update-toggle').change(function () {
            if ($('#updateUpToDate').is(':checked')) {
                activeUpdateFilter = 'Up to date';
            } else if ($('#updateMissingUpdate').is(':checked')) {
                activeUpdateFilter = 'Outdated';
            } else {
                activeUpdateFilter = '';
            }
            applyFilters();
            saveFiltersToStorage();
        });

        // Handle completion filter toggle buttons
        $('.completion-toggle').change(function () {
            if ($('#completionComplete').is(':checked')) {
                activeCompletionFilter = 'Complete';
            } else if ($('#completionMissingDlc').is(':checked')) {
                activeCompletionFilter = 'Missing DLC';
            } else {
                activeCompletionFilter = '';
            }
            applyFilters();
            saveFiltersToStorage();
        });

        // Listen to input changes in the text filter input
        $("#textFilter").on("input", function () {
            const attributeText = $(this).val();
            localStorage.setItem('searchTerm', attributeText);
            applyFilters();
        });

        // Close popovers
        $(document).on('click', function (e) {
            $('.popover').removeClass('show');
            $('.popover').remove();
        });

        // Add click event on the popover to stop propagation
        $(document).on('click', '.popover', function (e) {
            e.stopPropagation(); // Prevent the click event from bubbling up
        });
    
    });

    // Store active filters
    let activeTypeFilter = "";
    let activeOwnershipFilter = "";
    let activeUpdateFilter = "";
    let activeCompletionFilter = "";

    function updateFilter() {
        // $('#filterDropdownBtn').toggle();
        if ($('#typeBase').is(":checked")) {
            activeTypeFilter = 'BASE';
        } else if ($('#typeDlc').is(":checked")) {
            activeTypeFilter = 'DLC';
        } else {
            activeTypeFilter = '';
        }
        if ($('#ownershipOwned').is(":checked")) {
            activeOwnershipFilter = 'Owned';
        } else if ($('#ownershipMissing').is(":checked")) {
            activeOwnershipFilter = 'Missing';
        } else {
            activeOwnershipFilter = '';
        }
        if ($('#updateUpToDate').is(":checked")) {
            activeUpdateFilter = 'Up to date';
        } else if ($('#updateMissingUpdate').is(":checked")) {
            activeUpdateFilter = 'Outdated';
        } else {
            activeUpdateFilter = '';
        }
        if ($('#completionComplete').is(":checked")) {
            activeCompletionFilter = 'Complete';
        } else if ($('#completionMissingDlc').is(":checked")) {
            activeCompletionFilter = 'Missing DLC';
        } else {
            activeCompletionFilter = '';
        }
    }

    function findCommonElements(...arrays) {
        // Filter out empty arrays
        const nonEmptyArrays = arrays.filter(array => array.length > 0);

        // If there are no non-empty arrays, return an empty array
        if (nonEmptyArrays.length === 0) {
            return [];
        }

        // Find common elements
        return nonEmptyArrays.reduce((common, currentArray) => 
            common.filter(item => currentArray.includes(item))
        );
    }

    // Function to apply filters and show/hide game cards with animation
    function applyFilters() {
        // Get current search term
        const searchTerm = $('#textFilter').val();
        let filtered = filterGamesBySearchTerm(games, searchTerm);

        if (activeTypeFilter) {
            filtered = filtered.filter(game => game.app_type === activeTypeFilter);
        }
        if (activeOwnershipFilter) {
            filtered = filtered.filter(game => activeOwnershipFilter === 'Owned' ? game.owned === true : game.owned === false);
        }
        if (activeUpdateFilter) {
            filtered = filtered.filter(game => activeUpdateFilter === 'Up to date' ? game.has_latest_version === true : game.has_latest_version === false);
        }
        if (activeCompletionFilter) {
            filtered = filtered.filter(game => activeCompletionFilter === 'Complete' ? game.has_all_dlcs === true : game.has_all_dlcs === false);
        }

        filteredGames = filtered;
        currentPage = 1;
        renderGames();
    }

    function filterGamesBySearchTerm(gameList, searchTerm) {
        if (!searchTerm || searchTerm.trim() === "") {
            return gameList;
        }
        const searchText = searchTerm.toLowerCase();
        return gameList.filter(game =>
            game.app_id?.toLowerCase().includes(searchText) ||
            game.title_id?.toLowerCase().includes(searchText) ||
            game.name?.toLowerCase().includes(searchText) ||
            game.title_id_name?.toLowerCase().includes(searchText)
        );
    }

    // $('#btnApplyFilters').on('click', function () {
    //     updateFilter();
    //     applyFilters();
    // });

    
</script>
{% endblock %}