
const rootPopupMasterElement = document.getElementById("root_popup_master");

const rootMaster = ReactDOM.createRoot(rootPopupMasterElement); 

//alert(_token_encode);
const PopupMasterComponent=()=>{

    return(
        
        <BrowserRouter>
            <PopupMaster/>
        </BrowserRouter> 
    )  
}

rootMaster.render(<PopupMasterComponent  />, rootPopupMasterElement);

const PopupMaster=()=>{
    const [show, setShow] = useState(false)
    const [actionForm, setActionForm] = useState()
    window.addEventListener('message', (event) => {
        const targetOrigin = event.origin;
        
        if (window.location.origin.startsWith(targetOrigin)) {     
          //setUserInfo(event.data)
          let data_received =event.data    
            if(data_received.action=="campaign"){
                setActionForm(data_received.action)
                setShow(true)
            }           
          }
      });  
    if (actionForm==null){
       
        return(
            <>
                <MasterInfo/>
            </>
        )
    }else
        return(
            <>      
                {
                    actionForm=='campaign' &&
                    <PopupForm 
                        size='xl'
                        fullscreen={true}
                        title="Campaigns"                        
                        childComponent={CRMCampaign} show = {show}                 
                        setShowForm={setShow} setShow={setShow} 
                    />
                }
            </>
        )
}

