"use client"; import { useMemo, useState } from "react"; import { Check, Clock3, KeyRound, Loader2, Mail, Save, ShieldCheck, UserRound, X, } from "lucide-react"; import MediaImagePicker, { type SelectedImage, } from "@/components/admin/MediaImagePicker"; type Role = "ADMIN" | "EDITOR"; type Activity = { id: string; action: string; resourceType: string; resourceId: string | null; summary: string; createdAt: string | Date; }; type ChangeRequest = { id: string; type: "EMAIL" | "PASSWORD"; requestedEmail: string | null; status: "PENDING" | "APPROVED" | "REJECTED"; reviewNote: string | null; createdAt: string | Date; reviewedAt: string | Date | null; user?: { id: string; name: string; email: string; }; }; type Profile = { id: string; name: string; email: string; role: Role; phone: string | null; jobTitle: string | null; bio: string | null; createdAt: string | Date; updatedAt: string | Date; profileImage: SelectedImage | null; activityLogs: Activity[]; changeRequests: ChangeRequest[]; }; type Props = { initialProfile: Profile; initialPendingRequests: ChangeRequest[]; }; function formatDateTime(value: string | Date | null) { if (!value) { return "—"; } const date = new Date(value); if (Number.isNaN(date.getTime())) { return "—"; } return new Intl.DateTimeFormat("en-GB", { day: "2-digit", month: "short", year: "numeric", hour: "2-digit", minute: "2-digit", timeZone: "Asia/Colombo", }).format(date); } function requestLabel(request: ChangeRequest) { if (request.type === "EMAIL") { return request.requestedEmail ? `Email change to ${request.requestedEmail}` : "Email change"; } return "Password change"; } export default function ProfileClient({ initialProfile, initialPendingRequests, }: Props) { const [profile, setProfile] = useState(initialProfile); const [name, setName] = useState(initialProfile.name); const [phone, setPhone] = useState(initialProfile.phone ?? ""); const [jobTitle, setJobTitle] = useState(initialProfile.jobTitle ?? ""); const [bio, setBio] = useState(initialProfile.bio ?? ""); const [profileImage, setProfileImage] = useState( initialProfile.profileImage, ); const [email, setEmail] = useState(initialProfile.email); const [password, setPassword] = useState(""); const [credentialValue, setCredentialValue] = useState(""); const [credentialType, setCredentialType] = useState<"EMAIL" | "PASSWORD">("EMAIL"); const [requests, setRequests] = useState(initialPendingRequests); const [saving, setSaving] = useState(false); const [requesting, setRequesting] = useState(false); const [reviewingId, setReviewingId] = useState(null); const [error, setError] = useState(""); const [success, setSuccess] = useState(""); const isAdmin = profile.role === "ADMIN"; const ownPendingCredentialRequests = useMemo( () => profile.changeRequests.filter( (request) => request.status === "PENDING", ), [profile.changeRequests], ); const saveProfile = async () => { setError(""); setSuccess(""); if (!name.trim()) { setError("Your name is required."); return; } if (isAdmin && !email.trim().includes("@")) { setError("Enter a valid email address."); return; } if (isAdmin && password && password.length < 8) { setError("New password must contain at least 8 characters."); return; } setSaving(true); try { const response = await fetch("/api/admin/profile", { method: "PUT", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ name: name.trim(), phone: phone.trim() || null, jobTitle: jobTitle.trim() || null, bio: bio.trim() || null, profileImageId: profileImage?.id ?? null, ...(isAdmin ? { email: email.trim().toLowerCase(), password: password || undefined, } : {}), }), }); const data = await response.json(); if (!response.ok || !data.success) { throw new Error(data.error || "Unable to save your profile."); } setProfile((current) => ({ ...current, ...data.profile, activityLogs: [ { id: `pending-${Date.now()}`, action: "PROFILE_UPDATED", resourceType: "PROFILE", resourceId: current.id, summary: "Updated own profile details.", createdAt: new Date(), }, ...current.activityLogs, ], })); setPassword(""); setSuccess("Profile saved."); } catch (saveError) { setError( saveError instanceof Error ? saveError.message : "Unable to save your profile.", ); } finally { setSaving(false); } }; const submitCredentialRequest = async () => { setError(""); setSuccess(""); if (!credentialValue.trim()) { setError(`Enter the new ${credentialType === "EMAIL" ? "email address" : "password"}.`); return; } setRequesting(true); try { const response = await fetch("/api/admin/profile", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ type: credentialType, value: credentialValue, }), }); const data = await response.json(); if (!response.ok || !data.success) { throw new Error(data.error || "Unable to submit your request."); } setProfile((current) => ({ ...current, changeRequests: [data.changeRequest, ...current.changeRequests], activityLogs: [ { id: `pending-${Date.now()}`, action: `${credentialType}_CHANGE_REQUESTED`, resourceType: "PROFILE_CHANGE_REQUEST", resourceId: data.changeRequest.id, summary: `Requested a ${credentialType === "EMAIL" ? "email address" : "password"} change.`, createdAt: new Date(), }, ...current.activityLogs, ], })); setCredentialValue(""); setSuccess("Your request was sent to the administrator for approval."); } catch (requestError) { setError( requestError instanceof Error ? requestError.message : "Unable to submit your request.", ); } finally { setRequesting(false); } }; const reviewRequest = async ( id: string, decision: "APPROVE" | "REJECT", ) => { setError(""); setSuccess(""); setReviewingId(id); try { const response = await fetch("/api/admin/profile/requests", { method: "PATCH", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ id, decision }), }); const data = await response.json(); if (!response.ok || !data.success) { throw new Error(data.error || "Unable to review the request."); } setRequests((current) => current.filter((request) => request.id !== id)); setSuccess(`Request ${decision === "APPROVE" ? "approved" : "rejected"}.`); } catch (reviewError) { setError( reviewError instanceof Error ? reviewError.message : "Unable to review the request.", ); } finally { setReviewingId(null); } }; return (
{profileImage ? ( {profileImage.altText ) : (
)}

My profile

{profile.name}

{isAdmin ? "Administrator" : "Editor"}

{error &&

{error}

} {success &&

{success}

}

Personal details

Keep your public CMS profile up to date.