import React, { useState } from 'react';
import { Card, Table, Button, DatePicker, Select, Row, Col, Statistic } from 'antd';
import { DownloadOutlined, FileExcelOutlined, FilePdfOutlined } from '@ant-design/icons';

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

const ReportCenter = () => {
  const [reports] = useState([
    {
      key: '1',
      reportName: '志愿者积分月报表',
      type: '积分报表',
      generateTime: '2024-01-15 10:00:00',
      status: '已生成',
      size: '2.5MB',
    },
    {
      key: '2',
      reportName: '活动参与统计报表',
      type: '活动报表',
      generateTime: '2024-01-14 15:30:00',
      status: '已生成',
      size: '1.8MB',
    },
    {
      key: '3',
      reportName: '志愿者服务时长报表',
      type: '服务报表',
      generateTime: '2024-01-13 09:15:00',
      status: '生成中',
      size: '--',
    },
  ]);

  const columns = [
    {
      title: '报表名称',
      dataIndex: 'reportName',
      key: 'reportName',
    },
    {
      title: '报表类型',
      dataIndex: 'type',
      key: 'type',
    },
    {
      title: '生成时间',
      dataIndex: 'generateTime',
      key: 'generateTime',
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      render: (status) => (
        <span style={{ color: status === '已生成' ? '#52c41a' : '#faad14' }}>
          {status}
        </span>
      ),
    },
    {
      title: '文件大小',
      dataIndex: 'size',
      key: 'size',
    },
    {
      title: '操作',
      key: 'action',
      render: (_, record) => (
        <Button.Group>
          <Button
            type="link"
            icon={<FileExcelOutlined />}
            disabled={record.status !== '已生成'}
          >
            下载Excel
          </Button>
          <Button
            type="link"
            icon={<FilePdfOutlined />}
            disabled={record.status !== '已生成'}
          >
            下载PDF
          </Button>
        </Button.Group>
      ),
    },
  ];

  const handleGenerateReport = () => {
    console.log('生成报表');
  };

  return (
    <div>
      <div className="page-header">
        <h1 className="page-title">报表中心</h1>
        <p className="page-description">生成和下载各类统计报表</p>
      </div>

      <Row gutter={[16, 16]} style={{ marginBottom: 24 }}>
        <Col xs={24} sm={12} lg={6}>
          <Card>
            <Statistic
              title="总报表数"
              value={15}
              valueStyle={{ color: '#1890ff' }}
            />
          </Card>
        </Col>
        <Col xs={24} sm={12} lg={6}>
          <Card>
            <Statistic
              title="本月生成"
              value={8}
              valueStyle={{ color: '#52c41a' }}
            />
          </Card>
        </Col>
        <Col xs={24} sm={12} lg={6}>
          <Card>
            <Statistic
              title="待生成"
              value={2}
              valueStyle={{ color: '#faad14' }}
            />
          </Card>
        </Col>
        <Col xs={24} sm={12} lg={6}>
          <Card>
            <Statistic
              title="下载次数"
              value={156}
              valueStyle={{ color: '#722ed1' }}
            />
          </Card>
        </Col>
      </Row>

      <Card
        title="报表生成"
        extra={
          <Button type="primary" icon={<DownloadOutlined />} onClick={handleGenerateReport}>
            生成新报表
          </Button>
        }
        style={{ marginBottom: 16 }}
      >
        <Row gutter={[16, 16]}>
          <Col xs={24} sm={12} md={8}>
            <Select placeholder="选择报表类型" style={{ width: '100%' }}>
              <Option value="points">积分报表</Option>
              <Option value="activity">活动报表</Option>
              <Option value="service">服务报表</Option>
              <Option value="volunteer">志愿者报表</Option>
            </Select>
          </Col>
          <Col xs={24} sm={12} md={8}>
            <RangePicker style={{ width: '100%' }} placeholder={['开始日期', '结束日期']} />
          </Col>
          <Col xs={24} sm={12} md={8}>
            <Select placeholder="选择格式" style={{ width: '100%' }}>
              <Option value="excel">Excel</Option>
              <Option value="pdf">PDF</Option>
              <Option value="csv">CSV</Option>
            </Select>
          </Col>
        </Row>
      </Card>

      <Card title="报表列表">
        <Table
          columns={columns}
          dataSource={reports}
          pagination={{
            showSizeChanger: true,
            showQuickJumper: true,
            showTotal: (total, range) => `第 ${range[0]}-${range[1]} 条/共 ${total} 条`,
          }}
        />
      </Card>
    </div>
  );
};

export default ReportCenter;