import React, { useState, useEffect } from 'react';
import {
  Card,
  Row,
  Col,
  Button,
  Tabs,
  Table,
  DatePicker,
  Select,
  Space,
  Statistic,
  Progress,
  message,
  Modal,
  Form,
  Input,
  Radio,
  Tooltip,
  Badge,
  Dropdown,
  Menu,
  Alert,
  Descriptions,
  Tag,
} from 'antd';
import {
  BarChartOutlined,
  LineChartOutlined,
  PieChartOutlined,
  DollarOutlined,
  TrendingUpOutlined,
  DownloadOutlined,
  SearchOutlined,
  FilterOutlined,
  ReloadOutlined,
  FileTextOutlined,
  SettingOutlined,
  ShareAltOutlined,
  CalendarOutlined,
  ShopOutlined,
  ProductOutlined,
  OrderedListOutlined,
  RiseOutlined,
  FallOutlined,
  EyeOutlined,
  EditOutlined,
  DeleteOutlined,
  PlusOutlined,
} from '@ant-design/icons';
import type { ColumnsType } from 'antd/es/table';

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

interface Report {
  id: string;
  reportId: string;
  name: string;
  type: 'PROFIT' | 'PERFORMANCE' | 'SALES' | 'INVENTORY' | 'CUSTOM';
  status: 'GENERATING' | 'COMPLETED' | 'FAILED';
  period: 'DAILY' | 'WEEKLY' | 'MONTHLY' | 'CUSTOM';
  startDate: string;
  endDate: string;
  createdAt: string;
  createdBy: string;
  shopId?: string;
  shopName?: string;
  fileSize?: string;
  downloadUrl?: string;
  errorMessage?: string;
}

const REPORT_TYPE_MAP: Record<string, { color: string; text: string; icon: React.ReactNode }> = {
  PROFIT: { color: 'green', text: 'Profit Report', icon: <DollarOutlined /> },
  PERFORMANCE: { color: 'blue', text: 'Performance Report', icon: <TrendingUpOutlined /> },
  SALES: { color: 'orange', text: 'Sales Report', icon: <BarChartOutlined /> },
  INVENTORY: { color: 'purple', text: 'Inventory Report', icon: <PieChartOutlined /> },
  CUSTOM: { color: 'default', text: 'Custom Report', icon: <SettingOutlined /> },
};

const REPORT_STATUS_MAP: Record<string, { color: string; text: string; icon: React.ReactNode }> = {
  GENERATING: { color: 'processing', text: 'Generating', icon: <ReloadOutlined spin /> },
  COMPLETED: { color: 'success', text: 'Completed', icon: <FileTextOutlined /> },
  FAILED: { color: 'error', text: 'Failed', icon: <FallOutlined /> },
};

const PERIOD_MAP: Record<string, { color: string; text: string }> = {
  DAILY: { color: 'default', text: 'Daily' },
  WEEKLY: { color: 'blue', text: 'Weekly' },
  MONTHLY: { color: 'green', text: 'Monthly' },
  CUSTOM: { color: 'orange', text: 'Custom' },
};

