import useStats from "@/hooks/useStats";
import {CorporateInformation, CorporateUser, 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 {useEffect, useState} from "react";
import ReactDatePicker from "react-datepicker";
import {BsFileEarmarkText, BsPencil, BsPerson, BsPersonAdd, 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";
import Select from "react-select";
import useUsers from "@/hooks/useUsers";
import {USER_TYPE_LABELS} from "@/resources/user";
import {CURRENCIES} from "@/resources/paypal";
import useCodes from "@/hooks/useCodes";

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;
	loggedInUser: User;
	onClose: (reload?: boolean) => void;
	onViewStudents?: () => void;
	onViewTeachers?: () => void;
	onViewCorporate?: () => void;
	disabled?: boolean;
	disabledFields?: {
		countryManager?: boolean;
	};
}

const USER_STATUS_OPTIONS = [
	{
		value: "active",
		label: "Active",
	},
	{
		value: "disabled",
		label: "Disabled",
	},
	{
		value: "paymentDue",
		label: "Payment Due",
	},
];

const USER_TYPE_OPTIONS = Object.keys(USER_TYPE_LABELS).map((type) => ({
	value: type,
	label: USER_TYPE_LABELS[type as keyof typeof USER_TYPE_LABELS],
}));

const CURRENCIES_OPTIONS = CURRENCIES.map(({label, currency}) => ({
	value: currency,
	label,
}));

const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers, onViewCorporate, disabled = false, disabledFields = {}}: Props) => {
	const [expiryDate, setExpiryDate] = useState<Date | null | undefined>(user.subscriptionExpirationDate);
	const [type, setType] = useState(user.type);
	const [status, setStatus] = useState(user.status);
	const [referralAgentLabel, setReferralAgentLabel] = useState<string>();
	const [position, setPosition] = useState<string | undefined>(user.type === "corporate" ? user.demographicInformation?.position : undefined);
	const [passport_id, setPassportID] = useState<string | undefined>(user.type === "student" ? user.demographicInformation?.passport_id : undefined);

	const [referralAgent, setReferralAgent] = useState(user.type === "corporate" ? user.corporateInformation?.referralAgent : undefined);
	const [companyName, setCompanyName] = useState(
		user.type === "corporate"
			? user.corporateInformation?.companyInformation.name
			: user.type === "agent"
			? user.agentInformation?.companyName
			: undefined,
	);
	const [arabName, setArabName] = useState(user.type === "agent" ? user.agentInformation?.companyArabName : undefined);
	const [commercialRegistration, setCommercialRegistration] = useState(
		user.type === "agent" ? user.agentInformation?.commercialRegistration : undefined,
	);
	const [userAmount, setUserAmount] = useState(user.type === "corporate" ? user.corporateInformation?.companyInformation.userAmount : undefined);
	const [paymentValue, setPaymentValue] = useState(user.type === "corporate" ? user.corporateInformation?.payment?.value : undefined);
	const [paymentCurrency, setPaymentCurrency] = useState(user.type === "corporate" ? user.corporateInformation?.payment?.currency : "EUR");
	const [monthlyDuration, setMonthlyDuration] = useState(user.type === "corporate" ? user.corporateInformation?.monthlyDuration : undefined);
	const [commissionValue, setCommission] = useState(user.type === "corporate" ? user.corporateInformation?.payment?.commission : undefined);
	const {stats} = useStats(user.id);
	const {users} = useUsers();
	const {codes} = useCodes(user.id);

	useEffect(() => {
		if (users && users.length > 0) {
			if (!referralAgent) {
				setReferralAgentLabel("No manager");
				return;
			}

			const agent = users.find((x) => x.id === referralAgent);
			setReferralAgentLabel(`${agent?.name} - ${agent?.email}`);
		}
	}, [users, referralAgent]);

	const updateUser = () => {
		if (user.type === "corporate" && (!paymentValue || paymentValue < 0))
			return toast.error("Please set a price for the user's package before updating!");
		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,
				type,
				status,
				agentInformation:
					type === "agent"
						? {
								companyName,
								commercialRegistration,
								arabName,
						  }
						: undefined,
				corporateInformation:
					type === "corporate"
						? {
								referralAgent,
								monthlyDuration,
								companyInformation: {
									name: companyName,
									userAmount,
								},
								payment: {
									value: paymentValue,
									currency: paymentCurrency,
									...(referralAgent === "" ? {} : {commission: commissionValue}),
								},
						  }
						: undefined,
			})
			.then(() => {
				toast.success("User updated successfully!");
				onClose(true);
			})
			.catch(() => {
				toast.error("Something went wrong!", {toastId: "update-error"});
			});
	};

	const generalProfileItems = [
		{
			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: "Modules",
		},
		{
			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",
		},
	];

	const corporateProfileItems =
		user.type === "corporate"
			? [
					{
						icon: <BsPerson className="w-6 h-6 md:w-8 md:h-8 text-mti-red-light" />,
						value: codes.length,
						label: "Users Used",
					},
					{
						icon: <BsPersonAdd className="w-6 h-6 md:w-8 md:h-8 text-mti-red-light" />,
						value: user.corporateInformation.companyInformation.userAmount,
						label: "Number of Users",
					},
			  ]
			: [];

	return (
		<>
			<ProfileSummary user={user} items={user.type === "corporate" ? corporateProfileItems : generalProfileItems} />

			{user.type === "agent" && (
				<>
					<div className="grid grid-cols-1 md:grid-cols-3 gap-8 w-full">
						<Input
							label="Company Name (Arabic)"
							type="text"
							name="arabName"
							onChange={setArabName}
							placeholder="Enter their company's name in arabic"
							defaultValue={arabName}
							required
							disabled={disabled}
						/>
						<Input
							label="Company Name (English)"
							type="text"
							name="companyName"
							onChange={setCompanyName}
							placeholder="Enter their company's name in english"
							defaultValue={companyName}
							required
							disabled={disabled}
						/>
						<Input
							label="Commercial Registration"
							type="text"
							name="commercialRegistration"
							onChange={setCommercialRegistration}
							placeholder="Enter commercial registration"
							defaultValue={commercialRegistration}
							required
							disabled={disabled}
						/>
					</div>
					<Divider className="w-full !m-0" />
				</>
			)}
			{user.type === "corporate" && (
				<>
					<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 w-full">
						<Input
							label="Corporate Name"
							type="text"
							name="companyName"
							onChange={setCompanyName}
							placeholder="Enter corporate name"
							defaultValue={companyName}
							disabled={disabled}
						/>
						<Input
							label="Number of Users"
							type="number"
							name="userAmount"
							onChange={(e) => setUserAmount(e ? parseInt(e) : undefined)}
							placeholder="Enter number of users"
							defaultValue={userAmount}
							disabled={disabled}
						/>
						<Input
							label="Monthly Duration"
							type="number"
							name="monthlyDuration"
							onChange={(e) => setMonthlyDuration(e ? parseInt(e) : undefined)}
							placeholder="Enter monthly duration"
							defaultValue={monthlyDuration}
							disabled={disabled}
						/>
						<div className="flex flex-col gap-3 w-full lg:col-span-3">
							<label className="font-normal text-base text-mti-gray-dim">Pricing</label>
							<div className="w-full grid grid-cols-6 gap-2">
								<Input
									name="paymentValue"
									onChange={(e) => setPaymentValue(e ? parseInt(e) : undefined)}
									type="number"
									defaultValue={paymentValue || 0}
									className="col-span-3"
									disabled={disabled}
								/>
								<Select
									className={clsx(
										"px-4 py-4 col-span-3 w-full text-sm font-normal placeholder:text-mti-gray-cool bg-white rounded-full border border-mti-gray-platinum focus:outline-none",
										disabled && "!bg-mti-gray-platinum/40 !text-mti-gray-dim cursor-not-allowed",
									)}
									options={CURRENCIES_OPTIONS}
									value={CURRENCIES_OPTIONS.find((c) => c.value === paymentCurrency)}
									onChange={(value) => setPaymentCurrency(value?.value)}
									menuPortalTarget={document?.body}
									styles={{
										menuPortal: (base) => ({...base, zIndex: 9999}),
										control: (styles) => ({
											...styles,
											paddingLeft: "4px",
											border: "none",
											outline: "none",
											":focus": {
												outline: "none",
											},
										}),
										option: (styles, state) => ({
											...styles,
											backgroundColor: state.isFocused ? "#D5D9F0" : state.isSelected ? "#7872BF" : "white",
											color: state.isFocused ? "black" : styles.color,
										}),
									}}
									isDisabled={disabled}
								/>
							</div>
						</div>
					</div>
					<div className="flex gap-3 w-full">
						<div className="flex flex-col gap-3 w-8/12">
							<label className="font-normal text-base text-mti-gray-dim">Country Manager</label>
							{referralAgentLabel && (
								<Select
									className={clsx(
										"px-4 py-4 w-full text-sm font-normal placeholder:text-mti-gray-cool bg-white rounded-full border border-mti-gray-platinum focus:outline-none",
										(!["developer", "admin"].includes(loggedInUser.type) || disabledFields.countryManager) &&
											"!bg-mti-gray-platinum/40 !text-mti-gray-dim cursor-not-allowed",
									)}
									options={[
										{value: "", label: "No referral"},
										...users
											.filter((u) => u.type === "agent")
											.map((x) => ({
												value: x.id,
												label: `${x.name} - ${x.email}`,
											})),
									]}
									defaultValue={{
										value: referralAgent,
										label: referralAgentLabel,
									}}
									menuPortalTarget={document?.body}
									onChange={(value) => setReferralAgent(value?.value)}
									styles={{
										menuPortal: (base) => ({...base, zIndex: 9999}),
										control: (styles) => ({
											...styles,
											paddingLeft: "4px",
											border: "none",
											outline: "none",
											":focus": {
												outline: "none",
											},
										}),
										option: (styles, state) => ({
											...styles,
											backgroundColor: state.isFocused ? "#D5D9F0" : state.isSelected ? "#7872BF" : "white",
											color: state.isFocused ? "black" : styles.color,
										}),
									}}
									// editing country manager should only be available for dev/admin
									isDisabled={!["developer", "admin"].includes(loggedInUser.type) || disabledFields.countryManager}
								/>
							)}
						</div>
						<div className="flex flex-col gap-3 w-4/12">
							{referralAgent !== "" && loggedInUser.type !== "corporate" ? (
								<>
									<label className="font-normal text-base text-mti-gray-dim">Commission</label>
									<Input
										name="commissionValue"
										onChange={(e) => setCommission(e ? parseInt(e) : undefined)}
										type="number"
										defaultValue={commissionValue || 0}
										className="col-span-3"
										disabled={disabled || loggedInUser.type === "agent"}
									/>
								</>
							) : (
								<div />
							)}
						</div>
					</div>
					<Divider className="w-full !m-0" />
				</>
			)}
			<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>

				{user.type === "student" && (
					<Input
						type="text"
						name="passport_id"
						label="Passport/National ID"
						onChange={() => null}
						placeholder="Enter National ID or Passport number"
						value={user.type === "student" ? user.demographicInformation?.passport_id : undefined}
						disabled
						required
					/>
				)}

				<div className="flex flex-col md:flex-row gap-8 w-full">
					{user.type !== "corporate" && user.type !== 'mastercorporate' && (
						<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"
								disabled={disabled}>
								{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>
					)}
					{user.type === "corporate" && (
						<Input
							name="position"
							onChange={setPosition}
							type="text"
							label="Position"
							defaultValue={position}
							placeholder="CEO, Head of Marketing..."
							disabled
							required
						/>
					)}
					<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"
								disabled={disabled}>
								<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() : null)}
									disabled={disabled}>
									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()) &&
										(loggedInUser.subscriptionExpirationDate
											? moment(date).isBefore(moment(loggedInUser.subscriptionExpirationDate))
											: true)
									}
									dateFormat="dd/MM/yyyy"
									selected={moment(expiryDate).toDate()}
									onChange={(date) => setExpiryDate(date)}
									disabled={disabled}
								/>
							)}
						</div>
					</div>
				</div>
				{(loggedInUser.type === "developer" || loggedInUser.type === "admin") && (
					<>
						<Divider className="w-full !m-0" />
						<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">Status</label>
								<Select
									className="px-4 py-4 w-full text-sm font-normal placeholder:text-mti-gray-cool disabled:bg-mti-gray-platinum/40 disabled:text-mti-gray-dim disabled:cursor-not-allowed bg-white rounded-full border border-mti-gray-platinum focus:outline-none"
									options={USER_STATUS_OPTIONS}
									menuPortalTarget={document?.body}
									value={USER_STATUS_OPTIONS.find((o) => o.value === status)}
									onChange={(value) => setStatus(value?.value as typeof user.status)}
									styles={{
										control: (styles) => ({
											...styles,
											paddingLeft: "4px",
											border: "none",
											outline: "none",
											":focus": {
												outline: "none",
											},
										}),
										menuPortal: (base) => ({...base, zIndex: 9999}),
										option: (styles, state) => ({
											...styles,
											backgroundColor: state.isFocused ? "#D5D9F0" : state.isSelected ? "#7872BF" : "white",
											color: state.isFocused ? "black" : styles.color,
										}),
									}}
									isDisabled={disabled}
								/>
							</div>
							<div className="flex flex-col gap-3 w-full">
								<label className="font-normal text-base text-mti-gray-dim">Type</label>
								<Select
									className="px-4 py-4 w-full text-sm font-normal placeholder:text-mti-gray-cool disabled:bg-mti-gray-platinum/40 disabled:text-mti-gray-dim disabled:cursor-not-allowed bg-white rounded-full border border-mti-gray-platinum focus:outline-none"
									options={USER_TYPE_OPTIONS}
									menuPortalTarget={document?.body}
									value={USER_TYPE_OPTIONS.find((o) => o.value === type)}
									onChange={(value) => setType(value?.value as typeof user.type)}
									styles={{
										control: (styles) => ({
											...styles,
											paddingLeft: "4px",
											border: "none",
											outline: "none",
											":focus": {
												outline: "none",
											},
										}),
										menuPortal: (base) => ({...base, zIndex: 9999}),
										option: (styles, state) => ({
											...styles,
											backgroundColor: state.isFocused ? "#D5D9F0" : state.isSelected ? "#7872BF" : "white",
											color: state.isFocused ? "black" : styles.color,
										}),
									}}
									isDisabled={disabled}
								/>
							</div>
						</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">
					{onViewCorporate && ["student", "teacher"].includes(user.type) && (
						<Button className="w-full max-w-[200px]" variant="outline" color="rose" onClick={onViewCorporate}>
							View Corporate
						</Button>
					)}
					{onViewStudents && ["corporate", "teacher"].includes(user.type) && (
						<Button className="w-full max-w-[200px]" variant="outline" color="rose" onClick={onViewStudents}>
							View Students
						</Button>
					)}
					{onViewTeachers && ["student", "corporate"].includes(user.type) && (
						<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 disabled={disabled} onClick={updateUser} className="w-full max-w-[200px]">
						Update
					</Button>
				</div>
			</div>
		</>
	);
};

export default UserCard;