tremor-tracker/src/app/profile/page.tsx

"use client";
import { useStoreState } from "@hooks/store";
import axios, { AxiosError } from "axios";
import { useRouter } from "next/navigation";
import { useEffect, useState, useRef } from "react";
import { FaUser } from "react-icons/fa6";
import { User } from "@appTypes/Prisma";
import { useStoreActions } from "@hooks/store";

function CustomRoleDropdown({
	value,
	onChange,
	disabled,
}: {
	value: string;
	onChange: (role: string) => void;
	disabled: boolean;
}) {
	const [isOpen, setIsOpen] = useState(false);
	const dropdownRef = useRef<HTMLDivElement>(null);
	const roles = ["ADMIN", "SCIENTIST", "GUEST"] as const;

	useEffect(() => {
		function handleClickOutside(event: MouseEvent) {
			if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
				setIsOpen(false);
			}
		}
		document.addEventListener("mousedown", handleClickOutside);
		return () => document.removeEventListener("mousedown", handleClickOutside);
	}, []);

	return (
		<div className="relative" ref={dropdownRef}>
			<button
				type="button"
				className={`w-full p-2 border border-neutral-300 rounded-md text-left text-sm bg-white ${
					disabled ? "opacity-50 cursor-not-allowed" : "hover:bg-neutral-100"
				}`}
				onClick={() => !disabled && setIsOpen(!isOpen)}
				disabled={disabled}
			>
				{value || "Select a role"}
			</button>
			{isOpen && (
				<div className="absolute top-full mt-1 w-40 bg-white border border-neutral-300 rounded-lg overflow-hidden shadow-lg z-40">
					<ul>
						{roles.map((role) => (
							<li key={role}>
								<button
									className={`block w-full text-left px-4 py-2 text-sm hover:bg-neutral-100 ${
										value === role ? "bg-neutral-100" : ""
									}`}
									onClick={() => {
										onChange(role);
										setIsOpen(false);
									}}
								>
									{role}
								</button>
							</li>
						))}
					</ul>
				</div>
			)}
		</div>
	);
}

