// import { useEffect, useState } from "react";
// import {
// 	Box,
// 	Button,
// 	Typography,
// 	TextField,
// 	InputAdornment,
// 	Paper,
// 	Table,
// 	TableBody,
// 	TableCell,
// 	TableContainer,
// 	TableHead,
// 	TableRow,
// 	Pagination,
// 	IconButton,
// } from "@mui/material";
// import SearchIcon from "@mui/icons-material/Search";
// import MoreHorizIcon from "@mui/icons-material/MoreHoriz";
// import TuneIcon from "@mui/icons-material/Tune";
// import { useDispatch, useSelector } from "react-redux";
// import { userList } from "../../redux/slices/userSlice"; // Make sure userSlice exists
// import { AppDispatch, RootState } from "../../redux/store/store";

// export default function UserList() {
// 	const [searchQuery, setSearchQuery] = useState("");
// 	const [currentPage, setCurrentPage] = useState(1);
// 	const usersPerPage = 10;

// 	const dispatch = useDispatch<AppDispatch>();
// 	const users = useSelector((state: RootState) => state.userReducer.users);

// 	useEffect(() => {
// 		dispatch(userList());
// 	}, [dispatch]);

// 	const staticUsers = [
// 		{
// 			name: "Alice Johnson",
// 			email: "alice@example.com",
// 			role: "User",
// 			phone: "+1 234 567 8901",
// 		},
// 		{
// 			name: "Bob Brown",
// 			email: "bob@example.com",
// 			role: "Admin",
// 			phone: "+1 987 654 3210",
// 		},
// 		{
// 			name: "Charlie Davis",
// 			email: "charlie@example.com",
// 			role: "User",
// 			phone: "+1 312 555 7890",
// 		},
// 		{
// 			name: "Alice Johnson",
// 			email: "alice@example.com",
// 			role: "User",
// 			phone: "+1 234 567 8901",
// 		},
// 		{
// 			name: "Bob Brown",
// 			email: "bob@example.com",
// 			role: "Admin",
// 			phone: "+1 987 654 3210",
// 		},
// 		{
// 			name: "Charlie Davis",
// 			email: "charlie@example.com",
// 			role: "User",
// 			phone: "+1 312 555 7890",
// 		},
// 		{
// 			name: "Bob Brown",
// 			email: "bob@example.com",
// 			role: "Admin",
// 			phone: "+1 987 654 3210",
// 		},
// 		{
// 			name: "Charlie Davis",
// 			email: "charlie@example.com",
// 			role: "User",
// 			phone: "+1 312 555 7890",
// 		},
// 	];

// 	const userData = users.length ? users : staticUsers;

// 	const filteredUsers = userData.filter((user) =>
// 		user.name.toLowerCase().includes(searchQuery.toLowerCase())
// 	);

// 	const indexOfLastUser = currentPage * usersPerPage;
// 	const indexOfFirstUser = indexOfLastUser - usersPerPage;
// 	const currentUsers = filteredUsers.slice(indexOfFirstUser, indexOfLastUser);

// 	const handlePageChange = (event, value) => {
// 		setCurrentPage(value);
// 	};

// 	return (
// 		<Box
// 			sx={{
// 				width: "calc(100% - 48px)",
// 				margin: "0 auto",
// 				padding: "24px",
// 				backgroundColor: "#1C1C1C",
// 				borderRadius: "12px",
// 			}}
// 		>
// 			<Typography
// 				sx={{
// 					color: "#FFFFFF",
// 					fontWeight: 500,
// 					fontSize: "18px",
// 					fontFamily: "Gilroy",
// 				}}
// 			>
// 				User List
// 			</Typography>

