import * as Location from 'expo-location';

// Перевірити поточний статус
const { status } = await Location.getForegroundPermissionsAsync();

// Запитати дозвіл (показує системний діалог)
const { status: newStatus } = await Location.requestForegroundPermissionsAsync();

if (newStatus !== 'granted') {
  // Обробляємо відмову
}

const { status } = await Location.requestBackgroundPermissionsAsync();

const location = await Location.getCurrentPositionAsync({
  accuracy: Location.Accuracy.High,
});

console.log(location.coords.latitude, location.coords.longitude);

const subscription = await Location.watchPositionAsync(
  {
    accuracy: Location.Accuracy.High,
    timeInterval: 5000,   // мінімальний інтервал між оновленнями (мс)
    distanceInterval: 10, // мінімальна відстань для нового оновлення (м)
  },
  (location) => {
    console.log('Нова позиція:', location.coords);
  }
);

// Обов'язково відписуємось при розмонтуванні компонента:
// subscription.remove();

import MapView from 'react-native-maps';
import { StyleSheet } from 'react-native';

export default function MapScreen() {
  return (
    <MapView
      style={styles.map}
      initialRegion={{
        latitude: 50.4501,    // Київ
        longitude: 30.5234,
        latitudeDelta: 0.05,  // "zoom" по вертикалі
        longitudeDelta: 0.05, // "zoom" по горизонталі
      }}
    />
  );
}

const styles = StyleSheet.create({
  map: {
    flex: 1, // займає весь екран
  },
});

import MapView, { Region } from 'react-native-maps';
import { useRef } from 'react';

const mapRef = useRef<MapView>(null);

// Анімований перехід до Львова:
const goToLviv = () => {
  mapRef.current?.animateToRegion(
    {
      latitude: 49.8397,
      longitude: 24.0297,
      latitudeDelta: 0.05,
      longitudeDelta: 0.05,
    },
    1000 // тривалість анімації у мс
  );
};

// У JSX:
<MapView ref={mapRef} ... />

mapRef.current?.animateCamera({
  center: { latitude: 49.8397, longitude: 24.0297 },
  zoom: 14,   // тільки Android
  pitch: 45,  // кут нахилу (3D вид)
  heading: 90, // поворот (0 = північ)
  altitude: 1000, // висота камери (iOS)
}, { duration: 1000 });

import MapView, { Marker } from 'react-native-maps';

<MapView style={{ flex: 1 }} initialRegion={...}>
  <Marker
    coordinate={{ latitude: 50.4501, longitude: 30.5234 }}
    title="Київ"
    description="Столиця України"
  />
</MapView>

import { View, Text, StyleSheet } from 'react-native';
import { Marker } from 'react-native-maps';

function CustomMarker({ label, color }: { label: string; color: string }) {
  return (
    <Marker
      coordinate={{ latitude: 50.4501, longitude: 30.5234 }}
      tracksViewChanges={false} // важливо для статичних маркерів!
    >
      <View style={[styles.marker, { backgroundColor: color }]}>
        <Text style={styles.label}>{label}</Text>
      </View>
    </Marker>
  );
}

const styles = StyleSheet.create({
  marker: {
    paddingHorizontal: 10,
    paddingVertical: 6,
    borderRadius: 20,
    alignItems: 'center',
  },
  label: {
    color: 'white',
    fontWeight: '700',
    fontSize: 13,
  },
});

import { Callout } from 'react-native-maps';

<Marker coordinate={...}>
  <Callout tooltip>
    <View style={styles.callout}>
      <Text style={styles.calloutTitle}>🏨 Готель «Дніпро»</Text>
      <Text style={styles.calloutRating}>⭐ 4.5 · 128 відгуків</Text>
      <Text style={styles.calloutPrice}>від 1800 грн/ніч</Text>
    </View>
  </Callout>
</Marker>

import { Polyline } from 'react-native-maps';

