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

"use client";
import React, { useRef, useState } from 'react';

type Role = "ADMIN" | "GUEST" | "SCIENTIST";
const roleLabels: Record<Role, string> = {
	ADMIN: "Admin",
	GUEST: "Guest",
	SCIENTIST: "Scientist",
};
type User = {
	id: number;
	email: string;
	name: string;
	role: Role;
	password: string;
	createdAt: string;
};

// todo create api route to get users, with auth for only admin
// todo add management of only junior scientists if senior scientist
const initialUsers: User[] = [
	{ email: "john@example.com", name: "John Doe", role: "ADMIN", password: "secret1", createdAt: "2024-06-21T09:15:01Z", id: 1 },
	{ email: "jane@example.com", name: "Jane Smith", role: "GUEST", password: "secret2", createdAt: "2024-06-21T10:01:09Z", id: 2 },
	{
		email: "bob@example.com",
		name: "Bob Brown",
		role: "SCIENTIST",
		password: "secret3",
		createdAt: "2024-06-21T12:13:45Z",
		id: 3,
	},
	{
		email: "alice@example.com",
		name: "Alice Johnson",
		role: "GUEST",
		password: "secret4",
		createdAt: "2024-06-20T18:43:20Z",
		id: 4,
	},
	{ email: "eve@example.com", name: "Eve Black", role: "ADMIN", password: "secret5", createdAt: "2024-06-20T19:37:10Z", id: 5 },
	{ email: "dave@example.com", name: "Dave Clark", role: "GUEST", password: "pw", createdAt: "2024-06-19T08:39:10Z", id: 6 },
	{ email: "fred@example.com", name: "Fred Fox", role: "GUEST", password: "pw", createdAt: "2024-06-19T09:11:52Z", id: 7 },
	{ email: "ginny@example.com", name: "Ginny Hall", role: "SCIENTIST", password: "pw", createdAt: "2024-06-17T14:56:27Z", id: 8 },
	{ email: "harry@example.com", name: "Harry Lee", role: "ADMIN", password: "pw", createdAt: "2024-06-16T19:28:11Z", id: 9 },
	{ email: "ivy@example.com", name: "Ivy Volt", role: "ADMIN", password: "pw", createdAt: "2024-06-15T21:04:05Z", id: 10 },
	{ email: "kate@example.com", name: "Kate Moss", role: "SCIENTIST", password: "pw", createdAt: "2024-06-14T11:16:35Z", id: 11 },
	{ email: "leo@example.com", name: "Leo Garrison", role: "GUEST", password: "pw", createdAt: "2024-06-12T08:02:51Z", id: 12 },
	{ email: "isaac@example.com", name: "Isaac Yang", role: "GUEST", password: "pw", createdAt: "2024-06-12T15:43:29Z", id: 13 },
];
const sortFields = [
	// Sort box options
	{ label: "Name", value: "name" },
	{ label: "Email", value: "email" },
] as const;

type SortField = (typeof sortFields)[number]["value"];
type SortDir = "asc" | "desc";
const dirLabels: Record<SortDir, string> = { asc: "ascending", desc: "descending" };
const fieldLabels: Record<SortField, string> = { name: "Name", email: "Email" };

