import React, { useState } from "react";
import {
  View,
  Text,
  StyleSheet,
  TouchableOpacity,
  ScrollView,
  Image,
} from "react-native";
import Icon from "react-native-vector-icons/Ionicons";
import { useNavigation } from "@react-navigation/native";

const users = [
  { name: "Diana Fitri Nur Aini", coins: 5000, rank: 1, color: "#A30000" },
  { name: "Revan Ilyas Fatoni", coins: 4800, rank: 2, color: "#FFD700" },
  { name: "Alena Syahwa", coins: 4350, rank: 3, color: "#228B22" },
  { name: "Dina Dwi Anisa", coins: 0, rank: "-", color: "#aaa" },
];

const misimingguan = () => {
  const navigation = useNavigation();
  const [completedDays, setCompletedDays] = useState([]);
  const [totalCoins, setTotalCoins] = useState(0);

  // Function to mark a day as completed
  const handleDayClick = (day, points) => {
    if (!completedDays.includes(day)) {
      setCompletedDays([...completedDays, day]);
      setTotalCoins(totalCoins + points);
    }
  };

  // Check if the day is completed once
  const isCompleted = (day) => completedDays.includes(day);

  return (
    <ScrollView contentContainerStyle={styles.container}>
      {/* Header */}
      <View style={styles.header}>
        <TouchableOpacity
          onPress={() => navigation.navigate("Home")}
          style={styles.backButton}
        >
          <Icon name="arrow-back" size={24} color="#000" />
        </TouchableOpacity>
        <View style={styles.headerTitle}>
          <Text style={styles.titleText}>DAPATKAN KOIN</Text>
        </View>
      </View>

      {/* Subtitle */}
      <Text style={styles.subTitle}>
        Dapatkan Koin <Text style={{ color: "red" }}>LEBIH BANYAK</Text>
      </Text>
      <Text style={styles.koinText}>
        Koin Terkumpul{" "}
        <Text style={{ fontWeight: "bold" }}>{totalCoins} / 2600</Text>
      </Text>

      {/* Daily Check-in */}
      <Text style={styles.dailyCheckinLabel}>KUNJUNGI TIAP HARI</Text>
      <View style={styles.checkinRow}>
        {[
          { day: "Hari-1", point: 10 },
          { day: "Hari-2", point: 15 },
          { day: "Hari-3", point: 20 },
          { day: "Hari-4", point: 25 },
          { day: "Hari-5", point: 30 },
          { day: "Hari-6", point: 35 },
          { day: "Hari-7", point: 50 },
        ].map((item, index) => (
          <TouchableOpacity
            key={index}
            style={styles.checkinItem}
            onPress={() => handleDayClick(item.day, item.point)}
            disabled={isCompleted(item.day)}
          >
            <View
              style={[
                styles.flameIcon,
                isCompleted(item.day) && styles.completedItem,
              ]}
            >
              <Text
                style={[
                  styles.pointText,
                  isCompleted(item.day) && styles.completedPointText,
                ]}
              >
                {item.point}
              </Text>
              <Icon
                name="flame"
                size={20}
                color={isCompleted(item.day) ? "gray" : "red"}
              />
            </View>
            <Text style={styles.dayText}>{item.day}</Text>
          </TouchableOpacity>
        ))}
      </View>

      {/* Missions as buttons */}
      <View style={styles.missionContainer}>
        <MissionButton
          point="1000"
          label="KONTRIBUSI PENGADUAN SAMPAH"
          icon="person"
        />
        <MissionButton point="800" label="DONASI" icon="cash" />
        <MissionButton point="750" label="PENGADUAN SAMPAH" icon="trash" />
      </View>

      {/* Top 3 Users */}
      <View style={styles.container}>
        <Text style={styles.title}>TOP 3 KOIN TERBANYAK</Text>
        {users.map((user, index) => (
          <View key={index} style={styles.userCard}>
            <Icon name="person-circle" size={40} color="#ccc" />
            <View style={styles.userInfo}>
              <Text style={styles.name}>{user.name}</Text>
              <View style={styles.coinRow}>
                <Icon name="cash-outline" size={16} color="#FFC107" />
                <Text style={styles.coinText}>{user.coins}</Text>
              </View>
            </View>
            <View style={styles.rankBox}>
              <Text style={styles.rankNumber}>{user.rank}</Text>
              <Icon name="ribbon" size={20} color={user.color} />
            </View>
          </View>
        ))}
        <Text style={styles.footerText}>
          "Ayo kumpulkan lebih banyak koin dengan berkontribusi aktif!{"\n"}
          Semakin banyak kamu membantu, semakin besar dampaknya{"\n"}
          untuk lingkungan kita!"
        </Text>
      </View>
    </ScrollView>
  );
};

