import React, { useEffect, useRef, useState } from 'react';
import { StyleSheet, View, Platform } from 'react-native';
import * as Location from 'expo-location';
import * as MapLibreRN from '@maplibre/maplibre-react-native';
import { SheetManager, useSheetRouteParams, useSheetRouter } from 'react-native-actions-sheet';
import { Colors } from 'src/theme';
import { VECTOR_MAP_HOST } from 'src/constants';
import { ButtonVariants } from 'src/types/components';
import { Button } from 'src/components';

const RouteB = () => {
  const router = useSheetRouter('chat-attachments');
  const params = useSheetRouteParams('chat-attachments', 'route-b');
  const {
    onSendLocation,
    insetsBottom
  }: {
    onSendLocation: (coords: { latitude: number; longitude: number }) => void;
    insetsBottom: number;
  } = params;

  const [currentLocation, setCurrentLocation] = useState<{
    latitude: number;
    longitude: number;
  } | null>(null);
  const [selectedLocation, setSelectedLocation] = useState<{
    latitude: number;
    longitude: number;
  } | null>(null);
  const [loading, setLoading] = useState(true);
  const cameraRef = useRef<MapLibreRN.CameraRef | null>(null);
  const [mapDimensions, setMapDimensions] = useState({ width: 0, height: 0, x: 0, y: 0 });

  const [renderCamera, setRenderCamera] = useState(Platform.OS === 'ios');
  const animationTimeoutRef = useRef<NodeJS.Timeout | null>(null);
  const isAnimatingRef = useRef(false);

  const cameraController = {
    setCamera: (config: any) => {
      isAnimatingRef.current = true;

      if (animationTimeoutRef.current) {
        clearTimeout(animationTimeoutRef.current);
      }

      if (Platform.OS === 'android') {
        setRenderCamera(true);
        requestAnimationFrame(() => {
          cameraRef.current?.setCamera(config);
        });

        animationTimeoutRef.current = setTimeout(
          () => {
            isAnimatingRef.current = false;
            setRenderCamera(false);
          },
          (config.animationDuration || 1000) + 200
        );
      } else {
        cameraRef.current?.setCamera(config);
        animationTimeoutRef.current = setTimeout(
          () => {
            isAnimatingRef.current = false;
          },
          (config.animationDuration || 1000) + 100
        );
      }
    }
  };

  useEffect(() => {
    const getLocation = async () => {
      try {
        const { status } = await Location.requestForegroundPermissionsAsync();
        if (status !== 'granted') {
          return;
        }

        const location = await Location.getCurrentPositionAsync({
          accuracy: Location.Accuracy.Balanced
        });
        const coords = {
          latitude: location.coords.latitude,
          longitude: location.coords.longitude
        };
        setCurrentLocation(coords);
        setSelectedLocation(coords);
      } catch (err) {
        console.warn('Error fetching location:', err);
      }
    };

    getLocation();
  }, []);

  useEffect(() => {
    if (currentLocation) {
      const timeoutId = setTimeout(() => {
        if (cameraRef.current) {
          cameraController.setCamera({
            centerCoordinate: [currentLocation.longitude, currentLocation.latitude],
            zoomLevel: 14,
            animationDuration: 500
          });
          setLoading(false);
        } else {
          console.warn('Camera ref is not available.');
          setLoading(false);
        }
      }, 500);

      return () => clearTimeout(timeoutId);
    }
  }, [currentLocation]);

  useEffect(() => {
    return () => {
      if (animationTimeoutRef.current) {
        clearTimeout(animationTimeoutRef.current);
      }
    };
  }, []);

  const confirmLocation = () => {
    if (selectedLocation) {
      onSendLocation(selectedLocation);
    }
    SheetManager.hide('location-picker');
    SheetManager.hide('chat-attachments');
  };

  const sendCurrentLocation = () => {
    if (currentLocation) {
      onSendLocation(currentLocation);
    }
    SheetManager.hide('location-picker');
    SheetManager.hide('chat-attachments');
  };

  const handleRegionChange = (event: any) => {
    const { geometry } = event;
    if (geometry) {
      const [longitude, latitude] = geometry.coordinates;
      setSelectedLocation({ latitude, longitude });
    }
  };

  return (
    <View style={[styles.container, { paddingBottom: 8 + insetsBottom }]}>
      <View
        style={styles.mapContainer}
        onLayout={(event) => {
          const { x, y, width, height } = event.nativeEvent.layout;
          setMapDimensions({ x, y, width, height });
        }}
      >
        <MapLibreRN.MapView
          style={{ flex: 1 }}
          mapStyle={VECTOR_MAP_HOST + '/nomadmania-maps2025.json'}
          compassEnabled={false}
          rotateEnabled={false}
          attributionEnabled={false}
          onRegionDidChange={handleRegionChange}
        >
          {(Platform.OS === 'ios' || renderCamera) && <MapLibreRN.Camera ref={cameraRef} />}

          {currentLocation && (
            <MapLibreRN.PointAnnotation
              id="currentLocation"
              coordinate={[currentLocation.longitude, currentLocation.latitude]}
            >
              <View style={styles.currentLocationMarker} />
            </MapLibreRN.PointAnnotation>
          )}
        </MapLibreRN.MapView>
      </View>

      <View
        style={[
          styles.centerMarker,
          { left: mapDimensions.width / 2 - 12, top: mapDimensions.height / 2 - 12 }
        ]}
      >
        <View style={styles.selectedLocationMarker} />
      </View>

      <View style={styles.mapActions}>
        <Button
          children="Send current location"
          onPress={sendCurrentLocation}
          variant={ButtonVariants.FILL}
          disabled={loading}
        />
        <Button
          children="Send selected location"
          onPress={confirmLocation}
          variant={ButtonVariants.OPACITY}
          containerStyles={{ backgroundColor: Colors.DARK_BLUE, borderColor: Colors.DARK_BLUE }}
          textStyles={{ color: Colors.WHITE }}
        />
        <Button
          children="Close"
          onPress={() => router?.goBack()}
          variant={ButtonVariants.OPACITY}
          containerStyles={{ backgroundColor: Colors.WHITE, borderColor: '#B7C6CB' }}
          textStyles={{ color: Colors.DARK_BLUE }}
        />
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    backgroundColor: Colors.FILL_LIGHT,
    minHeight: 600,
    gap: 16
  },
  mapContainer: { flex: 1 },
  mapActions: {
    flexDirection: 'column',
    gap: 8,
    paddingHorizontal: 16
  },
  currentLocationMarker: {
    width: 20,
    height: 20,
    backgroundColor: Colors.ORANGE,
    borderRadius: 10,
    borderWidth: 2,
    borderColor: Colors.WHITE
  },
  selectedLocationMarker: {
    width: 24,
    height: 24,
    backgroundColor: Colors.DARK_BLUE,
    borderRadius: 12,
    borderWidth: 2,
    borderColor: Colors.WHITE
  },
  centerMarker: {
    position: 'absolute',
    zIndex: 1000
  }
});

export default RouteB;
