import React, { useState } from "react";
import {
  Modal,
  View,
  Text,
  TouchableOpacity,
  TextInput,
  ScrollView,
  Image,
  FlatList,
  StyleSheet,
  Dimensions,
} from "react-native";
import { Ionicons } from "@expo/vector-icons";
const { width } = Dimensions.get("window");
import FilterDropdown from "@components/product/FilterDropdown";

export function PopupBuildpc({ show, onClose }) {
  const productList = Array(10).fill({
    name: "AMD Ryzen 7 9800x3D 4.7 GHz 8-Core Processor",
    capacity: "8bg",
    generation: "5",
    memory: "GDDR5",
    noise: "5db",
    color: "Đen",
    rating: 4,
    reviews: 125,
    price: "3.400.000đ",
    image: require("../../../assets/images/lienkien-ram.png"),
  });

  const [selectedAddress, setSelectedAddress] = useState("");
  const [selectedBrand, setSelectedBrand] = useState("");

  const renderStars = (count: number) => {
    return (
      <View style={{ flexDirection: "row" }}>
        {Array.from({ length: 5 }).map((_, index) => (
          <Ionicons
            key={index}
            name="star"
            size={10}
            color={index < count ? "#ff7a00" : "#d9d9d9"}
          />
        ))}
      </View>
    );
  };

  return (
    <Modal visible={show} transparent animationType="fade">
      <TouchableOpacity
        style={styles.overlay}
        onPress={onClose}
        activeOpacity={1}
      />
      <View style={styles.modalContent}>
        <View style={styles.header}>
          <View
            style={{
              flexDirection: "row",
              alignItems: "center",
              justifyContent: "space-between",
              width: "100%",
              marginBottom: 15,
            }}
          >
            <Text style={styles.title}>Chọn linh kiện</Text>
            <TouchableOpacity onPress={onClose}>
              <Ionicons name="close" size={24} color="#fff" />
            </TouchableOpacity>
          </View>
          <View style={styles.searchBox}>
            <TextInput
              style={styles.input}
              placeholder="Bạn cần tìm linh kiện gì..."
            />
            <TouchableOpacity style={styles.searchButton}>
              <Ionicons name="search" size={24} color="#000" />
            </TouchableOpacity>
          </View>
        </View>
        <ScrollView>
          <View style={styles.body}>
            <View style={styles.sidebar}>
              <Text style={{ fontWeight: 700 }}>230 sản phẩm</Text>
              <View style={styles.actionsRow}>
                <Text style={styles.actionText}>Chọn tất cả</Text>
                <Text style={styles.actionText}>Bỏ chọn tất cả</Text>
                <Text style={styles.actionText}>So sánh sản phẩm đã chọn</Text>
              </View>
              <View style={styles.BoxFilter}>
                <View style={styles.titleFilter}>
                  <Text>Bộ lọc</Text>
                  <Ionicons name="filter" size={24} color="black" />
                </View>
              </View>
              <View style={styles.listFilter}>
                <FilterDropdown
                  placeholder="Địa chỉ"
                  options={["Hà Nội", "TP.HCM", "Đà Nẵng"]}
                  selected={selectedAddress}
                  onSelect={setSelectedAddress}
                />
                <FilterDropdown
                  placeholder="Thương hiệu"
                  options={["Dell", "HP", "Lenovo"]}
                  selected={selectedBrand}
                  onSelect={setSelectedBrand}
                />
              </View>
            </View>

            <View style={styles.mainContent}>
              <FlatList
                data={productList}
                keyExtractor={(_, index) => index.toString()}
                style={styles.productList}
                renderItem={({ item }) => (
                  <View style={styles.productItem}>
                    <View style={styles.productInfo}>
                      <View
                        style={{ flexDirection: "row", alignItems: "center" }}
                      >
                        <Image
                          source={item.image}
                          style={styles.productImage}
                        />
                        <Text style={styles.productName}>{item.name}</Text>
                      </View>
                      <Text style={styles.proPrice}>{item.price}</Text>
                      <View
                        style={{
                          flexDirection: "row",
                          alignItems: "center",
                          flexWrap: "wrap",
                        }}
                      >
                        <View style={styles.itemTs}>
                          <Text>Dung lượng:</Text>
                          <Text style={{ marginLeft: 5, fontWeight: 700 }}>
                            {item.capacity}
                          </Text>
                        </View>
                        <View style={styles.itemTs}>
                          <Text>Độ òn</Text>
                          <Text style={{ marginLeft: 5, fontWeight: 700 }}>
                            {item.generation}
                          </Text>
                        </View>
                        <View style={styles.itemTs}>
                          <Text>Thế hệ</Text>
                          <Text style={{ marginLeft: 5, fontWeight: 700 }}>
                            {item.memory}
                          </Text>
                        </View>
                        <View style={styles.itemTs}>
                          <Text>Màu sắc</Text>
                          <Text style={{ marginLeft: 5, fontWeight: 700 }}>
                            {item.color}
                          </Text>
                        </View>
                        <View style={styles.itemTs}>
                          <Text>Bộ nhớ</Text>
                          <Text style={{ marginLeft: 5, fontWeight: 700 }}>
                            {item.noise}
                          </Text>
                        </View>
                      </View>

                      <View
                        style={{
                          flexDirection: "row",
                          alignItems: "center",
                          justifyContent: "space-between",
                        }}
                      >
                        <View
                          style={{
                            flexDirection: "row",
                            alignItems: "center",
                          }}
                        >
                          <Text style={{ marginRight: 5 }}>Đánh giá</Text>
                          {renderStars(item.rating)}
                          <Text style={{ fontWeight: 700, marginLeft: 5 }}>
                            ({item.reviews})
                          </Text>
                        </View>
                      </View>
                    </View>
                    <TouchableOpacity style={styles.addButton}>
                      <Text style={styles.addButtonText}>Add</Text>
                    </TouchableOpacity>
                  </View>
                )}
              />
            </View>
          </View>
        </ScrollView>
      </View>
    </Modal>
  );
}

