import React, {
  useCallback,
  useEffect,
  useMemo,
  useRef,
  useState,
  forwardRef,
  useImperativeHandle
} from 'react';
import {
  View,
  Text,
  TouchableOpacity,
  Image,
  Switch,
  Dimensions,
  Platform,
  Linking,
  ScrollView
} from 'react-native';
import ActionSheet, { ActionSheetRef } from 'react-native-actions-sheet';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { Colors } from 'src/theme';
import { ModalStyles } from '../../TravellersScreen/Components/styles';
import { Button, WarningModal, SelectSheet } from 'src/components';
import { ButtonVariants } from 'src/types/components';
import { styles } from './styles';
import { usePostGetMapYearsQuery } from '@api/user';
import { API_HOST } from 'src/constants';
import CheckSvg from 'assets/icons/mark.svg';
import { useGetListQuery } from '@api/series';
import { RadioButton } from 'react-native-paper';
import { storage, StoreType } from 'src/storage';
import moment from 'moment';
import {
  usePostGetListOfCountriesForLocationDataQuery,
  usePostGetSettingsQuery,
  usePostSetSettingsMutation,
  usePostUpdateLocationMutation
} from '@api/location';
import * as Location from 'expo-location';

import SharingIcon from 'assets/icons/location-sharing.svg';
import UsersIcon from 'assets/icons/bottom-navigation/travellers.svg';
import LocationIcon from 'assets/icons/location.svg';
import formatNumber from '../../TravelsScreen/utils/formatNumber';
import {
  startBackgroundLocationUpdates,
  stopBackgroundLocationUpdates
} from 'src/utils/backgroundLocation';
import MultiSelectorCountries from 'src/components/MultiSelectorCountries';
import ChevronIcon from 'assets/icons/travels-screens/down-arrow.svg';
import { getFontSize } from 'src/utils';
import InfoIcon from 'assets/icons/info-solid.svg';
import Tooltip from 'react-native-walkthrough-tooltip';
import FriendsIcon from 'assets/icons/friend.svg';
import CloseSvg from 'assets/icons/close.svg';

export interface FilterModalRef {
  openFilter: (type: string) => void;
  closeFilter: () => void;
}

const FilterModal = forwardRef<
  FilterModalRef,
  {
    tilesTypes: any[];
    tilesType: any;
    setTilesType: (item: any) => void;
    setType: (type: any) => void;
    userId: number;
    setRegionsFilter: (data: { visitedLabel: 'in' | 'by'; year: number }) => void;
    setSeriesFilter?: (filter: any) => void;
    setNomadsFilter?: (filter: any) => void;
    isPublicView: boolean;
    isLogged: boolean;
    showNomads?: boolean;
    setShowNomads?: (showNomads: boolean) => void;
    usersOnMapCount?: number | null;
    friendsOnTheMapCount?: number | null;
    isConnected?: boolean;
    isPremium?: boolean;
  }
