mobile-darmasaba/app/(application)/discussion/index.tsx

import GuideOverlay from "@/components/GuideOverlay";
import ButtonTab from "@/components/buttonTab";
import InputSearch from "@/components/inputSearch";
import LabelStatus from "@/components/labelStatus";
import SkeletonContent from "@/components/skeletonContent";
import Text from "@/components/Text";
import WrapTab from "@/components/wrapTab";
import Styles from "@/constants/Styles";
import { apiGetDiscussionGeneral } from "@/lib/api";
import { GUIDE_DISCUSSION } from "@/lib/guideSteps";
import { useGuide } from "@/lib/useGuide";
import { useAuthSession } from "@/providers/AuthProvider";
import { useTheme } from "@/providers/ThemeProvider";
import { AntDesign, Feather } from "@expo/vector-icons";
import { useInfiniteQuery, useQueryClient } from "@tanstack/react-query";
import { router, useLocalSearchParams } from "expo-router";
import { useEffect, useMemo, useState } from "react";
import { FlatList, Pressable, RefreshControl, View } from "react-native";
import { useSelector } from "react-redux";

type Props = {
   id: string
   title: string
   desc: string
   status: number
   total_komentar: number
   createdAt: string
}

export default function Discussion() {
   const entityUser = useSelector((state: any) => state.user)
   const { token, decryptToken } = useAuthSession()
   const { colors } = useTheme();
   const { active, group } = useLocalSearchParams<{ active?: string, group?: string }>()
   const [search, setSearch] = useState('')
   const update = useSelector((state: any) => state.discussionGeneralDetailUpdate)
   const queryClient = useQueryClient()
   const [status, setStatus] = useState<'true' | 'false'>(active == 'false' ? 'false' : 'true')
   const [refreshing, setRefreshing] = useState(false)
   const { visible: guideVisible, dismiss: dismissGuide } = useGuide('discussion')

   const {
      data,
      fetchNextPage,
      hasNextPage,
      isFetchingNextPage,
      isLoading,
      refetch
   } = useInfiniteQuery({
      queryKey: ['discussions', { status, search, group }],
      queryFn: async ({ pageParam = 1 }) => {
         const hasil = await decryptToken(String(token?.current))
         const response = await apiGetDiscussionGeneral({
            user: hasil,
            active: status,
            search: search,
            group: String(group),
            page: pageParam
         })
         return response;
      },
      initialPageParam: 1,
      getNextPageParam: (lastPage, allPages) => {
         return lastPage.data.length > 0 ? allPages.length + 1 : undefined;
      },
      enabled: !!token?.current,
      staleTime: 0,
   })

   const flatData = useMemo(() => {
      return data?.pages.flatMap(page => page.data) || [];
   }, [data])

   const nameGroup = useMemo(() => {
      return data?.pages[0]?.filter?.name || "";
   }, [data])

   useEffect(() => {
      refetch()
   }, [update, refetch])

   const handleRefresh = async () => {
      setRefreshing(true)
      await queryClient.invalidateQueries({ queryKey: ['discussions'] })
      setRefreshing(false)
   };

   const isOpen = (item: Props) => item.status === 1

   return (
      <View style={[Styles.flex1, { backgroundColor: colors.background }]}>
         <GuideOverlay visible={guideVisible} steps={GUIDE_DISCUSSION} onDismiss={dismissGuide} />
         {/* Header controls */}
         <View style={[Styles.ph15, { paddingTop: 12 }]}>
            {entityUser.role != "user" && entityUser.role != "coadmin" && (
               <WrapTab>
                  <ButtonTab
                     active={status == "false" ? "false" : "true"}
                     value="true"
                     onPress={() => setStatus("true")}
                     label="Aktif"
                     icon={<Feather name="check-circle" color={status == "false" ? colors.dimmed : 'white'} size={20} />}
                     n={2}
                  />
                  <ButtonTab
                     active={status == "false" ? "false" : "true"}
                     value="false"
                     onPress={() => setStatus("false")}
                     label="Arsip"
                     icon={<AntDesign name="closecircleo" color={status == "true" ? colors.dimmed : 'white'} size={20} />}
                     n={2}
                  />
               </WrapTab>
            )}
            <InputSearch onChange={setSearch} />
            {(entityUser.role == "supadmin" || entityUser.role == "developer") && (
               <View style={[Styles.mv05, Styles.rowItemsCenter]}>
                  <Text style={{ color: colors.dimmed, fontSize: 12 }}>Filter:</Text>
                  <LabelStatus size="small" category="secondary" text={nameGroup} style={[Styles.mh05]} />
               </View>
            )}
         </View>

         {/* List */}
         <View style={[Styles.flex1, Styles.ph15, { paddingTop: 8 }]}>
            {isLoading ? (
               [0, 1, 2, 3, 4].map((_, i) => <SkeletonContent key={i} />)
            ) : flatData.length === 0 ? (
               <View style={[Styles.contentItemCenter, Styles.mt30]}>
                  <Feather name="message-circle" size={42} color={colors.icon + '40'} />
                  <Text style={[Styles.mt10, { color: colors.dimmed, fontSize: 14 }]}>
                     Tidak ada diskusi
                  </Text>
               </View>
            ) : (
               <FlatList
                  data={flatData}
                  keyExtractor={(_, i) => String(i)}
                  showsVerticalScrollIndicator={false}
                  onEndReached={() => {
                     if (hasNextPage && !isFetchingNextPage) fetchNextPage()
                  }}
                  onEndReachedThreshold={0.5}
                  refreshControl={
                     <RefreshControl
                        refreshing={refreshing}
                        onRefresh={handleRefresh}
                        tintColor={colors.icon}
                     />
                  }
                  ItemSeparatorComponent={() => <View style={Styles.discussionSeparator} />}
                  renderItem={({ item }: { item: Props }) => (
                     <Pressable
                        onPress={() => router.push(`/discussion/${item.id}`)}
                        style={({ pressed }) => [
                           Styles.discussionCard,
                           {
                              backgroundColor: pressed ? colors.icon + '10' : colors.card,
                              borderColor: colors.icon + '20',
                           }
                        ]}
                     >
                        {/* Top row: icon + title + status badge */}
                        <View style={[Styles.rowItemsCenter, Styles.mb08]}>
                           {/* Discussion icon */}
                           <View style={[Styles.discussionIconCircle, { backgroundColor: colors.icon + '20' }]}>
                              <Feather name="message-circle" size={20} color={colors.icon} />
                           </View>

                           {/* Title + status badge */}
                           <View style={[Styles.flex1, { marginLeft: 10 }]}>
                              <Text style={[Styles.textDefaultSemiBold, { color: colors.text }]} numberOfLines={1}>
                                 {item.title}
                              </Text>
                              {status !== "false" && (
                                 <View style={[Styles.discussionStatusPill, { borderColor: isOpen(item) ? '#10B981' : colors.dimmed + '80' }]}>
                                    <Text style={[Styles.discussionStatusText, { color: isOpen(item) ? '#10B981' : colors.dimmed }]}>
                                       {isOpen(item) ? 'Buka' : 'Tutup'}
                                    </Text>
                                 </View>
                              )}
                           </View>
                        </View>

                        {/* Description */}
                        {item.desc ? (
                           <Text
                              style={[Styles.textMediumNormal, Styles.discussionCardIndent, { color: colors.dimmed, marginBottom: 10 }]}
                              numberOfLines={2}
                           >
                              {item.desc.replace(/<[^>]*>?/gm, ' ').replace(/\r?\n|\r/g, ' ')}
                           </Text>
                        ) : null}

                        {/* Bottom row: comment count + date */}
                        <View style={[Styles.rowItemsCenter, Styles.rowSpaceBetween, Styles.discussionCardIndent]}>
                           <View style={Styles.rowItemsCenter}>
                              <Feather name="message-square" size={14} color={colors.dimmed} />
                              <Text style={[Styles.discussionCommentText, { color: colors.dimmed }]}>
                                 {item.total_komentar} Komentar
                              </Text>
                           </View>
                           <Text style={[Styles.discussionDateText, { color: colors.dimmed }]}>
                              {item.createdAt}
                           </Text>
                        </View>
                     </Pressable>
                  )}
               />
            )}
         </View>
      </View>
   );
}