import React, { useState, useEffect, useCallback, useRef } 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' | 'yesterday' | 'lastMonth';

export interface DateSelectorProps {
  defaultType?: DateType;
  onChange?: (params: { type: DateType; startTime: string; endTime: string }) => void;
  // 面板类型，用于区分左右侧的时间选择器
  panelType?: 'left' | 'right';
  // 页面ID，用于区分不同的下钻页
  pageId?: string;
  // 时间选项配置，控制显示哪些时间选项
  timeOptions?: DateType[];
  // 是否优先使用组件的默认值，而不是从MapStateContext同步
  useDefaultTypeFirst?: boolean;
}

const isUseConfirmButton = false;

const DateSelector: React.FC<DateSelectorProps> = ({ 
  defaultType = 'day',
  onChange,
  panelType = 'right', // 默认为右侧面板
  pageId = 'home', // 默认为首页
  timeOptions = ['day', 'month', 'year', 'range'], // 默认显示全部时间选项
  useDefaultTypeFirst = false // 默认false，优先使用MapStateContext的类型，页面切换回来之后能够保留之前的状态。
}) => {
  // 初始化标志，用于跟踪是否已经完成初始化
  const initializedRef = useRef(false);
  
  // 实例ID，用于事件派发和识别
  const instanceId = React.useMemo(() => 
    `dateSelector_${pageId}_${panelType}_${Math.random().toString(36).substr(2, 9)}`, 
    [pageId, panelType]
  );
  
  // 使用 MapStateContext
  const { mapState, updateTimeRange } = useMapState();
  const mapStateRef = useLatestValues(mapState);
  
  // 根据默认类型初始化日期范围
  const getInitialDates = (type: DateType) => {
    
    
    if (type === 'day') {
      return {
        startTime: dayjs().format('YYYY-MM-DD'),
        endTime: dayjs().format('YYYY-MM-DD')
      };
    } else if (type === 'month') {
      return {
        startTime: dayjs().startOf('month').format('YYYY-MM-DD'),
        endTime: dayjs().endOf('month').format('YYYY-MM-DD')
      };
    } else if (type === 'year') {
      return {
        startTime: dayjs().startOf('year').format('YYYY-MM-DD'),
        endTime: dayjs().endOf('year').format('YYYY-MM-DD')
      };
    } else if (type === 'range') {
      return {
        startTime: dayjs().startOf('month').format('YYYY-MM-DD'),
        endTime: dayjs().endOf('month').format('YYYY-MM-DD')
      };
    } else if (type === 'yesterday') {
      const yesterday = dayjs().subtract(1, 'day');
      return {
        startTime: yesterday.format('YYYY-MM-DD'),
        endTime: yesterday.format('YYYY-MM-DD')
      };
    } else if (type === 'lastMonth') {
      const lastMonth = dayjs().subtract(1, 'month');
      return {
        startTime: lastMonth.startOf('month').format('YYYY-MM-DD'),
        endTime: lastMonth.endOf('month').format('YYYY-MM-DD')
      };
    } else {
      return {
        startTime: dayjs().format('YYYY-MM-DD'),
        endTime: dayjs().format('YYYY-MM-DD')
      };
    }
  };
  
  // 状态初始化
  const [activeType, setActiveType] = useState<DateType>(defaultType);
  const [dates, setDates] = useState<{
    startTime: string;
    endTime: string;
  }>(() => getInitialDates(defaultType));
  console.log('dates', dates);
  
  // 使用自定义Hook保持最新引用，解决闭包问题
  const activeTypeRef = useLatestValue(activeType);
  const datesRef = useLatestValue(dates);
  
  // 通知变更 - 发送日期变更到MapStateContext和父组件
  const notifyChange = useCallback(() => {
    // 使用ref的最新值，避免闭包问题
    const currentType = activeTypeRef.current;
    const currentDates = datesRef.current;
    
    // 为API调用映射类型，确保兼容性
    let apiType = currentType;
    
    // 转换API不支持的类型为兼容类型
    if (currentType === 'yesterday') {
      apiType = 'day';
    } else if (currentType === 'lastMonth') {
      apiType = 'month';
    }
    
    console.log('DateSelector notifyChange', {
      pageId,
      panelType,
      displayType: currentType,
      apiType: apiType,
      startTime: currentDates.startTime,
      endTime: currentDates.endTime,
      instanceId,
      isInitialized: initializedRef.current
    });
    
    // 调用父组件的onChange回调
    if (onChange) {
      onChange({
        type: apiType, // 使用兼容的API类型
        ...currentDates
      });
    }
    
    // 更新MapStateContext，包含页面ID和面板类型
    updateTimeRange(
      panelType,
      apiType, // 使用兼容的API类型
      currentDates.startTime,
      currentDates.endTime,
      instanceId, // 传递实例ID用于事件识别
      pageId // 传递页面ID用于隔离不同页面的时间设置
    );
  }, [pageId, panelType, onChange, updateTimeRange, instanceId]);

  // 当类型更改时，重置日期并发出通知
  const handleTypeChange = useCallback((type: DateType) => {
    // 使用ref获取当前最新值，避免闭包问题
    if (type === activeTypeRef.current) return;
    
    // 根据选择的类型生成新的日期范围
    const newDates = getInitialDates(type);
    
    // 更新状态
    setActiveType(type);
    setDates(newDates);
    
    // 使用setTimeout确保状态已更新后再通知变更
    setTimeout(() => {
      notifyChange();
    }, 0);
  }, [notifyChange]);

  // 初始化：从MapStateContext同步或使用默认值
  useEffect(() => {
    // 如果已经初始化，不再执行
    if (initializedRef.current) {
      return;
    }
    
    // 获取MapState中对应页面和面板的时间设置
    const pageTimeSettings = mapStateRef.current.pageTimeSettings?.[pageId];
    let shouldNotifyAfterInit = true;
    
    if (pageTimeSettings) {
      const panelTime = panelType === 'left' 
        ? pageTimeSettings.leftPanelTime 
        : pageTimeSettings.rightPanelTime;
      
      if (panelTime && panelTime.type) {
        // 如果优先使用默认值，则不从MapStateContext同步类型
        if (!useDefaultTypeFirst) {
          // 处理特殊类型映射（yesterday->day, lastMonth->month）
          if ((defaultType === 'yesterday' && panelTime.type === 'day') ||
              (defaultType === 'lastMonth' && panelTime.type === 'month')) {
            // 保留特殊类型
          } else {
            setActiveType(panelTime.type as DateType);
          }
          
          // 同步时间范围（如果有）
          if (panelTime.startTime && panelTime.endTime) {
            const startDate = panelTime.startTime.split(' ')[0];
            const endDate = panelTime.endTime.split(' ')[0];
            
            setDates({
              startTime: startDate,
              endTime: endDate
            });
          }
          
          // 已经从MapStateContext同步，不需要再通知
          shouldNotifyAfterInit = false;
        }
      }
    }
    
    // 标记为已初始化
    initializedRef.current = true;
    
    // 如果使用默认值或没有找到合适的MapStateContext设置，通知初始值更新
    if (shouldNotifyAfterInit) {
      setTimeout(() => {
        notifyChange();
      }, 0);
    }
  }, [pageId, panelType, defaultType, useDefaultTypeFirst, notifyChange, mapStateRef]);

  // 监听MapStateContext中的日期变化
  useEffect(() => {
    const handleMapDateChange = (event: CustomEvent) => {
      const detail = event.detail;
      
      // 如果组件还没有完成初始化，跳过处理
      if (!initializedRef.current) {
        return;
      }
      
      // 只处理与当前页面和面板相关的时间变化
      if (detail && detail.panel === panelType && detail.pageId === pageId) {
        // 获取事件来源，避免处理自己发出的事件
        const sourceId = detail.instanceId;
        
        // 如果是自己发出的事件，跳过处理
        if (sourceId === instanceId) {
          return;
        }
        
        // 同步时间类型 - 保留特殊的显示类型
        const newType = detail.type;
        const currentType = activeTypeRef.current;
        
        // 如果当前是特殊类型，且API返回的是映射后的类型，保留当前特殊类型
        let displayType = newType;
        if ((currentType === 'yesterday' && newType === 'day') || 
            (currentType === 'lastMonth' && newType === 'month')) {
          displayType = currentType;
        }
        
        if (displayType && displayType !== currentType) {
          console.log('DateSelector handleMapDateChange', {
            displayType,
            activeType: currentType,
            pageId,
            panelType,
            sourceId
          });
          setActiveType(displayType 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);
    };
  }, [pageId, 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);
    }
    
    // 通知变更
    setTimeout(() => {
      notifyChange();
    }, 0);
  };

  // UI样式相关
  const customSuffixIcon = <div className={styles.arrowIcon} />;
  const datePickerClasses = classNames(
    styles.datePicker,
    styles.rangePickerStyle, 
    { [styles.active]: activeType === 'range' }
  );

  // 渲染时间选项按钮
  const renderTimeButtons = () => {
    const getButtonLabel = (type: DateType) => {
      switch (type) {
        case 'day': return '日';
        case 'month': return '月';
        case 'year': return '年';
        case 'yesterday': return '昨日';
        case 'lastMonth': return '上月';
        case 'range': return null; // 日期范围不需要按钮
        default: return '';
      }
    };

    return timeOptions
      .filter(type => type !== 'range') // 过滤掉range，range通过日期选择器实现
      .map(type => {
        const label = getButtonLabel(type);
        if (!label) return null;
        
        return (
          <div 
            key={type}
            className={classNames(styles.button, { [styles.active]: activeType === type })}
            onClick={() => handleTypeChange(type)}
          >
            {label}
          </div>
        );
      });
  };

  return (
    <div className={styles.container}>
      <div className={styles.buttonGroup}>
        {renderTimeButtons()}
      </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; 