export default function Profile() {
	const router = useRouter();
	const user = useStoreState((state) => state.user);
	const setUser = useStoreActions((actions) => actions.setUser);
	const [activeTab, setActiveTab] = useState<"profile" | "orders" | "account">("profile");

	async function handleLogout() {
		try {
			const res = await axios.get("/api/logout");
			if (res.status === 200) {
				setUser(null);
				router.push("/");
			}
		} catch (error) {
			const axiosError = error as AxiosError<{ message: string }>;
			if (axiosError.response && axiosError.response.status === 400) {
				setUser(null);
				router.push("/");
			}
		}
	}

	useEffect(() => {
		!user && router.push("/");
	}, []);

	function ProfileTab() {
		if (!user) return <p className="text-neutral-600">No user data available</p>;

		const isScientistOrAdmin = user.role === "SCIENTIST" || user.role === "ADMIN";

		const stats = [
			...(isScientistOrAdmin
				? [
						{ label: "Earthquakes Logged", value: user.earthquakes.length },
						{ label: "Observatories Logged", value: user.observatories.length },
						{ label: "Artefacts Logged", value: user.artefacts.length },
				  ]
				: []),
			{ label: "Orders Placed", value: user.purchasedOrders.length },
		];

		return (
			<div className="bg-neutral-100 rounded-md border border-neutral-200 p-8">
				<div className="flex justify-between items-center mb-6">
					<h3 className="text-xl font-semibold text-neutral-800">Profile Overview</h3>
					{user.role !== "GUEST" && <p className="text-sm text-neutral-600">{user.role}</p>}
				</div>
				<div className="space-y-6">
					<p>User since {new Date(user.createdAt).toLocaleDateString("en-GB")}</p>
					<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
						{stats.map((stat) => (
							<div key={stat.label} className="bg-white border border-neutral-200 rounded-md p-4 text-center shadow-sm">
								<p className="text-xs text-neutral-600">{stat.label}</p>
								<p className="text-lg font-semibold text-neutral-800">{stat.value}</p>
							</div>
						))}
					</div>
					{user.scientist && (
						<div className="mt-4 border-t pt-4">
							<h4 className="font-semibold text-neutral-700 mb-4">Scientist Details</h4>
							<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
								<div className="bg-white border border-neutral-200 rounded-md p-4 text-center shadow-sm">
									<p className="text-sm text-neutral-600">Level</p>
									<p className="text-lg font-semibold text-neutral-800">{user.scientist.level}</p>
								</div>
								<div className="bg-white border border-neutral-200 rounded-md p-4 text-center shadow-sm">
									<p className="text-sm text-neutral-600">Superior</p>
									<p className="text-lg font-semibold text-neutral-800">{user.scientist.superior?.name || "None"}</p>
								</div>
								<div className="bg-white border border-neutral-200 rounded-md p-4 text-center shadow-sm">
									<p className="text-sm text-neutral-600">Subordinates</p>
									<p className="text-lg font-semibold text-neutral-800">{user.scientist.subordinates.length}</p>
								</div>
							</div>
						</div>
					)}
				</div>
			</div>
		);
	}

	function OrdersTab() {
		return (
			<div className="bg-neutral-100 rounded-md border border-neutral-200 p-8">
				<h3 className="text-xl font-semibold text-neutral-800 mb-6">Previous Orders</h3>
				{user!.purchasedOrders.length === 0 ? (
					<p className="text-neutral-600">No previous orders.</p>
				) : (
					<ul className="space-y-2">
						{user!.purchasedOrders.map((order) => (
							<li key={order.id} className="text-neutral-700">
								Order #{order.id}
							</li>
						))}
					</ul>
				)}
			</div>
		);
	}

	function AccountTab() {
		const [name, setName] = useState("");
		const [email, setEmail] = useState("");
		const [password, setPassword] = useState("");
		const [confirmPassword, setConfirmPassword] = useState("");
		const [requestedRole, setRequestedRole] = useState("");
		const [isSubmitting, setIsSubmitting] = useState(false);
		const [isDeleting, setIsDeleting] = useState(false);
		const [error, setError] = useState("");
		const [successMessage, setSuccessMessage] = useState("");
		const router = useRouter();

		useEffect(() => {
			if (user) {
				setName(user.name);
				setEmail(user.email);
			}
		}, [user]);

		async function handleSave() {
			setError("");
			setSuccessMessage("");
			if (!name || !email) {
				setError("Name and email are required.");
				return;
			}
			if (password && password !== confirmPassword) {
				setError("Passwords do not match.");
				return;
			}
			setIsSubmitting(true);
			try {
				const res = await axios.post(
					"/api/update-user",
					{ name, email, password, requestedRole },
					{ headers: { "Content-Type": "application/json" } }
				);
				if (res.status === 200) {
					setUser(res.data.user);
					setSuccessMessage("Account updated successfully.");
					if (requestedRole) {
						setSuccessMessage("Account updated and role change request submitted.");
						setRequestedRole("");
					}
				} else {
					setError("Unexpected error occurred");
				}
			} catch (error) {
				const axiosError = error as AxiosError<{ message: string }>;
				setError(axiosError.response?.data?.message || "Network error occurred");
			} finally {
				setIsSubmitting(false);
			}
		}

		async function handleDeleteAccount() {
			if (!confirm("Are you sure you want to delete your account? This action cannot be undone.")) {
				return;
			}
			setIsDeleting(true);
			try {
				const res = await axios.post(
					"/api/delete-user",
					{ userId: user!.id },
					{ headers: { "Content-Type": "application/json" } }
				);
				if (res.status === 200) {
					setUser(null);
					router.push("/");
				} else {
					setError("Failed to delete account");
				}
			} catch (error) {
				setError("Error deleting account");
			} finally {
				setIsDeleting(false);
			}
		}

		function handleClear() {
			setName(user?.name || "");
			setEmail(user?.email || "");
			setPassword("");
			setConfirmPassword("");
			setRequestedRole("");
			setError("");
			setSuccessMessage("");
		}

		return (
			<div className="bg-neutral-100 rounded-md border border-neutral-200 p-8">
				<h3 className="text-xl font-semibold text-neutral-800 mb-6">Account Settings</h3>
				{successMessage && <p className="text-green-600 text-sm mb-4">{successMessage}</p>}
				{error && <p className="text-red-600 text-sm mb-4">{error}</p>}
				<div className="space-y-8">
					<div className="space-y-4 mx-auto max-w-md">
						<div>
							<label className="text-sm text-neutral-600 block mb-1">Name</label>
							<input
								type="text"
								value={name}
								onChange={(e) => setName(e.target.value)}
								className="w-full p-2 border border-neutral-300 rounded-md focus:ring-2 focus:ring-blue-500 text-sm"
								disabled={isSubmitting}
							/>
						</div>
						<div>
							<label className="text-sm text-neutral-600 block mb-1">Email</label>
							<input
								type="email"
								value={email}
								onChange={(e) => setEmail(e.target.value)}
								className="w-full p-2 border border-neutral-300 rounded-md focus:ring-2 focus:ring-blue-500 text-sm"
								disabled={isSubmitting}
							/>
						</div>
						<div>
							<label className="text-sm text-neutral-600 block mb-1">New Password</label>
							<input
								type="password"
								value={password}
								onChange={(e) => setPassword(e.target.value)}
								className="w-full p-2 border border-neutral-300 rounded-md focus:ring-2 focus:ring-blue-500 text-sm"
								disabled={isSubmitting}
							/>
						</div>
						<div>
							<label className="text-sm text-neutral-600 block mb-1">Confirm Password</label>
							<input
								type="password"
								value={confirmPassword}
								onChange={(e) => setConfirmPassword(e.target.value)}
								className="w-full p-2 border border-neutral-300 rounded-md focus:ring-2 focus:ring-blue-500 text-sm"
								disabled={isSubmitting}
							/>
						</div>
						<div>
							<label className="text-sm text-neutral-600 block mb-1">Request Role Change</label>
							<CustomRoleDropdown value={requestedRole} onChange={setRequestedRole} disabled={isSubmitting} />
						</div>
					</div>
					<div className="flex justify-end gap-4">
						<button
							onClick={handleClear}
							className={`py-2 px-4 bg-neutral-300 text-neutral-800 rounded-md hover:bg-neutral-400 font-medium ${
								isSubmitting ? "opacity-50 cursor-not-allowed" : ""
							}`}
							disabled={isSubmitting}
						>
							Clear Changes
						</button>
						<button
							onClick={handleSave}
							className={`py-2 px-4 bg-blue-600 text-white rounded-md font-medium ${
								isSubmitting ? "opacity-50 cursor-not-allowed" : "hover:bg-blue-700"
							}`}
							disabled={isSubmitting}
						>
							{isSubmitting ? "Saving..." : "Save Changes"}
						</button>
					</div>
					<div className="border-t border-neutral-300 pt-6">
						<button
							onClick={handleDeleteAccount}
							className={`w-40 py-2 px-4 bg-red-500 text-white rounded-md font-medium ${
								isDeleting ? "opacity-50 cursor-not-allowed" : "hover:bg-red-700"
							}`}
							disabled={isDeleting}
						>
							{isDeleting ? "Deleting..." : "Delete Account"}
						</button>
					</div>
				</div>
			</div>
		);
	}

	return (
		<div className="relative min-h-full bg-neutral-50">
			<div className="absolute top-4 right-4">
				<button
					onClick={handleLogout}
					className="py-2 px-4 bg-red-500 text-white rounded-md hover:bg-red-700"
					aria-label="Log out"
					title="Log out"
				>
					Log Out
				</button>
			</div>
			<div className="flex items-center justify-center min-h-full">
				<div className="max-w-4xl mx-auto flex flex-col p-4 mt-20">
					<h2 className="text-3xl font-semibold text-neutral-800 mb-10">Hello {user?.name}</h2>
					<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
						<div className="col-span-1">
							<div className="space-y-2">
								<button
									onClick={() => setActiveTab("profile")}
									className={`w-full text-left p-2 rounded-md ${
										activeTab === "profile" ? "bg-blue-100 text-blue-700" : "text-neutral-600 hover:bg-neutral-200"
									}`}
								>
									Profile
								</button>
								<button
									onClick={() => setActiveTab("orders")}
									className={`w-full text-left p-2 rounded-md ${
										activeTab === "orders" ? "bg-blue-100 text-blue-700" : "text-neutral-600 hover:bg-neutral-200"
									}`}
								>
									Orders
								</button>
								<button
									onClick={() => setActiveTab("account")}
									className={`w-full text-left p-2 rounded-md ${
										activeTab === "account" ? "bg-blue-100 text-blue-700" : "text-neutral-600 hover:bg-neutral-200"
									}`}
								>
									Account
								</button>
							</div>
						</div>
						<div className="col-span-3">
							{activeTab === "profile" && <ProfileTab />}
							{activeTab === "orders" && <OrdersTab />}
							{activeTab === "account" && <AccountTab />}
						</div>
					</div>
				</div>
			</div>
		</div>
	);
}