// import React, { useState, useEffect } from "react";
// import {
//   Button, Dropdown, Modal, Form, Row, Col, InputGroup,
//   FormControl,
// } from "react-bootstrap";
// import {
//   Table, Pagination,
//   PaginationItem,
//   PaginationLink, Input, Label
// } from 'reactstrap';
// import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
// import {
//   faEdit, faTrashAlt, faPlus, faBars,
//   faTimes
// } from "@fortawesome/free-solid-svg-icons";
// import "bootstrap/dist/css/bootstrap.min.css";
// import "../Dashboard/CSS/CSS/CommonStyle.css";
// import { FaSearch, FaTimes } from "react-icons/fa";
// import { BsJournals } from "react-icons/bs";
// import Spinner from '../../UIComponants/Spinner';
// import { getByUsrGrpId } from "APIServices/MenuAccessControlAPI";
// import { toast } from "react-toastify";
// import {getToken } from "../../utils/tokenService"
// import { faSync } from "@fortawesome/free-solid-svg-icons";

// function MenuAccessControl({ selected, Sync }) {
//   const [loading, setLoading] = useState(true);
//   const [menuItems, setMenuItems] = useState([]);
//   const [menus, setMenus] = useState([]);
//   const [showAddEditModal, setShowAddEditModal] = useState(false);
//   const [selectedMenuId, setSelectedMenuId] = useState(null);
//   const [usrgrp, setUsrgrp] = useState(1);
//   const [allData, setAllData] = useState([]);


//   const [currentMenuItem, setCurrentMenuItem] = useState({
//     menuId: "",
//     menuItemName: "",
//     accessLevel: "",
//     isActive: false,
//     view: false,   // For View checkbox
//     create: false, // For Create checkbox
//     edit: false,   // For Edit checkbox
//     delete: false, // For Delete checkbox
//     query: false,  // For Query checkbox
//     export: false, // For Export checkbox
//   });
//   const [alldata, setAlldata] = useState([]);
//   // const [slicedMenus, setSlicedMenus] = useState([]);
//   const [toggle, setToggle] = useState(false);
//   const [allMenus, setAllMenus] = useState([]);
  
//   const [currentPage, setCurrentPage] = useState(1);
//   const [isEditing, setIsEditing] = useState(false);
//   const [recordsPerPage, setRecordsPerPage] = useState(10);
//   const [searchQuery, setSearchQuery] = useState("");
//   let [slicedMenus, setSlicedMenus] = useState([
//     {
//       menuId: 1,
//       view: false,
//       create: false,
//       edit: false,
//       delete: false,
//       query: false,
//       export: false,
//       isActive: true,
//     },
//     {
//       menuId: 2,
//       view: false,
//       create: false,
//       edit: false,
//       delete: false,
//       query: false,
//       export: false,
//       isActive: false,
//     },
//   ]);
//   const [visibleColumns, setVisibleColumns] = useState({
//     No: true,
//     menuId: true,
//     menuItemName: true,
//     view: true,
//     create: true,
//     edit: true,
//     delete: true,
//     query: true,
//     export: true,
//     isActive: true,
//     actions: true
//   });

//   const [newItemData, setNewItemData] = useState({

//     menuId: "",
//     menuItemName: "",
//     view: "",
//     create: "",
//     edit: "",
//     delete: "",
//     query: "",
//     export: "",
//     isActive: true,
//   });

//   useEffect(() => {
//     // Simulate loading data
//     setTimeout(() => {
//       setLoading(false);
//     }, 3000); // Simulated 3 seconds loading
//   }, []);

// useEffect(() => {
//   const defaultGroup = 1; // or whatever default ID you want
//   setUsrgrp(defaultGroup); // ✅ sets correctly
// }, []);


// useEffect(() => {
//   const filtered = toggle
//     ? allMenus.filter(item => Number(item.menuId) !== 0)
//     : allMenus;

//   setSlicedMenus(filtered);
// }, [toggle, allMenus]);

//   useEffect(() => {
//     const apiUrl = `${process.env.REACT_APP_API_URL}api/getAllUsrGrp`;
//     // const token = localStorage.getItem("CurrentUser");
//     const token = getToken()
//     const fetchMenuItems = async () => {
//       try {
//         const response = await fetch(apiUrl, {
//           method: "GET",
//           headers: {
//             "Content-Type": "application/json",
//             Authorization: `Bearer ${token}`,
//           },
//         });

//         if (!response.ok) {
//           throw new Error(`HTTP error! status: ${response.status}`);
//         }

//         const data = await response.json();
//         console.log("Menu items fetched successfully:", data);
//         setMenuItems(data);
//       } catch (error) {
//         console.error("Error fetching menu items:", error);
//       }
//     };
    

//     fetchMenuItems();
//   }, []);

//   useEffect(() => {
//     fetchData();
//   }, []);
// useEffect(() => {
//   if (usrgrp) {
//     fetchData();
//   }
// }, [usrgrp]);

//   // const fetchData = async () => {
//   //   try {
//   //     const data = await getByUsrGrpId(usrgrp);
//   //     console.log("Data fetched successfully:", data);

//   //     setAlldata(data); // Update the state with fetched data
//   //     toast.success("Data fetched successfully!");
//   //   } catch (error) {
//   //     console.error('Error fetching data:', error);
//   //     toast.error("Failed to fetch data.");
//   //   }
//   // };

//   // const fetchData = async () => {
//   //   try {
//   //     console.log("Fetching data for usrgrp:", usrgrp);
//   //     const data = await getByUsrGrpId(usrgrp);
//   //     if (!data) {
//   //       console.error("Received undefined data");
//   //       toast.error("Failed to fetch data.");
//   //       return;
//   //     }
//   //     console.log("Data fetched successfully:", data);
//   //     setAlldata(data);
//   //     toast.success("Data fetched successfully!");
//   //   } catch (error) {
//   //     console.error("Error fetching data:", error);
//   //     toast.error("Failed to fetch data.");
//   //   }
//   // };

