import React from 'react';
import { Card, Grid, Input, Tag, Typography, Divider, Avatar } from '@arco-design/web-react';
import {
  IconSearch,
  IconStar,
  IconDownload,
  IconUser,
  IconCalendar,
  IconFilter
} from '@arco-design/web-react/icon';
import styles from './style/market.module.less';

const { Row, Col } = Grid;
const { Title, Text } = Typography;

// 模拟组件数据
const components = [
  {
    id: 1,
    name: '数据表格',
    description: '功能强大的数据展示表格，支持排序、筛选、分页等功能',
    author: '张三',
    avatar: '',
    downloads: 12560,
    rating: 4.8,
    tags: ['数据展示', '表格', '交互'],
    category: '数据展示',
    updateTime: '2023-10-15'
  },
  {
    id: 2,
    name: '表单生成器',
    description: '可视化表单构建工具，支持多种表单元素和校验规则',
    author: '李四',
    avatar: '',
    downloads: 8920,
    rating: 4.6,
    tags: ['表单', '生成器', '可视化'],
    category: '表单',
    updateTime: '2023-10-18'
  },
  {
    id: 3,
    name: '图表组件',
    description: '基于ECharts的图表组件库，支持多种图表类型',
    author: '王五',
    avatar: '',
    downloads: 15630,
    rating: 4.9,
    tags: ['图表', '数据可视化', 'ECharts'],
    category: '数据可视化',
    updateTime: '2023-10-10'
  },
  {
    id: 4,
    name: '流程设计器',
    description: '可视化流程设计工具，支持拖拽式流程编排',
    author: '赵六',
    avatar: '',
    downloads: 6750,
    rating: 4.5,
    tags: ['流程', '设计器', '可视化'],
    category: '流程',
    updateTime: '2023-10-20'
  },
  {
    id: 5,
    name: '文件上传',
    description: '支持多种文件格式上传，包含进度显示和校验功能',
    author: '孙七',
    avatar: '',
    downloads: 9800,
    rating: 4.7,
    tags: ['文件', '上传', '工具'],
    category: '工具',
    updateTime: '2023-10-12'
  },
  {
    id: 6,
    name: '通知中心',
    description: '系统通知管理组件，支持多种通知类型和样式',
    author: '周八',
    avatar: '',
    downloads: 5420,
    rating: 4.3,
    tags: ['通知', '消息', '系统'],
    category: '反馈',
    updateTime: '2023-10-05'
  },
];

// 分类数据
const categories = [
  { id: 1, name: '全部组件', count: 24 },
  { id: 2, name: '数据展示', count: 8 },
  { id: 3, name: '表单', count: 6 },
  { id: 4, name: '数据可视化', count: 5 },
  { id: 5, name: '流程', count: 3 },
  { id: 6, name: '工具', count: 7 },
  { id: 7, name: '反馈', count: 4 },
];

const Market: React.FC = () => {
  return (
    <div className={styles['market-container']}>
      {/* 头部搜索区域 */}
      <div className={styles['market-header']}>
        <Title heading={4}>组件市场</Title>
        <Text type="secondary">发现和使用高质量的组件，提升开发效率</Text>

        <div className={styles['search-section']}>
          <Input
            size="large"
            placeholder="搜索组件名称、功能或标签..."
            prefix={<IconSearch />}
            style={{ width: 400, marginRight: 16 }}
          />
          <div className={styles['filter-tags']}>
            <Tag icon={<IconFilter />} color="arcoblue">高级筛选</Tag>
          </div>
        </div>
      </div>

      <Divider style={{ margin: '20px 0' }} />

      {/* 分类导航 */}
      <div className={styles['category-section']}>
        <div className={styles['category-list']}>
          {categories.map(category => (
            <Tag
              key={category.id}
              className={styles['category-tag']}
              size="large"
            >
              {category.name} <span className={styles['category-count']}>({category.count})</span>
            </Tag>
          ))}
        </div>
      </div>

      {/* 组件列表 */}
      <div className={styles['components-section']}>
        <Row gutter={20}>
          {components.map(component => (
            <Col span={12} key={component.id} className={styles['component-col']}>
              <Card className={styles['component-card']} hoverable>
                <div className={styles['card-header']}>
                  <div className={styles['component-title']}>
                    <Title heading={6}>{component.name}</Title>
                    <Tag color="arcoblue">{component.category}</Tag>
                  </div>
                  <Text type="secondary" ellipsis>{component.description}</Text>
                </div>

                <div className={styles['card-content']}>
                  <div className={styles['component-meta']}>
                    <div className={styles['meta-item']}>
                      <IconUser />
                      <span>{component.author}</span>
                    </div>
                    <div className={styles['meta-item']}>
                      <IconCalendar />
                      <span>{component.updateTime}</span>
                    </div>
                  </div>

                  <div className={styles['component-tags']}>
                    {component.tags.map((tag, index) => (
                      <Tag key={index} color="gray">{tag}</Tag>
                    ))}
                  </div>
                </div>

                <div className={styles['card-footer']}>
                  <div className={styles['component-stats']}>
                    <div className={styles['stat-item']}>
                      <IconDownload />
                      <span>{component.downloads.toLocaleString()}</span>
                    </div>
                    <div className={styles['stat-item']}>
                      <IconStar />
                      <span>{component.rating}</span>
                    </div>
                  </div>
                  <div className={styles['component-actions']}>
                    <Text className={styles['install-btn']}>安装</Text>
                  </div>
                </div>
              </Card>
            </Col>
          ))}
        </Row>
      </div>
    </div>
  );
};

export default Market;
