import React, { useEffect, useState } from 'react';
import { Flex, Space, Statistic } from 'antd';
import type { StatisticProps } from 'antd';
import CountUp from 'react-countup';
import dayjs from 'dayjs';
import services from '@/services';
import styles from './index.less';
import TypeDistribution from './TypeDistribution';
import HighIncidenceTime from './HighIncidenceTime';
import ComplaintTrend from './ComplaintTrend';
import AreaDistribution from './AreaDistribution';

const formatter: StatisticProps['formatter'] = (value) => (
  <CountUp end={value as number} separator="" />
);

const formatter1: StatisticProps['formatter'] = (value) => (
    <CountUp end={value as number} decimals={1} separator="" />
    );

const PeopleComplaint: React.FC = () => {
  // 整体态势数据
  const [overallData, setOverallData] = useState<any>({});
  // 办理质效数据
  const [qualityData, setQualityData] = useState<any>({});

  const getDate = () => {
    const oneMonthAgo = dayjs().subtract(1, 'month');
    return { 
      startTime: oneMonthAgo.format('YYYY-MM-DD'), 
      endTime: dayjs().format('YYYY-MM-DD') 
    };
  };

  // 获取整体态势数据
  const getOverallData = async () => {
    const resp = await services.DataBase.getSjdzInfoData({
      typeCode: "quhs-ztts",
      params: {
        ...getDate()
      }
    });
    if (resp.code === 200) {
      setOverallData(resp.data?.data?.records[0]);
    }
  };

  // 获取办理质效数据
  const getQualityData = async () => {
    const resp = await services.DataBase.getSjdzInfoData({
      typeCode: "blzx",
      params: {
        ...getDate()
      }
    });
    if (resp.code === 200) {
      setQualityData(resp.data?.data?.records[0]);
    }
  };

  useEffect(() => {
    getOverallData();
    getQualityData();
  }, []);

  // 整体态势统计项
  const overallStatistics = [
    {
      label: '投诉总量',
      value: overallData?.zl || 0,
      unit: '件'
    },
    {
      label: '处置中',
      value: overallData?.blz || 0,
      unit: '件'
    }
  ];

  // 办理质效统计项
  const qualityStatistics = [
    {
      label: '按时办结率',
      value: qualityData?.asbj || 95,
      unit: '%'
    },
    {
      label: '重办率',
      value: qualityData?.cb || 5.5,
      unit: '%'
    },
    {
      label: '平均回复周期',
      value: qualityData?.pjsj || 2.5,
      unit: 'h'
    },
    {
      label: '满意率',
      value: qualityData?.my || 95,
      unit: '%'
    }
  ];

  return (
    <div className={styles.container}>
      {/* 整体态势 */}
      <Flex className={styles.statisticsRow} align="center" justify="space-between">
        {overallStatistics.map((item, index) => (
          <div key={index} className={styles.statisticItem}>
            <div className={styles.label}>{item.label}</div>
            <Space size={4}>
              <Statistic 
                value={item.value} 
                formatter={formatter}
                className={styles.value}
              />
              <span className={styles.unit}>{item.unit}</span>
            </Space>
          </div>
        ))}
        {/* 办理质效 */}
        {qualityStatistics.map((item, index) => (
          <div key={index} className={styles.statisticItem}>
            <div className={styles.label}>{item.label}</div>
            <Space size={4}>
              <Statistic 
                value={item.value} 
                formatter={formatter1}
                className={styles.value}
              />
              <span className={styles.unit}>{item.unit}</span>
            </Space>
          </div>
        ))}
      </Flex>
      <TypeDistribution />
      <div className={styles.gridContainer}>
        <div className={styles.leftColumn}>
          <HighIncidenceTime />
          <ComplaintTrend />
        </div>
        <div className={styles.rightColumn}>
          <AreaDistribution />
        </div>
      </div>
    </div>
  );
};

export default PeopleComplaint; 