import React, { memo, useCallback } from 'react';
import { Animated, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import { Feather } from '@expo/vector-icons';
import MapView, { Circle, Marker } from 'react-native-maps';
import { G, R } from '../../constants/visits.theme';
import { UserPosition, VisitListing, VisitRegion } from '../../types/visits.types';

const UserMarker = ({ heading = 0 }: { heading: number }) => (
  <View style={[styles.userContainer, { transform: [{ rotate: `${heading}deg` }] }]}>
    <View style={styles.arrow} />
    <View style={styles.dot} />
  </View>
);

type VisitMapProps = {
  fadeAnim: Animated.Value;
  listingRegion?: VisitRegion;
  listing: VisitListing;
  userPos: UserPosition | null;
  mapRef: React.RefObject<MapView | null>;
};

const VisitMap = ({
  fadeAnim,
  listingRegion,
  listing,
  userPos,
  mapRef,
}: VisitMapProps) => {
  const focusOnUser = useCallback(() => {
    if (!mapRef?.current || !userPos) return;

    mapRef.current.animateToRegion(
      {
        latitude: userPos.latitude,
        longitude: userPos.longitude,
        latitudeDelta: 0.003,
        longitudeDelta: 0.003,
      },
      400
    );
  }, [mapRef, userPos]);

  return (
    <Animated.View style={[styles.mapWrapper, { opacity: fadeAnim }]}>
      {listingRegion && (
        <View style={{ flex: 1 }}>
          <MapView
            ref={mapRef}
            style={{ flex: 1 }}
            initialRegion={listingRegion}
            showsUserLocation={false}
          >
            {listing?.latitude && listing?.longitude && (
              <Marker
                coordinate={{
                  latitude: listing.latitude,
                  longitude: listing.longitude,
                }}
              />
            )}

            {userPos?.latitude && userPos?.longitude && (
              <>
                <Marker coordinate={userPos} anchor={{ x: 0.5, y: 0.5 }} flat>
                  <UserMarker heading={userPos.heading || 0} />
                </Marker>

                <Circle
                  center={userPos}
                  radius={100}
                  strokeWidth={2}
                  strokeColor="rgba(26,115,232,0.8)"
                  fillColor="rgba(26,115,232,0.2)"
                />
              </>
            )}
          </MapView>

          <TouchableOpacity
            activeOpacity={0.7}
            style={styles.locationButton}
            onPress={focusOnUser}
          >
            <Feather name="crosshair" size={20} color={G.primary} />
          </TouchableOpacity>
        </View>
      )}
    </Animated.View>
  );
};

export default memo(VisitMap);

const styles = StyleSheet.create({
  mapWrapper: {
    height: 260,
    borderRadius: R.lg,
    overflow: 'hidden',
    borderWidth: 1,
    borderColor: G.outline,
    marginTop: 20,
  },
  userContainer: {
    alignItems: 'center',
    justifyContent: 'center',
  },
  dot: {
    width: 14,
    height: 14,
    borderRadius: 7,
    backgroundColor: G.primary,
  },
  arrow: {
    width: 0,
    height: 0,
    borderLeftWidth: 5,
    borderRightWidth: 5,
    borderBottomWidth: 10,
    borderLeftColor: 'transparent',
    borderRightColor: 'transparent',
    borderBottomColor: G.primary,
    marginBottom: 2,
  },
  locationButton: {
    position: 'absolute',
    bottom: 12,
    right: 12,
    width: 44,
    height: 44,
    borderRadius: 22,
    backgroundColor: G.surface,
    alignItems: 'center',
    justifyContent: 'center',
    elevation: 4,
  },
  locationButtonText: {
    fontSize: 22,
    color: G.primary,
    fontWeight: '600',
  },
});