// import React, { useCallback, useEffect, useState } from "react";
// import {
//   StyleSheet,
//   Text,
//   View,
//   TouchableOpacity,
//   Modal,
//   ToastAndroid,
//   Image,
//   Animated,
// } from "react-native";
// import * as Keychain from "react-native-keychain";
// import { useFocusEffect, useNavigation } from "@react-navigation/native";
// import { PUT_USER_STATUS } from "../../utils/ApiUrls";
// import colors from "../../components/colors";
// import LinearGradient from "react-native-linear-gradient";
// import {Ionicons} from "@react-native-vector-icons/ionicons";

// export type ApiResponse = {
//   message: string;
//   status: string;
//   statusCode: number;
//   data: {
//     role: string;
//     organizerStatus: string;
//     profileStatus: boolean;
//   };
// };

// type UserProfileStatusProps = {
//   profileImage?: { uri: string };
// };

// const UserProfileStatus: React.FC<UserProfileStatusProps> = ({ profileImage }) => {
//   const navigation = useNavigation();
//   const [loading, setLoading] = useState(true);
//   const [statusData, setStatusData] = useState<ApiResponse["data"] | null>(null);
//   const [showModal, setShowModal] = useState(false);
//   const [intervalId, setIntervalId] = useState<null | number>(null);
//   const fadeAnim = useState(new Animated.Value(0))[0];

//   const userStatus = async () => {
//     try {
//       const credentials = await Keychain.getGenericPassword();
//       if (!credentials) {
//         ToastAndroid.show("You are not logged in", ToastAndroid.SHORT);
//         return;
//       }
//       const token = credentials.password;

//       setLoading(true);
//       const response = await fetch(PUT_USER_STATUS, {
//         method: "GET",
//         headers: {
//           Accept: "*/*",
//           Authorization: `Bearer ${token}`,
//         },
//       });

//       const json: ApiResponse = await response.json();
//       if (json.status === "success") {
//         setStatusData(json.data);
//         if (json.data.profileStatus === false) {
//           setShowModal(true);
//         }
//       } else {
//         ToastAndroid.show("Failed to fetch status", ToastAndroid.SHORT);
//       }
//     } catch {
//       ToastAndroid.show("Something went wrong", ToastAndroid.SHORT);
//     } finally {
//       setLoading(false);
//     }
//   };

//   useFocusEffect(
//     useCallback(() => {
//       userStatus();
//     }, [])
//   );

//   useEffect(() => {
//     Animated.timing(fadeAnim, {
//       toValue: 1,
//       duration: 600,
//       useNativeDriver: true,
//     }).start();
//   }, []);

//   const handleGoToProfile = () => {
//     if (intervalId) {
//       clearInterval(intervalId);
//       setIntervalId(null);
//     }
//     setShowModal(false);
//     navigation.navigate("Profile" as never);
//   };

//   const handlePress = (label: string) => {
//     ToastAndroid.show(`${label} clicked`, ToastAndroid.SHORT);
//   };

//   return (
//     <Animated.View style={[styles.container, { opacity: fadeAnim }]}>
//       <LinearGradient
//         colors={[colors.primary, colors.pastelPink]}
//         start={{ x: 0, y: 0 }}
//         end={{ x: 1, y: 1 }}
//         style={styles.card}
//       >
//         {/* LEFT SECTION */}
//         <View style={styles.leftSection}>
//           <Text style={styles.header}>Profile Overview</Text>

//           <View style={styles.infoRow}>
//             <View>
//               {[
//                 "Role",
//                 "Total Active Groups",
//                 "Total Joined Groups",
//                 "Total Created Groups",
//                 "Total Due Payment",
//                 "Total Completed Groups",
//               ].map((label, i) => (
//                 <TouchableOpacity
//                   key={i}
//                   style={styles.infoLabelBox}
//                   onPress={() => handlePress(label)}
//                 >
//                   <Text style={styles.infoLabel}>{label}</Text>
//                 </TouchableOpacity>
//               ))}
//             </View>

//             <View>
//               {[
//                 statusData?.role || "-",
//                 "5",
//                 "3",
//                 "2",
//                 "₹1500",
//                 "4",
//               ].map((value, i) => (
//                 <TouchableOpacity
//                   key={i}
//                   style={styles.infoValueBox}
//                   onPress={() => handlePress(value)}
//                 >
//                   <Text style={styles.infoValue}>{value}</Text>
//                 </TouchableOpacity>
//               ))}
//             </View>
//           </View>

