document.addEventListener('DOMContentLoaded', () => {
    const toastEls = document.querySelectorAll('.toast');
    toastEls.forEach((el) => new bootstrap.Toast(el).show());

    if (!window.erpData) {
        return;
    }

    const customerSelect = document.getElementById('customerSelect');
    const branchSelect = document.getElementById('branchSelect');
    const productSelect = document.getElementById('productSelect');
    const qtyInput = document.getElementById('qtyInput');
    const unitPricePreview = document.getElementById('unitPricePreview');
    const stockPreview = document.getElementById('stockPreview');
    const subtotalPreview = document.getElementById('subtotalPreview');
    const vatPreview = document.getElementById('vatPreview');
    const grandPreview = document.getElementById('grandPreview');
    const allowedHint = document.getElementById('allowedHint');

    if (!customerSelect || !branchSelect || !productSelect || !qtyInput) {
        return;
    }

    const customers = window.erpData.customers || [];
    const products = window.erpData.products || [];
    const currency = (value) => `${Number(value).toFixed(2)} ر.س`;

    const getCustomer = () => customers.find((item) => String(item.id) === customerSelect.value);
    const getProduct = () => products.find((item) => String(item.id) === productSelect.value);

    const renderBranches = () => {
        const customer = getCustomer();
        branchSelect.innerHTML = '<option value="">اختر الفرع</option>';
        if (!customer) {
            branchSelect.innerHTML = '<option value="">اختر الفرع بعد العميل</option>';
            return;
        }
        (customer.branches || []).forEach((branch, index) => {
            const option = document.createElement('option');
            option.value = branch;
            option.textContent = branch;
            if (index === 0) option.selected = true;
            branchSelect.appendChild(option);
        });
    };

    const filterProducts = () => {
        const customer = getCustomer();
        const allowedSkus = customer?.allowed_skus || [];
        Array.from(productSelect.options).forEach((option) => {
            if (!option.value) {
                option.hidden = false;
                return;
            }
            const product = products.find((item) => String(item.id) === option.value);
            if (!product) {
                option.hidden = false;
                return;
            }
            const allowed = allowedSkus.length === 0 || allowedSkus.includes(product.sku);
            option.hidden = !allowed;
        });

        const selectedProduct = getProduct();
        if (selectedProduct && selectedProduct.sku && allowedSkus.length && !allowedSkus.includes(selectedProduct.sku)) {
            productSelect.value = '';
        }

        allowedHint.textContent = allowedSkus.length
            ? `الأصناف المسموح بها: ${allowedSkus.join('، ')}`
            : 'هذا العميل لا يملك تقييدًا على الأصناف.';
    };

    const refreshSummary = () => {
        const customer = getCustomer();
        const product = getProduct();
        const qty = Number(qtyInput.value || 0);
        if (!product) {
            unitPricePreview.value = currency(0);
            stockPreview.textContent = '—';
            subtotalPreview.textContent = currency(0);
            vatPreview.textContent = currency(0);
            grandPreview.textContent = currency(0);
            return;
        }

        const overrides = customer?.price_overrides || {};
        const unitPrice = overrides[product.sku] !== undefined ? Number(overrides[product.sku]) : Number(product.sale_price || 0);
        const subtotal = qty * unitPrice;
        const vat = subtotal * 0.15;
        const grand = subtotal + vat;

        unitPricePreview.value = currency(unitPrice);
        stockPreview.textContent = `${product.stock_qty} ${product.unit}`;
        subtotalPreview.textContent = currency(subtotal);
        vatPreview.textContent = currency(vat);
        grandPreview.textContent = currency(grand);
    };

    customerSelect.addEventListener('change', () => {
        renderBranches();
        filterProducts();
        refreshSummary();
    });

    productSelect.addEventListener('change', refreshSummary);
    qtyInput.addEventListener('input', refreshSummary);

    renderBranches();
    filterProducts();
    refreshSummary();
});