import React, { useEffect, useRef } from 'react';
import { Typography } from 'antd';
import DescriptionItem from '@/components/DescriptionItem';
import * as echarts from 'echarts/core';
import { PieChart } from 'echarts/charts';
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent
} from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';
import styles from './index.less';

// Register the required components
echarts.use([
  PieChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  CanvasRenderer
]);

// Importing the necessary assets
import lankillDot from '@/assets/img/lankill-dot.png';  // This should be a green dot
import burnDot from '@/assets/img/burn-dot.png';       // This should be a yellow dot
import ModuleTitleWithTabs from '@/pages/Home_v_2504/components/common/ModuleTitleWithTabs';
import GenderPieChart from './components/GenderPieChart';

// Mock chart data
const data = {
  landfill: {
    value: 52.5,
    percentage: 31.5
  },
  incineration: {
    value: 98.5,
    percentage: 68.5
  },
  total: 155.8
};

const OverallSituation: React.FC = () => {
  const chartRef = useRef<HTMLDivElement>(null);
  const chartInstance = useRef<echarts.ECharts | null>(null);

  useEffect(() => {
    if (chartRef.current) {
      // Initialize the chart
      chartInstance.current = echarts.init(chartRef.current);
      
      // Chart options
      const option = {
        color: ['#3BFFA0', '#FFD055'],
        series: [
          {
            name: '处置情况',
            type: 'pie',
            radius: ['70%', '90%'],
            avoidLabelOverlap: false,
            label: {
              show: false
            },
            emphasis: {
              label: {
                show: false
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: data.landfill.value, name: '填埋量' },
              { value: data.incineration.value, name: '焚烧量' }
            ]
          }
        ]
      };
      
      // Set options and render chart
      chartInstance.current.setOption(option);
    }
    
    // Cleanup function
    return () => {
      if (chartInstance.current) {
        chartInstance.current.dispose();
        chartInstance.current = null;
      }
    };
  }, []);

  // Handle window resize
  useEffect(() => {
    const handleResize = () => {
      if (chartInstance.current) {
        chartInstance.current.resize();
      }
    };

    window.addEventListener('resize', handleResize);
    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []);

  return (
    <div className={styles.container}>
      <ModuleTitleWithTabs 
        title="整体情况"
      />
      <div className={styles.contentContainer}>
        <div className={styles.dataSection}>
          <div className={styles.legendItem}>
            <span className={styles.legendText}>填埋量</span>
            <div className={styles.greenDot} />
          </div>
          <DescriptionItem
            direction="vertical"
            name={''}
            value={data.landfill.value}
            valueStyle={{
              color: '#3BFFA0',
              fontFamily: 'D-DIN',
              fontSize: 30,
              fontWeight: 700
            }}
            unit="万吨"
            unitStyle={{
              color: '#BCCEE9',
              fontFamily: '微软雅黑',
              fontSize: 16,
              fontWeight: 400,
              lineHeight: '21px'
            }}
            decimals={2}
          />
          <DescriptionItem
            direction="vertical"
            name={''}
            value={data.landfill.percentage}
            valueStyle={{
              color: '#FFF',
              fontFamily: 'D-DIN',
              fontSize: 20,
              fontWeight: 700
            }}
            unit="%"
            unitStyle={{
              color: '#BCCEE9',
              fontFamily: '微软雅黑',
              fontSize: 16,
              fontWeight: 400,
              lineHeight: '21px'
            }}
            decimals={2}
          />
        </div>
        
        <div className={styles.pieChartContainer}>
          <GenderPieChart />
        </div>
        
        <div className={styles.dataSection}>
          <div className={styles.legendItem}>
            {/* <img className={styles.legendDot} src={burnDot} alt="焚烧量" /> */}
            <div className={styles.yellowDot} />
            <span className={styles.legendText}>焚烧量</span>
          </div>
          <DescriptionItem
            direction="vertical"
            name={''}
            value={data.incineration.value}
            valueStyle={{
              color: '#FFD055',
              fontFamily: 'D-DIN',
              fontSize: 30,
              fontWeight: 700
            }}
            unit="万吨"
            unitStyle={{
              color: '#BCCEE9',
              fontFamily: '微软雅黑',
              fontSize: 16,
              fontWeight: 400,
              lineHeight: '21px'
            }}
            decimals={2}
          />
          <DescriptionItem
            direction="vertical"
            name={''}
            value={data.incineration.percentage}
            valueStyle={{
              color: '#FFF',
              fontFamily: 'D-DIN',
              fontSize: 20,
              fontWeight: 700
            }}
            unit="%"
            unitStyle={{
              color: '#BCCEE9',
              fontFamily: '微软雅黑',
              fontSize: 16,
              fontWeight: 400,
              lineHeight: '21px'
            }}
            decimals={2}
          />
        </div>
      </div>
    </div>
  );
};

export default OverallSituation; 