"use client"; import { useState, useEffect, useCallback, useRef } from "react"; import Image from "next/image"; import { useRouter } from "next/navigation"; import { ArrowLeft, Heart, MessageCircle, Share2, BadgeCheck, Send, Loader2, ChevronLeft, ChevronRight, AlertCircle, Rss, } from "lucide-react"; import { feedService, FeedPost, FeedComment, FeedMediaItem } from "@/services/feedService"; import { useSubscribe } from "@/hooks/useSubscribe"; import { useShare } from "@/hooks/useShare"; import Cookies from "js-cookie"; /* ── helpers ─────────────────────────────────────────────────────────────── */ const NO_IMG = "no_img.png"; function isRealImg(url?: string) { return !!url && !url.includes(NO_IMG) && url.startsWith("http"); } /* ── Media carousel ──────────────────────────────────────────────────────── */ function MediaCarousel({ media, tall }: { media: FeedMediaItem[]; tall?: boolean }) { const [idx, setIdx] = useState(0); const n = media.length; const prev = useCallback(() => setIdx((i) => (i - 1 + n) % n), [n]); const next = useCallback(() => setIdx((i) => (i + 1) % n), [n]); const cur = media[idx]; if (!cur) return null; // When tall, the outer wrapper must also be 100% so the height chain reaches Image fill const outerH = tall ? "100%" : "auto"; const innerH = tall ? "100%" : "min(260px, 70vw)"; return (
{cur.type === "video" && cur.video ? (
); } /* ── Comment bubble ──────────────────────────────────────────────────────── */ function CommentRow({ c, delay = 0 }: { c: FeedComment; delay?: number }) { return (
{c.avatar // eslint-disable-next-line @next/next/no-img-element ? : (c.channelName[0] || "U").toUpperCase() }
{c.channelName} · {c.createdAt}

{c.comment}

); } /* ── Skeleton ─────────────────────────────────────────────────────────────── */ function Skeleton() { return (
{/* left — media */}
{/* right — content */}
); } /* ── Main ─────────────────────────────────────────────────────────────────── */ export default function FeedDetailPage({ feedId }: { feedId: string }) { const router = useRouter(); const commentInputRef = useRef(null); const [post, setPost] = useState(null); const [comments, setComments] = useState([]); const [loading, setLoading] = useState(true); const [error, setError] = useState(""); const [liked, setLiked] = useState(false); const [likeCount, setLikeCount] = useState(0); const [commentText, setCommentText] = useState(""); const [submitting, setSubmitting] = useState(false); const [likeAnim, setLikeAnim] = useState(false); const myUserId = Cookies.get("user_id") ?? ""; const { share, copied } = useShare(); useEffect(() => { setLoading(true); feedService .getFeedDetail(feedId) .then((detail) => { // Accept status 200 or 1 (both are success across this API) const ok = detail.status === 200 || detail.status === 1; if (!ok || !detail.result) throw new Error("Not found"); const raw = Array.isArray(detail.result) ? detail.result[0] : detail.result; if (!raw) throw new Error("Not found"); const mapped = feedService.mapPost(raw); setPost(mapped); setLiked(mapped.isLiked); setLikeCount(mapped.totalLikes); // Load comments separately — failure here must NOT block the post feedService .getFeedComments(feedId) .then(setComments) .catch(() => {}); // comments are non-fatal }) .catch(() => setError("Could not load this post.")) .finally(() => setLoading(false)); }, [feedId]); const { subscribed, loading: subLoading, toggle: toggleSub } = useSubscribe( post?.userId ?? "", post?.isSubscriber ?? false, post?.userType ?? 1, ); const handleLike = async () => { if (!liked) { setLikeAnim(true); setTimeout(() => setLikeAnim(false), 500); } setLiked((v) => !v); setLikeCount((n) => (liked ? n - 1 : n + 1)); try { await feedService.likeUnlikeFeed(feedId); } catch { setLiked((v) => !v); setLikeCount((n) => (liked ? n + 1 : n - 1)); } }; const handleComment = async () => { if (!commentText.trim() || submitting) return; setSubmitting(true); const opt: FeedComment = { id: `opt-${Date.now()}`, feedId, userId: myUserId, parentId: "0", channelName: "You", avatar: "", comment: commentText.trim(), createdAt: "just now", totalReply: 0, }; setComments((c) => [opt, ...c]); setCommentText(""); try { await feedService.addFeedComment({ feedId, comment: opt.comment }); } catch { setComments((c) => c.filter((x) => x.id !== opt.id)); } setSubmitting(false); }; const sharePost = () => { if (!post) return; share({ title: post.title || post.channelName || "Post", path: `/feed/${post.id} ${post.channelName}` }); }; if (loading) return ; if (error || !post) { return (

{error || "Post not found"}

); } // Show all media items — carousel handles no_img placeholders internally const visibleMedia = post.media; const topComments = comments.filter((c) => c.parentId === "0"); return (
{/* ── Sticky nav ──────────────────────────────────────────────────── */}
{post.title || post.channelName}
{/* ── Responsive grid ─────────────────────────────────────────────── */} {/* Mobile (<768px) : single column, stacked Tablet (≥768px) : two columns — media left (sticky), info right Desktop (≥1280px): wider columns, more breathing room */}
{/* ══ LEFT — Media ════════════════════════════════════════════ */} {/* Mobile: stacked above content, natural height Tablet+: sticky left column, fills viewport height */}
{/* ── Mobile (< 768px): natural height carousel ── */}
{visibleMedia.length > 0 ? :
}
{/* ── Tablet+ (≥ 768px): fills viewport minus nav ── */}
{visibleMedia.length > 0 ? :
}
{/* ══ RIGHT — Content + comments ═══════════════════════════════ */}
{/* Author row */}
{isRealImg(post.profileImg) ? ( {post.channelName} ) : ( post.channelName[0]?.toUpperCase() )}
{post.channelName} {post.isVerified && }
{post.createdAt}
{/* Title + description + hashtags */}
{post.title && (

{post.title}

)} {post.description && (

{post.description}

)} {post.hashtags.length > 0 && (
{post.hashtags.map((h) => ( #{h.name} ))}
)} {likeCount > 0 && (
{likeCount.toLocaleString()} {likeCount === 1 ? "like" : "likes"}
)}
{/* Divider */}
{/* Action strip */}
{/* Comments */}

{topComments.length > 0 ? `${topComments.length} Comment${topComments.length !== 1 ? "s" : ""}` : "Comments"}

{/* Comment input */}
setCommentText(e.target.value)} onKeyDown={(e) => { if (e.key === "Enter") handleComment(); }} />
{/* List */} {topComments.length === 0 ? (

Be the first to comment

) : (
{topComments.map((c, i) => )}
)}
); }