import React, { useEffect, useState } from "react";
import {
	Box,
	Button,
	Typography,
	Modal,
	FormControl,
	InputLabel,
	Select,
	MenuItem,
	Checkbox,
	ListItemText,
	FormHelperText,
} from "@mui/material";
import CloseIcon from "@mui/icons-material/Close";
import { useForm, Controller } from "react-hook-form";
import { useSelector, useDispatch } from "react-redux";
import { RootState } from "../../redux/reducers.ts";
import {
	fetchVehicleBrands,
	vehicleList,
} from "../../redux/slices/VehicleSlice";
import { CustomIconButton, CustomTextField } from "../AddUserModal/styled.css"; // Assuming custom styled components

interface FormData {
	name: string;
	registeredAddress: string;
	totalSlots: number;
	allowedCarIds: string[];
	status: number;
}

interface EditStationModalProps {
	open: boolean;
	handleClose: () => void;
	handleUpdate: (
		id: string,
		name: string,
		registeredAddress: string,
		totalSlots: number,
		allowedCarIds: number[]
	) => void;
	editRow?: any;
}

const EditStationModal: React.FC<EditStationModalProps> = ({
	open,
	handleClose,
	handleUpdate,
	editRow,
}) => {
	const {
		control,
		handleSubmit,
		setValue,
		reset,
		formState: { errors },
		register,
	} = useForm<FormData>({
		defaultValues: {
			name: "",
			registeredAddress: "",
			totalSlots: 0,
			status: 1,
			allowedCarIds: [],
		},
	});

	const dispatch = useDispatch();
	const vehicles = useSelector(
		(state: RootState) => state.vehicleReducer.vehicles
	);
	const vehicleBrands = useSelector(
		(state: RootState) => state.vehicleReducer.vehicleBrands
	);

	const [selectedBrands, setSelectedBrands] = useState<string[]>([]);
	const [selectedVehicles, setSelectedVehicles] = useState<string[]>([]);

	useEffect(() => {
		dispatch(fetchVehicleBrands());
		dispatch(vehicleList());
	}, [dispatch]);

	useEffect(() => {
		if (editRow) {
			// Determine the brand based on the first vehicle's company
			const firstVehicle = vehicles.find(
				(vehicle) =>
					editRow.allowedCarIds &&
					editRow.allowedCarIds.includes(vehicle.name)
			);

			const brandId = firstVehicle ? firstVehicle.company : "";
			setSelectedBrands(brandId);

			// Populate selected vehicles
			const vehicleNames = vehicles
				.filter(
					(vehicle) =>
						editRow.allowedCarIds &&
						editRow.allowedCarIds.includes(vehicle.name)
				)
				.map((vehicle) => vehicle.name);

			setSelectedVehicles(vehicleNames);

			// Set form values
			setValue("name", editRow.name);
			setValue("registeredAddress", editRow.registeredAddress);
			setValue("totalSlots", editRow.totalSlots);
			setValue("status", editRow.status);
			setValue("allowedCarIds", editRow.allowedCarIds || []);
			setSelectedVehicles(editRow.allowedCarIds || []);

			// Set selectedBrands based on the vehicles associated with the station
			const brands = editRow?.allowedCarIds
				? vehicles
						.filter((vehicle) =>
							editRow.allowedCarIds.includes(vehicle.id)
						)
						.map((vehicle) => vehicle.company)
				: [];

			setSelectedBrands(brands);
		} else {
			reset();
			setSelectedBrands([]); // Ensure it's cleared when not editing
			setSelectedVehicles([]);
		}
	}, [editRow, setValue, reset, vehicles]);

	// Filter vehicles based on selected brands
	const filteredVehicles = vehicles.filter((vehicle) =>
		selectedBrands.includes(vehicle.company)
	);

	// Handle changes in vehicle brand selection
	const handleBrandChange = (
		event: React.ChangeEvent<{ value: unknown }>
	) => {
		const brands = event.target.value as string[];
		setSelectedBrands(brands);

		// Filter vehicles based on the new brand selection
		const filtered = vehicles.filter((vehicle) =>
			brands.includes(vehicle.company)
		);
		setSelectedVehicles(filtered.map((v) => v.name)); // Automatically select vehicles for the selected brands
	};

	// Handle changes in vehicle selection
	const handleCheckboxChange = (
		event: React.ChangeEvent<{ value: unknown }>
	) => {
		const value = event.target.value as string[];
		setSelectedVehicles(value);
		setValue("allowedCarIds", value);
	};

	const onSubmit = (data: FormData) => {
		const vehicleIds = vehicles
			.filter((vehicle) => selectedVehicles.includes(vehicle.name))
			.map((vehicle) => Number(vehicle.id));

		handleUpdate(
			editRow.id,
			data.name,
			data.registeredAddress,
			data.totalSlots,
			vehicleIds
		);
		handleClose();
		reset();
		setSelectedBrands([]); // Reset brands after submit
		setSelectedVehicles([]); // Reset selected vehicles
	};

	console.log("editRow:", editRow);

	return (
		<Modal
			open={open}
			onClose={(e, reason) => {
				if (reason === "backdropClick") {
					return;
				}
				handleClose();
			}}
			aria-labelledby="edit-station-modal"
		>
			<Box
				component="form"
				onSubmit={handleSubmit(onSubmit)}
				sx={{
					position: "absolute",
					top: "50%",
					left: "50%",
					transform: "translate(-50%, -50%)",
					width: 500,
					boxShadow: 24,
					p: 0,
					borderRadius: 2,
				}}
			>
				{/* Header */}
				<Box
					sx={{
						display: "flex",
						justifyContent: "space-between",
						alignItems: "center",
						backgroundColor: "#000000",
						color: "#D0E1E9",
						padding: "20px 24px",
						borderRadius: "10px 10px 0 0",
					}}
				>
					<Typography
						variant="h6"
						fontWeight={600}
						fontSize={"16px"}
						color="#D0E1E9"
					>
						Edit Charging Station
					</Typography>
					<CustomIconButton onClick={handleClose}>
						<CloseIcon />
					</CustomIconButton>
				</Box>

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

				{/* Form */}
				<Box
					sx={{
						backgroundColor: "#b5c4cb", // light background for body
						padding: "20px",
						borderRadius: "0 0 10px 10px",
					}}
				>
					<Box
						sx={{
							display: "flex",
							flexDirection: "column",
							gap: 2,
						}}
					>
						{/* Station Name and Address */}
						<Box sx={{ display: "flex", gap: 2 }}>
							<Box
								sx={{
									display: "flex",
									flexDirection: "column",
									width: "100%",
								}}
							>
								<Typography
									variant="body2"
									fontWeight={500}
									mb={0.5}
									color="#000000"
								>
									Station Name
								</Typography>
								<Controller
									name="name"
									control={control}
									render={({ field }) => (
										<CustomTextField
											{...field}
											fullWidth
											placeholder="Enter Station Name"
											size="small"
											sx={{ marginTop: 1 }}
											error={!!errors.name}
											helperText={
												errors.name
													? errors.name.message
													: ""
											}
											{...register("name", {
												required:
													"Station Name is required",
												minLength: {
													value: 3,
													message:
														"Minimum 3 characters required",
												},
												maxLength: {
													value: 30,
													message:
														"Maximum 30 characters allowed",
												},
											})}
										/>
									)}
								/>
							</Box>
							<Box
								sx={{
									display: "flex",
									flexDirection: "column",
									width: "100%",
								}}
							>
								<Typography
									variant="body2"
									fontWeight={500}
									mb={0.5}
									color="#000000"
								>
									Station Location
								</Typography>
								<Controller
									name="registeredAddress"
									control={control}
									render={({ field }) => (
										<CustomTextField
											{...field}
											fullWidth
											placeholder="Enter Registered Address"
											size="small"
											sx={{ marginTop: 1 }}
											error={!!errors.registeredAddress}
											helperText={
												errors.registeredAddress
													? errors.registeredAddress
															.message
													: ""
											}
											{...register("registeredAddress", {
												required:
													"Station Location is required",
											})}
										/>
									)}
								/>
							</Box>
						</Box>

						{/* Total Slots */}
						<Box sx={{ display: "flex", gap: 2 }}>
							<Box
								sx={{
									display: "flex",
									flexDirection: "column",
									width: "100%",
								}}
							>
								<Typography
									variant="body2"
									fontWeight={500}
									mb={0.5}
									color="#000000"
								>
									Total Slots
								</Typography>
								<Controller
									name="totalSlots"
									control={control}
									render={({ field }) => (
										<CustomTextField
											{...field}
											fullWidth
											placeholder="Enter Total Slots"
											size="small"
											sx={{ marginTop: 1 }}
											type="number"
											error={!!errors.totalSlots}
											helperText={
												errors.totalSlots
													? errors.totalSlots.message
													: ""
											}
											{...register("totalSlots", {
												required:
													"Total Slots are required",
												min: {
													value: 1,
													message:
														"At least 1 slot is required",
												},
											})}
										/>
									)}
								/>
							</Box>
						</Box>

						{/* Vehicle Brand Selection with Checkboxes */}
						<Box sx={{ display: "flex", gap: 2 }}>
							<Box
								sx={{
									display: "flex",
									flexDirection: "column",
									width: "100%",
								}}
							>
								<Typography
									variant="body2"
									fontWeight={500}
									color="#000000"
								>
									Select Vehicle Brands
								</Typography>
								<FormControl fullWidth>
									{selectedBrands.length === 0 && (
										<InputLabel>Choose Brand</InputLabel>
									)}
									<Select
										multiple
										sx={{ marginTop: 1 }}
										value={selectedBrands}
										onChange={handleBrandChange}
										label="Choose Brands"
										renderValue={(selected) => {
											const selectedArray =
												selected as string[];
											const displayNames =
												selectedArray.slice(0, 1); // First 2 brand names
											const moreCount =
												selectedArray.length - 1; // Remaining brands

											return (
												<Box
													sx={{
														display: "flex",
														alignItems: "center",
														gap: 1,
													}}
												>
													{displayNames.map(
														(id, index) => {
															const brand =
																vehicleBrands.find(
																	(b) =>
																		b.id ===
																		id
																);
															return (
																<Typography
																	key={index}
																	variant="body2"
																	color="#454545"
																>
																	{brand
																		? brand.name
																		: ""}
																</Typography>
															);
														}
													)}
													{moreCount > 0 && (
														<Typography
															variant="body2"
															color="#454545"
														>
															+{moreCount} more
														</Typography>
													)}
												</Box>
											);
										}}
									>
										{vehicleBrands.length > 0 ? (
											vehicleBrands.map((brand) => (
												<MenuItem
													key={brand.id}
													value={brand.id}
												>
													<Checkbox
														checked={selectedBrands.includes(
															brand.id
														)}
													/>
													<ListItemText
														primary={brand.name}
													/>
												</MenuItem>
											))
										) : (
											<MenuItem disabled>
												No vehicle brands available
											</MenuItem>
										)}
									</Select>
								</FormControl>
							</Box>
							{/* </Box>
					<Box sx={{ display: "flex", gap: 2 }}> */}
							<Box
								sx={{
									display: "flex",
									flexDirection: "column",
									width: "100%",
								}}
							>
								<Typography
									variant="body2"
									fontWeight={500}
									color="#000000"
								>
									Vehicle Name
								</Typography>
								<FormControl fullWidth>
									{selectedVehicles.length === 0 && (
										<InputLabel>Choose Vehicles</InputLabel>
									)}
									<Select
										multiple
										sx={{ marginTop: 1 }}
										value={selectedVehicles}
										onChange={handleCheckboxChange}
										renderValue={(selected) => {
											const selectedArray =
												selected as string[];
											const displayNames =
												selectedArray.slice(0, 1); // First 2 names
											const moreCount =
												selectedArray.length - 1; // Count of remaining items

											return (
												<Box
													sx={{
														display: "flex",
														alignItems: "center",
														gap: 1,
													}}
												>
													{displayNames.map(
														(name, index) => (
															<Typography
																key={index}
																variant="body2"
																color="#454545"
															>
																{name}
															</Typography>
														)
													)}
													{moreCount > 0 && (
														<Typography
															variant="body2"
															color="#454545"
														>
															+{moreCount} more
														</Typography>
													)}
												</Box>
											);
										}}
									>
										{filteredVehicles.length > 0 ? (
											filteredVehicles.map((vehicle) => (
												<MenuItem
													key={vehicle.id}
													value={vehicle.name}
												>
													<Checkbox
														checked={selectedVehicles.includes(
															vehicle.name
														)}
													/>
													<ListItemText
														primary={vehicle.name}
													/>
												</MenuItem>
											))
										) : (
											<MenuItem disabled>
												No vehicles available for this
												brand
											</MenuItem>
										)}
									</Select>

									<FormHelperText>
										{errors.allowedCarIds
											? errors.allowedCarIds.message
											: ""}
									</FormHelperText>
								</FormControl>
							</Box>
						</Box>
					</Box>

					{/* Submit Button */}
					<Box
						sx={{
							display: "flex",
							justifyContent: "flex-end",
							mt: 3,
						}}
					>
						<Button
							type="submit"
							sx={{
								backgroundColor: "#000000",
								color: "#D0E1E9",
								borderRadius: "8px",
								fontSize: "16px",
								width: "150px",
								"&:hover": { backgroundColor: "#454545" },
							}}
						>
							Update Station
						</Button>
					</Box>
				</Box>
			</Box>
		</Modal>
	);
};

export default EditStationModal;