//   const fetchData = async () => {
//   try {
//     console.log("Calling getByUsrGrpId with usrgrp:", usrgrp);

//     const data = await getByUsrGrpId(usrgrp); // or your API call
//     console.log("API response:", data);

//     const transformedData = data.map(item => ({
//       menuId: item.menuItemId.menuItemId,
//       menuItemName: item.menuItemDesc || '',
//       view: item.mvisible === "true",
//       create: item.mcreate === "true",
//       edit: item.medit === "true",
//       delete: item.mdelete === "true",
//       query: item.mquery === "true",
//       export: item.mexport === "true",
//       isActive: item.status === "Enable"
//     }));

//     setAllMenus(transformedData);
//     setSlicedMenus(transformedData); // initially show all
//   } catch (error) {
//     console.error("Fetch failed:", error);
//   }
// };

//   const idselected = (value) => {
//     setSelectedMenuId(value);
//   };

//   const toggleColumn = (column) => {
//     setVisibleColumns((prev) => ({
//       ...prev,
//       [column]: !prev[column],
//     }));
//   };

//   const handleInputChange = (event, menuId) => {
//   const { name, value, checked, type } = event.target;

//   const newValue = type === "checkbox" ? checked : value;

//   setCurrentMenuItem(prev => ({
//     ...prev,
//     [name]: newValue
//   }));
// setSlicedMenus((prevMenus) => {
//   console.log("Before update:", prevMenus, "Changing menuId:", menuId, "Field:", name, "Value:", newValue);
  
//   return prevMenus.map((menu) =>
//     menu.menuId === menuId
//       ? { ...menu, [name]: newValue }
//       : menu
//   );
// });
// };
//   const handleSearch = (query) => {
//     setSearchQuery(query);
//   };

//   const handleAddItem = () => {
//     setIsEditing(false);
//     setNewItemData({
//       menuId: "",
//       menuItemName: "",
//       isActive: true,
//     });
//     setShowAddEditModal(true)
//   };

//   const handleClose = () => {
//     setShowAddEditModal(false); // Close the modal by setting the state to false
//   };


//   const handleSubmit = (event) => {
//     event.preventDefault();
//     if (isEditing) {
//       setMenuItems(menuItems.map(item =>
//         item.menuId === currentMenuItem.menuId ? currentMenuItem : item
//       ));
//     } else {
//       const newMenuId = `ID${menuItems.length + 1}`;
//       setMenuItems([...menuItems, { ...currentMenuItem, menuId: newMenuId }]);
//     }
//     setShowAddEditModal(false);
//   };
// const [loading2, setLoading2] = useState(false);

// const handleSync = async () => {
//   setLoading2(true);
//   await fetchData();
//   setLoading2(false);
// };

//   const openModal = (item = { menuId: "", menuName: "", accessLevel: "", isActive: false }) => {
//     setIsEditing(!!item.menuId);
//     setCurrentMenuItem(item);
//     setShowAddEditModal(true);
//   };

//   const handleDelete = (menuId) => {
//     setMenuItems(menuItems.filter(item => item.menuId !== menuId));
//   };

//   const handleRecordsPerPageChange = (number) => {
//     setRecordsPerPage(number);
//     setCurrentPage(1);
//   }

//   const totalPages = Math.ceil(menuItems.length / recordsPerPage);
//   const handlePageChange = (pageNumber) => {
//     setCurrentPage(pageNumber);
//   };

//   const handleSelectChange = (value) => {
//     console.log(value);
//     setUsrgrp(value);

//   };
// const handleToggleCheckbox = () => {
//   setToggle((prev) => !prev);
//   console.log("Toggled:", !toggle); // This should show up in console
// };


//   const filteredMenus = slicedMenus
//     .filter((item) =>
//       item.menuItemName && item.menuItemName.toLowerCase().includes(searchQuery.toLowerCase())
//     )
//     .slice((currentPage - 1) * recordsPerPage, currentPage * recordsPerPage);
//   return (
//     <div style={{ marginTop: "7rem" }}>
//       {loading ? (
//         <Spinner />
//       ) : (
//         <div className="container-fluid mt-5">
//           <div
//             className="d-flex justify-content-between align-items-center mb-4"
//             style={{ gap: "15px" }}
//           >
//             {/* Left Side */}
//             <div className="d-flex align-items-center" style={{ gap: "15px" }}>
//               <h1 className="title_main mb-0">Menu Access Control</h1>
//               <span
//                 className="badge bg-info text-white"
//                 style={{ fontSize: "14px", padding: "5px 10px", lineHeight: "1" }}
//               >
//                 Edit Mode
//               </span>
//             </div>

//             {/* Right Side */}
//             <div className="d-flex align-items-center" style={{ gap: "15px" }}>
//               <span>For</span>
//               <select
//                 className="form-select"
//                 style={{ width: "150px", height: "40px" }}
//                 onChange={(e) => handleSelectChange(e.target.value)}
//               >
//                 {menuItems.map((sub) => (
//                   <option
//                     key={sub.usrGrp}
//                     value={sub.usrGrp}
//                     selected={sub.usrGrp === 40}
//                   >
//                     {sub.groupName}
//                   </option>
//                 ))}
//               </select>
//               <Button
//                 variant="primary"
//                 className="ml-3"
//                 style={{ height: "40px", lineHeight: "1.2" }}
//                 onClick={() => fetchData()}
//               >
//                 Reload
//               </Button>
//               <span style={{ fontWeight: "500" }}>
//                 {toggle ? "Only Main Menu" : "Show All"}
//               </span>

