import React from "react";
import { NavigationContainer, DarkTheme } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import { HomeScreen } from "../screens/HomeScreen";
import { ScannerScreen } from "../screens/ScannerScreen";
import { LabelScannerScreen } from "../screens/LabelScannerScreen";
import { BottleScreen } from "../screens/BottleScreen";
import { ConversationScreen } from "../screens/ConversationScreen";
import { SettingsScreen } from "../screens/SettingsScreen";
import type { RootStackParamList } from "./types";

const Stack = createNativeStackNavigator<RootStackParamList>();

const theme = {
  ...DarkTheme,
  colors: {
    ...DarkTheme.colors,
    background: "#14100C",
    card: "#1C1610",
    primary: "#C4A35A",
    text: "#FFF8EC",
    border: "#2A2218",
  },
};

export function AppNavigator() {
  return (
    <NavigationContainer theme={theme}>
      <Stack.Navigator
        initialRouteName="Home"
        screenOptions={{
          headerStyle: { backgroundColor: "#1C1610" },
          headerTintColor: "#C4A35A",
          contentStyle: { backgroundColor: "#14100C" },
        }}
      >
        <Stack.Screen name="Home" component={HomeScreen} options={{ title: "Bottle AI" }} />
        <Stack.Screen name="Scanner" component={ScannerScreen} options={{ title: "Escanear QR" }} />
        <Stack.Screen
          name="LabelScanner"
          component={LabelScannerScreen}
          options={{ title: "Escanear Etiqueta" }}
        />
        <Stack.Screen name="Bottle" component={BottleScreen} options={{ title: "Producto" }} />
        <Stack.Screen
          name="Conversation"
          component={ConversationScreen}
          options={{ title: "Conversación" }}
        />
        <Stack.Screen name="Settings" component={SettingsScreen} options={{ title: "Ajustes" }} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}