//           <View style={styles.statusBox}>
//             <Text style={styles.statusText}>
//               Organizer: {statusData?.organizerStatus || "-"}
//             </Text>
//             <Text style={styles.statusText}>
//               Profile Completed:{" "}
//               {statusData?.profileStatus ? "Yes ✅" : "No ❌"}
//             </Text>
//           </View>
//         </View>

//         {/* RIGHT SECTION - IMAGE */}
//         {/* <TouchableOpacity
//           onPress={() => navigation.navigate("Profile" as never)}
//           activeOpacity={0.8}
//         >
//           {profileImage ? (
//             <Image source={{ uri: profileImage.uri }} style={styles.avatar} />
//           ) : (
//             <Ionicons name="person-circle-outline" size={80} color="#fff" />
//           )}
//         </TouchableOpacity> */}
//       </LinearGradient>

//       {/* Modal */}
//       {showModal && (
//         <Modal visible transparent animationType="fade">
//           <View style={styles.modalOverlay}>
//             <View style={styles.modalBox}>
//               <Ionicons name="alert-circle" size={50} color={colors.primary} />
//               <Text style={styles.modalTitle}>Complete Your Profile</Text>
//               <Text style={styles.modalText}>
//                 Your profile is incomplete. Please update your details to continue.
//               </Text>

//               <TouchableOpacity style={styles.button} onPress={handleGoToProfile}>
//                 <Text style={styles.buttonText}>Go to Profile</Text>
//               </TouchableOpacity>

//               <TouchableOpacity
//                 style={[styles.button, styles.secondaryButton]}
//                 onPress={() => setShowModal(false)}
//               >
//                 <Text style={[styles.buttonText, styles.secondaryText]}>Later</Text>
//               </TouchableOpacity>
//             </View>
//           </View>
//         </Modal>
//       )}
//     </Animated.View>
//   );
// };

// export default UserProfileStatus;

// const styles = StyleSheet.create({
//   container: {
//     margin: 12,
//   },
//   card: {
//     flexDirection: "row",
//     justifyContent: "space-between",
//     alignItems: "center",
//     borderRadius: 16,
//     padding: 18,
//     elevation: 5,
//     shadowColor: "#000",
//     shadowOpacity: 0.2,
//     shadowRadius: 6,
//   },
//   header: {
//     fontSize: 20,
//     fontWeight: "700",
//     color: "#fff",
//     marginBottom: 10,
//   },
//   leftSection: {
//     flex: 1,
//   },
//   infoRow: {
//     flexDirection: "row",
//     justifyContent: "space-between",
//     marginBottom: 10,
//   },
//   infoLabelBox: {
//     marginBottom: 6,
//   },
//   infoLabel: {
//     color: "rgba(255,255,255,0.8)",
//     fontSize: 13,
//   },
//   infoValueBox: {
//     marginBottom: 6,
//     alignItems: "flex-end",
//   },
//   infoValue: {
//     color: "#fff",
//     fontWeight: "600",
//     fontSize: 13,
//   },
//   statusBox: {
//     backgroundColor: "rgba(255,255,255,0.15)",
//     padding: 10,
//     borderRadius: 8,
//   },
//   statusText: {
//     color: "#fff",
//     fontSize: 13,
//   },
//   avatar: {
//     width: 80,
//     height: 80,
//     borderRadius: 40,
//     borderWidth: 2,
//     borderColor: "#fff",
//   },
//   modalOverlay: {
//     flex: 1,
//     backgroundColor: "rgba(0,0,0,0.5)",
//     justifyContent: "center",
//     alignItems: "center",
//   },
//   modalBox: {
//     width: "85%",
//     backgroundColor: "#fff",
//     borderRadius: 18,
//     padding: 20,
//     alignItems: "center",
//     elevation: 6,
//   },
//   modalTitle: {
//     fontSize: 20,
//     fontWeight: "700",
//     color: colors.primary,
//     marginVertical: 8,
//   },
//   modalText: {
//     textAlign: "center",
//     color: "#444",
//     fontSize: 14,
//     marginBottom: 18,
//   },
//   button: {
//     backgroundColor: colors.primary,
//     paddingVertical: 10,
//     paddingHorizontal: 30,
//     borderRadius: 8,
//     marginTop: 8,
//   },
//   buttonText: {
//     color: "#fff",
//     fontWeight: "600",
//   },
//   secondaryButton: {
//     backgroundColor: "#eee",
//   },
//   secondaryText: {
//     color: "#333",
//   },
// });




