import React, { useMemo, useState, useEffect } from "react";
import {
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
  Modal,
  ToastAndroid,
  Image,
  ScrollView,
  ActivityIndicator,
} from "react-native";
import { useNavigation } from "@react-navigation/native";
import colors from "../../components/colors";
import LinearGradient from "react-native-linear-gradient";
import { Ionicons } from "@react-native-vector-icons/ionicons";
import { apiCall } from "../../utils/ApiHelper";
import { PAY_ALL_URL } from "../../utils/ApiUrls";
import {
  responsiveHeight,
  responsiveWidth,
  responsiveFontSize
} from "react-native-responsive-dimensions";

type StatusData = {
  role?: string;
  organizerStatus?: string;
  profileStatus?: boolean;
};

type DashboardData = {
  totalPaidAmountMonth?: number;
  multiplePayAmount?: number;
  completeStatusMyGroupCount?: number;
  activeStatusMyGroupCount?: number;
  createdGroupActiveCount?: number;
  createdGroupCompleteCount?: number;
  myCreatedGroups?: any[];
  myJoinedGroups?: Array<any>;
  requestList?: any[];
  myRequests?: Array<{ status: string }>;
  dueGroupDetails?: Array<{
    groupId: string;
    groupName: string;
    baseAmount: number;
    lateFee: number;
    waivedAmount: number;
    totalDue: number;
    dueDate: string;
    isLate: boolean;
    currentCycle: number;
    lateFeeMode: string;
    lateFeeValue: number;
    hasPaid: boolean;
  }>;
};

type UserProfileStatusProps = {
  profileImage?: { uri: string };
  statusData: StatusData | null;
  userDashboard: DashboardData | null;
};

