const HeroBanner = () => {
    return (
        <div className="hero-banner-pre">
            <div className="row align-items-center g-4">
                <div className="col-lg-8 text-start">
                    <h1 style={{ fontFamily: "'Outfit', sans-serif", fontWeight: 800, color: '#581c87', fontSize: 'clamp(1.6rem, 4vw, 2.6rem)', lineHeight: 1.15, marginBottom: '15px' }}>
                        Siêu Thị Sức Khỏe & Sắc Đẹp <span style={{ background: 'linear-gradient(135deg, #a855f7 0%, #ec4899 100%)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent' }}>MEDiCARE</span> Hàng Đầu Việt Nam
                    </h1>
                    <p className="text-muted" style={{ fontSize: '1rem', lineHeight: 1.6, maxWidth: '650px', marginBottom: 0 }}>
                        Chào mừng bạn đến với hệ thống siêu thị MEDiCARE. Nơi cung cấp đầy đủ các giải pháp chăm sóc cơ thể toàn diện, mỹ phẩm trang điểm và dưỡng da mặt chất lượng cao, các dòng sản phẩm chăm sóc tóc trị rụng chuyên biệt, kết hợp với các dòng thực phẩm bổ sung bảo vệ sức khỏe chính hãng 100%. Cam kết uy tín, mua sắm an tâm!
                    </p>
                </div>
                <div className="col-lg-4 text-center text-lg-end d-none d-lg-block">
                    <img src="/static/libs/images/medicare-logo.png" alt="MEDiCARE Logo Sức Khỏe Làm Đẹp" style={{ maxHeight: '100px', filter: 'drop-shadow(0 10px 20px rgba(168, 85, 247, 0.2))' }} />
                </div>
            </div>
        </div>
    );
};

