import React, { useState, useEffect } from 'react';
import { Row, Col, Card, Statistic, DatePicker, Select, Button, message } from 'antd';
import { UserOutlined, GiftOutlined, CalendarOutlined, TeamOutlined, DownloadOutlined } from '@ant-design/icons';
import { useSelector, useDispatch } from 'react-redux';
import { setOverview, setLoading, setError } from '../../store/slices/statisticsSlice';
import { statisticsAPI } from '../../services/api';
import ReactECharts from 'echarts-for-react';
import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn';
import locale from 'antd/es/date-picker/locale/zh_CN';

const { RangePicker } = DatePicker;
const { Option } = Select;

// 设置dayjs默认语言为中文
dayjs.locale('zh-cn');

const StatisticsOverview = () => {
  const [timeRange, setTimeRange] = useState([dayjs().subtract(30, 'day'), dayjs()]);
  
  const dispatch = useDispatch();
  const { overview, loading, error } = useSelector((state) => state.statistics);

  // 获取数据概览
  const fetchOverviewData = async () => {
    try {
      dispatch(setLoading(true));
      const response = await statisticsAPI.getOverview();
      if (response.code === 0) {
        dispatch(setOverview(response.data));
      } else {
        dispatch(setError(response.msg || '获取数据失败'));
        message.error(response.msg || '获取数据失败');
      }
    } catch (error) {
      dispatch(setError(error.message));
      message.error(error.message);
    }
  };

  useEffect(() => {
    fetchOverviewData();
  }, [dispatch]);

  // 积分趋势图表配置
  const pointsTrendOption = {
    title: {
      text: '积分趋势分析',
      left: 'center',
    },
    tooltip: {
      trigger: 'axis',
    },
    legend: {
      data: ['积分数量'],
      bottom: 10,
    },
    xAxis: {
      type: 'category',
      data: overview.pointsTimeList?.map(item => item.timeName) || [],
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        name: '积分数量',
        type: 'line',
        data: overview.pointsTimeList?.map(item => item.timeCount) || [],
        smooth: true,
        itemStyle: {
          color: '#1890ff',
        },
      },
    ],
  };

  // 志愿者增长图表配置
  const volunteerGrowthOption = {
    title: {
      text: '志愿者增长趋势',
      left: 'center',
    },
    tooltip: {
      trigger: 'axis',
    },
    xAxis: {
      type: 'category',
      data: overview.volTimeList?.map(item => item.timeName) || [],
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        name: '志愿者总数',
        type: 'line',
        data: overview.volTimeList?.map(item => item.timeCount) || [],
        smooth: true,
        itemStyle: {
          color: '#722ed1',
        },
        areaStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              { offset: 0, color: 'rgba(114, 46, 209, 0.3)' },
              { offset: 1, color: 'rgba(114, 46, 209, 0.1)' },
            ],
          },
        },
      },
    ],
  };

  // 活动参与度图表配置
  const activityParticipationOption = {
    title: {
      text: '活动参与度分析',
      left: 'center',
    },
    tooltip: {
      trigger: 'item',
    },
    series: [
      {
        name: '参与情况',
        type: 'pie',
        radius: ['40%', '70%'],
        center: ['50%', '50%'],
        data: overview.typeList?.map(item => ({
          value: item.typeCount,
          name: item.typeName
        })) || [],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)',
          },
        },
      },
    ],
  };

  // 积分分布图表配置
  const pointsDistributionOption = {
    title: {
      text: '积分分布情况',
      left: 'center',
    },
    tooltip: {
      trigger: 'axis',
    },
    xAxis: {
      type: 'category',
      data: overview.distributionList?.map(item => item.typeName) || [],
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        name: '志愿者数量',
        type: 'bar',
        data: overview.distributionList?.map(item => item.typeCount) || [],
        itemStyle: {
          color: '#faad14',
        },
      },
    ],
  };


  const handleTimeRangeChange = (dates) => {
    setTimeRange(dates);
    // 根据时间范围重新获取数据
    fetchOverviewData();
  };

  const handleExport = () => {
    // 导出数据逻辑
    console.log('导出数据');
  };

  return (
    <div>
      <div className="page-header">
        <h1 className="page-title">数据概览</h1>
        <p className="page-description">查看志愿者服务的整体数据统计和趋势分析</p>
      </div>

      {/* 筛选条件 */}
      <Card style={{ marginBottom: 16 }}>
        <Row gutter={[16, 16]} align="middle">
          <Col>
            <span style={{ marginRight: 8 }}>时间范围：</span>
            <RangePicker
              value={timeRange}
              onChange={handleTimeRangeChange}
              style={{ width: 240 }}
              locale={locale}
            />
          </Col>
          <Col>
            <Button type="primary" icon={<DownloadOutlined />} onClick={handleExport}>
              导出数据
            </Button>
          </Col>
        </Row>
      </Card>

      {/* 核心指标 */}
      <Row gutter={[16, 16]} style={{ marginBottom: 24 }}>
        <Col xs={24} sm={12} lg={6}>
          <Card loading={loading}>
            <Statistic
              title="志愿者总数"
              value={overview.totalVolunteers}
              prefix={<UserOutlined />}
              valueStyle={{ color: '#1890ff' }}
            />
          </Card>
        </Col>
        <Col xs={24} sm={12} lg={6}>
          <Card loading={loading}>
            <Statistic
              title="积分总数"
              value={overview.totalPoints}
              prefix={<GiftOutlined />}
              valueStyle={{ color: '#52c41a' }}
            />
          </Card>
        </Col>
        <Col xs={24} sm={12} lg={6}>
          <Card loading={loading}>
            <Statistic
              title="活动总数"
              value={overview.totalActivities}
              prefix={<CalendarOutlined />}
              valueStyle={{ color: '#faad14' }}
            />
          </Card>
        </Col>
        <Col xs={24} sm={12} lg={6}>
          <Card loading={loading}>
            <Statistic
              title="报名总数"
              value={overview.totalRegistrations}
              prefix={<TeamOutlined />}
              valueStyle={{ color: '#722ed1' }}
            />
          </Card>
        </Col>
      </Row>

      {/* 图表区域 */}
      <Row gutter={[16, 16]} style={{ marginBottom: 24 }}>
        <Col xs={24} lg={12}>
          <Card loading={loading}>
            <ReactECharts option={pointsTrendOption} style={{ height: 350 }} />
          </Card>
        </Col>
        <Col xs={24} lg={12}>
          <Card loading={loading}>
            <ReactECharts option={volunteerGrowthOption} style={{ height: 350 }} />
          </Card>
        </Col>
      </Row>

      <Row gutter={[16, 16]} style={{ marginBottom: 24 }}>
        <Col xs={24} lg={12}>
          <Card loading={loading}>
            <ReactECharts option={activityParticipationOption} style={{ height: 350 }} />
          </Card>
        </Col>
        <Col xs={24} lg={12}>
          <Card loading={loading}>
            <ReactECharts option={pointsDistributionOption} style={{ height: 350 }} />
          </Card>
        </Col>
      </Row>

    </div>
  );
};

export default StatisticsOverview;