import "react-native-gesture-handler";
import React, { useState } from "react";
import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";
import { GestureHandlerRootView } from "react-native-gesture-handler";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";

// Screens
import SplashScreen from "./screens/SplashScreen";
import Onboarding from "./screens/Onboarding";
import AksesAkun from "./screens/AksesAkun"; // Pastikan ini sudah diimport dengan benar
// import masuk from "./screens/masuk";
// import Home from "./screens/AksesWarga/Home";
import Home from "./screens/AksesWarga/Home";
import EcoMapCoinExchangeScreen from "./screens/AksesWarga/EcoMapCoinExchangeScreen";
import NotifikasiScreen from "./screens/AksesWarga/NotifikasiScreen";
import ProfilScreen from "./screens/AksesWarga/ProfilScreen";
import AksesWargaNavigator from "./Navigation/AksesWargaNavigator";
import AksesAdminNavigator from "./Navigation/AksesAdminNavigator";
import BottomTab from "./Navigation/BottomTab";
import AdminScreen from "./screens/AksesAdmin/AdminScreen";
import masuk from "./screens/masuk";
import BottomNav from "./Navigation/BottomNav";

const Stack = createStackNavigator();
const Tab = createBottomTabNavigator();

// --- Bottom Tab Navigator ---
function MyTabs() {
  return (
    <Tab.Navigator
      initialRouteName="Home"
      screenOptions={({ route }) => ({
        headerShown: false,
        tabBarActiveTintColor: "#1B5E20",
        tabBarInactiveTintColor: "#A5D6A7",
        tabBarStyle: {
          backgroundColor: "#2E7D32",
          borderTopLeftRadius: 20,
          borderTopRightRadius: 20,
          height: 60,
          paddingBottom: 5,
        },
        tabBarLabelStyle: {
          fontSize: 12,
          fontWeight: "600",
          marginBottom: 5,
        },
        tabBarIcon: ({ focused, color, size }) => {
          size = 24;
          if (route.name === "Home") {
            return (
              <Ionicons
                name={focused ? "home" : "home-outline"}
                size={size}
                color={color}
              />
            );
          } else if (route.name === "EcoMapCoinExchangeScreen") {
            return <FontAwesome5 name="coins" size={size} color={color} />;
          } else if (route.name === "NotifikasiScreen") {
            return (
              <Ionicons
                name={focused ? "notifications" : "notifications-outline"}
                size={size}
                color={color}
              />
            );
          } else if (route.name === "ProfilScreen") {
            return (
              <MaterialCommunityIcons
                name={focused ? "account" : "account-outline"}
                size={size}
                color={color}
              />
            );
          }
        },
      })}
    >
      <Tab.Screen name="Home" component={Home} />
      <Tab.Screen name="TukarKoin" component={EcoMapCoinExchangeScreen} />
      <Tab.Screen name="Notifikasi" component={NotifikasiScreen} />
      <Tab.Screen name="Profil" component={ProfilScreen} />
    </Tab.Navigator>
  );
}

export default function App() {
  //   // State untuk menyimpan role yang dipilih
  //   const [selectedRole, setSelectedRole] = useState(null);
  //   // State login user
  //   const [isLoggedIn, setIsLoggedIn] = useState(false);

  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <NavigationContainer>
        <Stack.Navigator
          initialRouteName="Splash"
          screenOptions={{ headerShown: false }}
        >
          {/* Splash Screen */}
          <Stack.Screen name="Splash" component={SplashScreen} />

          {/* Onboarding Screen */}
          <Stack.Screen name="Onboarding" component={Onboarding} />
          <Stack.Screen name="AksesAkun" component={AksesAkun} />
          {/* <Stack.Screen name="masuk" component={masuk} /> */}
          {/* <Stack.Screen name="Home" component={Home} /> */}
          {/* <Stack.Screen
            name="Home"
            component={BottomTab} // Menampilkan BottomTabNavigator di sini
            options={{ headerShown: false }} // Menyembunyikan header jika perlu
          /> */}
          <Stack.Screen
            name="AksesAdminNavigator"
            component={AksesAdminNavigator}
          />
          <Stack.Screen
            name="AksesWargaNavigator"
            component={AksesWargaNavigator}
          />
        </Stack.Navigator>
      </NavigationContainer>
    </GestureHandlerRootView>
  );
}