import React, { useState } from "react";
import {
  ImageSourcePropType,
  StyleProp,
  ViewStyle,
  View,
  Text,
  TextStyle,
  TouchableOpacity,
  DimensionValue,
  StyleSheet, // Import StyleSheet
} from "react-native";
import Card from "../Card";
import CardHeader from "../CardHeader";
import CardContent from "../CardContent";
import { useTheme } from "../../../theme/ThemeContext";
import CardFooter from "../CardFooter";
import ProgressBar, {
  ProgressBarTextAlign,
  ProgressBarTextPosition,
} from "../../ProgressBar/ProgressBar";
import LockOverlay from "../../LockOverlay/LockOverlay";

interface DealCardProps {
  backgroundImage: ImageSourcePropType;
  label?: string;
  labelStyle?: StyleProp<TextStyle>;
  labelContainerStyle?: StyleProp<ViewStyle>;
  actionIconDefault?: React.ReactNode;
  actionIconActive?: React.ReactNode;
  onActionPress?: (active: boolean) => void;
  innerCardStyle?: StyleProp<ViewStyle>; // Changed ViewStyle to StyleProp<ViewStyle> for flexibility
  innerCardVariant?: "floating" | "nested";
  dealDescription?: string;
  dealDescriptionStyle?: StyleProp<TextStyle>;
  dealProviderName?: string;
  dealProviderNameStyle?: StyleProp<TextStyle>;
  dealPrice?: string;
  dealPriceStyle?: StyleProp<TextStyle>;
  progressBar?: boolean;
  progressBarText?: string;
  progressBarTextPosition?: ProgressBarTextPosition;
  progressBarTextAlign?: ProgressBarTextAlign;
  progressColor?: string;
  progressWidth?: number;
  progressHeight?: number;
  remainingProgressColor?: string;
  progressValue?: number;
  onPress?: () => void;
  onOverlayPress?: () => void;
  style?: StyleProp<ViewStyle>;
  width?: DimensionValue;
  isRTL?: boolean;
  overlayVisible?: boolean;
  overlayCover?: "all" | "background";
  borderRadius?: number;
}

