import { StatusBar } from 'expo-status-bar';
import React, { useState, useRef, useEffect } from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { Provider as PaperProvider, DefaultTheme, Appbar, Button, Text } from 'react-native-paper';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
import Login from "./Views/Login.js"
import Feed from "./Views/Feed.js"
import Profile from "./Views/Profile.js"
import Tags from "./Views/Tags.js"
import Search from './Views/Search.js';
import Groups from './Views/Groups.js';
import Courses from './Views/Courses.js';
import NotificationsView from './Views/NotificationsView.js';
import SinglePost from './Views/SinglePost.js'
import * as Device from 'expo-device';
import * as Notifications from 'expo-notifications';
import API from './API.js';
import i18n from "./i18nMessages.js";
import NewPostView from './Views/NewPost.js';
import { TouchableOpacity, View, Image, KeyboardAvoidingView } from 'react-native';
import MenuView from './Views/Menu.js';
import ProfileSettings from './Views/ProfileSettings.js';
import InviteView from './Views/Invite.js';
import MediaView from './components/MediaView.js';
import { useSnapshot } from 'valtio';
import GlobalState from './contexts/GlobalState.js';
import NewGroup from './Views/NewGroup.js';
import Slideshow from './Views/Slideshow.js';
import SongPlayer from './Views/SongPlayer.js';
import GlobalChat from './Views/GlobalChat.js';
import BiblePicker from './Views/BiblePicker.js';
import BibleChapterView from './Views/BibleChapterView.js';
import { Platform } from 'react-native';
import { PostHogProvider } from 'posthog-react-native'
import * as Updates from 'expo-updates';
import { useNavigation } from '@react-navigation/native';
import * as Linking from 'expo-linking';


const Tab = createBottomTabNavigator();
const Stack = createNativeStackNavigator();
const theme = {
    ...DefaultTheme,
    roundness: 2,
    colors: {
        ...DefaultTheme.colors,
        primary: '#000000',
        accent: '#0d6efd',
        background: "#edf2f7",
    },
};

Notifications.setNotificationHandler({
    handleNotification: async () => {
        //console.log("notif background");
        return {
            shouldShowAlert: true,
            shouldPlaySound: true,
            shouldSetBadge: true,
        };
    },
});

const parseTokenLoginUrl = (url = "") => {
    const parsed = Linking.parse(url);
    const token = typeof parsed?.queryParams?.token === "string" ? parsed.queryParams.token.trim() : "";
    if (!token) return null;
    const hostOrPath = `${parsed?.hostname || ""}/${parsed?.path || ""}`.toLowerCase();
    if (!hostOrPath.includes("token-login")) return null;
    return token;
};

async function registerForPushNotificationsAsync() {

    if (Platform.OS === 'android') {
        Notifications.setNotificationChannelAsync('default', {
            name: 'default',
            importance: Notifications.AndroidImportance.MAX,
            vibrationPattern: [0, 250, 250, 250],
            lightColor: '#FF231F7C',
        });
    }

    let token;
    if (Device.isDevice) {
        const { status: existingStatus } = await Notifications.getPermissionsAsync();
        let finalStatus = existingStatus;
        if (existingStatus !== 'granted') {
            const { status } = await Notifications.requestPermissionsAsync();
            finalStatus = status;
        }
        if (finalStatus !== 'granted') {
            //alert('Failed to get push token for push notification!');
            return;
        }
        token = (await Notifications.getExpoPushTokenAsync({ projectId: "c2bb4d4e-4d4d-4f34-a873-7cad78c6023c", })).data;
    } else {
        //alert('Must use physical device for Push Notifications');
    }
    return token;
}