const MasterInfo=()=>{
    const {ButtonGroup,Dropdown,Badge  ,DropdownButton, Alert  } = ReactBootstrap
    let config = null
    const user_lang = commonFunc.getCookies('user_lang') || 'vi'
    try {
        config = { token: _token_encode }
    }catch (e) {
        config = { token: '' }
    }    
    
    const [userInfo, setUserInfo] = useState()
    const [loading, setLoading] = useState(false)
    const [showPopUpChangePassword, setShowPopUpChangePassword] = useState(false)
    const [showPopUpUserInfo, setShowPopUpUserInfo] = useState(false)
    const [viewCount, setViewCount] = useState(0)
    const dropdownStyle = {
        backgroundColor: 'transparent',
        border: 'none',
        color:'red',
    };
   
    const [actionMessages, setActionMessage] = useState([])

    const fetchUserInfo = async () => {        
        setLoading(true);
        try {
            const url = '/api/get-user-by-token';
            const data = {                
                token:config?.token
             }; // Thêm số trang và kích thước trang vào dữ liệu     
             
            const resultObj = await commonApi.APIPOSTByURL(url, data, config);
            setLoading(false);
            if (resultObj.status === 200) {        
                setUserInfo(resultObj.data);
                
                var logo=resultObj?.data?.user_company?.logo
                // Cập nhật icon logo bằng logo (base64)
                const link = document.querySelector("link[rel*='icon']");
                if (link && logo) {
                    link.href = `${logo}`; // Thay đổi kiểu nếu cần
                }
                // Cập nhật title công ty
                const companyName = resultObj.data.user_company.name;
                
                const titleLink = document.getElementById("title_company");
                if (titleLink && companyName && titleLink.textContent=='') {
                    titleLink.textContent = companyName; // Cập nhật nội dung của thẻ title
                }
                const titleCompany = document.getElementById("_short_name_company");
                if (titleCompany && companyName) {
                    titleCompany.textContent = companyName; // Cập nhật nội dung của thẻ title
                }
                const logoCompany = document.getElementById("_logo_company");
                if (logoCompany && logo) {
                    logoCompany.src = `${logo}`; // Thay đổi kiểu nếu cần
                }
                const copyRight = document.getElementById("_copy_right");
                if (copyRight) {
                    const legalName = resultObj.data.user_company.legal_name;
                    if(legalName)
                        copyRight.textContent = legalName; 
                }
                
            } else {
                console.log("Unexpected response status:", resultObj.status);
            }
        } catch (e) {
            setLoading(false);
            console.log("ERROR get-user-by-token", e);
        }
    };  
    const fetchMessages = async () => {       
        if (config?.token=='')
            return;
        setLoading(true);
        try {
            const url = '/api/get-messages';
            const data = {                
                token:config?.token
             }; // Thêm số trang và kích thước trang vào dữ liệu     
             
            const resultObj = await commonApi.APIPOSTByURL(url, data, config);
            setLoading(false);
            if (resultObj.status === 200) {        
                setActionMessage(resultObj.data);
              
            } else {
                console.log("Unexpected response status:", resultObj.status);
            }
        } catch (e) {
            setLoading(false);
            console.log("ERROR get-message", e);
        }
    };  

    const updateMessages = async (id, path) => {        
        setLoading(true);
        try {
            const url = '/api/update-message';
            const data = {                
                message_id:id
             }; // Thêm số trang và kích thước trang vào dữ liệu     
             
            const resultObj = await commonApi.APIPUTByURL(url, data, config);
            setLoading(false);
            if (resultObj.status === 201) {                
                console.log("Unexpected response status:", resultObj.status);
                window.location.href = `${path}/&goto_message=${id}`;
            } else {
                console.log("Unexpected response status:", resultObj.status);
            }
        } catch (e) {
            setLoading(false);
            console.log("ERROR update-message", e);
        }
    };  
    
    useEffect(()=>{
        fetchUserInfo()
                   
         // Set up an interval to fetch messages every 30 seconds
        const intervalId = setInterval(() => {
            fetchMessages();
        }, 50000); // 30 seconds in milliseconds
      
        // Cleanup function to clear the interval on component unmount
        return () => clearInterval(intervalId);
    },[])

    useEffect(()=>{
        if (!userInfo || actionMessages.length==0)
            return;
        const count = actionMessages.reduce((acc, curr) => {
                const hasSuperAdmin = curr.users_viewed.some(u => u.username === userInfo?.username);
                return hasSuperAdmin ? acc : acc + 1;
            }, 0);
        setViewCount(count)
        if (userInfo?.internal_user==true){
            let elm  = document.getElementById('menuButton')
            if (elm){
                //elm.style.display = '';
            }
        }
    },[userInfo, actionMessages])
    
    const showFormChangePassword=()=>{
        setShowPopUpChangePassword(true)
    }
    const showFormUserInfo=()=>{
        setShowPopUpUserInfo(true)
    }

    if (config?.token==''){
        return(
            <>
            </>
        )
    }

    const gotoMessage=(path, id)=>{
        
        if (path && id) {
            updateMessages(id, path);
        } else {
            console.error("Path or ID is missing");
        }
        
    }

    const handleChangeLanguage=(lang)=>{
        document.cookie = `user_lang=${lang}; path=/`;        
        window.location.reload(); // Tải lại trang để áp dụng ngôn ngữ mới
    }
    const handleManageOrder=()=>{
        
        const isCashier = userInfo?.internal_user || false
        
        if (isCashier){
            window.location.href = '/mdc/transactions?type=internal';
        }else{
            window.location.href = '/mdc/transactions?type=external';
        }            
    }
    
    return (
        <>
            {/* Scoped styles for base navbar components */}
            <style>{`
                .base-navbar-dropdown .dropdown-toggle {
                    border-radius: 20px !important;
                    font-size: 13px !important;
                    font-weight: 600 !important;
                    background: #ffffff !important;
                    border: 1px solid #e2e8f0 !important;
                    padding: 6px 14px !important;
                    transition: all 0.2s ease-in-out !important;
                    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
                }
                .base-navbar-dropdown .dropdown-toggle::after {
                    margin-left: 8px !important;
                    vertical-align: 0.2em5 !important;
                    color: #64748b !important;
                }
                .base-navbar-dropdown .dropdown-toggle:hover {
                    border-color: #cbd5e1 !important;
                    background: #f8fafc !important;
                    transform: translateY(-1px);
                }
                .base-dropdown-menu {
                    border: 1px solid rgba(124, 58, 237, 0.08) !important;
                    box-shadow: 0 10px 25px -5px rgba(124, 58, 237, 0.1), 0 8px 10px -6px rgba(124, 58, 237, 0.1) !important;
                    border-radius: 12px !important;
                    padding: 6px !important;
                    margin-top: 8px !important;
                    animation: baseFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
                }
                .base-dropdown-item {
                    border-radius: 8px !important;
                    padding: 8px 12px !important;
                    font-size: 13px !important;
                    font-weight: 500 !important;
                    color: #475569 !important;
                    transition: all 0.15s ease-in-out !important;
                    border: none !important;
                    background: transparent;
                    width: 100%;
                    text-align: left;
                    display: flex;
                    align-items: center;
                }
                .base-dropdown-item:hover {
                    background-color: #f3e8ff !important;
                    color: #7c3aed !important;
                }
                .base-dropdown-item:hover i {
                    color: #7c3aed !important;
                }
                .base-dropdown-divider {
                    border-top: 1px dashed #e2e8f0 !important;
                    margin: 6px 4px !important;
                }
                .base-bell-toggle {
                    width: 36px;
                    height: 36px;
                    border-radius: 50% !important;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    background: #ffffff !important;
                    border: 1px solid #e2e8f0 !important;
                    transition: all 0.2s ease-in-out !important;
                    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
                }
                .base-bell-toggle:hover {
                    background: #f8fafc !important;
                    transform: translateY(-1px);
                    border-color: #cbd5e1 !important;
                }
                @keyframes baseFadeIn {
                    from { opacity: 0; transform: translateY(4px); }
                    to { opacity: 1; transform: translateY(0); }
                }
                
                /* Change Password Form Control styles */
                .base-form-group {
                    margin-bottom: 16px !important;
                }
                .base-form-label {
                    font-weight: 600 !important;
                    color: #475569 !important;
                    font-size: 13px !important;
                    margin-bottom: 6px !important;
                }
                .base-form-control {
                    border-radius: 8px !important;
                    border: 1px solid #cbd5e1 !important;
                    padding: 8.5px 12px !important;
                    font-size: 13px !important;
                    transition: all 0.2s ease-in-out !important;
                }
                .base-form-control:focus {
                    border-color: #7c3aed !important;
                    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15) !important;
                    outline: none;
                }
                .btn-purple {
                    background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%) !important;
                    color: white !important;
                    border: none !important;
                    box-shadow: 0 4px 6px -1px rgba(124, 58, 237, 0.2), 0 2px 4px -1px rgba(124, 58, 237, 0.2) !important;
                    font-weight: 600 !important;
                    border-radius: 8px !important;
                    padding: 8px 16px !important;
                    transition: all 0.2s !important;
                }
                .btn-purple:hover {
                    opacity: 0.95 !important;
                    transform: translateY(-1px) !important;
                    box-shadow: 0 10px 15px -3px rgba(124, 58, 237, 0.3), 0 4px 6px -4px rgba(124, 58, 237, 0.3) !important;
                }
            `}</style>

            {actionMessages?.length > 0 && (
                <Dropdown as={ButtonGroup} className="mx-2" style={{ float: 'right' }}>
                    <Dropdown.Toggle variant="link" className="p-0 base-bell-toggle position-relative text-decoration-none border-0 shadow-none">
                        <i className="fa fa-bell-o text-secondary" style={{ fontSize: 16 }}></i>
                        {viewCount > 0 && (
                            <Badge pill bg="danger" className="position-absolute border border-white"
                                   style={{ top: '0px', right: '0px', fontSize: '9px', padding: '3px 5px', transform: 'translate(20%, -20%)' }}>
                                {viewCount}
                            </Badge>
                        )}
                    </Dropdown.Toggle>
                    <Dropdown.Menu className="base-dropdown-menu border-0 p-2 mt-2" style={{ width: '280px', right: 0, left: 'auto' }}>
                        <div className="px-2.5 py-1.5 mb-2 border-bottom border-light fw-bold text-slate-800 small d-flex align-items-center gap-1.5">
                            <i className="fa fa-bell text-purple"></i>
                            {user_lang === 'en' ? 'NOTIFICATIONS' : 'THÔNG BÁO'}
                        </div>
                        <div style={{ maxHeight: '240px', overflowY: 'auto' }}>
                            {actionMessages.map((alert, index) => (
                                <Dropdown.Item key={index} onClick={() => gotoMessage(alert?.path, alert?.id)} className="p-0 mb-1 border-0 bg-transparent">
                                    <Alert variant={alert?.type} className="m-0 py-1.5 px-2.5" style={{ fontSize: '12px', borderRadius: '8px', border: 'none' }}> 
                                        {alert.message}
                                    </Alert>
                                </Dropdown.Item>
                            ))}
                        </div>
                    </Dropdown.Menu>
                </Dropdown>
            )}

            {/* User Account Dropdown */}
            <Dropdown as={ButtonGroup} className="me-2 base-navbar-dropdown" style={{ float: 'right' }}>
                <Dropdown.Toggle 
                    variant="white" 
                    id="dropdown-user" 
                    size="sm"
                    className="d-flex align-items-center border-0 shadow-none"
                >
                    {userInfo ? (
                        userInfo.avatar ? (
                            <img 
                                src={userInfo.avatar} 
                                alt="user-avatar" 
                                style={{ 
                                    width: '24px', 
                                    height: '24px', 
                                    borderRadius: '50%', 
                                    objectFit: 'cover', 
                                    marginRight: '8px',
                                    border: '1px solid #e2e8f0'
                                }} 
                            />
                        ) : (
                            <i className="fa fa-user-circle-o me-2 text-purple" style={{ fontSize: '18px' }}></i>
                        )
                    ) : (
                        <i className="fa fa-user-secret me-2 text-muted" style={{ fontSize: '18px' }}></i>
                    )}
                    
                    {window.innerWidth > 768 && (
                        <span className="text-slate-800" style={{ fontSize: '13px' }}>
                            {userInfo?.name || (user_lang === 'en' ? 'Guest' : 'Khách')}
                        </span>
                    )}
                </Dropdown.Toggle>

                <Dropdown.Menu className="base-dropdown-menu border-0 mt-2 py-2" style={{ minWidth: '220px', right: 0, left: 'auto' }}>
                    {(userInfo != null && userInfo?.username !== 'guest') ? (
                        <>
                            <Dropdown.Item onClick={showFormUserInfo} className="base-dropdown-item">
                                <i className="fa fa-pencil-square-o me-2.5 text-slate-800" style={{ width: '16px' }}></i> 
                                {user_lang === 'en' ? "Edit Profile" : "Sửa thông tin"}
                            </Dropdown.Item>
                            <Dropdown.Item onClick={showFormChangePassword} className="base-dropdown-item">
                                <i className="fa fa-shield me-2.5 text-slate-800" style={{ width: '16px' }}></i> 
                                {user_lang === 'en' ? "Change Password" : "Đổi mật khẩu"}
                            </Dropdown.Item>
                            
                            <div className="base-dropdown-divider" />
                            
                            <Dropdown.Item onClick={() => handleChangeLanguage(user_lang === 'vi' ? 'en' : 'vi')} className="base-dropdown-item">
                                <div className="d-flex align-items-center w-100">
                                    <i className="fa fa-globe me-2.5 text-slate-800" style={{ width: '16px' }}></i>
                                    <span className="flex-grow-1">
                                        {user_lang === 'en' ? "Language: English" : "Ngôn ngữ: Tiếng Việt"}
                                    </span>
                                    <img 
                                        style={{ height: 12, width: 18, objectFit: 'cover', borderRadius: '2px', marginLeft: '8px' }} 
                                        src={user_lang === 'vi' ? "/static/libs/images/flag-vn.svg" : "/static/libs/images/flag-uk.svg"} 
                                        alt="flag" 
                                    />
                                </div>
                            </Dropdown.Item>

                            <Dropdown.Item onClick={handleManageOrder} className="base-dropdown-item">
                                <i className="fa fa-list-alt me-2.5 text-slate-800" style={{ width: '16px' }}></i> 
                                {user_lang === 'en' ? "Orders" : "Đơn hàng"}
                            </Dropdown.Item>
                            
                            <div className="base-dropdown-divider" />
                            
                            <Dropdown.Item 
                                href={`/logout?next=${window.location.pathname}${window.location.search}`}
                                className="base-dropdown-item text-danger"
                            >
                                <i className="fa fa-sign-out me-2.5 text-danger" style={{ width: '16px' }}></i> 
                                {user_lang === 'en' ? "Logout" : "Đăng xuất"}
                            </Dropdown.Item>
                        </>
                    ) : (
                        <>
                            <Dropdown.Item onClick={() => handleChangeLanguage(user_lang === 'vi' ? 'en' : 'vi')} className="base-dropdown-item">
                                <i className="fa fa-globe me-2.5 text-slate-800" style={{ width: '16px' }}></i>
                                <span className="flex-grow-1">
                                    {user_lang === 'en' ? "Switch to Vietnamese" : "Chuyển sang Tiếng Anh"}
                                </span>
                            </Dropdown.Item>
                            <div className="base-dropdown-divider" />
                            <Dropdown.Item 
                                href={`/login?next=${window.location.pathname}${window.location.search}`}
                                className="base-dropdown-item fw-bold text-purple"
                            >
                                <i className="fa fa-sign-in me-2.5 text-purple" style={{ width: '16px' }}></i> 
                                {user_lang === 'en' ? "Login" : "Đăng nhập"}
                            </Dropdown.Item>
                        </>
                    )}
                </Dropdown.Menu>
            </Dropdown>

            {/* Shopping Basket (Hidden by default) */}
            <div id="div_shopping_basket" className="d-none d-inline-flex position-relative align-items-center mx-2 p-1 cursor-pointer hover-opacity" style={{ display:'none', float:'right' }}>
                <i id="icon_shopping_basket" className="fa fa-shopping-basket" style={{ fontSize: 20, color: '#666' }}></i>
                <Badge id="badge_shopping_basket" pill bg="danger" className="position-absolute border border-white"
                       style={{ top: '-5px', right: '-10px', fontSize: '9px', padding: '3px 6px' }}>0</Badge>
            </div>

            {/* Popups */}
            <PopUpChangeUserPassword show={showPopUpChangePassword} setShow={setShowPopUpChangePassword} />   
            <PopUpChangeUserInfo show={showPopUpUserInfo} setShow={setShowPopUpUserInfo} userInfo={userInfo}/>  
        </>
    );
}
const PopUpChangeUserPassword=(props)=>{
    const {show, setShow} = props
    const user_lang = commonFunc.getCookies('user_lang') || 'vi'
    return(
        <>
            <PopupForm 
                title= {user_lang=='en'?"Change password":"Đổi Mật Khẩu" }                       
                childComponent={ChangeUserPassword} show = {show}                 
                setShowForm={setShow} setShow={setShow} 
            />
        </>
    )    
}

