import { observer } from 'mobx-preact';
import { Component, Fragment, h } from 'preact';

import { $t } from '../../../locale';

import styles from './css/index.less';

// desc 数组项类型定义
// key: 'text' 表示普通文本，'link' 表示链接
// value: 文本内容
// url: 链接地址（仅 key 为 'link' 时有效）
interface DescItem {
  key: 'text' | 'link';
  value: string;
  url?: string;
}

interface RuleItem {
  title: string;
  desc: string | DescItem[];  // 支持字符串或对象数组
}

/**
 * 解析字符串 desc，将其中的 https:// 链接提取出来，转换为 DescItem 数组
 * @param desc 原始字符串
 * @returns DescItem 数组
 */
function parseDescToArray(desc: string | DescItem[]): DescItem[] {
  // 如果已经是数组，直接返回
  if (Array.isArray(desc)) {
    return desc;
  }

  // 如果是空字符串，返回空数组
  if (!desc) {
    return [];
  }

  const result: DescItem[] = [];
  // 匹配 https:// 开头的链接，直到遇到空格、中文字符或字符串结束
  const urlRegex = /(https?:\/\/[^\s\u4e00-\u9fa5，。！？、；：""''（）【】]+)/g;

  let lastIndex = 0;
  let match: RegExpExecArray | null;

  while ((match = urlRegex.exec(desc)) !== null) {
    // 添加链接前的文本
    if (match.index > lastIndex) {
      const textBefore = desc.substring(lastIndex, match.index);
      if (textBefore) {
        result.push({ key: 'text', value: textBefore });
      }
    }

    // 添加链接
    const url = match[1];
    result.push({ key: 'link', value: url, url });

    lastIndex = match.index + match[0].length;
  }

  // 添加最后一段文本
  if (lastIndex < desc.length) {
    const textAfter = desc.substring(lastIndex);
    if (textAfter) {
      result.push({ key: 'text', value: textAfter });
    }
  }

  // 如果没有匹配到任何链接，返回整个字符串作为文本
  if (result.length === 0) {
    result.push({ key: 'text', value: desc });
  }

  return result;
}

@observer
class MatchDetailRules extends Component<{
    detailRules: RuleItem[];
    clickRuleLink: (url: string) => void;
  }, any> {
  constructor(props) {
    super(props);
    this.state = {
      rules: [
        {
          title: $t('海选赛'),
          desc: [
            { key: 'text', value: $t('海选赛期间，每周一至周四为当周场次报名时间，当周场次报名队伍将随机分组进行海选小组赛，每组15支队伍，每组进行三轮比赛，三轮比赛后根据队伍表现计算积分。积分排名前5的队伍进入海选突围赛，并通过海选突围赛决出晋级省赛的队伍。') },
          ],
        },
        {
          title: $t('省赛'),
          desc: [
            { key: 'text', value: $t('每个赛区晋级省赛的25支队伍，在线下进行三轮比赛，三轮比赛结束后积分最高的队伍晋级全国总决赛。每省晋级1支队伍，全国共晋级20支队伍。') },
          ],
        },
        {
          title: $t('全国总决赛'),
          desc: [
            { key: 'text', value: $t('省赛晋级全国总决赛的20只队伍，与线上挑战赛中获得全国总决赛名额的4支挑战者队伍，在线下进行5轮比赛，根据积分决出总冠军。') },
          ],
        },
      ],
    };
  }
  render() {
    const { detailRules, clickRuleLink } = this.props;
    return (
      <div className={styles['pmg-match-rules-detail-container']}>
        <div className={styles['pmg-match-rules-detail-content']}>
          {
            detailRules?.map((item, index) => (
              <div
                key={index}
                className={styles['pmg-rules-detail-item']}
              >
                <div className={styles['pmg-rules-detail-title-wrapper']}>
                  <div className={styles['pmg-rules-detail-title']}>
                    <text className={styles['pmg-rules-detail-title-text']}>{item.title}</text>
                    {/* 三角形：解决带背景图的伪元素::after RTL后渲染出错 */}
                    <div className={styles['pmg-rules-detail-title-arrow']}></div>
                  </div>
                </div>
                <div className={styles['pmg-rules-detail-content']}>
                  <text
                    className={styles['pmg-rules-detail-desc']}
                  >
                    {
                      parseDescToArray(item.desc)?.map((descItem, descIndex) => (
                        <Fragment key={descIndex}>
                          {
                            descItem?.key === 'link' ? (
                              <span
                                className={styles['pmg-rules-detail-link']}
                                onClick={() => clickRuleLink(descItem.value)}
                              >{descItem.value}
                              </span>
                            ) : (
                              <span className={styles['pmg-rules-detail-text']}>{descItem.value}</span>
                            )
                          }
                        </Fragment>
                      ))
                    }
                  </text>

                  {/* {parseDescToArray(item.desc)?.map((descItem, descIndex) => (
                    descItem.key === 'link' ? (
                      <text
                        key={descIndex}
                        className={styles['pmg-rules-detail-link']}
                      >
                        {descItem.value}
                      </text>
                    ) : (
                      <text
                        key={descIndex}
                        className={styles['pmg-rules-detail-text']}
                      >{descItem.value}
                      </text>
                    )
                  ))} */}
                </div>
              </div>
            ))
          }
        </div>
      </div>
    );
  }

  // eslint-disable-next-line react/no-deprecated
  async componentWillMount() {
  }
}

export default MatchDetailRules;