"use client"; import { useState, useEffect } from "react"; import { useSession } from "next-auth/react"; import { useRouter } from "next/navigation"; import { User, Mail, Phone, GraduationCap, Building2, Calendar, Edit3, Camera, Lock, CreditCard, Shield, Bell, Save, X, Check, Eye, EyeOff, Upload, FileCheck, Loader2, LogOut, } from "lucide-react"; import { Avatar } from "@/components/ui/avatar"; import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; import { MembershipCardEngine } from "@/components/cards/membership-card-engine"; interface UserProfile { id: string; name: string; email: string; phone: string; faculty: string; department: string; graduationYear: string; bio: string; image: string | null; cardPhoto: string | null; graduationCertificate: string | null; membershipNumber: string; memberStatus: string; memberSince: string; studentId: string; } export default function ProfilePage({ params }: { params: Promise<{ lang: string }> }) { const [lang, setLang] = useState("ar"); const isArabic = lang === "ar"; const { data: session, status, update } = useSession(); const router = useRouter(); const [profile, setProfile] = useState(null); const [loading, setLoading] = useState(true); const [saving, setSaving] = useState(false); const [activeTab, setActiveTab] = useState<"profile" | "card" | "security">("profile"); const [editing, setEditing] = useState(false); const [editForm, setEditForm] = useState>({}); // Password change states const [showPasswordModal, setShowPasswordModal] = useState(false); const [resetEmail, setResetEmail] = useState(""); const [passwordSent, setPasswordSent] = useState(false); const [sendingReset, setSendingReset] = useState(false); const [currentPassword, setCurrentPassword] = useState(""); const [newPassword, setNewPassword] = useState(""); const [confirmPassword, setConfirmPassword] = useState(""); const [changingPassword, setChangingPassword] = useState(false); const [passwordError, setPasswordError] = useState(""); const [passwordSuccess, setPasswordSuccess] = useState(""); // Avatar upload const [uploadingAvatar, setUploadingAvatar] = useState(false); // Card photo upload const [uploadingCard, setUploadingCard] = useState(false); useEffect(() => { params.then((p) => setLang(p.lang)); }, [params]); useEffect(() => { if (status === "unauthenticated") { router.push("/auth/login"); } }, [status, router]); useEffect(() => { if (session?.user?.id) { fetchProfile(); } }, [session]); const fetchProfile = async () => { try { const res = await fetch("/api/profile"); if (res.ok) { const data = await res.json(); setProfile(data); setEditForm(data); setResetEmail(data.email); } } catch (error) { console.error("Failed to fetch profile:", error); } finally { setLoading(false); } }; const handleSaveProfile = async () => { setSaving(true); try { const res = await fetch("/api/profile", { method: "PATCH", headers: { "Content-Type": "application/json" }, body: JSON.stringify(editForm), }); if (res.ok) { const data = await res.json(); setProfile(data); setEditing(false); await update({ name: data.name }); } } catch (error) { console.error("Failed to save profile:", error); } finally { setSaving(false); } }; const handleAvatarUpload = async (e: React.ChangeEvent) => { const file = e.target.files?.[0]; if (!file) return; setUploadingAvatar(true); const formData = new FormData(); formData.append("file", file); try { const res = await fetch("/api/upload", { method: "POST", body: formData, }); if (res.ok) { const data = await res.json(); const imageUrl = data.url || data.imageUrl; await fetch("/api/profile", { method: "PATCH", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ image: imageUrl }), }); setProfile((prev) => (prev ? { ...prev, image: imageUrl } : null)); } } catch (error) { console.error("Failed to upload avatar:", error); } finally { setUploadingAvatar(false); } }; const handleCardPhotoUpload = async (e: React.ChangeEvent) => { const file = e.target.files?.[0]; if (!file) return; setUploadingCard(true); const formData = new FormData(); formData.append("file", file); try { const res = await fetch("/api/upload", { method: "POST", body: formData, }); if (res.ok) { const data = await res.json(); const imageUrl = data.url || data.imageUrl; await fetch("/api/profile", { method: "PATCH", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ cardPhoto: imageUrl }), }); setProfile((prev) => (prev ? { ...prev, cardPhoto: imageUrl } : null)); } } catch (error) { console.error("Failed to upload card photo:", error); } finally { setUploadingCard(false); } }; const handleSendResetEmail = async () => { if (!resetEmail) return; setSendingReset(true); try { const res = await fetch("/api/auth/forgot-password", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ email: resetEmail }), }); if (res.ok) { setPasswordSent(true); } } catch (error) { console.error("Failed to send reset email:", error); } finally { setSendingReset(false); } }; const handleChangePassword = async () => { setPasswordError(""); setPasswordSuccess(""); if (!currentPassword || !newPassword) { setPasswordError(isArabic ? "املأ جميع الحقول" : "Fill all fields"); return; } if (newPassword !== confirmPassword) { setPasswordError(isArabic ? "كلمتا المرور غير متطابقتين" : "Passwords do not match"); return; } if (newPassword.length < 8) { setPasswordError(isArabic ? "كلمة المرور يجب أن تكون 8 أحرف على الأقل" : "Password must be at least 8 characters"); return; } setChangingPassword(true); try { const res = await fetch("/api/profile/password", { method: "PUT", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ currentPassword, newPassword }), }); const data = await res.json(); if (res.ok) { setPasswordSuccess(isArabic ? "تم تغيير كلمة المرور بنجاح" : "Password changed successfully"); setCurrentPassword(""); setNewPassword(""); setConfirmPassword(""); } else { setPasswordError(data.error || (isArabic ? "حدث خطأ" : "An error occurred")); } } catch { setPasswordError(isArabic ? "حدث خطأ في الاتصال" : "Connection error"); } finally { setChangingPassword(false); } }; const tabs = [ { id: "profile" as const, label: isArabic ? "الملف الشخصي" : "Profile", icon: User }, { id: "card" as const, label: isArabic ? "بطاقة العضوية" : "Membership Card", icon: CreditCard }, { id: "security" as const, label: isArabic ? "الأمان" : "Security", icon: Shield }, ]; if (loading) { return (
); } if (!profile) { return (

{isArabic ? "حدث خطأ في تحميل البيانات" : "Error loading profile"}

); } return (
{/* Profile Header */}
{uploadingAvatar && (
)}

{profile.name}

{profile.email}

{isArabic ? "عضو منذ" : "Member since"} {profile.memberSince}

{/* Tabs */}
{tabs.map((tab) => ( ))}
{/* Tab Content */} {activeTab === "profile" && (
{isArabic ? "معلومات الشخصية" : "Personal Information"} {!editing ? ( ) : (
)}
{editing ? ( setEditForm({ ...editForm, name: e.target.value }) } /> ) : (
{profile.name}
)}
{profile.email}
{editing ? ( setEditForm({ ...editForm, phone: e.target.value }) } /> ) : (
{profile.phone || "-"}
)}
{profile.studentId}
{editing ? ( setEditForm({ ...editForm, faculty: e.target.value }) } /> ) : (
{profile.faculty || "-"}
)}
{profile.graduationYear}
{editing ? (