// frontend/src/KGMap/KyrgyzstanMap.jsx

import React, { useState, useEffect } from 'react';
import { MapContainer, TileLayer, GeoJSON } from 'react-leaflet';
import 'leaflet/dist/leaflet.css';
import './KyrgyzstanMap.scss';
import Button from '../Button/Button';
import * as turf from '@turf/turf';
import kyrgyzstanData from '../data/kyrgyzstan.json'; // Импорт локального GeoJSON

const KyrgyzstanMap = () => {
  const [is3D, setIs3D] = useState(false);
  const [currentStyle, setCurrentStyle] = useState('streets');
  const [maskGeoJSON, setMaskGeoJSON] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  // Центрирование на Кыргызстане
  const center = [41.2044, 74.7661];
  const minZoom = 5;
  const maxZoom = 15;

  // Определение границ карты
  const bounds = [
    [34, 64], // Юго-Западный угол [широта, долгота]
    [48, 85], // Северо-Восточный угол [широта, долгота]
  ];

  // Определение URL и атрибуции для различных стилей
  const styleMap = {
    streets: {
      url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
      attribution:
        '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
    },
    satellite: {
      url: 'https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png',
      attribution: '&copy; OpenTopoMap',
    },
    light: {
      url: 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png',
      attribution: '&copy; <a href="https://carto.com/">CARTO</a>',
    },
    dark: {
      url: 'https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png',
      attribution: '&copy; <a href="https://carto.com/">CARTO</a>',
    },
    outdoors: {
      url: 'https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png',
      attribution:
        '&copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, Tiles style by HOT',
    },
    'satellite-streets': {
      url: 'https://{s}.tile.stamen.com/terrain/{z}/{x}/{y}.png',
      attribution:
        '&copy; <a href="http://stamen.com">Stamen Design</a>',
    },
  };

  // Создание маски при загрузке компонента
  useEffect(() => {
    try {
      // Создаём полигон, охватывающий весь мир
      const world = turf.bboxPolygon([-180, -90, 180, 90]);

      // Преобразуем GeoJSON Кыргызстана в формат Turf
      const kyrgyzstanFC = turf.featureCollection(kyrgyzstanData.features);

      console.log('Количество фичей в Кыргызстане:', kyrgyzstanFC.features.length);
      console.log('GeoJSON Кыргызстана:', kyrgyzstanFC);

      let kyrgyzstanUnion;
      if (kyrgyzstanFC.features.length >= 2) {
        // Если есть 2 и более геометрии, объединяем их
        kyrgyzstanUnion = turf.union(...kyrgyzstanFC.features);
        console.log('Результат объединения фичей Кыргызстана:', kyrgyzstanUnion);
      } else if (kyrgyzstanFC.features.length === 1) {
        // Если только одна геометрия, используем её напрямую
        kyrgyzstanUnion = kyrgyzstanFC.features[0];
        console.log('Используется одна геометрия Кыргызстана:', kyrgyzstanUnion);
      } else {
        throw new Error('GeoJSON не содержит геометрий для Кыргызстана');
      }

      if (!kyrgyzstanUnion) {
        throw new Error('Ошибка при объединении геометрий Кыргызстана');
      }

      // Выполняем разность: весь мир минус Кыргызстан
      const mask = turf.difference(world, kyrgyzstanUnion);

      if (!mask) {
        throw new Error('Не удалось создать маску для остальных регионов');
      }

      console.log('Созданная маска:', mask);
      setMaskGeoJSON(mask);
      setLoading(false);
    } catch (err) {
      console.error('Ошибка при обработке GeoJSON:', err);
      setError(err.message);
      setLoading(false);
    }
  }, []);

  const handleToggle3D = () => {
    setIs3D((prev) => !prev);
    // Leaflet не поддерживает 3D режим по умолчанию
    alert('3D режим не поддерживается в Leaflet по умолчанию.');
  };

  const handleChangeStyle = (styleId) => {
    setCurrentStyle(styleId);
  };

  if (loading) {
    return <div>Загрузка карты...</div>;
  }

  if (error) {
    return <div>Ошибка при загрузке карты: {error}</div>;
  }

  return (
    <div className="kyrgyzstan-map-container">
      <div className="controls">
        <Button
          className={`toggle-button ${is3D ? 'active' : ''}`}
          onClick={handleToggle3D}
        >
          {is3D ? 'Переключить на 2D' : 'Переключить на 3D'}
        </Button>
        <div className="style-buttons">
          {Object.keys(styleMap).map((styleId) => (
            <Button
              key={styleId}
              className={`btn-outline ${
                currentStyle === styleId ? 'active' : ''
              }`}
              onClick={() => handleChangeStyle(styleId)}
            >
              {styleId.charAt(0).toUpperCase() + styleId.slice(1)}
            </Button>
          ))}
        </div>
      </div>
      <MapContainer
        center={center}
        zoom={7}
        minZoom={minZoom}
        maxZoom={maxZoom}
        maxBounds={bounds}
        style={{ height: '100vh', width: '100%' }}
        scrollWheelZoom={true}
      >
        <TileLayer
          url={styleMap[currentStyle].url}
          attribution={styleMap[currentStyle].attribution}
        />
        {maskGeoJSON && (
          <GeoJSON
            data={maskGeoJSON}
            style={{
              fillColor: 'white',
              fillOpacity: 0.7,
              color: 'none', // Без границы
            }}
          />
        )}
        {/* Добавление обводки Кыргызстана для лучшего визуального выделения */}
        {kyrgyzstanData && (
          <GeoJSON
            data={kyrgyzstanData}
            style={{
              color: '#FF0000', // Цвет обводки
              weight: 2, // Толщина линии
              fillOpacity: 0, // Без заливки
            }}
          />
        )}
      </MapContainer>
    </div>
  );
};

