import * as React from "react";
import { styled } from "@mui/material/styles";
import Table from "@mui/material/Table";
import TableBody from "@mui/material/TableBody";
import TableCell, { tableCellClasses } from "@mui/material/TableCell";
import TableContainer from "@mui/material/TableContainer";
import TableHead from "@mui/material/TableHead";
import TableRow from "@mui/material/TableRow";
import Paper, { paperClasses } from "@mui/material/Paper";
import { adminList, deleteAdmin } from "../../redux/slices/adminSlice";
import { vehicleList, deleteVehicle } from "../../redux/slices/VehicleSlice";

import { deleteManager, managerList } from "../../redux/slices/managerSlice";
import { useDispatch, useSelector } from "react-redux";
import {
	Box,
	Button,
	InputAdornment,
	Menu,
	IconButton,
	Pagination,
	TextField,
	Typography,
} from "@mui/material";
import MoreHorizRoundedIcon from "@mui/icons-material/MoreHorizRounded";
import DeleteModal from "../Modals/DeleteModal";
import { AppDispatch, RootState } from "../../redux/store/store";
import ViewModal from "../Modals/ViewModal";
import VehicleViewModal from "../Modals/VehicleViewModal";

import SearchIcon from "@mui/icons-material/Search";
import TuneIcon from "@mui/icons-material/Tune";
import { CustomIconButton } from "../AddEditUserModel/styled.css.tsx";
import ManagerViewModal from "../Modals/ViewManagerModal";
import UserViewModal from "../Modals/UserViewModal/index.tsx";
import { deleteUser, userList } from "../../redux/slices/userSlice.ts";
import { deleteStation } from "../../redux/slices/stationSlice.ts";
import StationViewModal from "../Modals/StationViewModal/index.tsx";
import {
	deleteSlot,
	fetchAvailableSlots,
} from "../../redux/slices/slotSlice.ts";
import { bookingList } from "../../redux/slices/bookSlice.ts";
// Styled components for customization
const StyledTableCell = styled(TableCell)(({ theme }) => ({
	[`&.${tableCellClasses.head}`]: {
		backgroundColor: "#454545", // Changed to #272727 for the header
		color: theme.palette.common.white,
		borderBottom: "none", // Remove any border at the bottom of the header
	},
	[`&.${tableCellClasses.body}`]: {
		fontSize: 14,
		borderBottom: "1px solid #454545", // Adding border to body cells
	},
}));

const StyledTableRow = styled(TableRow)(({ theme }) => ({
	"&:nth-of-type(odd)": {
		backgroundColor: theme.palette.action.hover,
	},
	"& td, th": {
		borderColor: "#454545", // Applying border color to both td and th
		borderWidth: "1px", // Set border width to ensure it appears
	},
}));

export interface Column {
	id: string;
	label: string;
	align?: "left" | "center" | "right";
}

interface Row {
	[key: string]: any;
}

interface CustomTableProps {
	columns: Column[];
	rows: Row[];
	setDeleteModal: Function;
	setRowData: Function;
	setModalOpen: Function;
	viewModal: boolean;
	setViewModal: Function;
	deleteModal: boolean;
	handleStatusToggle: (id: string, currentStatus: number) => void;
	tableType: string; // Adding tableType prop to change header text dynamically
	handleClickOpen: () => void;
	//handleDeleteButton: (id: string | number | undefined) => void;
}