//               <div className="form-check form-switch">
//               <input
//                 className="form-check-input"
//                 type="checkbox"
//                 id="toggleSwitch"
//                 checked={toggle}
//                 onChange={handleToggleCheckbox}
//               />
//               <label className="form-check-label" htmlFor="toggleSwitch">
//                 Toggle
//               </label>
//             </div>
//           </div>
//           </div>
//           <Row className="align-items-center my-3">
//             {/* Left: Search Bar */}
//             <Col
//               xs={12}
//               md={8}
//               lg={6}
//               className="d-flex justify-content-center my-3"
//             >
//               <InputGroup
//                 className="search-bar"
//                 style={{
//                   borderRadius: "10px",
//                   overflow: "hidden",
//                   boxShadow: "0px 4px 12px rgba(0, 0, 0, 0.1)",
//                   width: "100%",
//                   maxWidth: "528px", // Set max-width to limit overall width
//                   paddingRight: "-15px", // Increase padding on the right side
//                 }}
//               >
//                 <InputGroup.Text
//                   style={{
//                     backgroundColor: "#0E6591",
//                     color: "#fff",
//                     padding: "10px 15px",
//                   }}
//                 >
//                   <FaSearch />
//                 </InputGroup.Text>
//                 <FormControl
//                   placeholder="Search"
//                   value={searchQuery}
//                   onChange={(e) => handleSearch(e.target.value)}
//                   style={{
//                     padding: "10px",
//                     border: "none",
//                     paddingRight: "5px", // More space on the right side of input field
//                   }}
//                 />
//               </InputGroup>
//             </Col>

//             {/*Add Icons */}
//             <Col xs={12} md={4} lg={6} className="d-flex justify-content-end">
//               <>
//                 {/* Add Icon */}
//                 <FontAwesomeIcon
//                   icon={faPlus}
//                   onClick={() => handleAddItem(true)}
//                   style={{
//                     cursor: "pointer",
//                     fontSize: "1.5rem",
//                     color: "#747264",
//                     marginRight: "20px",
//                   }}
//                 />
//                 <FontAwesomeIcon
//                   icon={faBars}
//                   style={{
//                     cursor: "pointer",
//                     fontSize: "1.5rem",
//                     color: "#747264",
//                   }}
//                 />
//               </>
//             </Col>
//           </Row>

//           <div style={{ overflowX: "auto", width: "100%" }}>
//           <Table
//             striped
//             responsive
//             hover
//             align="middle"
//             className="table-flush shadow-sm"
//             style={{ minWidth: "1000px" }} // adjust based on number of columns
//           >
//             <thead className="custom_header">
//           <tr>
//             {Object.entries(visibleColumns).map(([key, visible], colIndex) =>
//               visible ? (
//                 <th key={key}>
//                   {colIndex === 0 && (
//                    <Button
//                     size="sm"
//                     variant="outline-primary"
//                     onClick={handleSync}
//                     className="px-2 py-0"
//                     disabled={loading2}
//                   >
//                     {loading ? (
//                       <Spinner animation="border" size="sm" />
//                     ) : (
//                       <FontAwesomeIcon icon={faSync} />
//                     )}
//                   </Button>

//                   )}
//                   {key.charAt(0).toUpperCase() + key.slice(1)}
//                 </th>
//               ) : null
//             )}
//           </tr>
//         </thead>
// <tbody className="tbody">
//       {slicedMenus.length === 0 ? (
//         <tr>
//           <td
//             colSpan={
//               Object.keys(visibleColumns).filter((key) => visibleColumns[key]).length
//             }
//             className="text-center"
//           >
//             No items found. Please add new items.
//           </td>
//         </tr>
//       ) : (
//         slicedMenus
//         .filter(item => !toggle || item.menuId > 10 ) // Filter out items with menuId <= 10 if toggle is true
//         .map((item, index) => (
//           <tr key={index}>
//             {Object.entries(visibleColumns).map(([key, visible]) =>
//               visible ? (
//                 <td key={key}>
//   {key === "actions" ? (
//     <>
//       <FontAwesomeIcon
//         icon={faEdit}
//         onClick={() => openModal(item)}
//         style={{
//           cursor: "pointer",
//           fontSize: "1rem",
//           color: "green",
//           marginRight: "15px",
//         }}
//       />
//     </>
//   ) : ["view", "create", "edit", "delete", "query", "export"].includes(key) ? (
//     <Input
//   type="checkbox"
//   name={key}
//   checked={item[key] || false}
//   onChange={(e) => handleInputChange(e, item.menuId)}
// />

//   ) : (
//     item[key]?.toString()
//   )}
// </td>
// ) : null
//             )}
//           </tr>
//         ))
//       )}
//     </tbody>
//   </Table>
// </div>

//           {/* Manage Columns & Records Per Page */}
//           <Row className="mt-4">
//             <Col md={6} className="d-flex justify-content-start">
//               <Dropdown>
//                 <Dropdown.Toggle
//                   variant="outline-primary"
//                   className="custom_manage_column_button"
//                 >
//                   Manage Columns
//                 </Dropdown.Toggle>
//                 <Dropdown.Menu>
//                   {Object.keys(visibleColumns).map((column) => (
//                     <Dropdown.Item
//                       key={column}
//                       onClick={() => toggleColumn(column)}
//                     >
//                       <Form.Check
//                         type="checkbox"
//                         label={
//                           column.charAt(0).toUpperCase() +
//                           column.slice(1).toLowerCase()
//                         }
//                         checked={visibleColumns[column]}
//                         readOnly
//                         className="custom-checkbox"
//                       />
//                     </Dropdown.Item>
//                   ))}
//                 </Dropdown.Menu>
//               </Dropdown>
//             </Col>

