// frontend/src/KGMap/KyrgyzstanMap.jsx

import React, { useRef, useEffect, useState } from 'react';
import mapboxgl from 'mapbox-gl';
import './KyrgyzstanMap.scss';
import 'mapbox-gl/dist/mapbox-gl.css';
import Header from '../Header/Header'; // Импортируем Header
import Button from '../Button/Button'; // Импортируем Button для возможных кнопок

// Замените на ваш реальный токен доступа Mapbox
mapboxgl.accessToken = process.env.REACT_APP_MAPBOX_ACCESS_TOKEN;

const KyrgyzstanMap = ({ user }) => {
  const mapContainer = useRef(null);
  const map = useRef(null);

  // Состояния для управления картой
  const [mapLoaded, setMapLoaded] = useState(false);
  const [selectedFeature, setSelectedFeature] = useState(null);
  const [hoveredFeature, setHoveredFeature] = useState(null);
  const [layersVisibility, setLayersVisibility] = useState({
    'admin_boundaries-fill': true,
    'admin_boundaries-outline': true,
    'mountains': true,
    'rivers': true,
    'waterbodies-fill': true,
    'cities-symbol': true,
  });

  useEffect(() => {
    if (map.current) return; // Инициализируем карту только один раз

    // Инициализация карты, центрированной на Кыргызстане
    map.current = new mapboxgl.Map({
      container: mapContainer.current,
      style: 'mapbox://styles/mapbox/streets-v12', // Выберите предпочтительный стиль
      center: [74.7661, 41.2044], // Координаты Бишкека
      zoom: 7,
    });

    // Добавление навигационных контролей
    map.current.addControl(new mapboxgl.NavigationControl());

    // Обработка события загрузки карты
    map.current.on('load', () => {
      // Загрузка GeoJSON источников
      const layers = ['admin_boundaries', 'mountains', 'rivers', 'waterbodies', 'cities'];

      layers.forEach(layer => {
        map.current.addSource(layer, {
          type: 'geojson',
          data: `/geo/${layer}`, // Убедитесь, что эти эндпоинты обслуживают правильные GeoJSON данные
        });
      });

      // Добавление слоев с конкретными стилями

      // Административные границы
      map.current.addLayer({
        id: 'admin_boundaries-fill',
        type: 'fill',
        source: 'admin_boundaries',
        paint: {
          'fill-color': '#627BC1',
          'fill-opacity': 0.1,
        },
      });

      map.current.addLayer({
        id: 'admin_boundaries-outline',
        type: 'line',
        source: 'admin_boundaries',
        paint: {
          'line-color': '#627BC1',
          'line-width': 2,
        },
      });

      // Горы
      map.current.addLayer({
        id: 'mountains',
        type: 'circle',
        source: 'mountains',
        paint: {
          'circle-radius': 6,
          'circle-color': '#B8860B',
          'circle-stroke-color': '#FFA500',
          'circle-stroke-width': 2,
        },
      });

      // Реки
      map.current.addLayer({
        id: 'rivers',
        type: 'line',
        source: 'rivers',
        layout: {
          'line-join': 'round',
          'line-cap': 'round',
        },
        paint: {
          'line-color': '#00BFFF',
          'line-width': 3,
        },
      });

      // Водоемы
      map.current.addLayer({
        id: 'waterbodies-fill',
        type: 'fill',
        source: 'waterbodies',
        paint: {
          'fill-color': '#1E90FF',
          'fill-opacity': 0.5,
        },
      });

      // Города
      map.current.addLayer({
        id: 'cities-symbol',
        type: 'symbol',
        source: 'cities',
        layout: {
          'icon-image': 'harbor-15', // Использование встроенной иконки; измените по необходимости
          'icon-size': 1.5,
          'text-field': ['get', 'name'],
          'text-font': ['Open Sans Semibold', 'Arial Unicode MS Bold'],
          'text-offset': [0, 1.25],
          'text-anchor': 'top',
        },
        paint: {
          'text-color': '#000000',
          'text-halo-color': '#FFFFFF',
          'text-halo-width': 1,
        },
      });

      // Указываем, что карта загружена
      setMapLoaded(true);

      // Настройка интерактивности после добавления слоев
      setupInteractivity();
    });

    // Очистка при размонтировании компонента
    return () => map.current.remove();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  useEffect(() => {
    if (!mapLoaded) return; // Убедиться, что карта загружена перед манипуляциями

    // Переключение видимости слоев на основе состояния
    Object.keys(layersVisibility).forEach(layer => {
      if (map.current.getLayer(layer)) {
        map.current.setLayoutProperty(
          layer,
          'visibility',
          layersVisibility[layer] ? 'visible' : 'none'
        );
      } else {
        console.warn(`Layer '${layer}' не существует на карте.`);
      }
    });
  }, [layersVisibility, mapLoaded]);

  const setupInteractivity = () => {
    // Инициализация всплывающего окна
    const popup = new mapboxgl.Popup({
      closeButton: true,
      closeOnClick: true,
    });

    // Обработка кликов по слоям
    map.current.on('click', ['mountains', 'rivers', 'waterbodies-fill', 'cities-symbol'], (e) => {
      const feature = e.features[0];
      const coordinates = e.lngLat;
      let description = '';

      switch (feature.layer.id) {
        case 'mountains':
          description = `<strong>Гора:</strong> ${feature.properties.name}<br/><strong>Высота:</strong> ${feature.properties.height} м`;
          break;
        case 'rivers':
          description = `<strong>Река:</strong> ${feature.properties.name}<br/><strong>Протяженность:</strong> ${feature.properties.length} км`;
          break;
        case 'waterbodies-fill':
          description = `<strong>Водоем:</strong> ${feature.properties.name}<br/><strong>Тип:</strong> ${feature.properties.type}`;
          break;
        case 'cities-symbol':
          description = `<strong>Город:</strong> ${feature.properties.name}<br/><strong>Население:</strong> ${feature.properties.population}`;
          break;
        default:
          description = 'Нет информации';
      }

      // Установка содержимого и позиции всплывающего окна
      popup.setLngLat(coordinates).setHTML(description).addTo(map.current);

      // Установка выбранного объекта для дополнительных функций, если необходимо
      setSelectedFeature(feature.properties);
    });

    // Изменение курсора на указатель при наведении
    map.current.on('mouseenter', ['mountains', 'rivers', 'waterbodies-fill', 'cities-symbol'], () => {
      map.current.getCanvas().style.cursor = 'pointer';
    });

    map.current.on('mouseleave', ['mountains', 'rivers', 'waterbodies-fill', 'cities-symbol'], () => {
      map.current.getCanvas().style.cursor = '';
    });

    // Обработка наведения для отображения информации
    map.current.on('mousemove', ['mountains', 'rivers', 'waterbodies-fill', 'cities-symbol'], (e) => {
      const feature = e.features[0];
      setHoveredFeature(feature.properties);
    });

    // Удаление информации при покидании области наведения
    map.current.on('mouseleave', ['mountains', 'rivers', 'waterbodies-fill', 'cities-symbol'], () => {
      setHoveredFeature(null);
    });
  };

  const toggleLayer = (layerName) => {
    setLayersVisibility(prev => ({
      ...prev,
      [layerName]: !prev[layerName],
    }));
  };

  return (
    <div className="kyrgyzstan-map">
      {/* Интеграция Header */}
      <Header user={user} title="Карта Кыргызстана" />

      <main className="map-main">
        <div ref={mapContainer} className="map-box" />

        {/* Панель управления слоями */}
        <div className="layer-controls">
          <h3>Управление слоями</h3>
          {Object.keys(layersVisibility).map(layer => (
            <div key={layer} className="layer-control">
              <input
                type="checkbox"
                id={`toggle-${layer}`}
                checked={layersVisibility[layer]}
                onChange={() => toggleLayer(layer)}
              />
              <label htmlFor={`toggle-${layer}`}>
                {layer
                  .replace('_fill', '')
                  .replace('_outline', '')
                  .replace('_symbol', '')
                  .replace('_', ' ')
                  .replace(/\b\w/g, l => l.toUpperCase())}
              </label>
            </div>
          ))}
        </div>

        {/* Панель информации о выбранном объекте */}
        {selectedFeature && (
          <div className="info-panel">
            <h3>Информация об объекте</h3>
            <p><strong>Название:</strong> {selectedFeature.name}</p>
            {selectedFeature.height && <p><strong>Высота:</strong> {selectedFeature.height} м</p>}
            {selectedFeature.length && <p><strong>Протяженность:</strong> {selectedFeature.length} км</p>}
            {selectedFeature.type && <p><strong>Тип:</strong> {selectedFeature.type}</p>}
            {selectedFeature.population && <p><strong>Население:</strong> {selectedFeature.population}</p>}
            <Button variant="danger" onClick={() => setSelectedFeature(null)}>Закрыть</Button>
          </div>
        )}

        {/* Всплывающая информация при наведении */}
        {hoveredFeature && (
          <div className="hover-info">
            <p>{hoveredFeature.name}</p>
          </div>
        )}
      </main>
    </div>
  );
};

export default KyrgyzstanMap;


почему не отображаеся карта кыргызстана и есть ли вообще возможность выводить карты отдельных стран у mapbox?