import { Ionicons } from "@expo/vector-icons";
import BottomSheet, {
  BottomSheetBackdrop, // Import BottomSheetBackdrop
  BottomSheetBackdropProps,
  BottomSheetView,
} from "@gorhom/bottom-sheet";
import Checkbox from "expo-checkbox";
import React, { useCallback, useRef, useState } from "react";
import {
  I18nManager,
  ImageSourcePropType,
  StyleSheet,
  Text,
  TextStyle,
  TouchableOpacity,
  View,
  ViewStyle,
} from "react-native";
import { ThemeType, useTheme } from "../../theme"; // Import ThemeType
import { BrandIcon } from "../BrandIcon";
import { AppButtonProps, Button } from "../Button";
import PointsRangeSelector from "./PointsRangeSelector";

// ... (Keep existing type definitions: SortOption, Brand, FilterResult) ...
type SortOption = {
  name: string;
  value: string;
  id: number;
  checked?: boolean;
};
export type Brand = {
  id: string;
  name: string;
  logo: ImageSourcePropType;
  checked?: boolean;
};
export type FilterResult = {
  sort: SortOption | undefined;
  pointsRange: { min: number; max: number };
  selectedBrands: Brand[];
};

interface FiltersProps {
  isRTL?: boolean;
  sortOptions?: SortOption[];
  sortSectionTitle?: string;
  sectionTitleStyle?: TextStyle;
  sortSectionStyle?: ViewStyle;
  rangeMinLimit?: number;
  rangeMaxLimit?: number;
  rangeInitialMin?: number;
  rangeInitialMax?: number;
  showPointsRange?: boolean;
  pointsRangeSectionTitle?: string;
  pointsRangeContainerStyle?: ViewStyle;
  pointsRangeInputsContainerStyle?: ViewStyle;
  pointsRangeCustomInputContainerStyle?: ViewStyle;
  pointsRangeCustomInputFieldStyle?: ViewStyle;
  pointsRangeSliderContainerStyle?: ViewStyle;
  pointsRangeMultiSliderContainerStyle?: ViewStyle;
  pointsRangeTrackStyle?: ViewStyle;
  pointsRangeSelectedTrackStyle?: ViewStyle;
  pointsRangeUnselectedTrackStyle?: ViewStyle;
  pointsRangeMarkerStyle?: ViewStyle;
  pointsRangeMarkerEnabledStyle?: ViewStyle;
  pointsRangeMarkerDisabledStyle?: ViewStyle;
  pointsRangeMarkerDotStyle?: ViewStyle;
  pointsRangeInputProps?: any;
  pointsRangeMultiSliderProps?: any;
  brands?: Brand[];
  brandContainerStyle?: ViewStyle;
  brandActiveIcon?: React.ReactNode;
  brandActiveIconStyle?: ViewStyle;
  brandSectionTile?: string;
  onActionButtonPress?: (result: FilterResult) => void;
  containerStyle?: ViewStyle;
  headerStyle?: ViewStyle;
  titleStyle?: TextStyle;
  resetTextStyle?: TextStyle;
  sectionStyle?: ViewStyle;
  optionRowStyle?: ViewStyle;
  optionTextStyle?: TextStyle;
  checkboxColor?: string;
  applyButtonStyle?: ViewStyle;
  applyButtonTextStyle?: TextStyle;
  bottomSheetStyle?: ViewStyle;
  bottomSheetBackgroundStyle?: ViewStyle;
  headerTitleText?: string;
  headerResetText?: string;
  bottomSheetIndex?: number;
  handleIndicatorStyle?: ViewStyle;
  applyButtonText?: string;
  overlayColor?: string;
  onClose?: () => void;
  visible?: boolean;
  applyButtonComponentProps?: Partial<
    Omit<AppButtonProps, "title" | "onPress">
  >;
}

