import React, { useState } from "react";
import {
  View,
  Text,
  TouchableOpacity,
  ScrollView,
  Modal,
  Image,
  Animated,
} from "react-native";
import { Ionicons } from "@expo/vector-icons";
import { useNavigation } from "@react-navigation/native";
import { useAuth } from "../../hooks/useAuth";

// Side Menu Component
function SideMenu({ visible, onClose }) {
  const navigation = useNavigation();
  const slideAnim = React.useRef(new Animated.Value(visible ? 0 : -300)).current;
  const { user } = useAuth();

  React.useEffect(() => {
    Animated.timing(slideAnim, {
      toValue: visible ? 0 : -300,
      duration: 300,
      useNativeDriver: true,
    }).start();
  }, [visible, slideAnim]);

  const menuItems = [
    { id: "home", label: "Homepage", icon: "home", screen: "home" },
    { id: "discover", label: "Discover", icon: "search", screen: "discover" },
    { id: "orders", label: "My Order", icon: "list", screen: "orders" },
    { id: "profile", label: "My profile", icon: "person", screen: "account" },
  ];

  const otherItems = [
    { id: "setting", label: "Setting", icon: "settings", screen: "setting" },
    { id: "support", label: "Support", icon: "help-circle", screen: "support" },
    { id: "about", label: "About us", icon: "information-circle", screen: "about" },
  ];

  const dropdownItems = [
    { id: "cart", label: "Giỏ hàng", icon: "cart", screen: "cart" },
    { id: "wishlist", label: "Yêu thích", icon: "heart", screen: "wishlist" },
    { id: "checkout", label: "Thanh toán", icon: "checkmark-circle", screen: "checkout" },
  ];

  return (
    <Modal visible={visible} transparent animationType="none" onRequestClose={onClose}>
      <View style={{ flex: 1, flexDirection: "row" }}>
        {/* Overlay */}
        <TouchableOpacity
          style={{ flex: 1, backgroundColor: "rgba(0,0,0,0.3)" }}
          onPress={onClose}
        />

        {/* Animated Menu */}
        <Animated.View
          style={{
            width: 280,
            backgroundColor: "#fff",
            transform: [{ translateX: slideAnim }],
            paddingTop: 40,
            paddingHorizontal: 16,
          }}
        >
          <ScrollView showsVerticalScrollIndicator={false}>
            {/* User Profile */}
            <View style={{ flexDirection: "row", alignItems: "center", marginBottom: 32 }}>
              <View
                style={{
                  width: 50,
                  height: 50,
                  borderRadius: 25,
                  backgroundColor: "#E8B4A0",
                  justifyContent: "center",
                  alignItems: "center",
                  marginRight: 12,
                }}
              >
                <Ionicons name="person" size={28} color="#fff" />
              </View>
              <View>
              <Text style={{ fontSize: 14, fontWeight: "600", color: "#333" }}>
  {user?.email?.split("@")[0] || "Guest"}
</Text>
<Text style={{ fontSize: 11, color: "#999" }}>
  {user?.email || "guest@example.com"}
</Text>

              </View>
            </View>

            {/* Main Menu */}
            {menuItems.map((item) => (
              <TouchableOpacity
                key={item.id}
                style={{ flexDirection: "row", alignItems: "center", marginBottom: 20 }}
                onPress={() => {
                  navigation.navigate(item.screen);
                  onClose();
                }}
              >
                <Ionicons name={item.icon} size={20} color="#6C5CE7" />
                <Text style={{ marginLeft: 16, fontSize: 14, color: "#333" }}>
                  {item.label}
                </Text>
              </TouchableOpacity>
            ))}

            {/* Other Section */}
            <Text
              style={{
                fontSize: 12,
                fontWeight: "600",
                color: "#999",
                marginTop: 24,
                marginBottom: 16,
                textTransform: "uppercase",
              }}
            >
              OTHER
            </Text>

            {otherItems.map((item) => (
              <TouchableOpacity
                key={item.id}
                style={{ flexDirection: "row", alignItems: "center", marginBottom: 20 }}
                onPress={() => {
                  navigation.navigate(item.screen);
                  onClose();
                }}
              >
                <Ionicons name={item.icon} size={20} color="#6C5CE7" />
                <Text style={{ marginLeft: 16, fontSize: 14, color: "#333" }}>
                  {item.label}
                </Text>
              </TouchableOpacity>
            ))}

            {/* Dropdown Items Section */}
            <Text
              style={{
                fontSize: 12,
                fontWeight: "600",
                color: "#999",
                marginTop: 24,
                marginBottom: 16,
                textTransform: "uppercase",
              }}
            >
              QUICK ACCESS
            </Text>

            {dropdownItems.map((item) => (
              <TouchableOpacity
                key={item.id}
                style={{ flexDirection: "row", alignItems: "center", marginBottom: 20 }}
                onPress={() => {
                  navigation.navigate(item.screen);
                  onClose();
                }}
              >
                <Ionicons name={item.icon} size={20} color="#6C5CE7" />
                <Text style={{ marginLeft: 16, fontSize: 14, color: "#333" }}>
                  {item.label}
                </Text>
              </TouchableOpacity>
            ))}

            {/* Theme Toggle */}
            <View
              style={{
                flexDirection: "row",
                justifyContent: "space-around",
                marginTop: 32,
                marginBottom: 40,
              }}
            >
              <TouchableOpacity
                style={{
                  flexDirection: "row",
                  alignItems: "center",
                  paddingHorizontal: 16,
                  paddingVertical: 8,
                  borderRadius: 20,
                  backgroundColor: "#f5f5f5",
                }}
              >
                <Ionicons name="sunny" size={16} color="#333" />
                <Text style={{ marginLeft: 6, fontSize: 12, color: "#333" }}>Light</Text>
              </TouchableOpacity>
              <TouchableOpacity
                style={{
                  flexDirection: "row",
                  alignItems: "center",
                  paddingHorizontal: 16,
                  paddingVertical: 8,
                  borderRadius: 20,
                }}
              >
                <Ionicons name="moon" size={16} color="#999" />
                <Text style={{ marginLeft: 6, fontSize: 12, color: "#999" }}>Dark</Text>
              </TouchableOpacity>
            </View>
          </ScrollView>
        </Animated.View>
      </View>
    </Modal>
  );
}

