////////////////////////////////////////////////////////////
const useQuery = () => {
    return new URLSearchParams(useLocation().search);
};

const ProductCategoriesMaster =(props)=>{
    const { } =props
    const [categories, setCategories] = useState([])
    const [categorySelected, setCategorySelected] = useState()    
    const user_lang = commonFunc.getCookies('user_lang') || 'vi';    
    const [reloadPage, setReloadPage] = useState(_reload_page) // true : good for SEO
    const [isMobile, setIsMobile] = useState(false);
    const [loading, setLoading] = useState(false)
    const [userInfo, setUserInfo] = useState()
    const configDefault = { token: _token_encode, lang: user_lang, branch_no:(userInfo?.branch_no |0) };  
    const [config, setConfig] = useState(configDefault)
    const scriptUrls = [
        '/static/components/POS/product_categories/index.js',        
    ];
    useEffect(()=>{
         if (window?.ProductCategoriesMaster ==null && _extension=='js'){
            loadScripts(scriptUrls)
            .then(() => {
                console.log("All scripts loaded successfully.");
        
            })
            .catch(err => {
                console.error(err); // Xử lý lỗi nếu có
            });
        }        
       
        const categoriesDefault = JSON.parse(document.getElementById('categories-data').textContent);
        setCategories(categoriesDefault);
        const handleResize = () => {
            setIsMobile(window.innerWidth < 1280);
        };

        window.addEventListener('resize', handleResize);
        handleResize(); // Gọi ngay một lần để thiết lập trạng thái ban đầu
        fetchUserInfo()    
        return () => {
            window.removeEventListener('resize', handleResize);
        };
          
    },[])

    
    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)                
            }    
        //console.log(dataInit )
        } catch (e) {            
            setUserInfo(null)
            console.log("ERROR get-user-info" )
        }finally{
            setLoading(false)
        }
    };
    
    const containerStyle = {
        display: 'flex',
        flexDirection: 'column',
        width: '100%',
    };  

    const productCategoryStyle = {
        flex: isMobile ? '0 0 100%' : '0 0 60%', // 100% width on mobile, 60% on larger screens
        padding: '0px 0px 0px 0px',
    };
    
    return (    
        <div style={containerStyle}>
            <LoadingComponent loading={loading} message="Wait" />
            <div style={productCategoryStyle}>
            <ErrorBoundary>
                <CategoryTreeComponent categories={categories} categorySelected={categorySelected} setCategorySelected={setCategorySelected} />
            </ErrorBoundary>
            </div>
        </div>
    );
}

const CategoryTreeComponent = (props) => {
    const { categories } = props;
    const { ListGroup, Tabs, Tab } = ReactBootstrap;
    
    // Lấy type từ URL (ví dụ: ?type=product_tag) để xác định Tab đang active
    const urlParams = new URLSearchParams(window.location.search);
    const activeType = urlParams.get('type') || 'product_cat';

    const rootCategories = useMemo(() => {
        if (!categories) return [];
        const allIds = new Set(categories.map(cat => cat.id?.toString()));
        const roots = categories.filter(cat => !allIds.has(cat.parent_id?.toString()));

        return [...roots].sort((a, b) => 
            (a.name || "").localeCompare((b.name || ""), 'vi', { 
                sensitivity: 'base',
                numeric: true 
            })
        );
    }, [categories]);

    const isOnlyOneRoot = rootCategories?.length === 1;

    // Hàm xử lý chuyển Tab và Redirect
    const handleTabSelect = (key) => {
        // Redirect sang URL mới với query type tương ứng
        window.location.href = `/categories?type=${key}`;
    };

    if (!categories || categories.length === 0) {
        return (
            <div className="category-tree-wrapper">
                {/* Vẫn hiện Tabs ngay cả khi không có data để người dùng chuyển đổi lại */}
                <Tabs activeKey={activeType} onSelect={handleTabSelect} className="mb-3 custom-category-tabs" fill>
                    <Tab eventKey="product_cat" title="Category" />
                    <Tab eventKey="product_tag" title="Tags" />
                </Tabs>
                <div className="p-3 text-center text-muted">Không tìm thấy dữ liệu.</div>
            </div>
        );
    }

    return (
        <div className="category-tree-mobile" style={{ maxWidth: '100%', overflowX: 'hidden' }}>
            {/* Hệ thống Tabs bao quanh ListGroup */}
            <Tabs 
                activeKey={activeType} 
                onSelect={handleTabSelect} 
                className="mb-0 custom-category-tabs"
                fill // Trải đều các tab trên mobile
            >
                <Tab eventKey="product_cat" title={<span><i className="fa fa-folder-open me-2"></i>Category</span>}>
                    <div className="tab-content-container border-top mt-2">
                        <ListGroup variant="flush">
                            {rootCategories.map((cat) => (
                                <CategoryNode 
                                    key={cat.id} 
                                    category={cat} 
                                    allCategories={categories}
                                    level={0}
                                    isOnlyRoot={isOnlyOneRoot}
                                />
                            ))}
                        </ListGroup>
                    </div>
                </Tab>
                
                <Tab eventKey="product_tag" title={<span><i className="fa fa-tags me-2"></i>Tags</span>}>
                    <div className="tab-content-container border-top mt-2">
                        {/* Nội dung ListGroup cho Tags sẽ hiển thị ở đây. 
                           Vì cùng dùng chung cấu trúc đệ quy, logic map sẽ tương tự như trên.
                        */}
                        <ListGroup variant="flush">
                            {rootCategories.map((cat) => (
                                <CategoryNode 
                                    key={cat.id} 
                                    category={cat} 
                                    allCategories={categories}
                                    level={0}
                                    isOnlyRoot={isOnlyOneRoot}
                                />
                            ))}
                        </ListGroup>
                    </div>
                </Tab>
            </Tabs>
        </div>
    );
};