//             <Col md={6} className="d-flex justify-content-end">
//               <Dropdown>
//                 <Dropdown.Toggle
//                   variant="outline-primary"
//                   className="custom_manage_column_button px-4 py-2 border-2 rounded-3 shadow-sm"
//                   id="dropdown-custom-components"
//                 >
//                   <BsJournals />
//                 </Dropdown.Toggle>
//                 <Dropdown.Menu className="border-0 rounded-3 shadow-lg" align="end">
//                   {[1, 5, 10, 20, 50].map((number) => (
//                     <Dropdown.Item
//                       key={number}
//                       onClick={() => handleRecordsPerPageChange(number)}
//                       className="text-dark d-flex justify-content-between align-items-center"
//                     >
//                       <span>{number}</span>
//                       <i
//                         className="fa fa-check-circle"
//                         style={{
//                           display: recordsPerPage === number ? "inline" : "none",
//                         }}
//                       />
//                     </Dropdown.Item>
//                   ))}
//                 </Dropdown.Menu>
//               </Dropdown>
//             </Col>
//           </Row>

//           <Pagination className="pagination">
//             <PaginationItem disabled={currentPage === 1}>
//               <PaginationLink previous onClick={() => handlePageChange(currentPage - 1)} />
//             </PaginationItem>
//             {[...Array(totalPages)].map((_, index) => (
//               <PaginationItem key={index} active={index + 1 === currentPage}>
//                 <PaginationLink onClick={() => handlePageChange(index + 1)} style={{ color: '#0b6592' }}>
//                   {index + 1}
//                 </PaginationLink>
//               </PaginationItem>
//             ))}
//             <PaginationItem disabled={currentPage === totalPages}>
//               <PaginationLink next onClick={() => handlePageChange(currentPage + 1)} />
//             </PaginationItem>
//           </Pagination>

//           {/* Add/Edit Model */}

//           {/* <Modal show={showAddEditModal} onHide={() => setShowAddEditModal(false)}>
//         <Modal.Header >
//           <Modal.Title>{isEditing ? "Edit Menu Access" : "Add Menu Access"}</Modal.Title>
//           <FontAwesomeIcon
//             icon={faTimes}
//             size="lg"
//             onClick={handleClose}
//             style={{
//               position: "absolute",
//               top: "25px",
//               right: "25px",
//               cursor: "pointer",
//             }}
//           />
//         </Modal.Header>
//         <Modal.Body>
//           <Form onSubmit={handleSubmit}>
//             <Form.Group controlId="formMenuName">
//               <Form.Label>Menu Name</Form.Label>
//               <Form.Control
//                 type="text"
//                 name="menuName"
//                 value={currentMenuItem.menuName}
//                 onChange={handleInputChange}
//                 required
//                  className="custom-hover-border"
//               />
//             </Form.Group>
//             <Form.Group>
//             <Label for="name">Menu Name<span className="required-field">*</span></Label>
//             <Input type="select" style={{ width: '100%', padding: '5px', border: '1px solid #ccc', borderRadius: '4px' }} onChange={(e) => idselected(e.target.value)}>
//               {menus.map((sub) => (
//                 <option key={sub.menuItemId} value={sub.menuItemId}>{sub.menuItemDesc}</option>
//               ))}
//             </Input>
//           </Form.Group>
//             <Form.Group controlId="formActive">
//               <Form.Check
//                 type="checkbox"
//                 label="Active?"
//                 name="isActive"
//                 checked={currentMenuItem.isActive}
//                 onChange={handleInputChange}
//                  className="custom-checkbox"
//               />
//             </Form.Group>
//             <Modal.Footer>
              
//               <Button variant="primary" type="submit" className="custom_button px-4">{isEditing ? "Update" : "Add"}</Button>
//               <Button variant="secondary" onClick={handleClose} className="custom_button px-4">
//               Cancel
//             </Button>          
//             </Modal.Footer>
//           </Form>
//         </Modal.Body>
//       </Modal> */}

//           <Modal show={showAddEditModal} onHide={() => setShowAddEditModal(false)}>
//             <Modal.Header>
//               <Modal.Title>{isEditing ? "Edit Menu Access" : "Add Menu Access"}</Modal.Title>
//               <FontAwesomeIcon
//                 icon={faTimes}
//                 size="lg"
//                 onClick={handleClose}
//                 style={{
//                   position: "absolute",
//                   top: "25px",
//                   right: "25px",
//                   cursor: "pointer",
//                 }}
//               />
//             </Modal.Header>
//             <Modal.Body>
//               <Form onSubmit={handleSubmit}>
//                 {/* Menu Name Input */}
//                 <Form.Group controlId="formMenuName">
//                   <Form.Label>Menu Items Name</Form.Label>
//                   <Form.Control
//                     type="text"
//                     name="menuName"
//                     value={currentMenuItem.menuName}
//                     onChange={handleInputChange}
//                     required
//                     className="custom-hover-border"
//                   />
//                 </Form.Group>

//                 {/* Select Menu Item */}
//                 <Form.Group>
//                   <Label for="name">Menu Item<span className="required-field">*</span></Label>
//                   <Input
//                     type="select"
//                     style={{ width: '100%', padding: '5px', border: '1px solid #ccc', borderRadius: '4px' }}
//                     onChange={(e) => idselected(e.target.value)}
//                   >
//                     {menus.map((sub) => (
//                       <option key={sub.menuItemId} value={sub.menuItemId}>
//                         {sub.menuItemDesc}
//                       </option>
//                     ))}
//                   </Input>
//                 </Form.Group>

