import React, { useState } from "react";
import {
  Modal,
  View,
  Text,
  StyleSheet,
  TextInput,
  TouchableOpacity,
  Image,
  Pressable,
  ScrollView,
} from "react-native";
import { Ionicons } from "@expo/vector-icons";

type Props = {
  visible: boolean;
  onClose: () => void;
};

const FormReview = ({ visible, onClose }: Props) => {
  const [selectedRating, setSelectedRating] = useState<number>(0);
  const [title, setTitle] = useState("");
  const [content, setContent] = useState("");

  const handleRating = (value: number) => {
    setSelectedRating(value);
  };

  const renderStars = () => {
    return (
      <View style={{ flexDirection: "row" }}>
        {[1, 2, 3, 4, 5].map((i) => (
          <TouchableOpacity key={i} onPress={() => handleRating(i)}>
            <Ionicons
              name="star"
              size={28}
              color={i <= selectedRating ? "#ff7a00" : "#d9d9d9"}
              style={{ marginHorizontal: 4 }}
            />
          </TouchableOpacity>
        ))}
      </View>
    );
  };

  return (
    <Modal visible={visible} animationType="fade" transparent>
      <View style={styles.overlay}>
        <View style={styles.container}>
          {/* Title */}
          <View style={styles.header}>
            <Text style={styles.headerText}>Đánh giá sản phẩm</Text>
            <TouchableOpacity onPress={onClose}>
              <Text style={styles.closeBtn}>x</Text>
            </TouchableOpacity>
          </View>

          <ScrollView contentContainerStyle={{ alignItems: "center" }}>
            {/* Product info */}
            <Image
              source={require("../../../assets/images/small-product-detail.png")}
              style={styles.productImg}
            />
            <Text style={styles.productName}>
              Laptop Gaming Asus TUF FX505GE-BQ037T Core i7-8750H/Win10 (15.6"
              FHD) - Hàng Chính Hãng
            </Text>

            {/* Rating */}
            {renderStars()}

            {/* Title input */}
            <TextInput
              style={styles.input}
              placeholder="Mời bạn nhập tiêu đề..."
              value={title}
              onChangeText={setTitle}
            />

            {/* Content input */}
            <TextInput
              style={[styles.input, { height: 100, textAlignVertical: "top" }]}
              placeholder="Mời bạn chia sẻ cảm nhận..."
              value={content}
              onChangeText={setContent}
              multiline
            />

            {/* Upload placeholder */}
            <TouchableOpacity style={styles.uploadArea}>
              <Ionicons name="image-outline" size={22} color="#1877F2" />
              <Text style={styles.uploadText}>Gửi ảnh thực tế</Text>
              <Text style={styles.uploadNote}>(tối đa 3 ảnh)</Text>
            </TouchableOpacity>

            {/* Submit */}
            <TouchableOpacity style={styles.submitBtn}>
              <Text style={styles.submitText}>Gửi đánh giá</Text>
            </TouchableOpacity>
          </ScrollView>
        </View>
      </View>
    </Modal>
  );
};

export default FormReview;

const styles = StyleSheet.create({
  overlay: {
    flex: 1,
    backgroundColor: "#00000080",
    justifyContent: "center",
    alignItems: "center",
  },
  container: {
    width: "95%",
    backgroundColor: "white",
    borderRadius: 12,
    padding: 20,
    maxHeight: "90%",
  },
  header: {
    flexDirection: "row",
    justifyContent: "space-between",
    borderBottomWidth: 1,
    borderColor: "#E4E4E4",
    paddingBottom: 15,
  },
  headerText: {
    fontSize: 20,
    fontWeight: "bold",
    textAlign: "center",
    flex: 1,
  },
  closeBtn: {
    fontSize: 22,
    color: "#808080",
  },
  productImg: {
    width: 100,
    height: 100,
    marginVertical: 10,
  },
  productName: {
    textAlign: "center",
    marginBottom: 15,
  },
  input: {
    width: "100%",
    borderWidth: 1,
    borderColor: "#B1B1B1",
    borderRadius: 4,
    padding: 10,
    marginVertical: 10,
  },
  uploadArea: {
    flexDirection: "row",
    alignItems: "center",
    marginTop: 10,
  },
  uploadText: {
    color: "#1877F2",
    marginLeft: 5,
  },
  uploadNote: {
    paddingHorizontal: 5,
  },
  submitBtn: {
    marginTop: 15,
    height: 45,
    width: 500,
    backgroundColor: "#C8B7FF",
    borderRadius: 4,
    justifyContent: "center",
    alignItems: "center",
  },
  submitText: {
    color: "white",
    fontWeight: "bold",
  },
});
