import React, { useRef, useEffect, useState, useCallback } from 'react';
import ReactECharts from 'echarts-for-react';
import styled from 'styled-components';
import 'echarts-liquidfill'; // 引入水波插件
import * as echarts from 'echarts'; // 导入echarts
import { apiGet } from '../../utils/request'; // 引入统一接口请求方法
import { getDefaultDate } from '../../App'; // 导入获取默认日期的函数
import useGlobalRefresh from '../../hooks/useGlobalRefresh'; // 导入全局刷新钩子
import { useRefreshConfig } from '../../hooks/useRefreshConfig'; // 导入刷新配置hook

// 外层容器，纵向布局，顶部为标题，下方为左右结构
const Wrapper = styled.div`
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
`;

// 左侧图表区
const ChartArea = styled.div`
  flex: 7;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  height: 100%;
  /* padding-left: 1vw; */
`;

// 标题区，统一用PanelHeader，保证背景图显示和风格一致
const PanelHeader = styled.div`
  position: relative;
  width: 65%;
  height: 1.6vw;
  padding-left:4%;
  text-align: left;
  line-height: 1.6vw;
  font-size: 0.8vw;
  color: #fff;
  font-family: 'DingTalk JinBuTi', 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif;
  background: url('/component_header_bg.png') no-repeat;
  background-size: 100% 100%;
`;

// 图例区
const LegendBar = styled.div`
  display: flex;
  align-items: center;
  gap: 1vw;
  padding-left: 2%;
  margin-bottom: 0.3vw;
`;
const LegendItem = styled.div<{color: string}>`
  display: flex;
  align-items: center;
  font-size: 0.7vw;
  color: #CCE6FF;
  .block {
    width: 0.7vw;
    height: 0.7vw;
    background: ${props => props.color};
    border-radius: 0.15vw;
    margin-right: 0.3vw;
  }
`;

// 右侧卡片区，说明区底部对齐
const CardArea = styled.div`
  flex: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  justify-content: flex-end;
  padding-bottom: 2.5%;
`;
// 说明区底部容器，自动推到底部
const CardBottom = styled.div`
  margin-top: 0.5vw;
  display: flex;
  flex-direction: column;
  align-items: center;
`;

// 水波比例卡片外层，缩小尺寸
const WaterCard = styled.div`
  position: relative;
  width: 8.5vw;
  height: 8.5vw;
  min-width: 80px;
  min-height: 80px;
  background: none;
  border-radius: 50%;
  box-shadow: 0 0 16px 0 rgba(0,0,0,0.18);
  display: flex;
  align-items: center;
  justify-content: center;
`;

// 百分比大号数字，字体调小
const WaterPercent = styled.div`
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.8vw;
  color: #FFEA80;
  font-family: 'DingTalk JinBuTi', 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif;
  font-weight: bold;
  text-shadow: 0 2px 8px rgba(0,0,0,0.18);
`;

// 水波底色
const WaterWave = styled.div<{percent: number}>`
  position: absolute;
  left: 0; bottom: 0;
  width: 100%;
  height: ${props => 100 - props.percent}%;
  background: linear-gradient(180deg, #FFEA80 0%, #FFB74D 100%);
  border-radius: 0 0 9vw 9vw / 0 0 9vw 9vw;
  z-index: 1;
`;

// 说明文字，减小字体和间距
const CardLabel = styled.div`
  color: #fff;
  font-size: 0.8vw;
  margin-top: 0.1vw;
  margin-bottom: 0.1vw;
  text-align: center;
  font-family:'SourceHanSansCN';
`;

