import React from "react";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import { Ionicons } from "@expo/vector-icons";
import BrandLockup from "../components/BrandLockup";
import EntryLandingScreen from "../screens/EntryLandingScreen";
import AgencyJoinScreen from "../screens/AgencyJoinScreen";
import AgencyCreateScreen from "../screens/AgencyCreateScreen";
import LobbyScreen from "../screens/LobbyScreen";
import PlayerHomeScreen from "../screens/PlayerHomeScreen";
import PlayerTransfersScreen from "../screens/PlayerTransfersScreen";
import BankerDashboardScreen from "../screens/BankerDashboardScreen";
import BankerToolsScreen from "../screens/BankerToolsScreen";
import ChatListScreen from "../screens/chat/ChatListScreen";
import ChatThreadScreen from "../screens/chat/ChatThreadScreen";
import ChatNewScreen from "../screens/chat/ChatNewScreen";
import { useI18n } from "../i18n";
import { useTheme } from "../theme";
import ExitGameButton from "../components/ExitGameButton";
import type {
  BankerTabsParamList,
  ChatStackParamList,
  PlayerTabsParamList,
  RootStackParamList,
} from "./types";

const RootStack = createNativeStackNavigator<RootStackParamList>();
const PlayerTabs = createBottomTabNavigator<PlayerTabsParamList>();
const BankerTabs = createBottomTabNavigator<BankerTabsParamList>();
const ChatStack = createNativeStackNavigator<ChatStackParamList>();

function buildHeaderTitle(section: string) {
  return () => <BrandLockup variant="header" subtitle={section} />;
}

function ChatStackNavigator() {
  const { t } = useI18n();
  const theme = useTheme();
  return (
    <ChatStack.Navigator
      screenOptions={{
        headerStyle: { backgroundColor: theme.colors.headerBackground },
        headerTintColor: theme.colors.headerText,
        headerShadowVisible: false,
        contentStyle: { backgroundColor: theme.colors.background },
        headerRight: () => <ExitGameButton />,
        headerTitleAlign: "left",
      }}
    >
      <ChatStack.Screen
        name="ChatList"
        component={ChatListScreen}
        options={{ headerTitle: buildHeaderTitle(t("chat.title")) }}
      />
      <ChatStack.Screen
        name="ChatThread"
        component={ChatThreadScreen}
        options={{ headerTitle: buildHeaderTitle(t("tabs.chat")) }}
      />
      <ChatStack.Screen
        name="ChatNew"
        component={ChatNewScreen}
        options={{ headerTitle: buildHeaderTitle(t("chat.newTitle")) }}
      />
    </ChatStack.Navigator>
  );
}

export function PlayerTabsNavigator() {
  const { t } = useI18n();
  const theme = useTheme();
  return (
    <PlayerTabs.Navigator
      screenOptions={{
        tabBarStyle: {
          paddingBottom: 6,
          height: 60,
          backgroundColor: theme.colors.surface,
          borderTopColor: theme.colors.border,
        },
        tabBarActiveTintColor: theme.colors.tabActive,
        tabBarInactiveTintColor: theme.colors.tabInactive,
        headerStyle: { backgroundColor: theme.colors.headerBackground },
        headerTintColor: theme.colors.headerText,
        headerRight: () => <ExitGameButton />,
        headerTitleAlign: "left",
      }}
    >
      <PlayerTabs.Screen
        name="PlayerHome"
        component={PlayerHomeScreen}
        options={{
          title: t("tabs.home"),
          headerTitle: buildHeaderTitle(t("tabs.home")),
          tabBarIcon: ({ color, size }) => (
            <Ionicons name="wallet-outline" size={size} color={color} />
          ),
        }}
      />
      <PlayerTabs.Screen
        name="PlayerTransfers"
        component={PlayerTransfersScreen}
        options={{
          title: t("tabs.transfers"),
          headerTitle: buildHeaderTitle(t("tabs.transfers")),
          tabBarIcon: ({ color, size }) => (
            <Ionicons name="swap-horizontal-outline" size={size} color={color} />
          ),
        }}
      />
      <PlayerTabs.Screen
        name="PlayerChat"
        component={ChatStackNavigator}
        options={{
          headerShown: false,
          title: t("tabs.chat"),
          tabBarIcon: ({ color, size }) => (
            <Ionicons name="chatbubble-ellipses-outline" size={size} color={color} />
          ),
        }}
      />
    </PlayerTabs.Navigator>
  );
}

export function BankerTabsNavigator() {
  const { t } = useI18n();
  const theme = useTheme();
  return (
    <BankerTabs.Navigator
      screenOptions={{
        tabBarStyle: {
          paddingBottom: 6,
          height: 60,
          backgroundColor: theme.colors.surface,
          borderTopColor: theme.colors.border,
        },
        tabBarActiveTintColor: theme.colors.tabActive,
        tabBarInactiveTintColor: theme.colors.tabInactive,
        headerStyle: { backgroundColor: theme.colors.headerBackground },
        headerTintColor: theme.colors.headerText,
        headerRight: () => <ExitGameButton />,
        headerTitleAlign: "left",
      }}
    >
      <BankerTabs.Screen
        name="BankerDashboard"
        component={BankerDashboardScreen}
        options={{
          title: t("tabs.dashboard"),
          headerTitle: buildHeaderTitle(t("tabs.dashboard")),
          tabBarIcon: ({ color, size }) => (
            <Ionicons name="stats-chart-outline" size={size} color={color} />
          ),
        }}
      />
      <BankerTabs.Screen
        name="BankerTools"
        component={BankerToolsScreen}
        options={{
          title: t("tabs.tools"),
          headerTitle: buildHeaderTitle(t("tabs.tools")),
          tabBarIcon: ({ color, size }) => (
            <Ionicons name="construct-outline" size={size} color={color} />
          ),
        }}
      />
      <BankerTabs.Screen
        name="BankerChat"
        component={ChatStackNavigator}
        options={{
          headerShown: false,
          title: t("tabs.chat"),
          tabBarIcon: ({ color, size }) => (
            <Ionicons name="chatbubble-ellipses-outline" size={size} color={color} />
          ),
        }}
      />
    </BankerTabs.Navigator>
  );
}

export default function AppNavigator() {
  const theme = useTheme();
  return (
    <RootStack.Navigator
      initialRouteName="EntryLanding"
      screenOptions={{
        headerStyle: { backgroundColor: theme.colors.headerBackground },
        headerTintColor: theme.colors.headerText,
        headerShadowVisible: false,
        contentStyle: { backgroundColor: theme.colors.background },
      }}
    >
      <RootStack.Screen
        name="EntryLanding"
        component={EntryLandingScreen}
        options={{ headerShown: false }}
      />
      <RootStack.Screen
        name="AgencyJoin"
        component={AgencyJoinScreen}
        options={{ headerShown: false }}
      />
      <RootStack.Screen
        name="AgencyCreate"
        component={AgencyCreateScreen}
        options={{ headerShown: false }}
      />
      <RootStack.Screen
        name="Lobby"
        component={LobbyScreen}
        options={{ headerShown: false }}
      />
      <RootStack.Screen
        name="PlayerTabs"
        component={PlayerTabsNavigator}
        options={{ headerShown: false }}
      />
      <RootStack.Screen
        name="BankerTabs"
        component={BankerTabsNavigator}
        options={{ headerShown: false }}
      />
    </RootStack.Navigator>
  );
}
