"use client"; import { useEffect, useState, useCallback } from "react"; import { createClient } from "@/utils/supabase/client"; import { useParams, useRouter } from "next/navigation"; import Link from "next/link"; import { Baby, Users as FamilyIcon, ChevronLeft, Calendar, Mail, Send, MapPin, Trash2, Edit, History, X, UserCircle2, Navigation } from "lucide-react"; export default function UserDetails() { const { id } = useParams(); const router = useRouter(); const supabase = createClient(); const [user, setUser] = useState(null); const [babies, setBabies] = useState([]); const [families, setFamilies] = useState([]); const [familyMembers, setFamilyMembers] = useState([]); const [notifications, setNotifications] = useState([]); const [loading, setLoading] = useState(true); // Edit Modal State const [editingNotif, setEditingNotif] = useState(null); const [editTitle, setEditTitle] = useState(""); const [editMessage, setEditMessage] = useState(""); const fetchData = useCallback(async () => { setLoading(true); // 1. Fetch Profile (including Address and Location JSON) const { data: profile } = await supabase.from('profiles').select('*').eq('id', id).single(); setUser(profile); // 2. Fetch Families where user is a member OR owner // First get the family IDs from family_members table const { data: memberEntries } = await supabase.from('family_members').select('family_id').eq('user_id', id); const familyIds = memberEntries?.map(m => m.family_id) || []; if (familyIds.length > 0) { // 3. Fetch Family Details const { data: familyData } = await supabase.from('families').select('*').in('id', familyIds); setFamilies(familyData || []); // 4. Fetch All Members of these families (Family Circle) const { data: allMembers } = await supabase .from('family_members') .select('role, joined_at, profiles:user_id(id, full_name, email)') .in('family_id', familyIds); // Filter out the current user to show only "Other Members" const others = allMembers?.filter(m => (m.profiles as any).id !== id) || []; setFamilyMembers(others); // 5. Fetch Babies connected to these families const { data: babyData } = await supabase.from('babies').select('*').in('family_id', familyIds); setBabies(babyData || []); } // 6. Notifications History const { data: notifs } = await supabase .from('notifications') .select('*') .eq('user_id', id) .order('created_at', { ascending: false }); setNotifications(notifs || []); setLoading(false); }, [id, supabase]); useEffect(() => { fetchData(); }, [fetchData]); const handleDeleteNotif = async (notifId: string) => { if (!confirm("Are you sure?")) return; await supabase.from('notifications').delete().eq('id', notifId); fetchData(); }; const handleUpdateNotif = async (e: React.FormEvent) => { e.preventDefault(); await supabase.from('notifications').update({ title: editTitle, message: editMessage }).eq('id', editingNotif.id); setEditingNotif(null); fetchData(); }; if (loading && !user) return (

); return (

{/* --- HEADER --- */}

{user?.full_name?.substring(0, 1)}

{user?.full_name}

{user?.email}

Joined {new Date(user?.created_at).toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric' })}

Send Notification

{/* --- LEFT COLUMN: SYSTEM & RELATIONS --- */}

{/* Location & Address */}

User Location

Primary Address

{user?.address || "No address provided"}

{user?.last_location && (

Last Known Coordinates

Lat: {user.last_location.lat?.toFixed(4)}, Long: {user.last_location.long?.toFixed(4)}

)}

{/* Family Members (Circle) */}

Family Circle

{familyMembers.length > 0 ? familyMembers.map((member, idx) => (

{(member.profiles as any).full_name?.substring(0,1)}

{(member.profiles as any).full_name}

{member.role}

)) : (

No other members in family circle.

)}

{/* Babies */}

Registered Babies

{babies.map(b => (

{b.name}

))}

{/* --- RIGHT COLUMN: NOTIFICATION HISTORY --- */}

Activity Log

{notifications.length} Events

{notifications.map((notif) => (

{notif.title} {notif.is_read ? 'Received' : 'Sent'}

{notif.message}

{new Date(notif.created_at).toLocaleString()}

))}

{/* --- EDIT MODAL (Dark Tabela Style) --- */} {editingNotif && (

Modify Log