<Polyline
  coordinates={[
    { latitude: 50.4501, longitude: 30.5234 }, // Київ
    { latitude: 49.8397, longitude: 24.0297 }, // Львів
    { latitude: 48.9226, longitude: 24.7111 }, // Івано-Франківськ
  ]}
  strokeColor="#3B82F6"
  strokeWidth={4}
  lineDashPattern={[10, 5]} // штрихова лінія: 10px лінія, 5px пауза
/>

import { Circle } from 'react-native-maps';

<Circle
  center={{ latitude: 50.4501, longitude: 30.5234 }}
  radius={500}           // радіус у метрах
  fillColor="rgba(59, 130, 246, 0.2)"   // напівпрозоре заповнення
  strokeColor="rgba(59, 130, 246, 0.8)" // рамка
  strokeWidth={2}
/>

// Після отримання location:
<Circle
  center={{ latitude: location.coords.latitude, longitude: location.coords.longitude }}
  radius={location.coords.accuracy ?? 50}
  fillColor="rgba(59, 130, 246, 0.1)"
  strokeColor="rgba(59, 130, 246, 0.5)"
  strokeWidth={1}
/>

// components/LocationPermissionRequest.tsx
import { View, Text, Pressable, StyleSheet } from 'react-native';

interface Props {
  onRequest: () => void;
}

export function LocationPermissionRequest({ onRequest }: Props) {
  return (
    <View style={styles.container}>
      <Text style={styles.icon}>📍</Text>
      <Text style={styles.title}>Де ви знаходитесь?</Text>
      <Text style={styles.description}>
        Застосунок використовує ваше місцезнаходження, щоб показати
        найближчі місця та відстань до них. Ми не зберігаємо і не
        передаємо ваші координати третім особам.
      </Text>
      <Pressable style={styles.button} onPress={onRequest}>
        <Text style={styles.buttonText}>Дозволити доступ</Text>
      </Pressable>
    </View>
  );
}

import { Linking } from 'react-native';

export function LocationDenied() {
  const openSettings = () => {
    Linking.openSettings(); // відкриває системні налаштування застосунку
  };

  return (
    <View style={styles.container}>
      <Text style={styles.icon}>🔒</Text>
      <Text style={styles.title}>Доступ до геолокації заблоковано</Text>
      <Text style={styles.description}>
        Щоб бачити свою позицію на карті, дозвольте доступ до геолокації
        у налаштуваннях пристрою: Налаштування → Застосунки →
        [Назва застосунку] → Геолокація.
      </Text>
      <Pressable style={styles.button} onPress={openSettings}>
        <Text style={styles.buttonText}>Відкрити Налаштування</Text>
      </Pressable>
    </View>
  );
}

// hooks/useLocationPermission.ts
import { useState, useEffect } from 'react';
import * as Location from 'expo-location';

type PermissionState = 'loading' | 'undetermined' | 'granted' | 'denied' | 'limited';

export function useLocationPermission() {
  const [status, setStatus] = useState<PermissionState>('loading');

  useEffect(() => {
    checkPermission();
  }, []);

  const checkPermission = async () => {
    const { status } = await Location.getForegroundPermissionsAsync();
    setStatus(status as PermissionState);
  };

  const requestPermission = async () => {
    setStatus('loading');
    const { status } = await Location.requestForegroundPermissionsAsync();
    setStatus(status as PermissionState);
    return status === 'granted';
  };

  return { status, requestPermission, recheckPermission: checkPermission };
}

import { useLocationPermission } from '@/hooks/useLocationPermission';
import { LocationPermissionRequest } from '@/components/LocationPermissionRequest';
import { LocationDenied } from '@/components/LocationDenied';

export default function MapScreen() {
  const { status, requestPermission } = useLocationPermission();

  if (status === 'loading') return <LoadingScreen />;
  if (status === 'undetermined') {
    return <LocationPermissionRequest onRequest={requestPermission} />;
  }
  if (status === 'denied') return <LocationDenied />;

  return <MapContent />;
}

import { useEffect } from 'react';
import { AppState } from 'react-native';

