import React from 'react';
import { Card, Row, Col, Statistic, Button } from 'antd';
import { ArrowUpOutlined, ArrowDownOutlined, DollarOutlined, CreditCardOutlined, BarChartOutlined } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';

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

  return (
    <div className="finance">
      <div className="page-header">
        <h1>财务管理</h1>
      </div>

      <Row gutter={16} style={{ marginBottom: 24 }}>
        <Col span={8}>
          <Card>
            <Statistic
              title="总收入"
              value={1250000}
              precision={2}
              prefix="$"
              suffix="USD"
              valueStyle={{ color: '#3f8600' }}
              prefix={<DollarOutlined />}
            />
          </Card>
        </Col>
        <Col span={8}>
          <Card>
            <Statistic
              title="总支出"
              value={850000}
              precision={2}
              prefix="$"
              suffix="USD"
              valueStyle={{ color: '#cf1322' }}
              prefix={<CreditCardOutlined />}
            />
          </Card>
        </Col>
        <Col span={8}>
          <Card>
            <Statistic
              title="净利润"
              value={400000}
              precision={2}
              prefix="$"
              suffix="USD"
              valueStyle={{ color: '#3f8600' }}
              prefix={<BarChartOutlined />}
            />
          </Card>
        </Col>
      </Row>

      <Row gutter={16} style={{ marginBottom: 24 }}>
        <Col span={8}>
          <Card>
            <Statistic
              title="本月收入"
              value={125000}
              precision={2}
              prefix="$"
              suffix="USD"
              valueStyle={{ color: '#3f8600' }}
              prefix={<ArrowUpOutlined />}
            />
          </Card>
        </Col>
        <Col span={8}>
          <Card>
            <Statistic
              title="本月支出"
              value={85000}
              precision={2}
              prefix="$"
              suffix="USD"
              valueStyle={{ color: '#cf1322' }}
              prefix={<ArrowDownOutlined />}
            />
          </Card>
        </Col>
        <Col span={8}>
          <Card>
            <Statistic
              title="本月利润"
              value={40000}
              precision={2}
              prefix="$"
              suffix="USD"
              valueStyle={{ color: '#3f8600' }}
              prefix={<ArrowUpOutlined />}
            />
          </Card>
        </Col>
      </Row>

      <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>

      <Row gutter={16} style={{ marginTop: 24 }}>
        <Col span={8}>
          <Button type="primary" block onClick={() => navigate('/finance/transactions')}>
            查看交易记录
          </Button>
        </Col>
        <Col span={8}>
          <Button type="primary" block onClick={() => navigate('/finance/reconciliation')}>
            查看对账记录
          </Button>
        </Col>
        <Col span={8}>
          <Button type="primary" block onClick={() => navigate('/reports/profit')}>
            查看利润报表
          </Button>
        </Col>
      </Row>
    </div>
  );
};

export default Finance;