import "./globals.css";

import React from "react";
import { useColorScheme } from "react-native";
import { NavigationContainer, DefaultTheme, DarkTheme } from "@react-navigation/native";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import { Ionicons } from "@expo/vector-icons";

import SubscribedFeed from "@/screens/SubscribedFeed";
import AllFeed from "@/screens/AllFeed";
import Profile from "@/screens/Profile";
import {enableScreens} from "react-native-screens";
import {SafeAreaProvider} from "react-native-safe-area-context";
import AuthGate from "@/screens/AuthGate";
import {AuthProvider, useAuth} from "@/context/AuthContext";


// Must be called before any navigator renders
enableScreens();

const Tab = createBottomTabNavigator();

const LIGHT_TAB = {
    bg:         "#FFFFFF",
    border:     "#E8E2D5",
    active:     "#C4622D",
    inactive:   "#8A8278",
    label:      "#1A1714",
};
const DARK_TAB = {
    bg:         "#161513",
    border:     "#2C2A27",
    active:     "#E07B45",
    inactive:   "#706D67",
    label:      "#F0EDE8",
};


function ProfileTab() {
    const { user, loading } = useAuth();
    if (loading) return null;
    return user ? <Profile /> : <AuthGate />;
}

export default function App() {
    const scheme = useColorScheme();
    const dark = scheme === "dark";
    const tab = dark ? DARK_TAB : LIGHT_TAB;

    const navTheme = dark
        ? { ...DarkTheme, colors: { ...DarkTheme.colors, background: "#0E0D0C" } }
        : { ...DefaultTheme, colors: { ...DefaultTheme.colors, background: "#FDFAF5" } };

    return (
        <AuthProvider>
        <SafeAreaProvider>
            <NavigationContainer theme={navTheme}>
                <Tab.Navigator
                    screenOptions={({ route }) => ({
                        headerShown: false,

                        tabBarStyle: {
                            backgroundColor: tab.bg,
                            borderTopColor: tab.border,
                            borderTopWidth: 1,
                            height: 60,
                            paddingBottom: 8,
                            paddingTop: 6,
                        },

                        tabBarActiveTintColor:   tab.active,
                        tabBarInactiveTintColor: tab.inactive,

                        tabBarLabelStyle: {
                            fontSize: 10,
                            fontWeight: "600",
                            letterSpacing: 0.3,
                        },

                        tabBarIcon: ({ focused, color, size }) => {
                            const icons: Record<
                                string,
                                { active: keyof typeof Ionicons.glyphMap; inactive: keyof typeof Ionicons.glyphMap }
                            > = {
                                "Subscribed":  { active: "bookmark",         inactive: "bookmark-outline" },
                                "Discover":    { active: "compass",          inactive: "compass-outline" },
                                "Profile":     { active: "person-circle",    inactive: "person-circle-outline" },
                            };
                            const set = icons[route.name];

                            return (
                                <Ionicons
                                    name={focused ? set.active : set.inactive}
                                    size={focused ? size + 1 : size}
                                    color={color}
                                />
                            );
                        },
                    })}
                >
                    <Tab.Screen
                        name="Subscribed"
                        component={SubscribedFeed}
                        options={{ title: "My Feed" }}
                    />
                    <Tab.Screen
                        name="Discover"
                        component={AllFeed}
                        options={{ title: "Discover" }}
                    />
                    <Tab.Screen
                        name="Profile"
                        component={ProfileTab}
                        options={{ title: "Profile" }}
                    />
                </Tab.Navigator>
            </NavigationContainer>
        </SafeAreaProvider>

            </AuthProvider>
    );
}