{{--
    Shared Customer Lookup JS
    Requires: the customer lookup markup used by sales pages.
    Provides: window.customerLookup.init({ pointValue, onSelected, onCleared })
--}}
<script>
(function() {
    if (window.customerLookup) {
        return;
    }

    let currentCustomerResults = {};

    const csrfToken = document.querySelector('meta[name="csrf-token"]')?.content || '{{ csrf_token() }}';
    const customerSearchUrl = '{{ route("dashboard.customers.search") }}';
    const customerStoreUrl = '{{ route("dashboard.customers.storeAjax") }}';
    const customerBaseUrl = '{{ url('dashboard/customers') }}';

    function qs(selector, root = document) {
        return root.querySelector(selector);
    }

    function qsa(selector, root = document) {
        return Array.from(root.querySelectorAll(selector));
    }

    function escapeHtml(value) {
        return String(value ?? '').replace(/[&<>"']/g, (char) => ({
            '&': '&amp;',
            '<': '&lt;',
            '>': '&gt;',
            '"': '&quot;',
            "'": '&#039;',
        }[char]));
    }

    function setValue(selector, value) {
        const el = qs(selector);
        if (el) {
            el.value = value;
        }
    }

    function setText(selector, value) {
        const el = qs(selector);
        if (el) {
            el.textContent = value;
        }
    }

    function setHtml(selector, value) {
        const el = qs(selector);
        if (el) {
            el.innerHTML = value;
        }
    }

    function setVisible(selector, visible) {
        const el = qs(selector);
        if (el) {
            el.style.display = visible ? 'block' : 'none';
        }
    }

    function setBusy(isBusy) {
        const spinner = qs('#customer_search_spinner');
        if (spinner) {
            spinner.hidden = !isBusy;
            spinner.classList.toggle('hidden', !isBusy);
        }
    }

    function alertHtml(type, message) {
        const palette = {
            success: 'background:#f0fdf4;color:#15803d;border-color:#bbf7d0',
            warning: 'background:#fffbeb;color:#b45309;border-color:#fde68a',
            danger: 'background:#fef2f2;color:#b91c1c;border-color:#fecaca',
        }[type] || 'background:var(--surface-50);color:var(--text-primary);border-color:var(--border)';

        return `<div class="reservation-customer-count__alert" style="${palette}">${escapeHtml(message)}</div>`;
    }

    function renderCustomerInfo(customer) {
        return `
            <div class="reservation-customer-selected-card__identity reservation-selected-card">
                <h4 class="reservation-customer-selected-card__name">${escapeHtml(customer.name)}</h4>
                <div class="reservation-customer-selected-card__line"><i class="fa-solid fa-phone"></i><span>${escapeHtml(customer.phone || '-')}</span></div>
                <div class="reservation-customer-selected-card__line"><i class="fa-solid fa-phone"></i><span>${escapeHtml(customer.other_phone || '-')}</span></div>
                <div class="reservation-customer-selected-card__line"><i class="fa-solid fa-location-dot"></i><span>${escapeHtml(customer.governorate || '-')}</span></div>
                <div class="reservation-customer-selected-card__line"><i class="fa-solid fa-house"></i><span>${escapeHtml(customer.address || '-')}</span></div>
            </div>`;
    }

    function renderCustomerStats(customer) {
        return `
            <table class="reservation-customer-stats-table">
                <tbody>
                    <tr><td>{{ __('dashboard.Reservations') }}</td><td>${escapeHtml(customer.reservations_count || 0)}</td></tr>
                    <tr><td>{{ __('dashboard.Sales') }}</td><td>${escapeHtml(customer.sales_count || 0)}</td></tr>
                    <tr><td>{{ __('dashboard.Canceled Reservations') }}</td><td>${escapeHtml(customer.canceled_reservations_count || 0)}</td></tr>
                </tbody>
            </table>`;
    }

    function renderResults(customers) {
        currentCustomerResults = {};

        if (!customers.length) {
            setHtml('#customer_search_count', alertHtml('warning', '{{ __('dashboard.No results found') }}'));
            setHtml('#customer_search_results', '');
            return;
        }

        setHtml('#customer_search_count', alertHtml('success', `${customers.length} {{ __('dashboard.results found') }}`));

        let html = '<div class="reservation-customer-results-list">';
        customers.forEach((customer) => {
            currentCustomerResults[customer.id] = customer;
            const addr = [customer.governorate, customer.address].filter(Boolean).join(', ') || '{{ __("dashboard.No address provided") }}';
            const avatar = customer.avatar
                ? `<img src="/storage/${escapeHtml(customer.avatar)}" alt="" style="width:100%;height:100%;object-fit:cover;border-radius:inherit;">`
                : '<i class="fa-solid fa-user"></i>';

            html += `
                <div class="reservation-customer-result-card">
                    <div class="reservation-customer-result-card__body">
                        <div class="reservation-customer-result-card__layout">
                            <div class="reservation-customer-result-card__content">
                                <div class="reservation-customer-result-card__identity">
                                    <div class="reservation-customer-result-card__avatar">${avatar}</div>
                                    <div class="reservation-customer-result-card__identity-text">
                                        <h5 class="reservation-customer-result-card__name">${escapeHtml(customer.name)}</h5>
                                        <div class="reservation-customer-result-card__phone"><i class="fa-solid fa-phone"></i><span>${escapeHtml(customer.phone || '-')}</span></div>
                                    </div>
                                </div>
                                <div class="reservation-customer-result-card__meta">
                                    <div class="reservation-customer-result-card__meta-item"><i class="fa-solid fa-location-dot"></i><span>${escapeHtml(addr)}</span></div>
                                </div>
                            </div>
                            <div class="reservation-customer-result-card__actions">
                                <button type="button" class="app-btn app-btn--primary app-btn--sm select-customer-btn" data-id="${escapeHtml(customer.id)}">
                                    <i class="fa-solid fa-check"></i> {{ __('dashboard.Select') }}
                                </button>
                                <a href="${customerBaseUrl}/${encodeURIComponent(customer.id)}" target="_blank" class="app-btn app-btn--ghost app-btn--sm">
                                    <i class="fa-solid fa-arrow-up-right-from-square"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>`;
        });
        html += '</div>';

        setHtml('#customer_search_results', html);
    }

    async function fetchJson(url, options = {}) {
        const response = await fetch(url, {
            headers: {
                Accept: 'application/json',
                ...(options.headers || {}),
            },
            ...options,
        });

        const data = await response.json().catch(() => ({}));
        if (!response.ok) {
            const error = new Error('Request failed');
            error.response = data;
            throw error;
        }

        return data;
    }

    window.customerLookup = {
        select(customer, opts = {}) {
            const pointValue = opts.pointValue || 0;
            const points = Number(customer.loyalty_points || 0);

            setValue('#customer_id', customer.id);
            setText('#customer_points_balance', points);
            setText('#points_value_display', (points * pointValue).toFixed(2) + ' {{ __("EGP") }}');

            const loyaltyInput = qs('#loyalty_points_input');
            if (loyaltyInput) {
                loyaltyInput.max = points;
                loyaltyInput.value = 0;
            }

            setHtml('#selected_customer_info', renderCustomerInfo(customer));
            setHtml('#selected_customer_stats', renderCustomerStats(customer));
            setVisible('#customer_search_container', false);
            setHtml('#customer_search_results', '');
            setHtml('#customer_search_count', '');
            setValue('#customer_search', '');
            setVisible('#selected_customer_details_container', true);

            if (typeof opts.onSelected === 'function') {
                opts.onSelected(customer);
            }
        },

        clear(opts = {}) {
            setValue('#customer_id', '');
            setVisible('#selected_customer_details_container', false);
            setHtml('#selected_customer_info', '');
            setHtml('#selected_customer_stats', '');
            setVisible('#customer_search_container', true);
            setHtml('#customer_search_count', '');
            setHtml('#customer_search_results', '');
            setValue('#loyalty_points_input', 0);
            setText('#customer_points_balance', 0);
            setText('#points_value_display', '0.00 {{ __("EGP") }}');

            if (typeof opts.onCleared === 'function') {
                opts.onCleared();
            }
        },

        async search(keyword) {
            const cleanKeyword = String(keyword || '').trim();
            if (cleanKeyword.length < 2) {
                setHtml('#customer_search_results', '');
                setHtml('#customer_search_count', '');
                return;
            }

            setBusy(true);
            try {
                const params = new URLSearchParams({ keyword: cleanKeyword });
                const data = await fetchJson(`${customerSearchUrl}?${params.toString()}`);
                renderResults(Array.isArray(data) ? data : []);
            } catch (error) {
                setHtml('#customer_search_count', alertHtml('danger', '{{ __('dashboard.An error occurred') }}'));
            } finally {
                setBusy(false);
            }
        },

        async saveNew(opts = {}) {
            const btn = qs('#save_customer_btn');
            if (btn) {
                btn.disabled = true;
            }

            const formData = new FormData();
            formData.append('name', qs('#customer_name_modal')?.value || qs('#customer_name')?.value || '');
            formData.append('phone', qs('#customer_phone_modal')?.value || qs('#phone')?.value || '');
            formData.append('other_phone', qs('#customer_other_phone_modal')?.value || qs('#other_phone')?.value || '');
            formData.append('gender', qs('#customer_gender_modal')?.value || qs('#gender')?.value || '');
            formData.append('governorate', qs('#customer_governorate_modal')?.value || qs('#customer_governorate')?.value || '');
            formData.append('address', qs('#customer_address_modal')?.value || qs('#customer_address')?.value || '');
            formData.append('_token', csrfToken);

            try {
                const response = await fetchJson(customerStoreUrl, {
                    method: 'POST',
                    headers: { 'X-CSRF-TOKEN': csrfToken },
                    body: formData,
                });

                if (response.success) {
                    if (typeof closeModal === 'function') {
                        closeModal('addCustomerModal');
                    } else {
                        setVisible('#addCustomerModal', false);
                    }

                    Swal.fire({ icon: 'success', title: '{{ __("dashboard.Success") }}', text: response.message });
                    window.customerLookup.select(response.customer, opts);
                    qsa('#customer_name_modal, #customer_phone_modal, #customer_other_phone_modal, #customer_governorate_modal, #customer_address_modal, #customer_name, #phone, #other_phone, #customer_governorate, #customer_address').forEach((input) => {
                        input.value = '';
                    });
                }
            } catch (error) {
                let msg = '{{ __("dashboard.An error occurred while saving the customer") }}';
                if (error.response?.errors) {
                    msg = Object.values(error.response.errors).flat().map(escapeHtml).join('<br>');
                }
                Swal.fire({ icon: 'error', title: '{{ __("dashboard.Error") }}', html: msg });
            } finally {
                if (btn) {
                    btn.disabled = false;
                }
            }
        },

        init(opts = {}) {
            document.addEventListener('click', (event) => {
                const selectButton = event.target.closest('.select-customer-btn');
                if (selectButton) {
                    event.preventDefault();
                    const customer = currentCustomerResults[selectButton.dataset.id];
                    if (customer) {
                        window.customerLookup.select(customer, opts);
                    }
                    return;
                }

                if (event.target.closest('#change_customer_btn')) {
                    event.preventDefault();
                    window.customerLookup.clear(opts);
                    qs('#customer_search')?.focus();
                    return;
                }

                if (event.target.closest('#save_customer_btn')) {
                    event.preventDefault();
                    window.customerLookup.saveNew(opts);
                }
            });

            qs('#customer_search')?.addEventListener('input', (event) => {
                window.customerLookup.search(event.target.value);
            });

            qs('#search_customer_btn')?.addEventListener('click', () => {
                window.customerLookup.search(qs('#customer_search')?.value || '');
            });
        }
    };
})();
</script>