// Product Card Component
function ProductCard({ product }) {
  return (
    <View style={{ flex: 1, margin: 8 }}>
      <View
        style={{
          backgroundColor: "#f5f5f5",
          borderRadius: 8,
          height: 200,
          marginBottom: 8,
          justifyContent: "center",
          alignItems: "center",
        }}
      >
        <Ionicons name="image" size={40} color="#ccc" />
      </View>
      <Text style={{ fontSize: 12, fontWeight: "600", color: "#333", marginBottom: 4 }}>
        {product.name}
      </Text>
      <Text style={{ fontSize: 14, fontWeight: "700", color: "#6C5CE7" }}>
        {product.price} đ
      </Text>
    </View>
  );
}

// Home Screen
export default function HomeScreen() {
  const [sideMenuVisible, setSideMenuVisible] = useState(false);

  const featureProducts = [
    { id: 1, name: "iphone 15 Pro Max 256GB", price: "29.990.000" },
    { id: 2, name: "Samsung Galaxy S24 Ultra", price: "27.990.000" },
    { id: 3, name: "Xiaomi 14 Ultra", price: "24.990.0000" },
  ];

  return (
    <View style={{ flex: 1, backgroundColor: "#fff", paddingTop: 20 }}>

      <View
        style={{
          flexDirection: "row",
          justifyContent: "space-between",
          alignItems: "center",
          paddingHorizontal: 16,
          paddingVertical: 12,
          borderBottomWidth: 1,
          borderBottomColor: "#eee",
        }}
      >
        <TouchableOpacity onPress={() => setSideMenuVisible(true)}>
          <Ionicons name="menu" size={24} color="#333" />
        </TouchableOpacity>
        <Text style={{ fontSize: 18, fontWeight: "700", color: "#333" }}>
          Gemstore
        </Text>
        <TouchableOpacity>
          <Ionicons name="notifications" size={24} color="#333" />
        </TouchableOpacity>
      </View>

      {/* Main Content */}
      <ScrollView showsVerticalScrollIndicator={false}>
        {/* Banner */}
        <View
          style={{
            height: 200,
            backgroundColor: "#d4a574",
            marginHorizontal: 16,
            marginVertical: 16,
            borderRadius: 12,
            justifyContent: "center",
            alignItems: "center",
          }}
        >
          <Text style={{ fontSize: 24, fontWeight: "700", color: "#fff" }}>
            Autumn
          </Text>
          <Text style={{ fontSize: 24, fontWeight: "700", color: "#fff" }}>
            Collection
          </Text>
          <Text style={{ fontSize: 20, fontWeight: "600", color: "#fff", marginTop: 8 }}>
            2022
          </Text>
        </View>

        {/* Feature Products */}
        <View style={{ paddingHorizontal: 16, marginBottom: 24 }}>
          <View
            style={{
              flexDirection: "row",
              justifyContent: "space-between",
              alignItems: "center",
              marginBottom: 16,
            }}
          >
            <Text style={{ fontSize: 16, fontWeight: "700", color: "#333" }}>
              Feature Products
            </Text>
            <TouchableOpacity>
              <Text style={{ fontSize: 12, color: "#6C5CE7" }}>Show all</Text>
            </TouchableOpacity>
          </View>

          <View style={{ flexDirection: "row", justifyContent: "space-between" }}>
            {featureProducts.map((product) => (
              <ProductCard key={product.id} product={product} />
            ))}
          </View>
        </View>
      </ScrollView>

      {/* Side Menu */}
      <SideMenu
        visible={sideMenuVisible}
        onClose={() => setSideMenuVisible(false)}
      />
    </View>
  );
}