import React, { useState } from "react";
import {
	Box,
	Button,
	Typography,
	Modal,
	TextField,
	FormControlLabel,
	Switch,
} from "@mui/material";
import { useForm } from "react-hook-form";
import { useDispatch } from "react-redux";
import { addStationDetails } from "../../redux/slices/managerStationSlice"; // Updated import
import CloseIcon from "@mui/icons-material/Close";
import { CustomIconButton } from "../AddUserModal/styled.css";

const AddManagerStationModal = ({ open, handleClose }: any) => {
	const dispatch = useDispatch();
	const {
		register,
		handleSubmit,
		reset,
		formState: { errors },
	} = useForm();

	const [available, setavailable] = useState<boolean>(true);

	const onSubmit = (data: any) => {
		const { connectorType, power, price } = data;

		const payload = {
			connectorType,
			power,    
			price,
			available,
		};

		dispatch(addStationDetails(payload));
		reset();
		handleClose();
	};

	return (
		<Modal
			open={open}
			onClose={(e, reason) => {
				if (reason === "backdropClick") return;
				handleClose();
			}}
			aria-labelledby="add-manager-modal"
		>
			<Box
				component="form"
				onSubmit={handleSubmit(onSubmit)}
				sx={{
					position: "absolute",
					top: "50%",
					left: "50%",
					transform: "translate(-50%, -50%)",
					width: 400,
					bgcolor: "background.paper",
					boxShadow: 24,
					p: 3,
					borderRadius: 2,
				}}
			>
				{/* Header */}
				<Box
					sx={{
						display: "flex",
						justifyContent: "space-between",
						alignItems: "center",
					}}
				>
					<Typography variant="h6" fontWeight={600} fontSize={"16px"}>
						Add Manager Station
					</Typography>
					<CustomIconButton onClick={handleClose}>
						<CloseIcon />
					</CustomIconButton>
				</Box>

				{/* Divider */}
				<Box sx={{ borderBottom: "1px solid #ddd", my: 2 }} />

				{/* Connector Type */}
				<Typography variant="body2" fontWeight={500} mb={0.5}>
					Connector Type
				</Typography>
				<TextField
					{...register("connectorType", {
						required: "Connector Type is required",
					})}
					fullWidth
					error={!!errors.connectorType}
					helperText={errors.connectorType?.message}
				/>

				{/* Power */}
				<Typography variant="body2" fontWeight={500} mb={0.5}>
					Power (kW)
				</Typography>
				<TextField
					{...register("power", { required: "Power is required" })}
					fullWidth
					error={!!errors.power}
					helperText={errors.power?.message}
				/>

				{/* Price */}
				<Typography variant="body2" fontWeight={500} mb={0.5}>
					Price (₹)
				</Typography>
				<TextField
					{...register("price", {
						required: "Price is required",
						pattern: {
							value: /^[0-9]+$/,
							message: "Price must be a number",
						},
					})}
					fullWidth
					error={!!errors.price}
					helperText={errors.price?.message}
				/>

				{/* Availability Switch */}
				<FormControlLabel
					control={
						<Switch
							checked={available}
							onChange={() => setavailable((prev) => !prev)}
						/>
					}
					label={available ? "Available" : "Not Available"}
					sx={{ mt: 2 }}
				/>

				{/* Submit */}
				<Box
					sx={{ display: "flex", justifyContent: "flex-end", mt: 3 }}
				>
					<Button
						type="submit"
						sx={{
							backgroundColor: "#52ACDF",
							color: "white",
							borderRadius: "8px",
							fontSize: "16px",
							width: "117px",
							"&:hover": { backgroundColor: "#439BC1" },
						}}
					>
						Add Station
					</Button>
				</Box>
			</Box>
		</Modal>
	);
};

export default AddManagerStationModal;
