import HeaderRightAnnouncementList from "@/components/announcement/headerAnnouncementList";
import AppHeader from "@/components/AppHeader";
import Styles from "@/constants/Styles";
import HeaderDiscussionGeneral from "@/components/discussion_general/headerDiscussionGeneral";
import HeaderRightDivisionList from "@/components/division/headerDivisionList";
import HeaderRightGroupList from "@/components/group/headerGroupList";
import HeaderMemberList from "@/components/member/headerMemberList";
import HeaderRightPositionList from "@/components/position/headerRightPositionList";
import HeaderRightProjectList from "@/components/project/headerProjectList";
import Text from "@/components/Text";
import ToastCustom from "@/components/toastCustom";
import ModalUpdateMaintenance from "@/components/ModalUpdateMaintenance";
import { apiGetVersion, apiReadOneNotification } from "@/lib/api";
import { pushToPage } from "@/lib/pushToPage";
import store from "@/lib/store";
import { useAuthSession } from "@/providers/AuthProvider";
import AsyncStorage from "@react-native-async-storage/async-storage";
import Constants from "expo-constants";
import { getApp } from "@react-native-firebase/app";
import { getMessaging, onMessage } from "@react-native-firebase/messaging";
import { Redirect, router, Stack, usePathname } from "expo-router";
import { StatusBar } from 'expo-status-bar'; 
import { useEffect, useState } from "react";
import { Easing, Notifier, NotifierComponents } from 'react-native-notifier';
import { Provider } from "react-redux";
import { useTheme } from "@/providers/ThemeProvider";

