import React, { useCallback, useMemo, useRef } from "react";
import {
  View,
  Text,
  StyleSheet,
  TouchableOpacity,
  Pressable,
  ImageSourcePropType,
  StyleProp,
  ViewStyle,
} from "react-native";
import { Image } from 'expo-image';
import BottomSheet, {
  BottomSheetView,
  BottomSheetProps,
  BottomSheetBackdrop,
  BottomSheetBackdropProps,
} from "@gorhom/bottom-sheet";
import QRCode from "react-native-qrcode-svg";
import { LinearGradient } from "expo-linear-gradient";
import * as Clipboard from "expo-clipboard";
import { ThemeType, useTheme } from "../../theme"; 
import { Ionicons } from "@expo/vector-icons";

type Props = {
  visible: boolean;
  onClose: () => void;
  code: string;
  amount?: number;
  expiry?: string;
  image?: ImageSourcePropType; 

  title?: string;
  currency?: string;
  codeReadyText?: string;
  qrCodeLabel?: string;
  barCodeLabel?: string;
  myVouchersButtonText?: string;
  onMyVouchersButtonPress?: () => void;
  onCopyCode?: (copiedCode: string) => void;
  showAppleWalletButton?: boolean;
  appleWalletButtonText?: string;
  onAppleWalletButtonPress?: () => void;
  appleWalletIconSource?: ImageSourcePropType; 
  qrCodeSize?: number;
  activeTabColors?: string[];
  inactiveTabBackgroundColor?: string;
  inactiveTabBorderColor?: string;
  inactiveTabTextColor?: string;
  primaryButtonColors?: string[];
  allowBarcodeSwitch?: boolean;
  renderBarcodeComponent?: (code: string) => React.ReactNode;
  copyIconComponent?: React.ReactNode;
  amountIconComponent?: React.ReactNode;
  expiryIconComponent?: React.ReactNode;
  snapPoints?: string[];
  sheetBackgroundStyle?: StyleProp<ViewStyle>;
  sheetHandleStyle?: StyleProp<ViewStyle>;
  backdropPressBehavior?: "close" | "none" | number; 
  bottomSheetOverrideProps?: Partial<
    Omit<
      BottomSheetProps,
      | "children"
      | "snapPoints"
      | "index"
      | "onClose"
      | "enablePanDownToClose"
      | "backgroundStyle"
      | "handleIndicatorStyle"
      | "backdropComponent"
    >
  >;
  tabGradientStart?: { x: number; y: number };
  tabGradientEnd?: { x: number; y: number };
  primaryButtonGradientStart?: { x: number; y: number };
  primaryButtonGradientEnd?: { x: number; y: number };
};

