import classNames from 'classnames';

import { Component } from 'preact';

import CdnImage from '../cdn-image/cdn-image';
import Loading from '../loading/loading';

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

interface TeamInfo {
  name: string; // 队伍名称
  logo: string; // 队伍logo
  score: number; // 队伍得分
}

interface DefinitionItem {
  id: number; // 清晰度id
  name: string; // 清晰度名称
  desc: string; // 清晰度描述
  hot: string; // 清晰度热度
}

interface MessageItem {
  id: number; // 消息id
  type: number; // 消息类型
  userName: string; // 用户名称
  userType: string; // 用户类型
  content: string; // 消息内容
}

interface LivePageProps {
  matchName?: string; // 比赛名称
  title?: string; // 比赛标题
  teamA?: TeamInfo; // 队伍A信息
  teamB?: TeamInfo; // 队伍B信息
  commentators?: string[]; // 解说员
  audienceCount?: number; // 观众人数
  definitions?: DefinitionItem[]; // 清晰度列表
  messages?: MessageItem[]; // 消息列表
  videoUrl?: string; // 视频url
  isLoading?: boolean; // 是否加载中
  magIsTeam?: boolean; // 是否是发送队伍消息
  inputText?: string; // 输入框文本
  isPlaying?: boolean; // 视频播放状态
  isSpread?: boolean; // 是否展开视频
  showDefinition?: boolean; // 是否显示清晰度列表
  selectedDefinitionId?: number; // 当前选中的清晰度id
  onClickBack?: () => void; // 点击返回
  onSwitchMsgType?: () => void; // 点击切换消息类型
  onPlayVideo?: () => void; // 播放视频
  onPauseVideo?: () => void; // 暂停视频
  onSpreadVideo?: () => void; // 全屏视频
  onShrinkVideo?: () => void; // 窗口视频
  onVideoBtnChange?: (visible: boolean) => void; // 视频按钮显示状态变化
  onSelectDefinition?: (id: number) => void; // 切换清晰度
  onOpenDefinition?: () => void; // 打开清晰度设置
  onCloseDefinition?: () => void; // 关闭清晰度设置
  onInputChange?: (value: string) => void; // 输入框变化
  onSendMessage?: (text: string) => void; // 发送消息
  showMsgChange?: boolean; // 是否显示输入框切换消息类型
  videoPoster?: string; // 视频封面
}


export default class LivePage extends Component<LivePageProps, any> {
  private hideControlsTimer: any = null;
  private msgContentBoxRef: any = null; // 消息列表容器的引用

  constructor(props: LivePageProps) {
    super(props);
    this.state = {
      showVideoBtn: true, // 内部管理视频按钮显示状态
    };
  }

  componentDidUpdate(prevProps: LivePageProps) {
    // 检测消息列表是否有变化
    if (prevProps.messages !== this.props.messages && this.props.messages && this.props.messages.length > 0) {
      // 滚动到底部
      this.scrollToBottom();
    }

    // 监听 videoUrl 变化或有值时触发自动播放
    if (this.props.videoUrl && prevProps.videoUrl !== this.props.videoUrl) {
      const video = document.getElementById('media-player') as HTMLVideoElement;
      if (video) {
        const Video = document.getElementById('media-player') as HTMLVideoElement;
        Video.play();
        this.props.onPlayVideo?.();
      }
    }
  }

  componentWillUnmount() {
    // 清理定时器
    if (this.hideControlsTimer) {
      clearTimeout(this.hideControlsTimer);
    }
  }

  // 滚动到消息列表底部
  scrollToBottom = () => {
    if (this.msgContentBoxRef) {
      // 使用 requestAnimationFrame 确保 DOM 已经更新（加100确定到底部）
      requestAnimationFrame(() => {
        if (this.msgContentBoxRef) {
          this.msgContentBoxRef.scrollTop = this.msgContentBoxRef.scrollHeight + 100;
        }
      });
    }
  };

  handleVideoClick = () => {
    const { onVideoBtnChange } = this.props;

    // 清除之前的定时器
    if (this.hideControlsTimer) {
      clearTimeout(this.hideControlsTimer);
      this.hideControlsTimer = null;
    }

    this.setState(
      (prevState: any) =>
      // 切换显示/隐藏状态
        ({ showVideoBtn: !prevState.showVideoBtn })
      , () => {
        const { showVideoBtn } = this.state;

        if (showVideoBtn) {
        // 显示时立即回调
          onVideoBtnChange?.(true);
        } else {
        // 隐藏时延迟回调，等待动效结束
          this.hideControlsTimer = setTimeout(() => {
            onVideoBtnChange?.(false);
            this.hideControlsTimer = null;
          }, 300); // 300ms 等待动效结束
        }
      },
    );
  };

