{#
    versus-store.twig — definizione Alpine store `productCompare`

    Variabili Twig disponibili (vengono ereditate dal contesto pagina):
      device_type      (string) – es. "smartphone", "smartwatch", "laptop". Default: "smartphone"
      max_compare      (int)    – numero massimo di prodotti nel confronto. Default: 6
      compare_base_url (string) – URL base per la pagina di confronto. Default: "/compara/"
#}
{% set _device_type = device_type|default('smartphone') %}
{% set _max_compare = max_compare|default(6) %}
{% set root_url = env is defined and env == 'development' ? 'staging.' : '' %}
{% set _compare_base_url =  device_type == 'smartphone' ? 'https://' ~ root_url ~ 'hdblog.it/compara' : 'https://' ~ root_url ~ 'hdblog.it/compara/'~ device_type ~'/' %}

<script>
    document.addEventListener('alpine:init', () => {
        Alpine.store('productCompare', {
            showModal: false,
            showLimitModal: false,
            deviceType: '{{ _device_type }}',
            selectedProducts: JSON.parse(localStorage.getItem('selectedProducts_{{ _device_type }}')) || [],

            _storageKey() {
                return 'selectedProducts_' + this.deviceType;
            },

            addToCompare(product) {
                const formattedProduct = {
                    id: product.id,
                    producer_name: product.producer_name || product.maker || 'Produttore sconosciuto',
                    model: product.model,
                    image_url: product.image_url || ''
                };

                if (this.selectedProducts.length >= {{ _max_compare }}) {
                    this.showLimitModal = true;
                    return;
                }

                if (!this.selectedProducts.some(p => p.id === formattedProduct.id)) {
                    this.selectedProducts.push(formattedProduct);
                    localStorage.setItem(this._storageKey(), JSON.stringify(this.selectedProducts));
                    this.showModal = true;
                }
            },

            removeFromCompare(productId) {
                this.selectedProducts = this.selectedProducts.filter(p => p.id !== productId);
                localStorage.setItem(this._storageKey(), JSON.stringify(this.selectedProducts));
                if (this.selectedProducts.length === 0) {
                    this.showModal = false;
                }
            },

            _currentComparisonProducts() {
                const source = document.getElementById('current-comparison-products');
                if (!source) {
                    return [];
                }

                try {
                    return Object.entries(JSON.parse(source.textContent)).map(([productId, product]) => ({
                        id: String(product.id || product.model_id || productId || ''),
                        producer_name: product.producer_name || product.maker || product.produttore || '',
                        model: product.model || product.modello || product.name || '',
                        image_url: product.image_url || product.model_image_url || ''
                    })).filter(product => product.id);
                } catch (error) {
                    console.error('Errore nel parsing dei prodotti del confronto:', error);
                    return [];
                }
            },

            removeFromCurrentComparison(productId, removeUrl) {
                const id = String(productId);
                const currentProducts = this._currentComparisonProducts();

                if (currentProducts.length > 0) {
                    this.selectedProducts = currentProducts.filter(product => product.id !== id);
                    localStorage.setItem(this._storageKey(), JSON.stringify(this.selectedProducts));
                } else {
                    this.selectedProducts = this.selectedProducts.filter(product => String(product.id) !== id);
                    localStorage.setItem(this._storageKey(), JSON.stringify(this.selectedProducts));
                }

                if (this.selectedProducts.length > 0) {
                    this.compareProducts();
                    return;
                }

                window.location.href = removeUrl;
            },

            clearAll() {
                this.selectedProducts = [];
                localStorage.setItem(this._storageKey(), JSON.stringify(this.selectedProducts));
                this.showModal = false;
            },

            compareProducts() {
                const query = this.selectedProducts.map(p => p.id).join('-');
                const base = this.deviceType && this.deviceType !== 'smartphone'
                    ? `/compara/${this.deviceType}/`
                    : '/compara/';
                window.location.href = base + query + '.html';
            }
        });
    });
</script>
