import { useForm } from "react-hook-form";
import {
	Box,
	Button,
	Typography,
	Modal,
} from "@mui/material";
import CloseIcon from "@mui/icons-material/Close";
import {
	CustomIconButton,
	CustomTextField,
} from "../AddEditUserModel/styled.css.tsx";
export default function AddVehicleModal({
	open,
	handleClose,
	handleAddVehicle,
}) {
	const {
		register,
		handleSubmit,
		formState: { errors },
		reset,
	} = useForm();

	const onSubmit = (data: any) => {
		handleAddVehicle(data); // Add vehicle to table
		handleClose(); // Close modal after adding
		reset();
	};

	return (
		<Modal
			open={open}
			onClose={(e, reason) => {
				if (reason === "backdropClick") {
					return;
				}
				handleClose(); // Close modal when clicking cross or cancel
			}}
			aria-labelledby="add-vehicle-modal"
		>
			<Box
				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}>
						Add Vehicle
					</Typography>
					<CustomIconButton onClick={handleClose}>
						<CloseIcon />
					</CustomIconButton>
				</Box>

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

				{/* Form */}
				<form onSubmit={handleSubmit(onSubmit)}>
					{/* Input Fields */}
					<Box
						sx={{
							display: "flex",
							flexDirection: "column",
							gap: 2,
						}}
					>
						{/* First Row - Two Inputs */}
						<Box sx={{ display: "flex", gap: 2 }}>
							<Box
								sx={{
									display: "flex",
									flexDirection: "column",
									width: "100%",
								}}
							>
								<Typography variant="body2" fontWeight={500}>
									Vehicle Name
								</Typography>
								<CustomTextField
									fullWidth
									placeholder="Enter Vehicle Name"
									size="small"
									error={!!errors.name}
									helperText={
										errors.name ? errors.name.message : ""
									}
									{...register("name", {
										required: "Vehicle Name is required",
										minLength: {
											value: 3,
											message:
												"Minimum 3 characters required",
										},
										maxLength: {
											value: 30,
											message:
												"Maximum 30 characters allowed",
										},
										pattern: {
											value: /^[A-Za-z\s]+$/, // Only letters and spaces are allowed
											message:
												"Vehicle Name must only contain letters and spaces",
										},
									})}
								/>
							</Box>

							<Box
								sx={{
									display: "flex",
									flexDirection: "column",
									width: "100%",
								}}
							>
								<Typography variant="body2" fontWeight={500}>
									Company
								</Typography>
								<CustomTextField
									fullWidth
									placeholder="Enter Company Name"
									size="small"
									error={!!errors.company}
									helperText={
										errors.company
											? errors.company.message
											: ""
									}
									{...register("company", {
										required: "Company is required",
										minLength: {
											value: 3,
											message:
												"Company must be at least 5 characters long",
										},
									})}
								/>
							</Box>
						</Box>

						{/* Second Row - Two Inputs */}
						<Box sx={{ display: "flex", gap: 2 }}>
							<Box
								sx={{
									display: "flex",
									flexDirection: "column",
									width: "100%",
								}}
							>
								<Typography variant="body2" fontWeight={500}>
									Model Name
								</Typography>
								<CustomTextField
									fullWidth
									placeholder="Enter Model Name"
									size="small"
									error={!!errors.modelName}
									helperText={
										errors.modelName
											? errors.modelName.message
											: ""
									}
									{...register("modelName", {
										required: "Model Name is required",
									})}
								/>
							</Box>

							<Box
								sx={{
									display: "flex",
									flexDirection: "column",
									width: "100%",
								}}
							>
								<Typography variant="body2" fontWeight={500}>
									Charge Type
								</Typography>
								<CustomTextField
									fullWidth
									placeholder="Enter Charge Type"
									size="small"
									error={!!errors.chargeType}
									helperText={
										errors.chargeType
											? errors.chargeType.message
											: ""
									}
									{...register("chargeType", {
										required: "Charge Type is required",
									})}
								/>
							</Box>
						</Box>

						{/* Third Row - Image URL */}
						<Box
							sx={{
								display: "flex",
								flexDirection: "column",
								width: "100%",
							}}
						>
							<Typography variant="body2" fontWeight={500}>
								Image URL
							</Typography>
							<CustomTextField
								fullWidth
								placeholder="Enter Image URL"
								size="small"
								error={!!errors.imageUrl}
								helperText={
									errors.imageUrl
										? errors.imageUrl.message
										: ""
								}
								{...register("imageUrl", {
									required: "Image URL is required",
									pattern: {
										value: /^(https?:\/\/)?((([a-zA-Z\d]([a-zA-Z\d-]*[a-zA-Z\d])*)\.)+[a-zA-Z]{2,}|((\d{1,3}\.){3}\d{1,3}))(:\d+)?(\/[-a-zA-Z\d%_.~+]*)*(\?[;&a-zA-Z\d%_.~+=-]*)?(#[-a-zA-Z\d_]*)?$/,
										message: "Please enter a valid URL",
									},
								})}
							/>
						</Box>
					</Box>

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