import React, { useEffect, useState, useRef } from 'react';
import * as echarts from 'echarts';
import styled from 'styled-components';
import { apiGet } from '../../utils/request';
import { useDefaultDate, getSelectedMonthRange } from '../../App';
import useGlobalRefresh from '../../hooks/useGlobalRefresh';

// 组件容器样式 - 与其他模块保持一致
const ChartWrapper = styled.div`
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;

`;

// 组件标题 - 使用与其他模块相同的样式
const PanelHeader = styled.div`
  position: relative;
  width: 95%;
  height: 1.6vw;
  padding-left: 5.5%;
  text-align: left;
  line-height: 1.6vw;
  font-size: 0.8vw;
  color: #E6F2FF;
  font-family: 'DingTalk JinBuTi', 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif;
  background: url('/component_header_bg.png') no-repeat;
  background-size: 100% 100%;
`;

// 图表容器 - 统一与其他模块一致的布局
const ChartContainer = styled.div`
  width: 100%;
  height: calc(100% - 1.6vw);
  padding: 0.5vw;
  box-sizing: border-box;
  overflow: hidden;
`;

// 数据接口类型 - 根据新接口字段定义
interface WeeklyPeakHoursData {
  weekDay: number;          // 星期（数字）
  weekDayLabel: string;     // 星期（文本）
  maxCount: number;         // 最大处方数
  avgCount: number;         // 平均处方数
}

// 获取月份的开始和结束时间，优先使用默认时间
const getMonthRange = (defaultDateTime: string) => {
  // 如果有默认时间，优先使用默认时间；否则使用当前时间
  const baseDate = defaultDateTime ? new Date(defaultDateTime) : new Date();
  const year = baseDate.getFullYear();
  const month = baseDate.getMonth(); // 0-11
  
  // 当月第一天
  const startDate = new Date(year, month, 1);
  // 当月最后一天
  const endDate = new Date(year, month + 1, 0);
  
  // 格式化为 YYYY-MM-DD
  const formatDate = (date: Date) => {
    const y = date.getFullYear();
    const m = String(date.getMonth() + 1).padStart(2, '0');
    const d = String(date.getDate()).padStart(2, '0');
    return `${y}-${m}-${d}`;
  };
  
  return {
    startTime: formatDate(startDate),
    endTime: formatDate(endDate)
  };
};

