import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
import styles from './index.less';
import HncyCard from '@/pages/Home_v_2504/components/common/Card'
import AreaBarList, { AreaBarItem } from '@/components/V2504/AreaBarList'
import ModuleTitleWithTabs from '@/pages/Home_v_2504/components/common/ModuleTitleWithTabs'
import useLatestValue from '@/pages/Home_v_2504/hooks/useLatestValue';
import { useDataType, useMapState } from '@/pages/Home_v_2504/components/MapStateContext';
import useApiControl, { formatDateTime } from '@/pages/Home_v_2504/hooks/useApiControl';
import { getDistrictHighFrequencyArea } from '@/services/CityProblem';

// 类型定义
export interface HighFrequencyAreaProps {
  dateType?: string;
  dateRange?: { startTime: string; endTime: string };
  dataTypeKey?: string;
}

// 区域类型定义
export type AreaType = 'all' | 'urban' | 'central' | 'county';
const WorkersArea: React.FC<HighFrequencyAreaProps> = ({ 
  dateType,
  dateRange,
  dataTypeKey = '环卫事件'
}) => {
  
  // 地图状态
  const { mapState } = useMapState();
  const mapStateRef = useLatestValue(mapState);
  
  // 当前选中的区域类型
  const [currentTab, setCurrentTab] = useState<AreaType>('all');
  const currentTabRef = useLatestValue(currentTab);
  
  // 环卫人员区域数据
  // const [data, setData] = useState<AreaBarItem[]>([]);
  const [data, setData] = useState<AreaBarItem[]>([
    { name: '锦江区', count: 456, percentage: 97.2 },
    { name: '金牛区', count: 400, percentage: 83.5 },
    { name: '成华区', count: 322, percentage: 70.8 },
    { name: '青羊区', count: 186, percentage: 65.6 },
    { name: '双流区', count: 152, percentage: 12.9 },
    { name: '武侯区', count: 122, percentage: 10.6 },
    { name: '龙泉驿区', count: 121, percentage: 10.5 },
    { name: '温江区', count: 120, percentage: 10.4 },
    { name: '新都区', count: 119, percentage: 10.3 },
    { name: '郫都区', count: 118, percentage: 10.2 },
    { name: '都江堰市', count: 117, percentage: 10.1 }
  ]);
  
  // 处理Tab切换
  const handleTabChange = (tab: string) => {
    setCurrentTab(tab as AreaType);
  };
  
  // 转换日期类型为API参数
  const translateDateType = useCallback((type: string) => {
    switch (type) {
      case 'year': return '1';
      case 'month': return '2';
      case 'day': return '3';
      case 'range': return '4';
      default: return '2'; // 默认月视图
    }
  }, []);
  
  // 区域编码生成函数
  const getRegionCodes = (areaType: AreaType, regionCode: string) => {
    // 默认所有区域
    if (areaType === 'all') {
      return regionCode.length > 4 
        ? regionCode 
        : regionCode === '5101' 
          ? '510104,510105,510106,510107,510108,510112,510113,510114,510115,510116,510117,510121,510129,510131,510132,510181,510182,510183,510184,510185'
          : '';
    }
    
    // 城市新区
    if (areaType === 'urban') {
      return '510112,510113,510114,510115,510116,510117';
    }
    
    // 中心城区
    if (areaType === 'central') {
      return '510104,510105,510106,510107,510108';
    }
    
    // 县市新城
    if (areaType === 'county') {
      return '510121,510129,510131,510132,510181,510182,510183,510184,510185';
    }
    
    return '';
  };
  
  // 构建API请求参数
  const buildApiParams = useCallback(() => {
    const currentMapState = mapStateRef.current;
    
    // 如果没有必要的时间参数，返回null表示不应该发起请求
    if (!currentMapState.leftPanelTime?.startTime || !currentMapState.leftPanelTime?.endTime) {
      return null;
    }
    
    // 使用当前时间类型，如果不存在则使用props或默认值
    const effectiveType = currentMapState.leftPanelTime.type || dateType || 'month';
    
    // 基础参数对象
    const params: any = {
      type: translateDateType(effectiveType)
    };
    
    // 处理日期参数
    if (effectiveType === 'range') {
      params.customizeStart = formatDateTime(currentMapState.rightPanelTime.startTime);
      params.customizeEnd = formatDateTime(currentMapState.rightPanelTime.endTime, true);
    } else {
      // 年、月、日视图使用time参数
      params.time = formatDateTime(currentMapState.rightPanelTime.startTime);
    }
    
    // 获取区域编码列表
    const districtCodeList = getRegionCodes(currentTabRef.current, currentMapState.regionCode);
    if (districtCodeList) {
      params.districtCodeList = districtCodeList;
    }
    
    // 处理区域参数
    if (currentMapState.regionCode === '5101') {
      // 成都，这两个参数就不传
      params.districtCode = undefined;
      params.streetCode = undefined;
    } else if (currentMapState.regionCode.length === 6) {
      // 区县级别
      params.districtCode = currentMapState.regionCode;
    } else if (currentMapState.regionCode.length === 9) {
      // 街道级别
      params.districtCode = currentMapState.regionCode.substring(0, 6);
      params.streetCode = currentMapState.regionCode;
    }
    
    // 使用传入的dataTypeKey获取对应的subTypeCode
    params.subTypeCode = useDataType(dataTypeKey);
    
    return params;
  }, [mapStateRef, currentTabRef, dateType, translateDateType, dataTypeKey]);

  // 使用useApiControl管理环卫人员区域API调用
  const highFrequencyApi = useApiControl({
    apiFunction: async (params) => {
      console.log('发起环卫人员区域请求，参数:', params);
      const response = await getDistrictHighFrequencyArea(params);
      
      if (response.code === 200 && response.data) {
        return response.data;
      }
      
      throw new Error('获取环卫人员区域数据失败');
    },
    onSuccess: (data) => {
      if (!data || !Array.isArray(data) || data.length === 0) {
        setData([]);
        return;
      }

      // 如果接口返回数据都是0，生成模拟数据
      // if (data.every(item => parseFloat(item.value) === 0 && parseFloat(item.percent) === 0)) {
      //   data = [
      //     { name: '锦江区', value: 456, percent: '97.2' },
      //     { name: '金牛区', value: 400, percent: '83.5' },
      //     { name: '成华区', value: 322, percent: '70.8' },
      //     { name: '青羊区', value: 186, percent: '65.6' },
      //     { name: '双流区', value: 152, percent: '12.9' },
      //     { name: '武侯区', value: 122, percent: '10.6' },
      //     { name: '龙泉驿区', value: 121, percent: '10.5' },
      //     { name: '温江区', value: 120, percent: '10.4' },
      //     { name: '新都区', value: 119, percent: '10.3' },
      //     { name: '郫都区', value: 118, percent: '10.2' },
      //     { name: '都江堰市', value: 117, percent: '10.1' }
      //   ];
      //   console.log('使用模拟环卫人员区域数据');
      // }
      
      // 转换接口返回的数据格式为图表需要的格式
      const formattedData = data.map((item: any) => ({
        name: item.name,
        percentage: parseFloat(item.percent) || 0,
        count: parseInt(item.value) || 0
      }));
      
      console.log('环卫人员区域数据成功:');
      setData(formattedData);
    },
    onError: (error) => {
      console.error('获取环卫人员区域数据出错:', error);
      setData([]);
    },
    apiName: '环卫人员区域',
    debounceTime: 300,
    cacheTime: 5000 // 缓存5秒，避免频繁刷新时重复请求
  });

  // 使用 useMemo 跟踪 rightPanelTime 的实际变化
  const memoizedRightPanelTime = useMemo(() => {
    return {
      type: mapState.rightPanelTime.type,
      startTime: mapState.rightPanelTime.startTime,
      endTime: mapState.rightPanelTime.endTime
    };
  }, [
    mapState.rightPanelTime.type,
    mapState.rightPanelTime.startTime, 
    mapState.rightPanelTime.endTime
  ]);

  // 跟踪上一次的API参数，避免重复调用
  const prevApiParamsRef = useRef<string>('');

  // 在地图状态变化和Tab变化时加载数据
  useEffect(() => {
    const params = buildApiParams();
    
    // 如果没有必要的参数，不发送请求
    if (!params) {
      console.log('缺少必要的日期参数，不加载环卫人员区域数据');
      return;
    }
    
    // 参数签名，用于比较参数是否有实际变化
    const paramsSignature = JSON.stringify(params);
    
    // 检查参数是否真正变化，防止重复调用
    if (paramsSignature === prevApiParamsRef.current) {
      console.log('环卫人员区域参数未变化，跳过重复加载');
      return;
    }
    
    console.log('加载环卫人员区域数据，参数:', params);
    // highFrequencyApi.callApi(params);
    
    // 更新上一次参数签名
    prevApiParamsRef.current = paramsSignature;
    
  }, [mapState.regionCode, memoizedRightPanelTime, currentTab, buildApiParams, highFrequencyApi]);
  
  return (
    <div className={styles.container}>
      <ModuleTitleWithTabs 
        title="环卫人员区域"
        tabs={[
          { key: 'all', label: '全部' },
          { key: 'urban', label: '城市新区' },
          { key: 'central', label: '中心城区' },
          { key: 'county', label: '县市新城' },
        ]}
        activeKey={currentTab}
        onTabChange={handleTabChange}
        enableDistrictCheck={true}
      />
      <div className={styles.content}>
        <AreaBarList 
          data={data} 
          height={290}
          progressColor={{ from: 'rgb(179, 220, 135)', to: 'rgb(255, 209, 88)' }}
          valueStyle={{ color: 'rgb(251, 210, 90)' }}
          isThinProgress={true}
        />
      </div>
    </div>
  )
}

export default WorkersArea; 