import React, { useState } from "react";
import { useNavigation, NavigationProp } from "@react-navigation/native";
import AppLayout from "@layouts/AppLayout";
import {
  View,
  Text,
  StyleSheet,
  Image,
  FlatList,
  TouchableOpacity,
  ScrollView,
  Dimensions,
} from "react-native";
import { globalStyles } from "styles/globalStyles";
import { Ionicons } from "@expo/vector-icons";
import Feather from "@expo/vector-icons/Feather";

import Swiper from "react-native-swiper";
const { width } = Dimensions.get("window");
import ProductGallery from "@components/product/ProductGallery";
import SupplierList from "./SupplierList";
import ReviewSection from "./BoxReview";
import ProductInformation from "./ProductInformation";
import ProductSpecification from "./ProductSpecification";
import { products } from "../../data/product";
import ProductItem from "@components/product/ItemProduct";
import Footer from "@components/footer/Footer";

const ProductDetail = () => {
  const navigation = useNavigation<NavigationProp<any>>();

  return (
    <AppLayout activeTab="productdetail">
      <ScrollView>
        <View style={styles.container}>
          {/* Breadcrumb */}
          <View style={globalStyles.breadcrumb}>
            <TouchableOpacity
              style={globalStyles.breadcrumbItem}
              onPress={() => navigation.navigate("homepage" as never)}
            >
              <Ionicons name="home-outline" size={20} color="#637381" />
            </TouchableOpacity>
            <Ionicons name="chevron-forward-outline" size={14} color="#999" />
            <Text style={[globalStyles.breadcrumbText, { fontWeight: "600" }]}>
              Màn hình máy tính
            </Text>
          </View>

          <View
            style={{
              padding: 10,
              backgroundColor: "#fff",
              marginTop: 15,
              borderRadius: 4,
            }}
          >
            <View style={styles.top}>
              <ProductGallery />
            </View>
            <View style={styles.bottom}>
              <Text style={styles.productTitle}>
                Laptop Gaming Asus TUF FX505GE-BQ037T Core i7-8750H/Win10(15.6"
                FHD) - Hàng Chính Hãng
              </Text>

              <View style={styles.row}>
                <View style={{ flexDirection: "row", alignItems: "center" }}>
                  <Ionicons
                    name="star"
                    style={{ marginRight: 3, paddingTop: 3 }}
                    size={15}
                    color="#ff7a00"
                  />
                  <Text style={styles.review}>5/5</Text>
                </View>
                <View style={{ flexDirection: "row", alignItems: "center" }}>
                  <Ionicons
                    name="eye-outline"
                    style={{ marginRight: 3 }}
                    size={15}
                    color="black"
                  />
                  <Text style={styles.view}>120</Text>
                </View>
                <View style={{ flexDirection: "row", alignItems: "center" }}>
                  <Ionicons
                    name="time-outline"
                    style={{ marginRight: 3 }}
                    size={15}
                    color="black"
                  />
                  <Text style={styles.date}>12/03/2025</Text>
                </View>
                <TouchableOpacity
                  style={{ flexDirection: "row", alignItems: "center" }}
                >
                  <Ionicons
                    style={{ marginRight: 3 }}
                    name="share-social-outline"
                    size={15}
                    color="black"
                  />
                  <Text style={styles.share}> Chia sẻ</Text>
                </TouchableOpacity>
              </View>

              <View style={styles.row}>
                <Text style={{ fontSize: 13 }}>
                  Reviews trên: <Text style={styles.link}>Internet</Text> - 1233
                  đánh giá
                </Text>
                <Text style={{ fontSize: 13 }}>
                  | <Text style={styles.link}>BestPC</Text> - 12003 đánh giá
                </Text>
              </View>

              <View style={styles.priceBox}>
                <Text style={styles.priceLabel}>Giá: </Text>
                <Text style={styles.price}>9.000.000đ - 12.000.000đ</Text>
              </View>

              <View style={styles.boxStore}>
                <View style={styles.boxIconStore}>
                  <Image
                    source={require("../../../assets/images/icon_store_white.png")}
                    style={styles.iconStore}
                    alt="icon store"
                    resizeMode="contain"
                  />
                </View>
                <Text style={styles.storeName}>Có 12 cửa hàng bán</Text>
              </View>

              <View style={styles.summaryBox}>
                <Text>
                  • CPU: Intel Core i7-8750H (2.2GHz - 4.1GHz / 9MB / 6 nhân, 12
                  luồng)
                </Text>
                <Text>• Màn hình: 15.6" (1920 x 1080), không cảm ứng</Text>
                <Text>• RAM: 1 x 8GB DDR4 2666MHz</Text>
                <Text>• GPU: Intel UHD 630 / NVIDIA GTX 1050Ti 4GB</Text>
                <Text>• Lưu trữ: 128GB SSD M.2 NVMe / 1TB HDD</Text>
                <Text>• OS: Windows 10 Home SL 64-bit</Text>
                <Text>• Pin: 4 cell 64Wh, liền</Text>
                <Text>• Nặng: 2.5kg</Text>
                <Text>• Cổng: 1x USB 2.0,...</Text>
              </View>

              <TouchableOpacity style={styles.saveButton}>
                <Feather name="file-plus" size={24} color="black" />
                <Text style={styles.saveText}>Lưu sản phẩm lại xem sau</Text>
              </TouchableOpacity>
            </View>
          </View>

          {/* nhà cung cấp */}
          <SupplierList />

          {/* đánh giá */}
          <ReviewSection />

          {/* mô tả sản phẩm */}
          <ProductInformation />
          {/* thông số sản phẩm */}
          <ProductSpecification />
          {/* sản phẩm tương tự */}
          <View style={styles.BoxSimilarProduct}>
            <Text style={styles.textSimilarProduct}>Sản phẩm tương tự</Text>
            <View style={styles.listProductSimilar}>
              {products.map((item) => (
                <ProductItem key={item.id} product={item} />
              ))}
            </View>
            <TouchableOpacity style={{ marginTop: 10, marginBottom: 10 }}>
              <Text style={globalStyles.moreAll}>Xem tất cả</Text>
            </TouchableOpacity>
          </View>

          {/* sản phẩm bạn thích */}
          <View style={styles.BoxLikeProduct}>
            <Text style={styles.textLikeProduct}>
              Sản phẩm có thể bạn thích
            </Text>
            <View style={styles.listProductLike}>
              {products.map((item) => (
                <ProductItem key={item.id} product={item} />
              ))}
            </View>
            <TouchableOpacity style={{ marginTop: 10, marginBottom: 10 }}>
              <Text style={globalStyles.moreAll}>Xem tất cả</Text>
            </TouchableOpacity>
          </View>
        </View>
        <Footer navigation={navigation} />
      </ScrollView>
    </AppLayout>
  );
};