//                 {/* Active Checkbox */}
//                 <Form.Group controlId="formActive">
//                   <Form.Check
//                     type="checkbox"
//                     label="Active?"
//                     name="isActive"
//                     checked={currentMenuItem.isActive}
//                     onChange={handleInputChange}
//                     className="custom-checkbox"
//                   />
//                 </Form.Group>

//                 {/* Modal Footer with buttons */}
//                 <Modal.Footer>
//                   <Button variant="primary" type="submit" className="custom_button px-4">
//                     {isEditing ? "Update" : "Add"}
//                   </Button>
//                   <Button variant="secondary" onClick={handleClose} className="custom_button px-4">
//                     Cancel
//                   </Button>
//                 </Modal.Footer>
//               </Form>
//             </Modal.Body>
//           </Modal>


//         </div>
//       )}
//     </div>
//   );
// }

// export default MenuAccessControl;



import React, { useState, useEffect } from "react";
import {
  Button, Dropdown, Modal, Form, Row, Col, InputGroup,
  FormControl,
} from "react-bootstrap";
import {
  Table, Pagination,
  PaginationItem,
  PaginationLink, Input, Label
} from 'reactstrap';
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {
  faEdit, faTrashAlt, faPlus, faBars,
  faTimes
} from "@fortawesome/free-solid-svg-icons";
import "bootstrap/dist/css/bootstrap.min.css";
import "../Dashboard/CSS/CSS/CommonStyle.css";
import { FaSearch, FaTimes } from "react-icons/fa";
import { BsJournals } from "react-icons/bs";
import Spinner from '../../UIComponants/Spinner';
import { getByUsrGrpId } from "APIServices/MenuAccessControlAPI";
import { toast } from "react-toastify";
import {getToken } from "../../utils/tokenService"
import { faSync } from "@fortawesome/free-solid-svg-icons";

function MenuAccessControl({ selected, Sync }) {
  const [loading, setLoading] = useState(true);
  const [menuItems, setMenuItems] = useState([]);
  const [menus, setMenus] = useState([]);
  const [showAddEditModal, setShowAddEditModal] = useState(false);
  const [selectedMenuId, setSelectedMenuId] = useState(null);
  const [usrgrp, setUsrgrp] = useState(1);
  const [allData, setAllData] = useState([]);


  const [currentMenuItem, setCurrentMenuItem] = useState({
    menuId: "",
    menuItemName: "",
    accessLevel: "",
    isActive: false,
    view: false,   // For View checkbox
    create: false, // For Create checkbox
    edit: false,   // For Edit checkbox
    delete: false, // For Delete checkbox
    query: false,  // For Query checkbox
    export: false, // For Export checkbox
  });
  const [alldata, setAlldata] = useState([]);
  // const [slicedMenus, setSlicedMenus] = useState([]);
  const [toggle, setToggle] = useState(false);
  const [allMenus, setAllMenus] = useState([]);
  
  const [currentPage, setCurrentPage] = useState(1);
  const [isEditing, setIsEditing] = useState(false);
  const [recordsPerPage, setRecordsPerPage] = useState(10);
  const [searchQuery, setSearchQuery] = useState("");
  let [slicedMenus, setSlicedMenus] = useState([
    {
      menuId: 1,
      view: false,
      create: false,
      edit: false,
      delete: false,
      query: false,
      export: false,
      isActive: true,
    },
    {
      menuId: 2,
      view: false,
      create: false,
      edit: false,
      delete: false,
      query: false,
      export: false,
      isActive: false,
    },
  ]);
  const [visibleColumns, setVisibleColumns] = useState({
    No: true,
    menuId: true,
    menuItemName: true,
    view: true,
    create: true,
    edit: true,
    delete: true,
    query: true,
    export: true,
    isActive: true,
    actions: true
  });

  const [newItemData, setNewItemData] = useState({

    menuId: "",
    menuItemName: "",
    view: "",
    create: "",
    edit: "",
    delete: "",
    query: "",
    export: "",
    isActive: true,
  });

  useEffect(() => {
    // Simulate loading data
    setTimeout(() => {
      setLoading(false);
    }, 3000); // Simulated 3 seconds loading
  }, []);

useEffect(() => {
  const defaultGroup = 1; // or whatever default ID you want
  setUsrgrp(defaultGroup); // ✅ sets correctly
}, []);


useEffect(() => {
  const filtered = toggle
    ? allMenus.filter(item => Number(item.menuId) !== 0)
    : allMenus;

  setSlicedMenus(filtered);
}, [toggle, allMenus]);

  useEffect(() => {
    const apiUrl = `${process.env.REACT_APP_API_URL}api/getAllUsrGrp`;
    // const token = localStorage.getItem("CurrentUser");
    const token = getToken()
    const fetchMenuItems = async () => {
      try {
        const response = await fetch(apiUrl, {
          method: "GET",
          headers: {
            "Content-Type": "application/json",
            Authorization: `Bearer ${token}`,
          },
        });

        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }

        const data = await response.json();
        console.log("Menu items fetched successfully:", data);
        setMenuItems(data);
      } catch (error) {
        console.error("Error fetching menu items:", error);
      }
    };
    

    fetchMenuItems();
  }, []);

  useEffect(() => {
    fetchData();
  }, []);