const RedeemedVoucherSheet: React.FC<Props> = (props) => {
  const { theme } = useTheme(); 
  const styles = useMemo(() => getStyles(theme), [theme]);

  const defaultActiveTabColors = useMemo(
    () =>
      theme.primary
        ? [theme.primary, theme.primaryVariant || theme.primary]
        : ["#F97794", "#623AA2"],
    [theme],
  );

  const defaultPrimaryButtonColors = useMemo(
    () =>
      defaultActiveTabColors,
    [theme, defaultActiveTabColors],
  );

  const defaultInactiveTabBorderColor = useMemo(
    () =>  theme.primary || defaultActiveTabColors[1] || "#623AA2",
    [theme, defaultActiveTabColors],
  );

  const defaultInactiveTabTextColor = useMemo(
    () => theme.primary || defaultActiveTabColors[1] || "#623AA2",
    [theme, defaultActiveTabColors],
  );


  const {
    visible,
    onClose,
    code,
    amount,
    expiry,
    image, // Now directly from props
    title = "Successfully Redeemed!",
    currency = "SAR",
    codeReadyText = "Your Code Is Ready!",
    qrCodeLabel = "QR Code",
    barCodeLabel = "Bar Code",
    myVouchersButtonText = "My Vouchers",
    onMyVouchersButtonPress,
    onCopyCode,
    showAppleWalletButton = true,
    appleWalletButtonText = "Add to Apple Wallet",
    onAppleWalletButtonPress,
    appleWalletIconSource, // Now directly from props
    qrCodeSize = 120,
    activeTabColors = defaultActiveTabColors,
    inactiveTabBackgroundColor = theme.surface || "#FFFFFF",
    inactiveTabBorderColor: propInactiveTabBorderColor,
    inactiveTabTextColor: propInactiveTabTextColor,
    primaryButtonColors = defaultPrimaryButtonColors,
    allowBarcodeSwitch = true,
    renderBarcodeComponent,
    copyIconComponent,
    amountIconComponent,
    expiryIconComponent,
    snapPoints: propSnapPoints,
    sheetBackgroundStyle,
    sheetHandleStyle,
    backdropPressBehavior = "close",
    bottomSheetOverrideProps,
    tabGradientStart = { x: 0, y: 0.5 },
    tabGradientEnd = { x: 1, y: 0.5 },
    primaryButtonGradientStart = { x: 0, y: 0.5 },
    primaryButtonGradientEnd = { x: 1, y: 0.5 },
  } = props;


  const finalInactiveTabBorderColor = propInactiveTabBorderColor || defaultInactiveTabBorderColor;
  const finalInactiveTabTextColor = propInactiveTabTextColor || defaultInactiveTabTextColor;


  const bottomSheetRef = useRef<BottomSheet>(null);
  const finalSnapPoints = useMemo(
    () => propSnapPoints || ["75%"],
    [propSnapPoints],
  );

  const [tab, setTab] = React.useState<"qr" | "bar">("qr");

  const handleCopyCode = async () => {
    await Clipboard.setStringAsync(code);
    if (onCopyCode) {
      onCopyCode(code);
    }
  };
  const closeBottomSheet = useCallback(
    () => {
      bottomSheetRef.current?.close();
    },
    [
      /* onClose */
    ]
  );

  // Custom backdrop component
  const renderBackdrop = useCallback(
    (backdropProps: BottomSheetBackdropProps) => (
      <BottomSheetBackdrop
        {...backdropProps}
        disappearsOnIndex={-1}
        appearsOnIndex={0}
        pressBehavior={backdropPressBehavior}
        opacity={0.5} 
        style={[
          backdropProps.style,
          { backgroundColor: "rgba(0,0,0,0.5)" },
        ]}
      />
    ),
    [backdropPressBehavior, theme],
  );
  const iconSize = 24;
  const defaultAmountIcon = (
    <Ionicons style={styles.defaultIconStyle} name="cash-outline" size={iconSize} color={theme.onSurface} />
  );
  
  const defaultExpiryIcon = (
    <Ionicons style={styles.defaultIconStyle} name="time-outline" size={iconSize} color={theme.onSurface} />
  );
  
  const defaultCopyIcon = (
    <Ionicons
      name="copy-outline"
      size={iconSize}
      color={finalInactiveTabTextColor}
      style={styles.copyIconText}
    />
  );


  return (
    <BottomSheet
      ref={bottomSheetRef}
      index={visible ? 0 : -1}
      snapPoints={finalSnapPoints}
      enablePanDownToClose
      onClose={onClose}
      backgroundStyle={[styles.sheetBackgroundBase, sheetBackgroundStyle]}
      handleIndicatorStyle={[styles.handleBase, sheetHandleStyle]}
      backdropComponent={renderBackdrop}
      {...bottomSheetOverrideProps}
    >
      <BottomSheetView style={styles.container}>
        {image && (
          <Image source={image} style={styles.giftImage} />
        )}
        <Text style={styles.title}>{title}</Text>

        <View style={styles.infoRow}>
          {amount && (
            <View style={styles.infoItem}>
              {amountIconComponent || defaultAmountIcon}
              <Text style={styles.amountText}>
                {amount} {currency}
              </Text>
            </View>
          )}
          {expiry && (
            <View style={styles.infoItem}>
              {expiryIconComponent || defaultExpiryIcon}
              <Text style={styles.expiryText}>{expiry}</Text>
            </View>
          )}
        </View>

        <View style={styles.codeBox}>
          <Text style={styles.codeReadyText}>{codeReadyText}</Text>
          <View style={styles.qrContainer}>
            {tab === "qr" ? (
              <QRCode value={code} size={qrCodeSize} />
            ) : renderBarcodeComponent ? (
              renderBarcodeComponent(code)
            ) : (
              <View style={styles.barcodePlaceholder}>
                <Text style={styles.barcodePlaceholderText}>Bar Code</Text>
              </View>
            )}
          </View>

          {allowBarcodeSwitch && (
            <View style={styles.tabRow}>
              <TouchableOpacity
                style={[
                  styles.tabButton,
                  tab !== "qr" && {
                    borderColor: finalInactiveTabBorderColor,
                    borderWidth: 1.5,
                  },
                ]}
                onPress={() => setTab("qr")}
              >
                <LinearGradient
                  colors={
                    tab === "qr"
                      ? (activeTabColors as any)
                      : [inactiveTabBackgroundColor, inactiveTabBackgroundColor]
                  }
                  start={tabGradientStart}
                  end={tabGradientEnd}
                  style={styles.tabGradient}
                >
                  <Text
                    style={[
                      styles.tabTextBase,
                      tab === "qr"
                        ? styles.tabTextActive
                        : { color: finalInactiveTabTextColor },
                    ]}
                  >
                    {qrCodeLabel}
                  </Text>
                </LinearGradient>
              </TouchableOpacity>

              <TouchableOpacity
                style={[
                  styles.tabButton,
                  tab !== "bar" && {
                    borderColor: finalInactiveTabBorderColor,
                    borderWidth: 1.5,
                  },
                ]}
                onPress={() => setTab("bar")}
              >
                <LinearGradient
                  colors={
                    tab === "bar"
                      ? (activeTabColors as any)
                      : [inactiveTabBackgroundColor, inactiveTabBackgroundColor]
                  }
                  start={{ x: 0, y: 0.5 }}
                  end={{ x: 1, y: 0.5 }}
                  style={styles.tabGradient}
                >
                  <Text
                    style={[
                      styles.tabTextBase,
                      tab === "bar"
                        ? styles.tabTextActive
                        : { color: finalInactiveTabTextColor },
                    ]}
                  >
                    {barCodeLabel}
                  </Text>
                </LinearGradient>
              </TouchableOpacity>
            </View>
          )}
          <View style={{width: "100%", height: 2, backgroundColor : theme.divider}}></View>

          <View style={styles.codeDisplayRow}>
            <Text style={styles.actualCodeText}>{code}</Text>
              <TouchableOpacity
                onPress={handleCopyCode}
                style={styles.copyButton}
              >
                {copyIconComponent || defaultCopyIcon}
              </TouchableOpacity>
          </View>

          {showAppleWalletButton && appleWalletIconSource && (
            <Pressable
              style={styles.walletButton}
              onPress={onAppleWalletButtonPress}
            >
              <Image source={appleWalletIconSource} style={styles.walletIcon} />
              <Text style={styles.walletText}>{appleWalletButtonText}</Text>
            </Pressable>
          )}
        </View>

        {onMyVouchersButtonPress && (
          <TouchableOpacity
            style={styles.vouchersButton}
            onPress={() => {
              closeBottomSheet();
              onMyVouchersButtonPress()
            }}
          >
            <LinearGradient
              colors={primaryButtonColors as any}
              start={primaryButtonGradientStart}
              end={primaryButtonGradientEnd}
              style={styles.vouchersGradient}
            >
              <Text style={styles.vouchersText}>{myVouchersButtonText}</Text>
            </LinearGradient>
          </TouchableOpacity>
        )}
      </BottomSheetView>
    </BottomSheet>
  );
};