const MissionButton = ({ point, label, icon }) => (
  <TouchableOpacity style={styles.missionButton}>
    <Text style={styles.koinBox}>{point}</Text>
    <Icon name={icon} size={32} color="#333" />
    <Text style={styles.missionText}>{label}</Text>
  </TouchableOpacity>
);

const styles = StyleSheet.create({
  container: {
    padding: 16,
    backgroundColor: "#fff",
    marginTop: 40,
    flex: 1,
  },
  header: {
    flexDirection: "row",
    alignItems: "center",
    marginBottom: 12,
  },
  headerTitle: {
    flexDirection: "row",
    alignItems: "center",
    marginLeft: 12,
  },
  titleText: {
    fontSize: 22,
    fontWeight: "bold",
    marginLeft: 6,
  },
  subTitle: {
    fontSize: 16,
    marginVertical: 6,
  },
  koinText: {
    textAlign: "right",
    fontSize: 16,
    color: "#555",
  },
  dailyCheckinLabel: {
    textAlign: "center",
    marginVertical: 15,
    fontWeight: "bold",
    color: "#000",
  },
  checkinRow: {
    flexDirection: "row",
    justifyContent: "space-evenly",
    marginBottom: 28,
  },
  checkinItem: {
    alignItems: "center",
    width: 50,
  },
  flameIcon: {
    alignItems: "center",
    backgroundColor: "#fff0f0",
    borderRadius: 10,
    padding: 9,
    borderWidth: 1,
  },
  completedItem: {
    opacity: 0.5, // Lower opacity for completed item
  },
  pointText: {
    fontWeight: "bold",
    color: "#2D572C",
    fontSize: 12,
  },
  completedPointText: {
    color: "gray", // Change point color to gray when completed
  },
  dayText: {
    fontSize: 10,
    color: "#444",
    marginTop: 4,
  },
  missionContainer: {
    flexDirection: "row",
    justifyContent: "space-evenly",
    marginBottom: 10,
    flexWrap: "wrap",
  },
  missionButton: {
    width: "30%",
    backgroundColor: "#fFF",
    borderRadius: 12,
    padding: 12,
    alignItems: "center",
    marginBottom: 12,
    justifyContent: "center",
    borderWidth: 1,
  },
  koinBox: {
    backgroundColor: "#ffeb3b",
    justifyContent: "space-evenly",
    paddingHorizontal: 6,
    paddingVertical: 2,
    borderRadius: 10,
    fontWeight: "bold",
    marginBottom: 6,
    borderWidth: 0.5,
  },
  missionText: {
    textAlign: "center",
    fontSize: 11,
    marginTop: 6,
  },
  title: {
    textAlign: "center",
    fontWeight: "bold",
    fontSize: 18,
    color: "#2D572C",
    marginBottom: 10,
    borderBottomWidth: 1,
    borderTopWidth: 1,
    paddingVertical: 8,
    borderColor: "#ccc",
  },
  userCard: {
    flexDirection: "row",
    alignItems: "center",
    borderWidth: 1,
    borderColor: "#ddd",
    borderRadius: 12,
    padding: 10,
    marginBottom: 12,
  },
  userInfo: {
    flex: 1,
    marginLeft: 12,
  },
  name: {
    fontWeight: "bold",
    fontSize: 14,
  },
  coinRow: {
    flexDirection: "row",
    alignItems: "center",
    marginTop: 4,
  },
  coinText: {
    marginLeft: 4,
    fontSize: 13,
    color: "#555",
  },
  rankBox: {
    alignItems: "center",
  },
  rankNumber: {
    fontWeight: "bold",
    fontSize: 14,
    marginBottom: 2,
  },
  footerText: {
    marginTop: 10,
    textAlign: "center",
    fontSize: 13,
    color: "#444",
  },
});

export default misimingguan;