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

const { TabPane } = Tabs;

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

  return (
    <div className="marketing">
      <div className="page-header">
        <h1>营销管理</h1>
      </div>

      <Row gutter={16} style={{ marginBottom: 24 }}>
        <Col span={6}>
          <Card>
            <Statistic
              title="总广告支出"
              value={100000}
              precision={2}
              prefix="$"
              suffix="USD"
              prefix={<BarChartOutlined />}
            />
          </Card>
        </Col>
        <Col span={6}>
          <Card>
            <Statistic
              title="总ROI"
              value={3.5}
              precision={2}
              suffix="x"
              valueStyle={{ color: '#3f8600' }}
              prefix={<TrendingUpOutlined />}
            />
          </Card>
        </Col>
        <Col span={6}>
          <Card>
            <Statistic
              title="总点击量"
              value={1000000}
              prefix={<UserOutlined />}
            />
          </Card>
        </Col>
        <Col span={6}>
          <Card>
            <Statistic
              title="转化率"
              value={5.2}
              precision={2}
              suffix="%"
              valueStyle={{ color: '#3f8600' }}
              prefix={<LineChartOutlined />}
            />
          </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="ads">
          <div style={{ textAlign: 'center', padding: '50px 0' }}>
            <Button type="primary" onClick={() => navigate('/marketing/ads')}>
              查看广告管理
            </Button>
          </div>
        </TabPane>

        <TabPane tab="竞争对手分析" key="competitors">
          <div style={{ textAlign: 'center', padding: '50px 0' }}>
            <Button type="primary" onClick={() => navigate('/marketing/competitors')}>
              查看竞争对手分析
            </Button>
          </div>
        </TabPane>
      </Tabs>

      <Row gutter={16} style={{ marginTop: 24 }}>
        <Col span={8}>
          <Button type="primary" block onClick={() => navigate('/marketing/ads')}>
            广告管理
          </Button>
        </Col>
        <Col span={8}>
          <Button type="primary" block onClick={() => navigate('/marketing/competitors')}>
            竞争对手分析
          </Button>
        </Col>
        <Col span={8}>
          <Button type="primary" block onClick={() => navigate('/reports/performance')}>
            营销绩效报表
          </Button>
        </Col>
      </Row>
    </div>
  );
};

export default Marketing;