// 			{/* Search & Buttons Section */}
// 			<Box
// 				sx={{
// 					display: "flex",
// 					gap: "16px",
// 					marginTop: "16px",
// 					alignItems: "center",
// 					fontFamily: "Gilroy",
// 				}}
// 			>
// 				<TextField
// 					variant="outlined"
// 					placeholder="Search Users"
// 					sx={{
// 						width: "422px",
// 						backgroundColor: "#272727",
// 						borderRadius: "12px",
// 						input: { color: "#FFFFFF" },
// 						"& .MuiOutlinedInput-root": {
// 							borderRadius: "12px",
// 							"& fieldset": { borderColor: "#FFFFFF" },
// 							"&:hover fieldset": { borderColor: "#FFFFFF" },
// 							"&.Mui-focused fieldset": {
// 								borderColor: "#52ACDF",
// 							},
// 						},
// 					}}
// 					InputProps={{
// 						startAdornment: (
// 							<InputAdornment position="start">
// 								<SearchIcon sx={{ color: "#FFFFFF" }} />
// 							</InputAdornment>
// 						),
// 					}}
// 					value={searchQuery}
// 					onChange={(e) => setSearchQuery(e.target.value)}
// 				/>
// 				<Box
// 					sx={{
// 						display: "flex",
// 						justifyContent: "flex-end",
// 						width: "100%",
// 					}}
// 				>
// 					<Button
// 						sx={{
// 							backgroundColor: "#52ACDF",
// 							color: "white",
// 							borderRadius: "8px",
// 							width: "184px",
// 							"&:hover": { backgroundColor: "#439BC1" },
// 						}}
// 					>
// 						Add User
// 					</Button>
// 				</Box>

// 				<IconButton
// 					sx={{
// 						width: "44px",
// 						height: "44px",
// 						borderRadius: "8px",
// 						backgroundColor: "#272727",
// 						color: "#52ACDF",
// 						"&:hover": { backgroundColor: "#333333" },
// 					}}
// 				>
// 					<TuneIcon />
// 				</IconButton>
// 			</Box>

// 			{/* Table Section */}
// 			<TableContainer
// 				component={Paper}
// 				sx={{
// 					marginTop: "24px",
// 					backgroundColor: "#1C1C1C",
// 					borderRadius: "12px",
// 					overflow: "hidden",
// 				}}
// 			>
// 				<Table>
// 					<TableHead sx={{ backgroundColor: "#272727" }}>
// 						<TableRow>
// 							{["Name", "Email", "Role", "Phone", "Action"].map(
// 								(header) => (
// 									<TableCell
// 										key={header}
// 										sx={{
// 											color: "#FFFFFF",
// 											fontWeight: "bold",
// 										}}
// 									>
// 										{header}
// 									</TableCell>
// 								)
// 							)}
// 						</TableRow>
// 					</TableHead>
// 					<TableBody>
// 						{currentUsers.map((user, index) => (
// 							<TableRow
// 								key={index}
// 								sx={{ backgroundColor: "#1C1C1C" }}
// 							>
// 								<TableCell
// 									sx={{
// 										color: "#FFFFFF",
// 										borderBottom: "1px solid #2A2A2A",
// 									}}
// 								>
// 									{user.name}
// 								</TableCell>
// 								<TableCell
// 									sx={{
// 										color: "#FFFFFF",
// 										borderBottom: "1px solid #2A2A2A",
// 									}}
// 								>
// 									{user.email}
// 								</TableCell>
// 								<TableCell
// 									sx={{
// 										color: "#FFFFFF",
// 										borderBottom: "1px solid #2A2A2A",
// 									}}
// 								>
// 									{user.role}
// 								</TableCell>
// 								<TableCell
// 									sx={{
// 										color: "#FFFFFF",
// 										borderBottom: "1px solid #2A2A2A",
// 									}}
// 								>
// 									{user.phone}
// 								</TableCell>
// 								<TableCell
// 									sx={{
// 										color: "#FFFFFF",
// 										borderBottom: "1px solid #2A2A2A",
// 									}}
// 								>
// 									<IconButton size="small">
// 										<MoreHorizIcon
// 											sx={{ color: "#FFFFFF" }}
// 										/>
// 									</IconButton>
// 								</TableCell>
// 							</TableRow>
// 						))}
// 					</TableBody>
// 				</Table>
// 			</TableContainer>

