import React, { useCallback, useEffect, useRef, useState } from 'react'
import {
  Animated,
  View,
  Image,
  Text,
  TouchableOpacity,
  Vibration,
  BackHandler,
  InteractionManager,
  Modal,
  FlatList,
  ScrollView,
} from 'react-native'
import appColors from '../../../theme/appColors'
import {
  fontSizes,
  windowHeight,
  windowWidth,
} from '../../../theme/appConstant'
import Icons from '../../../utils/icons/icons'
import { useDispatch, useSelector } from 'react-redux'
import appFonts from '../../../theme/appFonts'
import useSmartLocation from '../../../commonComponents/helper/locationHelper'
import {
  useFocusEffect,
  useIsFocused,
  useNavigation,
} from '@react-navigation/native'
import { notificationHelper } from '../../../commonComponents'
import {
  startLiveLocation,
  stopLiveLocation,
} from '../../../commonComponents/helper/liveLocationHelper'
import {
  currentZone,
  dashBoardData,
  fleetDriverList,
  rideDataGets,
  rideRequestDataGet,
  selfDriverData,
  taxidosettingDataGet,
  vehicleData,
  walletData,
} from '../../../api/store/action'
import Sound from 'react-native-sound'
import { MapScreenFleet } from '../../home'
import BottomSheet, {
  BottomSheetFlashList,
  BottomSheetFlatList,
  BottomSheetModal,
  BottomSheetModalProvider,
  BottomSheetView,
} from '@gorhom/bottom-sheet'
import AsyncStorage from '@react-native-async-storage/async-storage'
import { useValues } from '../../../utils/context'
import { useTourGuideController } from 'rn-tourguide'
import { getValue, setValue } from '../../../utils/localstorage'
import PushNotification from 'react-native-push-notification'
import { initializeApp } from 'firebase/app'
import { getFirestore, doc, getDoc } from 'firebase/firestore'
import { firebaseConfig } from '../../../../firebase'
import styles from './styles'
import { AppDispatch } from '../../../api/store'
import { CustomCheckbox } from '../../auth/registration/component'

const app = initializeApp(firebaseConfig)
const db = getFirestore(app)

Sound.setCategory('Playback', true)