export const Reports: React.FC = () => {
  const [loading, setLoading] = useState(false);
  const [reports, setReports] = useState<Report[]>([]);
  const [selectedReport, setSelectedReport] = useState<Report | null>(null);
  const [detailModalVisible, setDetailModalVisible] = useState(false);
  const [createModalVisible, setCreateModalVisible] = useState(false);
  const [editModalVisible, setEditModalVisible] = useState(false);
  const [activeTab, setActiveTab] = useState('overview');
  const [searchText, setSearchText] = useState('');
  const [filterType, setFilterType] = useState<string>('');
  const [filterStatus, setFilterStatus] = useState<string>('');
  const [filterPeriod, setFilterPeriod] = useState<string>('');
  const [stats, setStats] = useState({
    totalRevenue: 0,
    totalProfit: 0,
    totalOrders: 0,
    profitMargin: 0,
    revenueGrowth: 0,
    profitGrowth: 0,
  });
  const [createForm] = Form.useForm();
  const [editForm] = Form.useForm();

  useEffect(() => {
    fetchReports();
    fetchStats();
  }, []);

  const fetchReports = async () => {
    setLoading(true);
    try {
      const mockReports: Report[] = [
        {
          id: '1',
          reportId: 'RPT-2026-001',
          name: 'Weekly Profit Report - Week 11',
          type: 'PROFIT',
          status: 'COMPLETED',
          period: 'WEEKLY',
          startDate: '2026-03-11',
          endDate: '2026-03-17',
          createdAt: '2026-03-18 09:00:00',
          createdBy: 'admin',
          shopId: 'SHOP_001',
          shopName: 'Amazon US Store',
          fileSize: '2.5MB',
          downloadUrl: '/api/v1/reports/RPT-2026-001/download',
        },
        {
          id: '2',
          reportId: 'RPT-2026-002',
          name: 'Monthly Performance Report - March',
          type: 'PERFORMANCE',
          status: 'GENERATING',
          period: 'MONTHLY',
          startDate: '2026-03-01',
          endDate: '2026-03-31',
          createdAt: '2026-03-18 10:00:00',
          createdBy: 'admin',
          shopId: 'SHOP_002',
          shopName: 'eBay Outlet',
        },
        {
          id: '3',
          reportId: 'RPT-2026-003',
          name: 'Daily Sales Report - 2026-03-17',
          type: 'SALES',
          status: 'COMPLETED',
          period: 'DAILY',
          startDate: '2026-03-17',
          endDate: '2026-03-17',
          createdAt: '2026-03-18 08:00:00',
          createdBy: 'admin',
          shopId: 'SHOP_003',
          shopName: 'Shopify Brand Store',
          fileSize: '1.2MB',
          downloadUrl: '/api/v1/reports/RPT-2026-003/download',
        },
        {
          id: '4',
          reportId: 'RPT-2026-004',
          name: 'Inventory Report - All Warehouses',
          type: 'INVENTORY',
          status: 'FAILED',
          period: 'WEEKLY',
          startDate: '2026-03-11',
          endDate: '2026-03-17',
          createdAt: '2026-03-18 07:00:00',
          createdBy: 'admin',
          errorMessage: 'Failed to fetch inventory data from warehouse API',
        },
        {
          id: '5',
          reportId: 'RPT-2026-005',
          name: 'Custom Sales Analysis - Q1 2026',
          type: 'CUSTOM',
          status: 'COMPLETED',
          period: 'CUSTOM',
          startDate: '2026-01-01',
          endDate: '2026-03-31',
          createdAt: '2026-03-18 06:00:00',
          createdBy: 'user1',
          shopId: 'SHOP_004',
          shopName: 'Shopee Mall',
          fileSize: '5.8MB',
          downloadUrl: '/api/v1/reports/RPT-2026-005/download',
        },
      ];
      setReports(mockReports);
    } catch (error) {
      message.error('Failed to load reports');
    } finally {
      setLoading(false);
    }
  };

  const fetchStats = async () => {
    try {
      setStats({
        totalRevenue: 1250000,
        totalProfit: 375000,
        totalOrders: 8500,
        profitMargin: 30,
        revenueGrowth: 15.5,
        profitGrowth: 12.3,
      });
    } catch (error) {
      message.error('Failed to load stats');
    }
  };

  const handleViewDetail = (report: Report) => {
    setSelectedReport(report);
    setDetailModalVisible(true);
  };

  const handleDownload = async (report: Report) => {
    try {
      message.loading('Downloading report...');
      await new Promise((resolve) => setTimeout(resolve, 1000));
      message.success('Report downloaded successfully');
    } catch (error) {
      message.error('Failed to download report');
    }
  };

  const handleCreate = () => {
    createForm.resetFields();
    setCreateModalVisible(true);
  };

  const handleCreateSubmit = async () => {
    try {
      const values = await createForm.validateFields();
      console.log('Creating report:', values);
      message.success('Report generation started');
      setCreateModalVisible(false);
      fetchReports();
    } catch (error) {
      message.error('Failed to create report');
    }
  };

  const handleEdit = (report: Report) => {
    setSelectedReport(report);
    editForm.setFieldsValue({
      name: report.name,
      type: report.type,
      period: report.period,
      startDate: report.startDate,
      endDate: report.endDate,
    });
    setEditModalVisible(true);
  };

  const handleEditSubmit = async () => {
    try {
      const values = await editForm.validateFields();
      console.log('Updating report:', { reportId: selectedReport?.id, ...values });
      message.success('Report updated successfully');
      setEditModalVisible(false);
      fetchReports();
    } catch (error) {
      message.error('Failed to update report');
    }
  };

  const handleDelete = async (reportId: string) => {
    try {
      console.log('Deleting report:', reportId);
      message.success('Report deleted successfully');
      fetchReports();
    } catch (error) {
      message.error('Failed to delete report');
    }
  };

  const handleSearch = (value: string) => {
    setSearchText(value);
  };

  const handleFilter = (field: string, value: string) => {
    if (field === 'type') setFilterType(value);
    if (field === 'status') setFilterStatus(value);
    if (field === 'period') setFilterPeriod(value);
  };

  const getFilteredReports = () => {
    let filtered = reports;

    if (searchText) {
      filtered = filtered.filter(
        (r) =>
          r.reportId.toLowerCase().includes(searchText.toLowerCase()) ||
          r.name.toLowerCase().includes(searchText.toLowerCase())
      );
    }

    if (filterType) {
      filtered = filtered.filter((r) => r.type === filterType);
    }

    if (filterStatus) {
      filtered = filtered.filter((r) => r.status === filterStatus);
    }

    if (filterPeriod) {
      filtered = filtered.filter((r) => r.period === filterPeriod);
    }

    return filtered;
  };

  const columns: ColumnsType<Report> = [
    {
      title: 'Report ID',
      dataIndex: 'reportId',
      key: 'reportId',
      width: 140,
      render: (text: string, record) => (
        <a onClick={() => handleViewDetail(record)}>{text}</a>
      ),
    },
    {
      title: 'Name',
      dataIndex: 'name',
      key: 'name',
      width: 250,
    },
    {
      title: 'Type',
      dataIndex: 'type',
      key: 'type',
      width: 150,
      filters: Object.keys(REPORT_TYPE_MAP).map((key) => ({
        text: REPORT_TYPE_MAP[key].text,
        value: key,
      })),
      render: (type: string) => {
        const config = REPORT_TYPE_MAP[type];
        return <Tag icon={config.icon} color={config.color}>{config.text}</Tag>;
      },
    },
    {
      title: 'Status',
      dataIndex: 'status',
      key: 'status',
      width: 120,
      filters: Object.keys(REPORT_STATUS_MAP).map((key) => ({
        text: REPORT_STATUS_MAP[key].text,
        value: key,
      })),
      render: (status: string) => {
        const config = REPORT_STATUS_MAP[status];
        return <Tag icon={config.icon} color={config.color}>{config.text}</Tag>;
      },
    },
    {
      title: 'Period',
      dataIndex: 'period',
      key: 'period',
      width: 100,
      filters: Object.keys(PERIOD_MAP).map((key) => ({
        text: PERIOD_MAP[key].text,
        value: key,
      })),
      render: (period: string) => {
        const config = PERIOD_MAP[period];
        return <Tag color={config.color}>{config.text}</Tag>;
      },
    },
    {
      title: 'Date Range',
      key: 'dateRange',
      width: 180,
      render: (_, record) => (
        <span>{record.startDate} ~ {record.endDate}</span>
      ),
    },
    {
      title: 'Shop',
      dataIndex: 'shopName',
      key: 'shopName',
      width: 150,
    },
    {
      title: 'Created',
      dataIndex: 'createdAt',
      key: 'createdAt',
      width: 160,
    },
    {
      title: 'Actions',
      key: 'action',
      width: 180,
      fixed: 'right',
      render: (_, record) => (
        <Space size="small">
          <Tooltip title="View Details">
            <Button type="link" icon={<EyeOutlined />} onClick={() => handleViewDetail(record)} />
          </Tooltip>
          {record.status === 'COMPLETED' && (
            <Tooltip title="Download">
              <Button type="link" icon={<DownloadOutlined />} onClick={() => handleDownload(record)} />
            </Tooltip>
          )}
          <Tooltip title="Edit">
            <Button type="link" icon={<EditOutlined />} onClick={() => handleEdit(record)} />
          </Tooltip>
          <Tooltip title="Delete">
            <Button type="link" danger icon={<DeleteOutlined />} onClick={() => handleDelete(record.reportId)} />
          </Tooltip>
        </Space>
      ),
    },
  ];

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

      <Row gutter={16} style={{ marginBottom: 24 }}>
        <Col span={4}>
          <Card>
            <Statistic
              title="Total Revenue"
              value={stats.totalRevenue}
              precision={2}
              prefix="$"
              valueStyle={{ color: '#52c41a' }}
              suffix={<RiseOutlined />}
            />
          </Card>
        </Col>
        <Col span={4}>
          <Card>
            <Statistic
              title="Total Profit"
              value={stats.totalProfit}
              precision={2}
              prefix="$"
              valueStyle={{ color: '#1890ff' }}
              suffix={<RiseOutlined />}
            />
          </Card>
        </Col>
        <Col span={4}>
          <Card>
            <Statistic
              title="Total Orders"
              value={stats.totalOrders}
              valueStyle={{ color: '#722ed1' }}
              prefix={<OrderedListOutlined />}
            />
          </Card>
        </Col>
        <Col span={4}>
          <Card>
            <Statistic
              title="Profit Margin"
              value={stats.profitMargin}
              precision={1}
              suffix="%"
              valueStyle={{ color: '#faad14' }}
            />
          </Card>
        </Col>
        <Col span={4}>
          <Card>
            <Statistic
              title="Revenue Growth"
              value={stats.revenueGrowth}
              precision={1}
              suffix="%"
              valueStyle={{ color: '#52c41a' }}
              prefix={<RiseOutlined />}
            />
          </Card>
        </Col>
        <Col span={4}>
          <Card>
            <Statistic
              title="Profit Growth"
              value={stats.profitGrowth}
              precision={1}
              suffix="%"
              valueStyle={{ color: '#1890ff' }}
              prefix={<RiseOutlined />}
            />
          </Card>
        </Col>
      </Row>

      <Tabs activeKey={activeTab} onChange={setActiveTab}>
        <TabPane tab="报表概览" key="overview">
          <Row gutter={16}>
            <Col span={12}>
              <Card title="销售趋势" extra={<Button icon={<DownloadOutlined />}>导出</Button>}>
                <div style={{ textAlign: 'center', padding: '50px 0' }}>
                  <BarChartOutlined style={{ fontSize: 48, color: '#1890ff' }} />
                  <p style={{ marginTop: 16 }}>销售趋势图表</p>
                </div>
              </Card>
            </Col>
            <Col span={12}>
              <Card title="利润分析" extra={<Button icon={<DownloadOutlined />}>导出</Button>}>
                <div style={{ textAlign: 'center', padding: '50px 0' }}>
                  <LineChartOutlined style={{ fontSize: 48, color: '#52c41a' }} />
                  <p style={{ marginTop: 16 }}>利润分析图表</p>
                </div>
              </Card>
            </Col>
          </Row>
          <Row gutter={16} style={{ marginTop: 16 }}>
            <Col span={12}>
              <Card title="订单分布" extra={<Button icon={<DownloadOutlined />}>导出</Button>}>
                <div style={{ textAlign: 'center', padding: '50px 0' }}>
                  <PieChartOutlined style={{ fontSize: 48, color: '#722ed1' }} />
                  <p style={{ marginTop: 16 }}>订单分布图表</p>
                </div>
              </Card>
            </Col>
            <Col span={12}>
              <Card title="库存概览" extra={<Button icon={<DownloadOutlined />}>导出</Button>}>
                <div style={{ textAlign: 'center', padding: '50px 0' }}>
                  <ProductOutlined style={{ fontSize: 48, color: '#faad14' }} />
                  <p style={{ marginTop: 16 }}>库存概览图表</p>
                </div>
              </Card>
            </Col>
          </Row>
        </TabPane>

        <TabPane tab="报表管理" key="reports">
          <Card
            title="报表列表"
            extra={
              <Space>
                <Button icon={<ReloadOutlined />} onClick={fetchReports}>
                  刷新
                </Button>
                <Button type="primary" icon={<PlusOutlined />} onClick={handleCreate}>
                  创建报表
                </Button>
              </Space>
            }
          >
            <Card size="small" style={{ marginBottom: 16 }}>
              <Row gutter={16}>
                <Col span={8}>
                  <Input
                    placeholder="搜索报表ID或名称"
                    prefix={<SearchOutlined />}
                    value={searchText}
                    onChange={(e) => handleSearch(e.target.value)}
                    allowClear
                  />
                </Col>
                <Col span={4}>
                  <Select
                    placeholder="筛选类型"
                    value={filterType}
                    onChange={(value) => handleFilter('type', value)}
                    allowClear
                    style={{ width: '100%' }}
                  >
                    {Object.keys(REPORT_TYPE_MAP).map((key) => (
                      <Option key={key} value={key}>
                        {REPORT_TYPE_MAP[key].text}
                      </Option>
                    ))}
                  </Select>
                </Col>
                <Col span={4}>
                  <Select
                    placeholder="筛选状态"
                    value={filterStatus}
                    onChange={(value) => handleFilter('status', value)}
                    allowClear
                    style={{ width: '100%' }}
                  >
                    {Object.keys(REPORT_STATUS_MAP).map((key) => (
                      <Option key={key} value={key}>
                        {REPORT_STATUS_MAP[key].text}
                      </Option>
                    ))}
                  </Select>
                </Col>
                <Col span={4}>
                  <Select
                    placeholder="筛选周期"
                    value={filterPeriod}
                    onChange={(value) => handleFilter('period', value)}
                    allowClear
                    style={{ width: '100%' }}
                  >
                    {Object.keys(PERIOD_MAP).map((key) => (
                      <Option key={key} value={key}>
                        {PERIOD_MAP[key].text}
                      </Option>
                    ))}
                  </Select>
                </Col>
              </Row>
            </Card>

            <Table
              columns={columns}
              dataSource={getFilteredReports()}
              rowKey="id"
              loading={loading}
              scroll={{ x: 1600 }}
              pagination={{
                showSizeChanger: true,
                showTotal: (total) => `共 ${total} 个报表`,
              }}
            />
          </Card>
        </TabPane>

        <TabPane tab="自定义报表" key="custom">
          <Card title="自定义报表配置" extra={<Button type="primary" icon={<PlusOutlined />} onClick={handleCreate}>创建自定义报表</Button>}>
            <div style={{ textAlign: 'center', padding: '50px 0' }}>
              <SettingOutlined style={{ fontSize: 48, color: '#1890ff' }} />
              <p style={{ marginTop: 16 }}>自定义报表功能开发中</p>
            </div>
          </Card>
        </TabPane>

        <TabPane tab="报表计划" key="schedule">
          <Card title="报表计划管理" extra={<Button type="primary" icon={<PlusOutlined />}>创建计划</Button>}>
            <div style={{ textAlign: 'center', padding: '50px 0' }}>
              <CalendarOutlined style={{ fontSize: 48, color: '#faad14' }} />
              <p style={{ marginTop: 16 }}>报表计划功能开发中</p>
            </div>
          </Card>
        </TabPane>
      </Tabs>

      <Modal
        title="报表详情"
        open={detailModalVisible}
        onCancel={() => setDetailModalVisible(false)}
        footer={[
          <Button key="close" onClick={() => setDetailModalVisible(false)}>
            关闭
          </Button>,
        ]}
        width={800}
      >
        {selectedReport && (
          <>
            {selectedReport.status === 'FAILED' && (
              <Alert
                message="报表生成失败"
                description={selectedReport.errorMessage}
                type="error"
                showIcon
                style={{ marginBottom: 16 }}
              />
            )}
            <Descriptions column={2} bordered>
              <Descriptions.Item label="报表ID">{selectedReport.reportId}</Descriptions.Item>
              <Descriptions.Item label="报表名称">{selectedReport.name}</Descriptions.Item>
              <Descriptions.Item label="报表类型">
                <Tag icon={REPORT_TYPE_MAP[selectedReport.type].icon} color={REPORT_TYPE_MAP[selectedReport.type].color}>
                  {REPORT_TYPE_MAP[selectedReport.type].text}
                </Tag>
              </Descriptions.Item>
              <Descriptions.Item label="报表状态">
                <Tag icon={REPORT_STATUS_MAP[selectedReport.status].icon} color={REPORT_STATUS_MAP[selectedReport.status].color}>
                  {REPORT_STATUS_MAP[selectedReport.status].text}
                </Tag>
              </Descriptions.Item>
              <Descriptions.Item label="报表周期">
                <Tag color={PERIOD_MAP[selectedReport.period].color}>
                  {PERIOD_MAP[selectedReport.period].text}
                </Tag>
              </Descriptions.Item>
              <Descriptions.Item label="创建人">{selectedReport.createdBy}</Descriptions.Item>
              <Descriptions.Item label="开始日期">{selectedReport.startDate}</Descriptions.Item>
              <Descriptions.Item label="结束日期">{selectedReport.endDate}</Descriptions.Item>
              <Descriptions.Item label="创建时间">{selectedReport.createdAt}</Descriptions.Item>
              <Descriptions.Item label="店铺">{selectedReport.shopName || '-'}</Descriptions.Item>
              {selectedReport.fileSize && (
                <Descriptions.Item label="文件大小">{selectedReport.fileSize}</Descriptions.Item>
              )}
            </Descriptions>
            {selectedReport.status === 'COMPLETED' && (
              <div style={{ marginTop: 16 }}>
                <Button type="primary" icon={<DownloadOutlined />} onClick={() => handleDownload(selectedReport)}>
                  下载报表
                </Button>
              </div>
            )}
          </>
        )}
      </Modal>

      <Modal
        title="创建报表"
        open={createModalVisible}
        onOk={handleCreateSubmit}
        onCancel={() => setCreateModalVisible(false)}
        width={600}
      >
        <Form form={createForm} layout="vertical">
          <Form.Item
            name="name"
            label="报表名称"
            rules={[{ required: true, message: '请输入报表名称' }]}
          >
            <Input placeholder="请输入报表名称" />
          </Form.Item>
          <Form.Item
            name="type"
            label="报表类型"
            rules={[{ required: true, message: '请选择报表类型' }]}
          >
            <Select placeholder="请选择报表类型">
              {Object.keys(REPORT_TYPE_MAP).map((key) => (
                <Option key={key} value={key}>
                  {REPORT_TYPE_MAP[key].text}
                </Option>
              ))}
            </Select>
          </Form.Item>
          <Form.Item
            name="period"
            label="报表周期"
            rules={[{ required: true, message: '请选择报表周期' }]}
          >
            <Select placeholder="请选择报表周期">
              {Object.keys(PERIOD_MAP).map((key) => (
                <Option key={key} value={key}>
                  {PERIOD_MAP[key].text}
                </Option>
              ))}
            </Select>
          </Form.Item>
          <Form.Item
            name="dateRange"
            label="日期范围"
            rules={[{ required: true, message: '请选择日期范围' }]}
          >
            <RangePicker style={{ width: '100%' }} />
          </Form.Item>
          <Form.Item
            name="shopId"
            label="店铺"
          >
            <Select placeholder="请选择店铺" allowClear>
              <Option value="SHOP_001">Amazon US Store</Option>
              <Option value="SHOP_002">eBay Outlet</Option>
              <Option value="SHOP_003">Shopify Brand Store</Option>
              <Option value="SHOP_004">Shopee Mall</Option>
              <Option value="SHOP_005">Lazada Store</Option>
            </Select>
          </Form.Item>
        </Form>
      </Modal>

      <Modal
        title="编辑报表"
        open={editModalVisible}
        onOk={handleEditSubmit}
        onCancel={() => setEditModalVisible(false)}
        width={600}
      >
        <Form form={editForm} layout="vertical">
          <Form.Item
            name="name"
            label="报表名称"
            rules={[{ required: true, message: '请输入报表名称' }]}
          >
            <Input placeholder="请输入报表名称" />
          </Form.Item>
          <Form.Item
            name="type"
            label="报表类型"
            rules={[{ required: true, message: '请选择报表类型' }]}
          >
            <Select placeholder="请选择报表类型">
              {Object.keys(REPORT_TYPE_MAP).map((key) => (
                <Option key={key} value={key}>
                  {REPORT_TYPE_MAP[key].text}
                </Option>
              ))}
            </Select>
          </Form.Item>
          <Form.Item
            name="period"
            label="报表周期"
            rules={[{ required: true, message: '请选择报表周期' }]}
          >
            <Select placeholder="请选择报表周期">
              {Object.keys(PERIOD_MAP).map((key) => (
                <Option key={key} value={key}>
                  {PERIOD_MAP[key].text}
                </Option>
              ))}
            </Select>
          </Form.Item>
          <Form.Item
            name="dateRange"
            label="日期范围"
            rules={[{ required: true, message: '请选择日期范围' }]}
          >
            <RangePicker style={{ width: '100%' }} />
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
};

export default Reports;
