// formatCurrency should be loaded before this file
const formatCurrency = typeof window !== 'undefined' ? window.formatCurrency : (typeof require !== 'undefined' ? require('../utils/formatCurrency.js').formatCurrency : null);

function ProductList({ products, searchTerm = '', onAddToCart }) {
    const filteredProducts = products.filter(product => {
        const searchLower = (searchTerm || '').toLowerCase();
        const name = (product.name || '').toLowerCase();
        const category = (product.category || '').toLowerCase();
        return name.includes(searchLower) || category.includes(searchLower);
    });

    return (
        <div className="product-list" style={{ flex: 1, overflowY: 'auto', minHeight: 0 }}>
            {filteredProducts.length > 0 ? (
                <div className="product-grid">
                    {filteredProducts.map(product => (
                        <div
                            key={product.id}
                            className="product-item"
                            onClick={() => onAddToCart(product)}
                        >
                            <h3 className="product-name">{product.name}</h3>
                            <p className="product-category">{product.category}</p>
                            <div className="product-price">
                                {formatCurrency(product.price_low != null && product.price_low !== '' ? product.price_low : product.price)}
                            </div>
                            {Number(product.pcount) > 0 && Number(product.price_big) > 0 && (
                                <p className="product-info" style={{ fontSize: '10px', color: '#2e7d32', marginTop: '2px', fontWeight: '600' }}>
                                    ≥{product.pcount} {product.xn || 'ш'}: {formatCurrency(product.price_big)} (бөөний нэгж)
                                </p>
                            )}
                            {product.dotcode && (
                                <p className="product-info" style={{ fontSize: '9px', color: '#95a5a6', marginTop: '4px' }}>
                                    Дотоод код: {product.dotcode}
                                </p>
                            )}
                            {product.barcode && (
                                <p className="product-barcode">
                                    {product.barcode}
                                </p>
                            )}
                            {product.taxType && (
                                <p className="product-info" style={{ fontSize: '9px', color: '#95a5a6', marginTop: '4px' }}>
                                    Татварын төрөл: {product.taxType}
                                </p>
                            )}
                            {product.taxProductCode && (
                                <p className="product-info" style={{ fontSize: '9px', color: '#95a5a6', marginTop: '4px' }}>
                                    Tax Product Code: {product.taxProductCode}
                                </p>
                            )}
                        </div>
                    ))}
                </div>
            ) : (
                <div style={{ 
                    padding: '20px', 
                    textAlign: 'center', 
                    color: '#95a5a6',
                    fontSize: '14px'
                }}>
                    Бүтээгдэхүүн олдсонгүй
                </div>
            )}
        </div>
    );
}

// Make available globally for browser
if (typeof window !== 'undefined') {
    window.ProductList = ProductList;
}