import { useMemo, useState } from "react";
import { SafeAreaView, StatusBar, StyleSheet, View } from "react-native";
import { BottomNavigation } from "../components/BottomNavigation";
import { businesses } from "../data/mockData";
import { BusinessDetailScreen } from "../screens/BusinessDetailScreen";
import { DealsScreen } from "../screens/DealsScreen";
import { EventsScreen } from "../screens/EventsScreen";
import { ExploreScreen } from "../screens/ExploreScreen";
import { FavoritesScreen } from "../screens/FavoritesScreen";
import { GiftCardsScreen } from "../screens/GiftCardsScreen";
import { HomeScreen } from "../screens/HomeScreen";
import { LoyaltyScreen } from "../screens/LoyaltyScreen";
import { NewsScreen } from "../screens/NewsScreen";
import { PassLocalScreen } from "../screens/PassLocalScreen";
import { ProfileScreen } from "../screens/ProfileScreen";
import { colors } from "../theme/colors";
import type { Business, CategoryId, ScreenId } from "../types/domain";

const bottomTabScreens: ScreenId[] = ["home", "explore", "pass", "favorites", "profile"];

export function AppNavigator() {
  const [activeScreen, setActiveScreen] = useState<ScreenId>("home");
  const [selectedBusiness, setSelectedBusiness] = useState<Business>(businesses[0]);
  const [exploreCategory, setExploreCategory] = useState<CategoryId | undefined>();
  const [favoriteIds, setFavoriteIds] = useState<string[]>(["maison-lison"]);

  const tabActiveScreen = useMemo<ScreenId>(() => {
    if (bottomTabScreens.includes(activeScreen)) {
      return activeScreen;
    }

    if (activeScreen === "business") {
      return "explore";
    }

    if (activeScreen === "loyalty" || activeScreen === "giftCards") {
      return "pass";
    }

    return "home";
  }, [activeScreen]);

  function navigate(screen: ScreenId) {
    if (screen !== "explore") {
      setExploreCategory(undefined);
    }
    setActiveScreen(screen);
  }

  function openExplore(category?: CategoryId) {
    setExploreCategory(category);
    setActiveScreen("explore");
  }

  function openBusiness(business: Business) {
    setSelectedBusiness(business);
    setActiveScreen("business");
  }

  function toggleFavorite(businessId: string) {
    setFavoriteIds((currentIds) =>
      currentIds.includes(businessId)
        ? currentIds.filter((id) => id !== businessId)
        : [...currentIds, businessId]
    );
  }

  function renderScreen() {
    switch (activeScreen) {
      case "home":
        return (
          <HomeScreen
            favoriteIds={favoriteIds}
            onBusinessPress={openBusiness}
            onNavigate={navigate}
            onOpenExplore={openExplore}
            onToggleFavorite={toggleFavorite}
          />
        );
      case "explore":
        return (
          <ExploreScreen
            favoriteIds={favoriteIds}
            initialCategory={exploreCategory}
            onBusinessPress={openBusiness}
            onToggleFavorite={toggleFavorite}
          />
        );
      case "business":
        return (
          <BusinessDetailScreen
            business={selectedBusiness}
            favorite={favoriteIds.includes(selectedBusiness.id)}
            onBack={() => setActiveScreen("explore")}
            onToggleFavorite={toggleFavorite}
          />
        );
      case "events":
        return <EventsScreen />;
      case "deals":
        return <DealsScreen />;
      case "pass":
        return <PassLocalScreen onNavigate={navigate} />;
      case "loyalty":
        return <LoyaltyScreen />;
      case "giftCards":
        return <GiftCardsScreen />;
      case "news":
        return <NewsScreen />;
      case "favorites":
        return (
          <FavoritesScreen
            favoriteIds={favoriteIds}
            onBusinessPress={openBusiness}
            onExplore={() => openExplore()}
            onToggleFavorite={toggleFavorite}
          />
        );
      case "profile":
        return <ProfileScreen onNavigate={navigate} />;
      default:
        return null;
    }
  }

  return (
    <SafeAreaView style={styles.safeArea}>
      <StatusBar barStyle="dark-content" backgroundColor={colors.background} />
      <View style={styles.root}>
        {renderScreen()}
        <BottomNavigation activeScreen={tabActiveScreen} onNavigate={navigate} />
      </View>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  safeArea: {
    flex: 1,
    backgroundColor: colors.background
  },
  root: {
    flex: 1,
    backgroundColor: colors.background
  }
});