export default ProductDetail;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingHorizontal: 10,
    backgroundColor: "#efefef",
    paddingBottom: 10,
  },
  top: {},
  bigSwiper: {
    height: 250,
  },
  slide: {
    justifyContent: "center",
    alignItems: "center",
    height: 250,
  },
  bigImage: {
    width: "100%",
    height: "100%",
  },
  thumbnailWrapper: {
    marginTop: 12,
    flexDirection: "row",
  },
  thumbItem: {
    marginRight: 10,
  },
  thumbImage: {
    width: 60,
    height: 60,
    borderWidth: 1,
    borderColor: "#ccc",
    borderRadius: 8,
  },
  bottom: {
    marginTop: 20,
  },
  productTitle: {
    fontSize: 16,
    fontWeight: "bold",
    color: "#000",
    marginBottom: 10,
  },
  row: {
    flexDirection: "row",
    flexWrap: "wrap",
    marginBottom: 5,
    gap: 10,
  },
  review: { marginRight: 10 },
  view: { marginRight: 10, color: "#1877f2" },
  date: { marginRight: 10 },
  share: {},
  link: {
    color: "#1877F2",
    fontWeight: "600",
  },
  priceBox: {
    flexDirection: "row",
    alignItems: "center",
    marginVertical: 10,
  },
  priceLabel: { fontSize: 16 },
  price: {
    fontSize: 24,
    color: "#D80A00",
    fontWeight: "bold",
  },
  storeBox: {
    flexDirection: "row",
    alignItems: "center",
    marginBottom: 10,
  },
  summaryBox: {
    marginTop: 10,
  },
  saveButton: {
    flexDirection: "row",
    alignItems: "center",
    marginTop: 15,
    padding: 10,
    borderWidth: 1,
    borderColor: "#D3D3D3",
    borderRadius: 4,
    justifyContent: "center",
  },
  saveIcon: {
    width: 18,
    height: 24,
    marginRight: 10,
  },
  saveText: {
    fontSize: 16,
    fontWeight: "600",
  },
  boxStore: {
    flexDirection: "row",
    alignItems: "center",
    marginTop: 5,
  },
  boxIconStore: {
    width: 24,
    height: 24,
    borderRadius: 25,
    backgroundColor: "#FF7A00",
    flexDirection: "row",
    justifyContent: "center",
    alignItems: "center",
    marginRight: 5,
  },
  iconStore: {
    width: 18,
    height: 18,
  },
  storeName: {
    fontSize: 14,
    fontWeight: 400,
    color: "#000",
  },
  BoxSimilarProduct: {
    backgroundColor: "#fff",
    marginTop: 15,
    borderRadius: 8,
  },
  textSimilarProduct: {
    flexDirection: "row",
    justifyContent: "space-between",
    borderBottomWidth: 1,
    borderBottomColor: "#B1B1B1",
    padding: 10,
    fontSize: 16,
    fontWeight: "bold",
  },
  listProductSimilar: {
    flexDirection: "row",
    flexWrap: "wrap",
    gap: 5,
    marginLeft: 7,
    marginTop: 10,
  },
  BoxLikeProduct: {
    backgroundColor: "#fff",
    marginTop: 15,
    borderRadius: 8,
  },
  textLikeProduct: {
    flexDirection: "row",
    justifyContent: "space-between",
    borderBottomWidth: 1,
    borderBottomColor: "#B1B1B1",
    padding: 10,
    fontSize: 16,
    fontWeight: "bold",
  },
  listProductLike: {
    flexDirection: "row",
    flexWrap: "wrap",
    gap: 5,
    marginLeft: 7,
    marginTop: 10,
  },
});