import * as React from 'react';
import './style.scss';

interface ListItem {
  id: string;
  title: string;
  description: string;
  image: string;
  author: string;
  createTime: string;
  views: number;
  likes: number;
  comments: number;
  tags: string[];
  status: 'published' | 'draft' | 'archived';
}

interface ListWidgetProps {
  title: string;
  showImage: boolean;
  showTags: boolean;
  itemCount: number;
  listType: 'default' | 'card' | 'simple';
  data?: any;
}

/**
 * 通过 Cursor 生成的一个自定义组件示例
 * 组件名：ListWidget
 * 组件描述：支持配置的列表展示组件，内置模拟数据
 */
export default class ListWidget extends React.PureComponent<ListWidgetProps> {
  constructor(props: ListWidgetProps) {
    super(props);
    this.generateMockData = this.generateMockData.bind(this);
    this.formatNumber = this.formatNumber.bind(this);
    this.renderListItem = this.renderListItem.bind(this);
  }

  // 生成模拟数据
  generateMockData(count: number): ListItem[] {
    const mockTitles = [
      '营销服全场景智能CRM解决方案',
      '企业数字化转型最佳实践',
      '客户关系管理新趋势分析',
      '数字化营销策略深度解析',
      '智能客服系统优化方案',
      '数据驱动的客户洞察',
      '全渠道客户体验提升',
      'AI赋能销售管理创新',
    ];

    const mockDescriptions = [
      '帮助企业搭建数字化客户经营平台，实现业绩高质量增长，提升客户满意度和忠诚度。',
      '通过数据分析和智能算法，为企业提供精准的客户画像和个性化服务方案。',
      '整合多渠道客户触点，打造无缝的客户体验，提升品牌价值和市场竞争力。',
      '运用人工智能技术，优化销售流程，提高转化率，降低获客成本。',
      '建立完善的客户数据体系，实现精准营销和个性化推荐，提升客户价值。',
      '通过智能分析客户行为，预测客户需求，提前制定营销策略。',
      '构建全生命周期客户管理体系，从获客到留存的全流程优化。',
      '利用大数据和机器学习技术，实现客户价值的最大化挖掘。',
    ];

    const mockAuthors = [
      '张三',
      '李四',
      '王五',
      '赵六',
      '钱七',
      '孙八',
      '周九',
      '吴十',
    ];
    const mockTags = [
      'CRM',
      '营销',
      '数字化',
      'AI',
      '数据分析',
      '客户管理',
      '智能客服',
      '企业服务',
    ];
    const mockImages = [
      'https://picsum.photos/400/200?random=1',
      'https://picsum.photos/400/200?random=2',
      'https://picsum.photos/400/200?random=3',
      'https://picsum.photos/400/200?random=4',
      'https://picsum.photos/400/200?random=5',
      'https://picsum.photos/400/200?random=6',
      'https://picsum.photos/400/200?random=7',
      'https://picsum.photos/400/200?random=8',
    ];

    return Array.from({ length: count }, (_, index) => ({
      id: `item-${index + 1}`,
      title: mockTitles[index % mockTitles.length],
      description: mockDescriptions[index % mockDescriptions.length],
      image: mockImages[index % mockImages.length],
      author: mockAuthors[index % mockAuthors.length],
      createTime: new Date(
        Date.now() - Math.random() * 30 * 24 * 60 * 60 * 1000,
      ).toLocaleDateString(),
      views: Math.floor(Math.random() * 1000) + 100,
      likes: Math.floor(Math.random() * 500) + 50,
      comments: Math.floor(Math.random() * 200) + 10,
      tags: mockTags.slice(0, Math.floor(Math.random() * 3) + 1),
      status: ['published', 'draft', 'archived'][
        Math.floor(Math.random() * 3)
      ] as 'published' | 'draft' | 'archived',
    }));
  }

  // 格式化数字显示
  formatNumber(num: number): string {
    if (num < 1000) return num.toString();
    if (num < 10000) return `${(num / 1000).toFixed(1)}k`;
    return `${(num / 10000).toFixed(1)}w`;
  }

  // 获取状态标签颜色
  getStatusColor(status: string): string {
    const statusMap: { [key: string]: string } = {
      published: 'green',
      draft: 'orange',
      archived: 'gray',
    };
    return statusMap[status] || 'default';
  }

  // 获取状态文本
  getStatusText(status: string): string {
    const statusMap: { [key: string]: string } = {
      published: '已发布',
      draft: '草稿',
      archived: '已归档',
    };
    return statusMap[status] || '未知';
  }

  // 渲染列表项内容
  renderListItem(item: ListItem) {
    const { showImage, showTags } = this.props;

    return (
      <div key={item.id} className="list-item">
        {showImage && (
          <div className="item-image">
            <img src={item.image} alt={item.title} />
          </div>
        )}
        <div className="item-content">
          <div className="item-header">
            <h3 className="item-title">{item.title}</h3>
            <span
              className={`item-status status-${this.getStatusColor(
                item.status,
              )}`}
            >
              {this.getStatusText(item.status)}
            </span>
          </div>
          <div className="item-description">{item.description}</div>
          <div className="item-meta">
            <div className="item-meta-info">
              <span className="meta-item">作者：{item.author}</span>
              <span className="meta-separator">·</span>
              <span className="meta-item">发布时间：{item.createTime}</span>
            </div>
            {showTags && item.tags.length > 0 && (
              <div className="item-tags">
                {item.tags.map((tag, index) => (
                  <span key={index} className="tag">
                    {tag}
                  </span>
                ))}
              </div>
            )}
          </div>
        </div>
      </div>
    );
  }

  render() {
    const { title, itemCount, listType, data } = this.props;

    const mockData = this.generateMockData(itemCount);

    return (
      <div className="list-widget-container">
        <div className="list-header">
          <h2 className="list-title">
            {title || '内容列表'}
          </h2>
        </div>

        <div className={`list-content list-${listType}`}>
          {mockData.map((item) => this.renderListItem(item))}
        </div>
      </div>
    );
  }
}