/**
 * customer-search.js — Alpine.js Customer Search Component
 * Used in Quote and Invoice modals for customer dropdown
 */

function customerSearch(type) {
    return {
        search: '',
        selectedId: '',
        selectedName: '',
        open: false,
        highlighted: 0,

        get filteredCustomers() {
            const allCustomers = window.getCustomers ? window.getCustomers() : (window.customers || []);

            if (!this.search) {
                return allCustomers;
            }

            const searchLower = this.search.toLowerCase();
            return allCustomers.filter(c =>
                (c.name || '').toLowerCase().includes(searchLower) ||
                (c.line1 || '').toLowerCase().includes(searchLower) ||
                (c.city || '').toLowerCase().includes(searchLower) ||
                (c.account_number && c.account_number.includes(searchLower))
            );
        },

        selectCustomer(customer) {
            this.selectedId = customer.id;
            this.selectedName = customer.name;
            this.search = customer.name;
            this.open = false;
            this.highlighted = 0;
        },

        highlightNext() {
            if (this.highlighted < this.filteredCustomers.length - 1) {
                this.highlighted++;
            }
        },

        highlightPrev() {
            if (this.highlighted > 0) {
                this.highlighted--;
            }
        },

        selectHighlighted() {
            if (this.filteredCustomers[this.highlighted]) {
                this.selectCustomer(this.filteredCustomers[this.highlighted]);
            }
        },

        reset() {
            this.search = '';
            this.selectedId = '';
            this.selectedName = '';
            this.open = false;
            this.highlighted = 0;
        }
    };
}

// Make globally available for Alpine x-data
window.customerSearch = customerSearch;