const Filters: React.FC<FiltersProps> = ({
  isRTL: isRTLProp,
  sortOptions = [],
  sortSectionTitle = "Sort",
  sectionTitleStyle,
  sortSectionStyle,
  onActionButtonPress,
  rangeInitialMax = 1000,
  rangeInitialMin = 0,
  rangeMaxLimit = 1000,
  rangeMinLimit = 0,
  pointsRangeContainerStyle,
  pointsRangeInputsContainerStyle,
  pointsRangeCustomInputContainerStyle,
  pointsRangeCustomInputFieldStyle,
  pointsRangeSliderContainerStyle,
  pointsRangeMultiSliderContainerStyle,
  pointsRangeTrackStyle,
  pointsRangeSelectedTrackStyle,
  pointsRangeUnselectedTrackStyle,
  pointsRangeMarkerStyle,
  pointsRangeMarkerEnabledStyle,
  pointsRangeMarkerDisabledStyle,
  pointsRangeMarkerDotStyle,
  pointsRangeInputProps,
  pointsRangeMultiSliderProps,
  containerStyle,
  headerStyle,
  titleStyle,
  resetTextStyle,
  sectionStyle,
  optionRowStyle,
  optionTextStyle,
  checkboxColor: checkboxColorProp,
  applyButtonStyle,
  applyButtonTextStyle,
  bottomSheetStyle,
  bottomSheetIndex = 0,
  handleIndicatorStyle,
  brands = [],
  brandContainerStyle,
  brandActiveIcon,
  showPointsRange = true,
  pointsRangeSectionTitle = "Points range",
  brandActiveIconStyle,
  brandSectionTile = "Brands",
  applyButtonText = "Apply Filter",
  headerResetText = "Reset All",
  headerTitleText = "Filter",
  onClose,
  visible = true,
  applyButtonComponentProps,
  bottomSheetBackgroundStyle
}) => {
  const { theme, isRTL: themeIsRTL } = useTheme();
  const isRTL = isRTLProp ?? themeIsRTL ?? I18nManager.isRTL;
  const bottomSheetRef = useRef<BottomSheet>(null);
  const styles = createStyles(theme, isRTL);
  const checkboxColor = checkboxColorProp ?? theme.primary;

  const handleSheetChanges = useCallback(
    (index: number) => {
      if (index === -1) {
        if (onClose) {
          onClose();
        }
      }
    },
    [onClose]
  );

  const [resetCounter, setResetCounter] = useState(0);

  const [checkedItem, setCheckedItem] = useState<number | null>(
    sortOptions.find((option) => option.checked)?.id || null
  );

  const [selectedBrands, setSelectedBrands] = useState<Record<string, boolean>>(
    brands.reduce((acc, option) => {
      acc[option.id] = option.checked || false;
      return acc;
    }, {} as Record<string, boolean>)
  );
  const [pointsRange, setPointsRange] = useState<{ min: number; max: number }>({
    min: rangeInitialMin,
    max: rangeInitialMax,
  });

  const handleCheckboxChange = (id: number) => {
    setCheckedItem(id);
  };

  const handleBrandSelect = (id: string) => {
    setSelectedBrands((prevState) => ({
      ...prevState,
      [id]: !prevState[id],
    }));
  };

  const closeBottomSheet = useCallback(
    () => {
      bottomSheetRef.current?.close();
    },
    [
      /* onClose */
    ]
  );

  const handleApplyFilter = () => {
    if (onActionButtonPress) {
      const selectedSortOption = sortOptions.find(
        (option) => option.id == checkedItem
      );

      const selectedBrandsList = brands.filter(
        (brand) => selectedBrands[brand.id]
      );

      const filterResult: FilterResult = {
        sort: selectedSortOption,
        pointsRange: pointsRange,
        selectedBrands: selectedBrandsList,
      };

      onActionButtonPress(filterResult);
    }
    closeBottomSheet();
  };

  const handleResetAll = () => {
    const resetBrands = brands.reduce((acc, option) => {
      acc[option.id] = false;
      return acc;
    }, {} as Record<string, boolean>);

    setCheckedItem(null);
    setSelectedBrands(resetBrands);
    setPointsRange({ min: rangeMinLimit, max: rangeInitialMax });
    setResetCounter((prev) => prev + 1);
  };

  const renderBackdrop = useCallback(
    (props: BottomSheetBackdropProps) => (
      <BottomSheetBackdrop
        {...props}
        appearsOnIndex={0}
        disappearsOnIndex={-1}
        pressBehavior="close"
        opacity={0.5}
      />
    ),
    []
  );

  return (
    <BottomSheet
      ref={bottomSheetRef}
      index={visible ? bottomSheetIndex : -1}
      onChange={handleSheetChanges}
      handleComponent={() => null}
      style={bottomSheetStyle}
      backgroundStyle={[{ backgroundColor: theme.surface }, bottomSheetBackgroundStyle]}
      handleIndicatorStyle={[styles.handleIndicator, handleIndicatorStyle]}
      enablePanDownToClose={true}
      backdropComponent={renderBackdrop}
    >
      <BottomSheetView style={[styles.container, containerStyle]}>
        <View style={[styles.header, headerStyle]}>
          <Text style={[styles.title, titleStyle]}>{headerTitleText}</Text>
          <TouchableOpacity onPress={handleResetAll}>
            <Text style={[styles.resetText, resetTextStyle]}>
              {headerResetText}
            </Text>
          </TouchableOpacity>
        </View>
        <View>
          {sortOptions && sortOptions.length > 0 && (
            <View style={[styles.section, sectionStyle, sortSectionStyle]}>
              <Text style={[styles.sectionTitle, sectionTitleStyle]}>
                {sortSectionTitle}
              </Text>
              {sortOptions.map((option) => (
                <View
                  style={[styles.optionRow, optionRowStyle]}
                  key={option.id}
                >
                  <Checkbox
                    value={option.id == checkedItem}
                    color={checkboxColor}
                    hitSlop={{ top: 10, right: 10, bottom: 10, left: 10 }}
                    onValueChange={() => handleCheckboxChange(option.id)}
                  />
                  <Text style={[styles.optionText, optionTextStyle]}>
                    {option.name}
                  </Text>
                </View>
              ))}
            </View>
          )}

          {showPointsRange && (
            <View style={[styles.section, sectionStyle]}>
              <Text style={[styles.sectionTitle, sectionTitleStyle]}>
                {pointsRangeSectionTitle}
              </Text>
              <PointsRangeSelector
                resetKey={resetCounter}
                initialMax={rangeInitialMax}
                initialMin={rangeInitialMin}
                minLimit={rangeMinLimit}
                maxLimit={rangeMaxLimit}
                isRTL={isRTL}
                containerStyle={pointsRangeContainerStyle}
                inputsContainerStyle={pointsRangeInputsContainerStyle}
                customInputContainerStyle={pointsRangeCustomInputContainerStyle}
                customInputFieldStyle={pointsRangeCustomInputFieldStyle}
                sliderContainerStyle={pointsRangeSliderContainerStyle}
                multiSliderContainerStyle={pointsRangeMultiSliderContainerStyle}
                trackStyle={pointsRangeTrackStyle}
                selectedTrackStyle={pointsRangeSelectedTrackStyle}
                unselectedTrackStyle={pointsRangeUnselectedTrackStyle}
                markerStyle={pointsRangeMarkerStyle}
                markerEnabledStyle={pointsRangeMarkerEnabledStyle}
                markerDisabledStyle={pointsRangeMarkerDisabledStyle}
                markerDotStyle={pointsRangeMarkerDotStyle}
                inputProps={pointsRangeInputProps}
                multiSliderProps={pointsRangeMultiSliderProps}
                onChange={(min: number, max: number) => {
                  setPointsRange({ min, max });
                }}
              />
            </View>
          )}

          {brands && brands.length > 0 && (
            <View style={[styles.section, sectionStyle]}>
              <Text style={[styles.sectionTitle, sectionTitleStyle]}>
                {brandSectionTile}
              </Text>
              <View style={[styles.brandsGrid, brandContainerStyle]}>
                {brands.map((brand) => (
                  <BrandIcon
                    key={brand.id}
                    size={50}
                    selected={selectedBrands[brand.id]}
                    onPress={() => handleBrandSelect(brand.id.toString())}
                    brandLogo={brand.logo}
                    brandName={brand.name}
                    selectionIndicatorIcon={
                      brandActiveIcon || (
                        <Ionicons
                          name="checkmark-outline"
                          color={theme.onPrimary}
                        />
                      )
                    }
                    selectionIndicatorStyle={brandActiveIconStyle}
                  />
                ))}
              </View>
            </View>
          )}

          <Button
            style={[styles.applyButton, applyButtonStyle]}
            onPress={handleApplyFilter}
            title={applyButtonText}
            textStyle={[styles.applyButtonText, applyButtonTextStyle]}
            {...applyButtonComponentProps}
          />
        </View>
      </BottomSheetView>
    </BottomSheet>
  );
};

