export class FlowReserve extends HTMLAnchorElement {
    constructor() {
        super();
        this.sidebarId = 'flow-reserve-sidebar';
        this.storageKey = 'pl_list';
        this.apiUrl = '/basket/json';
        this.checkAvailabilityUrl = '/produit/check/basket';
        this.isOpen = false;
        this.productsAvailable = true;
    }

    connectedCallback() {
        this.addEventListener('click', (e) => {
            e.preventDefault();
            this.toggleSidebar();
        });

        // Listen for updates to the cart from other components
        window.addEventListener('cart:updated', () => {
            this.updateBadge();
            this._checkProductAvailability(); // Re-check on cart update
        });

        // Initial badge update
        this.updateBadge();
        this._checkProductAvailability();
    }

    /**
     * Updates the notification badge on the icon
     */
    updateBadge() {
        const list = this.getList();
        const badge = this.querySelector('[data-count]');
        if (badge) {
            badge.innerText = list.length;
            if (list.length > 0) {
                badge.classList.remove('hidden');
            } else {
                badge.classList.add('hidden');
            }
        }
    }

    getList() {
        try {
            return JSON.parse(sessionStorage.getItem(this.storageKey) || '[]');
        } catch (e) {
            return [];
        }
    }

    getOptions() {
        try {
            return JSON.parse(sessionStorage.getItem('pl_options') || '{}');
        } catch (e) {
            return {};
        }
    }

    removeFromList(id) {
        let list = this.getList();
        list = list.filter(itemId => itemId.toString() !== id.toString());
        sessionStorage.setItem(this.storageKey, JSON.stringify(list));

        // Remove options for this product
        const options = this.getOptions();
        if (options[id]) {
            delete options[id];
            sessionStorage.setItem('pl_options', JSON.stringify(options));
        }

        window.dispatchEvent(new CustomEvent('cart:updated'));
        this.refreshContent(); // Re-fetch and render
    }

    toggleSidebar() {
        if (this.isOpen) {
            this.close();
        } else {
            this.open();
        }
    }

    open() {
        this.ensureSidebarExists();
        const sidebar = document.getElementById(this.sidebarId);
        const backdrop = sidebar.querySelector('.backdrop');
        const panel = sidebar.querySelector('.panel');

        sidebar.classList.remove('pointer-events-none');
        backdrop.classList.remove('opacity-0');
        panel.classList.remove('translate-x-full');

        this.isOpen = true;
        this.refreshContent();
    }

    close() {
        const sidebar = document.getElementById(this.sidebarId);
        if (!sidebar) return;

        const backdrop = sidebar.querySelector('.backdrop');
        const panel = sidebar.querySelector('.panel');

        backdrop.classList.add('opacity-0');
        panel.classList.add('translate-x-full');

        setTimeout(() => {
            sidebar.classList.add('pointer-events-none');
        }, 300); // Match transition duration

        this.isOpen = false;
    }