import React, { useCallback, useEffect, useState } from "react";
import {
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
  Modal,
  ToastAndroid,
  Image,
  Animated,
} from "react-native";
import * as Keychain from "react-native-keychain";
import { useFocusEffect, useNavigation } from "@react-navigation/native";
import { PUT_USER_STATUS } from "../../utils/ApiUrls";
import colors from "../../components/colors";
import LinearGradient from "react-native-linear-gradient";
import { Ionicons } from "@react-native-vector-icons/ionicons";

export type ApiResponse = {
  message: string;
  status: string;
  statusCode: number;
  data: {
    role: string;
    organizerStatus: string;
    profileStatus: boolean;
  };
};

type UserProfileStatusProps = {
  profileImage?: { uri: string };
};

const UserProfileStatus: React.FC<UserProfileStatusProps> = ({ profileImage }) => {
  const navigation = useNavigation();
  const [loading, setLoading] = useState(true);
  const [statusData, setStatusData] = useState<ApiResponse["data"] | null>(null);
  const [showModal, setShowModal] = useState(false);
  const [intervalId, setIntervalId] = useState<null | number>(null);
  const [moreItem, setMoreItem] = useState(false)
  const fadeAnim = useState(new Animated.Value(0))[0];
  const scaleAnim = useState(new Animated.Value(0.9))[0];

  const userStatus = async () => {
    try {
      const credentials = await Keychain.getGenericPassword();
      if (!credentials) {
        ToastAndroid.show("You are not logged in", ToastAndroid.SHORT);
        return;
      }
      const token = credentials.password;

      setLoading(true);
      const response = await fetch(PUT_USER_STATUS, {
        method: "GET",
        headers: {
          Accept: "*/*",
          Authorization: `Bearer ${token}`,
        },
      });

      const json: ApiResponse = await response.json();
      if (json.status === "success") {
        setStatusData(json.data);
        if (json.data.profileStatus === false) {
          setShowModal(true);
        }
      } else {
        ToastAndroid.show("Failed to fetch status", ToastAndroid.SHORT);
      }
    } catch {
      ToastAndroid.show("Something went wrong", ToastAndroid.SHORT);
    } finally {
      setLoading(false);
    }
  };

  useFocusEffect(
    useCallback(() => {
      userStatus();
    }, [])
  );

  useEffect(() => {
    Animated.parallel([
      Animated.timing(fadeAnim, {
        toValue: 1,
        duration: 600,
        useNativeDriver: true,
      }),
      Animated.timing(scaleAnim, {
        toValue: 1,
        duration: 600,
        useNativeDriver: true,
      }),
    ]).start();
  }, []);

  const handleGoToProfile = () => {
    if (intervalId) {
      clearInterval(intervalId);
      setIntervalId(null);
    }
    setShowModal(false);
    navigation.navigate("Profile" as never);
  };

  const handlePress = (label: string) => {
    ToastAndroid.show(`${label} clicked`, ToastAndroid.SHORT);
  };

  // Graphics and icons for different status items
  const getStatusIcon = (index: number) => {
    const icons = ["person", "people", "person-add", "create", "card", "checkmark-done"];
    return icons[index];
  };

  const getValueColor = (value: string) => {
    if (value.includes("₹")) return "#4CAF50"; // Green for money
    if (value === "Active" || value === "Yes ✅") return "#4CAF50";
    if (value === "Inactive" || value === "No ❌") return "#FF6B6B";
    return "#fff";
  };

  return (
    <Animated.View style={[styles.container, { opacity: fadeAnim, transform: [{ scale: scaleAnim }] }]}>
      {/* Background Decorative Elements */}
      <View style={styles.backgroundGraphics}>
        <View style={[styles.floatingCircle, styles.circle1]} />
        <View style={[styles.floatingCircle, styles.circle2]} />
        <View style={[styles.floatingCircle, styles.circle3]} />
      </View>

      <LinearGradient
        colors={[colors.primary, colors.pastelPink]}
        start={{ x: 0, y: 0 }}
        end={{ x: 1, y: 1 }}
        style={styles.card}
      >
        {/* Header with Graphics */}
        <View style={styles.headerSection}>
          <View style={styles.headerContent}>
            <View style={styles.titleWithIcon}>
              <Ionicons name="stats-chart" size={24} color="#fff" style={styles.headerIcon} />
              <Text style={styles.header}>Profile Overview</Text>
            </View>
            <View style={styles.statusBadge}>
              <Ionicons name="shield-checkmark" size={16} color="#fff" />
              <Text style={styles.statusBadgeText}>
                {statusData?.profileStatus ? "Verified" : "Pending"}
              </Text>
            </View>
          </View>
        </View>

        {/* Main Content */}
        <View style={styles.contentSection}>
          {/* LEFT SECTION - Stats */}
          <View style={styles.leftSection}>
            <View style={styles.infoGrid}>
              {[
                { label: "Role", value: statusData?.role || "-" },
                { label: "Active Groups", value: "5" },
                { label: "Joined Groups", value: "3" },
                { label: "Created Groups", value: "2" },
                { label: "Due Payment", value: "₹1500" },
                { label: "Completed Groups", value: "4" },
              ].map((item, index) => (
                <TouchableOpacity
                  key={index}
                  style={styles.infoCard}
                  onPress={() => handlePress(item.label)}
                >
                  <View style={styles.infoCardHeader}>
                    <View style={styles.iconContainer}>
                      <Ionicons
                        name={getStatusIcon(index)}
                        size={16}
                        color={colors.primary}
                      />
                    </View>
                    <Text style={styles.infoLabel}>{item.label}</Text>
                  </View>
                  <Text style={[styles.infoValue, { color: getValueColor(item.value) }]}>
                    {item.value}
                  </Text>
                </TouchableOpacity>
              ))}
              <TouchableOpacity onPress={()=>setMoreItem(!moreItem)}>
              <Ionicons name={"arrow-down"} color="#ffff" size={22}/>
              </TouchableOpacity>
            </View>

            {/* Status Overview Card */}
            {
              moreItem && (
                <View style={styles.statusOverview}>
                  <View style={styles.statusHeader}>
                    <Ionicons name="information-circle" size={20} color="#fff" />
                    <Text style={styles.statusOverviewTitle}>Status Overview</Text>
                  </View>

                  <View style={styles.statusItems}>
                    <View style={styles.statusItem}>
                      <View style={styles.statusIndicator}>
                        <Ionicons
                          name={statusData?.organizerStatus === "Active" ? "checkmark-circle" : "time"}
                          size={16}
                          color={statusData?.organizerStatus === "Active" ? "#4CAF50" : "#FFA500"}
                        />
                      </View>
                      <Text style={styles.statusItemText}>
                        Organizer: {statusData?.organizerStatus || "-"}
                      </Text>
                    </View>

                    <View style={styles.statusItem}>
                      <View style={styles.statusIndicator}>
                        <Ionicons
                          name={statusData?.profileStatus ? "checkmark-circle" : "close-circle"}
                          size={16}
                          color={statusData?.profileStatus ? "#4CAF50" : "#FF6B6B"}
                        />
                      </View>
                      <Text style={styles.statusItemText}>
                        Profile: {statusData?.profileStatus ? "Complete" : "Incomplete"}
                      </Text>
                    </View>
                  </View>
                </View>
              )}
          </View>

          {/* RIGHT SECTION - Profile Graphic */}
          <TouchableOpacity
            onPress={() => navigation.navigate("Profile" as never)}
            activeOpacity={0.8}
            style={styles.profileSection}
          >
            <LinearGradient
              colors={['rgba(255,255,255,0.2)', 'rgba(255,255,255,0.1)']}
              style={styles.profileContainer}
            >
              {profileImage ? (
                <Image source={{ uri: profileImage.uri }} style={styles.avatar} />
              ) : (
                <View style={styles.avatarPlaceholder}>
                  <Ionicons name="person" size={40} color="#fff" />
                </View>
              )}
              <View style={styles.profileBadge}>
                <Ionicons name="camera" size={16} color={colors.primary} />
              </View>
              <Text style={styles.viewProfileText}>View Profile</Text>
            </LinearGradient>
          </TouchableOpacity>
        </View>

        {/* Progress Bar for Profile Completion */}
        <View style={styles.progressSection}>
          <View style={styles.progressHeader}>
            <Text style={styles.progressText}>Profile Completion</Text>
            <Text style={styles.progressPercent}>
              {statusData?.profileStatus ? "100%" : "60%"}
            </Text>
          </View>
          <View style={styles.progressBar}>
            <Animated.View
              style={[
                styles.progressFill,
                {
                  width: statusData?.profileStatus ? '100%' : '60%',
                  backgroundColor: statusData?.profileStatus ? '#4CAF50' : '#FFA500'
                }
              ]}
            />
          </View>
        </View>
      </LinearGradient>

      {/* Enhanced Modal */}
      {showModal && (
        <Modal visible transparent animationType="fade">
          <View style={styles.modalOverlay}>
            <Animated.View
              style={[
                styles.modalBox,
                {
                  opacity: fadeAnim,
                  transform: [{ scale: scaleAnim }]
                }
              ]}
            >
              <View style={styles.modalGraphic}>
                <Ionicons name="alert-circle" size={60} color={colors.primary} />
                <View style={styles.modalPulse} />
              </View>

              <Text style={styles.modalTitle}>Complete Your Profile</Text>
              <Text style={styles.modalText}>
                Your profile is incomplete. Please update your details to unlock all features and improve your experience.
              </Text>

              <View style={styles.modalProgress}>
                <Text style={styles.modalProgressText}>Current Progress: 60%</Text>
                <View style={styles.modalProgressBar}>
                  <View style={[styles.modalProgressFill, { width: '60%' }]} />
                </View>
              </View>

              <View style={styles.modalButtons}>
                <TouchableOpacity
                  style={[styles.button, styles.primaryButton]}
                  onPress={handleGoToProfile}
                >
                  <Ionicons name="person" size={18} color="#fff" />
                  <Text style={styles.buttonText}>Complete Profile</Text>
                </TouchableOpacity>

                <TouchableOpacity
                  style={[styles.button, styles.secondaryButton]}
                  onPress={() => setShowModal(false)}
                >
                  <Ionicons name="time" size={18} color="#666" />
                  <Text style={[styles.buttonText, styles.secondaryText]}>Remind Later</Text>
                </TouchableOpacity>
              </View>
            </Animated.View>
          </View>
        </Modal>
      )}
    </Animated.View>
  );
};

