import React, { useState } from "react";
import {
	Box,
	Button,
	Typography,
	Modal,
	InputAdornment,
	styled,
} from "@mui/material";
import CloseIcon from "@mui/icons-material/Close";
import Visibility from "@mui/icons-material/Visibility";
import VisibilityOff from "@mui/icons-material/VisibilityOff";
import { useForm, Controller } from "react-hook-form";
import { CustomIconButton, CustomTextField } from "./styled.css.tsx";
import { autofillFix } from "../../shared-theme/customizations/autoFill.tsx";

interface FormData {
	name: string;
	email: string;
	password: string;
	phone: string;
}

interface AddUserModalProps {
	open: boolean;
	handleClose: () => void;
	handleCreate: (data: FormData) => void;
}

const AddUserModal: React.FC<AddUserModalProps> = ({
	open,
	handleClose,
	handleCreate,
}) => {
	const [showPassword, setShowPassword] = useState(false);

	const {
		control,
		handleSubmit,
		formState: { errors },
		reset,
	} = useForm<FormData>({
		defaultValues: {
			name: "",
			email: "",
			password: "",
			phone: "",
		},
	});

	const onSubmit = (data: FormData) => {
		handleCreate(data);
		handleClose();
		reset();
	};

	const togglePasswordVisibility = () => {
		setShowPassword((prev) => !prev);
	};

	return (
		<Modal
			open={open}
			onClose={(e, reason) => {
				if (reason === "backdropClick") {
					return;
				}
				handleClose();
			}}
			aria-labelledby="add-user-modal"
		>
			<Box
				sx={{
					position: "absolute",
					top: "50%",
					left: "50%",
					transform: "translate(-50%, -50%)",
					width: 600,
					boxShadow: 24,
					borderRadius: 2,
					p: 0, // Remove padding from the outer box
				}}
			>
				{/* Header Section */}
				<Box
					sx={{
						display: "flex",
						justifyContent: "space-between",
						alignItems: "center",
						backgroundColor: "#000000",
						color: "#D0E1E9",

						padding: "16px 24px",
						borderRadius: "10px 10px 0 0",
					}}
				>
					<Typography variant="h6" fontWeight={600} fontSize={"16px"}>
						Add User
					</Typography>
					<CustomIconButton onClick={handleClose}>
						<CloseIcon />
					</CustomIconButton>
				</Box>

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

				{/* Body Section */}
				<Box
					sx={{
						backgroundColor: "#b5c4cb",
						padding: "24px",
						borderRadius: "0 0 10px 10px",
					}}
				>
					{" "}
					{/* Form */}
					<form onSubmit={handleSubmit(onSubmit)}>
						{/* First Row - User Name & Email */}
						<Box
							sx={{
								display: "flex",
								gap: 2,
								mb: 2,
							}}
						>
							<Box
								sx={{
									display: "flex",
									flexDirection: "column",
									flex: 1,
									...autofillFix,
								}}
							>
								<Typography
									variant="body2"
									fontWeight={500}
									color="#000000"
									fontSize={"16px"}
								>
									User Name
								</Typography>
								<Controller
									name="name"
									control={control}
									rules={{
										required: "User Name is required",
										minLength: {
											value: 3,
											message:
												"Minimum 3 characters required",
										},
										maxLength: {
											value: 30,
											message:
												"Maximum 30 characters allowed",
										},
									}}
									render={({ field }) => (
										<CustomTextField
											{...field}
											required
											autoComplete="username"
											placeholder="Enter User Name"
											fullWidth
											size="small"
											sx={{
												marginTop: 1,
											}}
											error={!!errors.name}
											helperText={errors.name?.message}
										/>
									)}
								/>
							</Box>

							<Box
								sx={{
									display: "flex",
									flexDirection: "column",
									flex: 1,
									...autofillFix,
								}}
							>
								<Typography
									variant="body2"
									fontWeight={500}
									fontSize={"16px"}
									color="#000000"
								>
									Email
								</Typography>
								<Controller
									name="email"
									control={control}
									rules={{
										required: "Email is required",
										pattern: {
											value: /\S+@\S+\.\S+/,
											message:
												"Please enter a valid email address.",
										},
									}}
									render={({ field }) => (
										<CustomTextField
											{...field}
											error={!!errors.email}
											helperText={errors.email?.message}
											type="email"
											placeholder="Email"
											autoComplete="new-email"
											sx={{
												marginTop: 1,
											}}
											required
											fullWidth
											color={
												errors.email
													? "error"
													: "primary"
											}
										/>
									)}
								/>
							</Box>
						</Box>

						{/* Second Row - Password & Phone Number */}
						<Box sx={{ display: "flex", gap: 2 }}>
							<Box
								sx={{
									display: "flex",
									flexDirection: "column",
									flex: 1,
									...autofillFix,
								}}
							>
								<Typography
									variant="body2"
									fontWeight={500}
									fontSize={"16px"}
									color="#000000"
								>
									Password
								</Typography>
								<Controller
									name="password"
									control={control}
									rules={{
										required: "Password is required",
										minLength: {
											value: 6,
											message:
												"Password must be at least 6 characters long.",
										},
									}}
									render={({ field }) => (
										<CustomTextField
											{...field}
											required
											placeholder="Enter Password"
											autoComplete="new-password"
											type={
												showPassword
													? "text"
													: "password"
											}
											fullWidth
											color={
												errors.password
													? "error"
													: "primary"
											}
											size="small"
											sx={{
												marginTop: 1,
											}}
											slotProps={{
												input: {
													endAdornment: (
														<InputAdornment position="end">
															<CustomIconButton
																aria-label="toggle password visibility"
																onClick={
																	togglePasswordVisibility
																}
																edge="end"
																sx={{
																	color: "#000000",
																}}
															>
																{showPassword ? (
																	<VisibilityOff />
																) : (
																	<Visibility />
																)}
															</CustomIconButton>
														</InputAdornment>
													),
												},
											}}
											error={!!errors.password}
											helperText={
												errors.password?.message
											}
										/>
									)}
								/>
							</Box>

							<Box
								sx={{
									display: "flex",
									flexDirection: "column",
									flex: 1,
									...autofillFix,
								}}
							>
								<Typography
									variant="body2"
									fontWeight={500}
									color="#000000"
									fontSize={"16px"}
								>
									Phone Number
								</Typography>
								<Controller
									name="phone"
									control={control}
									rules={{
										required: "Phone number is required",
										validate: (value) => {
											if (!/^[0-9]*$/.test(value)) {
												return "Only numbers are allowed";
											}
											if (value.length < 6) {
												return "Phone number must be at least 6 digits";
											}
											if (value.length > 14) {
												return "Phone number must be at most 14 digits";
											}
											return true; // No errors
										},
									}}
									render={({ field }) => (
										<CustomTextField
											{...field}
											required
											placeholder="Enter Phone Number"
											size="small"
											sx={{
												marginTop: 1,
											}}
											error={!!errors.phone}
											helperText={errors.phone?.message}
										/>
									)}
								/>
							</Box>
						</Box>

						{/* Submit Button */}
						
						<Box
							sx={{
								display: "flex",
								justifyContent: "flex-end",
								width: "100%",
								gap:2,
								mt: 3,
							}}
						>
							{/* <Button
								onClick={() => handleClose()}
								sx={{
									backgroundColor: "#000000",
									color: "#D0E1E9",
									borderRadius: "8px",
									fontSize: "16px",
									width: "117px",
									"&:hover": { backgroundColor: "#454545" },
								}}
							>
								Close
							</Button> */}
							<Button
								type="submit"
								sx={{
									backgroundColor: "#000000",
									color: "#D0E1E9",
									borderRadius: "8px",
									fontSize: "16px",
									width: "117px",
									"&:hover": { backgroundColor: "#454545" },
								}}
							>
								Add User
							</Button>
						</Box>
					</form>
				</Box>
			</Box>
		</Modal>
	);
};

export default AddUserModal;