    async _checkProductAvailability() {
        const ids = this.getList();
        if (ids.length === 0) {
            this.productsAvailable = true;
            return;
        }

        let dates = { start: null, end: null };
        try {
            dates = JSON.parse(sessionStorage.getItem('reservation_dates') || '{}');
        } catch (e) {
            console.warn('Invalid reservation dates in sessionStorage for availability check');
        }

        try {
            const response = await fetch(this.checkAvailabilityUrl, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({
                    ids,
                    start: dates.start,
                    end: dates.end
                })
            });

            if (!response.ok) throw new Error('Erreur réseau lors de la vérification de disponibilité');

            const data = await response.json();
            this.productsAvailable = data.available;

            if (data.unavailable_products_ids && data.unavailable_products_ids.length > 0) {
                let currentList = this.getList();
                const initialLength = currentList.length;
                // Filter out unavailable items
                currentList = currentList.filter(id => !data.unavailable_products_ids.includes(parseInt(id)) && !data.unavailable_products_ids.includes(String(id)));
                
                if (currentList.length !== initialLength) {
                    sessionStorage.setItem(this.storageKey, JSON.stringify(currentList));
                    window.dispatchEvent(new CustomEvent('cart:updated'));
                    console.warn('Produits indisponibles retirés du panier:', data.unavailable_products_ids);
                    // Force refresh to update UI immediately
                    this.refreshContent();
                }
            }

        } catch (error) {
            console.error('Erreur lors de la vérification de disponibilité:', error);
            this.productsAvailable = false;
        }
    }

    ensureSidebarExists() {
        if (document.getElementById(this.sidebarId)) return;

        const template = `
            <div id="${this.sidebarId}" class="fixed inset-0 z-[100] flex justify-end pointer-events-none">
                <!-- Backdrop -->
                <div class="backdrop absolute inset-0 bg-slate-900/60 backdrop-blur-sm opacity-0 transition-opacity duration-300"></div>

                <!-- Panel -->
                <div class="panel w-full max-w-md bg-white shadow-2xl translate-x-full transition-transform duration-300 flex flex-col relative z-10">

                    <!-- Header -->
                    <div class="p-6 border-b border-gray-100 flex items-center justify-between bg-white">
                        <div>
                            <h2 class="text-2xl font-black text-slate-900 uppercase italic tracking-tighter">Ma Super <br><span class="text-[#f39e36]">Future Réservation</span></h2>
                        </div>
                        <button id="flow-reserve-close" class="p-2 hover:bg-gray-100 rounded-full transition-colors">
                            <svg class="w-6 h-6 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
                        </button>
                    </div>

                    <!-- Content (Loader/List/Empty) -->
                    <div id="flow-reserve-content" class="flex-1 overflow-y-auto p-6 space-y-6 bg-gray-50/50 relative">
                        <!-- Content injected via JS -->
                    </div>

                    <!-- Footer -->
                    <div id="flow-reserve-footer" class="p-6 border-t border-gray-100 bg-white">
                            <!-- Content injected via JS -->
                    </div>
                </div>
            </div>
        `;
        document.body.insertAdjacentHTML('beforeend', template);

        // Bind events
        const sidebar = document.getElementById(this.sidebarId);

        const closeHandler = (e) => {
            if (e) {
                e.preventDefault();
                e.stopPropagation();
            }
            this.close();
        };

        sidebar.querySelector('.backdrop').addEventListener('click', closeHandler);
        sidebar.querySelector('#flow-reserve-close').addEventListener('click', closeHandler);
    }

    async refreshContent() {
        const container = document.getElementById('flow-reserve-content');
        const footer = document.getElementById('flow-reserve-footer');

        // Loader
        container.innerHTML = `
            <div class="absolute inset-0 flex items-center justify-center">
                <div class="w-10 h-10 border-4 border-[#f39e36] border-t-transparent rounded-full animate-spin"></div>
            </div>
        `;
        footer.innerHTML = '';

        const ids = this.getList();
        const options = this.getOptions();

        // Retrieve dates from sessionStorage
        let dates = { start: null, end: null };
        try {
            dates = JSON.parse(sessionStorage.getItem('reservation_dates') || '{}');
        } catch (e) {
            console.warn('Invalid reservation dates in sessionStorage');
        }

        if (ids.length === 0) {
            this.renderEmpty(container, footer);
            this.productsAvailable = true;
            return;
        }

        // Display warning if products are not available
        if (!this.productsAvailable) {
            container.innerHTML = `
                <div class="text-center py-10 bg-red-100 border border-red-200 text-red-700 rounded-xl">
                    <p class="font-bold mb-2">Attention :</p>
                    <p>Certains produits de votre panier ne sont plus disponibles. Veuillez vérifier votre sélection.</p>
                </div>
            `;
            footer.innerHTML = `
                <button disabled class="block w-full py-4 bg-gray-300 text-gray-500 text-center rounded-2xl font-black uppercase italic tracking-widest cursor-not-allowed">
                    Valider ma demande (Produits indisponibles)
                </button>
            `;
            return;
        }

        try {
            const response = await fetch(this.apiUrl, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({
                    ids,
                    options,
                    start: dates.start,
                    end: dates.end,
                    formule: sessionStorage.getItem('active_formule')
                })
            });

            if (!response.ok) throw new Error('Erreur réseau');

            const data = await response.json();

            // Handle removed products (deleted from DB)
            if (data.unavailable_products_ids && data.unavailable_products_ids.length > 0) {
                let currentList = this.getList();
                const initialLength = currentList.length;
                currentList = currentList.filter(id => !data.unavailable_products_ids.includes(parseInt(id)) && !data.unavailable_products_ids.includes(String(id))); // Handle string/int types
                
                if (currentList.length !== initialLength) {
                    sessionStorage.setItem(this.storageKey, JSON.stringify(currentList));
                    window.dispatchEvent(new CustomEvent('cart:updated'));
                    console.warn('Certains produits ont été retirés car ils n\'existent plus:', data.unavailable_products_ids);
                }
            }

            // Merge client-side dates if server didn't return them (or to prioritize client choice)
            if (!data.start_date && dates.start) data.start_date = this.formatDate(dates.start);
            if (!data.end_date && dates.end) data.end_date = this.formatDate(dates.end);

            // Fallback: if server returns dates in a format we can use directly, fine.
            // If we just want to display what is in local storage:
            if (dates.start) data.start_date = this.formatDate(dates.start);
            if (dates.end) data.end_date = this.formatDate(dates.end);

            this.renderList(container, footer, data);

        } catch (error) {
            console.error(error);
            container.innerHTML = `
                <div class="text-center py-10">
                    <p class="text-red-500 font-bold">Une erreur est survenue lors du chargement de votre panier.</p>
                </div>
            `;
        }
    }

    renderEmpty(container, footer) {
        container.innerHTML = `
            <div class="h-full flex flex-col items-center justify-center text-center opacity-60">
                <svg class="w-16 h-16 text-slate-300 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"/></svg>
                <p class="text-lg font-bold text-slate-900 italic">Votre panier est vide</p>
                <p class="text-sm text-slate-500">Ajoutez du bonheur à votre événement !</p>
                <a href="/reservation/catalogue" id="flow-empty-catalog-link" class="mt-6 px-6 py-3 bg-[#f39e36] text-white rounded-xl font-bold text-sm uppercase tracking-widest hover:bg-slate-900 transition-colors">
                    Voir le catalogue
                </a>
            </div>
        `;
        footer.innerHTML = '';
        container.querySelector('#flow-empty-catalog-link').addEventListener('click', () => this.close());
    }

    renderList(container, footer, data) {
        // --- HEADER DATES ---
        let datesHtml = '';
        if (data.start_date && data.end_date) {
            datesHtml = `
                <div class="bg-blue-50 border border-blue-100 rounded-2xl p-4 mb-4 text-center">
                    <p class="text-[10px] uppercase tracking-widest text-slate-500 font-bold mb-1">Votre période</p>
                    <div class="flex items-center justify-center gap-2 text-sm font-black text-slate-900 uppercase italic">
                        <span>${data.start_date}</span>
                        <svg class="w-4 h-4 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
                        <span>${data.end_date}</span>
                    </div>
                </div>
            `;
        }

        const productsHtml = data.products.map(product => {
            let optionsHtml = '';
            if (product.options && product.options.length > 0) {
                optionsHtml = '<div class="mt-1 space-y-1 bg-slate-50 p-2 rounded-lg">';
                product.options.forEach(opt => {
                    optionsHtml += `
                        <div class="flex justify-between text-[9px] text-slate-500 font-medium">
                            <span>+ ${opt.name}</span>
                            <span>${this.formatPrice(opt.price)}</span>
                        </div>
                    `;
                });
                optionsHtml += '</div>';
            }

            return `
            <div class="flex gap-4 bg-white p-3 rounded-2xl shadow-sm border border-gray-100">
                <div class="w-20 h-20 bg-gray-100 rounded-xl flex-shrink-0 overflow-hidden">
                    <img src="${product.image || '/provider/images/favicon.png'}" class="w-full h-full object-cover" alt="${product.name}">
                </div>
                <div class="flex-1 flex flex-col justify-between">
                    <div>
                        ${product.in_formule ? `<span class="inline-block px-2 py-0.5 rounded text-[8px] font-black uppercase tracking-widest bg-blue-100 text-blue-600 mb-1">Inclus</span>` : ''}
                        <h4 class="font-black text-slate-900 leading-tight uppercase italic text-sm line-clamp-2">${product.name}</h4>
                        <div class="mt-1 flex flex-wrap gap-2 text-[10px] text-slate-500 font-bold uppercase">
                            <span>1J: ${this.formatPrice(product.priceHt1Day)} HT</span>
                            ${product.priceHTSupDay ? `<span class="text-slate-300">|</span><span>Sup: ${this.formatPrice(product.priceHTSupDay)} HT</span>` : ''}
                        </div>
                        ${optionsHtml}
                    </div>
                    <div class="flex justify-between items-end mt-2">
                        <span class="text-[#0782bc] font-black text-sm">${this.formatPrice(product.totalPriceTTC || product.totalPriceHT)} <span class="text-[9px] text-slate-400 font-bold">Total</span></span>
                        <button class="text-red-400 hover:text-red-600 p-1 remove-btn" data-remove-id="${product.id}">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
                        </button>
                    </div>
                </div>
            </div>
        `;
        }).join('');

        container.innerHTML = `<div class="space-y-3">${datesHtml}${productsHtml}</div>`;

        // Attach event listeners
        container.querySelectorAll('.remove-btn').forEach(btn => {
            btn.addEventListener('click', (e) => {
                e.preventDefault();
                e.stopPropagation();
                this.removeFromList(btn.dataset.removeId);
            });
        });

        // --- RENDER FOOTER (TOTALS) ---
        const total = data.total || {};
        const hasTva = total.totalTva > 0;
        const promotion = data.promotion;
        const formuleName = total.formule;

        let promoHtml = '';
        let originalTotalHT = total.totalHT;

        if (formuleName) {
             promoHtml += `
                <div class="flex justify-between text-xs text-blue-600 font-bold uppercase mb-2">
                    <span>Formule</span>
                    <span>${formuleName}</span>
                </div>
            `;
        }

        if (promotion && total.discount > 0) {
             originalTotalHT = total.totalHT + total.discount;
             promoHtml += `
                <div class="flex justify-between text-xs text-[#f39e36] font-bold uppercase">
                    <span>${promotion.name} (-${promotion.percentage}%)</span>
                    <span>-${this.formatPrice(total.discount)}</span>
                </div>
            `;
        }

        footer.innerHTML = `
            <div class="space-y-2 mb-6">
                <div class="flex justify-between text-xs text-slate-500 font-bold uppercase">
                    <span>Total HT</span>
                    <span>${this.formatPrice(originalTotalHT)}</span>
                </div>
                ${promoHtml}
                ${hasTva ? `
                    <div class="flex justify-between text-xs text-slate-500 font-bold uppercase">
                        <span>TVA</span>
                        <span>${this.formatPrice(total.totalTva)}</span>
                    </div>
                ` : ''}
                <div class="flex justify-between text-lg text-slate-900 font-black uppercase italic border-t border-dashed border-gray-200 pt-2">
                    <span>Total ${hasTva ? 'TTC' : 'HT'}</span>
                    <span class="text-[#f39e36]">${this.formatPrice(total.totalTTC || total.totalHT)}</span>
                </div>
            </div>
            <a data-turbo="false" href="/reservation/devis" id="flow-validate-btn" class="block w-full py-4 bg-slate-900 text-white text-center rounded-2xl font-black uppercase italic tracking-widest hover:bg-[#fc0e50] transition-colors shadow-lg">
                Valider ma demande
            </a>
        `;

        const validateBtn = footer.querySelector('#flow-validate-btn');
        if (validateBtn) {
            validateBtn.addEventListener('click', (e) => {
                this.validateBasket(e);
            });
        }
    }

    async validateBasket(e) {
        e.preventDefault();

        const ids = this.getList();
        const options = this.getOptions();
        let dates = { start: null, end: null };
        try {
            dates = JSON.parse(sessionStorage.getItem('reservation_dates') || '{}');
        } catch (error) {
            console.warn('Invalid reservation dates in sessionStorage');
        }

        try {
            const response = await fetch('/session', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({
                    ids,
                    options,
                    start: dates.start,
                    end: dates.end,
                    formule: sessionStorage.getItem('active_formule')
                })
            });

            if (!response.ok) throw new Error('Erreur réseau');

            const data = await response.json();
            if (data.flowUrl) {
                window.location.href = data.flowUrl;
            }
        } catch (error) {
            console.error('Erreur lors de la validation du panier', error);
        }
    }

    formatDate(dateString) {
        if (!dateString) return '';
        try {
            const date = new Date(dateString);
            return new Intl.DateTimeFormat('fr-FR').format(date);
        } catch (e) {
            return dateString;
        }
    }

    formatPrice(amount) {
        if (amount === undefined || amount === null) return '-';
        return new Intl.NumberFormat('fr-FR', { style: 'currency', currency: 'EUR' }).format(amount);
    }
}