// 			{/* Pagination */}
// 			<Box
// 				sx={{
// 					display: "flex",
// 					justifyContent: "flex-end",
// 					alignItems: "center",
// 					marginTop: "16px",
// 				}}
// 			>
// 				<Typography
// 					sx={{ color: "white", fontSize: "16px", fontWeight: 500 }}
// 				>
// 					Page Number :
// 				</Typography>
// 				<Pagination
// 					count={Math.ceil(filteredUsers.length / usersPerPage)}
// 					page={currentPage}
// 					onChange={handlePageChange}
// 					siblingCount={0}
// 					boundaryCount={0}
// 					sx={{
// 						"& .MuiPaginationItem-root": {
// 							color: "white",
// 							borderRadius: "0px",
// 						},
// 						"& .MuiPaginationItem-page.Mui-selected": {
// 							backgroundColor: "transparent",
// 							fontWeight: "bold",
// 							color: "#FFFFFF",
// 						},
// 					}}
// 				/>
// 			</Box>
// 		</Box>
// 	);
// }
// import { useEffect, useState } from "react";
// import {
// 	Box,
// 	Button,
// 	Typography,
// 	TextField,
// 	InputAdornment,
// 	Paper,
// 	Table,
// 	TableBody,
// 	TableCell,
// 	TableContainer,
// 	TableHead,
// 	TableRow,
// 	Pagination,
// 	IconButton,
// } from "@mui/material";
// import SearchIcon from "@mui/icons-material/Search";
// import MoreHorizIcon from "@mui/icons-material/MoreHoriz";
// import TuneIcon from "@mui/icons-material/Tune";
// import { useDispatch, useSelector } from "react-redux";
// import { adminList } from "../../redux/slices/adminSlice";
// import { AppDispatch, RootState } from "../../redux/store/store";

// export default function AdminList() {
// 	const [searchQuery, setSearchQuery] = useState("");
// 	const [currentPage, setCurrentPage] = useState(1);
// 	const adminsPerPage = 10;

// 	const dispatch = useDispatch<AppDispatch>();
// 	const admins = useSelector((state: RootState) => state.adminReducer.admins);

// 	useEffect(() => {
// 		dispatch(adminList());
// 	}, [dispatch]);

// 	const staticAdmins = [
// 		{
// 			name: "John Doe",
// 			location: "New York",
// 			managerAssigned: "Alice Johnson",
// 			vehicle: "Tesla Model S",
// 			phone: "+1 234 567 8901",
// 		},
// 		{
// 			name: "Jane Smith",
// 			location: "Los Angeles",
// 			managerAssigned: "Bob Brown",
// 			vehicle: "Ford F-150",
// 			phone: "+1 987 654 3210",
// 		},
// 		{
// 			name: "Michael Brown",
// 			location: "Chicago",
// 			managerAssigned: "Sarah Lee",
// 			vehicle: "Chevrolet Bolt",
// 			phone: "+1 312 555 7890",
// 		},
// 		{
// 			name: "Emily Davis",
// 			location: "Houston",
// 			managerAssigned: "Tom Wilson",
// 			vehicle: "Nissan Leaf",
// 			phone: "+1 713 444 5678",
// 		},
// 		{
// 			name: "Daniel Martinez",
// 			location: "Phoenix",
// 			managerAssigned: "Jessica White",
// 			vehicle: "BMW i3",
// 			phone: "+1 602 999 4321",
// 		},
// 		{
// 			name: "Sophia Miller",
// 			location: "Philadelphia",
// 			managerAssigned: "Mark Adams",
// 			vehicle: "Audi e-tron",
// 			phone: "+1 215 777 6543",
// 		},
// 		{
// 			name: "James Anderson",
// 			location: "San Antonio",
// 			managerAssigned: "Emma Thomas",
// 			vehicle: "Hyundai Kona EV",
// 			phone: "+1 210 321 8765",
// 		},
// 		{
// 			name: "James Anderson",
// 			location: "San Antonio",
// 			managerAssigned: "Emma Thomas",
// 			vehicle: "Hyundai Kona EV",
// 			phone: "+1 210 321 8765",
// 		},
// 	];

