wc-licensed-product/assets/js/admin-licenses.js

/**
 * WC Licensed Product - Admin Licenses Live Search
 *
 * @package Jeremias\WcLicensedProduct
 */

(function($) {
    'use strict';

    var searchTimeout = null;
    var $searchInput = $('#license-search-input');
    var $resultsDropdown = null;
    var isSearching = false;

    /**
     * Initialize live search
     */
    function init() {
        if (!$searchInput.length) {
            return;
        }

        // Create results dropdown
        $resultsDropdown = $('<div class="wclp-live-search-results"></div>');
        $searchInput.parent().css('position', 'relative').append($resultsDropdown);

        // Bind events
        $searchInput.on('input', handleSearchInput);
        $searchInput.on('keydown', handleKeydown);
        $searchInput.on('focus', function() {
            if ($resultsDropdown.children().length > 0) {
                $resultsDropdown.show();
            }
        });

        // Close dropdown when clicking outside
        $(document).on('click', function(e) {
            if (!$(e.target).closest('.search-box').length) {
                $resultsDropdown.hide();
            }
        });
    }

    /**
     * Handle search input with debouncing
     */
    function handleSearchInput() {
        var query = $searchInput.val().trim();

        // Clear previous timeout
        if (searchTimeout) {
            clearTimeout(searchTimeout);
        }

        // Hide results if query is too short
        if (query.length < 2) {
            $resultsDropdown.hide().empty();
            return;
        }

        // Show loading state
        showLoading();

        // Debounce search
        searchTimeout = setTimeout(function() {
            performSearch(query);
        }, 300);
    }

    /**
     * Handle keyboard navigation
     */
    function handleKeydown(e) {
        var $items = $resultsDropdown.find('.wclp-search-result-item');
        var $active = $items.filter('.active');
        var index = $items.index($active);

        switch (e.keyCode) {
            case 40: // Down arrow
                e.preventDefault();
                if (index < $items.length - 1) {
                    $items.removeClass('active');
                    $items.eq(index + 1).addClass('active');
                } else if (index === -1 && $items.length > 0) {
                    $items.eq(0).addClass('active');
                }
                break;

            case 38: // Up arrow
                e.preventDefault();
                if (index > 0) {
                    $items.removeClass('active');
                    $items.eq(index - 1).addClass('active');
                }
                break;

            case 13: // Enter
                if ($active.length) {
                    e.preventDefault();
                    window.location.href = $active.data('url');
                }
                break;

            case 27: // Escape
                $resultsDropdown.hide();
                break;
        }
    }

    /**
     * Show loading state
     */
    function showLoading() {
        $resultsDropdown.html(
            '<div class="wclp-search-loading">' +
            '<span class="spinner is-active"></span> ' +
            wclpAdmin.strings.searching +
            '</div>'
        ).show();
    }

    /**
     * Perform AJAX search
     */
    function performSearch(query) {
        if (isSearching) {
            return;
        }

        isSearching = true;

        $.ajax({
            url: wclpAdmin.ajaxUrl,
            type: 'GET',
            data: {
                action: 'wclp_live_search',
                nonce: wclpAdmin.nonce,
                search: query
            },
            success: function(response) {
                if (response.success && response.data.results) {
                    renderResults(response.data.results, query);
                } else {
                    showNoResults();
                }
            },
            error: function() {
                $resultsDropdown.html(
                    '<div class="wclp-search-error">' + wclpAdmin.strings.error + '</div>'
                ).show();
            },
            complete: function() {
                isSearching = false;
            }
        });
    }

    /**
     * Render search results
     */
    function renderResults(results, query) {
        if (results.length === 0) {
            showNoResults();
            return;
        }

        var html = '';
        results.forEach(function(item) {
            var statusClass = 'license-status-' + item.status;
            var highlightedKey = highlightMatch(item.license_key, query);
            var highlightedDomain = highlightMatch(item.domain, query);

            html += '<div class="wclp-search-result-item" data-url="' + escapeHtml(item.view_url) + '">' +
                '<div class="wclp-result-main">' +
                    '<span class="wclp-result-key"><code>' + highlightedKey + '</code></span>' +
                    '<span class="license-status ' + statusClass + '">' + escapeHtml(item.status) + '</span>' +
                '</div>' +
                '<div class="wclp-result-details">' +
                    '<span class="wclp-result-domain">' + highlightedDomain + '</span>' +
                    '<span class="wclp-result-product">' + escapeHtml(item.product_name) + '</span>' +
                '</div>' +
                '<div class="wclp-result-customer">' +
                    escapeHtml(item.customer_name) +
                    (item.customer_email ? ' <small>(' + escapeHtml(item.customer_email) + ')</small>' : '') +
                '</div>' +
            '</div>';
        });

        $resultsDropdown.html(html).show();

        // Make items clickable
        $resultsDropdown.find('.wclp-search-result-item').on('click', function() {
            window.location.href = $(this).data('url');
        }).on('mouseenter', function() {
            $resultsDropdown.find('.wclp-search-result-item').removeClass('active');
            $(this).addClass('active');
        });
    }

    /**
     * Show no results message
     */
    function showNoResults() {
        $resultsDropdown.html(
            '<div class="wclp-search-no-results">' + wclpAdmin.strings.noResults + '</div>'
        ).show();
    }

    /**
     * Highlight matching text
     */
    function highlightMatch(text, query) {
        if (!text || !query) {
            return escapeHtml(text || '');
        }

        var escaped = escapeHtml(text);
        var queryEscaped = escapeHtml(query);
        var regex = new RegExp('(' + queryEscaped.replace(/[.*+?^${}()|[\]\\]/g, '\\$&') + ')', 'gi');

        return escaped.replace(regex, '<mark>$1</mark>');
    }

    /**
     * Escape HTML entities
     */
    function escapeHtml(text) {
        if (!text) return '';
        var div = document.createElement('div');
        div.textContent = text;
        return div.innerHTML;
    }

    // Initialize when document is ready
    $(document).ready(init);

})(jQuery);