// 较上月百分比区，减小字体
const CardChange = styled.div`
  font-size: 0.6vw;
  color: #CCE6FF;
  display: flex;
  align-items: center;
  justify-content: center;
  .percent {
    font-size: 0.8vw;
    font-family: 'DingTalk JinBuTi', 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif;
    font-weight: bold;
    margin: 0 0.1vw 0 0.3vw;
  }
  .arrow-img {
    width: 0.7vw;
    height: 0.7vw;
    margin-left: 0.05vw;
    vertical-align: middle;
    /* 上下浮动动画 */
    animation: arrowFloat 1.2s infinite ease-in-out;
  }
  /* 定义动画关键帧 */
  @keyframes arrowFloat {
    0% { transform: translateY(0); }
    50% { transform: translateY(-0.3vw); }
    100% { transform: translateY(0); }
  }
`;

// 横向内容区，左右结构
const Row = styled.div`
  display: flex;
  width: 100%;
  height: 100%;
`;

// 定义接口数据类型
interface PickupRate {
  todayRate: number;     // 当天15分钟内取药比例
  lastMonthRate: number; // 上月15分钟内取药比例
  growthRate: number;    // 15分钟内取药比例环比
}

interface PickupIntervalRate {
  interval: string;      // 时间区间
  rate: number;          // 占比
}

interface HourlyPickupRate {
  timePeriod?: string;           // 时段描述，如 "08:00-09:00"
  timePeriodStart?: string;      // 时段开始时间，如 "08:00"
  pickupIntervalRates?: PickupIntervalRate[]; // 该时段内的取药区间率数据
  // 兼容实际接口返回的字段
  hour?: string;                 // 小时，如 "8"
  hourLabel?: string;            // 小时标签，如 "08:00"（取药接口使用）
  hourLable?: string;            // 小时标签，如 "08:00"（配药接口使用，注意拼写）
  preparationIntervalRates?: PreparationIntervalRate[]; // 配药时间区间数据
}

interface PtTakeDrugTimeRes {
  pickupRate: PickupRate;                // 取药率数据
  hourlyPickupRates: HourlyPickupRate[]; // 时段取药数据
}

// 新接口数据类型 - 配药时间接口
interface DrugPrepareStats {
  currentRate: number;      // 15分钟取药比例
  lastMonthRate: number;    // 上个月的15分钟取药比例
  growthRate: number;       // 环比增长率
}

interface PreparationIntervalRate {
  interval: string;         // 配药时间区间
  rate: number;            // 比例
}

interface DrugPrepareTimeRes {
  drugPrepareStats?: DrugPrepareStats;                    // 配药情况（可选）
  hourlyRates?: HourlyPickupRate[];                       // 时段取药情况（可选）
  preparationIntervalRates?: PreparationIntervalRate[];  // 配药时间区间情况（可选）
  // 兼容实际接口返回的字段
  hourlyPickupRates?: HourlyPickupRate[];                 // 实际接口返回的时段数据
  pickupRate?: PickupRate;                                // 实际接口返回的取药率数据
}

// 判断是否为mock模式
const useMock = import.meta.env.VITE_USE_MOCK === 'true';

// mock 数据-图例不变
const legendList = [
  { label: '<5min', color: '#4A9FF2' },
  { label: '5~10min', color: '#44E4CA' },
  { label: '10~15min', color: '#FFD666' },
  { label: '>15min', color: '#FF6680' }
];

// mock数据，结构与接口一致
const mockPtTakeDrugTime: PtTakeDrugTimeRes = {
  pickupRate: {
    todayRate: 0.95,      // 95%
    lastMonthRate: 0.9388, // 93.88%
    growthRate: 0.012     // +1.2%
  },
  hourlyPickupRates: [
    { timePeriod: '08:00-09:00', timePeriodStart: '08:00', pickupIntervalRates: [] },
    { timePeriod: '09:00-10:00', timePeriodStart: '09:00', pickupIntervalRates: [] },
    { timePeriod: '10:00-11:00', timePeriodStart: '10:00', pickupIntervalRates: [] },
    { timePeriod: '11:00-12:00', timePeriodStart: '11:00', pickupIntervalRates: [] },
    { timePeriod: '12:00-13:00', timePeriodStart: '12:00', pickupIntervalRates: [] },
    { timePeriod: '13:00-14:00', timePeriodStart: '13:00', pickupIntervalRates: [] },
    { timePeriod: '14:00-15:00', timePeriodStart: '14:00', pickupIntervalRates: [] },
    { timePeriod: '15:00-16:00', timePeriodStart: '15:00', pickupIntervalRates: [] },
    { timePeriod: '16:00-17:00', timePeriodStart: '16:00', pickupIntervalRates: [] },
    { timePeriod: '17:00-18:00', timePeriodStart: '17:00', pickupIntervalRates: [] }
  ]
};