const CategoryNode = ({ category, allCategories, level = 0, isOnlyRoot = false }) => {
    const [open, setOpen] = useState(isOnlyRoot);
    const { ListGroup, Collapse } = ReactBootstrap;

    // Lấy slug từ URL để highlight
    const urlParams = new URLSearchParams(window.location.search);
    const currentSlug = urlParams.get('slug');
    const isActive = currentSlug === category.slug;

    // Tìm và SORT các con đồng cấp theo tên
    const children = useMemo(() => {
        return allCategories
            .filter(item => item.parent_id?.toString() === category.id?.toString())
            .sort((a, b) => 
                (a.name || "").localeCompare((b.name || ""), 'vi', { 
                    sensitivity: 'base',
                    numeric: true 
                })
            );
    }, [category.id, allCategories]);

    const hasChildren = children.length > 0;
    const paddingLeft = level * 20;

    // Tự động mở cấp cha nếu có con đang active (Tùy chọn)
    useEffect(() => {
        const hasActiveChild = children.some(child => child.slug === currentSlug);
        if (hasActiveChild) setOpen(true);
    }, [currentSlug, children]);

    return (
        <ListGroup.Item className="border-0 p-0">
            <div
                className={`d-flex align-items-center py-2 pe-2 transition-all ${
                    hasChildren ? 'border-bottom' : 'rounded-2 mb-1 border'
                } ${isActive ? 'bg-primary-subtle border-primary' : ''}`}
                style={{
                    cursor: 'pointer',
                    minHeight: '48px',
                    paddingLeft: `${paddingLeft + 10}px`,
                    backgroundColor: isActive ? '#e7f1ff' : (hasChildren ? 'transparent' : '#f8f9fa'),
                    transition: 'all 0.2s ease'
                }}
                onClick={() => hasChildren && setOpen(!open)}
            >
                <div className="me-2 text-center" style={{ width: '20px' }}>
                    {hasChildren ? (
                        <i className={`fa ${open ? 'fa-chevron-down' : 'fa-chevron-right'} ${isActive ? 'text-primary' : 'text-muted'}`} 
                           style={{ fontSize: '0.8rem' }}></i>
                    ) : (
                        <i className={`fa fa-circle ${isActive ? 'text-primary' : 'text-secondary'}`} 
                           style={{ fontSize: '0.4rem' }}></i>
                    )}
                </div>

                <div className="flex-grow-1 overflow-hidden">
                    {hasChildren ? (
                        <span className={`fw-bold ${isActive ? 'text-primary' : 'text-dark'}`} style={{ fontSize: '0.95rem' }}>
                            {category.name}
                        </span>
                    ) : (
                        <a
                            href={`/?slug=${category.slug}`}
                            className={`text-decoration-none d-block w-100 text-truncate fw-medium ${isActive ? 'text-primary fw-bold' : 'text-dark'}`}
                            style={{ fontSize: '0.9rem' }}
                        >
                            {category.name}
                        </a>
                    )}
                </div>
                
                {isActive && <i className="fa fa-check text-primary ms-2" style={{ fontSize: '0.7rem' }}></i>}
            </div>

            {hasChildren && (
                <Collapse in={open}>
                    <div>
                        <ListGroup variant="flush">
                            {children.map((child) => (
                                <CategoryNode
                                    key={child.id}
                                    category={child}
                                    allCategories={allCategories}
                                    level={level + 1}
                                />
                            ))}
                        </ListGroup>
                    </div>
                </Collapse>
            )}
        </ListGroup.Item>
    );
};