import React from 'react';
import { StatusBar } from 'expo-status-bar';
import { NavigationContainer, DefaultTheme } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { Text, View } from 'react-native';
import ConnectScreen from './src/screens/ConnectScreen';
import RoomsScreen from './src/screens/RoomsScreen';
import CreateScreen from './src/screens/CreateScreen';
import JoinScreen from './src/screens/JoinScreen';
import SettingsScreen from './src/screens/SettingsScreen';

const Tab = createBottomTabNavigator();

const DarkTheme = {
  ...DefaultTheme,
  colors: {
    ...DefaultTheme.colors,
    primary: '#4CAF50',
    background: '#1a1a2e',
    card: '#16213e',
    text: '#e0e0e0',
    border: 'rgba(15, 52, 96, 0.6)',
    notification: '#e94560',
  },
};

const icons: Record<string, string> = {
  Connect: '🔗',
  Rooms: '🎮',
  Create: '🏠',
  Join: '🚀',
  Settings: '⚙️',
};

export default function App() {
  return (
    <NavigationContainer theme={DarkTheme}>
      <StatusBar style="light" />
      <Tab.Navigator
        screenOptions={({ route }) => ({
          headerStyle: { backgroundColor: '#16213e', elevation: 0, shadowOpacity: 0 },
          headerTintColor: '#e0e0e0',
          headerTitleStyle: { fontWeight: '700' },
          tabBarStyle: {
            backgroundColor: '#16213e',
            borderTopColor: 'rgba(15, 52, 96, 0.6)',
            height: 60,
            paddingBottom: 8,
          },
          tabBarActiveTintColor: '#4CAF50',
          tabBarInactiveTintColor: '#8a8a9a',
          tabBarIcon: ({ color }) => (
            <Text style={{ fontSize: 20 }}>{icons[route.name] || '📱'}</Text>
          ),
        })}
      >
        <Tab.Screen name="Connect" component={ConnectScreen}
          options={{ title: '连接', headerTitle: 'FunConnect' }} />
        <Tab.Screen name="Rooms" component={RoomsScreen}
          options={{ title: '房间', headerTitle: '房间列表' }} />
        <Tab.Screen name="Create" component={CreateScreen}
          options={{ title: '创建', headerTitle: '创建房间' }} />
        <Tab.Screen name="Join" component={JoinScreen}
          options={{ title: '加入', headerTitle: '加入房间' }} />
        <Tab.Screen name="Settings" component={SettingsScreen}
          options={{ title: '设置', headerTitle: '设置' }} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}