const PatientMedicineTimeChart: React.FC = () => {
  const chartRef = useRef<ReactECharts>(null);
  // 自适应字体和圆角
  const [axisFontSize, setAxisFontSize] = useState(12);
  const [barRadius, setBarRadius] = useState(6); // 柱状图圆角自适应
  const [liquidFontSize, setLiquidFontSize] = useState(28); // 水波图字体大小自适应
  
  // 接口数据state
  const [ptTakeDrugData, setPtTakeDrugData] = useState<PtTakeDrugTimeRes | null>(null);
  const [drugPrepareData, setDrugPrepareData] = useState<DrugPrepareTimeRes | null>(null);
  const [isLoading, setIsLoading] = useState(false); // 防止重复请求
  
  // 获取刷新配置，模块code为'22'
  const { defaultFlag, loading: configLoading } = useRefreshConfig('22');

  // 获取水波option - 移到组件内部以访问liquidFontSize
  const getLiquidOption = (percent: number) => {
    // 根据百分比值确定渐变颜色
    let waveGradient;
    if (percent < 90) {
      // 红色渐变
      waveGradient = new echarts.graphic.LinearGradient(
        0, 0, 0, 1,
        [
          { offset: 0, color: '#FF4D4D' },
          { offset: 1, color: '#FFAA80' }
        ]
      );
    } else if (percent <= 95) {
      // 黄色渐变
      waveGradient = new echarts.graphic.LinearGradient(
        0, 0, 0, 1,
        [
          { offset: 0, color: '#FFA64D' },
          { offset: 1, color: '#FFEA80' }
        ]
      );
    } else {
      // 绿色渐变
      waveGradient = new echarts.graphic.LinearGradient(
        0, 0, 0, 1,
        [
          { offset: 0, color: '#29CC96' },
          { offset: 1, color: '#79F28D' }
        ]
      );
    }

    return {
      series: [{
        type: 'liquidFill',
        radius: '65%',
        center: ['50%', '50%'],
        data: [percent / 100],
        backgroundStyle: { color: 'transparent' },
        outline: { show: false },
        color: [waveGradient], // 使用渐变色
        amplitude: '8%',
        waveLength: '80%',
        label: {
          normal: {
            formatter: `${percent}%`,
            fontSize: liquidFontSize, // 使用自适应字体大小
            color: '#fff',
            fontFamily: 'DingTalk JinBuTi, PingFang SC, Microsoft YaHei, Arial, sans-serif',
            fontWeight: 'bold',
            insideColor: '#fff',
            shadowColor: 'rgba(0,0,0,0.18)',
            shadowBlur: 2
          }
        }
      }]
    };
  };

  // 请求接口数据的函数
  const fetchData = useCallback(async () => {
    // 防止重复请求
    if (isLoading) {
      return;
    }
    
    setIsLoading(true);
    
    try {
      if (useMock) {
        // mock模式下使用模拟数据
        setPtTakeDrugData(mockPtTakeDrugTime);
      } else {
        const dateTime = getDefaultDate(); // 使用获取默认日期的函数
        
        if (defaultFlag) {
          // defaultFlag为true时，使用原接口
          const res = await apiGet('/todayData/ptTakeDrugTime', { params: { dateTime } });
          if (res.data && res.data.data) {
            setPtTakeDrugData(res.data.data);
            setDrugPrepareData(null); // 清空另一个接口的数据
          }
        } else {
          // defaultFlag为false时，使用新接口
          const res = await apiGet('/todayData/drugPrepareTime', { params: { dateTime } });
          if (res.data && res.data.data) {
            setDrugPrepareData(res.data.data);
            setPtTakeDrugData(null); // 清空另一个接口的数据
          }
        }
      }
    } catch (error) {
      console.error('获取患者取药/配药时间数据失败:', error);
    } finally {
      setIsLoading(false);
    }
  }, [useMock, defaultFlag]); // 移除isLoading依赖，避免循环依赖

  // 初始加载数据 - 当defaultFlag变化时重新获取数据
  useEffect(() => {
    // 只有当defaultFlag不为undefined且配置加载完成时才获取数据
    if (defaultFlag !== undefined && !configLoading) {
      fetchData();
    }
  }, [defaultFlag, configLoading, fetchData]);

  // 使用全局刷新钩子，指定模块代码'22'
  useGlobalRefresh(() => {
    // 直接调用fetchData，不依赖useCallback
    if (!isLoading && defaultFlag !== undefined && !configLoading) {
      fetchData();
    }
  }, '22');

  // 监听容器宽度自适应
  useEffect(() => {
    const calcFont = () => {
      if (chartRef.current) {
        const width = (chartRef.current.getEchartsInstance().getWidth?.() || 600);
        setAxisFontSize(Math.max(10, Math.min(18, Math.floor(width * 0.018))));
        setBarRadius(Math.max(2, Math.floor(width * 0.005))); // 圆角自适应，比例可调
        setLiquidFontSize(Math.max(16, Math.min(32, Math.floor(width * 0.045)))); // 水波图字体自适应
      }
    };
    calcFont();
    window.addEventListener('resize', calcFont);
    setTimeout(calcFont, 200);
    return () => window.removeEventListener('resize', calcFont);
  }, []);

  // 处理数据，适配图表所需格式
  // 从接口数据中提取x轴时间数据
  let xAxisData: string[] = [];
  
  if (defaultFlag && ptTakeDrugData && ptTakeDrugData.hourlyPickupRates) {
    // 患者取药时间接口：使用 timePeriodStart
    xAxisData = ptTakeDrugData.hourlyPickupRates
      .map(item => item.timePeriodStart || '')
      .filter(Boolean);
    console.log('取药时间x轴数据:', xAxisData, '原始数据:', ptTakeDrugData.hourlyPickupRates);
  } else if (!defaultFlag && drugPrepareData && drugPrepareData.hourlyRates) {
    // 患者配药时间接口：使用 hourLable（注意接口返回的字段名拼写）
    xAxisData = drugPrepareData.hourlyRates
      .map(item => item.hourLable || '')
      .filter(Boolean);
    console.log('配药时间x轴数据:', xAxisData, '原始数据:', drugPrepareData.hourlyRates);
  }
  
  // 如果x轴数据为空，记录日志但不添加假数据
  if (xAxisData.length === 0) {
    console.warn('x轴数据为空，接口未返回有效数据');
  }
  
  // 准备柱状图数据，只使用接口真实数据，不再使用模拟数据填充
  // 创建四个空数组用于存储四个时间区间的数据（<5min, 5~10min, 10~15min, >15min）
  const intervalData: number[][] = [[], [], [], []];
  
  // 只有当接口返回数据时才进行处理
  if (defaultFlag && ptTakeDrugData && ptTakeDrugData.hourlyPickupRates) {
    // 使用原接口数据
    ptTakeDrugData.hourlyPickupRates.forEach(hourlyItem => {
      // 获取该时段的区间数据
      const intervalRates = hourlyItem.pickupIntervalRates;
      
      // 如果该时段有区间数据，则填充到对应区间数组
      if (intervalRates && intervalRates.length > 0) {
        // 假设接口返回的区间顺序与图例顺序一致
        intervalRates.forEach((rate, idx) => {
          if (idx < 4) {
            intervalData[idx].push(rate.rate * 100); // 转为百分比
          }
        });
      } else {
        // 如果该时段没有区间数据，则每个区间填充0
        intervalData.forEach(arr => arr.push(0));
      }
    });
  } else if (!defaultFlag && drugPrepareData && drugPrepareData.hourlyRates) {
    // 患者配药时间接口：使用 hourlyRates 数组
    drugPrepareData.hourlyRates.forEach((hourlyItem) => {
      // 患者配药时间接口：使用 preparationIntervalRates 字段
      const intervalRates = hourlyItem.preparationIntervalRates;
      
      // 如果该时段有区间数据，则填充到对应区间数组
      if (intervalRates && intervalRates.length > 0) {
        // 假设接口返回的区间顺序与图例顺序一致
        intervalRates.forEach((rate, idx) => {
          if (idx < 4) {
            intervalData[idx].push(rate.rate * 100); // 转为百分比
          }
        });
      } else {
        // 如果该时段没有区间数据，则每个区间填充0
        intervalData.forEach(arr => arr.push(0));
      }
    });
  }
  
  // 2. 水波图数据 - 15分钟内取药/配药比例
  // 将小数转为百分比，并保留1位小数
  let percentValue = 0;
  if (defaultFlag && ptTakeDrugData && ptTakeDrugData.pickupRate) {
    // 患者取药时间接口：使用 pickupRate.todayRate
    percentValue = Math.round(ptTakeDrugData.pickupRate.todayRate * 1000) / 10;
  } else if (!defaultFlag && drugPrepareData && drugPrepareData.drugPrepareStats) {
    // 患者配药时间接口：使用 drugPrepareStats.currentRate
    const rate = drugPrepareData.drugPrepareStats.currentRate;
    percentValue = Math.round(rate * 1000) / 10;
  }
  
  // 3. 环比数据 - 计算较上月的变化并格式化
  // 增长率，小数转百分比并保留1位小数
  let growthRateValue = 0;
  if (defaultFlag && ptTakeDrugData && ptTakeDrugData.pickupRate) {
    // 患者取药时间接口：使用 pickupRate.growthRate
    growthRateValue = Math.round(ptTakeDrugData.pickupRate.growthRate * 1000) / 10;
  } else if (!defaultFlag && drugPrepareData && drugPrepareData.drugPrepareStats) {
    // 患者配药时间接口：使用 drugPrepareStats.growthRate
    growthRateValue = Math.round(drugPrepareData.drugPrepareStats.growthRate * 1000) / 10;
  }
  const changeText = growthRateValue >= 0 ? `+${growthRateValue}%` : `${growthRateValue}%`;
  
  // 4. 变化类型：上升、下降或持平
  let changeType: string = 'zero';
  if (growthRateValue > 0) changeType = 'up';
  else if (growthRateValue < 0) changeType = 'down';
  
  // 获取波形颜色，与水波图颜色保持一致
  const getPercentColor = (percent: number) => {
    if (percent < 90) {
      return '#FF4D4D'; // 红色渐变顶部色
    } else if (percent <= 95) {
      return '#FFA64D'; // 黄色渐变顶部色
    } else {
      return '#29CC96'; // 绿色渐变顶部色
    }
  };
  
  const percentColor = getPercentColor(percentValue);

  // 获取柱状图配置
  const getBarConfig = () => {
    return {
      tooltip: {
        trigger: 'axis',
        axisPointer: { type: 'shadow' },
        textStyle: { fontSize: axisFontSize }
      },
      legend: { show: false },
      grid: { left: '3%', right: '3%', bottom: '2%', top: '10%', containLabel: true },
      xAxis: {
        type: 'category',
        data: xAxisData,
        axisLine: { 
          show: xAxisData.length > 0,
          lineStyle: { color: 'rgba(255,255,255,0.3)' } 
        },
        axisLabel: { 
          show: xAxisData.length > 0,
          color: '#CCE6FF', 
          fontSize: axisFontSize, 
          align: 'center',
          margin: 8,
          interval: 0  // 显示所有标签
        },
        axisTick: { 
          show: xAxisData.length > 0,
          alignWithLabel: true,
          length: 4
        }
      },
      yAxis: {
        type: 'value',
        min: 0,
        max: 100,
        interval: 20,
        axisLine: { show: false },
        axisTick: { show: false },
        splitLine: { 
          show: xAxisData.length > 0,
          lineStyle: { color: 'rgba(255,255,255,0.1)', type: 'solid' } 
        },
        axisLabel: {
          show: xAxisData.length > 0,
          color: '#CCE6FF',
          fontSize: axisFontSize,
          formatter: (val: number) => val + '%'
        }
      },
      series: legendList.map((item, idx) => ({
        name: item.label,
        type: 'bar',
        stack: 'total',
        barWidth: '18%',
        itemStyle: {
          color: item.color,
          borderRadius: idx === legendList.length - 1 ? [barRadius, barRadius, 0, 0] : 0
        },
        data: intervalData[idx] // 使用处理后的真实数据
      }))
    };
  };

  return (
    <Wrapper>
      {/* 标题区，居中显示 */}
      <PanelHeader>{defaultFlag ? '患者取药时间' : '患者配药时间'}</PanelHeader>
      {/* 横向内容区，左右结构 */}
      <Row>
        {/* 左侧堆叠柱状图区 */}
        <ChartArea>
          <LegendBar>
            {legendList.map(item => (
              <LegendItem key={item.label} color={item.color}>
                <span className="block" />{item.label}
              </LegendItem>
            ))}
          </LegendBar>
          {xAxisData.length > 0 ? (
            <ReactECharts
              ref={chartRef}
              option={getBarConfig()}
              style={{ width: '100%', height: '80%' }}
              opts={{ renderer: 'canvas' }}
            />
          ) : (
            <div style={{ 
              width: '100%', 
              height: '80%', 
              display: 'flex', 
              justifyContent: 'center', 
              alignItems: 'center',
              color: '#7e9bcc',
              fontSize: '0.8vw'
            }}>
              暂无数据
            </div>
          )}
        </ChartArea>
        {/* 右侧水波比例卡片区 */}
        <CardArea>
          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
            <WaterCard>
              {/* 水波动效 */}
              <ReactECharts
                option={getLiquidOption(percentValue)}
                style={{ width: '100%', height: '100%' }}
                opts={{ renderer: 'canvas' }}
              />
              {/* 高光背景图，绝对定位在最上层 */}
              <img
                src="/qipaozhaotu_bg.png"
                alt=""
                style={{
                  position: 'absolute',
                  left: 0,
                  top: 0,
                  width: '100%',
                  height: '100%',
                  pointerEvents: 'none',
                  zIndex: 2
                }}
              />
            </WaterCard>
            <CardBottom>
              <CardLabel>{defaultFlag ? '15分钟取药比例' : '15分钟配药比例'}</CardLabel>
              <CardChange>
                较上月
                <span className="percent" style={{color:changeType === 'up'?'#FFBF80':'#72E6AC'}}>{changeText}</span>
                {changeType === 'up' && (
                  <img className="arrow-img" src="/arrow_up.png" alt="up" />
                )}
                {changeType === 'down' && (
                  <img className="arrow-img" src="/arrow_down.png" alt="down" />
                )}
              </CardChange>
            </CardBottom>
          </div>
        </CardArea>
      </Row>
    </Wrapper>
  );
};

export default PatientMedicineTimeChart;