const PeakHoursChart: React.FC = () => {
  const chartRef = useRef<HTMLDivElement>(null);
  const chartInstance = useRef<echarts.ECharts | null>(null);
  const [data, setData] = useState<WeeklyPeakHoursData[]>([]);
  const [loading, setLoading] = useState(true);
  const { defaultDateTime, selectedMonth } = useDefaultDate();

  // 获取数据
  const fetchData = async () => {
    try {
      setLoading(true);
      
      // 使用选中月份获取时间范围，支持月份选择功能
      const { startTime, endTime } = getSelectedMonthRange(defaultDateTime, selectedMonth);
      
      const response = await apiGet('/stageStats/weeklyPeakHours', {
        params: {
          startTime,
          endTime
        }
      });
      
      if (response.data && response.data.data && Array.isArray(response.data.data)) {
        setData(response.data.data);
      } else {
        console.warn('每周高峰时刻 - 接口返回格式不符合预期:', response.data);
        // 设置为空数组，不使用模拟数据
        setData([]);
      }
    } catch (error) {
      console.error('获取每周高峰时刻数据失败:', error);
      // 设置为空数组，不使用模拟数据
      setData([]);
    } finally {
      setLoading(false);
    }
  };

  // 初始化图表 - 单柱状图+折线图
  const initChart = () => {
    if (!chartRef.current || data.length === 0) return;

    // 销毁已存在的图表实例
    if (chartInstance.current) {
      chartInstance.current.dispose();
    }

    // 创建新的图表实例
    chartInstance.current = echarts.init(chartRef.current);

    const option = {
      legend: {
        data: ['最大处方数', '平均处方数'],
        top: '2%',
        left: 'center',
        textStyle: {
          color: '#CCE6FF',
          fontSize: '0.6vw'
        },
        itemWidth: 10,
        itemHeight: 8,
        itemGap: 20
      },
      grid: {
        left: '0%',
        right: '0%',
        top: '15%',
        bottom: '5%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        data: data.map(item => item.weekDayLabel),
        axisLine: {
          lineStyle: {
            color: '#1F324D'
          }
        },
        axisLabel: {
          color: '#CCE6FF',
          fontSize: '0.6vw',
          margin: 5
        },
        axisTick: {
          show: false
        }
      },
      yAxis: [
        {
          type: 'value',
          position: 'left',
          max: function() {
            // 获取柱状图数据的最大值
            const maxValue = Math.max(...data.map(item => item.maxCount));
            
            // 如果最大值很小（小于100），设置max为最大值的1.5倍
            if (maxValue < 100) {
              return Math.ceil(maxValue * 1.5);
            }
            
            // 如果最大值较大，设置为1.2倍并向上取整到合适的数值
            const scaledMax = maxValue * 1.2;
            
            // 根据数值大小选择合适的取整方式
            if (scaledMax < 1000) {
              return Math.ceil(scaledMax / 100) * 100;
            } else if (scaledMax < 10000) {
              return Math.ceil(scaledMax / 500) * 500;
            } else {
              return Math.ceil(scaledMax / 1000) * 1000;
            }
          },
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#CCE6FF',
            fontSize: '0.55vw',
          },
          splitLine: {
            lineStyle: {
              color: '#1F324D',
              type: 'solid'
            }
          }
        },
        {
          type: 'value',
          position: 'right',
          max: function() {
            // 折线图使用相同的最大值范围
            const maxValue = Math.max(...data.map(item => item.avgCount));
            
            if (maxValue < 100) {
              return Math.ceil(maxValue * 1.5);
            }
            
            const scaledMax = maxValue * 1.2;
            
            if (scaledMax < 1000) {
              return Math.ceil(scaledMax / 100) * 100;
            } else if (scaledMax < 10000) {
              return Math.ceil(scaledMax / 500) * 500;
            } else {
              return Math.ceil(scaledMax / 1000) * 1000;
            }
          },
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: false
          },
          splitLine: {
            show: false
          }
        }
      ],
      series: [
        {
          name: '最大处方数',
          type: 'bar',
          yAxisIndex: 0,
          data: data.map(item => item.maxCount),
          barWidth: '35%',
          itemStyle: {
            borderRadius: [3, 3, 0, 0],
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: '#FFEA81' },
              { offset: 1, color: 'rgba(255,234,128,0)' }
            ]),
          },
          emphasis: {
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#FFEA81' },
                { offset: 1, color: 'rgba(255,234,128,0.2)' }
              ])
            }
          },
          label: {
            show: false
          }
        },
        {
          name: '平均处方数',
          type: 'line',
          yAxisIndex: 1,
          data: data.map(item => item.avgCount),
          lineStyle: {
            color: '#99FFAA',
            width: 2
          },
          itemStyle: {
            color: '#99FFAA'
          },
          symbol: 'none',
          smooth: true
        }
      ],
      tooltip: {
        trigger: 'axis',
        backgroundColor: 'rgba(15, 35, 85, 0.95)',
        borderColor: 'rgba(0, 212, 255, 0.6)',
        borderWidth: 1,
        textStyle: {
          color: '#FFFFFF',
          fontFamily: 'DingTalk JinBuTi',
          fontSize: '0.6vw'
        },
        formatter: (params: any) => {
          const barData = params.find((p: any) => p.seriesType === 'bar');
          const lineData = params.find((p: any) => p.seriesType === 'line');
          const dataItem = data[barData.dataIndex];
          return `<div style="padding: 0.3vw; font-size: 0.6vw; line-height: 1.4;">
                    <div style="color: #00D4FF; font-weight: bold; margin-bottom: 0.3vw; font-size: 0.65vw;">${barData.name}</div>
                    <div style="margin-bottom: 0.2vw; display: flex; align-items: center;">
                      <span style="color: #FFEA81; margin-right: 0.3vw; font-size: 0.8vw;">●</span> 
                      <span>最大处方数: </span>
                      <span style="color: #FFFFFF; font-weight: bold; margin-left: 0.2vw;">${dataItem.maxCount}</span>
                    </div>
                    <div style="display: flex; align-items: center;">
                      <span style="color: #99FFAA; margin-right: 0.3vw; font-size: 0.8vw;">●</span> 
                      <span>平均处方数: </span>
                      <span style="color: #FFFFFF; font-weight: bold; margin-left: 0.2vw;">${dataItem.avgCount}</span>
                    </div>
                  </div>`;
        }
      }
    };

    chartInstance.current.setOption(option);
  };

  // 监听数据变化，重新渲染图表
  useEffect(() => {
    if (data.length > 0) {
      initChart();
    }
  }, [data]);

  // 组件挂载时获取数据
  useEffect(() => {
    fetchData();
  }, [defaultDateTime, selectedMonth]);

  // 监听窗口大小变化，确保图表自适应
  useEffect(() => {
    const handleResize = () => {
      if (chartInstance.current) {
        chartInstance.current.resize();
      }
    };

    window.addEventListener('resize', handleResize);
    
    // 使用ResizeObserver监听容器大小变化
    const resizeObserver = new ResizeObserver(() => {
      if (chartInstance.current) {
        chartInstance.current.resize();
      }
    });
    
    if (chartRef.current) {
      resizeObserver.observe(chartRef.current);
    }

    return () => {
      window.removeEventListener('resize', handleResize);
      resizeObserver.disconnect();
      if (chartInstance.current) {
        chartInstance.current.dispose();
      }
    };
  }, []);

  // 使用刷新Hook，配置对应的模块代码
  useGlobalRefresh(fetchData, '38');

  return (
    <ChartWrapper>
      <PanelHeader>每周高峰时刻</PanelHeader>
      <ChartContainer>
        <div 
          ref={chartRef} 
          style={{ 
            width: '100%', 
            height: '100%',
            opacity: loading ? 0.5 : 1,
            transition: 'opacity 0.3s ease'
          }} 
        />
      </ChartContainer>
    </ChartWrapper>
  );
};

export default PeakHoursChart; 