export default function RootLayout() {
   const { token, decryptToken, isLoading } = useAuthSession()
   const pathname = usePathname()
   const { colors } = useTheme()
   const [modalUpdateMaintenance, setModalUpdateMaintenance] = useState(false)
   const [modalType, setModalType] = useState<'update' | 'maintenance'>('update')
   const [isForceUpdate, setIsForceUpdate] = useState(false)
   const [updateMessage, setUpdateMessage] = useState('')

   const currentVersion = Constants.expoConfig?.version ?? '0.0.0'

   const compareVersions = (v1: string, v2: string) => {
      const parts1 = v1.split('.').map(Number);
      const parts2 = v2.split('.').map(Number);
      for (let i = 0; i < Math.max(parts1.length, parts2.length); i++) {
         const p1 = parts1[i] || 0;
         const p2 = parts2[i] || 0;
         if (p1 < p2) return -1;
         if (p1 > p2) return 1;
      }
      return 0;
   };

   useEffect(() => {
      const checkVersion = async () => {
         try {
            const response = await apiGetVersion();
            if (response.success && response.data) {
               const maintenance = response.data.find((item: any) => item.id === 'mobile_maintenance')?.value === 'true';
               const latestVersion = response.data.find((item: any) => item.id === 'mobile_latest_version')?.value || '0.0.0';
               const minVersion = response.data.find((item: any) => item.id === 'mobile_minimum_version')?.value || '0.0.0';
               const message = response.data.find((item: any) => item.id === 'mobile_message_update')?.value || '';

               if (maintenance) {
                  setModalType('maintenance');
                  setModalUpdateMaintenance(true);
                  setIsForceUpdate(true);
                  return;
               }

               if (compareVersions(currentVersion, minVersion) === -1) {
                  setModalType('update');
                  setIsForceUpdate(true);
                  setUpdateMessage(message);
                  setModalUpdateMaintenance(true);
               } else if (compareVersions(currentVersion, latestVersion) === -1) {
                  // Check if this soft update version was already dismissed
                  const dismissedVersion = await AsyncStorage.getItem('dismissed_update_version');
                  if (dismissedVersion !== latestVersion) {
                     setModalType('update');
                     setIsForceUpdate(false);
                     setUpdateMessage(message);
                     setModalUpdateMaintenance(true);
                  }
               }
            }
         } catch (error) {
            console.error('Failed to check version:', error);
         }
      };

      checkVersion();
   }, [currentVersion]);

   const handleDismissUpdate = async () => {
      if (!isForceUpdate) {
         try {
            const response = await apiGetVersion();
            const latestVersion = response.data.find((item: any) => item.id === 'mobile_latest_version')?.value;
            if (latestVersion) {
               await AsyncStorage.setItem('dismissed_update_version', latestVersion);
            }
         } catch (e) {
            console.error(e);
         }
         setModalUpdateMaintenance(false);
      }
   }

   async function handleReadNotification(id: string, category: string, idContent: string, title: string) {
      try {
         if (title != "Komentar Baru") {
            const hasil = await decryptToken(String(token?.current))
            const response = await apiReadOneNotification({ user: hasil, id: id })
         }
         pushToPage(category, idContent)
      } catch (error) {
         console.error(error)
      }
   }

   useEffect(() => {
      const checkNavigation = async () => {
         const navData = await AsyncStorage.getItem('navigateOnOpen');
         if (navData) {
            const { screen, content } = JSON.parse(navData);
            await AsyncStorage.removeItem('navigateOnOpen'); // reset
            pushToPage(screen, content)
         }
      };

      checkNavigation();
   }, []);

   useEffect(() => {
      const mess = getMessaging(getApp());

      const unsubscribe = onMessage(mess, async remoteMessage => {
         const id = remoteMessage?.data?.id;
         const category = remoteMessage?.data?.category;
         const content = remoteMessage?.data?.content;
         const title = remoteMessage?.notification?.title;

         if (remoteMessage.notification?.title && remoteMessage.notification?.body) {
            if (category === 'discussion-general' && pathname === '/discussion/' + content) {
               return null;
            } else if (pathname !== `/${category}/${content}`) {
               Notifier.showNotification({
                  title: title,
                  description: String(remoteMessage.notification?.body),
                  duration: 3000,
                  animationDuration: 300,
                  showEasing: Easing.ease,
                  onPress: () => handleReadNotification(String(id), String(category), String(content), String(title)),
                  hideOnPress: true,
                  Component: NotifierComponents.Notification,
                  componentProps: {
                     containerStyle: [
                        Styles.shadowBox,
                        {
                           backgroundColor: colors.modalBackground,
                           borderRadius: 5,
                           marginHorizontal: 15,
                           marginTop: 10,
                           padding: 15,
                        }
                     ],
                     titleStyle: {
                        color: colors.text,
                        fontWeight: 'bold',
                        fontSize: 16,
                     },
                     descriptionStyle: {
                        color: colors.dimmed,
                        fontSize: 14,
                     },
                  }
               });
            }
         }
      });

      return unsubscribe;
   }, [pathname]);


   if (isLoading) {
      return <Text>Loading...</Text>;
   }

   if (!token?.current) {
      return <Redirect href="/" />;
   }

   return (
      <Provider store={store}>
         <Stack screenOptions={{
            headerShown: true,
            animation: "slide_from_right",
            animationTypeForReplace: "pop",
            fullScreenGestureEnabled: true,
            gestureEnabled: true,
            contentStyle: { backgroundColor: colors.header },
         }} >
            <Stack.Screen name="home" options={{ title: 'Home' }} />
            <Stack.Screen name="feature" options={{ title: 'Fitur' }} />
            <Stack.Screen name="search" options={{ title: 'Pencarian' }} />
            <Stack.Screen name="notification" options={{
               title: 'Notifikasi',
               // headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
               headerTitle: 'Notifikasi',
               headerTitleAlign: 'center',
               header: () => (
                  <AppHeader title="Notifikasi" showBack={true} onPressLeft={() => router.back()} />
               )
            }} />
            <Stack.Screen name="profile" options={{ title: 'Profile' }} />
            <Stack.Screen name="setting/index" options={{
               // headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
               title: 'Pengaturan',
               headerTitleAlign: 'center',
               // headerRight: () => <HeaderRightProjectList />
               header: () => (
                  <AppHeader title="Pengaturan"
                     showBack={true}
                     onPressLeft={() => router.back()}
                  />
               )
            }} />
            <Stack.Screen name="member/index" options={{
               // headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
               title: 'Anggota',
               headerTitleAlign: 'center',
               // headerRight: () => <HeaderMemberList />
               header: () => (
                  <AppHeader title="Anggota"
                     showBack={true}
                     onPressLeft={() => router.back()}
                     right={<HeaderMemberList />}
                  />
               )
            }} />
            <Stack.Screen name="discussion/index" options={{
               // headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
               title: 'Diskusi Umum',
               headerTitleAlign: 'center',
               // headerRight: () => <HeaderDiscussionGeneral />
               header: () => (
                  <AppHeader
                     title="Diskusi Umum"
                     showBack={true}
                     onPressLeft={() => router.back()}
                     right={<HeaderDiscussionGeneral />}
                  />
               )
            }} />
            <Stack.Screen name="project/index" options={{
               // headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
               title: 'Kegiatan',
               headerTitleAlign: 'center',
               // headerRight: () => <HeaderRightProjectList />
               header: () => (
                  <AppHeader title="Kegiatan"
                     showBack={true}
                     onPressLeft={() => router.back()}
                     right={<HeaderRightProjectList />}
                  />
               )
            }} />
            <Stack.Screen name="division/index" options={{
               // headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
               title: 'Divisi',
               headerTitleAlign: 'center',
               // headerRight: () => <HeaderRightDivisionList />
               header: () => (
                  <AppHeader title="Divisi"
                     showBack={true}
                     onPressLeft={() => router.back()}
                     right={<HeaderRightDivisionList />}
                  />
               )
            }} />
            <Stack.Screen name="division/[id]/(fitur-division)" options={{ headerShown: false }} />
            <Stack.Screen name="group/index" options={{
               // headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
               headerTitle: 'Lembaga Desa',
               headerTitleAlign: 'center',
               // headerRight: () => <HeaderRightGroupList />
               header: () => (
                  <AppHeader title="Lembaga Desa"
                     showBack={true}
                     onPressLeft={() => router.back()}
                     right={<HeaderRightGroupList />}
                  />
               )
            }} />
            <Stack.Screen name="position/index" options={{
               // headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
               headerTitle: 'Jabatan',
               headerTitleAlign: 'center',
               // headerRight: () => <HeaderRightPositionList />
               header: () => (
                  <AppHeader title="Jabatan"
                     showBack={true}
                     onPressLeft={() => router.back()}
                     right={<HeaderRightPositionList />}
                  />
               )
            }} />
            <Stack.Screen name="announcement/index"
               options={{
                  // headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
                  headerTitle: 'Pengumuman',
                  headerTitleAlign: 'center',
                  // headerRight: () => <HeaderRightAnnouncementList />
                  header: () => (
                     <AppHeader title="Pengumuman"
                        showBack={true}
                        onPressLeft={() => router.back()}
                        right={<HeaderRightAnnouncementList />}
                     />
                  )
               }}
            />
         </Stack>
         <StatusBar style={'light'} translucent={false} backgroundColor="black" />
         <ToastCustom />
         <ModalUpdateMaintenance
            visible={modalUpdateMaintenance}
            type={modalType}
            isForceUpdate={isForceUpdate}
            customDescription={updateMessage}
            onDismiss={handleDismissUpdate}
         />
      </Provider>
   )
}