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";

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,
					bgcolor: "background.paper",
					boxShadow: 24,
					p: 3,
					borderRadius: 2,
				}}
			>
				{/* Header */}
				<Box
					sx={{
						display: "flex",
						justifyContent: "space-between",
						alignItems: "center",
					}}
				>
					<Typography variant="h6" fontWeight={600}>
						Add User
					</Typography>
					<CustomIconButton onClick={handleClose}>
						<CloseIcon />
					</CustomIconButton>
				</Box>

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

				{/* 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,
							}}
						>
							<Typography variant="body2" fontWeight={500}>
								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
										placeholder="Enter User Name"
										fullWidth
										size="small"
										error={!!errors.name}
										helperText={errors.name?.message}
									/>
								)}
							/>
						</Box>

						<Box
							sx={{
								display: "flex",
								flexDirection: "column",
								flex: 1,
							}}
						>
							<Typography variant="body2" fontWeight={500}>
								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"
										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,
							}}
						>
							<Typography variant="body2" fontWeight={500}>
								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"
										type={
											showPassword ? "text" : "password"
										}
										fullWidth
										color={
											errors.password
												? "error"
												: "primary"
										}
										size="small"
										slotProps={{
											input: {
												endAdornment: (
													<InputAdornment position="end">
														<CustomIconButton
															aria-label="toggle password visibility"
															onClick={
																togglePasswordVisibility
															}
															edge="end"
														>
															{showPassword ? (
																<VisibilityOff />
															) : (
																<Visibility />
															)}
														</CustomIconButton>
													</InputAdornment>
												),
											},
										}}
										error={!!errors.password}
										helperText={errors.password?.message}
									/>
								)}
							/>
						</Box>

						<Box
							sx={{
								display: "flex",
								flexDirection: "column",
								flex: 1,
							}}
						>
							<Typography variant="body2" fontWeight={500}>
								Phone Number
							</Typography>
							<Controller
								name="phone"
								control={control}
								rules={{
									required: "Phone number is required",
									pattern: {
										value: /^[0-9]*$/,
										message: "Only numbers are allowed",
									},
									minLength: {
										value: 6,
										message:
											"Phone number must be at least 6 digits",
									},
									maxLength: {
										value: 14,
										message:
											"Phone number must be at most 14 digits",
									},
								}}
								render={({ field }) => (
									<CustomTextField
										{...field}
										required
										placeholder="Enter Phone Number"
										size="small"
										error={!!errors.phone}
										helperText={errors.phone?.message}
									/>
								)}
							/>
						</Box>
					</Box>

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

export default AddUserModal;