export default UserProfileStatus;

const styles = StyleSheet.create({
  container: {
    margin: 16,
  },
  backgroundGraphics: {
    position: 'absolute',
    width: '100%',
    height: '100%',
    zIndex: -1,
  },
  floatingCircle: {
    position: 'absolute',
    borderRadius: 50,
    backgroundColor: 'rgba(255,255,255,0.1)',
  },
  circle1: {
    width: 80,
    height: 80,
    top: -20,
    left: -20,
  },
  circle2: {
    width: 60,
    height: 60,
    bottom: -10,
    right: -10,
  },
  circle3: {
    width: 40,
    height: 40,
    top: '40%',
    right: '10%',
  },
  card: {
    borderRadius: 24,
    padding: 20,
    elevation: 8,
    shadowColor: "#000",
    shadowOpacity: 0.3,
    shadowRadius: 10,
    shadowOffset: { width: 0, height: 4 },
    overflow: 'hidden',
  },
  headerSection: {
    marginBottom: 16,
  },
  headerContent: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  titleWithIcon: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  headerIcon: {
    marginRight: 8,
  },
  header: {
    fontSize: 22,
    fontWeight: "700",
    color: "#fff",
  },
  statusBadge: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: 'rgba(255,255,255,0.2)',
    paddingHorizontal: 12,
    paddingVertical: 6,
    borderRadius: 20,
  },
  statusBadgeText: {
    color: "#fff",
    fontSize: 12,
    fontWeight: '600',
    marginLeft: 4,
  },
  contentSection: {
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  leftSection: {
    flex: 1,
    marginRight: 16,
  },
  infoGrid: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    justifyContent: 'space-between',
    marginBottom: 16,
  },
  infoCard: {
    width: '48%',
    backgroundColor: 'rgba(255,255,255,0.15)',
    borderRadius: 12,
    padding: 12,
    marginBottom: 8,
    borderWidth: 1,
    borderColor: 'rgba(255,255,255,0.2)',
  },
  infoCardHeader: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 6,
  },
  iconContainer: {
    width: 24,
    height: 24,
    backgroundColor: '#fff',
    borderRadius: 6,
    justifyContent: 'center',
    alignItems: 'center',
    marginRight: 6,
  },
  infoLabel: {
    color: "rgba(255,255,255,0.8)",
    fontSize: 12,
    fontWeight: '500',
  },
  infoValue: {
    fontWeight: "700",
    fontSize: 16,
  },
  statusOverview: {
    backgroundColor: 'rgba(255,255,255,0.15)',
    padding: 16,
    borderRadius: 12,
    borderWidth: 1,
    borderColor: 'rgba(255,255,255,0.2)',
  },
  statusHeader: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 12,
  },
  statusOverviewTitle: {
    color: "#fff",
    fontSize: 16,
    fontWeight: '600',
    marginLeft: 6,
  },
  statusItems: {
    gap: 8,
  },
  statusItem: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  statusIndicator: {
    marginRight: 8,
  },
  statusItemText: {
    color: "#fff",
    fontSize: 14,
  },
  profileSection: {
    alignItems: 'center',
  },
  profileContainer: {
    alignItems: 'center',
    padding: 16,
    borderRadius: 20,
    borderWidth: 2,
    borderColor: 'rgba(255,255,255,0.3)',
  },
  avatar: {
    width: 80,
    height: 80,
    borderRadius: 40,
    borderWidth: 3,
    borderColor: "#fff",
  },
  avatarPlaceholder: {
    width: 80,
    height: 80,
    borderRadius: 40,
    backgroundColor: 'rgba(255,255,255,0.2)',
    justifyContent: 'center',
    alignItems: 'center',
    borderWidth: 3,
    borderColor: "#fff",
  },
  profileBadge: {
    position: 'absolute',
    top: 12,
    right: 12,
    width: 24,
    height: 24,
    backgroundColor: '#fff',
    borderRadius: 12,
    justifyContent: 'center',
    alignItems: 'center',
  },
  viewProfileText: {
    color: "#fff",
    fontSize: 12,
    fontWeight: '600',
    marginTop: 8,
  },
  progressSection: {
    marginTop: 16,
    paddingTop: 16,
    borderTopWidth: 1,
    borderTopColor: 'rgba(255,255,255,0.3)',
  },
  progressHeader: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: 8,
  },
  progressText: {
    color: "#fff",
    fontSize: 14,
    fontWeight: '600',
  },
  progressPercent: {
    color: "#fff",
    fontSize: 14,
    fontWeight: '700',
  },
  progressBar: {
    height: 6,
    backgroundColor: 'rgba(255,255,255,0.3)',
    borderRadius: 3,
    overflow: 'hidden',
  },
  progressFill: {
    height: '100%',
    borderRadius: 3,
  },
  modalOverlay: {
    flex: 1,
    backgroundColor: "rgba(0,0,0,0.6)",
    justifyContent: "center",
    alignItems: "center",
  },
  modalBox: {
    width: "85%",
    backgroundColor: "#fff",
    borderRadius: 24,
    padding: 24,
    alignItems: "center",
    elevation: 12,
    shadowColor: "#000",
    shadowOpacity: 0.3,
    shadowRadius: 15,
    shadowOffset: { width: 0, height: 6 },
  },
  modalGraphic: {
    position: 'relative',
    marginBottom: 16,
  },
  modalPulse: {
    position: 'absolute',
    top: -10,
    left: -10,
    right: -10,
    bottom: -10,
    borderRadius: 40,
    backgroundColor: 'rgba(76, 175, 80, 0.2)',
  },
  modalTitle: {
    fontSize: 22,
    fontWeight: "700",
    color: colors.primary,
    marginBottom: 8,
    textAlign: 'center',
  },
  modalText: {
    textAlign: "center",
    color: "#666",
    fontSize: 14,
    lineHeight: 20,
    marginBottom: 20,
  },
  modalProgress: {
    width: '100%',
    marginBottom: 20,
  },
  modalProgressText: {
    textAlign: 'center',
    color: "#333",
    fontSize: 12,
    fontWeight: '600',
    marginBottom: 6,
  },
  modalProgressBar: {
    height: 4,
    backgroundColor: '#f0f0f0',
    borderRadius: 2,
    overflow: 'hidden',
  },
  modalProgressFill: {
    height: '100%',
    backgroundColor: colors.primary,
    borderRadius: 2,
  },
  modalButtons: {
    width: '100%',
    gap: 8,
  },
  button: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    paddingVertical: 12,
    paddingHorizontal: 24,
    borderRadius: 12,
    gap: 8,
  },
  primaryButton: {
    backgroundColor: colors.primary,
  },
  secondaryButton: {
    backgroundColor: "#f5f5f5",
    borderWidth: 1,
    borderColor: '#e0e0e0',
  },
  buttonText: {
    color: "#fff",
    fontWeight: "600",
    fontSize: 14,
  },
  secondaryText: {
    color: "#666",
  },
});