export default KyrgyzstanMap;




Количество фичей в Кыргызстане: 1
KyrgyzstanMap.jsx:70 GeoJSON Кыргызстана: 
Object
KyrgyzstanMap.jsx:80 Используется одна геометрия Кыргызстана: 
Object
hook.js:608 Ошибка при обработке GeoJSON: Error: Must have at least two features
    at Module.difference (index.ts:49:1)
    at KyrgyzstanMap.jsx:90:1
    at commitHookEffectListMount (react-dom.development.js:23189:1)
    at commitPassiveMountOnFiber (react-dom.development.js:24965:1)
    at commitPassiveMountEffects_complete (react-dom.development.js:24930:1)
    at commitPassiveMountEffects_begin (react-dom.development.js:24917:1)
    at commitPassiveMountEffects (react-dom.development.js:24905:1)
    at flushPassiveEffectsImpl (react-dom.development.js:27078:1)
    at flushPassiveEffects (react-dom.development.js:27023:1)
    at commitRootImpl (react-dom.development.js:26974:1) Error Component Stack
    at KyrgyzstanMap (KyrgyzstanMap.jsx:12:1)
    at RenderedRoute (hooks.tsx:658:1)
    at Routes (components.tsx:504:1)
    at Router (components.tsx:413:1)
    at BrowserRouter (index.tsx:784:1)
    at App (App.js:16:1)
KyrgyzstanMap.jsx:69 Количество фичей в Кыргызстане: 1
KyrgyzstanMap.jsx:70 GeoJSON Кыргызстана: 
Object
KyrgyzstanMap.jsx:80 Используется одна геометрия Кыргызстана: 
Object
hook.js:608 Ошибка при обработке GeoJSON: Error: Must have at least two features
    at Module.difference (index.ts:49:1)
    at KyrgyzstanMap.jsx:90:1
    at commitHookEffectListMount (react-dom.development.js:23189:1)
    at invokePassiveEffectMountInDEV (react-dom.development.js:25193:1)
    at invokeEffectsInDev (react-dom.development.js:27390:1)
    at commitDoubleInvokeEffectsInDEV (react-dom.development.js:27369:1)
    at flushPassiveEffectsImpl (react-dom.development.js:27095:1)
    at flushPassiveEffects (react-dom.development.js:27023:1)
    at commitRootImpl (react-dom.development.js:26974:1)
    at commitRoot (react-dom.development.js:26721:1)
Show 1 more frame