import React from "react";
import {
  View,
  Text,
  TouchableOpacity,
  Image,
  ScrollView,
  StyleSheet,
  Alert,
} from "react-native";
import { useNavigation } from "@react-navigation/native";
import BottomNav from "../../Navigation/BottomNav";

const EcoMapCoinExchangeScreen = () => {
  const navigation = useNavigation();
  const userCoin = 1350;
  const expiredDate = "30 Mei 2025";

  const items = [
    {
      id: 1,
      name: "Botol Minum",
      coin: 300,
      image: require("../../assets/images/botol1.png"),
    },
    {
      id: 2,
      name: "Botol Minum Anak",
      coin: 350,
      image: require("../../assets/images/botol2.png"),
    },
    {
      id: 3,
      name: "Tas Belanja",
      coin: 250,
      image: require("../../assets/images/tas2.png"),
    },
    {
      id: 4,
      name: "Peralatan Makan",
      coin: 400,
      image: require("../../assets/images/alatmakan.png"),
    },
  ];

  const handleExchange = (item) => {
    if (userCoin >= item.coin) {
      Alert.alert(
        "Konfirmasi Penukaran",
        `Anda yakin ingin menukar ${item.coin} koin untuk mendapatkan ${item.name}?`,
        [
          { text: "Batal", style: "cancel" },
          {
            text: "Ya",
            onPress: () => {
              Alert.alert(
                "Berhasil",
                `Kamu telah menukar ${item.name} dengan ${item.coin} Koin.`
              );
            },
          },
        ]
      );
    } else {
      Alert.alert(
        "Koin Tidak Cukup",
        "Silakan kumpulkan koin terlebih dahulu."
      );
    }
  };

  return (
    <View style={{ flex: 1, backgroundColor: "#fff" }}>
      <ScrollView contentContainerStyle={styles.container}>
        <Text style={styles.title}>TUKAR KOIN</Text>

        <View style={styles.coinBox}>
          <View style={styles.coinInfoColumn}>
            <Text style={styles.coinAmount}>
              <Text style={styles.coinIcon}></Text> {userCoin}{" "}
              <Text style={styles.coinText}>Koin EcoMap</Text>
            </Text>
            <Text style={styles.expiryText}>
              {userCoin} Koin EcoMap kadaluwarsa pada {expiredDate}
            </Text>
          </View>

          <View style={styles.coinInfoRow}>
            <TouchableOpacity
              style={styles.getCoinBtn}
              onPress={() => navigation.navigate("misimingguan")}
            >
              <Text style={styles.getCoinText}>Dapatkan Koin</Text>
            </TouchableOpacity>
          </View>
        </View>

        <View style={styles.itemGrid}>
          {items.map((item) => (
            <View key={item.id} style={styles.itemCard}>
              <Image source={item.image} style={styles.itemImage} />
              <Text style={styles.itemName}>{item.name}</Text>
              <View style={styles.coinBoxItem}>
                <Text style={styles.itemCoin}>{item.coin} Koin</Text>
              </View>
              <TouchableOpacity
                style={styles.exchangeBtn}
                onPress={() => handleExchange(item)}
              >
                <Text style={styles.exchangeText}>Tukar Koin</Text>
              </TouchableOpacity>
            </View>
          ))}
        </View>
      </ScrollView>

      {/* BottomNav harus di luar ScrollView supaya fixed */}
      <BottomNav />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    padding: 20,
    backgroundColor: "#fff",
    width: "100%",
  },
  title: {
    fontSize: 22,
    fontWeight: "bold",
    color: "#000",
    marginBottom: 20,
    textAlign: "left",
    marginLeft: 10,
    marginTop: 40,
  },
  coinBox: {
    borderWidth: 1,
    borderColor: "#ccc",
    padding: 15,
    borderRadius: 10,
    marginBottom: 20,
    alignItems: "center",
    flexDirection: "row",
    justifyContent: "space-between",
  },
  coinInfoColumn: {
    flexDirection: "column",
    justifyContent: "center",
    alignItems: "flex-start",
  },
  coinAmount: {
    fontSize: 24,
    fontWeight: "bold",
    color: "#d4af37",
  },
  coinIcon: {
    fontSize: 22,
  },
  coinText: {
    color: "#2f4f2f",
    fontSize: 16,
  },
  expiryText: {
    fontSize: 12,
    color: "#888",
    marginTop: 5,
  },
  coinInfoRow: {
    justifyContent: "center",
    alignItems: "center",
  },
  getCoinBtn: {
    backgroundColor: "#d4af37",
    paddingVertical: 6,
    paddingHorizontal: 20,
    borderRadius: 8,
    borderWidth: 1,
    borderColor: "#000",
  },
  getCoinText: {
    color: "#fff",
    fontWeight: "bold",
  },
  itemGrid: {
    flexDirection: "row",
    flexWrap: "wrap",
    justifyContent: "space-between",
  },
  itemCard: {
    width: "48%",
    borderWidth: 1,
    borderColor: "#ccc",
    borderRadius: 12,
    padding: 8,
    marginBottom: 15,
    alignItems: "center",
  },
  itemImage: {
    width: 70,
    height: 100,
    resizeMode: "contain",
  },
  itemName: {
    marginTop: 10,
    fontSize: 20,
    fontWeight: "bold",
    textAlign: "center",
  },
  coinBoxItem: {
    backgroundColor: "#2D572C",
    paddingVertical: 6,
    paddingHorizontal: 20,
    borderRadius: 8,
    marginVertical: 6,
  },
  itemCoin: {
    color: "#fff",
    fontWeight: "bold",
    fontSize: 18,
    textAlign: "center",
  },
  exchangeBtn: {
    backgroundColor: "#e2e2e2",
    paddingHorizontal: 10,
    paddingVertical: 6,
    borderRadius: 6,
    borderWidth: 1,
  },
  exchangeText: {
    fontWeight: "bold",
  },
});

export default EcoMapCoinExchangeScreen;