const UserProfileStatus: React.FC<UserProfileStatusProps> = ({
  profileImage,
  statusData,
  userDashboard,
}) => {
  const navigation = useNavigation();
  const [showModal, setShowModal] = useState(false);

  // Payment UI states
  const [showPayDialog, setShowPayDialog] = useState(false);
  const [selectedGroupIds, setSelectedGroupIds] = useState<string[]>([]);
  const [submitting, setSubmitting] = useState(false);

  // console.log("user me : ", userDashboard)
  // Preselect all due groups at mount and on change
  useEffect(() => {
    if (userDashboard?.dueGroupDetails) {
      setSelectedGroupIds(userDashboard.dueGroupDetails.map((g) => g.groupId));
    }
  }, [userDashboard?.dueGroupDetails]);

  // Show profile completion modal only if profile is incomplete

  console.log("userDashboard : ", userDashboard)
  useEffect(() => {
    if (statusData && !statusData.profileStatus) setShowModal(true);
  }, [statusData]);

  // Top grid info items
  const infoItems = useMemo(
  () => [
    { icon: <Ionicons name="person-outline" size={20} color={colors.primary} />, label: "Role", value: statusData?.role || "-" },
    { icon: <Ionicons name="pie-chart-outline" size={20} color={colors.primary} />, label: "Active Groups", value: userDashboard?.activeStatusMyGroupCount?.toString() || "0" },
    { icon: <Ionicons name="book-outline" size={20} color={colors.primary} />, label: "Joined Groups", value: userDashboard?.myJoinedGroups?.length?.toString() || "0" },
    { icon: <Ionicons name="people-outline" size={20} color={colors.primary} />, label: "My Groups", value: userDashboard?.myCreatedGroups?.length?.toString() || "0" },
    { icon: <Ionicons name="document-text-outline" size={20} color={colors.primary} />, label: "Total Due", value: `₹${userDashboard?.multiplePayAmount || 0}` },
    { icon: <Ionicons name="checkmark-done-outline" size={20} color={colors.primary} />, label: "Completed", value: userDashboard?.completeStatusMyGroupCount?.toString() || "0" },
  ],
  [userDashboard, statusData]
);


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

  // Dues and payment logic
  const dueGroups = userDashboard?.dueGroupDetails || [];
  const totalDue = dueGroups.reduce((sum, item) => sum + (item.totalDue || 0), 0);
  const totalDueSelected = useMemo(
    () =>
      dueGroups
        .filter((g) => selectedGroupIds.includes(g.groupId))
        .reduce((sum, item) => sum + (item.totalDue || 0), 0),
    [dueGroups, selectedGroupIds]
  );

  const handleToggleGroup = (groupId: string) => {
    setSelectedGroupIds((prev) =>
      prev.includes(groupId)
        ? prev.filter((id) => id !== groupId)
        : [...prev, groupId]
    );
  };

  const handlePayAll = async () => {
    if (selectedGroupIds.length === 0) {
      ToastAndroid.show("Select at least one group", ToastAndroid.SHORT);
      return;
    }
    setSubmitting(true);
    try {
      const response = await apiCall(PAY_ALL_URL, 'POST', { groupIds: selectedGroupIds }, undefined, "Payment failed. Try again.") as any;

      console.log("-=-=-=-=-=-=-=-=-=-=-=", response)
      if (response.status) {
        ToastAndroid.show("Payment initiated!", ToastAndroid.LONG);
        setShowPayDialog(false);
      } else {
        ToastAndroid.show("Payment failed. Try again.", ToastAndroid.SHORT);
      }
    } catch {
      ToastAndroid.show("Network error. Try again.", ToastAndroid.SHORT);
    }
    setSubmitting(false);
  };

  // Bottom bar
  const renderDueBar = () => (
    <View style={styles.dueBar}>
      <Text style={styles.dueBarText}>
        Total Due: <Text style={{ color: "#FFDE03", fontWeight: "bold" }}>₹{totalDue}</Text>
      </Text>
      <TouchableOpacity
        style={styles.payAllButton}
        onPress={() => setShowPayDialog(true)}
        disabled={dueGroups.length === 0}
        activeOpacity={0.8}
      >
        <Ionicons name="wallet-outline" size={20} color="#000000ff" />
        <Text style={styles.payAllButtonText}>Pay All</Text>
      </TouchableOpacity>
    </View>
  );

  // Payment dialog modal
  const renderPayDialog = () => (
    <Modal visible={showPayDialog} transparent animationType="fade" onRequestClose={() => setShowPayDialog(false)}>
      <View style={styles.payModalOverlay}>
        <LinearGradient
          colors={[colors.white, colors.white]}
          start={{ x: 0.2, y: 0 }}
          end={{ x: 1, y: 1 }}
          style={styles.payModalBox}
        >
          <View style={styles.payDialogHeader}>
            <Ionicons name="card-outline" color="#000000ff" size={22} />
            <Text style={styles.payDialogTitle}>Select Groups to Pay</Text>
            <TouchableOpacity onPress={() => setShowPayDialog(false)}>
              <Ionicons name="close-circle" color="#000000ff" size={24} />
            </TouchableOpacity>
          </View>
          <ScrollView
            style={{ maxHeight: 200, width: "100%" }}
            contentContainerStyle={{ paddingVertical: 8, paddingHorizontal: 4 }}
          >
            {dueGroups.map((group) => (
              <TouchableOpacity
                key={group.groupId}
                style={[
                  styles.payGroupOption,
                  selectedGroupIds.includes(group.groupId) && styles.payOptionSelected,
                ]}
                onPress={() => handleToggleGroup(group.groupId)}
                activeOpacity={0.85}
              >
                <Ionicons
                  name={selectedGroupIds.includes(group.groupId) ? "checkbox" : "square-outline"}
                  size={22}
                  color={selectedGroupIds.includes(group.groupId) ? colors.primary : "#000000ff"}
                />
                <View style={{ flex: 1 }}>
                  <Text style={[styles.payGroupName, { color: "#000000ff" }]}>{group.groupName}</Text>
                  <Text style={styles.payDueText}>
                    ₹{group.baseAmount}
                    {group.lateFee > 0 ? ` (Late: ₹${group.lateFee})` : ""}
                  </Text>
                </View>
                <Text style={[styles.payAmount, { color: "#4CAF50" }]}>₹{group.totalDue}</Text>
              </TouchableOpacity>
            ))}
          </ScrollView>
          <View style={styles.payDialogFooter}>
            <Text style={styles.payDialogTotal}>
              Total: <Text style={{ fontWeight: "bold", color: "#ff5f03ff" }}>₹{totalDueSelected}</Text>
            </Text>
            <TouchableOpacity
              style={[styles.payConfirmButton, { opacity: submitting ? 0.7 : 1 }]}
              onPress={handlePayAll}
              disabled={submitting || selectedGroupIds.length === 0}
              activeOpacity={0.8}
            >
              {submitting ? (
                <ActivityIndicator color="#fff" />
              ) : (
                <>
                  <Ionicons name="checkmark-circle" size={22} color="#ffffffff" />
                  <Text style={styles.payButtonText}>Pay Selected</Text>
                </>
              )}
            </TouchableOpacity>
          </View>
        </LinearGradient>
      </View>
    </Modal>
  );

  return (
    <View style={styles.container}>
      <LinearGradient
        colors={[colors.primary, colors.pastelPink]}
        start={{ x: 0, y: 0 }}
        end={{ x: 1, y: 1 }}
        style={styles.card}
      >
        <View style={styles.headerSection}>
          <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 style={styles.contentSection}>
          <View style={styles.leftSection}>
            <View style={styles.infoGrid}>
              {infoItems.map((item, idx) => (
                <View key={item.label} style={styles.infoCard}>
                  <View style={styles.infoCardHeader}>
                    <View style={styles.iconContainer}>
                      {item.icon}
                    </View>
                    <Text style={styles.infoLabel} >
                      {item.label}
                    </Text>
                  </View>
                  <Text style={[styles.infoValue, { color: getValueColor(item.value) }]} numberOfLines={1}>
                    {item.value}
                  </Text>
                </View>
              ))}
            </View>
          </View>

          <View style={styles.profileSection}>
            <TouchableOpacity
              onPress={() => navigation.navigate("Profile" as never)}
              activeOpacity={0.8}
            >
              <View style={styles.profileContainer}>
                {profileImage !== undefined ? (
                  <Image source={{ uri: profileImage.uri }} style={styles.avatar} />
                ) : (
                  <View style={styles.avatarPlaceholder}>
                    <Ionicons name="person" size={45} color="#fff" />
                  </View>
                )}
              </View>
              <View style={styles.infoCardOne}>
              <Text style={{ color: "#fff", fontSize: responsiveWidth(2.3)}}>Total Paid Amount <Text style={{ fontWeight: "900"}}>{userDashboard?.totalPaidAmountMonth}</Text></Text>
              {/* <Text style={{ color: "#fff", fontWeight: "400"}}>Total Paid Amount {userDashboard?.totalPaidAmountMonth}</Text> */}
          
           </View>
            </TouchableOpacity>
          </View>
        </View>
        {renderDueBar()}
      </LinearGradient>

      {renderPayDialog()}

      {showModal && (
        <Modal visible transparent animationType="fade">
          <View style={styles.modalOverlay}>
            <View style={styles.modalBox}>
              <Ionicons name="alert-circle" size={60} color={colors.primary} />
              <Text style={styles.modalTitle}>Complete Your Profile</Text>
              <Text style={styles.modalText}>
                Your profile is incomplete. Update your details to unlock all features.
              </Text>
              <View style={styles.modalButtons}>
                <TouchableOpacity
                  style={[styles.button, styles.primaryButton]}
                  onPress={() => {
                    setShowModal(false);
                    navigation.navigate("Profile" as never);
                  }}
                >
                  <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>
            </View>
          </View>
        </Modal>
      )}
    </View>
  );
};

