import React, { useState } from "react";
import {
  View,
  Text,
  StyleSheet,
  FlatList,
  Image,
  TouchableOpacity,
  ScrollView,
} from "react-native";
import { Ionicons } from "@expo/vector-icons";
import ReviewModal from "@components/product/FormReview";

const reviews = [
  {
    id: "1",
    name: "Dino",
    time: "10:00pm 20/02/2025",
    title: "Laptop Gaming Asus ROG 16GB",
    content:
      "Lorem Ipsum is simply dummy text of the printing and typesetting industry.",
    images: [
      require("../../../assets/images/small-product-detail.png"),
      require("../../../assets/images/small-product-detail.png"),
      require("../../../assets/images/small-product-detail.png"),
    ],
    star: 5,
  },
  {
    id: "2",
    name: "Dino",
    time: "10:00pm 20/02/2025",
    title: "Laptop Gaming Asus ROG 16GB",
    content:
      "Lorem Ipsum is simply dummy text of the printing and typesetting industry.",
    images: [
      require("../../../assets/images/small-product-detail.png"),
      require("../../../assets/images/small-product-detail.png"),
    ],
    star: 4,
  },
];

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

const ReviewSection = () => {
  const [showReviewModal, setShowReviewModal] = useState(false);

  return (
    <View>
      <View style={styles.BoxReview}>
        {/* Header */}
        <View style={styles.header}>
          <Text style={styles.headerTitle}>Thành viên BestPC đánh giá</Text>
        </View>

        <View style={styles.content}>
          {/* Left */}
          <View style={styles.left}>
            <Text style={styles.totalReview}>54 đánh giá</Text>
            <View style={styles.ratingRow}>
              <Text style={styles.star}>
                <Ionicons name="star" size={20} color="#ff7a00" />
                <Ionicons name="star" size={20} color="#ff7a00" />
                <Ionicons name="star" size={20} color="#ff7a00" />
                <Ionicons name="star" size={20} color="#ff7a00" />
                <Ionicons name="star" size={20} color="#d9d9d9" />
              </Text>
              <Text style={styles.ratingText}>4.8</Text>
            </View>

            {/* Rating breakdown */}
            <View style={styles.ratingBreakdown}>
              {[5, 4, 3, 2, 1].map((star) => (
                <View key={star} style={styles.ratingLine}>
                  {renderStars(star)}
                  <Text>{50} đánh giá</Text>
                </View>
              ))}
            </View>

            {/* Button */}
            <View style={styles.reviewBtnArea}>
              <Text style={styles.reviewPrompt}>
                Đánh giá của bạn về sản phẩm
              </Text>
              <TouchableOpacity
                style={styles.reviewBtn}
                onPress={() => setShowReviewModal(true)}
              >
                <Text style={styles.reviewBtnText}>Gửi đánh giá của bạn</Text>
              </TouchableOpacity>
            </View>
          </View>

          {/* Right */}
          <View style={styles.right}>
            <FlatList
              data={reviews}
              keyExtractor={(item) => item.id}
              renderItem={({ item }) => (
                <View style={styles.reviewItem}>
                  <View style={styles.avatarBox}>
                    <Image
                      source={require("../../../assets/images/avartar-review-1.png")}
                      style={styles.avatar}
                    />
                    <View>
                      <View
                        style={{ flexDirection: "row", alignItems: "center" }}
                      >
                        <Text style={styles.name}>{item.name}</Text>
                        <Text style={styles.time}>{item.time}</Text>
                      </View>
                      <Text style={styles.star}>{renderStars(item.star)}</Text>
                    </View>
                  </View>

                  <View style={styles.reviewContent}>
                    <Text style={styles.title}>{item.title}</Text>
                    <Text style={styles.contentText}>{item.content}</Text>
                    <View style={styles.imageList}>
                      {item.images.map((img, index) => (
                        <Image
                          key={index}
                          source={img}
                          style={styles.reviewImage}
                        />
                      ))}
                    </View>
                    <View style={styles.btnRow}>
                      <TouchableOpacity>
                        <Text style={styles.btnLink}>
                          Bình luận <Text style={styles.black}>(23)</Text>
                        </Text>
                      </TouchableOpacity>
                      <TouchableOpacity>
                        <Text style={styles.btnLink}>
                          Thích <Text style={styles.black}>(23)</Text>
                        </Text>
                      </TouchableOpacity>
                    </View>
                  </View>
                </View>
              )}
            />

            <TouchableOpacity
              style={{
                flexDirection: "row",
                alignItems: "center",
                justifyContent: "center",
              }}
            >
              <Text style={styles.moreBtn}>
                Xem thêm <Text style={styles.moreBold}>23</Text> bình luận khác
              </Text>
              <Ionicons
                name="chevron-down"
                style={{ marginLeft: 5 }}
                size={16}
                color="#FF7A00"
              />
            </TouchableOpacity>
          </View>
        </View>
      </View>
      <View style={styles.BoxReview}>
        {/* Header */}
        <View style={styles.header}>
          <Text style={styles.headerTitle}>Đánh giá trên internet</Text>
        </View>

        <View style={styles.content}>
          {/* Left */}
          <View style={styles.left}>
            <Text style={styles.totalReview}>54 đánh giá</Text>
            <View style={styles.ratingRow}>
              <Text style={styles.star}>
                <Ionicons name="star" size={20} color="#ff7a00" />
                <Ionicons name="star" size={20} color="#ff7a00" />
                <Ionicons name="star" size={20} color="#ff7a00" />
                <Ionicons name="star" size={20} color="#ff7a00" />
                <Ionicons name="star" size={20} color="#d9d9d9" />
              </Text>
              <Text style={styles.ratingText}>4.8</Text>
            </View>

            {/* Rating breakdown */}
            <View style={styles.ratingBreakdown}>
              {[5, 4, 3, 2, 1].map((star) => (
                <View key={star} style={styles.ratingLine}>
                  <View style={{ flexDirection: "row", alignItems: "center" }}>
                    <Text>Hanoicomputer</Text>
                    <Text style={{ marginLeft: 5, color: "#1877f2" }}>
                      ({50})
                    </Text>
                  </View>

                  {renderStars(star)}
                </View>
              ))}
            </View>

            {/* Button */}
            <View style={styles.reviewBtnArea}>
              <Text style={styles.reviewPrompt}>
                Đánh giá của bạn về sản phẩm
              </Text>
              <TouchableOpacity
                style={styles.reviewBtn}
                onPress={() => setShowReviewModal(true)}
              >
                <Text style={styles.reviewBtnText}>Gửi đánh giá của bạn</Text>
              </TouchableOpacity>
            </View>
          </View>

          {/* Right */}
          <View style={styles.right}>
            <FlatList
              data={reviews}
              keyExtractor={(item) => item.id}
              renderItem={({ item }) => (
                <View style={styles.reviewItem}>
                  <View style={styles.avatarBox}>
                    <View>
                      <View
                        style={{ flexDirection: "row", alignItems: "center" }}
                      >
                        <Text style={styles.name}>{item.name}</Text>
                        <Text style={styles.time}>{item.time}</Text>
                      </View>
                      <Text style={styles.star}>{renderStars(item.star)}</Text>
                    </View>
                  </View>
                  <View style={styles.reviewContent}>
                    <Text style={styles.title}>{item.title}</Text>
                    <Text style={styles.contentText}>{item.content}</Text>
                    <TouchableOpacity
                      style={{
                        flexDirection: "row",
                        alignItems: "center",
                      }}
                    >
                      <Text style={{ marginRight: 5 }}>Xem link nguồn</Text>
                      <Ionicons name="share-social" size={24} color="black" />
                    </TouchableOpacity>
                  </View>
                </View>
              )}
            />

            <TouchableOpacity
              style={{
                flexDirection: "row",
                alignItems: "center",
                justifyContent: "center",
              }}
            >
              <Text style={styles.moreBtn}>
                Xem thêm <Text style={styles.moreBold}>23</Text> bình luận khác
              </Text>
              <Ionicons
                name="chevron-down"
                style={{ marginLeft: 5 }}
                size={16}
                color="#FF7A00"
              />
            </TouchableOpacity>
          </View>
        </View>
      </View>
      <ReviewModal
        visible={showReviewModal}
        onClose={() => setShowReviewModal(false)}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  BoxReview: {
    padding: 15,
    backgroundColor: "#fff",
    marginTop: 20,
    borderRadius: 8,
  },
  header: {
    flexDirection: "row",
    justifyContent: "space-between",
    borderBottomWidth: 1,
    borderBottomColor: "#B1B1B1",
    paddingBottom: 15,
  },
  headerTitle: {
    fontSize: 16,
    fontWeight: "bold",
  },
  sortBox: {
    borderWidth: 1,
    borderColor: "#B1B1B1",
    paddingHorizontal: 10,
    height: 45,
    justifyContent: "center",
    borderRadius: 4,
  },
  content: {
    gap: 25,
    marginTop: 20,
  },
  left: {
    width: "100%",
  },
  totalReview: {
    textAlign: "center",
    fontSize: 22,
    fontWeight: "bold",
    paddingBottom: 5,
  },
  ratingRow: {
    flexDirection: "row",
    justifyContent: "center",
    alignItems: "center",
    marginBottom: 10,
  },
  star: {
    fontSize: 16,
  },
  ratingText: {
    marginLeft: 5,
    fontSize: 16,
    fontWeight: 700,
  },
  ratingBreakdown: {
    borderTopWidth: 1,
    borderTopColor: "#E4E4E4",
    paddingTop: 10,
  },
  ratingLine: {
    flexDirection: "row",
    justifyContent: "space-between",
    marginBottom: 10,
  },
  reviewBtnArea: {
    borderTopWidth: 1,
    borderTopColor: "#E4E4E4",
    paddingTop: 10,
    marginTop: 20,
  },
  reviewPrompt: {
    textAlign: "center",
    marginTop: 10,
  },
  reviewBtn: {
    marginTop: 10,
    height: 40,
    backgroundColor: "#FF7A00",
    justifyContent: "center",
    alignItems: "center",
    borderRadius: 4,
  },
  reviewBtnText: {
    color: "#fff",
  },
  right: {
    width: "100%",
  },
  reviewItem: {
    marginBottom: 15,
    paddingBottom: 15,
    borderBottomWidth: 1,
    borderBottomColor: "rgba(228, 228, 228, 1)",
  },
  avatarBox: {
    flexDirection: "row",
    alignContent: "center",
    width: "100%",
    alignItems: "center",
    marginRight: 20,
  },
  avatar: {
    width: 30,
    height: 30,
    borderRadius: 40,
    marginRight: 10,
  },
  name: {
    fontWeight: "bold",
    marginRight: 10,
  },
  time: {
    fontSize: 12,
    textAlign: "center",
  },
  reviewContent: {
    flex: 1,
  },
  title: {
    fontWeight: "600",
    marginBottom: 5,
  },
  contentText: {
    marginBottom: 5,
  },
  imageList: {
    flexDirection: "row",
    marginBottom: 10,
  },
  reviewImage: {
    width: 80,
    height: 80,
    marginRight: 10,
  },
  btnRow: {
    flexDirection: "row",
  },
  btnLink: {
    color: "#1877F2",
    marginRight: 15,
  },
  black: {
    color: "#000",
  },
  moreBtn: {
    color: "#FF7A00",
  },
  moreBold: {
    fontWeight: "bold",
  },
});

export default ReviewSection;
