"use client"; import { useEffect, useRef } from "react"; import Link from "next/link"; import Image from "next/image"; import { useAppDispatch, useAppSelector } from "@/store/hooks"; import { fetchSectionDetail, selectSectionDetailItems, selectSectionDetailLoaded, selectSectionDetailLoading, selectSectionDetailPagination, } from "@/store/slices/sectionDetailSlice"; import { selectHomeSections } from "@/store/slices/homeSlice"; import { getStoredUser } from "@/lib/utils/persistAuth"; import { slugify } from "@/lib/utils/slugify"; import type { SectionArticle, SectionChannel, SectionCategory, SectionOpinionPoll, } from "@/types/api/section.types"; // ── Helpers ────────────────────────────────────────────────────────────────── function isValidImg(url?: string) { return !!url && !url.includes("no_img"); } function fmtViews(n: number) { if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}M`; if (n >= 1_000) return `${Math.round(n / 1_000)}K`; return String(n); } function fmtRelTime(dateStr: string) { const diff = Date.now() - new Date(dateStr).getTime(); const mins = Math.floor(diff / 60_000); const hrs = Math.floor(mins / 60); if (mins < 60) return `${mins}m ago`; if (hrs < 24) return `${hrs}h ago`; return `${Math.floor(hrs / 24)}d ago`; } // ── Article Card ───────────────────────────────────────────────────────────── function ArticleCard({ item }: { item: SectionArticle }) { const img = isValidImg(item.web_image) ? item.web_image : isValidImg(item.landscape_img) ? item.landscape_img : null; return (
{img && } {item.is_premium === 1 && ( PREMIUM )}
{item.category && ( {item.category} )}

{item.title}

{fmtRelTime(item.created_at)} {item.total_view > 0 && <>·{fmtViews(item.total_view)}} {item.channel_name && <>·{item.channel_name}}
); } // ── Channel Card ───────────────────────────────────────────────────────────── function ChannelCard({ item }: { item: SectionChannel }) { const img = isValidImg(item.landscape_img) ? item.landscape_img : isValidImg(item.portrait_img) ? item.portrait_img : null; return (
{img && {item.name}}

{item.name}

{item.description}

{item.ch_full_name || item.ch_user_name} Follow
); } // ── Category Card ───────────────────────────────────────────────────────────── function CategoryCard({ item }: { item: SectionCategory }) { const img = isValidImg(item.web_image) ? item.web_image : isValidImg(item.app_image) ? item.app_image : null; const slug = slugify(item.name); return (
{img ? {item.name} : (
{item.name.charAt(0).toUpperCase()}
) }

{item.name}

Browse articles →
); } // ── Opinion Poll Card ───────────────────────────────────────────────────────── function OpinionPollCard({ item }: { item: SectionOpinionPoll }) { const options = [ { key: "a", label: item.option_a, pct: item.percentage_option_a, count: item.option_a_count }, { key: "b", label: item.option_b, pct: item.percentage_option_b, count: item.option_b_count }, { key: "c", label: item.option_c, pct: item.percentage_option_c, count: item.option_c_count }, { key: "d", label: item.option_d, pct: item.percentage_option_d, count: item.option_d_count }, ].filter((o) => !!o.label); const maxPct = Math.max(...options.map((o) => parseFloat(o.pct) || 0)); return (
{isValidImg(item.channel_image) ? ( ) : (
{item.channel_name?.charAt(0)}
)} {item.channel_name} {item.is_complete === 1 && ( Closed )}

{item.question}

{options.map((opt) => { const pct = parseFloat(opt.pct) || 0; const isLeading = pct === maxPct && pct > 0; return (
{opt.label} {pct}%
); })}
{item.total_opinions} votes {item.closing_date && Closes {item.closing_date}}
); } // ── Skeleton ────────────────────────────────────────────────────────────────── function Skeleton() { return (
); } // ── Main Shell ──────────────────────────────────────────────────────────────── interface Props { sectionId: number; sectionType?: number; sectionTitle?: string; } function renderItem(item: Record, detectedType: number, index: number) { const key = `${detectedType}-${(item.id as number) ?? index}`; switch (detectedType) { case 9: return ; case 7: return ; case 6: return ; default: return ; } } export default function SectionDetailShell({ sectionId, sectionType, sectionTitle }: Props) { const dispatch = useAppDispatch(); const dispatchedRef = useRef(false); const homeSections = useAppSelector(selectHomeSections); const items = useAppSelector(selectSectionDetailItems(sectionId)); const isLoaded = useAppSelector(selectSectionDetailLoaded(sectionId)); const isLoading = useAppSelector(selectSectionDetailLoading); const pagination = useAppSelector(selectSectionDetailPagination(sectionId)); // Derive section metadata from Redux home state or URL params const homeSection = homeSections.find((s) => s.id === sectionId); const title = homeSection?.title ?? sectionTitle ?? "Section"; const subTitle = homeSection?.sub_title; // Determine type: from homeSection → URL param → detect from first item const resolvedType = homeSection?.type ?? sectionType ?? 1; // Detect type from first item when no other hint is available const firstItem = items[0] as unknown as Record | undefined; const detectedType = resolvedType || (firstItem?.question ? 6 : firstItem?.ch_user_name ? 9 : firstItem?.app_image ? 7 : 1); useEffect(() => { if (!isLoaded && !dispatchedRef.current) { dispatchedRef.current = true; dispatch(fetchSectionDetail({ sectionId, userId: getStoredUser()?.id ?? 0, page: 1 })); } // eslint-disable-next-line react-hooks/exhaustive-deps }, []); // Grid layout per type const isGrid = [7, 9].includes(detectedType); const isPoll = detectedType === 6; return (
{/* ── Breadcrumb ── */} {/* ── Section Header ── */}

{title}

{subTitle && (

{subTitle}

)}
{pagination && ( {pagination.totalRows} items )}
{/* ── Content ── */} {isLoading && items.length === 0 ? (
{Array.from({ length: 8 }).map((_, i) => )}
) : items.length === 0 ? (

No items found

This section has no content yet

) : (
{items.map((item, i) => renderItem(item as unknown as Record, detectedType, i))}
)} {/* ── Load More ── */} {pagination?.hasMore && !isLoading && (
)} {isLoading && items.length > 0 && (
Loading…
)}
); }