import React, { useEffect, useState } from "react";
import { Box, Modal, Typography, Divider, Grid, Chip } from "@mui/material";
import CloseIcon from "@mui/icons-material/Close";
import { useSelector } from "react-redux";
import { RootState } from "../../../redux/reducers";
import { CustomIconButton } from "../../AddUserModal/styled.css";

type Props = {
	open: boolean;
	setViewModal: Function;
	handleView: (id: number | undefined) => void;
	id?: number | undefined;
};

const style = {
	position: "absolute",
	top: "50%",
	left: "50%",
	transform: "translate(-50%, -50%)",
	width: 400,
	bgcolor: "background.paper",
	borderRadius: 2,
	boxShadow: "0px 4px 20px rgba(0, 0, 0, 0.15)",
	p: 4,
	display: "flex",
	flexDirection: "column",
	alignItems: "center",
	gap: 2,
};

export default function StationViewModal({ open, setViewModal, id }: Props) {
	const { stations } = useSelector(
		(state: RootState) => state.stationReducer
	);
	const [selectedStation, setSelectedStation] = useState<any>(null);

	useEffect(() => {
		if (id) {
			const station = stations.find((station) => station.id === id);
			setSelectedStation(station || null);
		}
	}, [id, stations]);

	return (
		<Modal
			open={open}
			aria-labelledby="modal-title"
			aria-describedby="modal-description"
		>
			<Box sx={style}>
				<Typography
					id="modal-title"
					variant="h5"
					fontWeight="bold"
					sx={{ width: "100%" }}
				>
					<Box
						sx={{
							display: "flex",
							alignItems: "center",
							justifyContent: "space-between",
							width: "100%",
						}}
					>
						<Box sx={{ flex: 1, textAlign: "center" }}>
							{selectedStation?.name || "Station"}'s Details
						</Box>
						<CustomIconButton
							onClick={() => setViewModal(false)}
							aria-label="Close"
						>
							<CloseIcon />
						</CustomIconButton>
					</Box>
				</Typography>

				<Divider sx={{ width: "100%" }} />

				{selectedStation ? (
					<Grid container spacing={2} sx={{ width: "80%" }}>
						<Grid item xs={6}>
							<Typography variant="body1">
								<strong>Station Name:</strong>{" "}
								<Typography variant="body2">
									{selectedStation.name}
								</Typography>
							</Typography>
						</Grid>
						<Grid item xs={6}>
							<Typography variant="body1">
								<strong>Station Location:</strong>{" "}
								<Typography variant="body2">
									{selectedStation.registeredAddress}
								</Typography>
							</Typography>
						</Grid>
						<Grid item xs={6}>
							<Typography variant="body1">
								<strong>Total Slots:</strong>
								<Typography variant="body2">
									{selectedStation.totalSlots}
								</Typography>
							</Typography>
						</Grid>
						<Grid item xs={6}>
							<Typography variant="body1">
								<strong>Status:</strong>
								<Typography variant="body2">
									{selectedStation.status === 1
										? "Available"
										: "Not Available"}
								</Typography>
							</Typography>
						</Grid>

						{/* Display Vehicles */}
						<Grid item xs={12}>
							<Typography variant="body1">
								<strong>Vehicles:</strong>
							</Typography>
							<Box
								sx={{
									display: "flex",
									flexWrap: "wrap",
									gap: 1,
									marginTop: 1,
								}}
							>
								{selectedStation.allowedCars &&
								selectedStation.allowedCars.length > 0 ? (
									selectedStation.allowedCars.map(
										(car: any, index: number) => (
											<Typography
												key={car.id || index}
												variant="body2"
												sx={{
													color: "#FFFFFF",
													fontWeight: 500,
												}}
											>
												{car.name}{","}
											</Typography>
										)
									)
								) : (
									<Typography
										variant="body2"
										color="text.secondary"
									>
										No vehicles available
									</Typography>
								)}
							</Box>
						</Grid>
					</Grid>
				) : (
					<Typography align="center">
						No station found with this ID
					</Typography>
				)}
			</Box>
		</Modal>
	);
}