const ChangeUserPassword=(props)=>{
    const  { Form, Alert } = ReactBootstrap
    const [currentPassword, setCurrentPassword] = useState('');
    const [newPassword, setNewPassword] = useState('');
    const [confirmPassword, setConfirmPassword] = useState('');
    const [error, setError] = useState('');
    const [success, setSuccess] = useState('');
    const config = { token: _token_encode }
    const [loading, setLoading] = useState(false)
    const user_lang = commonFunc.getCookies('user_lang') || 'vi'
    const handleSubmit = (e) => {
        e.preventDefault();
        setError('');
        setSuccess('');

        if (newPassword !== confirmPassword) {
            setError('Mật khẩu mới và xác nhận mật khẩu không khớp.');
            return;
        }
        handleChangePassword()
        // Xử lý đổi mật khẩu ở đây (gọi API, v.v.)        
    };

    const handleChangePassword=async()=>{
        try {

            setLoading(true);           
            const data = {           
                "current_password": currentPassword,
                "new_password":newPassword,                   
            }
            
            const changePasswordAPI = await commonApi.APIPUTByURL('/api/change-password', data, config);
     
            if (changePasswordAPI) {
                if (changePasswordAPI?.status==201) {     
                    const data =    changePasswordAPI.data    
                    if (data.status=='success')   {
                        setSuccess(data.message);
                    }else{
                        setError(data.message);
                    }
                } else {
                    setError('Không có phản hồi từ server.')
                }
            }else{
                setError('Không có phản hồi từ server.');
            }
        } catch (e) {
            console.error("Error: " + e.message);
            setError(e.message || 'Đã xảy ra lỗi không xác định.');
        } finally {
            setLoading(false);
        }
    }

    return (
        <Form onSubmit={handleSubmit} className="p-1">
            {error && <Alert variant="danger" className="py-2 px-3 border-0 small" style={{ borderRadius: '8px' }}>{error}</Alert>}
            {success && <Alert variant="success" className="py-2 px-3 border-0 small" style={{ borderRadius: '8px' }}>{success}</Alert>}
            <Form.Group className="base-form-group" controlId="formCurrentPassword">
                <Form.Label className="base-form-label">{user_lang=='en'?"Current Password":"Mật khẩu hiện tại" }</Form.Label>
                <Form.Control
                    type="password"
                    placeholder={user_lang=='en'?"Input current password":"Nhập mật khẩu hiện tại"}
                    value={currentPassword}
                    onChange={(e) => setCurrentPassword(e.target.value)}
                    className="base-form-control"
                    required
                />
            </Form.Group>
            <Form.Group className="base-form-group" controlId="formNewPassword">
                <Form.Label className="base-form-label">{user_lang=='en'?"New Password":"Mật khẩu mới" }</Form.Label>
                <Form.Control
                    type="password"
                    placeholder={user_lang=='en'?"Input new password":"Nhập mật khẩu mới"}
                    value={newPassword}
                    onChange={(e) => setNewPassword(e.target.value)}
                    className="base-form-control"
                    required
                />
            </Form.Group>
            <Form.Group className="base-form-group" controlId="formConfirmPassword">
                <Form.Label className="base-form-label">{user_lang=='en'?"Confirm New Password":"Nhập lại mật khẩu mới" }</Form.Label>
                <Form.Control
                    type="password"
                    placeholder={user_lang=='en'?"Confirm new password":"Nhập lại mật khẩu mới"}
                    value={confirmPassword}
                    onChange={(e) => setConfirmPassword(e.target.value)}
                    className="base-form-control"
                    required
                />
            </Form.Group>
         
            <div className="d-flex justify-content-end mt-4">
                <button
                    type="submit"
                    className="btn btn-purple d-flex align-items-center gap-1.5"
                >
                    <i className="fa fa-floppy-o"></i>
                    {user_lang=='en'?"Update":"Cập nhật" }
                </button>
            </div>
        </Form>
    );
};

