import React from "react";
import {
  View,
  Text,
  Image,
  TouchableOpacity,
  ScrollView,
  StyleSheet,
  Dimensions,
} from "react-native";
const { width } = Dimensions.get("window");
import { useNavigation, NavigationProp } from "@react-navigation/native";

export function ListCompare() {
  const navigation = useNavigation<NavigationProp<any>>();

  const storeLogo = require("../../../assets/images/logo-hacom.png");
  const productImg = require("../../../assets/images/lienkien-ram.png");

  const stores = [1, 2]; // giả lập 2 nhà cung cấp
  const products = [1, 2]; // giả lập 2 sản phẩm mỗi nhà cung cấp

  return (
    <ScrollView style={styles.boxList}>
      {stores.map((store, storeIdx) => (
        <View style={styles.storeBox} key={storeIdx}>
          {/* Header */}
          <View style={styles.storeHeader}>
            <View style={styles.logoBox}>
              <Image
                source={storeLogo}
                style={styles.logo}
                resizeMode="contain"
              />
            </View>
          </View>

          {/* Products */}
          {products.map((product, index) => (
            <View style={styles.productRow} key={index}>
              <Text style={styles.productName}>CPU Cooler</Text>
              <View style={styles.productGrid}>
                {/* Product Info */}
                <View style={styles.productInfo}>
                  <View style={styles.infoRow}>
                    <Image source={productImg} style={styles.productImg} />
                    <Text
                      style={styles.productTitle}
                      onPress={() => navigation?.navigate("buildpcdetail")}
                    >
                      AMD Ryzen 7 9800x3D 4.7 GHz 8-Core Processor
                    </Text>
                  </View>
                  <TouchableOpacity style={styles.buyNowBtn}>
                    <Text style={styles.buyNowText}>Mua ngay</Text>
                  </TouchableOpacity>
                </View>
                <View style={styles.flexBox}>
                  <Text style={styles.textFlex}>Giá sản phẩm:</Text>
                  <Text style={styles.price}>4.700.000 Vnđ</Text>
                  <Text style={styles.oldPrice}>4.700.000 Vnđ</Text>
                </View>
                <View style={styles.flexBox}>
                  <Text style={styles.textFlex}>Khuyến mãi:</Text>
                  <Text style={styles.discount}>20%</Text>
                </View>
                <View style={styles.flexBox}>
                  <Text style={styles.textFlex}>Giao hàng:</Text>
                  <Text style={styles.ship}>Liên hệ</Text>
                </View>
              </View>
            </View>
          ))}

          {/* Footer tổng tiền */}
          <View style={styles.totalRow}>
            <Text style={styles.totalLabel}>Tổng tiền (2 sản phẩm) :</Text>
            <Text style={styles.totalAmount}>6.000.000 Vnđ</Text>
          </View>
        </View>
      ))}
    </ScrollView>
  );
}

export default ListCompare;

const styles = StyleSheet.create({
  boxList: {
    padding: 10,
    backgroundColor: "#fff",
    marginTop: 10,
    borderRadius: 4,
  },
  storeBox: {
    marginBottom: 20,
  },
  storeHeader: {
    borderBottomWidth: 1,
    borderColor: "#e5e7eb",
    paddingBottom: 12,
  },
  logoBox: {
    width: 90,
  },
  logo: {
    width: 90,
    height: 32,
  },
  headerGrid: {
    flex: 1,
    flexDirection: "row",
    flexWrap: "wrap",
  },
  gridTitle: {
    width: "12.5%",
    fontWeight: "bold",
  },
  gridTitleTotal: {
    width: "25%",
    fontWeight: "bold",
  },
  productRow: {
    paddingVertical: 10,
    borderBottomWidth: 1,
    borderColor: "#e5e7eb",
  },
  productName: {
    width: 200,
    fontWeight: 700,
    marginBottom: 10,
  },
  productGrid: {},
  productInfo: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
    marginBottom: 10,
  },
  infoRow: {
    width: width - 120,
    flexDirection: "row",
    alignItems: "center",
  },
  productImg: {
    width: 60,
    height: 60,
    borderWidth: 1,
    borderColor: "#e5e7eb",
    marginRight: 10,
    padding: 5,
  },
  productTitle: {
    flex: 1,
    color: "#111",
    fontWeight: 700,
  },
  oldPrice: {
    textDecorationLine: "line-through",
    marginLeft: 5,
    color: "#f5f5f5",
  },
  price: {
    color: "#ff0000",
    fontWeight: "bold",
  },
  discount: { fontWeight: "bold" },
  ship: {
    textDecorationLine: "underline",
    color: "#33c600",
  },
  totalBox: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
  },
  total: {
    fontWeight: "bold",
  },
  buyNowBtn: {
    backgroundColor: "#2563eb",
    borderRadius: 6,
    width: 80,
    height: 32,
    lineHeight: 32,
    textAlign: "center",
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "center",
  },
  buyNowText: {
    color: "white",
    fontWeight: "bold",
  },
  totalRow: {
    flexDirection: "row",
    justifyContent: "flex-end",
    alignItems: "center",
    marginTop: 20,
  },
  totalLabel: {
    fontWeight: "bold",
    marginRight: 10,
  },
  totalAmount: {
    fontWeight: "bold",
  },
  flexBox: {
    flexDirection: "row",
    alignItems: "center",
    marginBottom: 5,
  },
  textFlex: {
    width: 100,
  },
});