useEffect(() => {
  if (usrgrp) {
    fetchData();
  }
}, [usrgrp]);

  // const fetchData = async () => {
  //   try {
  //     const data = await getByUsrGrpId(usrgrp);
  //     console.log("Data fetched successfully:", data);

  //     setAlldata(data); // Update the state with fetched data
  //     toast.success("Data fetched successfully!");
  //   } catch (error) {
  //     console.error('Error fetching data:', error);
  //     toast.error("Failed to fetch data.");
  //   }
  // };

  // const fetchData = async () => {
  //   try {
  //     console.log("Fetching data for usrgrp:", usrgrp);
  //     const data = await getByUsrGrpId(usrgrp);
  //     if (!data) {
  //       console.error("Received undefined data");
  //       toast.error("Failed to fetch data.");
  //       return;
  //     }
  //     console.log("Data fetched successfully:", data);
  //     setAlldata(data);
  //     toast.success("Data fetched successfully!");
  //   } catch (error) {
  //     console.error("Error fetching data:", error);
  //     toast.error("Failed to fetch data.");
  //   }
  // };

  const fetchData = async () => {
  try {
    console.log("Calling getByUsrGrpId with usrgrp:", usrgrp);

    const data = await getByUsrGrpId(usrgrp); // or your API call
    console.log("API response:", data);

    const transformedData = data.map(item => ({
      menuId: item.menuItemId.menuItemId,
      menuItemName: item.menuItemDesc || '',
      view: item.mvisible === "true",
      create: item.mcreate === "true",
      edit: item.medit === "true",
      delete: item.mdelete === "true",
      query: item.mquery === "true",
      export: item.mexport === "true",
      isActive: item.status === "Enable"
    }));

    setAllMenus(transformedData);
    setSlicedMenus(transformedData); // initially show all
  } catch (error) {
    console.error("Fetch failed:", error);
  }
};

  const idselected = (value) => {
    setSelectedMenuId(value);
  };

  const toggleColumn = (column) => {
    setVisibleColumns((prev) => ({
      ...prev,
      [column]: !prev[column],
    }));
  };

  const handleInputChange = (event, menuId) => {
  const { name, value, checked, type } = event.target;

  const newValue = type === "checkbox" ? checked : value;

  setCurrentMenuItem(prev => ({
    ...prev,
    [name]: newValue
  }));
setSlicedMenus((prevMenus) => {
  console.log("Before update:", prevMenus, "Changing menuId:", menuId, "Field:", name, "Value:", newValue);
  
  return prevMenus.map((menu) =>
    menu.menuId === menuId
      ? { ...menu, [name]: newValue }
      : menu
  );
});
};
  const handleSearch = (query) => {
    setSearchQuery(query);
  };

  const handleAddItem = () => {
    setIsEditing(false);
    setNewItemData({
      menuId: "",
      menuItemName: "",
      isActive: true,
    });
    setShowAddEditModal(true)
  };

  const handleClose = () => {
    setShowAddEditModal(false); // Close the modal by setting the state to false
  };


  const handleSubmit = (event) => {
    event.preventDefault();
    if (isEditing) {
      setMenuItems(menuItems.map(item =>
        item.menuId === currentMenuItem.menuId ? currentMenuItem : item
      ));
    } else {
      const newMenuId = `ID${menuItems.length + 1}`;
      setMenuItems([...menuItems, { ...currentMenuItem, menuId: newMenuId }]);
    }
    setShowAddEditModal(false);
  };
const [loading2, setLoading2] = useState(false);

const handleSync = async () => {
  setLoading2(true);
  await fetchData();
  setLoading2(false);
};

  const openModal = (item = { menuId: "", menuName: "", accessLevel: "", isActive: false }) => {
    setIsEditing(!!item.menuId);
    setCurrentMenuItem(item);
    setShowAddEditModal(true);
  };

  const handleDelete = (menuId) => {
    setMenuItems(menuItems.filter(item => item.menuId !== menuId));
  };

  const handleRecordsPerPageChange = (number) => {
    setRecordsPerPage(number);
    setCurrentPage(1);
  }

  const totalPages = Math.ceil(menuItems.length / recordsPerPage);
  const handlePageChange = (pageNumber) => {
    setCurrentPage(pageNumber);
  };

  const handleSelectChange = (value) => {
    console.log(value);
    setUsrgrp(value);

  };