const ProductPageMaster = () => {
    const [loading, setLoading] = useState(false);
    const [description, setDescription] = useState();
   
    const [baskets, setBaskets] = useState(null); // {basket:{}, items:[]}
    const user_lang = commonFunc.getCookies('user_lang') || 'vi';
    const [userInfo, setUserInfo] = useState();
    const configDefault = { token: _token_encode, lang: user_lang, branch_no: (userInfo?.branch_no | 0) };  
    const [config, setConfig] = useState(configDefault);
    const [isMobile, setIsMobile] = useState(true);

    const [fromPage, setFromPage] = useState('master'); // master/cart
    const [currentPage, setCurrentPage] = useState(1);

    const perPage = 10;

    const handlePageChange = (newPage) => {
        setCurrentPage(parseInt(newPage));
        // 1. Tạo đối tượng URL hiện tại
        const url = new URL(window.location.href);
        
        // 2. Cập nhật hoặc thêm tham số 'page'
        url.searchParams.set('page', newPage);
        
        // 3. Thay đổi địa chỉ trình duyệt và reload trang
        window.location.href = url.toString();
    };

    const scrollToFirstPage = () => {
        const firstElement = document.getElementById('txtBarcode');
        if (firstElement) {
            firstElement.scrollIntoView({ behavior: 'smooth' }); // Cuộn đến phần tử với hiệu ứng mượt mà
        }
    };

    const fetchUserInfo = async () => {
        try {  
            setLoading(true);   
            const url = `/api/get-user-info`;
            const resultObj = await commonApi.APIGETByURL(url, config);          
            if (resultObj.status == 200){                
                let dataTmp = resultObj?.data;     
                setUserInfo(dataTmp);
                const configDefault = { token: _token_encode, lang: user_lang, branch_no: (dataTmp?.branch_no | 0) };  
                setConfig(configDefault);
            }    
        } catch (e) {            
            setUserInfo(null);
            console.log("ERROR get-user-info");
        } finally {
            setLoading(false);
        }
    };

    useEffect(() => {
        fetchUserInfo();
       
        const handleResize = () => {
            setIsMobile(window.innerWidth < 1280);
        };
        
        loadBasketsFromCookies();
        window.addEventListener('resize', handleResize);
        handleResize(); // Gọi ngay một lần để thiết lập trạng thái ban đầu
        
        const queryParams = new URLSearchParams(window.location.search);
        const keyword = queryParams.get('keyword');
        const page = queryParams.get('page');
        
        if (keyword) {
            setDescription(keyword); // Set giá trị từ keyword vào state
        }
        if (page) {
            setCurrentPage(parseInt(page || 1)); // Set giá trị từ keyword vào state
        }
        
        return () => {
            window.removeEventListener('resize', handleResize);
        };
    }, []);

    useEffect(() => {
        if (baskets == null){
            loadBasketsFromCookies();
        } else {
           if (baskets && baskets.items){
            const totalQtyReduce = baskets.items.reduce((sum, item) => {
                return sum + item.qty;
            }, 0); 
            updateShoppingBasket(totalQtyReduce, basketIconClick);
           }

           let newbaskets = {...baskets};
           newbaskets?.items?.forEach(item => {
               delete item.product_info;
           });
           
           // Check if newBaskets doesn't have basket_id, add a random basket_id
           if (!newbaskets?.basket?.basket_id) {
               const timestamp = Date.now(); // Lấy thời gian hiện tại tính đến mili giây
           }
           
           if ((newbaskets?.items?.length | 0) == 0){
               // không còn items nào, xóa hẵn bastket
               commonFunc.setCookies('baskets', {}, -1);
               setBaskets(null);
           } else {                
               if (newbaskets?.basket){
                   newbaskets.basket.reload = false;
                   if (newbaskets?.basket?.basket_id == null){
                       const timestamp = Date.now();
                       newbaskets.basket.basket_id = timestamp; //không bao giờ đổi basket id
                   }                    
               } else {
                   newbaskets.basket = {};
                   const timestamp = Date.now();
                   newbaskets.basket.basket_id = timestamp; //không bao giờ đổi basket id
               }
               
               if (baskets?.items?.length > 0){
                   // TODO                    
                   commonFunc.setCookies('baskets', JSON.stringify(newbaskets), undefined);
               }
           }      
        }
    }, [baskets]);

    const loadBasketsFromCookies = () => {
        let basketsCookie = commonFunc.getCookies('baskets');        
        if (basketsCookie) {
            try {
                let basketsObj = JSON.parse(basketsCookie);
                setBaskets(basketsObj);
                const totalQtyReduce = basketsObj.items.reduce((sum, item) => {
                    return sum + item.qty;
                }, 0); 
                updateShoppingBasket(totalQtyReduce, basketIconClick);
            } catch (e) {
                console.log("Error parsing baskets cookie:", e);
                setBaskets(null);
            }
        } else {
            setBaskets(null);
        }
    };

    const basketIconClick = () => {
        window.location.href = '/products?showCart=true';
    };

    function updateShoppingBasket(cartCount = 3, onClickAction) {
        // 1. Tìm phần tử icon_shopping_basket
        const basketIcon = document.getElementById('icon_shopping_basket');
        const divBasketIcon = document.getElementById('div_shopping_basket');  
        if (basketIcon) {
            // 2. Set display = '' (hiển thị lại nếu đang bị ẩn)
            if (cartCount <= 0) {
                divBasketIcon.style.cssText = 'display: none !important;float:right';
            } else {
                divBasketIcon.style.cssText = 'display: inline-flex !important;float:right';
            }

            // 3. Add actionClick nếu chưa có
            if (!basketIcon.dataset.hasClickListener) {
                basketIcon.addEventListener('click', function(e) {
                    console.log('Shopping basket clicked!');
                    if (typeof onClickAction === 'function') {
                        onClickAction();
                    }
                });
                
                // Đánh dấu để lần sau không add trùng
                basketIcon.dataset.hasClickListener = 'true';
            }

            // 4. Tìm badge_shopping_basket và set caption (số lượng)
            const badge = document.getElementById('badge_shopping_basket');
            if (badge) {
                badge.textContent = cartCount;
                badge.style.display = cartCount <= 0 ? 'none' : '';
            } else {
                console.warn("Không tìm thấy phần tử badge_shopping_basket");
            }
        } else {
            console.log("Không tìm thấy phần tử icon_shopping_basket");
        }
    }

    const handleSearch = async (option_return) => {  
        setLoading(true);
        // submit tới htts://...?keyword=description
        let queryParams = new URLSearchParams(window.location.search);
        queryParams.set("keyword", description || "");
        queryParams.set("option_return", option_return);
        const newUrl = window.location.pathname + '?' + queryParams.toString();
        window.location.href = newUrl;
    };
    
    const topics = dataRender?.topics || [];
    
    return (
        <>
            <LoadingComponent loading={loading} message="Wait" />
            <>            
                <HeroBanner />
                <SearchArea 
                    description={description} 
                    setDescription={setDescription} 
                    handleSearch={handleSearch} 
                    config={config} 
                    isMobile={isMobile} 
                />

                <TopicsCarousel 
                    topics={topics} 
                    isMobile={isMobile} 
                />

                <ProductGroups 
                    dataRender={dataRender} 
                    config={config} 
                    isMobile={isMobile} 
                    fromPage={fromPage} 
                    userInfo={userInfo} 
                    setBaskets={setBaskets} 
                    scrollToFirstPage={scrollToFirstPage} 
                    currentPage={currentPage} 
                    perPage={perPage} 
                    handlePageChange={handlePageChange} 
                />
            </>
        </>
    );
};