import { Tabs } from "expo-router";
import { Ionicons } from "@expo/vector-icons";
import { Button, Alert } from "react-native";
import AsyncStorage from "@react-native-async-storage/async-storage";
import { useRouter } from "expo-router";

export default function TabsLayout() {
  const router = useRouter();

  const handleLogout = async () => {
    Alert.alert("Đăng xuất", "Bạn có chắc muốn đăng xuất?", [
      {
        text: "Hủy",
        style: "cancel",
      },
      {
        text: "Đăng xuất",
        style: "destructive",
        onPress: async () => {
          await AsyncStorage.removeItem("authToken");
          router.replace("/"); // quay về màn hình đăng nhập
        },
      },
    ]);
  };

  return (
    <Tabs screenOptions={{ headerShown: true, tabBarActiveTintColor: "#007AFF" }}>
      <Tabs.Screen
        name="home"
        options={{
          title: "Trang chủ",
          tabBarIcon: ({ color, size }) => <Ionicons name="home" color={color} size={size} />,
        }}
      />
      <Tabs.Screen
        name="products"
        options={{
          title: "Sản phẩm",
          tabBarIcon: ({ color, size }) => <Ionicons name="pricetags" color={color} size={size} />,
        }}
      />
      <Tabs.Screen
        name="account"
        options={{
          title: "Tài khoản",
          tabBarIcon: ({ color, size }) => <Ionicons name="person" color={color} size={size} />,
          headerRight: () => <Button title="Logout" onPress={handleLogout} color="#FF3B30" />,
        }}
      />
    </Tabs>
  );
}