export function FleetHome() {
  const { currentLatitude, currentLongitude } = useSmartLocation()
  const { selfDriver } = useSelector((state: any) => state.account)
  const char = selfDriver?.name ? selfDriver.name.charAt(0) : ''
  const { zoneValue } = useSelector((state: any) => state.zoneUpdate)
  const driverId = selfDriver?.id
  const [isOnline, setIsOnline] = useState(false)
  const { taxidoSettingData } = useSelector((state: any) => state.setting)
  const dispatch = useDispatch<AppDispatch>()
  const { navigate } = useNavigation<any>()
  const [status, setStatus] = useState<'online' | 'offline' | 'onride'>(
    'online',
  )
  const [isBottomSheetOpen, setIsBottomSheetOpen] = useState(false)
  const [totalOnlineSeconds, setTotalOnlineSeconds] = useState(0)
  const [isAmountVisible, setIsAmountVisible] = useState(false)
  const [viewMode, setViewMode] = useState<'amount' | 'time'>('amount')
  const [location, setLocation] = useState<{
    latitude: number
    longitude: number
  } | null>(null)
  const { translateData } = useSelector((state: any) => state.setting)
  const { isDark, rtl, viewRtlStyle } = useValues()
  const { dashBoardList } = useSelector((state: any) => state.dashboard)
  const TodayIncome = `${zoneValue?.currency_symbol} ${dashBoardList?.day?.dayRevenues?.revenues?.slice(-1)[0]
    }`
  const { start, canStart, stop } = useTourGuideController()
  const [noservice, setNodervice] = useState<boolean>(false)
  const mapRef = useRef()
  const isFocused = useIsFocused()
  const bottomSheetRef = useRef<any>(null)
  const snapPoints = ['30%']
  const isRingtonePlayingRef = useRef<boolean>(false)
  const soundInstanceRef = useRef<any>(null)
  const [on, SetOn] = useState(false)
  const [hasShownTour, setHasShownTour] = useState<boolean>(false)
  const [showOnline, setShowOnline] = useState<boolean>(true)
  const { allVehicle } = useSelector(state => state.vehicleType)
  const [selectedVehicles, setSelectedVehicles] = useState<number[]>([])

  const maskValue = (value: any) => {
    if (value == null || value === 0) {
      return '*.**'
    }
    const strValue = value.toString()
    return strValue
      .split('')
      .map((char: string) => (char === '.' ? '.' : '*'))
      .join('')
  }

  const lastRevenue =
    dashBoardList?.day?.dayRevenues?.revenues?.length > 0
      ? dashBoardList.day.dayRevenues.revenues.slice(-1)[0]
      : null

  const maskedAmount = `${zoneValue?.currency_symbol ?? ''} ${maskValue(
    lastRevenue,
  )}`

  useEffect(() => {
    if (isFocused && !hasShownTour) {
      start()
      setHasShownTour(true)
    } else if (!isFocused) {
      stop()
    }
  }, [isFocused])

  useEffect(() => {
    const fetchZone = async () => {
      if (!currentLatitude || !currentLongitude) {
        return
      }
      try {
        const res: any = await dispatch(
          currentZone({ lat: currentLatitude, lng: currentLongitude }),
        ).unwrap()
        if (res?.id) {
          setNodervice(false)
        } else {
          setNodervice(true)
        }
      } catch (err) {
        setNodervice(true)
      }
    }
    fetchZone()
  }, [currentLatitude, currentLongitude])

  useEffect(() => {
    const showTourIfFirstTime = async () => {
      const hasSeenTour = await getValue('hasSeenTour')
      if (!hasSeenTour && canStart) {
        InteractionManager.runAfterInteractions(() => {
          requestAnimationFrame(() => {
            setTimeout(async () => {
              if (canStart) {
                start()
                await setValue('hasSeenTour', 'true')
              }
            }, 500)
          })
        })
      }
    }
    if (noservice == false) {
      showTourIfFirstTime()
    }
  }, [canStart])

  const fetchStoredLocation = async () => {
    try {
      const lat = await AsyncStorage.getItem('user_latitude')
      const lng = await AsyncStorage.getItem('user_longitude')
      if (lat && lng) {
        setLocation({
          latitude: parseFloat(lat),
          longitude: parseFloat(lng),
        })
      } else {
        setLocation(null)
      }
    } catch (error) {
      console.warn('❌ Error fetching location:', error)
    }
  }

  useFocusEffect(
    useCallback(() => {
      fetchStoredLocation()
    }, []),
  )

  useEffect(() => {
    if (!isFocused) return
    const backAction = () => {
      bottomSheetRef.current?.expand()
      return true
    }
    const backHandler = BackHandler.addEventListener(
      'hardwareBackPress',
      backAction,
    )
    return () => backHandler.remove()
  }, [isFocused])

  const handleExit = () => {
    bottomSheetRef.current?.close()
    setTimeout(() => {
      BackHandler.exitApp()
    }, 150)
  }

  const handleCloseSheet = () => {
    bottomSheetRef.current?.close()
  }

  useEffect(() => {
    const fetchStatus = async () => {
      try {
        if (!driverId) return

        const driverRef = doc(db, 'driverTrack', driverId.toString())
        const driverSnap = await getDoc(driverRef)

        if (driverSnap.exists()) {
          const isOnline = driverSnap.data()?.is_online
          setStatus(isOnline == 1 ? 'online' : 'offline')
        }
      } catch (error) { }
    }

    fetchStatus()
  }, [driverId])

  const toggleVehicleSelection = (id: number) => {
    setSelectedVehicles(prevSelected => {
      if (prevSelected.includes(id)) {
        return prevSelected.filter(vehicleId => vehicleId !== id)
      } else {
        return [...prevSelected, id]
      }
    })
  }
  const renderItem = ({ item, index }: any) => {
    const isSelected = selectedVehicles.includes(item.id)
    const isLastItem = index === allVehicle.length - 1

    return (
      <TouchableOpacity
        style={{
          flexDirection: 'row',
          alignItems: 'center',
          padding: windowHeight(2),
          borderBottomWidth: isLastItem ? 0 : windowHeight(0.6),
          borderColor: isDark ? appColors.bgDark : appColors.lightGray,
          paddingVertical: windowHeight(1.5),
        }}
        onPress={() => toggleVehicleSelection(item.id)}
      >
        <View
          style={{
            height: windowHeight(8),
            width: windowHeight(9),
            borderRadius: windowWidth(3),
            backgroundColor: isDark ? appColors.bgDark : appColors.lightGray,
            alignItems: 'center',
            justifyContent: 'center',
          }}
        >
          <Image
            source={{ uri: item.vehicle_image_url }}
            style={{ width: windowHeight(5), height: windowHeight(5) }}
            resizeMode="contain"
          />
        </View>
        <Text
          style={{
            flex: 1,
            color: isDark ? appColors.white : appColors.black,
            marginHorizontal: windowWidth(2),
          }}
        >
          {item.name}
        </Text>
        <CustomCheckbox
          checked={isSelected}
          onPress={() => toggleVehicleSelection(item.id)}
        />
      </TouchableOpacity>
    )
  }

  const statusColors = {
    online: {
      outer: appColors.primary,
      inner: appColors.primary,
      pulse1: appColors.primaryLight,
      pulse2: appColors.value,
      label: 'Online',
      icon: <Icons.DriverLarge />,
    },
    offline: {
      outer: appColors.brightRed,
      inner: appColors.vividRed,
      pulse1: appColors.darkCrimson,
      pulse2: appColors.roseTint,
      label: 'Offline',
      icon: <Icons.DriverLarge />,
    },
    onride: {
      outer: '#0567D1',
      inner: '#026BDD',
      pulse1: '#B0CDEC',
      pulse2: '#DDE7F2',
      label: 'On-Ride',
      icon: <Icons.DriverLarge />,
    },
  }
  const statuses = ['online', 'offline', 'onride']

  // find the current status object
  const current = statusColors[status]

  // find the next status in the loop
  const currentIndex = statuses.indexOf(status)
  const nextIndex = (currentIndex + 1) % statuses.length
  const nextStatus = statuses[nextIndex]

  useEffect(() => {
    if (!taxidoSettingData || Object.keys(taxidoSettingData).length === 0) {
      dispatch(taxidosettingDataGet())
      dispatch(selfDriverData())
    }
  }, [taxidoSettingData])

  useFocusEffect(
    useCallback(() => {
      dispatch(rideDataGets())
      dispatch(vehicleData())
      dispatch(walletData())
      const unit = zoneValue?.distance_type
      const zoneId = zoneValue?.id
      const driver_id = ''
      dispatch(dashBoardData({ unit, zoneId, driver_id }))
      dispatch(fleetDriverList())
    }, []),
  )

  useEffect(() => {
    const zone_id = zoneValue?.id
    if (zone_id) {
      const intervalId = setInterval(() => {
        dispatch(rideRequestDataGet(zone_id))
      }, 5000)
      return () => clearInterval(intervalId)
    }
  }, [dispatch, zoneValue])

  useFocusEffect(
    useCallback(() => {
      const fetchOnlineStatus = async () => {
        if (!selfDriver?.id) {
          setIsOnline(false)
          return
        }

        if (selfDriver?.wallet_balance < 0) {
          notificationHelper('', translateData.lowBalance, 'error')
          setIsOnline(false)
          return
        }

        try {
          const driverRef = doc(db, 'driverTrack', selfDriver.id.toString())
          const snapshot = await getDoc(driverRef)

          if (snapshot.exists()) {
            const online = snapshot.data()?.is_online === '1'
            setIsOnline(online)

            if (online) {
              startLiveLocation(selfDriver.id, selfDriver)
            } else {
              stopLiveLocation()
            }
          } else {
            setIsOnline(false)
            stopLiveLocation()
          }
        } catch (error) {
          setIsOnline(false)
          stopLiveLocation()
        }
      }

      fetchOnlineStatus()
    }, [selfDriver?.id, selfDriver?.wallet_balance, translateData]),
  )

  const runOnlineAnimation = () => {
    setShowOnline(true)
    setTimeout(() => {
      setShowOnline(false)
      SetOn(false)
    }, 2000)
    Animated.loop(
      Animated.sequence([
        Animated.timing(scaleAnim, {
          toValue: 1.2,
          duration: 400,
          useNativeDriver: true,
        }),
        Animated.timing(scaleAnim, {
          toValue: 1,
          duration: 400,
          useNativeDriver: true,
        }),
      ]),
    ).start()
  }

  const toggleSwitch = (newStatus: 'online' | 'offline' | 'onride') => {
    runOnlineAnimation()
    setStatus(newStatus)
    SetOn?.(true)
  }

  const fetchTime = async () => {
    if (!selfDriver?.id) return
    const snap = await getDoc(doc(db, 'driverTrack', selfDriver.id.toString()))
    const seconds = snap?.data()?.total_online_time_today || 0
    setTotalOnlineSeconds(seconds)
  }
  const formatSecondsToHHMM = (totalSeconds: any) =>
    `${Math.floor(totalSeconds / 3600)
      .toString()
      .padStart(2, '0')}:${Math.floor((totalSeconds % 3600) / 60)
        .toString()
        .padStart(2, '0')}`

  const handleRefresh = () => { }

  const toggleHeader = () => {
    Vibration.vibrate(52)
    setViewMode(prev => (prev === 'amount' ? 'time' : 'amount'))
    fetchTime()
  }

  const handleFocusPress = () => {
    mapRef.current?.focusToCurrentLocation()
  }

  useEffect(() => {
    PushNotification.createChannel({
      channelId: 'ride-requests',
      channelName: 'Ride Requests',
      soundName: 'default',
      importance: 4,
      vibrate: true,
    })
  }, [])

  const timeoutRef = useRef<NodeJS.Timeout | null>(null)

  const stopNotificationSound: any = useCallback(() => {
    if (timeoutRef.current) clearTimeout(timeoutRef.current)
    timeoutRef.current = null

    if (soundInstanceRef.current) {
      soundInstanceRef.current.stop(() => {
        soundInstanceRef.current?.release()
        soundInstanceRef.current = null
      })
    }

    Vibration.cancel()
    isRingtonePlayingRef.current = false
  }, [])

  const scaleAnim = useRef(new Animated.Value(1)).current

  useEffect(() => {
    return () => stopNotificationSound()
  }, [stopNotificationSound])

  const bottomSheetVehicleRef = useRef<BottomSheetModal>(null)

  const [open, setOpen] = useState(false)

  const handleSheetChanges = () => {
    setOpen(false)
    bottomSheetVehicleRef.current?.close()
  }

  const handlePresentModalPress = () => {
    setOpen(true)
    bottomSheetVehicleRef.current?.present()
  }

  return (
    <View style={{ flex: 1 }}>
      <MapScreenFleet
        ref={mapRef}
        markerIcon={selfDriver?.vehicle_info?.vehicle_type_map_icon_url}
        selfDriver={selfDriver}
        zoneValue={zoneValue}
        driverIds={selfDriver?.driver_ids}
        status={status}
        selectedVehiclesId={selectedVehicles}
        latitude={currentLatitude}
        longitude={currentLongitude}
      />
      <Modal
        visible={noservice}
        transparent
        animationType="fade"
        onRequestClose={() => setNodervice(false)}
      >
        <View style={styles.modalOverlay}>
          <View style={styles.modalContent}>
            <Text style={styles.title}>Service Not Available</Text>
            <Text style={styles.message}>
              Sorry, this area is currently not serviceable.
            </Text>
            <TouchableOpacity
              style={styles.buttonModel}
              onPress={() => BackHandler.exitApp()}
            >
              <Text style={styles.buttonTextModel}>Exit</Text>
            </TouchableOpacity>
          </View>
        </View>
      </Modal>

      <View
        style={{
          flexDirection: rtl ? 'row-reverse' : 'row',
          justifyContent: 'space-between',
          alignItems: 'center',
          height: windowHeight(11),
          backgroundColor: isDark ? appColors.primaryFont : appColors.white,
          borderBottomEndRadius: windowWidth(5),
          borderBottomStartRadius: windowWidth(5),
          paddingHorizontal: windowWidth(4),
        }}
      >
        <View
          style={{
            flexDirection: rtl ? 'row-reverse' : 'row',
            alignItems: 'center',
            justifyContent: 'center',
            backgroundColor: isDark ? appColors.white : appColors.black,
            height: windowHeight(6),
            borderRadius: windowHeight(8.5),
            paddingHorizontal: windowWidth(5.3),
          }}
        >
          <TouchableOpacity
            onPress={() => toggleHeader()}
            activeOpacity={0.9}
            style={{
              flexDirection: rtl ? 'row-reverse' : 'row',
              alignItems: 'center',
              justifyContent: 'center',
              backgroundColor: isDark ? appColors.white : appColors.black,
              height: windowHeight(5.5),
              borderRadius: windowHeight(8.5),
            }}
          >
            {viewMode === 'time' ? (
              <Icons.Clock color={isDark ? appColors.black : appColors.white} />
            ) : (
              <TouchableOpacity
                onPress={e => {
                  e.stopPropagation()
                  setIsAmountVisible(prev => !prev)
                }}
              >
                {isAmountVisible ? (
                  <Icons.Eye
                    color={isDark ? appColors.black : appColors.white}
                  />
                ) : (
                  <Icons.WalletEyeClose
                    color={isDark ? appColors.black : appColors.white}
                  />
                )}
              </TouchableOpacity>
            )}

            <View
              style={{
                height: windowHeight(1.5),
                width: windowHeight(0.1),
                backgroundColor: isDark ? appColors.black : appColors.white,
                marginHorizontal: windowWidth(1.5),
              }}
            />

            <Text
              style={[
                styles.text,
                { color: isDark ? appColors.black : appColors.white },
              ]}
            >
              {viewMode === 'time'
                ? `${formatSecondsToHHMM(totalOnlineSeconds)} hrs`
                : isAmountVisible
                  ? TodayIncome
                  : maskedAmount}
            </Text>
          </TouchableOpacity>
        </View>

        <View
          style={{
            backgroundColor: isDark
              ? appColors.primaryFont
              : appColors.lightGray,
            width: windowWidth(28),
            height: windowHeight(6),
            borderRadius: windowWidth(25),
            flexDirection: viewRtlStyle,
            alignItems: 'center',
            paddingHorizontal: windowWidth(2.5),
          }}
        >
          <TouchableOpacity
            onPress={() => navigate('Notification')}
            activeOpacity={0.9}
            style={{
              height: windowHeight(4.5),
              width: windowHeight(4.5),
              backgroundColor: isDark
                ? appColors.darkThemeSub
                : appColors.white,
              borderRadius: windowHeight(15),
              alignItems: 'center',
              justifyContent: 'center',
              borderColor: isDark ? appColors.darkBorderBlack : appColors.white,
              borderWidth: 1,
            }}
          >
            <Icons.Notification
              color={isDark ? appColors.white : appColors.primaryFont}
            />
          </TouchableOpacity>
          <View
            style={{
              height: windowHeight(3),
              width: windowWidth(0.45),
              backgroundColor: isDark ? appColors.darkborder : appColors.border,
              marginHorizontal: windowWidth(2),
            }}
          />

          <TouchableOpacity
            activeOpacity={0.9}
            onPress={() => navigate('ProfileSetting')}
          >
            {selfDriver?.profile_image_url ? (
              <Image
                style={{
                  backgroundColor: appColors.primary,
                  height: windowHeight(4.5),
                  width: windowHeight(4.5),
                  borderRadius: windowHeight(5),
                }}
                source={{
                  uri: selfDriver?.profile_image_url,
                }}
              />
            ) : (
              <View
                style={{
                  alignItems: 'center',
                  justifyContent: 'center',
                  backgroundColor: isDark ? appColors.white : appColors.black,
                  height: windowHeight(4.5),
                  width: windowHeight(4.5),
                  borderRadius: windowHeight(5),
                }}
              >
                <Text
                  style={{
                    color: isDark ? appColors.black : appColors.white,
                    fontFamily: appFonts.bold,
                    fontSize: fontSizes.FONT5HALF,
                  }}
                >
                  {char}
                </Text>
              </View>
            )}
          </TouchableOpacity>
        </View>
      </View>
      <View
        style={[
          styles.box,
          {
            flexDirection: viewRtlStyle,
            backgroundColor: isDark ? appColors.primaryFont : appColors.white,
          },
        ]}
      >
        <TouchableOpacity
          style={[
            rtl ? styles.smallBox5 : styles.smallBox4,
            {
              backgroundColor:
                status === 'online'
                  ? appColors.online
                  : isDark
                    ? appColors.primaryFont
                    : appColors.white,
            },
          ]}
          onPress={() => toggleSwitch('online')}
          activeOpacity={0.7}
        >
          <Text
            style={[
              styles.status,
              {
                color:
                  status === 'online' ? appColors.white : appColors.iconColor,
              },
            ]}
          >
            {translateData?.online}
          </Text>
        </TouchableOpacity>

        <TouchableOpacity
          style={[
            styles.smallBox2,
            {
              backgroundColor:
                status === 'offline'
                  ? appColors.offline
                  : isDark
                    ? appColors.primaryFont
                    : appColors.white,
            },
          ]}
          onPress={() => toggleSwitch('offline')}
          activeOpacity={0.7}
        >
          <Text
            style={[
              styles.status,
              {
                color:
                  status === 'offline' ? appColors.white : appColors.iconColor,
              },
            ]}
          >
            {translateData?.homeOflineText}
          </Text>
        </TouchableOpacity>

        <TouchableOpacity
          style={[
            rtl ? styles.smallBox4 : styles.smallBox1,
            {
              backgroundColor:
                status === 'onride'
                  ? appColors.active
                  : isDark
                    ? appColors.primaryFont
                    : appColors.white,
            },
          ]}
          onPress={() => toggleSwitch('onride')}
          activeOpacity={0.7}
        >
          <Text
            style={[
              styles.status,
              {
                color:
                  status === 'onride' ? appColors.white : appColors.iconColor,
              },
            ]}
          >
            {translateData?.active}
          </Text>
        </TouchableOpacity>
      </View>

      {!open && (
        <TouchableOpacity
          activeOpacity={0.9}
          style={{
            height: windowHeight(6.8),
            width: windowHeight(6.8),
            backgroundColor: isDark ? appColors.primaryFont : appColors.white,
            borderRadius: windowHeight(6.8),
            alignItems: 'center',
            alignSelf: rtl ? 'flex-end' : 'flex-start',
            borderColor: isDark ? appColors.darkborder : appColors.loader,
            position: 'absolute',
            left: windowHeight(2),
            bottom: windowHeight(18),
            [rtl ? 'right' : 'left']: windowWidth(4),
            zIndex: 1,
            justifyContent: 'center',
            borderWidth: windowWidth(0.45),
          }}
          onPress={handlePresentModalPress}
        >
          <View
            style={{
              height: windowHeight(6.5),
              width: windowHeight(7),
              position: 'absolute',
              alignItems: 'center',
              justifyContent: 'center',
            }}
          >
            <Icons.Filter color={isDark ? appColors.white : appColors.black} />
          </View>
        </TouchableOpacity>
      )}

      {!open && (
        <>
          <View
            style={{
              position: 'absolute',
              left: windowHeight(2),
              height: windowHeight(7),
              bottom: windowHeight(10),
              [rtl ? 'right' : 'left']: windowWidth(4),
              zIndex: 1,
              justifyContent: 'center',
            }}
          >
            <TouchableOpacity
              onPress={handleRefresh}
              style={{
                height: windowHeight(7),
                width: windowHeight(7),
                borderRadius: windowHeight(4),
                backgroundColor: isDark
                  ? appColors.primaryFont
                  : appColors.white,
                borderColor: isDark ? appColors.darkborder : appColors.border,
                justifyContent: 'center',
                alignItems: 'center',
                borderWidth: windowHeight(0.15),
                alignSelf: 'flex-end',
              }}
            >
              <Icons.Refresh />
            </TouchableOpacity>
          </View>
        </>
      )}

      <TouchableOpacity
        onPress={handleFocusPress}
        style={{
          position: 'absolute',
          bottom: windowHeight(10),
          height: windowHeight(7),
          width: windowHeight(7),
          borderRadius: windowHeight(4),
          borderWidth: windowHeight(0.15),
          borderColor: isDark ? appColors.darkborder : appColors.border,
          backgroundColor: isDark ? appColors.primaryFont : appColors.white,
          justifyContent: 'center',
          alignItems: 'center',
          zIndex: 0,
          [rtl ? 'left' : 'right']: windowWidth(4),
        }}
      >
        <Icons.LocationIcon
          color={isDark ? appColors.white : appColors.primaryFont}
        />
      </TouchableOpacity>

      <BottomSheetModalProvider>
        <BottomSheetModal
          ref={bottomSheetVehicleRef}
          index={0}
          snapPoints={['70%', '55%']} // ✅ min 50%, max 55%
          onDismiss={handleSheetChanges}
          style={{ zIndex: 2 }}
          handleIndicatorStyle={{
            backgroundColor: appColors.primary,
            height: windowHeight(0.6),
            width: windowWidth(10),
            marginTop: windowHeight(0.2),
          }}
          backgroundStyle={{
            backgroundColor: isDark ? appColors.bgDark : appColors.white,
            borderRadius: windowWidth(5),
          }}
        >
          <BottomSheetView
            style={{
              flex: 1,
              paddingHorizontal: windowWidth(5),
              alignItems: 'center',
            }}
          >
            <View
              style={{
                backgroundColor: isDark
                  ? appColors.primaryFont
                  : appColors.white,
                borderRadius: windowWidth(5),
                width: '100%',
                borderWidth: windowWidth(0.45),
                borderColor: isDark ? appColors.darkborder : appColors.border,
                height: '49%',
              }}
            >
              <BottomSheetFlatList
                data={allVehicle}
                keyExtractor={item => item.id.toString()}
                renderItem={renderItem}
                showsVerticalScrollIndicator={true} // ✅ enable scroll
                contentContainerStyle={{ paddingBottom: windowHeight(2) }}
                ItemSeparatorComponent={() => (
                  <View
                    style={{ height: 1, backgroundColor: appColors.lightGray }}
                  />
                )}
              />
            </View>

            <View
              style={{
                flexDirection: 'row',
                justifyContent: 'space-between',
                padding: windowHeight(1.8),
                borderTopWidth: 1,
                borderTopColor: appColors.lightGray,
                width: '105%',
              }}
            >
              <TouchableOpacity
                onPress={handleSheetChanges}
                style={{
                  height: windowHeight(5.5),
                  width: '45%',
                  backgroundColor: isDark
                    ? appColors.bgDark
                    : appColors.lightGray,
                  borderRadius: windowWidth(25),
                  alignItems: 'center',
                  justifyContent: 'center',
                }}
              >
                <Text
                  style={{
                    color: isDark ? appColors.white : appColors.black,
                    fontFamily: appFonts.medium,
                  }}
                >
                  {translateData?.cancel}
                </Text>
              </TouchableOpacity>
              <TouchableOpacity
                onPress={handleSheetChanges}
                style={{
                  height: windowHeight(5.5),
                  width: '45%',
                  backgroundColor: isDark ? appColors.white : appColors.black,
                  borderRadius: windowWidth(25),
                  alignItems: 'center',
                  justifyContent: 'center',
                }}
              >
                <Text
                  style={{
                    color: isDark ? appColors.black : appColors.white,
                    fontFamily: appFonts.medium,
                  }}
                >
                  {translateData?.apply}
                </Text>
              </TouchableOpacity>
            </View>
          </BottomSheetView>
        </BottomSheetModal>
      </BottomSheetModalProvider>

      <BottomSheetModalProvider>
        <BottomSheet
          ref={bottomSheetRef}
          index={-1}
          snapPoints={snapPoints}
          enablePanDownToClose
          handleIndicatorStyle={{
            backgroundColor: appColors.primary,
            width: '13%',
          }}
          backgroundStyle={{
            backgroundColor: isDark ? appColors.bgDark : appColors.white,
          }}
        >
          <View style={{ padding: 20 }}>
            <Text style={{ fontSize: 18, fontWeight: '600', marginBottom: 10 }}>
              {translateData.exitMsg}
            </Text>
            <TouchableOpacity
              onPress={handleExit}
              style={{ marginVertical: 10 }}
            >
              <Text style={{ color: 'red', fontSize: 16 }}>
                {translateData.exit}
              </Text>
            </TouchableOpacity>
            <TouchableOpacity
              onPress={handleCloseSheet}
              style={{ marginVertical: 10 }}
            >
              <Text style={{ fontSize: 16 }}>{translateData.cancel}</Text>
            </TouchableOpacity>
          </View>
        </BottomSheet>
      </BottomSheetModalProvider>
    </View>
  )
}
