import React from 'react';
import { Card, Row, Col, Button, Tabs } from 'antd';
import { BarChartOutlined, LineChartOutlined, PieChartOutlined, DollarOutlined, TrendingUpOutlined, DownloadOutlined } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';

const { TabPane } = Tabs;

const Reports: React.FC = () => {
  const navigate = useNavigate();

  return (
    <div className="reports">
      <div className="page-header">
        <h1>报表中心</h1>
      </div>

      <Row gutter={16} style={{ marginBottom: 24 }}>
        <Col span={6}>
          <Card>
            <Button
              type="primary"
              block
              icon={<DollarOutlined />}
              onClick={() => navigate('/reports/profit')}
            >
              利润报表
            </Button>
          </Card>
        </Col>
        <Col span={6}>
          <Card>
            <Button
              type="primary"
              block
              icon={<TrendingUpOutlined />}
              onClick={() => navigate('/reports/performance')}
            >
              绩效报表
            </Button>
          </Card>
        </Col>
        <Col span={6}>
          <Card>
            <Button
              type="primary"
              block
              icon={<BarChartOutlined />}
            >
              销售报表
            </Button>
          </Card>
        </Col>
        <Col span={6}>
          <Card>
            <Button
              type="primary"
              block
              icon={<PieChartOutlined />}
            >
              库存报表
            </Button>
          </Card>
        </Col>
      </Row>

      <Tabs defaultActiveKey="overview">
        <TabPane tab="报表概览" key="overview">
          <Row gutter={16}>
            <Col span={12}>
              <Card title="销售趋势">
                <div style={{ textAlign: 'center', padding: '50px 0' }}>
                  <p>销售趋势图表</p>
                </div>
              </Card>
            </Col>
            <Col span={12}>
              <Card title="利润分析">
                <div style={{ textAlign: 'center', padding: '50px 0' }}>
                  <p>利润分析图表</p>
                </div>
              </Card>
            </Col>
          </Row>
        </TabPane>

        <TabPane tab="利润报表" key="profit">
          <div style={{ textAlign: 'center', padding: '50px 0' }}>
            <Button type="primary" onClick={() => navigate('/reports/profit')}>
              查看利润报表
            </Button>
          </div>
        </TabPane>

        <TabPane tab="绩效报表" key="performance">
          <div style={{ textAlign: 'center', padding: '50px 0' }}>
            <Button type="primary" onClick={() => navigate('/reports/performance')}>
              查看绩效报表
            </Button>
          </div>
        </TabPane>

        <TabPane tab="自定义报表" key="custom">
          <div style={{ textAlign: 'center', padding: '50px 0' }}>
            <p>自定义报表功能开发中</p>
          </div>
        </TabPane>
      </Tabs>

      <Row gutter={16} style={{ marginTop: 24 }}>
        <Col span={8}>
          <Button type="primary" block icon={<DownloadOutlined />}>
            导出所有报表
          </Button>
        </Col>
        <Col span={8}>
          <Button type="primary" block>
            计划报表
          </Button>
        </Col>
        <Col span={8}>
          <Button type="primary" block>
            分享报表
          </Button>
        </Col>
      </Row>
    </div>
  );
};

export default Reports;