useEffect(() => {
  const subscription = AppState.addEventListener('change', (nextState) => {
    if (nextState === 'active') {
      // Застосунок повернувся на передній план — перевіряємо дозвіл
      recheckPermission();
    }
  });

  return () => subscription.remove();
}, [recheckPermission]);

import * as Location from 'expo-location';

const reverseGeocode = async (latitude: number, longitude: number) => {
  const results = await Location.reverseGeocodeAsync({ latitude, longitude });

  if (results.length > 0) {
    const place = results[0];
    console.log(place);
    // {
    //   city: 'Київ',
    //   country: 'Україна',
    //   district: 'Печерський район',
    //   isoCountryCode: 'UA',
    //   name: 'Хрещатик',  // назва вулиці або місця
    //   postalCode: '01001',
    //   region: 'місто Київ',
    //   street: 'вулиця Хрещатик',
    //   streetNumber: '1',
    //   subregion: 'Печерський район',
    //   timezone: 'Europe/Kiev',
    // }
  }
};

const geocode = async (address: string) => {
  const results = await Location.geocodeAsync(address);

  if (results.length > 0) {
    const { latitude, longitude, accuracy } = results[0];
    console.log({ latitude, longitude, accuracy });
  }
};

// Використання:
await geocode('Майдан Незалежності, Київ');
// { latitude: 50.4501, longitude: 30.5234, accuracy: ... }

import { useState, useEffect } from 'react';
import * as Location from 'expo-location';

function useCurrentAddress(location: Location.LocationObject | null) {
  const [address, setAddress] = useState<string>('Визначення адреси...');

  useEffect(() => {
    if (!location) return;

    const { latitude, longitude } = location.coords;
    Location.reverseGeocodeAsync({ latitude, longitude })
      .then((results) => {
        if (results[0]) {
          const { street, streetNumber, city } = results[0];
          const parts = [streetNumber, street, city].filter(Boolean);
          setAddress(parts.join(', '));
        }
      })
      .catch(() => setAddress('Адреса недоступна'));
  }, [location]);

  return address;
}

// hooks/useCurrentLocation.ts
import { useState, useEffect, useRef } from 'react';
import * as Location from 'expo-location';

interface LocationState {
  location: Location.LocationObject | null;
  error: string | null;
  loading: boolean;
}

export function useCurrentLocation(watch = false) {
  const [state, setState] = useState<LocationState>({
    location: null,
    error: null,
    loading: true,
  });

  const subscriptionRef = useRef<Location.LocationSubscription | null>(null);

  useEffect(() => {
    let mounted = true;

    const startLocation = async () => {
      const { status } = await Location.getForegroundPermissionsAsync();
      if (status !== 'granted') {
        if (mounted) {
          setState({ location: null, error: 'Дозвіл не надано', loading: false });
        }
        return;
      }

      if (watch) {
        // Підписуємось на оновлення
        const sub = await Location.watchPositionAsync(
          { accuracy: Location.Accuracy.High, distanceInterval: 5 },
          (loc) => {
            if (mounted) {
              setState({ location: loc, error: null, loading: false });
            }
          }
        );
        subscriptionRef.current = sub;
      } else {
        // Одноразове отримання
        const loc = await Location.getCurrentPositionAsync({
          accuracy: Location.Accuracy.High,
        });
        if (mounted) {
          setState({ location: loc, error: null, loading: false });
        }
      }
    };

    startLocation().catch((err) => {
      if (mounted) {
        setState({ location: null, error: err.message, loading: false });
      }
    });

    return () => {
      mounted = false;
      subscriptionRef.current?.remove();
    };
  }, [watch]);

  return state;
}

npx expo install react-native-maps-super-cluster
# або
npm install react-native-maps-super-cluster

import ClusteredMapView from 'react-native-maps-super-cluster';
import { Marker } from 'react-native-maps';

const data = places.map((place) => ({
  ...place,
  location: {
    latitude: place.latitude,
    longitude: place.longitude,
  },
}));

