import React from "react";
import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import { useAuthStore } from "../stores/authStore";
import { useSettingsStore, getFontSize } from "../stores/settingsStore";
import { colors } from "../theme";

// Screens
import LoginScreen from "../screens/auth/LoginScreen";
import HomeScreen from "../screens/home/HomeScreen";
import ChatListScreen from "../screens/chat/ChatListScreen";
import ChatDetailScreen from "../screens/chat/ChatDetailScreen";
import ConstitutionHomeScreen from "../screens/constitution/ConstitutionHomeScreen";
import ConstitutionTestScreen from "../screens/constitution/ConstitutionTestScreen";
import ConstitutionResultScreen from "../screens/constitution/ConstitutionResultScreen";
import ProfileScreen from "../screens/profile/ProfileScreen";
import HealthProfileScreen from "../screens/profile/HealthProfileScreen";
import HealthNewsScreen from "../screens/news/HealthNewsScreen";

// Icons (using text for simplicity)
import { Text, View } from "react-native";

const Stack = createNativeStackNavigator();
const Tab = createBottomTabNavigator();
const ChatStack = createNativeStackNavigator();
const ConstitutionStack = createNativeStackNavigator();
const HomeStack = createNativeStackNavigator();
const ProfileStack = createNativeStackNavigator();

function TabIcon({
  label,
  focused,
  elderMode,
}: {
  label: string;
  focused: boolean;
  elderMode: boolean;
}) {
  const icons: Record<string, string> = {
    首页: "🏠",
    问答: "💬",
    体质: "📊",
    我的: "👤",
  };
  const fontSize = elderMode ? 24 : 20;
  const textSize = elderMode ? 12 : 10;

  return (
    <View style={{ alignItems: "center" }}>
      <Text style={{ fontSize }}>{icons[label]}</Text>
      <Text
        style={{
          fontSize: textSize,
          color: focused ? colors.primary : colors.textHint,
          marginTop: 2,
        }}
      >
        {label}
      </Text>
    </View>
  );
}

function HomeStackNavigator() {
  return (
    <HomeStack.Navigator screenOptions={{ headerShown: false }}>
      <HomeStack.Screen name="HomeMain" component={HomeScreen} />
      <HomeStack.Screen name="HealthNews" component={HealthNewsScreen} />
    </HomeStack.Navigator>
  );
}

function ChatStackNavigator() {
  return (
    <ChatStack.Navigator screenOptions={{ headerShown: false }}>
      <ChatStack.Screen name="ChatList" component={ChatListScreen} />
      <ChatStack.Screen name="ChatDetail" component={ChatDetailScreen} />
    </ChatStack.Navigator>
  );
}

function ConstitutionStackNavigator() {
  return (
    <ConstitutionStack.Navigator screenOptions={{ headerShown: false }}>
      <ConstitutionStack.Screen
        name="ConstitutionHome"
        component={ConstitutionHomeScreen}
      />
      <ConstitutionStack.Screen
        name="ConstitutionTest"
        component={ConstitutionTestScreen}
      />
      <ConstitutionStack.Screen
        name="ConstitutionResult"
        component={ConstitutionResultScreen}
      />
    </ConstitutionStack.Navigator>
  );
}

function ProfileStackNavigator() {
  return (
    <ProfileStack.Navigator screenOptions={{ headerShown: false }}>
      <ProfileStack.Screen name="ProfileMain" component={ProfileScreen} />
      <ProfileStack.Screen
        name="HealthProfile"
        component={HealthProfileScreen}
      />
    </ProfileStack.Navigator>
  );
}

function MainTabs() {
  const { elderMode } = useSettingsStore();

  return (
    <Tab.Navigator
      screenOptions={{
        headerShown: false,
        tabBarShowLabel: false,
        tabBarStyle: {
          height: elderMode ? 70 : 60,
          paddingBottom: elderMode ? 10 : 8,
          paddingTop: elderMode ? 10 : 8,
        },
      }}
    >
      <Tab.Screen
        name="Home"
        component={HomeStackNavigator}
        options={{
          tabBarIcon: ({ focused }) => (
            <TabIcon label="首页" focused={focused} elderMode={elderMode} />
          ),
        }}
      />
      <Tab.Screen
        name="Chat"
        component={ChatStackNavigator}
        options={{
          tabBarIcon: ({ focused }) => (
            <TabIcon label="问答" focused={focused} elderMode={elderMode} />
          ),
        }}
      />
      <Tab.Screen
        name="Constitution"
        component={ConstitutionStackNavigator}
        options={{
          tabBarIcon: ({ focused }) => (
            <TabIcon label="体质" focused={focused} elderMode={elderMode} />
          ),
        }}
      />
      <Tab.Screen
        name="Profile"
        component={ProfileStackNavigator}
        options={{
          tabBarIcon: ({ focused }) => (
            <TabIcon label="我的" focused={focused} elderMode={elderMode} />
          ),
        }}
      />
    </Tab.Navigator>
  );
}

export default function Navigation() {
  const { isLoggedIn } = useAuthStore();

  return (
    <NavigationContainer>
      <Stack.Navigator screenOptions={{ headerShown: false }}>
        {!isLoggedIn ? (
          <Stack.Screen name="Login" component={LoginScreen} />
        ) : (
          <Stack.Screen name="Main" component={MainTabs} />
        )}
      </Stack.Navigator>
    </NavigationContainer>
  );
}