const MainNavigation = ({ route }) => {
    const gState = useSnapshot(GlobalState);
    const viewer = gState.me;
    const [expoPushToken, setExpoPushToken] = useState('');
    const [notification, setNotification] = useState(false);
    const notificationListener = useRef();
    const responseListener = useRef();
    const mainNavigation = useNavigation();
    useEffect(() => {
        registerForPushNotificationsAsync().then(async (token) => {
            let isLoggedIn = await API.isLoggedIn();
            if (!isLoggedIn) return false;
            if (!token) return false;
            API.registerToken(token);
            return setExpoPushToken(token);
        });

        // This listener is fired whenever a notification is received while the app is foregrounded
        notificationListener.current = Notifications.addNotificationReceivedListener(notification => {
            //console.log("got notif", notification);
            setNotification(notification);
        });

        // This listener is fired whenever a user taps on or interacts with a notification (works when app is foregrounded, backgrounded, or killed)
        responseListener.current = Notifications.addNotificationResponseReceivedListener(response => {
            const data = response.notification.request.content.data;
            if (data && Object.keys(data).length > 0) {
                try {
                    if (data.profile_id) {
                        mainNavigation.navigate("Profile", { profileid: data.profile_id });
                    }
                    if (data.post_id) {
                        mainNavigation.navigate("SinglePost", { postid: data.post_id });
                    }
                    if (data.type === "chat") {
                        mainNavigation.navigate("GlobalChat");
                    }
                } catch (error) {
                    alert("Error: " + error);
                }
            } else {
                //alert("Notification clicked but no data found.");
            }
        });

        const interval = setInterval(async () => {
            if (await API.isLoggedIn()) {
                let me = await API.getMe();
                //console.log(JSON.stringify(viewer), JSON.stringify(me))
                if (JSON.stringify(viewer) !== JSON.stringify(me)) {
                    console.log("Updating me")
                    GlobalState.me = me;
                }
            }
        }, 30000);

        return () => {
            Notifications.removeNotificationSubscription(notificationListener.current);
            Notifications.removeNotificationSubscription(responseListener.current);
            clearInterval(interval);
        };
    }, []);


    return (
        <>
            <Tab.Navigator initialRouteName="Home"
                activeColor="#0d6efd"
                inactiveColor="#FFFFFF"
            >
                <Tab.Screen
                    name="Feed"
                    component={Feed}
                    options={{
                        tabBarLabel: i18n.t("message.feed"),
                        tabBarIcon: ({ color }) => (
                            <MaterialIcons name="home" color={color} size={26} />
                        ),
                        header: () => { <></> },
                    }}
                    listeners={({ navigation, route }) => ({
                        tabPress: e => {
                            navigation.navigate('Feed', { reRender: Math.random() });
                        },
                    })}

                />
                <Tab.Screen
                    name="Groups"
                    component={Groups}
                    options={{
                        tabBarLabel: i18n.t('message.groups'),
                        tabBarIcon: ({ color }) => (
                            <MaterialIcons name="groups" color={color} size={26} />
                        ),
                        header: () => { <></> },
                    }}
                />
                <Tab.Screen
                    name="NewPost"
                    component={NewPostView}
                    options={{
                        tabBarLabel: '',//i18n.t('message.statusUpdate'),
                        tabBarIcon: ({ color, route }) => (
                            <MaterialIcons name={true !== "NewPost" ? "add" : "send"} color="#fff" size={26} />
                        ),
                        tabBarButton: (props) => (
                            <TouchableOpacity
                                onPress={props.onPress}
                                style={{
                                    top: -17,
                                    justifyContent: 'center',
                                    alignItems: 'center',

                                }}
                            >
                                <View style={{
                                    height: 56,
                                    width: 56,
                                    borderRadius: 28,
                                    backgroundColor: "#c44d56",
                                    paddingTop: 13
                                }}>{props.children}</View>
                            </TouchableOpacity>
                        ),
                        header: () => { <></> },
                    }}
                    listeners={({ navigation, route }) => ({
                        tabPress: e => {
                            //console.log("listener", route)
                            if (route.name !== "NewPost") {
                                // Target current profile if one in route
                                navigation.navigate('NewPost', { toProfile: route.params?.profileid });
                            } else {
                                //Send function on child 
                                navigation.navigate('NewPost', { toProfile: route.params?.profileid, sendNow: true });
                            }
                        },
                    })}
                />
                <Tab.Screen
                    name="Courses"
                    component={Courses}
                    options={{
                        tabBarLabel: i18n.t('message.courses'),
                        tabBarIcon: ({ color }) => (
                            <MaterialIcons name="subscriptions" color={color} size={26} />
                        ),
                        header: () => { <></> },
                    }}
                />
                <Tab.Screen
                    name="MyProfile"
                    component={Profile}
                    options={{
                        tabBarLabel: viewer.profile?.firstName,
                        tabBarIcon: ({ color }) => (
                            <MaterialIcons name="person" color={color} size={26} />
                        ),
                        header: () => { <></> },
                    }}
                    listeners={({ navigation, route }) => ({
                        tabPress: e => {
                            navigation.navigate('MyProfile', { profileid: viewer._id });
                        },
                    })}
                />
                {/*
            <Tab.Screen
                name="Logout"
                component={Login}
                options={{
                    tabBarLabel: i18n.t('message.logout'),
                    tabBarIcon: ({ color }) => (
                        <MaterialIcons name="logout" color={color} size={26} />
                    ),
                    header: () => { <></> },
                }}
            />*/}

            </Tab.Navigator>
        </>
    )
}