export default UserProfileStatus;

const styles = StyleSheet.create({
  container: {
    marginHorizontal: 8,
    marginBottom: 16,
  },
  card: {
    borderRadius: 24,
    overflow: "hidden",
    elevation: 8,
    shadowColor: "#000",
    shadowOpacity: 0.3,
    shadowRadius: 10,
    shadowOffset: { width: 0, height: 4 },
  },
  headerSection: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    paddingTop: 16,
    paddingHorizontal: 18,
    marginBottom: 16,
  },
  titleWithIcon: {
    flexDirection: 'row',
    alignItems: 'center'
  },
  headerIcon: {
    marginRight: 8
  },
  header: {
    fontSize: responsiveWidth(3.5),
    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: responsiveWidth(2),
    fontWeight: '600',
    marginLeft: 4
  },
  contentSection: {
    flexDirection: 'row',
    alignItems: 'flex-start',
    paddingHorizontal: 16,
    paddingBottom: 16,
  },
  leftSection: {
    flex: 1,
    marginRight: 16
  },
  infoGrid: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    gap: 10
  },
  infoCard: {
    backgroundColor: 'rgba(255,255,255,0.15)',
    borderRadius: 14,
    padding: 12,
    borderWidth: 1,
    borderColor: 'rgba(255,255,255,0.2)',
    flex: 1,
    minWidth: '45%',
    marginBottom: 8,
  },
  infoCardOne: {
    backgroundColor: 'rgba(255,255,255,0.15)',
    borderRadius: 14,
    padding: 12,
    borderWidth: 1,
    borderColor: 'rgba(255,255,255,0.2)',
    // flex: 1,
    minWidth: '45%',
    marginTop: 21,
  },
  infoCardHeader: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 6
  },
  iconContainer: {
    width: 28,
    height: 28,
    backgroundColor: '#fff',
    borderRadius: 8,
    justifyContent: 'center',
    alignItems: 'center',
    marginRight: 8,
  },
  infoLabel: {
    color: "rgba(255,255,255,0.9)",
    fontSize: responsiveWidth(2),
    fontWeight: '500',
    flexShrink: 1,
  },
  infoValue: {
    fontWeight: "700",
    fontSize: responsiveWidth(2.5),
    textAlign: 'left',
    color: "#fff"
  },
  profileSection: {
    width: 90,
    alignItems: 'center',
    justifyContent: 'center',
  },
  profileContainer: {
    alignItems: 'center'
  },
  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',
    bottom: 0,
    right: 0,
    width: 26,
    height: 26,
    backgroundColor: '#fff',
    borderRadius: 13,
    justifyContent: 'center',
    alignItems: 'center',
  },
  dueBar: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    padding: 16,
    borderTopWidth: 1,
    borderColor: "rgba(255,255,255,0.15)",
    backgroundColor: "rgba(0,0,0,0.15)",
  },
  dueBarText: {
    color: "#fff",
    fontSize: responsiveWidth(2.5),
    fontWeight: "600"
  },
  payAllButton: {
    backgroundColor: "#ffffffff",
    flexDirection: "row",
    alignItems: "center",
    paddingHorizontal: 16,
    paddingVertical: 10,
    borderRadius: 20,
    gap: 6,
  },
  payAllButtonText: {
    color: "#000000ff",
    fontWeight: "bold",
    fontSize: responsiveWidth(2.5)
  },
  payModalOverlay: {
    flex: 1,
    backgroundColor: "rgba(0,0,0,0.3)",
    justifyContent: "center",
    alignItems: "center",
  },
  payModalBox: {
    width: "92%",
    borderRadius: 24,
    overflow: "hidden",
    alignItems: "center",
    shadowColor: "#000",
    shadowOpacity: 0.15,
    shadowRadius: 24,
    elevation: 12,
  },
  payDialogHeader: {
    flexDirection: "row",
    alignItems: "center",
    width: "100%",
    justifyContent: "space-between",
    paddingVertical: 14,
    paddingHorizontal: 18,
    borderBottomWidth: 1,
    borderColor: "rgba(255,255,255,0.1)",
  },
  payDialogTitle: {
    color: "#000000ff",
    fontSize: responsiveWidth(1.8),
    fontWeight: "700"
  },
  payGroupOption: {
    flexDirection: "row",
    alignItems: "center",
    gap: 16,
    paddingVertical: 12,
    paddingHorizontal: 14,
    borderColor: colors.primary,
    borderWidth: 1,
    borderRadius: 12,
    marginBottom: 8,
  },
  payOptionSelected: {
    backgroundColor: "rgba(166, 49, 255, 0.2)",
    borderColor: colors.primary,
    borderWidth: 1,
  },
  payGroupName: {
    color: "#000000ff",
    fontWeight: "700",
    fontSize: responsiveWidth(2.5)
  },
  payDueText: {
    color: "rgba(0, 0, 0, 0.8)",
    fontSize: responsiveWidth(1.3),
    marginTop: 2
  },
  payAmount: {
    fontWeight: "bold",
    fontSize: responsiveWidth(2.5),
    color: "#4CAF50"
  },
  payDialogFooter: {
    flexDirection: "row",
    alignItems: "center",
    width: "100%",
    justifyContent: "space-between",
    paddingVertical: 16,
    paddingHorizontal: 18,
  },
  payDialogTotal: {
    color: "#000000ff",
    fontWeight: "600",
    fontSize: responsiveWidth(1.7)
  },
  payConfirmButton: {
    flexDirection: "row",
    alignItems: "center",
    backgroundColor: colors.primary,
    paddingVertical: 12,
    paddingHorizontal: 24,
    borderRadius: 20,
    elevation: 4,
    borderColor: colors.primary,
    borderWidth: 1,
    gap: 8,
  },
  payButtonText: {
    color: "#ffffffff",
    fontWeight: "bold",
    fontSize: responsiveWidth(2.5)
  },
  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,
  },
  modalTitle: {
    fontSize: responsiveWidth(2.2),
    fontWeight: "700",
    color: colors.primary,
    marginBottom: 8,
    textAlign: 'center',
  },
  modalText: {
    textAlign: "center",
    color: "#666",
    fontSize: responsiveWidth(1.4),
    lineHeight: 20,
    marginBottom: 20,
  },
  modalButtons: {
    width: '100%',
    gap: 10,
  },
  button: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    paddingVertical: 14,
    borderRadius: 12,
    gap: 8,
  },
  primaryButton: {
    backgroundColor: colors.primary,
  },
  secondaryButton: {
    backgroundColor: "#f5f5f5",
    borderWidth: 1,
    borderColor: '#e0e0e0',
  },
  buttonText: {
    color: "#fff",
    fontWeight: "600",
    fontSize:responsiveWidth(2.5),
  },
  secondaryText: {
    color: "#666",
  },
});