import React, { useMemo } from "react";
import {
  View,
  Text,
  StyleSheet,
  ViewStyle,
  TextStyle,
  ImageBackground,
  ImageSourcePropType,
  ImageStyle,
  FlatList,
} from "react-native";
import RewardItem from "../UnlockRewards/RewardItem";
import Badge from "../Badges/Badge";
import { useTheme, ThemeType } from "../../theme";
import { LinearGradient } from "expo-linear-gradient";
import CloseIcon from "../CloseIcon/CloseIcon"; // Import the new component

type Reward = {
  icon?: React.ReactNode;
  activeIcon?: React.ReactNode;
  title: string;
  description: string;
  isActive: boolean;
  status: string;
  statusBackgroundColor: string;
  statusTextColor: string;
};

interface UnlockRewardsProps {
  title?: string;
  description?: string;
  rewards: Reward[];
  activeIconStyle?: ViewStyle;
  inactiveIconStyle?: ViewStyle;
  onClose?: () => void; // Kept for passing to CloseIcon
  isRTL?: boolean;
  customTopBackground?: React.ReactNode;
  topBackgroundImage?: ImageSourcePropType;
  topBackgroundColor?: string;
  topBackgroundHeight?: number;
  topBackgroundImageStyle?: ImageStyle;
  topBackgroundStyle?: ViewStyle;
  topGradientColors?: string[];
  topGradientStart?: { x: number; y: number };
  topGradientEnd?: { x: number; y: number };
  topGradientLocations?: number[];
  modalOverlayStyle?: ViewStyle;
  cardContainerStyle?: ViewStyle;
  mainTitleStyle?: TextStyle;
  subtitleStyle?: TextStyle;
  rewardsContainerStyle?: ViewStyle;
  smallIconsRowStyle?: ViewStyle;
  rewardItemContainerStyle?: ViewStyle;
  rewardItemIconWrapperStyle?: ViewStyle;
  rewardItemTextContainerStyle?: ViewStyle;
  rewardItemTitleTextStyle?: TextStyle;
  rewardItemDescriptionTextStyle?: TextStyle;
  rewardItemStatusBadgeStyle?: ViewStyle;
  rewardItemStatusTextStyle?: TextStyle;
  showCloseIcon?: boolean;
  customCloseIcon?: React.ReactNode;
  closeIconVariant?: "floating" | "nested";
  closeIconContainerStyle?: ViewStyle;
  closeIconStyle?: TextStyle;
  closeIconColor?: string;
  closeIconSize?: number;
}