const getStyles = (theme: ThemeType) =>
  StyleSheet.create({
    sheetBackgroundBase: {
      backgroundColor: theme.surface || "#fff",
      borderTopLeftRadius: 24,
      borderTopRightRadius: 24,
    },
    handleBase: {
      backgroundColor: theme.border || "#e0e0e0",
      width: 40,
      height: 5,
      borderRadius: 2.5,
      alignSelf: "center",
      marginTop: 8,
    },
    container: {
      flex: 1,
      alignItems: "center",
      paddingHorizontal: 20,
      paddingTop: 8,
      paddingBottom: 20,
    },
    giftImage: {
      width: 108,
      height: 84,
      marginBottom: 10,
      resizeMode: "contain",
    },
    title: {
      fontSize: 20,
      fontWeight: "600",
      marginBottom: 16,
      color: theme.onSurface || "#333333",
    },
    infoRow: {
      flexDirection: "row",
      justifyContent: "space-around",
      width: "100%",
      marginBottom: 20,
    },
    infoItem: {
      flexDirection: "row",
      alignItems: "center",
    },
    defaultIconStyle: {
      marginRight: 8,
    },
    amountText: {
      fontSize: 16,
      color: theme.onSurface || "#333333",
      fontWeight: "500",
    },
    expiryText: {
      fontSize: 16,
      color: theme.onSurface || "#333333",
      fontWeight: "500",
    },
    codeBox: {
      backgroundColor: theme.surface || "#f8f8f8",
      borderRadius: 18,
      padding: 20,
      width: "100%",
      alignItems: "center",
      marginBottom: 20,
      shadowColor: "#000",
      shadowOpacity: 0.08,
      shadowRadius: 12,
      shadowOffset: { width: 0, height: 4 },
      elevation: 3,
    },
    codeReadyText: {
      fontSize: 15,
      color: theme.onSurface || "#666666",
      marginBottom: 12,
    },
    qrContainer: {
      marginBottom: 18,
      alignItems: "center",
      justifyContent: "center",
      height: 130,
    },
    barcodePlaceholder: {
      width: 150,
      height: 70,
      backgroundColor: theme.disabled || "#eeeeee",
      alignItems: "center",
      justifyContent: "center",
      borderRadius: 8,
    },
    barcodePlaceholderText: {
      color: theme.disabled || "#aaaaaa",
      fontSize: 14,
    },
    tabRow: {
      flexDirection: "row",
      marginBottom: 16,
      width: "100%",
      justifyContent: "center",
    },
    tabButton: {
      flex: 1,
      marginHorizontal: 5,
      borderRadius: 10,
      overflow: "hidden",
    },
    tabGradient: {
      paddingVertical: 10,
      alignItems: "center",
      borderRadius: 10,
    },
    tabTextBase: {
      fontSize: 15,
      fontWeight: "600",
    },
    tabTextActive: {
      color: theme.onPrimary || "#fff", // Color for text on active tab gradient
      fontWeight: "700",
    },
    codeDisplayRow: {
      flexDirection: "row",
      alignItems: "center",
      justifyContent: "center",
      marginVertical: 12,
      paddingHorizontal: 10,
      paddingVertical: 6,
      // backgroundColor: theme.background || "#f0f0f0", // Subtle background
      borderRadius: 8,
    },
    actualCodeText: {
      fontSize: 16,
      letterSpacing: 1.5,
      color: theme.onBackground || "#444444",
      fontWeight: "500",
      marginRight: 10,
    },
    copyButton: {
      padding: 6,
    },
    copyIconText: { // Base style for copy icon, color applied dynamically
      fontSize: 20,
    },
    walletButton: {
      flexDirection: "row",
      alignItems: "center",
      backgroundColor: "#000", // Apple Wallet button is typically black
      borderRadius: 10,
      paddingVertical: 10,
      paddingHorizontal: 20,
      marginTop: 10,
    },
    walletIcon: {
      width: 30,
      height: 20,
      marginRight: 10,
      resizeMode: "contain",
    },
    walletText: {
      color: "#fff", // Text on black button
      fontWeight: "600",
      fontSize: 15,
    },
    vouchersButton: {
      width: "100%",
      // marginTop: "auto",
      marginTop: 20,
      borderRadius: 12,
      overflow: "hidden",
    },
    vouchersGradient: {
      paddingVertical: 16,
      alignItems: "center",
      borderRadius: 12,
    },
    vouchersText: {
      color: theme.onPrimary || "#fff", // Text on primary button gradient
      fontWeight: "700",
      fontSize: 17,
    },
  });

export default RedeemedVoucherSheet;