import useStats from "@/hooks/useStats";
import {EMPLOYMENT_STATUS, User} from "@/interfaces/user";
import {groupBySession, averageScore} from "@/utils/stats";
import {RadioGroup} from "@headlessui/react";
import axios from "axios";
import clsx from "clsx";
import moment from "moment";
import {Divider} from "primereact/divider";
import {useState} from "react";
import ReactDatePicker from "react-datepicker";
import {BsFileEarmarkText, BsPencil, BsStar} from "react-icons/bs";
import {toast} from "react-toastify";
import Button from "./Low/Button";
import Checkbox from "./Low/Checkbox";
import CountrySelect from "./Low/CountrySelect";
import Input from "./Low/Input";
import ProfileSummary from "./ProfileSummary";

const expirationDateColor = (date: Date) => {
	const momentDate = moment(date);
	const today = moment(new Date());

	if (today.add(1, "days").isAfter(momentDate)) return "!bg-mti-red-ultralight border-mti-red-light";
	if (today.add(3, "days").isAfter(momentDate)) return "!bg-mti-rose-ultralight border-mti-rose-light";
	if (today.add(7, "days").isAfter(momentDate)) return "!bg-mti-orange-ultralight border-mti-orange-light";
};

interface Props {
	user: User;
	onClose: (reload?: boolean) => void;
	onViewStudents?: () => void;
	onViewTeachers?: () => void;
}