export function ClusteredMap() {
  return (
    <ClusteredMapView
      style={{ flex: 1 }}
      data={data}
      initialRegion={initialRegion}
      renderMarker={(item) => (
        <Marker
          key={item.id}
          coordinate={item.location}
          title={item.name}
          tracksViewChanges={false}
        />
      )}
      renderCluster={(cluster, onPress) => (
        <Marker
          coordinate={cluster.coordinate}
          onPress={onPress}
        >
          <View style={styles.cluster}>
            <Text style={styles.clusterText}>{cluster.pointCount}</Text>
          </View>
        </Marker>
      )}
    />
  );
}

const [trackChanges, setTrackChanges] = useState(true);

const handleImageLoad = () => {
  // Зображення завантажилось — більше не відстежуємо
  setTrackChanges(false);
};

<Marker tracksViewChanges={trackChanges}>
  <Image onLoad={handleImageLoad} source={...} />
</Marker>

const MemoizedMarker = React.memo(({ place }: { place: Place }) => (
  <Marker
    coordinate={{ latitude: place.lat, longitude: place.lng }}
    title={place.name}
    tracksViewChanges={false}
  />
));

// У компоненті карти:
const markers = useMemo(
  () => places.map((place) => <MemoizedMarker key={place.id} place={place} />),
  [places]
);

<MapView ...>{markers}</MapView>

// components/map/UserLocationMarker.tsx
import { View, StyleSheet } from 'react-native';
import { Marker, Circle } from 'react-native-maps';
import * as Location from 'expo-location';

interface Props {
  location: Location.LocationObject;
}

export function UserLocationMarker({ location }: Props) {
  const { latitude, longitude, accuracy } = location.coords;
  const coordinate = { latitude, longitude };

  return (
    <>
      {/* Коло точності */}
      <Circle
        center={coordinate}
        radius={accuracy ?? 20}
        fillColor="rgba(59, 130, 246, 0.1)"
        strokeColor="rgba(59, 130, 246, 0.4)"
        strokeWidth={1}
      />

      {/* Маркер позиції */}
      <Marker coordinate={coordinate} tracksViewChanges={false} anchor={{ x: 0.5, y: 0.5 }}>
        <View style={styles.outerRing}>
          <View style={styles.innerDot} />
        </View>
      </Marker>
    </>
  );
}

const styles = StyleSheet.create({
  outerRing: {
    width: 24,
    height: 24,
    borderRadius: 12,
    backgroundColor: 'rgba(59, 130, 246, 0.3)',
    borderWidth: 2,
    borderColor: '#3B82F6',
    alignItems: 'center',
    justifyContent: 'center',
  },
  innerDot: {
    width: 10,
    height: 10,
    borderRadius: 5,
    backgroundColor: '#3B82F6',
  },
});

// app/(tabs)/map.tsx
import { useState, useRef, useCallback } from 'react';
import { View, StyleSheet, AppState } from 'react-native';
import MapView, { MapPressEvent, Region } from 'react-native-maps';
import * as Location from 'expo-location';

import { useLocationPermission } from '@/hooks/useLocationPermission';
import { useCurrentLocation } from '@/hooks/useCurrentLocation';
import { LocationPermissionRequest } from '@/components/map/LocationPermissionRequest';
import { LocationDenied } from '@/components/map/LocationDenied';
import { UserLocationMarker } from '@/components/map/UserLocationMarker';
import { PinMarker } from '@/components/map/PinMarker';

const KYIV_REGION: Region = {
  latitude: 50.4501,
  longitude: 30.5234,
  latitudeDelta: 0.05,
  longitudeDelta: 0.05,
};

interface Pin {
  id: string;
  coordinate: { latitude: number; longitude: number };
}