const createStyles = (theme: ThemeType, isRTL: boolean) =>
  StyleSheet.create({
    container: {
      flex: 1,
      paddingHorizontal: 25,
      backgroundColor: theme.surface,
      paddingBottom: 75
    },
    handleIndicator: {
      width: 40,
      height: 4,
      backgroundColor: theme.border,
      alignSelf: "center",
      marginTop: 8,
      borderRadius: 2,
    },
    header: {
      flexDirection: isRTL ? "row-reverse" : "row",
      justifyContent: "space-between",
      alignItems: "center",
      paddingVertical: 15,
      borderBottomWidth: 1,
      borderBottomColor: theme.border,
    },
    title: {
      fontSize: 18,
      fontWeight: "bold",
      color: theme.text,
      textAlign: isRTL ? "right" : "left",
    },
    resetText: {
      fontSize: 14,
      color: theme.primary,
      fontWeight: "500",
      textAlign: isRTL ? "left" : "right",
    },
    section: {
      marginTop: 20,
    },
    sectionTitle: {
      fontSize: 16,
      fontWeight: "500",
      color: theme.helper,
      marginBottom: 15,
      textAlign: isRTL ? "right" : "left",
    },
    optionRow: {
      flexDirection: isRTL ? "row-reverse" : "row",
      alignItems: "center",
      marginBottom: 15,
      gap: 5,
    },
    optionText: {
      fontSize: 15,
      color: theme.text,
      textAlign: isRTL ? "right" : "left",
      marginLeft: isRTL ? 0 : 8,
      marginRight: isRTL ? 8 : 0,
    },
    brandsGrid: {
      flexDirection: "row",
      flexWrap: "wrap",
      gap: 10,
      justifyContent: isRTL ? "flex-end" : "flex-start",
    },
    applyButton: {
      backgroundColor: theme.primary,
      borderRadius: 30,
      paddingVertical: 15,
      alignItems: "center",
      marginTop: 30,
      // Consider adding marginBottom if needed, especially inside BottomSheetView
      // marginBottom: 20,
    },
    applyButtonText: {
      color: theme.onPrimary,
      fontSize: 16,
      fontWeight: "bold",
    },
  });

export default Filters;