import React from 'react';
import { StatusBar } from 'expo-status-bar';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { Text } from 'react-native';

import { DashboardScreen } from './screens/DashboardScreen';
import { LiveFeedScreen } from './screens/LiveFeedScreen';
import { SkillsScreen } from './screens/SkillsScreen';
import { SettingsScreen } from './screens/SettingsScreen';

type TabParamList = {
  Dashboard: undefined;
  Feed: undefined;
  Skills: undefined;
  Settings: undefined;
};

const Tab = createBottomTabNavigator<TabParamList>();

const COLORS = {
  bg: '#0f1117',
  surface: '#1a1d27',
  border: '#2a2d3a',
  text: '#c9cdd8',
  accent: '#7c3aed',
  inactive: '#6b7280',
};

interface TabIconProps {
  emoji: string;
  focused: boolean;
}

function TabIcon({ emoji, focused }: TabIconProps): React.JSX.Element {
  return (
    <Text
      style={{
        fontSize: 20,
        opacity: focused ? 1 : 0.55,
      }}
    >
      {emoji}
    </Text>
  );
}

export default function App(): React.JSX.Element {
  return (
    <SafeAreaProvider>
      <StatusBar style="light" backgroundColor={COLORS.bg} />
      <NavigationContainer
        theme={{
          dark: true,
          colors: {
            primary: COLORS.accent,
            background: COLORS.bg,
            card: COLORS.surface,
            text: COLORS.text,
            border: COLORS.border,
            notification: COLORS.accent,
          },
          fonts: {
            regular: { fontFamily: 'System', fontWeight: '400' },
            medium: { fontFamily: 'System', fontWeight: '500' },
            bold: { fontFamily: 'System', fontWeight: '700' },
            heavy: { fontFamily: 'System', fontWeight: '900' },
          },
        }}
      >
        <Tab.Navigator
          screenOptions={{
            tabBarStyle: {
              backgroundColor: COLORS.surface,
              borderTopColor: COLORS.border,
              borderTopWidth: 1,
              height: 60,
              paddingBottom: 6,
              paddingTop: 6,
            },
            tabBarActiveTintColor: COLORS.accent,
            tabBarInactiveTintColor: COLORS.inactive,
            tabBarLabelStyle: {
              fontSize: 10,
              fontWeight: '600',
              marginTop: 2,
            },
            headerStyle: {
              backgroundColor: COLORS.surface,
              borderBottomColor: COLORS.border,
              borderBottomWidth: 1,
            },
            headerTitleStyle: {
              color: COLORS.text,
              fontSize: 16,
              fontWeight: '700',
            },
            headerTintColor: COLORS.accent,
          }}
        >
          <Tab.Screen
            name="Dashboard"
            component={DashboardScreen}
            options={{
              title: 'Dashboard',
              tabBarIcon: ({ focused }) => <TabIcon emoji="📊" focused={focused} />,
              headerTitle: 'BIBIVIDI',
            }}
          />
          <Tab.Screen
            name="Feed"
            component={LiveFeedScreen}
            options={{
              title: 'Live Feed',
              tabBarIcon: ({ focused }) => <TabIcon emoji="⚡" focused={focused} />,
              headerTitle: 'Live Feed',
            }}
          />
          <Tab.Screen
            name="Skills"
            component={SkillsScreen}
            options={{
              title: 'Skills',
              tabBarIcon: ({ focused }) => <TabIcon emoji="🧩" focused={focused} />,
              headerTitle: 'Skills',
            }}
          />
          <Tab.Screen
            name="Settings"
            component={SettingsScreen}
            options={{
              title: 'Settings',
              tabBarIcon: ({ focused }) => <TabIcon emoji="⚙️" focused={focused} />,
              headerTitle: 'Settings',
            }}
          />
        </Tab.Navigator>
      </NavigationContainer>
    </SafeAreaProvider>
  );
}
