"use client"; import { useCallback, useEffect, useState } from "react"; import Image from "next/image"; import { Users, BadgeCheck, CheckCircle2, Globe, AlertCircle, Bell, Link2, } from "lucide-react"; import { useRouter } from "next/navigation"; import { useAppDispatch, useAppSelector } from "@/store/hooks"; import { fetchSubscribeList, removeSubscription } from "@/store/slices/subscriberSlice"; import { useSubscribe } from "@/hooks/useSubscribe"; import { SubscriberChannel } from "@/services/subscriberService"; import { useInfiniteScroll } from "@/hooks/useInfiniteScroll"; import { useTranslation } from "@/i18n"; /* ───────────────────────────────────────────────────────────────────────────── Cover gradient fallbacks — keyed to channel name initial ───────────────────────────────────────────────────────────────────────────── */ const COVER_GRADIENTS = [ "linear-gradient(135deg,#1a1a4e 0%,#0f3460 100%)", "linear-gradient(135deg,#16213e 0%,#1a4e3a 100%)", "linear-gradient(135deg,#2d1b4e 0%,#0f3460 100%)", "linear-gradient(135deg,#1a2e1a 0%,#0f3460 100%)", "linear-gradient(135deg,#3a1a1a 0%,#1a1a4e 100%)", "linear-gradient(135deg,#1a3a1a 0%,#16213e 100%)", "linear-gradient(135deg,#1a1a2e 0%,#3a2d1a 100%)", "linear-gradient(135deg,#2d2d1a 0%,#0f3460 100%)", ]; function coverGradient(name: string) { return COVER_GRADIENTS[(name.charCodeAt(0) || 0) % COVER_GRADIENTS.length]; } /* ───────────────────────────────────────────────────────────────────────────── Avatar with initial fallback ───────────────────────────────────────────────────────────────────────────── */ function ChannelAvatar({ channel, size = 64 }: { channel: SubscriberChannel; size?: number }) { const initials = (channel.channelName || channel.fullName || "?")[0].toUpperCase(); return (
{channel.avatar ? ( {channel.channelName} ) : (
{initials}
)}
); } /* ───────────────────────────────────────────────────────────────────────────── Subscription channel card ───────────────────────────────────────────────────────────────────────────── */ function ChannelCard({ channel, index }: { channel: SubscriberChannel; index: number }) { const dispatch = useAppDispatch(); const router = useRouter(); const [exiting, setExiting] = useState(false); const [showConfirm, setShowConfirm] = useState(false); const delay = Math.min(index * 50, 600); const hasSocials = channel.website || channel.facebook || channel.instagram || channel.twitter; const isDefaultDesc = channel.description === "Hey, I am user on Doliplay App." || !channel.description; const { t } = useTranslation(); const { loading: subLoading, toggle: toggleSubscribe } = useSubscribe( channel.id, true, // always subscribed on this page channel.isCreator ? 2 : 1, ); const handleUnsubscribe = async () => { if (!showConfirm) { setShowConfirm(true); return; } // call API then animate card out await toggleSubscribe(); setExiting(true); setTimeout(() => dispatch(removeSubscription(channel.id)), 320); }; return (
router.push(`/profile/${channel.id}`)} > {/* Cover banner */}
{channel.coverImg ? ( ) : (
)} {/* Vignette */}
{/* Creator badge */} {channel.isCreator && (
{t("subscriptions_creator")}
)}
{/* Avatar row — overlaps the cover */}
{/* Social links */} {hasSocials && (
{channel.website && ( e.stopPropagation()} > )} {(channel.instagram || channel.twitter || channel.facebook) && ( e.stopPropagation()} > )}
)}
{/* Channel info */}
{/* Name + verified */}

{channel.channelName}

{channel.isVerified && ( )}
{/* Full name */} {channel.fullName && channel.fullName !== channel.channelName && (

{channel.fullName}

)} {/* Stats row */}
{channel.totalSubscribers} {channel.totalSubscribersRaw === 1 ? t("subscriptions_subscriber") : t("subscriptions_subscribers")}
{channel.countryName && channel.countryName !== channel.channelName && ( <> · {channel.countryName} )}
{/* Description */} {!isDefaultDesc && (

{channel.description}

)} {/* Unsubscribe button — stopPropagation so card click doesn't also navigate */}
e.stopPropagation()}> {showConfirm ? (
) : ( )}
); } /* ───────────────────────────────────────────────────────────────────────────── Skeleton card ───────────────────────────────────────────────────────────────────────────── */ function CardSkeleton() { return (
); } /* ───────────────────────────────────────────────────────────────────────────── SubscriptionsPage ───────────────────────────────────────────────────────────────────────────── */ export default function SubscriptionsPage() { const dispatch = useAppDispatch(); const { t } = useTranslation(); const { channels, isLoading, isLoadingMore, error, hasMore, currentPage, totalRows } = useAppSelector((s) => s.subscriber); useEffect(() => { dispatch(fetchSubscribeList(1)); }, [dispatch]); const handleLoadMore = useCallback(() => { dispatch(fetchSubscribeList(currentPage + 1)); }, [dispatch, currentPage]); const sentinelRef = useInfiniteScroll({ hasMore, isLoading: isLoading || isLoadingMore, onLoadMore: handleLoadMore, }); return ( <> {/* ── Header ──────────────────────────────────────────────────────── */}

{t("subscriptions_title")}

{!isLoading && (

{totalRows > 0 ? `${totalRows} ${totalRows !== 1 ? t("subscriptions_channelsSuffix") : t("subscriptions_channelSuffix")}` : t("subscriptions_channelsFollow")}

)}
{/* Live count badge */} {channels.length > 0 && !isLoading && (
{channels.length}
)}
{/* ── Content ─────────────────────────────────────────────────────── */}
{isLoading ? (
{Array.from({ length: 8 }).map((_, i) => )}
) : error ? (

{error}

) : channels.length === 0 ? (

{t("subscriptions_noSubs")}

{t("subscriptions_subscribeTo")}

) : ( <>
{channels.map((ch, i) => ( ))}
{isLoadingMore && (
{Array.from({ length: 4 }).map((_, i) => )}
)} {!hasMore && channels.length > 0 && !isLoading && !isLoadingMore && (
{t("subscriptions_allShown")}
)} )}
); }