// 	const adminData = admins.length ? admins : staticAdmins;

// 	const filteredAdmins = adminData.filter((admin) =>
// 		admin.name.toLowerCase().includes(searchQuery.toLowerCase())
// 	);

// 	const indexOfLastAdmin = currentPage * adminsPerPage;
// 	const indexOfFirstAdmin = indexOfLastAdmin - adminsPerPage;
// 	const currentAdmins = filteredAdmins.slice(
// 		indexOfFirstAdmin,
// 		indexOfLastAdmin
// 	);

// 	const handlePageChange = (event, value) => {
// 		setCurrentPage(value);
// 	};

// 	return (
// 		<Box
// 			sx={{
// 				width: "calc(100% - 48px)",
// 				margin: "0 auto",
// 				padding: "24px",
// 				backgroundColor: "#1C1C1C",
// 				borderRadius: "12px",
// 			}}
// 		>
// 			<Typography
// 				sx={{
// 					color: "#FFFFFF",
// 					fontWeight: 500,
// 					fontSize: "18px",
// 					fontFamily: "Gilroy",
// 				}}
// 			>
// 				Charge stations
// 			</Typography>

// 			{/* Search & Buttons Section */}
// 			<Box
// 				sx={{
// 					display: "flex",
// 					gap: "16px",
// 					marginTop: "16px",
// 					alignItems: "center",
// 					fontFamily: "Gilroy",
// 				}}
// 			>
// 				<TextField
// 					variant="outlined"
// 					placeholder="Search Charge stations"
// 					sx={{
// 						width: "422px",
// 						backgroundColor: "#272727",

// 						borderRadius: "12px",
// 						input: { color: "#FFFFFF" },
// 						"& .MuiOutlinedInput-root": {
// 							borderRadius: "12px",
// 							"& fieldset": { borderColor: "#FFFFFF" },
// 							"&:hover fieldset": { borderColor: "#FFFFFF" },
// 							"&.Mui-focused fieldset": {
// 								borderColor: "#52ACDF",
// 							},
// 						},
// 					}}
// 					InputProps={{
// 						startAdornment: (
// 							<InputAdornment position="start">
// 								<SearchIcon sx={{ color: "#FFFFFF" }} />
// 							</InputAdornment>
// 						),
// 					}}
// 					value={searchQuery}
// 					onChange={(e) => setSearchQuery(e.target.value)}
// 				/>
// 				<Box
// 					sx={{
// 						display: "flex",
// 						justifyContent: "flex-end",
// 						width: "100%",
// 					}}
// 				>
// 					<Button
// 						sx={{
// 							backgroundColor: "#52ACDF",
// 							color: "white",
// 							borderRadius: "8px",
// 							width: "184px",
// 							"&:hover": {
// 								backgroundColor: "#439BC1",
// 							},
// 						}}
// 					>
// 						Add Charge Stations
// 					</Button>
// 				</Box>

// 				<IconButton
// 					sx={{
// 						width: "44px",
// 						height: "44px",
// 						borderRadius: "8px",
// 						backgroundColor: "#272727",
// 						color: "#52ACDF",
// 						"&:hover": { backgroundColor: "#333333" },
// 					}}
// 				>
// 					<TuneIcon />
// 				</IconButton>
// 			</Box>

