// Component con cho các nút hành động (số lượng, thêm vào giỏ)
const ProductActions = ({ quantity, setQuantity, onAddToCart, itemCode, config }) => {
    
    // Dựa vào config.lang để hiển thị song ngữ
    const addToCartText = config?.lang === 'vi' ? 'Thêm vào giỏ' : 'Add to Cart';

    return (
        <div className="d-flex align-items-center mt-3">
            <OrderQuantity quantity={quantity} setQuantity={setQuantity} config={config} />
            <ButtonCtl
                label={<><i className="fa fa-cart-plus me-2"></i> {addToCartText}</>}
                onClick={() => onAddToCart(itemCode, quantity)}
                variant='danger'
                type='button'
                style={{ 
                    marginLeft: '15px',      // Giảm khoảng cách
                    padding: '6px 12px',     // Giảm padding để nút nhỏ gọn hơn
                    fontSize: '0.9rem',      // Giảm kích thước chữ
                    height: '31px',           // Đồng bộ chiều cao với nút số lượng
                    marginTop:'-5px'
                }}
                tabIndex={0}
            />
        </div>
    );
};


const OrderQuantity = (props) => {
    const { 
        Button, InputGroup, FormControl 
    } = ReactBootstrap;
    const { quantity, setQuantity, config } = props;
    
    const MIN_VALUE = 1;
    const MAX_VALUE = 99999;

    const handleIncrement = () => {
        if (quantity < MAX_VALUE) {
            setQuantity(prev => Number(prev) + 1);
        }
    };

    const handleDecrement = () => {
        if (quantity > MIN_VALUE) {
            setQuantity(prev => Number(prev) - 1);
        }
    };

    const handleInputChange = (e) => {
        const value = e.target.value;
        if (value === '') {
            setQuantity('');
            return;
        }

        const numValue = parseInt(value, 10);
        if (!isNaN(numValue)) {
            setQuantity(Math.min(Math.max(numValue, 0), MAX_VALUE));
        }
    };

    const handleBlur = () => {
        if (quantity === '' || quantity < MIN_VALUE) {
            setQuantity(MIN_VALUE);
        }
    };

    // Style constants để code JSX sạch hơn
    const btnStyle = { width: 32, height: 32, display: 'flex', alignItems: 'center', justifyContent: 'center' };
    const inputStyle = { 
        fontSize: '14px', 
        width: '50px', 
        height: 32, 
        borderLeft: 'none', 
        borderRight: 'none' 
    };

    return (
        <div className="order-quantity-wrapper">
            <InputGroup className="mb-3" style={{ width: 'fit-content', marginTop: 10 }}>
                <Button 
                    variant="outline-secondary" 
                    onClick={handleDecrement}
                    disabled={quantity <= MIN_VALUE}
                    className="d-flex align-items-center justify-content-center p-0"
                    style={btnStyle}
                    aria-label="Decrease quantity"
                >
                    <span style={{ fontSize: '20px', lineHeight: 0 }}>&minus;</span>
                </Button>

                <FormControl
                    type="number"
                    value={quantity}
                    onChange={handleInputChange}
                    onBlur={handleBlur}
                    className="text-center fw-bold shadow-none p-0"
                    style={inputStyle}
                />

                <Button 
                    variant="outline-secondary" 
                    onClick={handleIncrement}
                    disabled={quantity >= MAX_VALUE}
                    className="d-flex align-items-center justify-content-center p-0"
                    style={btnStyle}
                    aria-label="Increase quantity"
                >
                    <span style={{ fontSize: '20px', lineHeight: 0 }}>&#43;</span>
                </Button>
            </InputGroup>

            <style>{`
                input::-webkit-outer-spin-button,
                input::-webkit-inner-spin-button {
                    -webkit-appearance: none;
                    margin: 0;
                }
                input[type=number] {
                    -moz-appearance: textfield;
                }
                .order-quantity-wrapper .btn-outline-secondary {
                    border-color: #ced4da;
                    color: #212529;
                }
                .order-quantity-wrapper .btn-outline-secondary:hover {
                    background-color: #f8f9fa;
                    color: #212529;
                    border-color: #ced4da;
                }
            `}</style>
        </div>
    );
};