export default PopupBuildpc;

const styles = StyleSheet.create({
  overlay: {
    flex: 1,
    backgroundColor: "rgba(0,0,0,0.5)",
  },
  modalContent: {
    position: "absolute",
    top: "5%",
    left: "2.5%",
    width: "95%",
    height: "90%",
    backgroundColor: "#fff",
    borderRadius: 8,
    overflow: "hidden",
  },
  header: {
    backgroundColor: "#462f91",
    padding: 10,
    flexDirection: "row",
    flexWrap: "wrap",
    alignItems: "center",
    justifyContent: "space-between",
  },
  title: {
    color: "#fff",
    fontWeight: "bold",
    fontSize: 16,
  },
  searchBox: {
    flex: 1,
    flexDirection: "row",
    marginHorizontal: 10,
    backgroundColor: "#fff",
    borderRadius: 8,
    alignItems: "center",
    width: width,
    marginLeft: 0,
    marginRight: 5,
  },
  listFilter: {
    flexDirection: "row",
    flexWrap: "wrap",
    marginRight: -5,
  },
  input: {
    flex: 1,
    padding: 10,
  },
  searchButton: {
    padding: 10,
  },
  body: {},
  sidebar: {
    padding: 10,
  },
  filterList: {
    marginTop: 10,
  },
  filterTitle: {
    fontWeight: "bold",
    marginBottom: 5,
  },
  filterItem: {
    paddingVertical: 5,
  },
  mainContent: {
    padding: 10,
  },
  actionsRow: {
    marginTop: 10,
    flexDirection: "row",
    marginBottom: 10,
    borderBottomWidth: 1,
    borderColor: "#e3e3e3",
    paddingBottom: 5,
  },
  actionText: {
    color: "#004aad",
    fontSize: 12,
    marginRight: 10,
  },
  BoxFilter: {},
  titleFilter: { flexDirection: "row", alignItems: "center", gap: 5 },
  productList: {
    flex: 1,
  },
  productItem: {
    borderBottomWidth: 1,
    borderBottomColor: "#ddd",
    flexDirection: "row",
    alignItems: "flex-start",
    justifyContent: "space-between",
    paddingBottom: 10,
  },
  productInfo: {
    width: width - 120,
  },
  productImage: {
    width: 50,
    height: 50,
    marginBottom: 5,
  },
  productName: {
    fontWeight: "bold",
    marginBottom: 5,
  },
  proPrice: {
    fontWeight: 700,
    color: "#ff0000",
  },
  itemTs: {
    width: "50%",
    flexDirection: "row",
    alignItems: "center",
    marginBottom: 10,
  },
  addButton: {
    marginTop: 5,
    backgroundColor: "#004aad",
    padding: 8,
    borderRadius: 4,
  },
  addButtonText: {
    color: "#fff",
    textAlign: "center",
  },
});
