import React, { useState, useEffect, useCallback } from 'react';
import { DatePicker, ConfigProvider } from 'antd';
import dayjs from 'dayjs';
import classNames from 'classnames';
import { useMapState } from '@/pages/Home_v_2504/components/MapStateContext';
import { useLatestValue, useLatestValues } from '@/pages/Home_v_2504/hooks/useLatestValue';
import styles from './index.less';

export type DateType = 'day' | 'month' | 'year' | 'range';

export interface DateSelectorProps {
  defaultType?: DateType;
  onChange?: (params: { type: DateType; startTime: string; endTime: string }) => void;
  // 面板类型，用于区分左右侧的时间选择器
  panelType?: 'left' | 'right';
}

const isUseConfirmButton = false;

const DateSelector: React.FC<DateSelectorProps> = ({ 
  defaultType = 'day',
  onChange,
  panelType = 'right' // 默认为右侧面板
}) => {
  const [activeType, setActiveType] = useState<DateType>(defaultType);
  const [dates, setDates] = useState<{
    startTime: string;
    endTime: string;
  }>(() => {
    if (defaultType === 'day') {
      return {
        startTime: dayjs().format('YYYY-MM-DD'),
        endTime: dayjs().format('YYYY-MM-DD')
      };
    } else if (defaultType === 'month') {
      return {
        startTime: dayjs().startOf('month').format('YYYY-MM-DD'),
        endTime: dayjs().endOf('month').format('YYYY-MM-DD')
      };
    } else if (defaultType === 'year') {
      return {
        startTime: dayjs().startOf('year').format('YYYY-MM-DD'),
        endTime: dayjs().endOf('year').format('YYYY-MM-DD')
      };
    } else if (defaultType === 'range') {
      // Fixed: Make range mode also use first and last day of month by default
      return {
        startTime: dayjs().startOf('month').format('YYYY-MM-DD'),
        endTime: dayjs().endOf('month').format('YYYY-MM-DD')
      };
    } else {
      return {
        startTime: dayjs().format('YYYY-MM-DD'),
        endTime: dayjs().format('YYYY-MM-DD')
      };
    }
  });
  
  // 使用 MapStateContext
  const { mapState, updateTimeRange, setActivePanel } = useMapState();
  
  // 使用自定义Hook保持最新引用，解决闭包问题
  const activeTypeRef = useLatestValue(activeType);
  const datesRef = useLatestValue(dates);
  const mapStateRef = useLatestValues(mapState);
  
  // 生成唯一标识符，用于事件派发
  const instanceId = React.useMemo(() => 
    `dateSelector_${panelType}_${Math.random().toString(36).substr(2, 9)}`, 
    [panelType]
  );

  // 通知变更
  const notifyChange = useCallback(() => {
    // 使用ref的最新值，避免闭包问题
    const currentType = activeTypeRef.current;
    const currentDates = datesRef.current;
    
    console.log('DateSelector notifyChange', {
      panelType,
      type: currentType,
      startTime: currentDates.startTime,
      endTime: currentDates.endTime,
      instanceId
    });
    
    if (onChange) {
      onChange({
        type: currentType,
        ...currentDates
      });
    }
    
    // 不再自动设置激活面板，让数据类型决定面板激活状态
    // setActivePanel(panelType);
    
    // 使用 MapStateContext 更新时间范围
    updateTimeRange(
      panelType,
      currentType,
      currentDates.startTime,
      currentDates.endTime,
      instanceId // 传递实例ID用于事件识别
    );
  }, [panelType, onChange, updateTimeRange, instanceId]);

  // 当类型更改时，重置日期并发出通知
  const handleTypeChange = useCallback((type: DateType) => {
    // 使用ref获取当前最新值，避免闭包问题
    if (type === activeTypeRef.current) return;
    
    let newDates = { ...datesRef.current };
    
    if (type === 'day') {
      newDates = {
        startTime: dayjs().format('YYYY-MM-DD'),
        endTime: dayjs().format('YYYY-MM-DD')
      };
    } else if (type === 'month') {
      newDates = {
        startTime: dayjs().startOf('month').format('YYYY-MM-DD'),
        endTime: dayjs().endOf('month').format('YYYY-MM-DD')
      };
    } else if (type === 'year') {
      newDates = {
        startTime: dayjs().startOf('year').format('YYYY-MM-DD'),
        endTime: dayjs().endOf('year').format('YYYY-MM-DD')
      };
    } else if (type === 'range') {
      // Fixed: Ensure range mode also uses a reasonable date range (current month)
      newDates = {
        startTime: dayjs().startOf('month').format('YYYY-MM-DD'),
        endTime: dayjs().endOf('month').format('YYYY-MM-DD')
      };
    }
    
    // 更新状态
    setActiveType(type);
    setDates(newDates);
    
    // 在下一个tick中发送通知，确保状态已更新
    setTimeout(() => {
      notifyChange();
    }, 0);
  }, [notifyChange]);

  // 初始化完成后，从 MapState 同步时间配置
  useEffect(() => {
    // 获取MapState中对应面板的时间设置
    const panelTime = panelType === 'left' 
      ? mapStateRef.current.leftPanelTime 
      : mapStateRef.current.rightPanelTime;
    
    // 同步时间类型
    if (panelTime.type && panelTime.type !== activeTypeRef.current) {
      setActiveType(panelTime.type as DateType);
    }
    
    // 同步时间范围
    if (panelTime.startTime && panelTime.endTime) {
      // 去除时间部分，只保留日期
      const startDate = panelTime.startTime.split(' ')[0];
      const endDate = panelTime.endTime.split(' ')[0];
      
      if (startDate !== dates.startTime || endDate !== dates.endTime) {
        setDates({
          startTime: startDate,
          endTime: endDate
        });
      }
    }
  }, []);

  // 当地图状态中的时间变化时，同步到本地状态
  useEffect(() => {
    const handleMapDateChange = (event: CustomEvent) => {
      const detail = event.detail;
      
      // 只处理与当前面板相关的时间变化
      if (detail && detail.panel === panelType) {
        // 获取事件来源，避免处理自己发出的事件
        const sourceId = detail.instanceId;
        
        // 如果是自己发出的事件，跳过处理
        if (sourceId === instanceId) {
          return;
        }
        
        // 同步时间类型
        if (detail.type && detail.type !== activeTypeRef.current) {
          setActiveType(detail.type as DateType);
        }
        
        // 同步时间范围
        if (detail.startTime && detail.endTime) {
          // 去除时间部分，只保留日期
          const startDate = detail.startTime.split(' ')[0];
          const endDate = detail.endTime.split(' ')[0];
          
          // 只有当日期真的不同时才更新
          if (startDate !== datesRef.current.startTime || endDate !== datesRef.current.endTime) {
            setDates({
              startTime: startDate,
              endTime: endDate
            });
          }
        }
      }
    };
    
    // 添加事件监听
    window.addEventListener('mapDateChange', handleMapDateChange as EventListener);
    
    // 组件卸载时移除监听
    return () => {
      window.removeEventListener('mapDateChange', handleMapDateChange as EventListener);
    };
  }, [panelType, instanceId]);

  const handleRangeChange = (dates: [dayjs.Dayjs | null, dayjs.Dayjs | null] | null) => {
    if (!dates || !dates[0] || !dates[1]) return;
    
    const newDates = {
      startTime: dates[0].format('YYYY-MM-DD'),
      endTime: dates[1].format('YYYY-MM-DD')
    };
    
    if (activeType === 'range'){
      // 更新日期范围状态
      setDates(newDates);
    } else{
      // 同时更新类型和日期范围
      setActiveType('range');
      setDates(newDates);
    }
    
    // 在下一个tick中发送通知，确保状态已更新
    setTimeout(() => {
      notifyChange();
    }, 0);
  };

  const customSuffixIcon = <div className={styles.arrowIcon} />;

  // Determine date picker class names
  const datePickerClasses = classNames(
    styles.datePicker,
    styles.rangePickerStyle, 
    { [styles.active]: activeType === 'range' }
  );

  return (
    <div className={styles.container}>
      <div className={styles.buttonGroup}>
        <div 
          className={classNames(styles.button, { [styles.active]: activeType === 'day' })}
          onClick={() => handleTypeChange('day')}
        >
          日
        </div>
        <div 
          className={classNames(styles.button, { [styles.active]: activeType === 'month' })}
          onClick={() => handleTypeChange('month')}
        >
          月
        </div>
        <div 
          className={classNames(styles.button, { [styles.active]: activeType === 'year' })}
          onClick={() => handleTypeChange('year')}
        >
          年
        </div>
      </div>      
      
      <div className={styles.dateSelector}>
        <ConfigProvider
          theme={{
            components: {
              DatePicker: {
                // 设置日期选择器背景为透明
                colorBgContainer: 'rgba(50, 102, 167, 0.5)',
                // 设置文本颜色为白色
                colorText: '#ffffff',
                // 设置占位符文本颜色为半透明白色
                colorTextPlaceholder: 'rgba(255, 255, 255, 0.5)',
                // 设置弹出面板背景为深蓝色
                colorBgElevated: '#0C1B3A',
                // 设置边框颜色为透明
                colorBorder: 'transparent',
                // 设置字体大小为16px
                fontSize: 16,
                // 设置内边距为22px
                paddingInline: 22,
                // 设置控件高度为36px
                controlHeight: 36,
                // 设置图标颜色为白色
                colorIcon: '#ffffff',
                // 设置图标hover状态颜色为亮蓝色
                colorIconHover: 'rgb(28, 192, 255)',
                // 设置禁用状态文本颜色为半透明白色
                colorTextDisabled: 'rgba(255, 255, 255, 0.25)',
                // 设置日期范围hover背景为半透明蓝色
                cellHoverWithRangeBg: 'rgba(39, 152, 214, 0.1)',
                // 设置主色调为亮蓝色
                colorPrimary: 'rgb(28, 192, 255)',
                // 设置主色调hover状态为浅蓝色
                colorPrimaryHover: 'rgb(82, 148, 255)',
                // 设置圆角为25px
                borderRadius: 25,
              },
            }
          }}
        >
          <DatePicker.RangePicker 
            allowClear={false}
            value={[dayjs(dates.startTime), dayjs(dates.endTime)]}
            onChange={handleRangeChange}
            format="YYYY-MM-DD"
            className={datePickerClasses}
            suffixIcon={customSuffixIcon}
            popupClassName={styles.datePickerDropdown}
          />
        </ConfigProvider>
      </div>

      {isUseConfirmButton && (
        <div className={styles.confirmButton} onClick={notifyChange}>确定</div>
      )}
    </div>
  );
};

export default DateSelector; 