import React, { useEffect, useState } from 'react';
import ReactECharts from 'echarts-for-react';
import * as echarts from 'echarts';
import { PanelContainer, PanelTitle, MetricsContainer, MetricCard, ProgressContainer } from '../styled/DashboardStyles';
import styled from 'styled-components';
import { getCoreMetrics } from '../../utils/mockData';

// 指标卡片包装器
const MetricCardsWrapper = styled.div`
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100%;
`;

// 进度条图表包装器
const ChartWrapper = styled.div`
  display: flex;
  height: 100%;
  flex-direction: column;
`;

// 进度图表和指标布局
const ProgressAndMetrics = styled.div`
  display: grid;
  grid-template-columns: 1fr 2fr;
  height: calc(100% - 30px);
  gap: 10px;
`;

const CoreMetricsChart: React.FC = () => {
  const [metrics, setMetrics] = useState(getCoreMetrics());
  
  useEffect(() => {
    const timer = setInterval(() => {
      setMetrics(getCoreMetrics());
    }, 30000);
    
    return () => clearInterval(timer);
  }, []);
  
  // 环形进度图配置
  const getProgressOption = () => {
    return {
      series: [
        {
          type: 'pie',
          radius: ['75%', '90%'],
          avoidLabelOverlap: false,
          label: {
            show: false,
          },
          emphasis: {
            scale: false
          },
          silent: true,
          animation: false,
          data: [
            { 
              value: 20, 
              name: '待就诊',
              itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                  { offset: 0, color: '#00b4ff' },
                  { offset: 1, color: '#00fffc' }
                ])
              }
            },
            { 
              value: 80, 
              name: '剩余',
              itemStyle: {
                color: 'rgba(0, 50, 100, 0.3)'
              }
            }
          ]
        },
        {
          type: 'pie',
          radius: ['65%', '70%'],
          avoidLabelOverlap: false,
          label: {
            show: false,
          },
          emphasis: {
            scale: false
          },
          silent: true,
          animation: false,
          data: [
            { 
              value: 100, 
              name: '背景圆环',
              itemStyle: {
                color: 'rgba(0, 100, 220, 0.1)'
              }
            }
          ]
        }
      ]
    };
  };
  
  // 渲染指标卡片
  const renderMetricCard = (title: string, value: number, ratio: number, change: number, isDown: boolean = false) => {
    return (
      <MetricCard>
        <div className="title">{title} (人)</div>
        <div className="value">{value}</div>
        <div className={`change ${isDown ? 'down' : 'up'}`}>
          较上月 {isDown ? '↓' : '↑'}{change}%
        </div>
      </MetricCard>
    );
  };
  
  return (
    <PanelContainer>
      <PanelTitle>统计状态一览</PanelTitle>
      <ProgressAndMetrics>
        <ChartWrapper>
          <ProgressContainer>
            <div className="progress-value">20</div>
            <ReactECharts 
              option={getProgressOption()} 
              style={{ height: '100%', width: '100%' }} 
              opts={{ renderer: 'canvas' }}
            />
          </ProgressContainer>
          <div style={{ textAlign: 'center', fontSize: '14px', color: '#7e9bcc', marginTop: '5px' }}>待就诊</div>
        </ChartWrapper>
        
        <MetricCardsWrapper>
          {renderMetricCard('已就人数', metrics.todayPatients, metrics.patientRatio, metrics.patientChange)}
          {renderMetricCard('机构处方', metrics.prescriptions, metrics.prescriptionRatio, metrics.prescriptionChange, true)}
          {renderMetricCard('机备药品', metrics.medicines, metrics.medicineRatio, metrics.medicineChange)}
        </MetricCardsWrapper>
      </ProgressAndMetrics>
    </PanelContainer>
  );
};

export default CoreMetricsChart; 