const PopUpChangeUserInfo= (props)=>{
   
    const {show, setShow, userInfo} = props    
    const company=userInfo?.company_id
    const user_lang = commonFunc.getCookies('user_lang') || 'vi'
    // AuthUserForm load from /static/components/admin/permission/user.jsx
    const [components, setComponents] = useState(null);
    useEffect(() => {
        // Chỉ nạp khi Popup được mở
        if (show && !components) {
            
            async function startApp() {
                const fcomponents = await LoadMultipleComponents([
                    `/static/components/admin/permission/user.${_extension}?v=${typeof _version !== 'undefined' ? _version + '_v3' : Date.now()}`
                ]);
                // Vì file trả về { CMSUsers, AuthUserForm }
                // Hàm loader của bạn sẽ trả về { user: { CMSUsers, AuthUserForm } }
                if (fcomponents) {
                    setComponents(fcomponents);
                }
            }
            startApp();
        }
    }, [show]); // Chạy lại khi trạng thái show thay đổi
    if (components?.user?.AuthUserForm==null){
        return(<></>)
    }
    return(
        <>            
            <PopupForm 
                title= {user_lang=='en'?"User Form":"User Form" }
                show={show}              
                setShow={setShow} 
                childComponent={components?.user?.AuthUserForm}
                node={userInfo} setShowUserForm={setShow} company_id={company}
            />
        </>
    )    
}