export default function MapScreen() {
  const mapRef = useRef<MapView>(null);
  const [pins, setPins] = useState<Pin[]>([]);
  const { status, requestPermission, recheckPermission } = useLocationPermission();
  const { location, loading } = useCurrentLocation();

  // Повторна перевірка при поверненні з Налаштувань
  useEffect(() => {
    const sub = AppState.addEventListener('change', (state) => {
      if (state === 'active') recheckPermission();
    });
    return () => sub.remove();
  }, [recheckPermission]);

  // Центруємо карту коли з'являються координати
  useEffect(() => {
    if (location && mapRef.current) {
      mapRef.current.animateToRegion({
        latitude: location.coords.latitude,
        longitude: location.coords.longitude,
        latitudeDelta: 0.01,
        longitudeDelta: 0.01,
      }, 800);
    }
  }, [location]);

  const handleMapPress = useCallback((event: MapPressEvent) => {
    const { coordinate } = event.nativeEvent;
    setPins((prev) => [
      ...prev,
      { id: Date.now().toString(), coordinate },
    ]);
  }, []);

  const removePin = useCallback((id: string) => {
    setPins((prev) => prev.filter((p) => p.id !== id));
  }, []);

  // Рендер залежно від статусу дозволу
  if (status === 'loading') return <View style={styles.container} />;
  if (status === 'undetermined') {
    return <LocationPermissionRequest onRequest={requestPermission} />;
  }
  if (status === 'denied') return <LocationDenied />;

  return (
    <View style={styles.container}>
      <MapView
        ref={mapRef}
        style={styles.map}
        initialRegion={KYIV_REGION}
        onPress={handleMapPress}
        showsCompass
        showsScale
      >
        {/* Маркер поточного місця */}
        {location && <UserLocationMarker location={location} />}

        {/* Кастомні піни */}
        {pins.map((pin) => (
          <PinMarker
            key={pin.id}
            coordinate={pin.coordinate}
            onRemove={() => removePin(pin.id)}
          />
        ))}
      </MapView>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1 },
  map: { flex: 1 },
});

// components/map/PinMarker.tsx
import { View, Text, Pressable, StyleSheet } from 'react-native';
import { Marker, Callout } from 'react-native-maps';

interface Props {
  coordinate: { latitude: number; longitude: number };
  onRemove: () => void;
}

export function PinMarker({ coordinate, onRemove }: Props) {
  return (
    <Marker coordinate={coordinate} tracksViewChanges={false} anchor={{ x: 0.5, y: 1.0 }}>
      {/* Кастомна зірочка */}
      <View style={styles.pin}>
        <Text style={styles.star}>⭐</Text>
      </View>

      {/* Callout з кнопкою видалення */}
      <Callout tooltip onPress={onRemove}>
        <View style={styles.callout}>
          <Text style={styles.calloutText}>Моя точка</Text>
          <Text style={styles.calloutDelete}>🗑 Видалити</Text>
        </View>
      </Callout>
    </Marker>
  );
}

const styles = StyleSheet.create({
  pin: {
    width: 36,
    height: 36,
    borderRadius: 18,
    backgroundColor: 'white',
    alignItems: 'center',
    justifyContent: 'center',
    shadowColor: '#000',
    shadowOpacity: 0.2,
    shadowRadius: 4,
    shadowOffset: { width: 0, height: 2 },
    elevation: 4,
  },
  star: { fontSize: 20 },
  callout: {
    backgroundColor: 'white',
    borderRadius: 12,
    padding: 12,
    minWidth: 140,
    alignItems: 'center',
    shadowColor: '#000',
    shadowOpacity: 0.15,
    shadowRadius: 8,
    elevation: 5,
  },
  calloutText: { fontWeight: '600', fontSize: 14, marginBottom: 6 },
  calloutDelete: { color: '#EF4444', fontSize: 13 },
});

// Фрагмент інтеграції у MapScreen Nomad:
const { data: places } = placesApi.useGetPlacesQuery(tripId);

// У JSX:
{places?.map((place) => (
  <Marker
    key={place.id}
    coordinate={{ latitude: place.latitude, longitude: place.longitude }}
    title={place.name}
    tracksViewChanges={false}
  >
    <CategoryMarker category={place.category} />
  </Marker>
))}