export default function App() {
    const appState = useSnapshot(GlobalState);
    const viewer = appState.me || {};
    const navigationRef = useRef(null);
    const pendingTokenRef = useRef(null);
    const hasUnviewedNotifications = Array.isArray(viewer?.notifications)
        ? viewer.notifications.some((n) => n && n.viewed !== true)
        : false;

    useEffect(() => {
        const routeTokenLogin = (url) => {
            const token = parseTokenLoginUrl(url);
            if (!token) return;
            if (!navigationRef.current) {
                pendingTokenRef.current = token;
                return;
            }
            navigationRef.current.navigate("Login", { token });
        };

        Linking.getInitialURL().then((url) => {
            if (!url) return;
            routeTokenLogin(url);
        });

        const sub = Linking.addEventListener("url", ({ url }) => {
            routeTokenLogin(url);
        });

        return () => {
            sub.remove();
        };
    }, []);

    return (
        <PaperProvider settings={{
            icon: props => <MaterialIcons {...props} />,
        }} theme={theme}>
            <KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : 'height'} style={{ flex: 1 }}>
                <NavigationContainer
                    ref={navigationRef}
                    onReady={() => {
                        if (!pendingTokenRef.current) return;
                        const token = pendingTokenRef.current;
                        pendingTokenRef.current = null;
                        navigationRef.current?.navigate("Login", { token });
                    }}
                >
                    <PostHogProvider apiKey="phc_2zh7SoBDi83vaa7Rz4YWTXWCjV0bOLfiqRyUo2mkf0b" autocapture>
                        <StatusBar style="dark" />
                        <Stack.Navigator screenOptions={{
                            header: (props) => {
                                return (
                                    <Appbar.Header style={{ backgroundColor: '#fff' }}>
                                        {props.navigation.canGoBack() ? <Appbar.BackAction onPress={() => {
                                            props.navigation.goBack();
                                        }} /> : <Appbar.Action icon="menu" style={{ padding: 0, margin: 0 }} onPress={() => { props.navigation.navigate('Menu'); }} />}
                                        <Appbar.Content title="EMI Fellowship" titleStyle={{}} />
                                        <Appbar.Action icon="chat" onPress={() => {
                                            props.navigation.navigate("GlobalChat");
                                        }} onLongPress={() => {
                                            props.navigation.navigate("SongPlayer");
                                        }} />
                                        <Appbar.Action icon="search" onPress={() => { props.navigation.navigate("Search") }} />
                                        <Appbar.Action
                                            icon={({ size, color }) => (
                                                <View style={{ width: size, height: size, justifyContent: "center", alignItems: "center" }}>
                                                    <MaterialIcons name="notifications" size={size} color={color} />
                                                    {hasUnviewedNotifications ? (
                                                        <View style={{
                                                            position: "absolute",
                                                            top: 2,
                                                            right: 0,
                                                            width: 8,
                                                            height: 8,
                                                            borderRadius: 4,
                                                            backgroundColor: "#d93025",
                                                        }} />
                                                    ) : <></>}
                                                </View>
                                            )}
                                            onPress={() => { props.navigation.navigate("Notifications") }}
                                        />
                                    </Appbar.Header>
                                )
                            },
                        }}>
                            <Stack.Screen
                                name="MainNavigation"
                                component={MainNavigation}
                            />
                            <Stack.Screen
                                name="Profile"
                                component={Profile}
                            />
                            <Stack.Screen
                                name="Tags"
                                component={Tags}
                            />
                            <Stack.Screen
                                name="NewPost"
                                component={NewPostView}
                            />
                            <Stack.Screen
                                name="NewGroup"
                                component={NewGroup}
                            />
                            <Stack.Screen
                                name="Search"
                                component={Search}
                            />
                            <Stack.Screen
                                name="ProfileSettings"
                                component={ProfileSettings}
                            />
                            <Stack.Screen
                                name="Invite"
                                component={InviteView}
                            />
                            <Stack.Screen
                                name="Menu"
                                component={MenuView}
                            />
                            <Stack.Screen
                                name="Notifications"
                                component={NotificationsView}
                            />
                            <Stack.Screen
                                name="Slideshow"
                                component={Slideshow}
                            //options={{ headerShown: false }}
                            />
                            <Stack.Screen
                                name="SongPlayer"
                                component={SongPlayer}
                            />
                            <Stack.Screen
                                name="GlobalChat"
                                component={GlobalChat}
                            />
                            <Stack.Screen
                                name="BiblePicker"
                                component={BiblePicker}
                            />
                            <Stack.Screen
                                name="BibleChapter"
                                component={BibleChapterView}
                                options={{ headerShown: false }}
                            />
                            <Stack.Screen name="SinglePost" component={SinglePost} />
                            <Stack.Screen name="Login" component={Login} options={{ headerShown: false }} />
                            <Tab.Screen name="Logout" component={Login} />
                        </Stack.Navigator>
                    </PostHogProvider>
                </NavigationContainer>
                <MediaView></MediaView>
            </KeyboardAvoidingView>
        </PaperProvider>
    );
}