jQuery(document).ready(function($) {
    const vehicleSelector = {
        elements: {
            make: $('#apvc-make'),
            model: $('#apvc-model'),
            year: $('#apvc-year'),
            trim: $('#apvc-trim'),
            engine: $('#apvc-engine'),
            selector: $('.apvc-vehicle-selector'),
            results: $('#apvc-compatible-products')
        },
        
        init: function() {
            this.bindEvents();
            this.setSavedVehicle();
        },
        
        bindEvents: function() {
            this.elements.make.on('change', this.handleMakeChange.bind(this));
            this.elements.model.on('change', this.handleModelChange.bind(this));
            this.elements.year.on('change', this.handleYearChange.bind(this));
            this.elements.selector.on('submit', this.handleSubmit.bind(this));
        },
        
        handleMakeChange: function() {
            const makeId = this.elements.make.val();
            this.clearDependentFields(this.elements.model);
            this.clearDependentFields(this.elements.year);
            this.clearDependentFields(this.elements.trim);
            this.clearDependentFields(this.elements.engine);
            
            if (!makeId) return;
            
            this.loadTaxonomyOptions('models', makeId, this.elements.model);
        },
        
        handleModelChange: function() {
            const modelId = this.elements.model.val();
            this.clearDependentFields(this.elements.year);
            this.clearDependentFields(this.elements.trim);
            this.clearDependentFields(this.elements.engine);
            
            if (!modelId) return;
            
            this.loadTaxonomyOptions('years', modelId, this.elements.year);
        },
        
        handleYearChange: function() {
            const yearId = this.elements.year.val();
            this.clearDependentFields(this.elements.trim);
            this.clearDependentFields(this.elements.engine);
            
            if (!yearId) return;
            
            this.loadTaxonomyOptions('trims', yearId, this.elements.trim);
            this.loadTaxonomyOptions('engines', yearId, this.elements.engine);
        },
        
        loadTaxonomyOptions: function(type, parentId, targetElement) {
            $.ajax({
                url: apvc_params.ajax_url,
                type: 'POST',
                dataType: 'json',
                data: {
                    action: 'get_vehicle_data',
                    nonce: apvc_params.nonce,
                    type: type,
                    make: this.elements.make.val(),
                    model: this.elements.model.val(),
                    year: this.elements.year.val()
                },
                beforeSend: function() {
                    targetElement.prop('disabled', true).addClass('loading');
                },
                success: function(response) {
                    if (response.success && response.data.length) {
                        targetElement.empty().append($('<option>', {
                            value: '',
                            text: apvc_params.select_text
                        }));
                        
                        $.each(response.data, function(i, item) {
                            targetElement.append($('<option>', {
                                value: item.id,
                                text: item.text
                            }));
                        });
                    }
                },
                complete: function() {
                    targetElement.prop('disabled', false).removeClass('loading');
                }
            });
        },
        
        clearDependentFields: function(element) {
            element.val('').trigger('change').find('option:not(:first)').remove();
        },
        
        handleSubmit: function(e) {
            e.preventDefault();
            const vehicle = {
                make: this.elements.make.val(),
                model: this.elements.model.val(),
                year: this.elements.year.val(),
                trim: this.elements.trim.val(),
                engine: this.elements.engine.val()
            };
            
            this.saveVehicle(vehicle);
            this.loadCompatibleProducts(vehicle);
        },
        
        saveVehicle: function(vehicle) {
            $.post(apvc_params.ajax_url, {
                action: 'save_vehicle',
                nonce: apvc_params.nonce,
                vehicle: vehicle
            });
        },
        
        setSavedVehicle: function() {
            // Implement localStorage or cookie retrieval
        },
        
        loadCompatibleProducts: function(vehicle) {
            // AJAX call to load products
        }
    };
    
    vehicleSelector.init();
});