const UserCard = ({user, onClose, onViewStudents, onViewTeachers}: Props) => {
	const [expiryDate, setExpiryDate] = useState<Date | null | undefined>(user.subscriptionExpirationDate);
	const {stats} = useStats(user.id);

	const updateUser = () => {
		if (!confirm(`Are you sure you want to update ${user.name}'s account?`)) return;

		axios
			.post<{user?: User; ok?: boolean}>(`/api/users/update?id=${user.id}`, {...user, subscriptionExpirationDate: expiryDate})
			.then(() => {
				toast.success("User updated successfully!");
				onClose(true);
			})
			.catch(() => {
				toast.error("Something went wrong!", {toastId: "update-error"});
			});
	};

	return (
		<>
			<ProfileSummary
				user={user}
				items={[
					{
						icon: <BsFileEarmarkText className="w-6 h-6 md:w-8 md:h-8 text-mti-red-light" />,
						value: Object.keys(groupBySession(stats)).length,
						label: "Exams",
					},
					{
						icon: <BsPencil className="w-6 h-6 md:w-8 md:h-8 text-mti-red-light" />,
						value: stats.length,
						label: "Exercises",
					},
					{
						icon: <BsStar className="w-6 h-6 md:w-8 md:h-8 text-mti-red-light" />,
						value: `${stats.length > 0 ? averageScore(stats) : 0}%`,
						label: "Average Score",
					},
				]}
			/>

			<section className="flex flex-col gap-4 justify-between">
				<div className="flex flex-col md:flex-row gap-8 w-full">
					<Input
						label="Name"
						type="text"
						name="name"
						onChange={() => null}
						placeholder="Enter your name"
						defaultValue={user.name}
						disabled
					/>
					<Input
						label="E-mail Address"
						type="email"
						name="email"
						onChange={() => null}
						placeholder="Enter email address"
						defaultValue={user.email}
						disabled
					/>
				</div>

				<div className="flex flex-col md:flex-row gap-8 w-full">
					<div className="flex flex-col gap-3 w-full">
						<label className="font-normal text-base text-mti-gray-dim">Country</label>
						<CountrySelect disabled value={user.demographicInformation?.country} />
					</div>
					<Input
						type="tel"
						name="phone"
						label="Phone number"
						onChange={() => null}
						placeholder="Enter phone number"
						defaultValue={user.demographicInformation?.phone}
						disabled
					/>
				</div>

				<div className="flex flex-col md:flex-row gap-8 w-full">
					<div className="relative flex flex-col gap-3 w-full">
						<label className="font-normal text-base text-mti-gray-dim">Employment Status</label>
						<RadioGroup
							value={user.demographicInformation?.employment}
							className="grid grid-cols-2 items-center gap-4 place-items-center">
							{EMPLOYMENT_STATUS.map(({status, label}) => (
								<RadioGroup.Option value={status} key={status}>
									{({checked}) => (
										<span
											className={clsx(
												"px-6 py-4 w-40 md:w-48 flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
												"transition duration-300 ease-in-out",
												!checked
													? "bg-white border-mti-gray-platinum"
													: "bg-mti-purple-light border-mti-purple-dark text-white",
											)}>
											{label}
										</span>
									)}
								</RadioGroup.Option>
							))}
						</RadioGroup>
					</div>
					<div className="flex flex-col gap-8 w-full">
						<div className="relative flex flex-col gap-3 w-full">
							<label className="font-normal text-base text-mti-gray-dim">Gender</label>
							<RadioGroup value={user.demographicInformation?.gender} className="flex flex-row gap-4 justify-between">
								<RadioGroup.Option value="male">
									{({checked}) => (
										<span
											className={clsx(
												"px-6 py-4 w-28 flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
												"transition duration-300 ease-in-out",
												!checked
													? "bg-white border-mti-gray-platinum"
													: "bg-mti-purple-light border-mti-purple-dark text-white",
											)}>
											Male
										</span>
									)}
								</RadioGroup.Option>
								<RadioGroup.Option value="female">
									{({checked}) => (
										<span
											className={clsx(
												"px-6 py-4 w-28 flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
												"transition duration-300 ease-in-out",
												!checked
													? "bg-white border-mti-gray-platinum"
													: "bg-mti-purple-light border-mti-purple-dark text-white",
											)}>
											Female
										</span>
									)}
								</RadioGroup.Option>
								<RadioGroup.Option value="other">
									{({checked}) => (
										<span
											className={clsx(
												"px-6 py-4 w-28 flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
												"transition duration-300 ease-in-out",
												!checked
													? "bg-white border-mti-gray-platinum"
													: "bg-mti-purple-light border-mti-purple-dark text-white",
											)}>
											Other
										</span>
									)}
								</RadioGroup.Option>
							</RadioGroup>
						</div>
						<div className="flex flex-col gap-3">
							<div className="flex justify-between items-center">
								<label className="font-normal text-base text-mti-gray-dim">Expiry Date</label>
								<Checkbox
									isChecked={!!expiryDate}
									onChange={(checked) => setExpiryDate(checked ? user.subscriptionExpirationDate || new Date() : undefined)}>
									Enabled
								</Checkbox>
							</div>
							{!expiryDate && (
								<div
									className={clsx(
										"p-6 w-full flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
										"transition duration-300 ease-in-out",
										!expiryDate ? "!bg-mti-green-ultralight !border-mti-green-light" : expirationDateColor(expiryDate),
										"bg-white border-mti-gray-platinum",
									)}>
									{!expiryDate && "Unlimited"}
									{expiryDate && moment(expiryDate).format("DD/MM/YYYY")}
								</div>
							)}
							{expiryDate && (
								<ReactDatePicker
									className={clsx(
										"p-6 w-full min-h-[70px] flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
										"hover:border-mti-purple tooltip",
										expirationDateColor(expiryDate),
										"transition duration-300 ease-in-out",
									)}
									filterDate={(date) => moment(date).isAfter(new Date())}
									dateFormat="dd/MM/yyyy"
									selected={moment(expiryDate).toDate()}
									onChange={(date) => setExpiryDate(date)}
								/>
							)}
						</div>
					</div>
				</div>
				{user.corporateInformation && (
					<>
						<Divider className="w-full" />
						<div className="flex flex-col md:flex-row gap-8 w-full">
							<Input
								label="Company Name"
								type="text"
								name="companyName"
								onChange={() => null}
								placeholder="Enter company name"
								defaultValue={user.corporateInformation.companyInformation.name}
								disabled
							/>
							<Input
								label="Amount of Users"
								type="number"
								name="userAmount"
								onChange={() => null}
								placeholder="Enter amount of users"
								defaultValue={user.corporateInformation.companyInformation.userAmount}
								disabled
							/>
						</div>
					</>
				)}
			</section>

			<div className="flex gap-4 justify-between mt-4 w-full">
				<div className="self-start flex gap-4 justify-start items-center w-full">
					{onViewStudents && (
						<Button className="w-full max-w-[200px]" variant="outline" color="rose" onClick={onViewStudents}>
							View Students
						</Button>
					)}
					{onViewTeachers && (
						<Button className="w-full max-w-[200px]" variant="outline" color="rose" onClick={onViewTeachers}>
							View Teachers
						</Button>
					)}
				</div>
				<div className="self-end flex gap-4 w-full justify-end">
					<Button className="w-full max-w-[200px]" variant="outline" onClick={onClose}>
						Close
					</Button>
					<Button onClick={updateUser} className="w-full max-w-[200px]">
						Update
					</Button>
				</div>
			</div>
		</>
	);
};

export default UserCard;