import { MyBetaModalFormProps } from '@/common';
import { MyModal } from '@/components/MyModal';
import L from 'leaflet';
import 'leaflet/dist/leaflet.css';
import { useEffect, useRef, useState } from 'react';

// 修复 Leaflet 图标问题
delete L.Icon.Default.prototype._getIconUrl;
L.Icon.Default.mergeOptions({
  iconRetinaUrl:
    'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-icon-2x.png',
  iconUrl:
    'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-icon.png',
  shadowUrl:
    'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-shadow.png',
});

// 创建自定义图标
const createCustomIcon = (color = 'red') => {
  return L.divIcon({
    className: 'custom-marker',
    html: `
      <div style="
        background-color: ${color};
        width: 20px;
        height: 20px;
        border-radius: 50%;
        border: 3px solid white;
        box-shadow: 0 2px 6px rgba(0,0,0,0.3);
      "></div>
    `,
    iconSize: [20, 20],
    iconAnchor: [10, 10],
  });
};

interface LocationResult {
  lat: number;
  lng: number;
  address: string;
  name?: string;
}

export default function ModalsMapLeaflet(
  props: MyBetaModalFormProps & {
    onChange?: (location?: LocationResult) => void;
  },
) {
  const modalRef = useRef<any>();
  const mapRef = useRef<L.Map | null>(null);
  const markersRef = useRef<L.LayerGroup | null>(null);
  const [searchText, setSearchText] = useState('');
  const [searchResults, setSearchResults] = useState<LocationResult[]>([]);
  const [selectedLocation, setSelectedLocation] =
    useState<LocationResult | null>(null);
  const [isLoading, setIsLoading] = useState(false);
  const [mapReady, setMapReady] = useState(false);
  const mapInitializedRef = useRef(false);

  // 天地图配置
  const TIANDITU_KEY = '4ce26ecef55ae1ec47910a72a098efc0';
  const tiandituUrls = {
    vector: `https://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${TIANDITU_KEY}`,
    label: `https://t0.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${TIANDITU_KEY}`,
  };

  // 清理地图
  useEffect(() => {
    return () => {
      if (mapRef.current) {
        mapRef.current.remove();
        mapRef.current = null;
        mapInitializedRef.current = false;
        setMapReady(false);
      }
    };
  }, []);

  // 初始化地图
  const initializeMap = () => {
    // 确保DOM已经渲染
    setTimeout(() => {
      const mapContainer = document.getElementById('map');

      if (!mapContainer) {
        console.error('地图容器不存在');
        return;
      }

      // 如果地图已经存在，先清理
      if (mapRef.current) {
        mapRef.current.remove();
        mapRef.current = null;
        mapInitializedRef.current = false;
      }

      // 清理容器
      while (mapContainer.firstChild) {
        mapContainer.removeChild(mapContainer.firstChild);
      }

      try {
        console.log('开始初始化地图...');

        const map = L.map('map', {
          center: [30.258134, 120.19382669582967],
          zoom: 12,
          zoomControl: true,
          attributionControl: false,
        });

        mapRef.current = map;
        mapInitializedRef.current = true;

        // 添加天地图图层
        const baseLayer = L.tileLayer(tiandituUrls.vector, {
          attribution: '&copy; 天地图',
          minZoom: 3,
          maxZoom: 18,
        }).addTo(map);

        const labelLayer = L.tileLayer(tiandituUrls.label, {
          minZoom: 3,
          maxZoom: 18,
        }).addTo(map);

        // 创建标记图层组
        markersRef.current = L.layerGroup().addTo(map);

        // 添加地图点击事件
        map.on('click', (e: L.LeafletMouseEvent) => {
          handleMapClick(e.latlng.lat, e.latlng.lng);
        });

        // 添加缩放和比例尺控件
        L.control.scale({ imperial: false }).addTo(map);

        // 地图加载完成
        map.whenReady(() => {
          console.log('地图加载完成');
          setMapReady(true);
        });

        console.log('地图初始化成功');
      } catch (error) {
        console.error('地图初始化失败:', error);
        mapInitializedRef.current = false;
        setMapReady(false);
      }
    }, 300);
  };

  // 使用天地图 REST API 进行搜索
  const searchWithTiandituAPI = async (
    keyword: string,
  ): Promise<LocationResult[]> => {
    try {
      const url = `https://api.tianditu.gov.cn/v2/search?postStr={
        "keyWord": "${encodeURIComponent(keyword)}",
        "level": "12",
        "mapBound": "115.38333,39.36667,117.68333,41.23333",
        "queryType": "1",
        "start": "0",
        "count": "20"
      }&type=query&tk=${TIANDITU_KEY}`;

      console.log('搜索URL:', url);

      const response = await fetch(url, {
        method: 'GET',
        headers: {
          'Content-Type': 'application/json',
        },
      });

      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
      }

      const data = await response.json();
      console.log('天地图搜索返回数据:', data);

      // 根据不同的结果类型处理
      const resultType = data.resultType;

      switch (resultType) {
        case 1: // POI点数据
          if (data.pois && Array.isArray(data.pois)) {
            return data.pois.map((poi: any) => ({
              name: poi.name,
              address: poi.address,
              lng: parseFloat(poi.lonlat.split(',')[0]),
              lat: parseFloat(poi.lonlat.split(',')[1]),
            }));
          }
          break;

        case 2: // 推荐城市
          // 这里可以处理推荐城市，暂时返回空数组
          console.log('推荐城市结果:', data.prompt);
          return [];

        case 3: // 行政区划
          if (data.area) {
            // 将行政区划转换为一个位置结果
            const area = data.area;
            const [lng, lat] = area.lonlat.split(',').map(parseFloat);
            return [
              {
                name: area.name,
                address: area.name,
                lng: lng,
                lat: lat,
              },
            ];
          }
          break;

        case 4: // 建议词
          console.log('建议词结果:', data.prompt);
          return [];

        case 5: // 公交信息
          console.log('公交信息结果:', data.lineData);
          return [];

        default:
          console.log('未知结果类型:', resultType);
      }

      // 如果没有找到有效结果，尝试使用提示信息
      if (data.prompt && data.prompt.length > 0) {
        const prompt = data.prompt[0];
        if (prompt.admins && prompt.admins.length > 0) {
          const admin = prompt.admins[0];
          return [
            {
              name: admin.name,
              address: admin.name,
              lng: parseFloat(admin.lonlat.split(',')[0]),
              lat: parseFloat(admin.lonlat.split(',')[1]),
            },
          ];
        }
      }

      throw new Error('未找到相关地点');
    } catch (error) {
      console.error('天地图搜索API调用失败:', error);
      throw error;
    }
  };

  // 搜索地点 - 使用天地图 REST API
  const handleSearch = async () => {
    if (!searchText.trim()) {
      alert('请输入搜索关键词');
      return;
    }

    // 检查天地图密钥
    if (!TIANDITU_KEY) {
      alert('请配置有效的天地图密钥');
      return;
    }

    if (!mapReady) {
      alert('地图尚未准备好，请稍后重试');
      return;
    }

    setIsLoading(true);

    try {
      console.log('开始天地图搜索:', searchText);

      // 清空之前的结果
      setSearchResults([]);
      if (markersRef.current) {
        markersRef.current.clearLayers();
      }

      // 执行搜索
      const results = await searchWithTiandituAPI(searchText);
      console.log('搜索成功，结果数量:', results.length);

      if (results.length === 0) {
        alert('未找到相关地点');
        return;
      }

      setSearchResults(results);

      // 在地图上显示搜索结果
      const bounds = L.latLngBounds([]);
      results.forEach((result, index) => {
        bounds.extend([result.lat, result.lng]);
        addSearchResultMarker(result, index, results.length);
      });

      // 调整地图视野
      if (mapRef.current) {
        mapRef.current.fitBounds(bounds.pad(0.1));
      }
    } catch (error: any) {
      console.error('搜索失败:', error);
      alert(`搜索失败: ${error.message || '未知错误'}`);
    } finally {
      setIsLoading(false);
    }
  };

  // 添加搜索结果标记
  const addSearchResultMarker = (
    location: LocationResult,
    index: number,
    total: number,
  ) => {
    if (!markersRef.current) return;

    const marker = L.marker([location.lat, location.lng], {
      icon: createCustomIcon(index === 0 ? '#1890ff' : '#52c41a'),
    }).addTo(markersRef.current);

    marker.bindPopup(`
      <div style="min-width: 220px;">
        <h4 style="margin: 0 0 8px 0; color: #1890ff; font-size: 14px;">${
          location.name
        }</h4>
        <p style="margin: 4px 0; font-size: 12px;"><strong>地址:</strong> ${
          location.address
        }</p>
        <p style="margin: 4px 0; font-size: 12px;"><strong>经纬度:</strong> ${location.lat.toFixed(
          6,
        )}, ${location.lng.toFixed(6)}</p>
        <div style="margin-top: 10px; display: flex; gap: 8px;">
          <button onclick="window.selectSearchResult(${index})" style="
            padding: 6px 12px;
            background: #1890ff;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 12px;
            flex: 1;
          ">选择此位置</button>
        </div>
      </div>
    `);

    // 第一个结果自动打开弹窗
    if (index === 0) {
      setTimeout(() => marker.openPopup(), 500);
    }

    // 将选择函数挂载到window对象
    (window as any).selectSearchResult = (index: number) => {
      console.log(location, searchResults, 'selectSearchResult');
      if (searchResults && searchResults[index]) {
        handleSelectResult(searchResults[index]);
      } else {
        handleConfirmLocation(location);
      }
    };
  };

  // 地图点击事件处理
  const handleMapClick = async (lat: number, lng: number) => {
    try {
      setIsLoading(true);

      // 使用天地图逆地理编码获取真实地址
      const address = await reverseGeocodeWithTianditu(lat, lng);

      const location: LocationResult = {
        lat,
        lng,
        address,
        name: '点击选择的位置',
      };

      setSelectedLocation(location);
      addMarkerToMap(location);
    } catch (error) {
      console.error('获取地址信息失败:', error);
    } finally {
      setIsLoading(false);
    }
  };

  // 使用天地图逆地理编码服务
  const reverseGeocodeWithTianditu = async (
    lat: number,
    lng: number,
  ): Promise<string> => {
    try {
      const url = `https://api.tianditu.gov.cn/geocoder?postStr={'lon':${lng},'lat':${lat},'ver':1}&type=geocode&tk=${TIANDITU_KEY}`;

      const response = await fetch(url);

      if (!response.ok) {
        throw new Error('逆地理编码请求失败');
      }

      const data = await response.json();

      if (data.status === '0' && data.result) {
        return data.result.formatted_address;
      }

      return `位置 ${lat.toFixed(6)}, ${lng.toFixed(6)}`;
    } catch (error) {
      console.error('天地图逆地理编码失败:', error);
      return `位置 ${lat.toFixed(6)}, ${lng.toFixed(6)}`;
    }
  };

  // 添加标记到地图
  const addMarkerToMap = (location: LocationResult) => {
    if (!mapRef.current || !markersRef.current) return;

    markersRef.current.clearLayers();

    const marker = L.marker([location.lat, location.lng], {
      icon: createCustomIcon('#1890ff'),
    }).addTo(markersRef.current);

    marker
      .bindPopup(
        `
      <div style="min-width: 200px;">
        <h4 style="margin: 0 0 8px 0; color: #1890ff;">位置信息</h4>
        <p style="margin: 4px 0;"><strong>地址:</strong> ${location.address}</p>
        <p style="margin: 4px 0;"><strong>经纬度:</strong> ${location.lat.toFixed(
          6,
        )}, ${location.lng.toFixed(6)}</p>
        <button onclick="window.confirmSelection()" style="
          margin-top: 8px;
          padding: 6px 12px;
          background: #1890ff;
          color: white;
          border: none;
          border-radius: 4px;
          cursor: pointer;
        ">选择此位置</button>
      </div>
    `,
      )
      .openPopup();

    (window as any).confirmSelection = () => {
      console.log(location, 'confirmSelection');
      handleConfirmLocation(location);
    };

    mapRef.current.setView([location.lat, location.lng], 15);
  };

  // 选择搜索结果
  const handleSelectResult = (result: LocationResult) => {
    setSelectedLocation(result);
    addMarkerToMap(result);
    setSearchResults([]);
    setSearchText(result.name || result.address);
  };

  // 确认选择位置
  const handleConfirmLocation = (location?: LocationResult) => {
    const finalLocation = location || selectedLocation;
    if (!finalLocation) return;
    props?.onChange?.(location);
    // if (props.onConfirm) {
    //   props.onConfirm(finalLocation);
    // }

    if (modalRef.current) {
      modalRef.current.close();
    }
  };

  // 清除选择
  const handleClearSelection = () => {
    setSelectedLocation(null);
    setSearchText('');
    setSearchResults([]);
    if (markersRef.current) {
      markersRef.current.clearLayers();
    }
    if (mapRef.current) {
      mapRef.current.setView([30.258134, 120.19382669582967], 12);
    }
  };

  return (
    <MyModal
      title={'获取经纬度'}
      width="1000px"
      myRef={modalRef}
      size="middle"
      onOpen={() => {
        console.log('模态框打开，初始化地图...');
        setTimeout(initializeMap, 500);
      }}
      node={
        <div style={{ padding: '20px' }}>
          {/* 状态提示 */}
          {!mapReady && (
            <div
              style={{
                padding: '10px',
                backgroundColor: '#fffbe6',
                border: '1px solid #ffe58f',
                borderRadius: '4px',
                marginBottom: '10px',
                textAlign: 'center',
              }}
            >
              地图初始化中...
            </div>
          )}

          {/* 搜索区域 */}
          <div style={{ marginBottom: '20px' }}>
            <div style={{ display: 'flex', gap: '10px', marginBottom: '10px' }}>
              <input
                type="text"
                value={searchText}
                onChange={(e) => setSearchText(e.target.value)}
                placeholder="请输入地点名称进行搜索（如：杭州中大广场...）"
                style={{
                  flex: 1,
                  padding: '8px 12px',
                  border: '1px solid #d9d9d9',
                  borderRadius: '4px',
                  fontSize: '14px',
                }}
                onKeyPress={(e) => e.key === 'Enter' && handleSearch()}
              />
              <button
                onClick={handleSearch}
                disabled={isLoading || !mapReady}
                style={{
                  padding: '8px 16px',
                  background: !isLoading && mapReady ? '#1890ff' : '#ccc',
                  color: 'white',
                  border: 'none',
                  borderRadius: '4px',
                  cursor: isLoading || !mapReady ? 'not-allowed' : 'pointer',
                }}
              >
                {isLoading ? '搜索中...' : !mapReady ? '地图加载中' : '搜索'}
              </button>
            </div>

            {/* 搜索结果 */}
            {searchResults.length > 0 && (
              <div
                style={{
                  border: '1px solid #e8e8e8',
                  borderRadius: '4px',
                  maxHeight: '200px',
                  overflowY: 'auto',
                  backgroundColor: '#fafafa',
                }}
              >
                <div
                  style={{
                    padding: '8px',
                    fontSize: '12px',
                    color: '#666',
                    borderBottom: '1px solid #e8e8e8',
                  }}
                >
                  找到 {searchResults.length} 个结果
                </div>
                {searchResults.map((result, index) => (
                  <div
                    key={index}
                    onClick={() => handleSelectResult(result)}
                    style={{
                      padding: '10px',
                      borderBottom: '1px solid #f0f0f0',
                      cursor: 'pointer',
                      backgroundColor: index === 0 ? '#e6f7ff' : '#fafafa',
                    }}
                    onMouseEnter={(e) =>
                      (e.currentTarget.style.backgroundColor = '#e6f7ff')
                    }
                    onMouseLeave={(e) =>
                      (e.currentTarget.style.backgroundColor =
                        index === 0 ? '#e6f7ff' : '#fafafa')
                    }
                  >
                    <div
                      style={{
                        fontWeight: 'bold',
                        marginBottom: '4px',
                        color: '#1890ff',
                      }}
                    >
                      {result.name || '未知地点'}
                    </div>
                    <div style={{ fontSize: '12px', color: '#666' }}>
                      {result.address}
                    </div>
                    <div
                      style={{
                        fontSize: '11px',
                        color: '#999',
                        marginTop: '2px',
                      }}
                    >
                      经纬度: {result.lat.toFixed(6)}, {result.lng.toFixed(6)}
                    </div>
                  </div>
                ))}
              </div>
            )}
          </div>

          {/* 地图容器 */}
          <div
            id="map"
            style={{
              height: '400px',
              border: '1px solid #e8e8e8',
              borderRadius: '4px',
            }}
          />

          {/* 选择信息显示 */}
          {selectedLocation && (
            <div
              style={{
                marginTop: '20px',
                padding: '15px',
                backgroundColor: '#f6ffed',
                border: '1px solid #b7eb8f',
                borderRadius: '4px',
              }}
            >
              <h4 style={{ margin: '0 0 10px 0', color: '#52c41a' }}>
                已选择位置
              </h4>
              <p style={{ margin: '4px 0' }}>
                <strong>地址:</strong> {selectedLocation.address}
              </p>
              <p style={{ margin: '4px 0' }}>
                <strong>经纬度:</strong> {selectedLocation.lat.toFixed(6)},{' '}
                {selectedLocation.lng.toFixed(6)}
              </p>
              <div style={{ marginTop: '10px', display: 'flex', gap: '10px' }}>
                <button
                  onClick={() => handleConfirmLocation(selectedLocation)}
                  style={{
                    padding: '8px 16px',
                    background: '#52c41a',
                    color: 'white',
                    border: 'none',
                    borderRadius: '4px',
                    cursor: 'pointer',
                    fontWeight: 'bold',
                  }}
                >
                  确认选择
                </button>
                <button
                  onClick={handleClearSelection}
                  style={{
                    padding: '8px 16px',
                    background: '#ff4d4f',
                    color: 'white',
                    border: 'none',
                    borderRadius: '4px',
                    cursor: 'pointer',
                  }}
                >
                  清除选择
                </button>
              </div>
            </div>
          )}

          {/* 使用说明 */}
          <div
            style={{
              marginTop: '15px',
              padding: '10px',
              backgroundColor: '#f0f8ff',
              border: '1px solid #91d5ff',
              borderRadius: '4px',
              fontSize: '12px',
              color: '#666',
            }}
          >
            <strong>使用说明:</strong>
            <ul style={{ margin: '8px 0', paddingLeft: '20px' }}>
              <li>等待地图加载完成后再进行搜索</li>
              <li>在搜索框输入地点名称进行真实搜索（使用天地图搜索API）</li>
              <li>直接点击地图选择位置（使用天地图逆地理编码）</li>
              <li>搜索结果会自动在地图上标记并定位</li>
              <li>点击标记弹出窗口可确认选择</li>
              <li>经纬度精度可达小数点后14位</li>
            </ul>
            {!TIANDITU_KEY && (
              <div style={{ color: '#ff4d4f', marginTop: '8px' }}>
                ⚠️ 请配置有效的天地图密钥
              </div>
            )}
          </div>
        </div>
      }
    ></MyModal>
  );
}