"use client"; import { useEffect, useRef, useState } from "react"; import Image from "next/image"; import Link from "next/link"; import { useAppSelector } from "@/store/hooks"; import { getStoredUser } from "@/lib/utils/persistAuth"; import { API_ENDPOINTS } from "@/lib/constants/apiEndpoints"; import type { FeedItem, FeedContentItem } from "@/types/api/feeds.types"; // ── Helpers ─────────────────────────────────────────────────────────────────── function isValidImg(u?: string) { return !!u && !u.includes("no_img"); } function fmtTime(d: string) { const diff = Date.now() - new Date(d).getTime(); const m = Math.floor(diff / 60_000); const h = Math.floor(m / 60); if (m < 1) return "just now"; if (m < 60) return `${m}m ago`; if (h < 24) return `${h}h ago`; return `${Math.floor(h / 24)}d ago`; } function fmtDate(d: string) { return new Date(d).toLocaleDateString("en-IN", { month: "short", year: "numeric" }); } function getInitial(name: string) { return (name || "U").charAt(0).toUpperCase(); } // ── Media Grid ──────────────────────────────────────────────────────────────── function MediaGrid({ items }: { items: FeedContentItem[] }) { if (!items.length) return null; const visible = items.slice(0, 4); const count = visible.length; const cols = count === 1 ? "1fr" : "1fr 1fr"; return (
{visible.map((item, idx) => (
{item.content_type === 2 && item.video ?
))}
); } // ── Feed Post Card ──────────────────────────────────────────────────────────── function PostCard({ feed, loggedInUserId }: { feed: FeedItem; loggedInUserId: number }) { const [liked, setLiked] = useState(feed.is_user_like === 1); const [likeCount, setLikeCount] = useState(feed.total_like); async function handleLike() { if (!loggedInUserId) return; const next = !liked; setLiked(next); setLikeCount((c) => c + (next ? 1 : -1)); try { const { default: api } = await import("@/services/api.client"); await api.post(API_ENDPOINTS.LIKE_UNLIKE, { user_id: loggedInUserId, type: 6, content_id: feed.id, video_id: 0 }); } catch { setLiked(!next); setLikeCount((c) => c + (!next ? 1 : -1)); } } return (
{/* Header */}
{isValidImg(feed.user_image) ? : {getInitial(feed.user_name ?? "")} }
{feed.user_name ?? "User"} {feed.is_verified === 1 && ( )}
{fmtTime(feed.created_at)}
{/* Title + body */} {feed.title &&

{feed.title}

} {feed.description &&

{feed.description}

} {/* Hashtags */} {feed.hasteg?.length > 0 && (
{feed.hasteg.map((h) => ( #{h.name} ))}
)} {/* Media */} {/* Actions */}
{feed.total_comment}
); } // ── Main Shell ──────────────────────────────────────────────────────────────── interface UserInfo { id: number; user_name?: string; full_name?: string; image?: string; bio?: string; created_at?: string; total_feed?: number; is_follow?: number; is_verified?: number; } interface Props { targetUserId: number; } export default function UserProfileShell({ targetUserId }: Props) { const [loggedInUserId, setLoggedInUserId] = useState(0); const [userInfo, setUserInfo] = useState(null); const [feeds, setFeeds] = useState([]); const [loading, setLoading] = useState(true); const [following, setFollowing] = useState(false); const [followLoading, setFollowLoading] = useState(false); const fetchedRef = useRef(false); useEffect(() => { const uid = getStoredUser()?.id ?? 0; setLoggedInUserId(uid); }, []); useEffect(() => { if (fetchedRef.current) return; fetchedRef.current = true; async function load() { try { const { default: api } = await import("@/services/api.client"); const { data } = await api.post<{ status: number; result: FeedItem[]; to_user_info?: UserInfo[]; }>(API_ENDPOINTS.GET_USER_FEED, { to_user_id: targetUserId, user_id: getStoredUser()?.id ?? 0, }); setFeeds(data.result ?? []); // Extract user info from first feed item or to_user_info if (data.to_user_info?.[0]) { const u = data.to_user_info[0]; setUserInfo(u); setFollowing((u.is_follow ?? 0) === 1); } else if (data.result?.[0]) { const f = data.result[0]; setUserInfo({ id: f.user_id, user_name: f.user_name, full_name: f.user_name, image: f.user_image, is_verified: f.is_verified, is_follow: f.is_follow, }); setFollowing(f.is_follow === 1); } } finally { setLoading(false); } } load(); }, [targetUserId]); async function handleFollow() { if (!loggedInUserId) { window.location.href = "/login"; return; } setFollowLoading(true); const next = !following; setFollowing(next); try { const { default: api } = await import("@/services/api.client"); await api.post(API_ENDPOINTS.FOLLOW_UNFOLLOW, { to_user_id: targetUserId, type: 1, user_id: loggedInUserId, }); } catch { setFollowing(!next); } finally { setFollowLoading(false); } } const displayName = userInfo?.full_name || userInfo?.user_name || `User #${targetUserId}`; const initial = getInitial(displayName); return ( <>
{/* ── Hero header ─────────────────────────────────── */}
{/* Subtle grid texture */}
{/* Brand red glow behind avatar */}
{/* Back */} Back to Feeds {loading ? ( /* Skeleton */
) : (
{/* Avatar */}
{isValidImg(userInfo?.image) ? {displayName} : {initial} }
{/* Name */}

{displayName} {userInfo?.is_verified === 1 && ( )}

{userInfo?.user_name && (
@{userInfo.user_name}
)}
{/* Bio */} {userInfo?.bio && (

{userInfo.bio}

)} {/* Stats row */}
{userInfo?.total_feed ?? feeds.length}
Posts
{userInfo?.created_at && (
{fmtDate(userInfo.created_at)}
Joined
)}
{/* Follow button */} {loggedInUserId !== targetUserId && ( )}
)}
{/* ── Feed posts ──────────────────────────────────── */}
{/* Section label */}
Posts {!loading && ( {feeds.length} )}
{loading ? ( /* Skeleton posts */ Array.from({ length: 3 }).map((_, i) => (
)) ) : feeds.length === 0 ? (

No posts yet

This user hasn't shared anything yet.

) : (
{feeds.map((feed) => ( ))}
)}
); }