>(
  (
    {
      tilesTypes,
      tilesType,
      setTilesType,
      setType,
      userId,
      setRegionsFilter,
      setSeriesFilter,
      setNomadsFilter,
      isPublicView,
      isLogged = true,
      showNomads,
      setShowNomads,
      usersOnMapCount,
      friendsOnTheMapCount,
      isConnected = true,
      isPremium
    },
    ref
  ) => {
    const [isFilterVisible, setIsFilterVisible] = useState<string | null>(null);

    useImperativeHandle(ref, () => ({
      openFilter: (type: string) => {
        setIsFilterVisible(type);
        setTimeout(() => {
          bottomSheetRef.current?.show();
        }, 0);
      },
      closeFilter: () => {
        bottomSheetRef.current?.hide();
      }
    }));

    const token = storage.get('token', StoreType.STRING) as string;
    const { data: locationSettings } = usePostGetSettingsQuery(
      token,
      isLogged && !isPublicView && isConnected
    );
    const { data: countriesData } = usePostGetListOfCountriesForLocationDataQuery(
      token,
      isLogged && !isPublicView && isConnected
    );
    const { mutateAsync: setSettings } = usePostSetSettingsMutation();
    const { mutateAsync: updateLocation } = usePostUpdateLocationMutation();
    const [selectedYear, setSelectedYear] = useState<{ label: string; value: number } | null>(null);
    const [allYears, setAllYears] = useState<{ label: string; value: number }[]>([]);
    const [selectedVisible, setSelectedVisible] = useState({ label: 'visited by', value: 0 });
    const visibleTypes = [
      { label: 'visited by', value: 0 },
      { label: 'visited in', value: 1 }
    ];
    const { data } = usePostGetMapYearsQuery(
      token as string,
      userId,
      isLogged && isConnected ? true : false
    );
    const { data: seriesList } = useGetListQuery(isConnected ? true : false);
    const [series, setSeries] = useState<
      { label: string; value: number; icon: string; show_label: boolean }[]
    >([]);
    const [selectedSeries, setSelectedSeries] = useState<number[]>([]);
    const [seriesVisible, setSeriesVisible] = useState(true);
    const [selectedSeriesFilter, setSelectedSeriesFilter] = useState(-1);
    const [selectedCountries, setSelectedCountries] = useState<any[]>([]);
    const [friendsVisible, setFriendsVisible] = useState(false);
    const [trustedVisible, setTrustedVisible] = useState(false);
    const savedFilterSettings = !isPublicView
      ? (storage.get('filterSettings', StoreType.STRING) as string)
      : null;

    const [isSharing, setIsSharing] = useState(false);
    const [askLocationVisible, setAskLocationVisible] = useState<boolean>(false);
    const [openSettingsVisible, setOpenSettingsVisible] = useState<boolean>(false);
    const [openSettingsBackgroundVisible, setOpenSettingsBackgroundVisible] =
      useState<boolean>(false);
    const [countrySelectorVisible, setCountrySelectorVisible] = useState(false);
    const [countriesForSelector, setCountriesForSelector] = useState<
      { country: number; name: string; count: number; flag: string | null }[]
    >([]);
    const [premiumModalVisible, setPremiumModalVisible] = useState(false);
    const [toolTipVisible, setToolTipVisible] = useState<boolean>(false);
    const [defaultYear, setDefaultYear] = useState({
      label: moment().year().toString(),
      value: moment().year()
    });

    const bottomSheetRef = useRef<ActionSheetRef>(null);
    const insets = useSafeAreaInsets();
    const windowHeight = Dimensions.get('window').height;

    useEffect(() => {
      const syncSettings = async () => {
        if (locationSettings) {
          let { status } = await Location.getForegroundPermissionsAsync();
          const isServicesEnabled = await Location.hasServicesEnabledAsync();

          setIsSharing(locationSettings.sharing !== 0 && status === 'granted' && isServicesEnabled);
        }
      };

      syncSettings();
    }, [locationSettings]);

    useEffect(() => {
      if (countriesData && countriesData.countries) {
        setCountriesForSelector(
          countriesData.countries.filter((country: any) => country.count > 0)
        );
      }
    }, [countriesData]);

    useEffect(() => {
      const loadFilterSettings = () => {
        try {
          if (savedFilterSettings && isFilterVisible) {
            const filterSettings = JSON.parse(savedFilterSettings);
            setTilesType(filterSettings.tilesType);
            setSelectedYear(filterSettings.selectedYear);
            setSelectedVisible(filterSettings.selectedVisible);
            setSelectedSeries(filterSettings.seriesFilter.groups);
            setSeriesVisible(filterSettings.seriesFilter.visible);
            setSelectedSeriesFilter(filterSettings.seriesFilter.status);
            setSelectedCountries(filterSettings.nomadsFilter.countries || []);
            setFriendsVisible(filterSettings.nomadsFilter.friends === 1);
            setTrustedVisible(filterSettings.nomadsFilter.trusted === 1);
          }
        } catch (error) {
          console.error('Failed to load filter settings', error);
        }
      };

      if (!isPublicView && isLogged) {
        loadFilterSettings();
      }
    }, [savedFilterSettings, isFilterVisible]);

    const handleCountrySelect = (
      selectedItems: { country: number; name: string; count: number; flag: string | null }[]
    ) => {
      if (selectedItems.length > 0) {
        setShowNomads && setShowNomads(false);
        storage.set('showNomads', false);
      }
      setSelectedCountries(selectedItems);
      setCountrySelectorVisible(false);
    };

    const saveFilterSettings = async () => {
      if (isLogged && !isPublicView) {
        try {
          const filterSettings = {
            type:
              tilesType.value === 2
                ? 'dare'
                : tilesType.value === 1
                  ? 'countries'
                  : tilesType.value === -1
                    ? 'blank'
                    : 'regions',
            tilesType,
            selectedYear,
            selectedVisible,
            seriesFilter: {
              visible: seriesVisible,
              groups: selectedSeries,
              applied: true,
              status: selectedSeriesFilter,
              labelIds: series.filter((s) => (s as any).show_label).map((s) => s.value)
            },
            nomadsFilter: {
              friends: friendsVisible ? 1 : 0,
              trusted: trustedVisible ? 1 : 0,
              countries: selectedCountries
            },
            showNomads: showNomads
          };
          storage.set('filterSettings', JSON.stringify(filterSettings));
        } catch (error) {
          console.error('Failed to save filter settings', error);
        }
      }
    };

    useEffect(() => {
      if (data && data.data && data.data.map_years) {
        const years = data.data.map_years.filter((year) => year > 1900);
        const formattedYears = years
          .map((year) => ({ label: year.toString(), value: year }))
          .reverse();
        setAllYears(formattedYears);
        formattedYears.length && !savedFilterSettings && setSelectedYear(formattedYears[0]);
        formattedYears.length && setDefaultYear(formattedYears[0]);
      }
    }, [data, savedFilterSettings]);

    useEffect(() => {
      if (seriesList?.data) {
        setSeries(
          seriesList.data.reduce(
            (acc, item) => {
              if (item.id < 0) {
                const alreadyExists = acc.some((i) => i.value === -1);
                if (alreadyExists) {
                  return acc;
                }

                acc.push({
                  label: 'Top of the tops',
                  value: -1,
                  icon: item.new_icon,
                  show_label: item.label
                });

                return acc;
              }

              acc.push({
                label: item.name,
                value: item.id,
                icon: item.new_icon,
                show_label: item.label
              });

              return acc;
            },
            [] as { label: string; value: number; icon: string; show_label: boolean }[]
          )
        );
        !savedFilterSettings && setSelectedSeries(seriesList.data.map((item) => item.id));
      }
    }, [seriesList]);

    useEffect(() => {
      if (isFilterVisible && isFilterVisible === 'series') {
        setSeriesFilter &&
          setSeriesFilter({
            visible: seriesVisible,
            groups: selectedSeries,
            applied: true,
            status: selectedSeriesFilter,
            labelIds: series.filter((s) => (s as any).show_label).map((s) => s.value)
          });
        saveFilterSettings();
      }
    }, [selectedSeries, seriesVisible, selectedSeriesFilter]);

    useEffect(() => {
      if (isFilterVisible && isFilterVisible === 'nomads') {
        setNomadsFilter &&
          setNomadsFilter({
            friends: friendsVisible ? 1 : 0,
            trusted: trustedVisible ? 1 : 0,
            countries: selectedCountries
          });
        saveFilterSettings();
      }
    }, [friendsVisible, trustedVisible, selectedCountries]);

    useEffect(() => {
      if (isFilterVisible && isFilterVisible === 'regions') {
        try {
          saveFilterSettings();
          handleApplyFilter();
          setType(
            tilesType.value === 2
              ? 'dare'
              : tilesType.value === 1
                ? 'countries'
                : tilesType.value === -1
                  ? 'blank'
                  : 'regions'
          );
        } catch (error) {
          console.error('Error applying filter:', error);
        }
      }
    }, [selectedYear, selectedVisible, tilesType]);

    const handleApplyFilter = () => {
      if (!isLogged) {
        return;
      }

      if (selectedVisible.value === 0) {
        if (tilesType.value === 0 || tilesType.value === 1) {
          setRegionsFilter({
            visitedLabel: 'by',
            year: selectedYear && selectedYear.value ? selectedYear.value : moment().year()
          });
        }
      } else {
        if (tilesType.value === 0 || tilesType.value === 1) {
          setRegionsFilter({
            visitedLabel: 'in',
            year: selectedYear && selectedYear.value ? selectedYear.value : moment().year()
          });
        }
      }
    };

    const handleCloseFilter = () => {};

    const renderRegions = () => {
      return (
        <View style={{ minHeight: 200, justifyContent: 'space-between' }}>
          <TouchableOpacity
            onPress={() => bottomSheetRef.current?.hide()}
            style={[styles.regionsCloseBtn]}
            hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
          >
            <CloseSvg width={15} height={15} />
          </TouchableOpacity>
          <View style={styles.optionsContainer}>
            <View style={[styles.rowWrapper, {}]}>
              <View style={[styles.dropdownWrapper, {}]}>
                <SelectSheet
                  style={[ModalStyles.dropdown, { width: '100%' }] as any}
                  data={tilesTypes}
                  labelField="label"
                  valueField="value"
                  value={tilesType?.value}
                  placeholder={tilesType?.label || 'NM regions'}
                  onChange={(item) => {
                    setTilesType(item);
                  }}
                  hideTitle={true}
                  initialSnapPoint={Platform.OS === 'android' ? 55 : 45}
                />
              </View>
            </View>

            {tilesType.value !== 2 && tilesType.value !== -1 && allYears.length && isLogged ? (
              <View style={styles.rowWrapper}>
                <View style={styles.dropdownWrapper}>
                  <SelectSheet
                    style={[ModalStyles.dropdown, { width: '100%' }] as any}
                    data={visibleTypes}
                    labelField="label"
                    valueField="value"
                    value={selectedVisible?.value}
                    placeholder={selectedVisible?.label || 'visited by'}
                    onChange={(item) => {
                      setSelectedVisible(item);
                    }}
                    hideTitle={true}
                    initialSnapPoint={Platform.OS === 'android' ? 45 : 35}
                  />
                </View>
                <View style={styles.dropdownWrapper}>
                  <SelectSheet
                    style={[ModalStyles.dropdown, { width: '100%' }] as any}
                    data={allYears}
                    labelField="label"
                    valueField="value"
                    value={selectedYear?.value}
                    placeholder={selectedYear?.label || 'Year'}
                    onChange={(item) => {
                      setSelectedYear(item);
                    }}
                    hideTitle={true}
                    initialSnapPoint={Platform.OS === 'android' ? 100 : 70}
                  />
                </View>
              </View>
            ) : null}
          </View>

          <View style={{ marginTop: 'auto' }}>
            <Button
              children="Reset"
              onPress={() => {
                setTilesType({ label: 'NM regions', value: 0 });
                setSelectedVisible({
                  label: 'visited by',
                  value: 0
                });
                setSelectedYear(defaultYear);
              }}
              variant={ButtonVariants.OPACITY}
              containerStyles={{
                backgroundColor: Colors.WHITE,
                borderWidth: 1,
                borderColor: Colors.DARK_BLUE
              }}
              textStyles={{ color: Colors.DARK_BLUE }}
            />
          </View>
        </View>
      );
    };

    const renderSeries = () => {
      const selectedCount = selectedSeries.length;

      return (
        <View style={[styles.seriesSheetContainer]}>
          <TouchableOpacity
            onPress={() => bottomSheetRef.current?.hide()}
            style={styles.seriesCloseBtn}
            hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
          >
            <CloseSvg width={15} height={15} />
          </TouchableOpacity>
          <View style={[styles.optionsContainer, { paddingHorizontal: 16 }]}>
            <View style={[styles.row, { gap: 8 }]}>
              <Switch
                trackColor={{ false: Colors.LIGHT_GRAY, true: Colors.DARK_BLUE }}
                thumbColor={Colors.WHITE}
                onValueChange={setSeriesVisible}
                value={seriesVisible}
                style={{ transform: 'scale(0.8)' }}
              />
              <Text style={styles.textBold}>Show series</Text>
            </View>

            {isLogged ? (
              <View style={[styles.row, { justifyContent: 'space-between' }]}>
                <TouchableOpacity style={styles.row} onPress={() => setSelectedSeriesFilter(-1)}>
                  <RadioButton.Android
                    value="all"
                    status={selectedSeriesFilter === -1 ? 'checked' : 'unchecked'}
                    onPress={() => setSelectedSeriesFilter(-1)}
                    color={Colors.DARK_BLUE}
                  />
                  <Text style={styles.textBold}>All items</Text>
                </TouchableOpacity>

                <TouchableOpacity style={styles.row} onPress={() => setSelectedSeriesFilter(1)}>
                  <RadioButton.Android
                    value="visited"
                    status={selectedSeriesFilter === 1 ? 'checked' : 'unchecked'}
                    onPress={() => setSelectedSeriesFilter(1)}
                    color={Colors.DARK_BLUE}
                  />
                  <Text style={styles.textBold}>Visited</Text>
                </TouchableOpacity>

                <TouchableOpacity style={styles.row} onPress={() => setSelectedSeriesFilter(0)}>
                  <RadioButton.Android
                    value="not-visited"
                    status={selectedSeriesFilter === 0 ? 'checked' : 'unchecked'}
                    onPress={() => setSelectedSeriesFilter(0)}
                    color={Colors.DARK_BLUE}
                  />
                  <Text style={styles.textBold}>Not visited</Text>
                </TouchableOpacity>
              </View>
            ) : null}

            <View style={styles.seriesHeader}>
              <Text style={styles.textBold}>Select series ({selectedCount} selected)</Text>
            </View>

            <View style={styles.seriesActions}>
              <TouchableOpacity
                style={styles.seriesActionBtn}
                onPress={() => setSelectedSeries(series.map((item) => item.value))}
              >
                {/* <CheckSvg fill={Colors.DARK_BLUE} height={8} width={10} /> */}
                <Text style={styles.seriesActionBtnText}>Select all</Text>
              </TouchableOpacity>

              <TouchableOpacity
                style={styles.seriesActionBtn}
                onPress={() => setSelectedSeries([])}
              >
                {/* <CheckSvg fill={Colors.DARK_BLUE} height={8} width={10} /> */}
                <Text style={styles.seriesActionBtnText}>Select none</Text>
              </TouchableOpacity>
            </View>
          </View>

          <ScrollView style={{ flex: 1 }} contentContainerStyle={styles.seriesPillsContainer}>
            {series.map((item) => {
              const isSelected = selectedSeries.includes(item.value);
              return (
                <TouchableOpacity
                  key={item.value}
                  style={[
                    styles.seriesPill,
                    isSelected ? styles.seriesPillSelected : styles.seriesPillUnselected
                  ]}
                  onPress={() => {
                    if (isSelected) {
                      setSelectedSeries(selectedSeries.filter((v) => v !== item.value));
                    } else {
                      setSelectedSeries([...selectedSeries, item.value]);
                    }
                  }}
                  activeOpacity={0.75}
                >
                  {(item as any).icon ? (
                    <Image
                      source={{ uri: API_HOST + (item as any).icon }}
                      style={{
                        width: 20,
                        height: 20
                        // tintColor: isSelected ? Colors.WHITE : Colors.DARK_BLUE
                      }}
                    />
                  ) : null}
                  <Text
                    style={[
                      styles.seriesPillText,
                      isSelected ? styles.seriesPillTextSelected : styles.seriesPillTextUnselected
                    ]}
                  >
                    {item.label}
                  </Text>
                </TouchableOpacity>
              );
            })}
          </ScrollView>

          <View style={{ marginTop: 'auto', paddingHorizontal: 16 }}>
            <Button
              children="Reset"
              onPress={() => {
                setSeriesVisible(true);
                setSelectedSeries(series.map((item) => item.value));
                setSelectedSeriesFilter(-1);
              }}
              variant={ButtonVariants.OPACITY}
              containerStyles={{
                backgroundColor: Colors.WHITE,
                borderWidth: 1,
                borderColor: Colors.DARK_BLUE,
                marginTop: 8
              }}
              textStyles={{ color: Colors.DARK_BLUE }}
            />
          </View>
        </View>
      );
    };

    const toggleSettingsSwitch = async () => {
      if (!isSharing) {
        handleGetLocation();
      } else {
        setIsSharing(false);
        setSettings({ token, sharing: 0 });
        setShowNomads && setShowNomads(false);
        storage.set('showNomads', false);
        setTrustedVisible(false);
        setFriendsVisible(false);
        setSelectedCountries([]);
      }
    };

    const toggleTrustedSwitch = async () => {
      if (!isPremium) {
        setPremiumModalVisible(true);
        return;
      }
      setShowNomads && setShowNomads(false);
      storage.set('showNomads', false);
      setTrustedVisible(!trustedVisible);
    };

    const toggleFriendsSwitch = async () => {
      if (!isPremium) {
        setPremiumModalVisible(true);
        return;
      }
      setShowNomads && setShowNomads(false);
      storage.set('showNomads', false);
      setFriendsVisible(!friendsVisible);
    };

    const requestBackgroundPermissionSafe = async () => {
      await new Promise((resolve) => setTimeout(resolve, 300));
      return await Location.requestBackgroundPermissionsAsync();
    };

    const handleGetLocation = async () => {
      let { status, canAskAgain } = await Location.getForegroundPermissionsAsync();
      const isServicesEnabled = await Location.hasServicesEnabledAsync();

      if (status === 'granted' && isServicesEnabled) {
        const bgStatus = await Location.getBackgroundPermissionsAsync();
        if (bgStatus.status !== 'granted') {
          // const { status } = await requestBackgroundPermissionSafe();
          // if (status === Location.PermissionStatus.GRANTED) {
          //   await startBackgroundLocationUpdates();
          // } else {
          await stopBackgroundLocationUpdates();
          // setOpenSettingsBackgroundVisible(true);
          // }
        } else {
          // await startBackgroundLocationUpdates();
        }

        getLocation();
      } else if (!canAskAgain || !isServicesEnabled) {
        setOpenSettingsVisible(true);
      } else {
        setAskLocationVisible(true);
      }
    };

    const getLocation = async () => {
      setIsSharing(true);
      setSettings(
        { token, sharing: 1 },
        {
          onSuccess: async () => {
            let currentLocation = await Location.getCurrentPositionAsync({
              accuracy: Location.Accuracy.Balanced
            });

            updateLocation({
              token,
              lat: currentLocation.coords.latitude,
              lng: currentLocation.coords.longitude
            });
          }
        }
      );
      setShowNomads && setShowNomads(true);
      storage.set('showNomads', true);
    };

    const handleAcceptPermission = async () => {
      setAskLocationVisible(false);
      let { status, canAskAgain } = await Location.requestForegroundPermissionsAsync();
      const isServicesEnabled = await Location.hasServicesEnabledAsync();

      if (status === 'granted' && isServicesEnabled) {
        const bgStatus = await Location.getBackgroundPermissionsAsync();

        if (bgStatus.status !== 'granted') {
          // const { status } = await requestBackgroundPermissionSafe();
          // if (status === Location.PermissionStatus.GRANTED) {
          //   await startBackgroundLocationUpdates();
          // } else {
          await stopBackgroundLocationUpdates();
          // setOpenSettingsBackgroundVisible(true);
          // }
        } else {
          // await startBackgroundLocationUpdates();
        }
        getLocation();
      } else if (!canAskAgain || !isServicesEnabled) {
        setOpenSettingsVisible(true);
      }
    };

    const toggleNomadsSwitch = () => {
      if (!showNomads) {
        setFriendsVisible(false);
        setSelectedCountries([]);
      }
      setShowNomads && setShowNomads(!showNomads);
      storage.set('showNomads', !showNomads);
    };

    const renderNomads = () => {
      return (
        <View style={[styles.sceneContainer, { justifyContent: 'space-between' }]}>
          <TouchableOpacity
            onPress={() => bottomSheetRef.current?.hide()}
            style={[styles.regionsCloseBtn]}
            hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
          >
            <CloseSvg width={15} height={15} />
          </TouchableOpacity>
          <View style={{ marginBottom: 16 }}>
            <View style={styles.textContainer}>
              <Text style={styles.text}>The location is shared with 1 km radius precision.</Text>
              <Tooltip
                isVisible={toolTipVisible}
                content={
                  <View style={{ gap: 6 }}>
                    <Text style={[styles.text, styles.boldText]}>
                      At NomadMania, we respect your privacy.
                    </Text>
                    <Text style={[styles.text]}>
                      If you choose to share your location, it will be used to show your current
                      location to other users who also share theirs.
                    </Text>
                    <Text style={[styles.text]}>
                      You can choose how you want to share your location:
                    </Text>
                    <View style={[styles.bulletItem]}>
                      <Text style={styles.bulletIcon}>{'\u2022'}</Text>
                      <Text style={[styles.text, { flex: 1 }]}>
                        <Text style={styles.boldText}>Only when the app is open</Text> – Your
                        location updates only when you open the app. This uses less battery but may
                        be less accurate.
                      </Text>
                    </View>
                    <Text style={[styles.text]}>
                      You're always in control, and you can change these settings anytime in the app{' '}
                      <Text
                        style={{ color: Colors.ORANGE }}
                        onPress={() =>
                          Platform.OS === 'ios'
                            ? Linking.openURL('app-settings:')
                            : Linking.sendIntent('android.settings.LOCATION_SOURCE_SETTINGS')
                        }
                      >
                        Settings
                      </Text>{' '}
                      section.
                    </Text>
                  </View>
                }
                contentStyle={{ backgroundColor: Colors.WHITE }}
                placement="top"
                onClose={() => setToolTipVisible(false)}
                backgroundColor="transparent"
                allowChildInteraction={false}
              >
                <TouchableOpacity
                  style={{ paddingHorizontal: 5 }}
                  onPress={() => setToolTipVisible(true)}
                  hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
                >
                  <InfoIcon fill={Colors.DARK_BLUE} width={20} height={20} />
                </TouchableOpacity>
              </Tooltip>
            </View>

            <TouchableOpacity
              style={[
                styles.alignStyle,
                styles.buttonWrapper,
                {
                  justifyContent: 'space-between'
                }
              ]}
              onPress={toggleSettingsSwitch}
            >
              <View style={styles.alignStyle}>
                <SharingIcon fill={Colors.DARK_BLUE} width={20} height={20} />
                <Text style={styles.buttonLabel}>Share my location to see others</Text>
              </View>
              <View>
                <Switch
                  trackColor={{ false: Colors.LIGHT_GRAY, true: Colors.DARK_BLUE }}
                  thumbColor={Colors.WHITE}
                  onValueChange={toggleSettingsSwitch}
                  value={isSharing}
                  style={{ transform: 'scale(0.8)' }}
                />
              </View>
            </TouchableOpacity>

            <TouchableOpacity
              style={[
                styles.alignStyle,
                styles.buttonWrapper,
                {
                  justifyContent: 'space-between'
                }
              ]}
              onPress={toggleNomadsSwitch}
              disabled={!isSharing}
            >
              <View style={styles.alignStyle}>
                <UsersIcon
                  fill={isSharing ? Colors.DARK_BLUE : Colors.LIGHT_GRAY}
                  width={20}
                  height={20}
                />
                <Text style={[styles.buttonLabel, !isSharing ? { color: Colors.LIGHT_GRAY } : {}]}>
                  Show all Nomads - {usersOnMapCount ? formatNumber(usersOnMapCount) : null} online
                </Text>
              </View>
              <View>
                <Switch
                  trackColor={{ false: Colors.LIGHT_GRAY, true: Colors.DARK_BLUE }}
                  thumbColor={Colors.WHITE}
                  onValueChange={toggleNomadsSwitch}
                  value={showNomads}
                  style={{ transform: 'scale(0.8)' }}
                  disabled={!isSharing}
                />
              </View>
            </TouchableOpacity>

            <View style={styles.divider} />

            <TouchableOpacity
              style={[
                styles.alignStyle,
                styles.buttonWrapper,
                {
                  justifyContent: 'space-between'
                }
              ]}
              onPress={toggleFriendsSwitch}
              disabled={!isSharing}
            >
              <View style={styles.alignStyle}>
                <FriendsIcon
                  fill={isSharing ? Colors.DARK_BLUE : Colors.LIGHT_GRAY}
                  width={20}
                  height={18}
                />
                <Text style={[styles.buttonLabel, !isSharing ? { color: Colors.LIGHT_GRAY } : {}]}>
                  Show my friends -{' '}
                  {friendsOnTheMapCount ? formatNumber(friendsOnTheMapCount) : null} online
                </Text>
              </View>
              <View>
                <Switch
                  trackColor={{ false: Colors.LIGHT_GRAY, true: Colors.DARK_BLUE }}
                  thumbColor={Colors.WHITE}
                  onValueChange={toggleFriendsSwitch}
                  value={friendsVisible}
                  style={{ transform: 'scale(0.8)' }}
                  disabled={!isSharing}
                />
              </View>
            </TouchableOpacity>

            <TouchableOpacity
              style={styles.megaSelector}
              onPress={() => {
                if (!isPremium) {
                  setPremiumModalVisible(true);
                  return;
                }
                setCountrySelectorVisible(true);
              }}
              disabled={!isSharing}
            >
              <Text style={styles.megaButtonText}>Show Nomads from (select a country)</Text>
              <ChevronIcon width={18} height={18} />
            </TouchableOpacity>

            {selectedCountries.length > 0 && (
              <View
                style={{
                  flexDirection: 'row',
                  alignItems: 'center',
                  flexWrap: 'wrap',
                  marginLeft: 12,
                  gap: 6,
                  marginVertical: 8
                }}
              >
                {selectedCountries.map((item) => (
                  <View
                    key={item.country}
                    style={{
                      marginLeft: -12
                    }}
                  >
                    <Image
                      source={{ uri: API_HOST + item.flag }}
                      style={{
                        width: 28,
                        height: 28,
                        borderRadius: 14,
                        borderWidth: 0.5,
                        borderColor: Colors.BORDER_LIGHT
                      }}
                    />
                  </View>
                ))}
              </View>
            )}
          </View>

          <View style={{ marginTop: 'auto' }}>
            <Button
              children="Reset"
              onPress={() => {
                if (isSharing) {
                  setFriendsVisible(false);
                  setShowNomads && setShowNomads(true);
                  storage.set('showNomads', true);
                  setSelectedCountries([]);
                } else {
                  handleGetLocation();
                }
              }}
              variant={ButtonVariants.OPACITY}
              containerStyles={{
                backgroundColor: Colors.WHITE,
                borderWidth: 1,
                borderColor: Colors.DARK_BLUE
              }}
              textStyles={{ color: Colors.DARK_BLUE }}
            />
          </View>

          <MultiSelectorCountries
            isVisible={countrySelectorVisible}
            onClose={() => setCountrySelectorVisible(false)}
            onSelect={handleCountrySelect}
            data={countriesForSelector ?? []}
            initialSelectedIds={selectedCountries.map((item) => parseInt(item.country))}
          />

          <WarningModal
            type={'success'}
            isVisible={premiumModalVisible}
            message={
              'This feature is available to Premium users. Premium account settings can be managed on our website.'
            }
            action={() => {}}
            onClose={() => setPremiumModalVisible(false)}
            title={'Premium Feature'}
          />

          <WarningModal
            type={'success'}
            isVisible={askLocationVisible}
            onClose={() => setAskLocationVisible(false)}
            action={handleAcceptPermission}
            message="To use this feature we need your permission to access your location. If you press OK your system will ask you to approve location sharing with NomadMania app."
          />
          <WarningModal
            type={'success'}
            isVisible={openSettingsVisible || openSettingsBackgroundVisible}
            onClose={() => {
              setOpenSettingsVisible(false);
              setOpenSettingsBackgroundVisible(false);
            }}
            action={async () => {
              const isServicesEnabled = await Location.hasServicesEnabledAsync();

              if (!isServicesEnabled) {
                Platform.OS === 'ios'
                  ? Linking.openURL('app-settings:')
                  : Linking.sendIntent('android.settings.LOCATION_SOURCE_SETTINGS');
              } else {
                Platform.OS === 'ios' ? Linking.openURL('app-settings:') : Linking.openSettings();
              }
            }}
            message={
              openSettingsBackgroundVisible
                ? "NomadMania app needs background location access to update your location automatically. Please select 'Always' in location permissions. Open settings?"
                : 'NomadMania app needs location permissions to function properly. Open settings?'
            }
          />
        </View>
      );
    };

    const renderScene = (filterKey: string | null) => {
      switch (filterKey) {
        case 'regions':
          return renderRegions();
        case 'series':
          return renderSeries();
        case 'nomads':
          return renderNomads();
        default:
          return null;
      }
    };

    const isSeriesFilter = isFilterVisible === 'series';
    const sheetSnapPoints = useMemo(() => [100], []);

    return (
      <ActionSheet
        key={isSeriesFilter ? 'series-sheet' : 'default-sheet'}
        ref={bottomSheetRef}
        snapPoints={sheetSnapPoints}
        gestureEnabled={isSeriesFilter && Platform.OS === 'android' ? false : true}
        closeOnTouchBackdrop
        defaultOverlayOpacity={0.2}
        onClose={handleCloseFilter}
        containerStyle={[styles.sheetBackground, isSeriesFilter && Platform.OS === 'ios' ? { height: '100%' } : {}]}
        safeAreaInsets={{ bottom: insets.bottom || 24, top: insets.top, left: 0, right: 0 }}
      >
        <View
          style={[
            {
              paddingTop: Platform.OS === 'android' ? 12 : 0,
              height: isSeriesFilter ? '100%' : undefined
            },
            isFilterVisible === 'series' ? {} : { paddingHorizontal: 16 }
          ]}
        >
          {renderScene(isFilterVisible)}
        </View>
      </ActionSheet>
    );
  }
);

export default FilterModal;