// 			{/* Table Section */}
// 			<TableContainer
// 				component={Paper}
// 				sx={{
// 					marginTop: "24px",
// 					backgroundColor: "#1C1C1C",
// 					borderRadius: "12px",
// 					overflow: "hidden",
// 				}}
// 			>
// 				<Table>
// 					<TableHead sx={{ backgroundColor: "#272727" }}>
// 						<TableRow>
// 							{[
// 								"Name",
// 								"Location",
// 								"Manager Assigned",
// 								"Vehicle",
// 								"Phone Number",
// 								"Action",
// 							].map((header) => (
// 								<TableCell
// 									key={header}
// 									sx={{
// 										color: "#FFFFFF",
// 										fontWeight: "bold",
// 									}}
// 								>
// 									{header}
// 								</TableCell>
// 							))}
// 						</TableRow>
// 					</TableHead>
// 					<TableBody>
// 						{currentAdmins.map((admin, index) => (
// 							<TableRow
// 								key={index}
// 								sx={{ backgroundColor: "#1C1C1C" }}
// 							>
// 								<TableCell
// 									sx={{
// 										color: "#FFFFFF",
// 										borderBottom: "1px solid #2A2A2A",
// 									}}
// 								>
// 									{admin.name}
// 								</TableCell>
// 								<TableCell
// 									sx={{
// 										color: "#FFFFFF",
// 										borderBottom: "1px solid #2A2A2A",
// 									}}
// 								>
// 									{admin.location || "N/A"}
// 								</TableCell>
// 								<TableCell
// 									sx={{
// 										color: "#FFFFFF",
// 										borderBottom: "1px solid #2A2A2A",
// 									}}
// 								>
// 									{admin.managerAssigned || "N/A"}
// 								</TableCell>
// 								<TableCell
// 									sx={{
// 										color: "#FFFFFF",
// 										borderBottom: "1px solid #2A2A2A",
// 									}}
// 								>
// 									{admin.vehicle || "N/A"}{" "}
// 									<Typography
// 										component="span"
// 										sx={{
// 											color: "#52ACDF",
// 											cursor: "pointer",
// 											textDecoration: "none",
// 											"&:hover": {
// 												textDecoration: "underline",
// 											},
// 										}}
// 									>
// 										+6 more
// 									</Typography>
// 								</TableCell>
// 								<TableCell
// 									sx={{
// 										color: "#FFFFFF",
// 										borderBottom: "1px solid #2A2A2A",
// 									}}
// 								>
// 									{admin.phone}
// 								</TableCell>
// 								<TableCell
// 									sx={{
// 										color: "#FFFFFF",
// 										borderBottom: "1px solid #2A2A2A",
// 									}}
// 								>
// 									<IconButton size="small">
// 										<MoreHorizIcon
// 											sx={{ color: "#FFFFFF" }}
// 										/>
// 									</IconButton>
// 								</TableCell>
// 							</TableRow>
// 						))}
// 					</TableBody>
// 				</Table>
// 			</TableContainer>

// 			{/* Pagination */}
// 			<Box
// 				sx={{
// 					display: "flex",
// 					justifyContent: "flex-end",
// 					alignItems: "center",
// 					marginTop: "16px",
// 					width: "100%",
// 					gap: "8px",
// 				}}
// 			>
// 				<Typography
// 					sx={{ color: "white", fontSize: "16px", fontWeight: 500 }}
// 				>
// 					Page Number :
// 				</Typography>
// 				<Pagination
// 					count={Math.ceil(filteredAdmins.length / adminsPerPage)}
// 					page={currentPage}
// 					onChange={handlePageChange}
// 					siblingCount={0}
// 					boundaryCount={0}
// 					sx={{
// 						"& .MuiPaginationItem-root": {
// 							color: "white",
// 							borderRadius: "0px",
// 						},
// 						"& .MuiPaginationItem-page.Mui-selected": {
// 							backgroundColor: "transparent",
// 							fontWeight: "bold",
// 							color: "#FFFFFF",
// 						},
// 					}}
// 				/>
// 			</Box>
// 		</Box>
// 	);
// }
import React, { useEffect, useState } from "react";
import { Box, Button, Typography } from "@mui/material";
import AddEditCategoryModal from "../../components/AddEditCategoryModal";
import { useForm } from "react-hook-form";
import CustomTable, { Column } from "../../components/CustomTable";
import { useDispatch, useSelector } from "react-redux";
import { createUser, userList } from "../../redux/slices/userSlice";
import { AppDispatch, RootState } from "../../redux/store/store";
import { string } from "prop-types";
import { adminList, updateAdmin } from "../../redux/slices/adminSlice";
import AddUserModal from "../../components/AddUserModel";

