circle-collect/src/screens/home/UserProfileStatus.tsx

import React, { use, useCallback, useEffect, useState } from "react";
import {
    StyleSheet,
    Text,
    View,
    ActivityIndicator,
    TouchableOpacity,
    Modal,
    Alert,
} from "react-native";
import * as Keychain from "react-native-keychain";
import { useFocusEffect, useNavigation } from "@react-navigation/native";
import { BASE_URL } from "../../utils/ApiUrls";

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


const UserProfileStatus: React.FC = () => {
    const navigation = useNavigation();
    const [loading, setLoading] = useState(true);
    const [statusData, setStatusData] = useState<ApiResponse["data"] | null>(null);
    const [error, setError] = useState<string | null>(null);
    const [showModal, setShowModal] = useState(false);
    const [intervalId, setIntervalId] = useState<null | number>(null);

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

            setLoading(true);
            setError(null);
            const response = await fetch(`${BASE_URL}user/profile/status`, {
                method: "GET",
                headers: {
                    Accept: "*/*",
                    Authorization: `Bearer ${token}`,
                },
            });

            const json: ApiResponse = await response.json();

            console.log("👤 Profile Status Response:", json);
            if (json.status === "success") {
                setStatusData(json.data);

                if (json.data.profileStatus === false) {
                    setShowModal(true);
                }
            } else {
                setError(json.message || "Failed to fetch status");
            }
        } catch (err) {
            setError("Something went wrong. Please try again.");
        } finally {
            setLoading(false);
        }
    };

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

    useEffect(() => {
        if (statusData && statusData.profileStatus === false) {
            const id = setInterval(() => {
                setShowModal(true);
            }, 5000);
            setIntervalId(id);
            return () => clearInterval(id);
        }
    }, [statusData]);

    const handleGoToProfile = () => {
        // Stop modal repetition
        if (intervalId) {
            clearInterval(intervalId);
            setIntervalId(null);
        }

        setShowModal(false);

        // Option 1: Mark profile as completed temporarily (so condition stops)
        setStatusData(prev => (prev ? { ...prev, profileStatus: true } : prev));

        // Navigate to Profile screen
        navigation.navigate("Profile" as never);
    };

    return (
        <View style={styles.container}>
            {/* <Text style={styles.title}>Welcome Back 👋</Text> */}

            <View style={styles.card}>
                <Text style={styles.cardTitle}>Profile Status</Text>
                <Text>Role: {statusData?.role}</Text>
                <Text>Organizer: {statusData?.organizerStatus}</Text>
                <Text>
                    Profile Completed: {statusData?.profileStatus ? "Yes ✅" : "No ❌"}
                </Text>
            </View>

            {/* Custom Modal */}
            {showModal && (
                <Modal
                    visible={showModal}
                    animationType="slide"
                    transparent
                    onRequestClose={() => setShowModal(false)}
                >
                    <View style={styles.modalOverlay}>
                        <View style={styles.modalBox}>
                            <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, { backgroundColor: "#ccc", marginTop: 8 }]}
                                onPress={() => setShowModal(false)}
                            >
                                <Text style={[styles.buttonText, { color: "#333" }]}>Close</Text>
                            </TouchableOpacity>
                        </View>
                    </View>
                </Modal>
            )}
        </View>
    );
};


export default UserProfileStatus;

const styles = StyleSheet.create({
    container: {
        flex: 1,
        // padding: 16,
        // backgroundColor: "#f5f7fb",
    },
    centered: {
        flex: 1,
        justifyContent: "center",
        alignItems: "center",
    },
    title: {
        fontSize: 22,
        fontWeight: "700",
        marginBottom: 20,
    },
    card: {
        backgroundColor: "#fff",
        padding: 16,
        borderRadius: 12,
        elevation: 3,
        shadowOpacity: 0.1,
        shadowRadius: 6,
        // marginBottom: 20,
    },
    cardTitle: {
        fontSize: 18,
        fontWeight: "600",
        marginBottom: 10,
    },
    button: {
        backgroundColor: "#007AFF",
        paddingVertical: 10,
        paddingHorizontal: 20,
        borderRadius: 8,
        alignItems: "center",
    },
    buttonText: {
        color: "#fff",
        fontWeight: "600",
    },
    errorText: {
        color: "red",
        fontSize: 16,
        marginBottom: 12,
    },
    modalOverlay: {
        flex: 1,
        backgroundColor: "rgba(0,0,0,0.4)",
        justifyContent: "center",
        alignItems: "center",
    },
    modalBox: {
        width: "85%",
        backgroundColor: "#fff",
        borderRadius: 16,
        padding: 20,
        alignItems: "center",
        elevation: 5,
    },
    modalTitle: {
        fontSize: 20,
        fontWeight: "700",
        marginBottom: 10,
        color: "#FF9500",
    },
    modalText: {
        fontSize: 14,
        color: "#444",
        textAlign: "center",
        marginBottom: 20,
    },
});