/**
 * 空状态页面
 * 当球局不存在或已删除时显示的独立页面
 */
import { useState, useEffect } from 'react';
import { View, Text, Image } from '@tarojs/components';
import Taro from '@tarojs/taro';
import { useGlobalState } from '@/store/global';
import { GeneralNavbar } from '@/components';
import emptyStateIcon from '@/static/emptyStatus/game-detail-empty.svg';
import './index.scss';

function Index() {
  const { statusNavbarHeightInfo } = useGlobalState() || {};
  const [countdown, setCountdown] = useState(5);

  // 倒计时自动返回
  useEffect(() => {
    if (countdown <= 0) {
       handle_go_to_home();
      return;
    }

    const timer = setTimeout(() => {
      setCountdown(countdown - 1);
    }, 1000);

    return () => clearTimeout(timer);
  }, [countdown]);

  // 跳转到其他球局 - 返回首页列表
  const handle_go_to_other_games = () => {
    (Taro as any).redirectTo({
      url: '/main_pages/index',
    });
  };

  // 返回首页
  const handle_go_to_home = () => {
    const pages = (Taro as any).getCurrentPages();
    if (pages.length <= 1) {
      (Taro as any).redirectTo({
        url: '/main_pages/index',
      });
    } else {
      (Taro as any).navigateBack();
    }
  };

  return (
    <View
      className="empty_state_page"
    >
      <GeneralNavbar title="" showBack={true} />

      <View className="empty_state_page__content">
        {/* 空状态图片 */}
        <Image
          className="empty_state_page__icon"
          src={emptyStateIcon}
          mode="aspectFit"
        />

        {/* 提示文字 */}
        <View className="empty_state_page__tip">
          <Text className="empty_state_page__tip_text">
            页面将在 {countdown}s 后自动返回球局首页
          </Text>
        </View>

        {/* 按钮区域 */}
        <View className="empty_state_page__buttons">
          <View
            className="empty_state_page__button empty_state_page__button--primary"
            onClick={handle_go_to_other_games}
          >
            <Text className="empty_state_page__button_text">去看看其他球局</Text>
          </View>
          <View
            className="empty_state_page__button empty_state_page__button--secondary"
            onClick={handle_go_to_home}
          >
            <Text className="empty_state_page__button_text">返回首页</Text>
          </View>
        </View>
      </View>
    </View>
  );
}

export default Index;