  render() {
    const {
      matchName = '',
      title = '',
      teamA = { name: '', logo: '', score: 0 },
      teamB = { name: '', logo: '', score: 0 },
      commentators = [],
      audienceCount = 0,
      definitions = [],
      messages = [],
      videoUrl = '',
      magIsTeam = false,
      inputText = '',
      isPlaying = false,
      isSpread = false,
      showDefinition = false,
      selectedDefinitionId = 1,
      isLoading,
      onClickBack,
      onSwitchMsgType,
      onPlayVideo,
      onPauseVideo,
      onSpreadVideo,
      onShrinkVideo,
      onSelectDefinition,
      onOpenDefinition,
      onCloseDefinition,
      onInputChange,
      onSendMessage,
      showMsgChange = false,
      videoPoster = '',
    } = this.props;

    // 使用内部状态
    const { showVideoBtn } = this.state;

    const playVideo = () => {
      const Video = document.getElementById('media-player') as HTMLVideoElement;
      Video.play();
      onPlayVideo?.();
    };
    const pauseVideo = () => {
      const Video = document.getElementById('media-player') as HTMLVideoElement;
      Video.pause();
      onPauseVideo?.();
    };

    return (
      <div
        className={classNames([
          styles['live-page'],
        ])}
      >

        {!isLoading ? (
          <div className={styles['live-page-inner']}>
            <div
              className={styles['btn-back']}
              onClick={onClickBack}
            />
            <div className={styles['live-page-title']}>
              <text className={styles['match-name']}>
                {matchName}
              </text>
            </div>
            {/* 对战信息 */}
            <div className={styles['live-page-battle']}>
              <div className={styles['battle-team']}>
                <div className={styles['team-item']}>
                  <CdnImage
                    className={styles['team-img']}
                    src={teamA.logo}
                  />
                  <text className={styles['team-name']}>{teamA.name}</text>
                </div>
                <div className={styles['team-vs']}>
                  <div className={styles['vs-rand']}>{title}</div>
                  <div className={styles['vs-score']}>
                    <text className={styles['score-text']}>{teamA.score}</text>
                    <text className={`${styles['score-text']} ${styles['score-colon']}`}>:</text>
                    <text className={styles['score-text']}>{teamB.score}</text>
                  </div>
                </div>
                <div className={`${styles['team-item']} ${styles['team-b']}`}>
                  <text className={styles['team-name']}>{teamB.name}</text>
                  <CdnImage
                    className={styles['team-img']}
                    src={teamB.logo}
                  />
                </div>
              </div>
              <div className={styles['extra-info']}>
                {commentators && commentators.length > 0 && (
                <div className={styles['info-item']}>
                  <div className={styles['narrate-icon']}></div>
                  <text className={styles['extra-text']}>
                    本场AI解说：{commentators.join('、')}
                  </text>
                </div>
                )}
                {audienceCount !== undefined && (
                <div className={`${styles['info-item']} ${styles['info-audience']}`}>
                  <div className={styles['audience-icon']}></div>
                  <text className={styles['extra-text']}>{audienceCount}</text>
                </div>
                )}
              </div>
            </div>
            {/* 视频区域&对话框 */}
            <div className={styles['live-detail']}>
              {/* 视频区域 */}
              <div className={`${styles['live-content']} ${isSpread ? styles['live-content-spread'] : ''}`}>
                {isSpread && (
                  <div className={classNames(styles['video-title'], {
                    [styles['video-title-hide']]: !showVideoBtn,
                  })}
                  >
                    <div
                      className={styles['video-back']}
                      onClick={onShrinkVideo}
                    />
                    <text className={styles['video-title-text']}>
                      {title}
                    </text>
                  </div>
                )}
                <video
                  id="media-player"
                  className={styles['live-page-video']}
                  autoPlay={true}
                  poster={videoPoster}
                  src={videoUrl}
                  onClick={this.handleVideoClick}
                />
                {showDefinition
                  && (
                  <div className={styles['live-definition-set']}>
                    <div className={styles['live-definition-title']}>
                      <div className={styles['live-definition-title-text']}>画面设置</div>
                      <div
                        className={styles['live-definition-title-close']}
                        onClick={onCloseDefinition}
                      >
                      </div>
                    </div>
                    <div className={styles['live-definition-line']}></div>
                    <div className={styles['live-definition-content']}>
                      {definitions?.map(item => (
                        <div
                          key={item.id}
                          className={`${styles['live-definition-item']} ${selectedDefinitionId === item.id ? styles['live-definition-item-active'] : ''}`}
                          onClick={() => onSelectDefinition?.(item.id)}
                        >
                          {selectedDefinitionId === item.id
                            && <div className={styles['definition-item-decorate-left']}></div>}
                          <div className={styles['definition-item-decorate-center']}>
                            <div className={styles['definition-item-name']}>
                              <text>{item.name}</text>
                            </div>
                            <div className={styles['definition-item-desc']}>
                              <text>{item.desc}</text>
                            </div>
                            {item.hot
                              && (
                              <div className={styles['definition-item-hot']}>
                                <text className={styles['definition-item-hot-text']}>{item.hot}</text>
                              </div>
                              )}
                          </div>
                          {selectedDefinitionId === item.id
                            && <div className={styles['definition-item-decorate-right']}></div>}
                        </div>
                      ))}
                    </div>
                  </div>
                  )}
                <div className={classNames(styles['live-bottom'], {
                  [styles['live-bottom-hide']]: !showVideoBtn,
                })}
                >
                  <div className={styles['live-play']}>
                    {!isPlaying ? (
                      <div
                        className={styles['live-play-icon']}
                        onClick={playVideo}
                      >
                      </div>
                    ) : (
                      <div
                        className={styles['live-pause-icon']}
                        onClick={pauseVideo}
                      >
                      </div>
                    )}
                  </div>

                  <div className={styles['live-control']}>
                    {definitions.length > 0 && (
                    <div
                      className={styles['live-definition-btn']}
                      onClick={onOpenDefinition}
                    >
                      {definitions.find(item => item.id === selectedDefinitionId)?.name || '超清'}
                    </div>
                    )}
                    {!isSpread ? (
                      <div
                        className={styles['live-spread-icon']}
                        onClick={onSpreadVideo}
                      >
                      </div>
                    ) : (
                      <div
                        className={styles['live-shrink-icon']}
                        onClick={onShrinkVideo}
                      >
                      </div>
                    )}
                  </div>

                </div>
              </div>
              {/* 对话框 */}
              <div className={styles['msg-box']}>
                <div className={styles['msg-content']}>
                  <div className={styles['msg-title']}>
                    <div className={styles['msg-title-icon']}> </div>
                    <text className={styles['msg-title-text']}>理性观赛，注意文明发言</text>
                  </div>
                  <div
                    className={styles['msg-content-box']}
                    ref={(el) => {
                      this.msgContentBoxRef = el;
                    }}
                  >
                    {messages?.map((msg, index) => (
                      <div
                        key={index}
                        className={styles['msg-item']}
                      >
                        {msg.type !== 0
                        && (
                        <div className={`${styles['msg-item-type-box']} ${msg.type === 1 ? styles['msg-item-type-box-gray'] : ''}`}>
                          <text className={styles['msg-item-type']}>
                            {msg.type === 1 ? '全部' : '队伍'}
                          </text>
                        </div>
                        )}
                        <text className={styles['msg-item-msg']}>
                          {msg.type !== 0
                          && (
                            <text className={styles['msg-item-msg']}>
                              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            </text>
                          )}
                          <text className={styles['extra-text-user-neme']}>{msg.userName}</text>
                          {msg.userType && (
                            <text className={styles['extra-text-user-type']}>（{msg.userType}）</text>
                          )}
                          <text className={styles['extra-text-user-neme']}>：</text>
                          <text className={styles['extra-text-user-msg']}>{msg.content}</text>
                        </text>
                      </div>
                    ))}
                  </div>
                </div>
                <div className={styles['live-chat']}>
                  {showMsgChange && (
                  <div
                    className={styles['chat-type']}
                    onClick={onSwitchMsgType}
                  >
                    <div
                      className={styles['chat-type-text']}
                    >
                      {magIsTeam ? '队伍' : '全部'}
                    </div>
                    <div className={styles['chat-switchover']}></div>
                  </div>
                  )}
                  <div className={styles['chat-partition']}></div>
                  <input
                    className={styles['chat-content']}
                    placeholder="说点什么··· ···"
                    value={inputText}
                    onChange={(e: any) => onInputChange?.(e.target.value)}
                    onKeyDown={(e: any) => {
                      console.log('e.key', e.key);
                      if ((e.key === 'Enter' || e.key === 13) && inputText?.trim()) {
                        onSendMessage?.(inputText);
                      }
                    }}
                  />
                </div>
              </div>
            </div>
          </div>
        )
          : (
            <Loading
              onClickBack={onClickBack}
              background={true}
              loadingText="加载中..."
              showBack={true}
            />
          )}
      </div>
    );
  }
}