import React from "react";
import {View} from "react-native";
import RealmContext from "./models/RealmContext";
import {StatusBar} from "expo-status-bar";
import {AMUITabBar} from "./components/AMUITabBar";
import {Server, WalletCards} from "lucide-react-native";
import {NavigationContainer} from "@react-navigation/native";
import {SafeAreaProvider} from "react-native-safe-area-context";
import {createBottomTabNavigator} from "@react-navigation/bottom-tabs";
import {createNativeStackNavigator} from "@react-navigation/native-stack";
import {DarkTheme as NavigationDarkTheme} from '@react-navigation/native';
import {JetBrainsMono_400Regular, useFonts} from "@expo-google-fonts/jetbrains-mono";
import {
    ActivityIndicator,
    adaptNavigationTheme,
    MD3DarkTheme,
    MD3Theme,
    PaperProvider,
    Paragraph
} from 'react-native-paper';

import CardAddModal from "./app/CardAddModal";
import ServerManager from "./app/ServerManager";
import CardManagerStack from "./app/CardManagerStack";
import {StatusBar} from "expo-status-bar";

// blend themes to be a combination of react-native-paper and shadcn/ui
const AMDarkTheme: MD3Theme = {
    ...MD3DarkTheme,
    roundness: 2,
    colors: {
        ...MD3DarkTheme.colors,
        primary: '#e11d48',
        secondary: "#dc2626",
        background: "#09090b",
        surface: "#1c1917",
    },
};

const {DarkTheme} = adaptNavigationTheme({
    reactNavigationDark: NavigationDarkTheme,
    materialDark: AMDarkTheme
});

const {RealmProvider} = RealmContext;
const Tab = createBottomTabNavigator();
const Stack = createNativeStackNavigator();

function AppContent() {
    return (<Tab.Navigator tabBar={p => <AMUITabBar {...p}/>} screenOptions={{headerShown: false}}>
        <Tab.Screen name="servers"
                    component={ServerManager}
                    options={{
                        title: 'Servers',
                        tabBarIcon: ({color, size}) => (<Server color={color} size={size}/>)
                    }}/>

        <Tab.Screen name="cards"
                    component={CardManagerStack}
                    options={{
                        title: "Cards",
                        tabBarIcon: ({color, size}) => (<WalletCards color={color} size={size}/>)
                    }}/>
    </Tab.Navigator>)
}

export default function AppRoot() {
    const [fontsLoaded] = useFonts({
        JetBrainsMono_400Regular
    });

    if (!fontsLoaded) {
        return (
            <View style={{flex: 1, justifyContent: "center", alignItems: "center", gap: 10}}>
                <ActivityIndicator animating/>
                <Paragraph>Starting AimeNet...</Paragraph>
            </View>
        )
    }
    
    return (
        <RealmProvider>
            <SafeAreaProvider>
                <PaperProvider theme={AMDarkTheme}>
                    <NavigationContainer theme={DarkTheme}>
                        <StatusBar/>
                        <Stack.Navigator initialRouteName="app-root">
                            {/* main app */}
                            <Stack.Screen name="app-root" component={AppContent} options={{headerShown: false}}/>

                            <Stack.Group screenOptions={{presentation: "modal"}}>
                                <Stack.Screen name="add-card" component={CardAddModal} options={{title: "Add Card"}}/>
                            </Stack.Group>
                        </Stack.Navigator>
                    </NavigationContainer>
                </PaperProvider>
            </SafeAreaProvider>
        </RealmProvider>
    )
}