export default function AdminPage() {
	const [users, setUsers] = useState<User[]>(initialUsers);
	const [selectedEmail, setSelectedEmail] = useState<string | null>(null);

	// Local edit state for SCIENTIST form
	const [editUser, setEditUser] = useState<User | null>(null);
	// Reset editUser when the selected user changes
	React.useEffect(() => {
		if (!selectedEmail) setEditUser(null);
		else {
			const user = users.find((u) => u.email === selectedEmail);
			setEditUser(user ? { ...user } : null);
		}
	}, [selectedEmail, users]);

	// Search/filter/sort state
	const [searchField, setSearchField] = useState<"name" | "email">("name");
	const [searchText, setSearchText] = useState("");
	const [roleFilter, setRoleFilter] = useState<Role | "all">("all");
	const [sortField, setSortField] = useState<SortField>("name");
	const [sortDir, setSortDir] = useState<SortDir>("asc");
	// Dropdown states
	const [filterDropdownOpen, setFilterDropdownOpen] = useState(false);
	const [sortDropdownOpen, setSortDropdownOpen] = useState(false);
	const filterDropdownRef = useRef<HTMLDivElement>(null);
	const sortDropdownRef = useRef<HTMLDivElement>(null);

	React.useEffect(() => {
		const handleClick = (e: MouseEvent) => {
			if (filterDropdownRef.current && !filterDropdownRef.current.contains(e.target as Node)) setFilterDropdownOpen(false);
			if (sortDropdownRef.current && !sortDropdownRef.current.contains(e.target as Node)) setSortDropdownOpen(false);
		};
		document.addEventListener("mousedown", handleClick);
		return () => document.removeEventListener("mousedown", handleClick);
	}, []);

	// Filtering, searching, sorting logic
	const filteredUsers = users.filter((user) => roleFilter === "all" || user.role === roleFilter);
	const searchedUsers = filteredUsers.filter((user) => user[searchField].toLowerCase().includes(searchText.toLowerCase()));
	const sortedUsers = [...searchedUsers].sort((a, b) => {
		let cmp = a[sortField].localeCompare(b[sortField]);
		return sortDir === "asc" ? cmp : -cmp;
	});

	// Form input change handler
	const handleEditChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
		if (!editUser) return;
		const { name, value } = e.target;
		setEditUser((prev) => (prev ? { ...prev, [name]: value } : null));
	};

	// Update button logic (compare original selectedUser and editUser)
	const selectedUser = users.find((u) => u.email === selectedEmail);
	const isEditChanged = React.useMemo(() => {
		if (!editUser || !selectedUser) return false;
		// Compare primitive fields
		return (
			editUser.name !== selectedUser.name || editUser.role !== selectedUser.role || editUser.password !== selectedUser.password
		);
	}, [editUser, selectedUser]);

	// Update/save changes
	const handleUpdate = (e: React.FormEvent) => {
		e.preventDefault();
		if (!editUser) return;
		setUsers((prev) => prev.map((u) => (u.email === editUser.email ? { ...editUser } : u)));
		// todo create receiving api route
		// todo send to api route
		// After successful update, update selectedUser local state
		// (editUser will auto-sync due to useEffect on users)
	};

	// Delete user logic
	const handleDelete = () => {
		if (!selectedUser) return;
		if (!window.confirm(`Are you sure you want to delete "${selectedUser.name}"? This cannot be undone.`)) return;
		setUsers((prev) => prev.filter((u) => u.email !== selectedUser.email));
		setSelectedEmail(null);
		setEditUser(null);
	};

	const allRoles: Role[] = ["ADMIN", "GUEST", "SCIENTIST"];

	// Tooltip handling for email field
	const [showEmailTooltip, setShowEmailTooltip] = useState(false);

	return (
		<div className="flex flex-col h-full">
			<div className="flex h-full overflow-hidden bg-gray-50">
				{/* SIDEBAR */}
				<div className="w-80 h-full border-r border-neutral-200 bg-neutral-100 flex flex-col rounded-l-xl shadow-sm">
					<div className="p-4 flex flex-col h-full">
						{/* Search Bar */}
						<div className="mb-3 flex gap-2">
							<input
								className="flex-1 border rounded-lg px-2 py-1 text-sm"
								placeholder={`Search by ${searchField}`}
								value={searchText}
								onChange={(e) => setSearchText(e.target.value)}
							/>
							<button
								type="button"
								className="border rounded-lg px-2 py-1 text-sm bg-white hover:bg-neutral-100 transition font-semibold"
								style={{ width: "80px" }} // fixed width, adjust as needed
								onClick={() => setSearchField((field) => (field === "name" ? "email" : "name"))}
								title={`Switch to searching by ${searchField === "name" ? "Email" : "Name"}`}
							>
								{searchField === "name" ? "Email" : "Name"}
							</button>
						</div>
						{/* Filter and Sort Buttons */}
						<div className="flex gap-2 items-center mb-2">
							{/* Filter */}
							<div className="relative" ref={filterDropdownRef}>
								<button
									className={`px-3 py-1 rounded-lg border font-semibold flex items-center transition
                    ${
											roleFilter !== "all"
												? "bg-blue-600 text-white border-blue-600 hover:bg-blue-700"
												: "bg-white text-gray-700 border hover:bg-neutral-200"
										}
                  `}
									onClick={() => setFilterDropdownOpen((v) => !v)}
									type="button"
								>
									Filter{" "}
									<svg className="w-4 h-4 ml-1" fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24">
										<path strokeLinecap="round" strokeLinejoin="round" d="M19 9l-7 7-7-7" />
									</svg>
								</button>
								{filterDropdownOpen && (
									<div className="absolute z-10 mt-1 left-0 bg-white border rounded-lg shadow-sm w-28 py-1">
										<button
											onClick={() => {
												setRoleFilter("all");
												setFilterDropdownOpen(false);
											}}
											className={`w-full text-left px-3 py-1 hover:bg-blue-50 border-b border-gray-100 last:border-0
                        ${roleFilter === "all" ? "font-bold text-blue-600" : ""}`}
										>
											All
										</button>
										{allRoles.map((role) => (
											<button
												key={role}
												onClick={() => {
													setRoleFilter(role);
													setFilterDropdownOpen(false);
												}}
												className={`w-full text-left px-3 py-1 hover:bg-blue-50 border-b border-gray-100 last:border-0
                          ${roleFilter === role ? "font-bold text-blue-600" : ""}`}
											>
												{roleLabels[role]}
											</button>
										))}
									</div>
								)}
							</div>
							{/* Sort */}
							<div className="relative" ref={sortDropdownRef}>
								<button
									className="px-3 py-1 rounded-lg bg-white border text-gray-700 font-semibold flex items-center hover:bg-neutral-200"
									onClick={() => setSortDropdownOpen((v) => !v)}
									type="button"
								>
									Sort{" "}
									<svg className="w-4 h-4 ml-1" fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24">
										<path strokeLinecap="round" strokeLinejoin="round" d="M19 9l-7 7-7-7" />
									</svg>
								</button>
								{sortDropdownOpen && (
									<div className="absolute z-10 mt-1 left-0 bg-white border rounded-lg shadow-sm w-28 ">
										{sortFields.map((opt) => (
											<button
												key={opt.value}
												onClick={() => {
													setSortField(opt.value);
													setSortDropdownOpen(false);
												}}
												className={`w-full text-left px-3 py-2 hover:bg-blue-50 border-b border-gray-100 last:border-0
                          ${sortField === opt.value ? "font-bold text-blue-600" : ""}`}
											>
												{opt.label}
											</button>
										))}
									</div>
								)}
							</div>
							{/* Asc/Desc Toggle */}
							<button
								className="ml-2 px-2 py-1 rounded-lg bg-white border text-gray-700 font-semibold flex items-center hover:bg-neutral-200"
								onClick={() => setSortDir((d) => (d === "asc" ? "desc" : "asc"))}
								title={sortDir === "asc" ? "Ascending" : "Descending"}
								type="button"
							>
								{sortDir === "asc" ? "↑" : "↓"}
							</button>
						</div>
						{/* Sort status text */}
						<small className="text-xs text-gray-500 mb-2 px-1">
							Users sorted by {fieldLabels[sortField]} {dirLabels[sortDir]}
						</small>
						{/* USERS LIST: full height, scrollable */}
						<ul className="overflow-y-auto flex-1 pr-1">
							{sortedUsers.map((user) => (
								<li
									key={user.email}
									onClick={() => setSelectedEmail(user.email)}
									className={`rounded-lg cursor-pointer border
                    ${selectedEmail === user.email ? "bg-blue-100 border-blue-400" : "hover:bg-gray-200 border-transparent"}
                    transition px-2 py-1 mb-1`}
								>
									<div className="flex items-center justify-between">
										<span className="text-sm font-medium truncate">{user.name}</span>
										<span className="ml-1 text-xs px-2 py-0.5 rounded-lg bg-gray-200 text-gray-700">{roleLabels[user.role]}</span>
									</div>
									<div className="flex items-center justify-between mt-0.5">
										<span className="text-xs text-gray-600 truncate">{user.email}</span>
									</div>
								</li>
							))}
							{sortedUsers.length === 0 && <li className="text-gray-400 text-center py-6">No users found.</li>}
						</ul>
					</div>
				</div>
				{/* MAIN PANEL */}
				<div className="flex-1 p-24 bg-white overflow-y-auto">
					{editUser ? (
						<div className="max-w-lg mx-auto bg-white p-6 rounded-lg shadow">
							<h2 className="text-lg font-bold mb-6">Edit User</h2>
							<form className="space-y-4" onSubmit={handleUpdate}>
								<div className="flex items-center gap-2 mb-2">
									<label className="text-sm font-medium text-gray-700">Account Creation Time:</label>
									<span className="text-sm text-gray-500">{editUser.createdAt}</span>
								</div>
								<div className="flex items-center gap-2 mb-2">
									<label className="text-sm font-medium text-gray-700">Account ID Number:</label>
									<span className="text-sm text-gray-500">{editUser.id}</span>
								</div>
								<div className="relative">
									<label className="block text-sm font-medium text-gray-700 mb-1">Email (unique):</label>
									<input
										className="w-full border px-3 py-2 rounded-lg outline-none bg-gray-100 cursor-not-allowed"
										type="email"
										name="email"
										value={editUser.email}
										readOnly
										onMouseEnter={() => setShowEmailTooltip(true)}
										onMouseLeave={() => setShowEmailTooltip(false)}
									/>
									{/* Custom tooltip */}
									{showEmailTooltip && (
										<div className="absolute left-0 top-full mt-1 z-10 w-max max-w-xs bg-gray-800 text-gray-100 text-xs px-3 py-2 rounded-md shadow-lg border border-gray-700">
											This field cannot be changed. <br />
											To change the email, delete and re-add the user.
										</div>
									)}
								</div>
								<div>
									<label className="block text-sm font-medium text-gray-700 mb-1">Name:</label>
									<input
										className="w-full border px-3 py-2 rounded-lg outline-none focus:ring-2 focus:ring-blue-300"
										type="text"
										name="name"
										value={editUser.name}
										onChange={handleEditChange}
									/>
								</div>
								<div>
									<label className="block text-sm font-medium text-gray-700 mb-1">Role:</label>
									<select
										className="w-full border px-3 py-2 rounded-lg outline-none focus:ring-2 focus:ring-blue-300"
										name="role"
										value={editUser.role}
										onChange={handleEditChange}
									>
										{allRoles.map((role) => (
											<option key={role} value={role}>
												{roleLabels[role]}
											</option>
										))}
									</select>
								</div>
								<div>
									<label className="block text-sm font-medium text-gray-700 mb-1">Password:</label>
									<input
										className="w-full border px-3 py-2 rounded-lg outline-none focus:ring-2 focus:ring-blue-300"
										type="text"
										name="password"
										value={editUser.password}
										onChange={handleEditChange}
									/>
								</div>
								<div className="flex gap-2 justify-end pt-6">
									<button
										type="button"
										className="px-4 py-2 bg-red-500 hover:bg-red-600 text-white font-semibold rounded-lg shadow transition"
										onClick={handleDelete}
									>
										Delete
									</button>
									<button
										type="submit"
										className={`px-4 py-2 rounded-lg font-semibold transition
                      ${
												isEditChanged
													? "bg-blue-600 hover:bg-blue-700 text-white shadow"
													: "bg-gray-300 text-gray-500 cursor-not-allowed"
											}`}
										disabled={!isEditChanged}
									>
										Update
									</button>
								</div>
							</form>
						</div>
					) : (
						<div className="text-center text-gray-400 mt-16 text-lg">Select a user...</div>
					)}
				</div>
			</div>
		</div>
	);
}