const handleToggleCheckbox = () => {
  setToggle((prev) => !prev);
  console.log("Toggled:", !toggle); // This should show up in console
};


  const filteredMenus = slicedMenus
    .filter((item) =>
      item.menuItemName && item.menuItemName.toLowerCase().includes(searchQuery.toLowerCase())
    )
    .slice((currentPage - 1) * recordsPerPage, currentPage * recordsPerPage);
  return (
    <div style={{ marginTop: "7rem" }}>
      {loading ? (
        <Spinner />
      ) : (
        <div className="container-fluid mt-5">
          <div
            className="d-flex justify-content-between align-items-center mb-4"
            style={{ gap: "15px" }}
          >
            {/* Left Side */}
            <div className="d-flex align-items-center" style={{ gap: "15px" }}>
              <h1 className="title_main mb-0">Menu Access Control</h1>
              <span
                className="badge bg-info text-white"
                style={{ fontSize: "14px", padding: "5px 10px", lineHeight: "1" }}
              >
                Edit Mode
              </span>
            </div>

            {/* Right Side */}
            <div className="d-flex align-items-center" style={{ gap: "15px" }}>
              <span>For</span>
              <select
                className="form-select"
                style={{ width: "150px", height: "40px" }}
                onChange={(e) => handleSelectChange(e.target.value)}
              >
                {menuItems.map((sub) => (
                  <option
                    key={sub.usrGrp}
                    value={sub.usrGrp}
                    selected={sub.usrGrp === 40}
                  >
                    {sub.groupName}
                  </option>
                ))}
              </select>
              <Button
                variant="primary"
                className="ml-3"
                style={{ height: "40px", lineHeight: "1.2" }}
                onClick={() => fetchData()}
              >
                Reload
              </Button>
              <span style={{ fontWeight: "500" }}>
                {toggle ? "Only Main Menu" : "Show All"}
              </span>

              <div className="form-check form-switch">
              <input
                className="form-check-input"
                type="checkbox"
                id="toggleSwitch"
                checked={toggle}
                onChange={handleToggleCheckbox}
              />
              <label className="form-check-label" htmlFor="toggleSwitch">
                Toggle
              </label>
            </div>
          </div>
          </div>
          <Row className="align-items-center my-3">
            {/* Left: Search Bar */}
            <Col
              xs={12}
              md={8}
              lg={6}
              className="d-flex justify-content-center my-3"
            >
              <InputGroup
                className="search-bar"
                style={{
                  borderRadius: "10px",
                  overflow: "hidden",
                  boxShadow: "0px 4px 12px rgba(0, 0, 0, 0.1)",
                  width: "100%",
                  maxWidth: "528px", // Set max-width to limit overall width
                  paddingRight: "-15px", // Increase padding on the right side
                }}
              >
                <InputGroup.Text
                  style={{
                    backgroundColor: "#0E6591",
                    color: "#fff",
                    padding: "10px 15px",
                  }}
                >
                  <FaSearch />
                </InputGroup.Text>
                <FormControl
                  placeholder="Search"
                  value={searchQuery}
                  onChange={(e) => handleSearch(e.target.value)}
                  style={{
                    padding: "10px",
                    border: "none",
                    paddingRight: "5px", // More space on the right side of input field
                  }}
                />
              </InputGroup>
            </Col>

            {/*Add Icons */}
            <Col xs={12} md={4} lg={6} className="d-flex justify-content-end">
              <>
                {/* Add Icon */}
                <FontAwesomeIcon
                  icon={faPlus}
                  onClick={() => handleAddItem(true)}
                  style={{
                    cursor: "pointer",
                    fontSize: "1.5rem",
                    color: "#747264",
                    marginRight: "20px",
                  }}
                />
                <FontAwesomeIcon
                  icon={faBars}
                  style={{
                    cursor: "pointer",
                    fontSize: "1.5rem",
                    color: "#747264",
                  }}
                />
              </>
            </Col>
          </Row>

          <div style={{ overflowX: "auto", width: "100%" }}>
          <Table
            striped
            responsive
            hover
            align="middle"
            className="table-flush shadow-sm"
            style={{ minWidth: "1000px" }} // adjust based on number of columns
          >
  <thead className="custom_header">
  <tr>
    <th>Sync</th> {/* New column for sync button */}
    {Object.entries(visibleColumns).map(([key, visible]) =>
      visible ? <th key={key}>{key.charAt(0).toUpperCase() + key.slice(1)}</th> : null
    )}
  </tr>
</thead>

<tbody className="tbody">
  {slicedMenus.length === 0 ? (
    <tr>
      <td
        colSpan={
          Object.keys(visibleColumns).filter((key) => visibleColumns[key]).length
        }
        className="text-center"
      >
        No items found. Please add new items.
      </td>
    </tr>
  ) : (
    slicedMenus
      .filter(item => !toggle || item.menuId >= 10) // Show submenus only when toggle is off
      .map((item, index) => (
        <tr key={index}>
  {item.menuId !== 0 && item.menuId >= 10 ? (
      <td key={`sync-${item.menuId}`}>
      <Button
        size="sm"
        variant="outline-primary"
        onClick={() => handleSync(item.menuId)}
        className="me-2 px-2 py-0"
        disabled={loading2}
      >
        { (
          <FontAwesomeIcon icon={faSync} />
        )}
      </Button>
    </td>
  ) : (
    <td key={`sync-${item.menuId}`} /> // Empty cell to maintain alignment
  )}

  {Object.entries(visibleColumns).map(([key, visible]) =>
    visible ? (
      <td key={key}>
        {key === "actions" ? (
          <>
            <FontAwesomeIcon
              icon={faEdit}
              onClick={() => openModal(item)}
              style={{
                cursor: "pointer",
                fontSize: "1rem",
                color: "green",
                marginRight: "15px",
              }}
            />
          </>
        ) : ["view", "create", "edit", "delete", "query", "export"].includes(key) ? (
          <Input
            type="checkbox"
            name={key}
            checked={item[key] || false}
            onChange={(e) => handleInputChange(e, item.menuId)}
          />
        ) : (
          item[key]?.toString()
        )}
      </td>
    ) : null
  )}
</tr>

      ))
  )}
</tbody>
  </Table>
</div>

          {/* Manage Columns & Records Per Page */}
          <Row className="mt-4">
            <Col md={6} className="d-flex justify-content-start">
              <Dropdown>
                <Dropdown.Toggle
                  variant="outline-primary"
                  className="custom_manage_column_button"
                >
                  Manage Columns
                </Dropdown.Toggle>
                <Dropdown.Menu>
                  {Object.keys(visibleColumns).map((column) => (
                    <Dropdown.Item
                      key={column}
                      onClick={() => toggleColumn(column)}
                    >
                      <Form.Check
                        type="checkbox"
                        label={
                          column.charAt(0).toUpperCase() +
                          column.slice(1).toLowerCase()
                        }
                        checked={visibleColumns[column]}
                        readOnly
                        className="custom-checkbox"
                      />
                    </Dropdown.Item>
                  ))}
                </Dropdown.Menu>
              </Dropdown>
            </Col>

            <Col md={6} className="d-flex justify-content-end">
              <Dropdown>
                <Dropdown.Toggle
                  variant="outline-primary"
                  className="custom_manage_column_button px-4 py-2 border-2 rounded-3 shadow-sm"
                  id="dropdown-custom-components"
                >
                  <BsJournals />
                </Dropdown.Toggle>
                <Dropdown.Menu className="border-0 rounded-3 shadow-lg" align="end">
                  {[1, 5, 10, 20, 50].map((number) => (
                    <Dropdown.Item
                      key={number}
                      onClick={() => handleRecordsPerPageChange(number)}
                      className="text-dark d-flex justify-content-between align-items-center"
                    >
                      <span>{number}</span>
                      <i
                        className="fa fa-check-circle"
                        style={{
                          display: recordsPerPage === number ? "inline" : "none",
                        }}
                      />
                    </Dropdown.Item>
                  ))}
                </Dropdown.Menu>
              </Dropdown>
            </Col>
          </Row>

          <Pagination className="pagination">
            <PaginationItem disabled={currentPage === 1}>
              <PaginationLink previous onClick={() => handlePageChange(currentPage - 1)} />
            </PaginationItem>
            {[...Array(totalPages)].map((_, index) => (
              <PaginationItem key={index} active={index + 1 === currentPage}>
                <PaginationLink onClick={() => handlePageChange(index + 1)} style={{ color: '#0b6592' }}>
                  {index + 1}
                </PaginationLink>
              </PaginationItem>
            ))}
            <PaginationItem disabled={currentPage === totalPages}>
              <PaginationLink next onClick={() => handlePageChange(currentPage + 1)} />
            </PaginationItem>
          </Pagination>

          {/* Add/Edit Model */}

          {/* <Modal show={showAddEditModal} onHide={() => setShowAddEditModal(false)}>
        <Modal.Header >
          <Modal.Title>{isEditing ? "Edit Menu Access" : "Add Menu Access"}</Modal.Title>
          <FontAwesomeIcon
            icon={faTimes}
            size="lg"
            onClick={handleClose}
            style={{
              position: "absolute",
              top: "25px",
              right: "25px",
              cursor: "pointer",
            }}
          />
        </Modal.Header>
        <Modal.Body>
          <Form onSubmit={handleSubmit}>
            <Form.Group controlId="formMenuName">
              <Form.Label>Menu Name</Form.Label>
              <Form.Control
                type="text"
                name="menuName"
                value={currentMenuItem.menuName}
                onChange={handleInputChange}
                required
                 className="custom-hover-border"
              />
            </Form.Group>
            <Form.Group>
            <Label for="name">Menu Name<span className="required-field">*</span></Label>
            <Input type="select" style={{ width: '100%', padding: '5px', border: '1px solid #ccc', borderRadius: '4px' }} onChange={(e) => idselected(e.target.value)}>
              {menus.map((sub) => (
                <option key={sub.menuItemId} value={sub.menuItemId}>{sub.menuItemDesc}</option>
              ))}
            </Input>
          </Form.Group>
            <Form.Group controlId="formActive">
              <Form.Check
                type="checkbox"
                label="Active?"
                name="isActive"
                checked={currentMenuItem.isActive}
                onChange={handleInputChange}
                 className="custom-checkbox"
              />
            </Form.Group>
            <Modal.Footer>
              
              <Button variant="primary" type="submit" className="custom_button px-4">{isEditing ? "Update" : "Add"}</Button>
              <Button variant="secondary" onClick={handleClose} className="custom_button px-4">
              Cancel
            </Button>          
            </Modal.Footer>
          </Form>
        </Modal.Body>
      </Modal> */}

          <Modal show={showAddEditModal} onHide={() => setShowAddEditModal(false)}>
            <Modal.Header>
              <Modal.Title>{isEditing ? "Edit Menu Access" : "Add Menu Access"}</Modal.Title>
              <FontAwesomeIcon
                icon={faTimes}
                size="lg"
                onClick={handleClose}
                style={{
                  position: "absolute",
                  top: "25px",
                  right: "25px",
                  cursor: "pointer",
                }}
              />
            </Modal.Header>
            <Modal.Body>
              <Form onSubmit={handleSubmit}>
                {/* Menu Name Input */}
                <Form.Group controlId="formMenuName">
                  <Form.Label>Menu Items Name</Form.Label>
                  <Form.Control
                    type="text"
                    name="menuName"
                    value={currentMenuItem.menuName}
                    onChange={handleInputChange}
                    required
                    className="custom-hover-border"
                  />
                </Form.Group>

                {/* Select Menu Item */}
                <Form.Group>
                  <Label for="name">Menu Item<span className="required-field">*</span></Label>
                  <Input
                    type="select"
                    style={{ width: '100%', padding: '5px', border: '1px solid #ccc', borderRadius: '4px' }}
                    onChange={(e) => idselected(e.target.value)}
                  >
                    {menus.map((sub) => (
                      <option key={sub.menuItemId} value={sub.menuItemId}>
                        {sub.menuItemDesc}
                      </option>
                    ))}
                  </Input>
                </Form.Group>

                {/* Active Checkbox */}
                <Form.Group controlId="formActive">
                  <Form.Check
                    type="checkbox"
                    label="Active?"
                    name="isActive"
                    checked={currentMenuItem.isActive}
                    onChange={handleInputChange}
                    className="custom-checkbox"
                  />
                </Form.Group>

                {/* Modal Footer with buttons */}
                <Modal.Footer>
                  <Button variant="primary" type="submit" className="custom_button px-4">
                    {isEditing ? "Update" : "Add"}
                  </Button>
                  <Button variant="secondary" onClick={handleClose} className="custom_button px-4">
                    Cancel
                  </Button>
                </Modal.Footer>
              </Form>
            </Modal.Body>
          </Modal>


        </div>
      )}
    </div>
  );
}

export default MenuAccessControl;