const CustomTable: React.FC<CustomTableProps> = ({
	columns,
	rows,
	setDeleteModal,
	deleteModal,
	viewModal,
	setRowData,
	setViewModal,
	setModalOpen,
	handleStatusToggle,
	tableType,
	handleClickOpen,
}) => {
	const dispatch = useDispatch<AppDispatch>();
	const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
	const [selectedRow, setSelectedRow] = React.useState<Row | null>(null);
	const [searchQuery, setSearchQuery] = React.useState("");
	const [currentPage, setCurrentPage] = React.useState(1);
	const usersPerPage = 10;
	const { user, isLoading } = useSelector(
		(state: RootState) => state?.profileReducer
	);
	const open = Boolean(anchorEl);
	console.log("Rows", rows);
	const handleClick = (event: React.MouseEvent<HTMLElement>, row: Row) => {
		setAnchorEl(event.currentTarget);
		setSelectedRow(row);
		setRowData(row);
	};

	const handleClose = () => {
		setAnchorEl(null);
	};

	const isImage = (value: any) => {
		if (typeof value === "string") {
			return value.startsWith("http") || value.startsWith("data:image"); // Check for URL or base64 image
		}
		return false;
	};

	const handleDeleteButton = (id: string | undefined) => {
		if (!id) {
			console.error("ID not found", id);
			return;
		}

		switch (tableType) {
			case "admin":
				dispatch(deleteAdmin(id || ""));
				break;
			case "vehicle":
				dispatch(deleteVehicle(id || ""));
				break;
			case "manager":
				dispatch(deleteManager(id || ""));
				break;
			case "user":
				dispatch(deleteUser(id || ""));
				break;
			case "station":
				dispatch(deleteStation(id || ""));
				break;
			case "slots":
				dispatch(deleteSlot(id || ""));
				break;
			default:
				console.error("Unknown table type:", tableType);
				return;
		}
		setDeleteModal(false); // Close the modal only after deletion
		handleClose();
	};

	const handleViewButton = (id: string | undefined) => {
		if (!id) console.error("ID not found", id);
		switch (tableType) {
			case "admin":
				dispatch(adminList());
				break;
			case "vehicle":
				dispatch(vehicleList());
				break;
			case "manager":
				dispatch(managerList());
				break;
			case "user":
				dispatch(userList());
				break;
			case "booking":
				dispatch(bookingList());
				break;
			case "slots":
				dispatch(fetchAvailableSlots());
				break;
			default:
				console.error("Unknown table type:", tableType);
				return;
		}

		setViewModal(false);
	};

	const handleToggleStatus = () => {
		if (selectedRow) {
			// Toggle the opposite of current status
			const newStatus = selectedRow.statusValue === 1 ? 0 : 1;
			handleStatusToggle(selectedRow.id, newStatus);
		}
		handleClose();
	};

	const filteredRows = rows.filter(
		(row) =>
			(row.name &&
				row.name.toLowerCase().includes(searchQuery.toLowerCase())) ||
			false
	);

	const indexOfLastRow = currentPage * usersPerPage;
	const indexOfFirstRow = indexOfLastRow - usersPerPage;
	const currentRows = filteredRows.slice(indexOfFirstRow, indexOfLastRow);

	const handlePageChange = (
		event: React.ChangeEvent<unknown>,
		value: number
	) => {
		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",
				}}
			>
				{/* Dynamic title based on the page type */}
				{tableType === "admin"
					? "Admin"
					: tableType === "role"
					? "Roles"
					: tableType === "user"
					? "Users"
					: tableType === "manager"
					? "Managers"
					: tableType === "vehicle"
					? "Vehicles"
					: tableType === "station"
					? "Charging Station"
					: tableType === "booking"
					? "Booking"
					: tableType === "slots"
					? "Slot"
					: "List"}
			</Typography>
			{/* Search & Buttons Section */}
			<Box
				sx={{
					display: "flex",

					marginTop: "16px",
					alignItems: "center",
				}}
			>
				<TextField
					variant="outlined"
					placeholder="Search"
					sx={{
						width: "422px",
						borderRadius: "12px",
						input: { color: "#FFFFFF" },
						backgroundColor: "#272727",
						"& .MuiOutlinedInput-root": {
							borderRadius: "12px",
							width: "422px",
							height: "44px",
							borderWidth: "1px",
							padding: "14px 12px 14px 12px",
							gap: "16px",
							"& fieldset": { borderColor: "#FFFFFF" },
							"&:hover fieldset": { borderColor: "#FFFFFF" },
							"&.Mui-focused fieldset": {
								borderColor: "#52ACDF",
							},
						},
						"& .MuiInputBase-input::placeholder": {
							color: "#D9D8D8",
							opacity: 1,
						},
					}}
					InputProps={{
						startAdornment: (
							<InputAdornment position="start">
								<SearchIcon sx={{ color: "#52ACDF" }} />
							</InputAdornment>
						),
					}}
					value={searchQuery}
					onChange={(e) => setSearchQuery(e.target.value)}
				/>
				<Box
					sx={{
						display: "flex",
						justifyContent: "flex-end",
						width: "100%",
					}}
				>
					{!(user?.userType === "user" && tableType === "slots") && (
						<Button
							sx={{
								backgroundColor: "#52ACDF",
								color: "white",
								borderRadius: "8px",
								width: "184px",
								marginRight: "16px",
								"&:hover": { backgroundColor: "#439BC1" },
							}}
							onClick={() => handleClickOpen()}
						>
							Add{" "}
							{tableType === "admin"
								? "Admin"
								: tableType === "role"
								? "Role"
								: tableType === "user"
								? "User"
								: tableType === "manager"
								? "Manager"
								: tableType === "vehicle"
								? "Vehicle"
								: tableType === "station"
								? "Charging Station"
								: tableType === "booking"
								? "Booking"
								: tableType === "slots"
								? "Slot"
								: "Item"}
						</Button>
					)}
				</Box>

				<IconButton
					sx={{
						width: "44px",
						height: "44px",
						borderRadius: "8px",
						backgroundColor: "#1C1C1C",
						color: "#52ACDF",
						"&:hover": { backgroundColor: "#333333" },
						"*:where([data-mui-color-scheme='dark']) &": {
							backgroundColor: "#1C1C1C",
						},
					}}
				>
					<TuneIcon />
				</IconButton>
			</Box>
			{/* Table Section */}
			<TableContainer
				component={Paper}
				sx={{
					marginTop: "24px",
					backgroundColor: "#1C1C1C",
					borderRadius: "12px",
					overflow: "hidden",
				}}
			>
				<Table>
					<TableHead
						sx={{
							backgroundColor: "#272727",
							borderBottom: "none",
							".css-1ex4ubw-MuiTableCell-root.MuiTableCell-head ":
								{
									backgroundColor: "#272727",
								},
						}}
					>
						{" "}
						<TableRow>
							{columns.map((column) => (
								<StyledTableCell
									key={column.id}
									sx={{
										color: "#FFFFFF",
										fontWeight: "bold",
									}}
								>
									{column.label}
								</StyledTableCell>
							))}
						</TableRow>
					</TableHead>
					<TableBody
						sx={{
							".MuiTableCell-root": {
								backgroundColor: "#1C1C1C",
							},
						}}
					>
						{currentRows.map((row, rowIndex) => (
							<StyledTableRow key={rowIndex}>
								{columns.map((column) => (
									<StyledTableCell
										key={column.id}
										sx={{
											color: "#FFFFFF",
											backgroundColor: "#272727",
										}}
									>
										{isImage(row[column.id]) ? (
											<img
												src={row[column.id]}
												alt="Row "
												style={{
													width: "50px",
													height: "50px",
													objectFit: "cover",
												}}
											/>
										) : column.id !== "action" ? (
											row[column.id]
										) : (
											<CustomIconButton
												onClick={(e) => {
													handleClick(e, row);
													setRowData(row); // Store the selected row
												}}
												sx={{
													padding: 0,
													minWidth: 0,
													width: "auto",
													height: "auto",
													color: "#FFFFFF",
												}}
											>
												<MoreHorizRoundedIcon
													sx={{ fontSize: "24px" }}
												/>
											</CustomIconButton>
										)}
									</StyledTableCell>
								))}
							</StyledTableRow>
						))}
					</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(filteredRows.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>
			{/* Menu Actions */}
			{open &&
				(
						<Menu
							anchorEl={anchorEl}
							id="menu"
							open={open}
							onClose={handleClose}
							onClick={handleClose}
							transformOrigin={{
								horizontal: "right",
								vertical: "top",
							}}
							anchorOrigin={{
								horizontal: "right",
								vertical: "bottom",
							}}
							sx={{
								[`& .${paperClasses.root}`]: {
									padding: 0,
								},
								"& .MuiList-root": {
									background: "#272727", // Remove any divider under menu items
								},
							}}
						>
							<Box
								sx={{
									display: "flex",
									flexDirection: "column",
									justifyContent: "flex-start",
								}}
							>
								<Button
									variant="text"
									onClick={(e) => {
										e.stopPropagation();
										// setSelectedRow(row);
										setViewModal(true);
									}}
									color="primary"
									sx={{
										justifyContent: "flex-start",
										py: 0,
										fontWeight: "bold",
										color: "#52ACDF",
									}}
								>
									View
								</Button>
								{viewModal && tableType === "admin" && (
									<ViewModal
										handleView={() =>
											handleViewButton(selectedRow?.id)
										}
										open={viewModal}
										setViewModal={setViewModal}
										id={selectedRow?.id}
									/>
								)}
								{viewModal && tableType === "vehicle" && (
									<VehicleViewModal
										handleView={() =>
											handleViewButton(selectedRow?.id)
										}
										open={viewModal}
										setViewModal={setViewModal}
										id={selectedRow?.id}
									/>
								)}
								{viewModal && tableType === "manager" && (
									<ManagerViewModal
										handleView={() =>
											handleViewButton(selectedRow?.id)
										}
										open={viewModal}
										setViewModal={setViewModal}
										id={selectedRow?.id}
									/>
								)}
								{viewModal && tableType === "user" && (
									<UserViewModal
										handleView={() =>
											handleViewButton(selectedRow?.id)
										}
										open={viewModal}
										setViewModal={setViewModal}
										id={selectedRow?.id}
									/>
								)}
								{viewModal && tableType === "station" && (
									<StationViewModal
										handleView={() =>
											handleViewButton(selectedRow?.id)
										}
										open={viewModal}
										setViewModal={setViewModal}
										id={selectedRow?.id}
									/>
								)}

								<Button
									variant="text"
									onClick={() => setModalOpen(true)}
									color="primary"
									sx={{
										justifyContent: "flex-start",
										py: 0,
										textTransform: "capitalize",
									}}
								>
									Edit
								</Button>
								{tableType === "role" && (
									<Button
										variant="text"
										onClick={(e) => {
											e.stopPropagation();
											handleToggleStatus();
										}}
										color="secondary"
										sx={{
											justifyContent: "flex-start",
											py: 0,
											fontWeight: "bold",
										}}
									>
										{selectedRow?.statusValue === 1
											? "Deactivate"
											: "Activate"}
									</Button>
								)}
								{tableType === "station" && (
									<Button
										variant="text"
										onClick={(e) => {
											e.stopPropagation();
											handleToggleStatus();
										}}
										color="secondary"
										sx={{
											justifyContent: "flex-start",
											py: 0,
											fontWeight: "bold",
										}}
									>
										{selectedRow?.statusValue === 1
											? "Not Available"
											: "Available"}
									</Button>
								)}

								<Button
									variant="text"
									onClick={(e) => {
										e.stopPropagation();
										setDeleteModal(true);
									}}
									color="error"
									sx={{
										justifyContent: "flex-start",
										py: 0,
										fontWeight: "bold",
									}}
								>
									Delete
								</Button>
							</Box>
						</Menu>
					)}
			{/* Modals */}
			{deleteModal && (
				<DeleteModal
					handleDelete={() => handleDeleteButton(selectedRow?.id)}
					open={deleteModal}
					setDeleteModal={setDeleteModal}
					id={selectedRow?.id}
				/>
			)}
		</Box>
	);
};

export default CustomTable;
