import React from 'react';
import { View, Text } from 'react-native';
import MapView, { Marker, Polyline, PROVIDER_DEFAULT } from 'react-native-maps';
import { useAppTheme } from '@theme';
import { Coordinates } from '@app-types/index';
import { getStyles } from './mapView.styles';

interface MapViewComponentProps {
  origin?: Coordinates;
  destination?: Coordinates;
  currentLocation?: Coordinates;
  showRoute?: boolean;
  style?: any;
}

export const MapViewComponent: React.FC<MapViewComponentProps> = ({
  origin,
  destination,
  currentLocation,
  showRoute = false,
  style,
}) => {
  const { colors } = useAppTheme();
  const styles = getStyles(colors);

  const defaultRegion = {
    latitude: currentLocation?.latitude || origin?.latitude || 12.9716,
    longitude: currentLocation?.longitude || origin?.longitude || 77.5946,
    latitudeDelta: 0.05,
    longitudeDelta: 0.05,
  };

  return (
    <View style={[styles.container, style]}>
      <MapView
        provider={PROVIDER_DEFAULT}
        style={styles.map}
        initialRegion={defaultRegion}
        showsUserLocation={true}
        loadingEnabled={true}
      >
        {currentLocation && (
          <Marker
            coordinate={currentLocation}
            title="Your Location"
            pinColor={colors.primary}
          />
        )}
        {origin && (
          <Marker
            coordinate={origin}
            title="Pickup Location"
            pinColor={colors.statusOffline}
          />
        )}
        {destination && (
          <Marker
            coordinate={destination}
            title="Drop Location"
            pinColor={colors.statusOnline}
          />
        )}
        {showRoute && origin && destination && (
          <Polyline
            coordinates={[origin, destination]}
            strokeColor={colors.primary}
            strokeWidth={4}
          />
        )}
      </MapView>
      <View style={styles.mockOverlay}>
        <Text style={styles.mockText}>📍 Live Navigation Map Active</Text>
      </View>
    </View>
  );
};
export default MapViewComponent;