/**
 * Entity Selector - Dropdown Module
 * Search dropdown UI creation and positioning
 * @partial _dropdown.js
 */

(function($) {
    'use strict';

    window._EntitySelectorMixins = window._EntitySelectorMixins || {};

    window._EntitySelectorMixins.dropdown = {

        createDropdown: function() {
            this.$wrapper.find('.target-search-dropdown').remove();

            var trans = this.config.trans || {};

            var html = '<div class="target-search-dropdown view-list">';

            // Header with results count, actions, sort controls, view mode
            html += '<div class="dropdown-header">';
            html += '<span class="results-count">0 results</span>';

            html += '<div class="dropdown-actions">';

            // Select all / Clear buttons with keyboard shortcuts
            html += '<button type="button" class="btn-select-all" title="' + (trans.select_all || 'Select all visible') + '">';
            html += this.esIcon('check_box') + ' ' + (trans.all || 'All') + ' <kbd>Ctrl+A</kbd>';
            html += '</button>';
            html += '<button type="button" class="btn-clear-selection" title="' + (trans.clear_selection || 'Clear selection') + '">';
            html += this.esIcon('check_box_outline_blank') + ' ' + (trans.clear || 'Clear') + ' <kbd>Ctrl+D</kbd>';
            html += '</button>';

            // Sort controls - options with data-entities attribute for entity-specific filtering
            html += '<div class="sort-controls">';
            html += '<select class="sort-field-select" title="Sort by">';
            // Universal options (all entities)
            html += '<option value="name">' + (trans.sort_name || 'Name') + '</option>';
            html += '<option value="id">' + (trans.sort_id || 'ID') + '</option>';
            html += '<option value="selected">' + (trans.sort_selected || 'Selected') + '</option>';
            // Product-specific
            html += '<option value="price" data-entities="products">' + (trans.sort_price || 'Price') + '</option>';
            html += '<option value="stock" data-entities="products">' + (trans.sort_stock || 'Stock') + '</option>';
            html += '<option value="popularity" data-entities="products">' + (trans.sort_popularity || 'Sales') + '</option>';
            html += '<option value="reference" data-entities="products">' + (trans.sort_reference || 'Reference') + '</option>';
            // Position-based entities (categories, cms, cms_categories, attributes)
            html += '<option value="position" data-entities="categories,cms,cms_categories,attributes">' + (trans.sort_position || 'Position') + '</option>';
            // Product count (categories, manufacturers, suppliers)
            html += '<option value="product_count" data-entities="categories,manufacturers,suppliers">' + (trans.sort_product_count || 'Products') + '</option>';
            html += '</select>';
            html += '<button type="button" class="btn-sort-dir" data-dir="ASC" title="Sort direction">';
            html += this.esIcon('sort_by_alpha');
            html += '</button>';

            // View mode selector - Tree option always present, shown for categories
            html += '<select class="view-mode-select" title="View mode">';
            html += '<option value="list">' + (trans.view_list || 'List') + '</option>';
            html += '<option value="tree" class="tree-view-option">' + (trans.view_tree || 'Tree') + '</option>';
            html += '<option value="cols-2">2 ' + (trans.cols || 'cols') + '</option>';
            html += '<option value="cols-3">3 ' + (trans.cols || 'cols') + '</option>';
            html += '<option value="cols-4">4 ' + (trans.cols || 'cols') + '</option>';
            html += '<option value="cols-5">5 ' + (trans.cols || 'cols') + '</option>';
            html += '<option value="cols-6">6 ' + (trans.cols || 'cols') + '</option>';
            html += '<option value="cols-7">7 ' + (trans.cols || 'cols') + '</option>';
            html += '<option value="cols-8">8 ' + (trans.cols || 'cols') + '</option>';
            html += '</select>';
            html += '</div>'; // End sort-controls

            // Refine search
            html += '<div class="refine-compact">';
            html += '<button type="button" class="btn-refine-negate" title="' + (trans.exclude_matches || 'Exclude matches (NOT contains)') + '">' + this.esIcon('block') + '</button>';
            html += '<input type="text" class="refine-input" placeholder="' + (trans.refine_short || 'Refine...') + '">';
            html += '<button type="button" class="btn-clear-refine" style="display:none;">' + this.esIcon('close') + '</button>';
            html += '</div>';

            // Filter toggle button
            html += '<button type="button" class="btn-toggle-filters" title="' + (trans.toggle_filters || 'Filters') + '">';
            html += this.esIcon('filter_list');
            html += '</button>';

            // History button
            html += '<button type="button" class="btn-show-history" title="' + (trans.recent_searches || 'Recent searches') + '">';
            html += this.esIcon('schedule');
            html += '</button>';

            html += '</div>'; // End dropdown-actions
            html += '</div>'; // End dropdown-header

            // Filter panel
            html += '<div class="filter-panel">';

            // Quick filters row (for products)
            html += '<div class="filter-row filter-row-quick" data-entity="products">';
            html += '<label class="filter-label"><input type="checkbox" class="filter-in-stock"> ' + (trans.in_stock || 'In stock') + '</label>';
            html += '<label class="filter-label"><input type="checkbox" class="filter-discounted"> ' + (trans.discounted || 'On sale') + '</label>';

            // Price range
            html += '<div class="filter-price-range">';
            html += '<span class="filter-price-label">' + (trans.price || 'Price') + ':</span>';
            html += '<input type="number" class="filter-price-min" placeholder="' + (trans.min || 'Min') + '" min="0" step="0.01">';
            html += '<span class="filter-price-sep">-</span>';
            html += '<input type="number" class="filter-price-max" placeholder="' + (trans.max || 'Max') + '" min="0" step="0.01">';
            html += '</div>';

            html += '<button type="button" class="btn-clear-filters" title="' + (trans.clear_filters || 'Clear filters') + '">';
            html += this.esIcon('close');
            html += '</button>';
            html += '</div>';

            // Attribute/Feature filter toggles for products
            html += '<div class="filter-row filter-row-attributes" data-entity="products" style="display:none;">';
            html += '<span class="filter-row-label">' + this.esIcon('label') + ' ' + (trans.attributes || 'Attributes') + ':</span>';
            html += '<div class="filter-attributes-container"></div>';
            html += '</div>';
            html += '<div class="filter-row filter-row-values filter-row-attr-values" data-type="attribute" style="display:none;">';
            html += '<div class="filter-values-container"></div>';
            html += '</div>';

            html += '<div class="filter-row filter-row-features" data-entity="products" style="display:none;">';
            html += '<span class="filter-row-label">' + this.esIcon('list') + ' ' + (trans.features || 'Features') + ':</span>';
            html += '<div class="filter-features-container"></div>';
            html += '</div>';
            html += '<div class="filter-row filter-row-values filter-row-feat-values" data-type="feature" style="display:none;">';
            html += '<div class="filter-values-container"></div>';
            html += '</div>';

            // Entity-specific filters: Categories
            html += '<div class="filter-row filter-row-entity-categories filter-row-multi" data-entity="categories" style="display:none;">';
            html += '<div class="filter-subrow">';
            html += '<div class="filter-range-group">';
            html += '<span class="filter-range-label">' + this.esIcon('inventory_2') + ' ' + (trans.product_count || 'Products') + ':</span>';
            html += '<input type="number" class="filter-product-count-min" placeholder="' + (trans.min || 'Min') + '" min="0" step="1">';
            html += '<span class="filter-range-sep">-</span>';
            html += '<input type="number" class="filter-product-count-max" placeholder="' + (trans.max || 'Max') + '" min="0" step="1">';
            html += '</div>';
            html += '<div class="filter-range-group">';
            html += '<span class="filter-range-label">' + this.esIcon('shopping_cart') + ' ' + (trans.total_sales || 'Sales') + ':</span>';
            html += '<input type="number" class="filter-sales-min" placeholder="' + (trans.min || 'Min') + '" min="0" step="1">';
            html += '<span class="filter-range-sep">-</span>';
            html += '<input type="number" class="filter-sales-max" placeholder="' + (trans.max || 'Max') + '" min="0" step="1">';
            html += '</div>';
            html += '<div class="filter-range-group">';
            html += '<span class="filter-range-label">' + this.esIcon('payments') + ' ' + (trans.turnover || 'Revenue') + ':</span>';
            html += '<input type="number" class="filter-turnover-min" placeholder="' + (trans.min || 'Min') + '" min="0" step="1">';
            html += '<span class="filter-range-sep">-</span>';
            html += '<input type="number" class="filter-turnover-max" placeholder="' + (trans.max || 'Max') + '" min="0" step="1">';
            html += '</div>';
            html += '<label class="filter-label"><input type="checkbox" class="filter-active-only" checked> ' + (trans.active_only || 'Active only') + '</label>';
            html += '</div>';
            html += '<div class="filter-subrow">';
            html += '<div class="filter-select-group">';
            html += '<span class="filter-select-label">' + this.esIcon('account_tree') + ' ' + (trans.depth || 'Depth') + ':</span>';
            html += '<select class="filter-depth-select">';
            html += '<option value="">' + (trans.all_levels || 'All levels') + '</option>';
            html += '<option value="1">' + (trans.level || 'Level') + ' 1 (' + (trans.root || 'Root') + ')</option>';
            html += '<option value="2">' + (trans.level || 'Level') + ' 2</option>';
            html += '<option value="3">' + (trans.level || 'Level') + ' 3</option>';
            html += '<option value="4">' + (trans.level || 'Level') + ' 4+</option>';
            html += '</select>';
            html += '</div>';
            html += '<label class="filter-label"><input type="checkbox" class="filter-has-products"> ' + (trans.has_products || 'Has products') + '</label>';
            html += '<label class="filter-label"><input type="checkbox" class="filter-has-description"> ' + (trans.has_description || 'Has description') + '</label>';
            html += '<label class="filter-label"><input type="checkbox" class="filter-has-image"> ' + (trans.has_image || 'Has image') + '</label>';
            html += '<button type="button" class="btn-clear-filters">' + this.esIcon('close') + '</button>';
            html += '</div>';
            html += '</div>';

            // Entity-specific filters: Manufacturers
            html += '<div class="filter-row filter-row-entity-manufacturers filter-row-multi" data-entity="manufacturers" style="display:none;">';
            html += '<div class="filter-subrow">';
            html += '<div class="filter-range-group">';
            html += '<span class="filter-range-label">' + this.esIcon('inventory_2') + ' ' + (trans.product_count || 'Products') + ':</span>';
            html += '<input type="number" class="filter-product-count-min" placeholder="' + (trans.min || 'Min') + '" min="0" step="1">';
            html += '<span class="filter-range-sep">-</span>';
            html += '<input type="number" class="filter-product-count-max" placeholder="' + (trans.max || 'Max') + '" min="0" step="1">';
            html += '</div>';
            html += '<div class="filter-range-group">';
            html += '<span class="filter-range-label">' + this.esIcon('shopping_cart') + ' ' + (trans.total_sales || 'Sales') + ':</span>';
            html += '<input type="number" class="filter-sales-min" placeholder="' + (trans.min || 'Min') + '" min="0" step="1">';
            html += '<span class="filter-range-sep">-</span>';
            html += '<input type="number" class="filter-sales-max" placeholder="' + (trans.max || 'Max') + '" min="0" step="1">';
            html += '</div>';
            html += '<div class="filter-range-group">';
            html += '<span class="filter-range-label">' + this.esIcon('payments') + ' ' + (trans.turnover || 'Revenue') + ':</span>';
            html += '<input type="number" class="filter-turnover-min" placeholder="' + (trans.min || 'Min') + '" min="0" step="1">';
            html += '<span class="filter-range-sep">-</span>';
            html += '<input type="number" class="filter-turnover-max" placeholder="' + (trans.max || 'Max') + '" min="0" step="1">';
            html += '</div>';
            html += '<label class="filter-label"><input type="checkbox" class="filter-active-only" checked> ' + (trans.active_only || 'Active only') + '</label>';
            html += '</div>';
            html += '<div class="filter-subrow">';
            html += '<div class="filter-date-group">';
            html += '<span class="filter-date-label">' + this.esIcon('event') + ' ' + (trans.date_added || 'Added') + ':</span>';
            html += '<input type="date" class="filter-date-add-from" title="' + (trans.from || 'From') + '">';
            html += '<span class="filter-range-sep">-</span>';
            html += '<input type="date" class="filter-date-add-to" title="' + (trans.to || 'To') + '">';
            html += '</div>';
            html += '<div class="filter-date-group">';
            html += '<span class="filter-date-label">' + this.esIcon('schedule') + ' ' + (trans.last_product || 'Last product') + ':</span>';
            html += '<input type="date" class="filter-last-product-from" title="' + (trans.from || 'From') + '">';
            html += '<span class="filter-range-sep">-</span>';
            html += '<input type="date" class="filter-last-product-to" title="' + (trans.to || 'To') + '">';
            html += '</div>';
            html += '<button type="button" class="btn-clear-filters">' + this.esIcon('close') + '</button>';
            html += '</div>';
            html += '</div>';

            // Entity-specific filters: Suppliers
            html += '<div class="filter-row filter-row-entity-suppliers filter-row-multi" data-entity="suppliers" style="display:none;">';
            html += '<div class="filter-subrow">';
            html += '<div class="filter-range-group">';
            html += '<span class="filter-range-label">' + this.esIcon('inventory_2') + ' ' + (trans.product_count || 'Products') + ':</span>';
            html += '<input type="number" class="filter-product-count-min" placeholder="' + (trans.min || 'Min') + '" min="0" step="1">';
            html += '<span class="filter-range-sep">-</span>';
            html += '<input type="number" class="filter-product-count-max" placeholder="' + (trans.max || 'Max') + '" min="0" step="1">';
            html += '</div>';
            html += '<div class="filter-range-group">';
            html += '<span class="filter-range-label">' + this.esIcon('shopping_cart') + ' ' + (trans.total_sales || 'Sales') + ':</span>';
            html += '<input type="number" class="filter-sales-min" placeholder="' + (trans.min || 'Min') + '" min="0" step="1">';
            html += '<span class="filter-range-sep">-</span>';
            html += '<input type="number" class="filter-sales-max" placeholder="' + (trans.max || 'Max') + '" min="0" step="1">';
            html += '</div>';
            html += '<div class="filter-range-group">';
            html += '<span class="filter-range-label">' + this.esIcon('payments') + ' ' + (trans.turnover || 'Revenue') + ':</span>';
            html += '<input type="number" class="filter-turnover-min" placeholder="' + (trans.min || 'Min') + '" min="0" step="1">';
            html += '<span class="filter-range-sep">-</span>';
            html += '<input type="number" class="filter-turnover-max" placeholder="' + (trans.max || 'Max') + '" min="0" step="1">';
            html += '</div>';
            html += '<label class="filter-label"><input type="checkbox" class="filter-active-only" checked> ' + (trans.active_only || 'Active only') + '</label>';
            html += '</div>';
            html += '<div class="filter-subrow">';
            html += '<div class="filter-date-group">';
            html += '<span class="filter-date-label">' + this.esIcon('event') + ' ' + (trans.date_added || 'Added') + ':</span>';
            html += '<input type="date" class="filter-date-add-from" title="' + (trans.from || 'From') + '">';
            html += '<span class="filter-range-sep">-</span>';
            html += '<input type="date" class="filter-date-add-to" title="' + (trans.to || 'To') + '">';
            html += '</div>';
            html += '<div class="filter-date-group">';
            html += '<span class="filter-date-label">' + this.esIcon('schedule') + ' ' + (trans.last_product || 'Last product') + ':</span>';
            html += '<input type="date" class="filter-last-product-from" title="' + (trans.from || 'From') + '">';
            html += '<span class="filter-range-sep">-</span>';
            html += '<input type="date" class="filter-last-product-to" title="' + (trans.to || 'To') + '">';
            html += '</div>';
            html += '<button type="button" class="btn-clear-filters">' + this.esIcon('close') + '</button>';
            html += '</div>';
            html += '</div>';

            // Entity-specific filters: Attributes
            html += '<div class="filter-row filter-row-entity-attributes filter-row-multi" data-entity="attributes" style="display:none;">';
            html += '<div class="filter-subrow">';
            html += '<div class="filter-range-group">';
            html += '<span class="filter-range-label">' + this.esIcon('inventory_2') + ' ' + (trans.product_count || 'Products') + ':</span>';
            html += '<input type="number" class="filter-product-count-min" placeholder="' + (trans.min || 'Min') + '" min="0" step="1">';
            html += '<span class="filter-range-sep">-</span>';
            html += '<input type="number" class="filter-product-count-max" placeholder="' + (trans.max || 'Max') + '" min="0" step="1">';
            html += '</div>';
            html += '<div class="filter-range-group">';
            html += '<span class="filter-range-label">' + this.esIcon('shopping_cart') + ' ' + (trans.total_sales || 'Sales') + ':</span>';
            html += '<input type="number" class="filter-sales-min" placeholder="' + (trans.min || 'Min') + '" min="0" step="1">';
            html += '<span class="filter-range-sep">-</span>';
            html += '<input type="number" class="filter-sales-max" placeholder="' + (trans.max || 'Max') + '" min="0" step="1">';
            html += '</div>';
            html += '<div class="filter-range-group">';
            html += '<span class="filter-range-label">' + this.esIcon('payments') + ' ' + (trans.turnover || 'Revenue') + ':</span>';
            html += '<input type="number" class="filter-turnover-min" placeholder="' + (trans.min || 'Min') + '" min="0" step="1">';
            html += '<span class="filter-range-sep">-</span>';
            html += '<input type="number" class="filter-turnover-max" placeholder="' + (trans.max || 'Max') + '" min="0" step="1">';
            html += '</div>';
            html += '</div>';
            html += '<div class="filter-subrow">';
            html += '<div class="filter-select-group">';
            html += '<span class="filter-select-label">' + this.esIcon('label') + ' ' + (trans.attribute_group || 'Group') + ':</span>';
            html += '<select class="filter-attribute-group-select">';
            html += '<option value="">' + (trans.all_groups || 'All groups') + '</option>';
            html += '</select>';
            html += '</div>';
            html += '<label class="filter-label"><input type="checkbox" class="filter-is-color"> ' + (trans.color_only || 'Color attributes') + '</label>';
            html += '<button type="button" class="btn-clear-filters">' + this.esIcon('close') + '</button>';
            html += '</div>';
            html += '</div>';

            // Entity-specific filters: Features
            html += '<div class="filter-row filter-row-entity-features filter-row-multi" data-entity="features" style="display:none;">';
            html += '<div class="filter-subrow">';
            html += '<div class="filter-range-group">';
            html += '<span class="filter-range-label">' + this.esIcon('inventory_2') + ' ' + (trans.product_count || 'Products') + ':</span>';
            html += '<input type="number" class="filter-product-count-min" placeholder="' + (trans.min || 'Min') + '" min="0" step="1">';
            html += '<span class="filter-range-sep">-</span>';
            html += '<input type="number" class="filter-product-count-max" placeholder="' + (trans.max || 'Max') + '" min="0" step="1">';
            html += '</div>';
            html += '<div class="filter-range-group">';
            html += '<span class="filter-range-label">' + this.esIcon('shopping_cart') + ' ' + (trans.total_sales || 'Sales') + ':</span>';
            html += '<input type="number" class="filter-sales-min" placeholder="' + (trans.min || 'Min') + '" min="0" step="1">';
            html += '<span class="filter-range-sep">-</span>';
            html += '<input type="number" class="filter-sales-max" placeholder="' + (trans.max || 'Max') + '" min="0" step="1">';
            html += '</div>';
            html += '<div class="filter-range-group">';
            html += '<span class="filter-range-label">' + this.esIcon('payments') + ' ' + (trans.turnover || 'Revenue') + ':</span>';
            html += '<input type="number" class="filter-turnover-min" placeholder="' + (trans.min || 'Min') + '" min="0" step="1">';
            html += '<span class="filter-range-sep">-</span>';
            html += '<input type="number" class="filter-turnover-max" placeholder="' + (trans.max || 'Max') + '" min="0" step="1">';
            html += '</div>';
            html += '</div>';
            html += '<div class="filter-subrow">';
            html += '<div class="filter-select-group">';
            html += '<span class="filter-select-label">' + this.esIcon('list') + ' ' + (trans.feature_group || 'Group') + ':</span>';
            html += '<select class="filter-feature-group-select">';
            html += '<option value="">' + (trans.all_groups || 'All groups') + '</option>';
            html += '</select>';
            html += '</div>';
            html += '<label class="filter-label"><input type="checkbox" class="filter-is-custom"> ' + (trans.custom_only || 'Custom values') + '</label>';
            html += '<button type="button" class="btn-clear-filters">' + this.esIcon('close') + '</button>';
            html += '</div>';
            html += '</div>';

            // Entity-specific filters: CMS Pages
            html += '<div class="filter-row filter-row-entity-cms" data-entity="cms" style="display:none;">';
            html += '<label class="filter-label"><input type="checkbox" class="filter-active-only" checked> ' + (trans.active_only || 'Active only') + '</label>';
            html += '<label class="filter-label"><input type="checkbox" class="filter-indexable"> ' + (trans.indexable || 'Indexable') + '</label>';
            html += '<button type="button" class="btn-clear-filters">' + this.esIcon('close') + '</button>';
            html += '</div>';

            // Entity-specific filters: CMS Categories
            html += '<div class="filter-row filter-row-entity-cms-categories" data-entity="cms_categories" style="display:none;">';
            html += '<label class="filter-label"><input type="checkbox" class="filter-active-only" checked> ' + (trans.active_only || 'Active only') + '</label>';
            html += '<button type="button" class="btn-clear-filters">' + this.esIcon('close') + '</button>';
            html += '</div>';

            // Entity-specific filters: Countries
            html += '<div class="filter-row filter-row-entity-countries" data-entity="countries" style="display:none;">';
            html += '<label class="filter-label"><input type="checkbox" class="filter-active-only" checked> ' + (trans.active_only || 'Active only') + '</label>';
            html += '<label class="filter-label"><input type="checkbox" class="filter-has-holidays"> ' + (trans.has_holidays || 'Has holidays') + '</label>';
            html += '<label class="filter-label"><input type="checkbox" class="filter-contains-states"> ' + (trans.contains_states || 'Has states') + '</label>';
            html += '<div class="filter-select-group">';
            html += '<span class="filter-select-label">' + this.esIcon('language') + ' ' + (trans.zone || 'Zone') + ':</span>';
            html += '<select class="filter-zone-select">';
            html += '<option value="">' + (trans.all_zones || 'All zones') + '</option>';
            html += '</select>';
            html += '</div>';
            html += '<button type="button" class="btn-clear-filters">' + this.esIcon('close') + '</button>';
            html += '</div>';

            html += '</div>'; // End filter-panel

            // Results header for list view (product columns)
            html += '<div class="results-header">';
            html += '<span class="header-spacer"></span>';
            html += '<span class="header-col header-col-name">' + (trans.product || 'Product') + '</span>';
            html += '<span class="header-col header-col-price">' + (trans.price || 'Price') + '</span>';
            html += '<span class="header-col header-col-sale">' + (trans.sale || 'Sale') + '</span>';
            html += '<span class="header-col header-col-stock">' + (trans.stock || 'Stock') + '</span>';
            html += '<span class="header-col header-col-sales">' + (trans.sold || 'Sold') + '</span>';
            html += '</div>';

            // Results
            html += '<div class="dropdown-results"></div>';

            // Footer - unified load more + actions
            html += '<div class="dropdown-footer">';

            // Left side: load more
            html += '<div class="dropdown-footer-left" style="visibility:hidden;">';
            html += '<span class="load-label">' + (trans.load || 'Load') + '</span>';
            html += '<select class="load-more-select">';
            html += '<option value="20">20</option>';
            html += '<option value="50">50</option>';
            html += '<option value="100">100</option>';
            html += '<option value="all">' + (trans.all || 'All') + '</option>';
            html += '</select>';
            html += '<span class="remaining-text">' + (trans.of || 'of') + ' <strong class="remaining-count">0</strong> ' + (trans.remaining || 'remaining') + '</span>';
            html += '</div>';

            // Right side: action buttons
            html += '<div class="dropdown-footer-right">';
            html += '<button type="button" class="dropdown-action-btn btn-cancel">' + this.esIcon('close') + ' ' + (trans.cancel || 'Cancel') + ' <span class="btn-shortcut">Esc</span></button>';
            html += '<button type="button" class="dropdown-action-btn btn-save">' + this.esIcon('check') + ' ' + (trans.save || 'Save') + ' <span class="btn-shortcut">⏎</span></button>';
            html += '</div>';

            html += '</div>';

            html += '</div>';

            this.$dropdown = $(html);
            $('body').append(this.$dropdown);
        },

        hideDropdown: function() {
            if (this.$dropdown) {
                this.$dropdown.removeClass('show');
            }
            this.activeGroup = null;
        },

        positionDropdown: function($input) {
            if (!this.$dropdown) return;

            var $picker = $input.closest('.value-picker');
            var $searchBox = $input.closest('.entity-search-box');

            // Get absolute positions (dropdown is appended to body)
            var searchBoxOffset = $searchBox.offset();
            var searchBoxHeight = $searchBox.outerHeight();
            var pickerOffset = $picker.offset();
            var pickerWidth = $picker.outerWidth();

            // Calculate position relative to document
            var dropdownTop = searchBoxOffset.top + searchBoxHeight + 4;
            var dropdownLeft = pickerOffset.left;
            var dropdownWidth = Math.max(pickerWidth, 400);

            // Ensure dropdown doesn't overflow the viewport horizontally
            var viewportWidth = $(window).width();
            if (dropdownLeft + dropdownWidth > viewportWidth - 10) {
                dropdownWidth = viewportWidth - dropdownLeft - 10;
            }

            // Ensure dropdown doesn't overflow viewport vertically
            var viewportHeight = $(window).height();
            var scrollTop = $(window).scrollTop();
            var maxHeight = viewportHeight - (dropdownTop - scrollTop) - 20;
            maxHeight = Math.max(maxHeight, 400);

            this.$dropdown.css({
                position: 'absolute',
                top: dropdownTop,
                left: dropdownLeft,
                width: dropdownWidth,
                maxHeight: maxHeight,
                zIndex: 10000
            });

            // Show the dropdown
            this.$dropdown.addClass('show');
        }
    };

})(jQuery);