const DealCardWithBackgroundImage: React.FC<DealCardProps> = ({
  backgroundImage,
  onPress,
  label,
  labelContainerStyle,
  labelStyle,
  actionIconDefault,
  actionIconActive,
  onActionPress,
  innerCardStyle, // Use the prop directly
  dealDescription,
  dealDescriptionStyle,
  dealPrice,
  dealPriceStyle,
  dealProviderName,
  dealProviderNameStyle,
  progressBar,
  progressBarText,
  progressBarTextPosition,
  progressBarTextAlign,
  progressValue,
  progressHeight,
  progressWidth,
  remainingProgressColor,
  progressColor,
  innerCardVariant = "nested",
  style,
  width = "100%",
  isRTL: initialIsRTL = false, // Renamed to avoid conflict
  overlayVisible = false,
  overlayCover = "background",
  borderRadius = 8,
  onOverlayPress,
}) => {
  const { theme, isRTL: themeIsRTL } = useTheme(); // Use theme's RTL
  const isRTL = themeIsRTL; // Prioritize theme's RTL setting

  const [isActive, setIsActive] = useState(false);

  const handleActionPress = () => {
    if (!actionIconActive) return;
    setIsActive(!isActive);
    if (onActionPress) {
      onActionPress(!isActive);
    }
  };

  const labelContent = label && (
    <View
      style={[
        {
          backgroundColor: theme.surface,
          paddingVertical: 5,
          paddingHorizontal: 8,
          borderRadius: 10,
        },
        labelContainerStyle,
      ]}
    >
      <Text style={[{ color: theme.onSurface }, labelStyle]}>{label}</Text>
    </View>
  );

  const actionContent = (
    <TouchableOpacity
      onPress={handleActionPress}
      hitSlop={{ top: 30, left: 30, bottom: 30, right: 30 }}
    >
      {isActive ? actionIconActive : actionIconDefault}
    </TouchableOpacity>
  );

  const headerLeft = isRTL ? actionContent : labelContent;
  const headerRight = isRTL ? labelContent : actionContent;

  const mainCardBorderRadius = borderRadius;
  const defaultInnerCardBorderRadius = 30; // Renamed for clarity
  const defaultFloatingBottomOffset = -30; // Define default floating offset

  // Flatten the innerCardStyle to easily access properties
  const flatInnerCardStyle = StyleSheet.flatten(innerCardStyle);

  // Determine the actual bottom offset for the floating inner card
  let actualFloatingBottomOffset = defaultFloatingBottomOffset;
  if (
    innerCardVariant === "floating" &&
    flatInnerCardStyle &&
    typeof flatInnerCardStyle.bottom === "number"
  ) {
    actualFloatingBottomOffset = flatInnerCardStyle.bottom;
  }

  const getVariantStyle = (): StyleProp<ViewStyle> => {
    if (innerCardVariant === "floating") {
      return {
        position: "absolute",
        bottom: actualFloatingBottomOffset,
        width: "100%",
        marginHorizontal: 0,
        marginVertical: 0,
        paddingBottom: progressBar || dealPrice ? 0 : 20,
        borderRadius: 20,
      };
    }
    return {};
  };

  const computedInnerCardStyle = [
    {
      borderRadius: defaultInnerCardBorderRadius,
      marginVertical: 8,
      marginHorizontal: 16,
    },
    getVariantStyle(),
    flatInnerCardStyle,
  ];

  const finalInnerBorderRadius =
    (flatInnerCardStyle?.borderRadius as number) ?? 
    (innerCardVariant === "floating" ? 20 : defaultInnerCardBorderRadius); 

  const overlayStyle: ViewStyle = {
    position: "absolute",
    top: 0,
    left: 0,
    right: 0,
    zIndex: 100,
    bottom:
      innerCardVariant === "floating" ? actualFloatingBottomOffset : 0,
    borderTopLeftRadius: mainCardBorderRadius,
    borderTopRightRadius: mainCardBorderRadius,
    borderBottomLeftRadius:
      innerCardVariant === "floating"
        ? finalInnerBorderRadius 
        : mainCardBorderRadius, 
    borderBottomRightRadius:
      innerCardVariant === "floating"
        ? finalInnerBorderRadius 
        : mainCardBorderRadius, 
    overflow: "hidden", 
  };

  return (
    <Card
      onPress={() => {
        if(overlayVisible) {
          onOverlayPress?.();
          return;
        }
        onPress?.();
      }}
      style={[
        {
          height: 300,
          position: "relative",
          borderRadius: mainCardBorderRadius,
          overflow: "hidden",
        },
        style,
        { width },
      ]}
      backgroundImage={{
        source: backgroundImage,
        resizeMode: "cover",
      }}
    >
      <LockOverlay
        visible={overlayVisible}
        containerStyle={overlayStyle}
        contentPosition={overlayCover == "background" ? "center" : "top-center"}
        onPress={onOverlayPress}
      />
      <CardHeader
        left={headerLeft}
        right={headerRight}
        style={{ alignItems: "center", zIndex: 1 }}
      />

      <View
        style={{
          flex: 1,
          justifyContent: "flex-end",
          zIndex: overlayCover == "background" ? 101 : 0,
        }}
      >
        <CardContent style={{ padding: 0 }}>
          <Card
            backgroundColor={theme.surface}
            variant="filled"
            style={computedInnerCardStyle} 
          >
            <CardHeader
              title={dealProviderName}
              titleColor={theme.text}
              titleStyle={[
                { fontSize: 18, textAlign: isRTL ? "right" : "left" },
                dealProviderNameStyle,
              ]}
              subtitle={dealDescription}
              subtitleColor={theme.helper}
              subtitleStyle={[
                { textAlign: isRTL ? "right" : "left" },
                dealDescriptionStyle,
              ]}
            />
            {(progressBar || dealPrice) && (
              <CardFooter
                justifyContent="space-between"
                style={{
                  flexDirection: isRTL ? "row-reverse" : "row",
                }}
              >
                {progressBar ? (
                  <ProgressBar
                    progress={progressValue}
                    remainingColor={remainingProgressColor}
                    progressColor={progressColor}
                    height={progressHeight || 14}
                    width={progressWidth}
                    textPosition={progressBarTextPosition}
                    text={progressBarText}
                    showText={progressBarText != null}
                    textAlign={
                      isRTL && progressBarTextAlign == null
                        ? "right"
                        : progressBarTextAlign
                    }
                    textStyle={{ fontSize: 10, color: theme.text }}
                    isRTL={isRTL}
                  />
                ) : (
                  <View /> 
                )}
                <View>
                  <Text
                    style={[
                      {
                        fontSize: 16,
                        color: theme.primary,
                        fontWeight: "bold",
                        textAlign: isRTL ? "left" : "right",
                      },
                      dealPriceStyle,
                    ]}
                  >
                    {dealPrice}
                  </Text>
                </View>
              </CardFooter>
            )}
          </Card>
        </CardContent>
      </View>
    </Card>
  );
};

export default DealCardWithBackgroundImage;