class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { 
      hasError: false,
      error: null,         // Thêm state để lưu đối tượng lỗi
      errorInfo: null      // Thêm state để lưu thông tin lỗi
    };
  }

  // 1. Phương thức này được gọi khi lỗi xảy ra
  static getDerivedStateFromError(error) {
    // Cập nhật state để lần render tiếp theo sẽ hiển thị fallback UI.
    // LƯU Ý: Không thể truy cập 'error' ở đây, chỉ có thể trả về 'hasError: true'.
    return { hasError: true };
  }

  // 2. Phương thức này được gọi sau khi lỗi xảy ra
  componentDidCatch(error, errorInfo) {
    // Ghi lại thông tin lỗi vào console
    console.error("ErrorBoundary caught an error:", error, errorInfo);
    
    // Cập nhật state để lưu chi tiết lỗi và errorInfo
    this.setState({
      error: error,
      errorInfo: errorInfo
    });
    
    // Ví dụ: logErrorToMyService(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // Khi có lỗi, hiển thị chi tiết lỗi và stack trace
      return (
        <div style={{ padding: '20px', border: '1px solid red', backgroundColor: '#fff0f0' }}>
          
          <h3 style={{ color: 'red' }}>⚠️ Đã xảy ra lỗi không mong muốn!</h3>
          <p>Xin lỗi, component này đã gặp sự cố. Chi tiết kỹ thuật:</p>
          
          {/* Hiển thị thông báo lỗi chính */}
          <details style={{ whiteSpace: 'pre-wrap', marginBottom: '15px' }}>
            <summary>
              <strong>{this.state.error && this.state.error.toString()}</strong>
            </summary>
            
            {/* Hiển thị stack trace của component bị lỗi */}
            {this.state.errorInfo && (
              <pre style={{ 
                padding: '10px', 
                backgroundColor: '#f8f8f8', 
                borderRadius: '4px',
                marginTop: '10px',
                fontSize: '0.8em'
              }}>
                {this.state.errorInfo.componentStack}
              </pre>
            )}
          </details>
          
          <p>
            Vui lòng liên hệ bộ phận hỗ trợ nếu vấn đề này vẫn tiếp diễn.
          </p>

        </div>
      );
    }

    // Nếu không có lỗi, hiển thị các component con bình thường
    return this.props.children;
  }
}