const UnlockRewards: React.FC<UnlockRewardsProps> = ({
  rewards,
  title,
  description,
  activeIconStyle,
  inactiveIconStyle,
  onClose, // Keep onClose
  isRTL,
  topBackgroundImage,
  topBackgroundColor: topBackgroundColorProp,
  topBackgroundHeight = 250,
  topBackgroundImageStyle,
  topBackgroundStyle,
  topGradientColors,
  topGradientStart,
  topGradientEnd,
  topGradientLocations,
  cardContainerStyle,
  mainTitleStyle,
  subtitleStyle,
  rewardsContainerStyle,
  smallIconsRowStyle,
  rewardItemContainerStyle,
  rewardItemIconWrapperStyle,
  rewardItemTextContainerStyle,
  rewardItemTitleTextStyle,
  rewardItemDescriptionTextStyle,
  rewardItemStatusBadgeStyle,
  rewardItemStatusTextStyle,
  showCloseIcon = true,
  customCloseIcon,
  closeIconVariant = "nested",
  closeIconContainerStyle,
  closeIconStyle,
  closeIconColor,
  closeIconSize = 28,
  customTopBackground,
}) => {
  const { theme, isRTL: rtl } = useTheme();
  isRTL = isRTL || rtl;
  const styles = useMemo(()=> themedStyles(theme), [ theme]); 

  const topBackgroundColor = topBackgroundColorProp ?? theme.surface;

  const finalCardStyle = StyleSheet.flatten([
    styles.cardContainer,
    cardContainerStyle,
  ]);
  const cardBorderRadius = finalCardStyle.borderRadius ?? 20;

  const topBackgroundBorderRadius = {
    borderTopLeftRadius: cardBorderRadius,
    borderTopRightRadius: cardBorderRadius,
  };

  const topElementBaseStyle = [
    styles.topBackgroundBase,
    topBackgroundBorderRadius,
    topBackgroundStyle,
    { height: topBackgroundHeight },
  ];

  return (
    <View style={[styles.cardContainer, cardContainerStyle]}>
      {/* --- CloseIcon component --- */}
      <CloseIcon
        show={showCloseIcon}
        onPress={onClose}
        customIcon={customCloseIcon}
        variant={closeIconVariant}
        containerStyle={closeIconContainerStyle}
        iconStyle={closeIconStyle}
        color={closeIconColor} // Pass the prop down
        size={closeIconSize}
        isRTL={isRTL}
      />
      {/* --- End CloseIcon usage --- */}

      {/* --- Top Background Rendering --- */}
      {!customTopBackground ? (
        topGradientColors && topGradientColors.length >= 2 ? (
          <LinearGradient
            colors={topGradientColors as any}
            start={topGradientStart}
            end={topGradientEnd}
            locations={topGradientLocations as any}
            style={topElementBaseStyle}
          />
        ) : topBackgroundImage ? (
          <ImageBackground
            source={topBackgroundImage}
            style={topElementBaseStyle}
            imageStyle={[
              styles.topBackgroundImageStyle,
              topBackgroundBorderRadius,
              topBackgroundImageStyle,
            ]}
            resizeMode="cover"
          />
        ) : (
          <View
            style={[
              ...topElementBaseStyle,
              { backgroundColor: topBackgroundColor },
            ]}
          />
        )
      ) : (
        <View style={topElementBaseStyle}>{customTopBackground}</View>
      )}
      {/* --- End Top Background Rendering --- */}

      {title && <Text style={[styles.mainTitle, mainTitleStyle]}>{title}</Text>}
      {description && (
        <Text style={[styles.subtitle, subtitleStyle]}>{description}</Text>
      )}

      <View style={[styles.rewardsContainer, rewardsContainerStyle]}>
        <View
          style={[
            styles.smallIconsRow,
            smallIconsRowStyle,
            isRTL && { flexDirection: "row-reverse" },
          ]}
        >
          {rewards.map((reward, index) => (
            <Badge
              key={`badge-${index}`}
              isActive={reward.isActive}
              icon={reward.icon}
              activeIcon={reward.activeIcon}
              inactiveStyle={inactiveIconStyle}
              activeStyle={activeIconStyle}
            />
          ))}
        </View>
        <View style={{maxHeight: 300}}>
        <FlatList
          data={rewards}
          keyExtractor={(_, idx) => `reward-${idx}`}
          showsVerticalScrollIndicator={false}
          renderItem={({ item, index }) => (
            <RewardItem
              key={`reward-${index}`}
              icon={item.icon}
              activeIcon={item.activeIcon}
              isActive={item.isActive}
              title={item.title}
              description={item.description}
              status={item.status}
              statusBgColor={item.statusBackgroundColor}
              statusTextColor={item.statusTextColor}
              activeIconStyle={activeIconStyle}
              inactiveIconStyle={inactiveIconStyle}
              containerStyle={rewardItemContainerStyle}
              badgeStyle={rewardItemIconWrapperStyle}
              textContainerStyle={rewardItemTextContainerStyle}
              titleTextStyle={rewardItemTitleTextStyle}
              descriptionTextStyle={rewardItemDescriptionTextStyle}
              statusBadgeStyle={rewardItemStatusBadgeStyle}
              statusTextStyle={rewardItemStatusTextStyle}
              isRTL={isRTL}
            />
          )}
        />
        </View>
      </View>
    </View>
  );
};

const themedStyles = (theme: ThemeType) =>
  StyleSheet.create({
    cardContainer: {
      backgroundColor: theme.surface,
      borderRadius: 20,
      padding: 20,
      paddingTop: 40,
      width: "100%",
      maxWidth: 400,
      alignItems: "center",
      shadowColor: "#000",
      shadowOffset: { width: 0, height: 2 },
      shadowOpacity: 0.15,
      shadowRadius: 5,
      elevation: 5,
      position: "relative",
      borderWidth: 1,
      borderColor: theme.border,
    },
    topBackgroundBase: {
      position: "absolute",
      top: 0,
      left: 0,
      right: 0,
      zIndex: 0,
    },
    topBackgroundImageStyle: {},
    closeIconContainer: {
      position: "absolute",
      zIndex: 10,
    },
    mainTitle: {
      fontSize: 26,
      fontWeight: "bold",
      color: theme.text,
      marginBottom: 8,
      textAlign: "center",
      zIndex: 1,
    },
    subtitle: {
      fontSize: 14,
      color: theme.helper,
      textAlign: "center",
      marginBottom: 25,
      paddingHorizontal: 10,
      zIndex: 1,
    },
    rewardsContainer: {
      backgroundColor: theme.background,
      padding: 20,
      borderRadius: 20,
      width: "100%",
      zIndex: 1,
      borderWidth: 1,
      borderColor: theme.border,
    },
    smallIconsRow: {
      flexDirection: "row",
      justifyContent: "space-around",
      alignItems: "center",
      marginBottom: 30,
      paddingVertical: 15,
      backgroundColor: theme.surface,
      borderRadius: 15,
    },
  });

export default UnlockRewards;