export default function UserList() {
	const [modalOpen, setModalOpen] = useState(false);
	const { reset } = useForm();

	const [deleteModal, setDeleteModal] = React.useState<boolean>(false);
	const [viewModal, setViewModal] = React.useState<boolean>(false);
	const [rowData, setRowData] = React.useState<any | null>(null);

	const dispatch = useDispatch<AppDispatch>();

	const users = useSelector((state: RootState) => state.userReducer.users);

	useEffect(() => {
		dispatch(userList());
	}, [dispatch]);

	const handleClickOpen = () => {
		setRowData(null); // Reset row data when opening for new admin
		setModalOpen(true);
	};

	const handleCloseModal = () => {
		setModalOpen(false);
		setRowData(null);
		reset();
	};

	const handleCreate = async (data: {
		name: string;
		email: string;
		phone: string;
		registeredAddress: string;
	}) => {
		try {
			await dispatch(createUser(data));
			await dispatch(userList()); // Refresh the list after creation
			handleCloseModal();
		} catch (error) {
			console.error("Creation failed", error);
		}
	};

	const handleUpdate = async (
		id: string,
		name: string,
		email: string,
		phone: string,
		registeredAddress: string
	) => {
		try {
			await dispatch(
				updateAdmin({
					id,
					name,
					email,
					phone,
					registeredAddress,
				})
			);
			await dispatch(adminList());
		} catch (error) {
			console.error("Update failed", error);
		}
	};

	const categoryColumns: Column[] = [
		{ id: "srno", label: "Sr No" },
		{ id: "name", label: "Name" },
		{ id: "email", label: "Email" },
		{ id: "phone", label: "Phone" },
		// { id: "location", label: "Location" },
		// { id: "managerAssigned", label: "ManagerAssigned" },
		// { id: "vehicle", label: "Vehicle" },

		{ id: "action", label: "Action", align: "center" },
	];

	const categoryRows = users?.length
		? users?.map(function (
				user: {
					id: string;
					name: string;
					email: string;

					phone: string;
					// location?: string;
					// managerAssigned?: string;
					// vehicle?: string;
				},
				index: number
		  ) {
				return {
					id: user?.id,
					srno: index + 1,
					name: user?.name,
					email: user?.email,
					phone: user?.phone,
					// location: user?.location,
					// managerAssigned: user?.managerAssigned,
					// vehicle: user?.vehicle,
				};
		  })
		: [];

	return (
		<>
			<Box
				sx={{
					width: "100%",
					maxWidth: {
						sm: "100%",
						display: "flex",
						justifyContent: "space-between",
						alignItems: "center",
					},
				}}
			>
				<Typography
					component="h2"
					variant="h6"
					sx={{ mt: 2, fontWeight: 600 }}
				>
					Users
				</Typography>
				<Button
					variant="contained"
					size="medium"
					sx={{ textAlign: "right" }}
					onClick={handleClickOpen}
				>
					Add User
				</Button>
			</Box>

			<CustomTable
				columns={categoryColumns}
				rows={categoryRows}
				setDeleteModal={setDeleteModal}
				deleteModal={deleteModal}
				setViewModal={setViewModal}
				viewModal={viewModal}
				setRowData={setRowData}
				setModalOpen={setModalOpen}
			/>
			<AddUserModal
				open={modalOpen}
				handleClose={handleCloseModal}
				handleCreate={handleCreate}
				handleUpdate={handleUpdate}
				editRow={rowData}
			/>
		</>
	);
}
