import React from 'react';
import { Card, Row, Col } from 'antd';
import ReactECharts from 'echarts-for-react';

const StatisticsTrends = () => {
  // 积分趋势图表配置
  const pointsTrendOption = {
    title: {
      text: '积分趋势分析',
      left: 'center',
    },
    tooltip: {
      trigger: 'axis',
    },
    legend: {
      data: ['积分总数', '新增积分', '使用积分'],
      bottom: 10,
    },
    xAxis: {
      type: 'category',
      data: ['1月', '2月', '3月', '4月', '5月', '6月'],
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        name: '积分总数',
        type: 'line',
        data: [12000, 15000, 18000, 22000, 28000, 35000],
        smooth: true,
        itemStyle: {
          color: '#1890ff',
        },
      },
      {
        name: '新增积分',
        type: 'bar',
        data: [3000, 3500, 4000, 4500, 5000, 5500],
        itemStyle: {
          color: '#52c41a',
        },
      },
      {
        name: '使用积分',
        type: 'bar',
        data: [1000, 1200, 1500, 1800, 2000, 2200],
        itemStyle: {
          color: '#ff4d4f',
        },
      },
    ],
  };

  // 活动参与趋势图表配置
  const activityTrendOption = {
    title: {
      text: '活动参与趋势',
      left: 'center',
    },
    tooltip: {
      trigger: 'axis',
    },
    xAxis: {
      type: 'category',
      data: ['1月', '2月', '3月', '4月', '5月', '6月'],
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        name: '参与人数',
        type: 'line',
        data: [150, 180, 220, 280, 320, 380],
        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 volunteerGrowthOption = {
    title: {
      text: '志愿者增长趋势',
      left: 'center',
    },
    tooltip: {
      trigger: 'axis',
    },
    xAxis: {
      type: 'category',
      data: ['1月', '2月', '3月', '4月', '5月', '6月'],
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        name: '志愿者总数',
        type: 'line',
        data: [800, 900, 1000, 1100, 1200, 1250],
        smooth: true,
        itemStyle: {
          color: '#faad14',
        },
      },
      {
        name: '新增志愿者',
        type: 'bar',
        data: [50, 60, 70, 80, 90, 100],
        itemStyle: {
          color: '#13c2c2',
        },
      },
    ],
  };

  // 活动类型分布图表配置
  const activityTypeOption = {
    title: {
      text: '活动类型分布',
      left: 'center',
    },
    tooltip: {
      trigger: 'item',
    },
    series: [
      {
        name: '活动类型',
        type: 'pie',
        radius: '50%',
        data: [
          { value: 45, name: '社区服务' },
          { value: 30, name: '环保活动' },
          { value: 15, name: '敬老助残' },
          { value: 10, name: '其他活动' },
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)',
          },
        },
      },
    ],
  };

  return (
    <div>
      <div className="page-header">
        <h1 className="page-title">趋势分析</h1>
        <p className="page-description">分析志愿者服务的各项数据趋势</p>
      </div>

      <Row gutter={[16, 16]}>
        <Col xs={24} lg={12}>
          <Card>
            <ReactECharts option={pointsTrendOption} style={{ height: 400 }} />
          </Card>
        </Col>
        <Col xs={24} lg={12}>
          <Card>
            <ReactECharts option={activityTrendOption} style={{ height: 400 }} />
          </Card>
        </Col>
      </Row>

      <Row gutter={[16, 16]} style={{ marginTop: 16 }}>
        <Col xs={24} lg={12}>
          <Card>
            <ReactECharts option={volunteerGrowthOption} style={{ height: 400 }} />
          </Card>
        </Col>
        <Col xs={24} lg={12}>
          <Card>
            <ReactECharts option={activityTypeOption} style={{ height: 400 }} />
          </Card>
        </Col>
      </Row>
    </div>
  );
};

export default StatisticsTrends;