import React, {
  useState,
  useEffect,
  useRef,
  useImperativeHandle,
  forwardRef,
} from "react";
import { View, Text, Image, Map, ScrollView } from "@tarojs/components";
import { Avatar } from "@nutui/nutui-react-taro";
import Taro, {
  useRouter,
  useShareAppMessage,
  useShareTimeline,
  useDidShow,
} from "@tarojs/taro";
import dayjs from "dayjs";
import "dayjs/locale/zh-cn";
// 导入API服务
import { CommonPopup, withAuth, NTRPEvaluatePopup } from "@/components";
import {
  EvaluateType,
  SceneType,
  DisplayConditionType,
} from "@/components/NTRPEvaluatePopup";
import DetailService, { MATCH_STATUS } from "@/services/detailService";
import * as LoginService from "@/services/loginService";
import OrderService from "@/services/orderService";
import { getCurrentLocation, calculateDistance } from "@/utils/locationUtils";
import { useUserInfo, useUserActions } from "@/store/userStore";
import img from "@/config/images";
import "./index.scss";

dayjs.locale("zh-cn");

// 将·作为连接符插入到标签文本之间
function insertDotInTags(tags: string[]) {
  return tags.join("-·-").split("-");
}

function GameTags(props) {
  const { detail } = props;
  const tags = [
    {
      name: "🕙 急招",
      icon: "",
    },
    {
      name: "🔥 本周热门",
      icon: "",
    },
    {
      name: "🎉 新活动",
      icon: "",
    },
    {
      name: "官方组织",
      icon: "",
    },
  ];
  return (
    <View className="detail-page-content-avatar-tags">
      <View className="detail-page-content-avatar-tags-avatar">
        {/* network image mock */}
        <Image
          className="detail-page-content-avatar-tags-avatar-image"
          src="https://img.yzcdn.cn/vant/cat.jpeg"
        />
      </View>
      <View className="detail-page-content-avatar-tags-tags">
        {tags.map((tag, index) => (
          <View
            key={index}
            className="detail-page-content-avatar-tags-tags-tag"
          >
            {tag.icon && <Image src={tag.icon} />}
            <Text>{tag.name}</Text>
          </View>
        ))}
      </View>
    </View>
  );
}

type CourselItemType = {
  url: string;
  width: number;
  height: number;
};
function Coursel(props) {
  const { detail } = props;
  const [list, setList] = useState<CourselItemType[]>([]);
  const [listWidth, setListWidth] = useState(0);
  const { image_list } = detail;

  async function getImagesMsg(imageList) {
    const latest_list: CourselItemType[] = [];
    const sys_info = await Taro.getSystemInfo();
    console.log(sys_info, "info");
    const max_width = sys_info.screenWidth - 30;
    const max_height = 240;
    const current_aspect_ratio = max_width / max_height;
    let container_width = 0;
    for (const imageUrl of imageList) {
      const { width, height } = await Taro.getImageInfo({ src: imageUrl });
      if (width && height) {
        const aspect_ratio = width / height;
        const latest_w_h = { width, height };
        if (aspect_ratio < current_aspect_ratio) {
          latest_w_h.width = max_height * aspect_ratio;
          latest_w_h.height = max_height;
        } else {
          latest_w_h.width = max_width;
          latest_w_h.height = max_width / aspect_ratio;
        }
        container_width += latest_w_h.width + 12;
        latest_list.push({
          url: imageUrl,
          width: latest_w_h.width,
          height: latest_w_h.height,
        });
      }
    }
    setList(latest_list);
    setListWidth(container_width);
  }

  useEffect(() => {
    getImagesMsg(image_list || []);
  }, [image_list]);

  return (
    <View className="detail-swiper-container">
      <View
        className="detail-swiper-scroll-container"
        style={{ width: listWidth + "px" }}
      >
        {list.map((item, index) => {
          return (
            <View className="detail-swiper-item" key={index}>
              <Image
                src={item.url}
                mode="aspectFill"
                className="detail-swiper-item-image"
                style={{ width: item.width + "px", height: item.height + "px" }}
              />
            </View>
          );
        })}
      </View>
    </View>
  );
}

// 分享弹窗
const SharePopup = forwardRef(
  ({ id, from }: { id: string; from: string }, ref) => {
    const [visible, setVisible] = useState(false);

    useImperativeHandle(ref, () => ({
      show: () => {
        setVisible(true);
      },
    }));

    // function handleShareToWechat() {
    //   useShareAppMessage(() => {
    //     return {
    //       title: '分享',
    //       path: `/pages/detail/index?id=${id}&from=share`,
    //     }
    //   })
    // }

    // function handleShareToWechatMoments() {
    //   useShareTimeline(() => {
    //     return {
    //       title: '分享',
    //       path: `/pages/detail/index?id=${id}&from=share`,
    //     }
    //   })
    // }

    // function handleSaveToLocal() {
    //   Taro.saveImageToPhotosAlbum({
    //     filePath: images[0],
    //     success: () => {
    //       Taro.showToast({ title: '保存成功', icon: 'success' })
    //     },
    //     fail: () => {
    //       Taro.showToast({ title: '保存失败', icon: 'none' })
    //     },
    //   })
    // }

    return (
      <CommonPopup
        title="分享"
        visible={visible}
        onClose={() => {
          setVisible(false);
        }}
        hideFooter
        style={{ minHeight: "100px" }}
      >
        <View catchMove className="share-popup-content">
          分享卡片
        </View>
      </CommonPopup>
    );
  },
);

function navto(url) {
  Taro.navigateTo({
    url: url,
  });
}

// 底部操作栏
function StickyButton(props) {
  const { handleShare, handleJoinGame, detail } = props;
  const ntrpRef = useRef(null);
  // const userInfo = useUserInfo();
  // const { id } = userInfo;
  const {
    id,
    publisher_id,
    match_status,
    price,
    user_action_status,
    end_time,
  } = detail || {};

  function handleSelfEvaluate() {
    // TODO: 打开自评弹窗
    ntrpRef?.current?.show();
  }

  function generateTextAndAction(
    user_action_status: null | { [key: string]: boolean },
  ): undefined | { text: string | React.FC; action: () => void } {
    if (!user_action_status) {
      return;
    }
    // user_action_status.can_assess = true;
    user_action_status.can_join = true;
    const {
      can_assess,
      can_join,
      can_substitute,
      can_pay,
      is_substituting,
      waiting_start,
    } = user_action_status || {};
    if (
      Object.values(user_action_status).every((value) => !value) &&
      dayjs(end_time).isBefore(dayjs())
    ) {
      return {
        text: "球局已结束，查看其他球局",
        action: navto.bind(null, "/pages/list/index"),
      };
    }
    if (waiting_start) {
      return {
        text: "等待开始, 查看更多球局",
        action: navto.bind(null, "/pages/list/index"),
      };
    } else if (is_substituting) {
      return {
        text: "候补中，查看其他球局",
        action: navto.bind(null, "/pages/list/index"),
      };
    } else if (can_pay) {
      return {
        text: "继续支付",
        action: async () => {
          const res = await OrderService.getUnpaidOrder(id);
          if (res.code === 0) {
            Taro.navigateTo({
              url: `/mod_user/orderDetail/index?id=${res.data.order_info.order_id}`,
            });
          }
        },
      };
    } else if (can_substitute) {
      return {
        text: "立即候补",
        action: handleJoinGame,
      };
    } else if (can_join) {
      return {
        text: () => {
          return (
            <>
              <Text>🎾</Text>
              <Text>立即加入</Text>
              <View className="game-price">
                <Text>¥ {price}</Text>
              </View>
            </>
          );
        },
        action: handleJoinGame,
      };
    } else if (can_assess) {
      return {
        text: () => (
          <NTRPEvaluatePopup
            ref={ntrpRef}
            types={[EvaluateType.EDIT, EvaluateType.EVALUATE]}
            scene={SceneType.DETAIL}
            displayCondition={DisplayConditionType.AUTO}
          >
            <Text>NTRP自评</Text>
          </NTRPEvaluatePopup>
        ),
        action: handleSelfEvaluate,
      };
    }
    return {
      text: "球局无法加入",
      action: () => {},
    };
  }

  if (!user_action_status) {
    return "";
  }

  const { text, action } = generateTextAndAction(user_action_status)!;

  let ActionText: React.FC | string = text;

  if (typeof ActionText === "string") {
    ActionText = () => {
      return <Text>{text as string}</Text>;
    };
  }

  // const role = Number(publisher_id) === id ? "ownner" : "visitor";

  return (
    <View className="sticky-bottom-bar">
      <View className="sticky-bottom-bar-share-and-comment">
        <View className="sticky-bottom-bar-share" onClick={handleShare}>
          <Image
            className="sticky-bottom-bar-share-icon"
            src={img.ICON_DETAIL_SHARE}
          />
          <Text className="sticky-bottom-bar-share-text">分享</Text>
        </View>
        <View className="sticky-bottom-bar-share-and-comment-separator" />
        <View
          className="sticky-bottom-bar-comment"
          onClick={() => {
            Taro.showToast({ title: "To be continued", icon: "none" });
          }}
        >
          <Image
            className="sticky-bottom-bar-comment-icon"
            src={img.ICON_DETAIL_COMMENT_DARK}
          />
          <Text className="sticky-bottom-bar-comment-text">32</Text>
        </View>
      </View>
      <View className="sticky-bottom-bar-join-game" onClick={action}>
        <ActionText />
      </View>
    </View>
  );
}

// 球局信息
function GameInfo(props) {
  const { detail, currentLocation } = props;
  const {
    latitude,
    longitude,
    location,
    location_name,
    start_time,
    end_time,
    weather = [{}],
  } = detail || {};

  const [{ iconDay, tempMax, tempMin }] = weather;

  const openMap = () => {
    Taro.openLocation({
      latitude, // 纬度（必填）
      longitude, // 经度（必填）
      name: location_name, // 位置名（可选）
      address: location, // 地址详情（可选）
      scale: 15, // 地图缩放级别（1-28）
    });
  };

  const [c_latitude, c_longitude] = currentLocation;
  const distance =
    latitude && longitude
      ? calculateDistance(c_latitude, c_longitude, latitude, longitude) / 1000
      : 0;

  const startTime = dayjs(start_time);
  const endTime = dayjs(end_time);
  const game_length = endTime.diff(startTime, "minutes") / 60;

  const startMonth = startTime.format("M");
  const startDay = startTime.format("D");
  const theDayOfWeek = startTime.format("dddd");
  const startDate = `${startMonth}月${startDay}日 ${theDayOfWeek}`;
  const gameRange = `${startTime.format("HH:mm")} - ${endTime.format("HH:mm")}`;

  return (
    <View className="detail-page-content-game-info">
      {/* Date and Weather */}
      <View className="detail-page-content-game-info-date-weather">
        {/* Calendar and Date time */}
        <View className="detail-page-content-game-info-date-weather-calendar-date">
          {/* Calendar */}
          <View className="detail-page-content-game-info-date-weather-calendar-date-calendar">
            <View className="month">{startMonth}月</View>
            <View className="day">{startDay}</View>
          </View>
          {/* Date time */}
          <View className="detail-page-content-game-info-date-weather-calendar-date-date">
            <View className="date">{startDate}</View>
            <View className="venue-time">
              {gameRange} （{game_length}小时）
            </View>
          </View>
        </View>
        {/* Weather */}
        <View className="detail-page-content-game-info-date-weather-weather">
          {/* Weather icon */}
          <View className="detail-page-content-game-info-date-weather-weather-icon">
            {/*<Image className="weather-icon" src={img.ICON_WEATHER_SUN} />*/}
            <i className={`qi-${iconDay}`}></i>
          </View>
          {/* Weather text and temperature */}
          <View className="detail-page-content-game-info-date-weather-weather-text-temperature">
            {tempMin && tempMax && (
              <Text>
                {tempMin}℃ - {tempMax}℃
              </Text>
            )}
          </View>
        </View>
      </View>
      {/* Place */}
      <View className="detail-page-content-game-info-place">
        {/* venue location message */}
        <View className="location-message">
          {/* location icon */}
          <View className="location-message-icon">
            <Image
              className="location-message-icon-image"
              src={img.ICON_DETAIL_MAP}
            />
          </View>
          {/* location message */}
          <View className="location-message-text">
            {/* venue name and distance */}
            {distance ? (
              <View
                className="location-message-text-name-distance"
                onClick={openMap}
              >
                <Text>{location_name || "-"}</Text>
                <Text>·</Text>
                <Text>{distance.toFixed(1)}km</Text>
                <Image
                  className="location-message-text-name-distance-arrow"
                  src={img.ICON_DETAIL_ARROW_RIGHT}
                />
              </View>
            ) : (
              ""
            )}
            {/* venue address */}
            <View className="location-message-text-address">
              <Text>{location || "-"}</Text>
            </View>
          </View>
        </View>
        {/* venue map */}
        <View className="location-map">
          {longitude && latitude && (
            <Map
              className="location-map-map"
              longitude={c_longitude}
              latitude={c_latitude}
              markers={[
                {
                  id: 1,
                  latitude,
                  longitude,
                  iconPath: require("@/static/detail/icon-stark.svg"),
                  width: 16,
                  height: 16,
                },
              ]}
              includePoints={[
                { latitude, longitude },
                { latitude: c_latitude, longitude: c_longitude },
              ]}
              includePadding={{ left: 50, right: 50, top: 50, bottom: 50 }}
              onError={() => {}}
              // hide business msg
              showLocation
              theme="dark"
            />
          )}
        </View>
      </View>
    </View>
  );
}

// 场馆信息
function VenueInfo(props) {
  const { detail } = props;
  const [visible, setVisible] = useState(false);
  const {
    venue_description,
    venue_description_tag = [],
    venue_image_list = [],
  } = detail;

  function showScreenShot() {
    setVisible(true);
  }
  function onClose() {
    setVisible(false);
  }

  function previewImage(current_url) {
    Taro.previewImage({
      current: current_url,
      urls: venue_image_list.map((c) => c.url),
    });
  }
  return (
    <View className="detail-page-content-venue">
      {/* venue detail title and venue ordered status */}
      <View className="venue-detail-title">
        <Text>场馆详情</Text>
        {venue_image_list?.length > 0 ? (
          <>
            <Text>·</Text>
            <View className="venue-reserve-status" onClick={showScreenShot}>
              <Text>已订场</Text>
              <Image
                className="venue-reserve-screenshot"
                src={img.ICON_DETAIL_ARROW_RIGHT}
              />
            </View>
          </>
        ) : (
          ""
        )}
      </View>
      {/* venue detail content */}
      <View className="venue-detail-content">
        {/* venue detail tags */}
        <View className="venue-detail-content-tags">
          {insertDotInTags(venue_description_tag).map((tag, index) => (
            <View key={index} className="venue-detail-content-tags-tag">
              <Text>{tag}</Text>
            </View>
          ))}
        </View>
        {/* venue remarks */}
        <View className="venue-detail-content-remarks">
          <Text>{venue_description}</Text>
        </View>
      </View>
      <CommonPopup
        visible={visible}
        onClose={onClose}
        round
        hideFooter
        position="bottom"
        zIndex={1001}
      >
        <View className="venue-screenshot-title">预定截图</View>
        <ScrollView scrollY className="venue-screenshot-scroll-view">
          <View className="venue-screenshot-image-list">
            {venue_image_list.map((item) => {
              return (
                <View
                  className="venue-screenshot-image-item"
                  onClick={previewImage.bind(null, item.url)}
                >
                  <Image
                    className="venue-screenshot-image-item-image"
                    src={item.url}
                  />
                </View>
              );
            })}
          </View>
        </ScrollView>
      </CommonPopup>
    </View>
  );
}

function genNTRPRequirementText(min, max) {
  if (min && max && min !== max) {
    return `${min} - ${max} 之间`;
  } else if (max === 1) {
    return "没有要求";
  } else if (max) {
    return `${max} 以上`;
  }
  return "-";
}
// 玩法要求
function GamePlayAndRequirement(props) {
  const {
    detail: { skill_level_min, skill_level_max, play_type, game_type },
  } = props;

  const requirements = [
    {
      title: "NTRP水平要求",
      desc: genNTRPRequirementText(skill_level_min, skill_level_max),
    },
    {
      title: "活动玩法",
      desc: play_type || "-",
    },
    {
      title: "人员构成",
      desc: game_type || "-",
    },
  ];
  return (
    <View className="detail-page-content-gameplay-requirements">
      {/* title */}
      <View className="gameplay-requirements-title">
        <Text>玩法要求</Text>
      </View>
      {/* requirements */}
      <View className="gameplay-requirements">
        {requirements.map((item, index) => (
          <View key={index} className="gameplay-requirements-item">
            <Text className="gameplay-requirements-item-title">
              {item.title}
            </Text>
            <Text className="gameplay-requirements-item-desc">{item.desc}</Text>
          </View>
        ))}
      </View>
    </View>
  );
}

// 参与者
function Participants(props) {
  const { detail = {}, handleJoinGame } = props;
  const participants = detail.participants || [];
  const {
    participant_count,
    max_participants,
    user_action_status = {},
  } = detail;
  const { can_join, can_pay, can_substitute, is_substituting, waiting_start } =
    user_action_status;
  const showApplicationEntry =
    [can_pay, can_substitute, is_substituting, waiting_start].every(
      (item) => !item,
    ) && can_join;
  const leftCount = max_participants - participant_count;
  const organizer_id = Number(detail.publisher_id);
  return (
    <View className="detail-page-content-participants">
      <View className="participants-title">
        <Text>参与者</Text>
        <Text>·</Text>
        <Text>{leftCount > 0 ? `剩余空位 ${leftCount}` : "已满员"}</Text>
      </View>
      {participant_count > 0 || showApplicationEntry ? (
        <View className="participants-list">
          {/* application */}
          {showApplicationEntry && (
            <View
              className="participants-list-application"
              onClick={() => {
                handleJoinGame();
                // Taro.showToast({ title: "To be continued", icon: "none" });
              }}
            >
              <Image
                className="participants-list-application-icon"
                src={img.ICON_DETAIL_APPLICATION_ADD}
              />
              <Text className="participants-list-application-text">
                申请加入
              </Text>
            </View>
          )}
          {/* participants list */}
          <ScrollView className="participants-list-scroll" scrollX>
            <View
              className="participants-list-scroll-content"
              style={{
                width: `${participants.length * 103 + (participants.length - 1) * 8}px`,
              }}
            >
              {participants.map((participant) => {
                const {
                  user: {
                    avatar_url,
                    nickname,
                    level,
                    id: participant_user_id,
                  },
                } = participant;
                const role =
                  participant_user_id === organizer_id ? "组织者" : "参与者";
                return (
                  <View key={participant.id} className="participants-list-item">
                    <Avatar
                      className="participants-list-item-avatar"
                      src={avatar_url}
                    />
                    <Text className="participants-list-item-name">
                      {nickname || "未知"}
                    </Text>
                    <Text className="participants-list-item-level">
                      {level || "未知"}
                    </Text>
                    <Text className="participants-list-item-role">{role}</Text>
                  </View>
                );
              })}
            </View>
          </ScrollView>
        </View>
      ) : (
        ""
      )}
    </View>
  );
}

function SupplementalNotes(props) {
  const {
    detail: { description, description_tag = [] },
  } = props;
  return (
    <View className="detail-page-content-supplemental-notes">
      <View className="supplemental-notes-title">
        <Text>补充说明</Text>
      </View>
      <View className="supplemental-notes-content">
        {/* supplemental notes tags */}
        <View className="supplemental-notes-content-tags">
          {insertDotInTags(description_tag).map((tag, index) => (
            <View key={index} className="supplemental-notes-content-tags-tag">
              <Text>{tag}</Text>
            </View>
          ))}
        </View>
        {/* supplemental notes content */}
        <View className="supplemental-notes-content-text">
          <Text>{description}</Text>
        </View>
      </View>
    </View>
  );
}

function genRecommendGames(games, location, avatar) {
  return games.map((item) => {
    const {
      id,
      title,
      start_time,
      end_time,
      court_type,
      location_name,
      current_players,
      max_players,
      latitude,
      longitude,
      skill_level_max,
      skill_level_min,
      play_type,
    } = item;
    const [c_latitude, c_longitude] = location;
    const distance =
      calculateDistance(c_latitude, c_longitude, latitude, longitude) / 1000;
    const startTime = dayjs(start_time);
    const endTime = dayjs(end_time);
    return {
      id,
      title,
      time: startTime.format("YYYY-MM-DD HH:MM"),
      timeLength: endTime.diff(startTime, "hour"),
      venue: location_name,
      venueType: court_type,
      distance: `${distance.toFixed(2)}km`,
      avatar,
      applications: max_players,
      checkedApplications: current_players,
      levelRequirements: `NTRP ${genNTRPRequirementText(skill_level_min, skill_level_max)}`,
      playType: play_type,
    };
  });
}

function OrganizerInfo(props) {
  const {
    userInfo,
    currentLocation: location,
    onUpdateUserInfo = () => {},
  } = props;
  const {
    id,
    nickname,
    avatar_url,
    is_following,
    ntrp_level,
    stats: { hosted_games_count } = {},
    ongoing_games = [],
  } = userInfo;

  const myInfo = useUserInfo();
  const { id: my_id } = myInfo as LoginService.UserInfoType;

  const recommendGames = genRecommendGames(ongoing_games, location, avatar_url);

  const toggleFollow = async (follow) => {
    try {
      if (follow) {
        await LoginService.unFollowUser(id);
      } else {
        await LoginService.followUser(id);
      }
      onUpdateUserInfo();
      Taro.showToast({
        title: `${nickname} ${follow ? "已取消关注" : "已关注"}`,
        icon: "success",
      });
    } catch (e) {
      Taro.showToast({
        title: `${nickname} ${follow ? "取消关注失败" : "关注失败"}`,
        icon: "error",
      });
    }
  };

  return (
    <View className="detail-page-content-organizer-recommend-games">
      {/* orgnizer title */}
      <View className="organizer-title">
        <Text>组织者</Text>
      </View>
      {/* organizer avatar and name */}
      <View className="organizer-avatar-name">
        <Avatar className="organizer-avatar-name-avatar" src={avatar_url} />
        <View className="organizer-avatar-name-message">
          <Text className="organizer-avatar-name-message-name">{nickname}</Text>
          <View className="organizer-avatar-name-message-stats">
            <Text>已组织 {hosted_games_count} 次</Text>
            <View className="organizer-avatar-name-message-stats-separator" />
            <Text>NTRP {ntrp_level || "初学者"}</Text>
          </View>
        </View>
        <View className="organizer-actions">
          {my_id === id ? (
            ""
          ) : (
            <View
              className="organizer-actions-follow"
              onClick={toggleFollow.bind(null, is_following)}
            >
              {is_following ? (
                <Text className="organizer-actions-follow-text">取消关注</Text>
              ) : (
                <>
                  <Image
                    className="organizer-actions-follow-icon"
                    src={img.ICON_DETAIL_APPLICATION_ADD}
                  />
                  <Text className="organizer-actions-follow-text">关注</Text>
                </>
              )}
            </View>
          )}
          <View className="organizer-actions-comment">
            <Image
              className="organizer-actions-comment-icon"
              src={img.ICON_DETAIL_COMMENT}
            />
          </View>
        </View>
      </View>
      {/* recommend games by organizer */}
      <View className="organizer-recommend-games">
        <View className="organizer-recommend-games-title" onClick={() => {}}>
          <Text>TA的更多活动</Text>
          <Image
            className="organizer-recommend-games-title-arrow"
            src={img.ICON_DETAIL_ARROW_RIGHT}
          />
        </View>
        <ScrollView className="recommend-games-list" scrollX>
          <View className="recommend-games-list-content">
            {recommendGames.map((game, index) => (
              <View key={index} className="recommend-games-list-item">
                {/* game title */}
                <View className="recommend-games-list-item-title">
                  <Text>{game.title}</Text>
                  <Image
                    className="recommend-games-list-item-title-arrow"
                    src={img.ICON_DETAIL_ARROW_RIGHT}
                  />
                </View>
                {/* game time and range */}
                <View className="recommend-games-list-item-time-range">
                  <Text>{game.time}</Text>
                  <Text>{game.timeLength}</Text>
                </View>
                {/* game location、vunue、distance */}
                <View className="recommend-games-list-item-location-venue-distance">
                  <Text>{game.venue}</Text>
                  <Text>·</Text>
                  <Text>{game.venueType}</Text>
                  <Text>·</Text>
                  <Text>{game.distance}</Text>
                </View>
                {/* organizer avatar、applications、level requirements、play type */}
                <View className="recommend-games-list-item-addon">
                  <Avatar
                    className="recommend-games-list-item-addon-avatar"
                    src={game.avatar}
                  />
                  <View className="recommend-games-list-item-addon-message">
                    <View className="recommend-games-list-item-addon-message-applications">
                      <Text>
                        报名人数 {game.checkedApplications}/{game.applications}
                      </Text>
                    </View>
                    <View className="recommend-games-list-item-addon-message-level-requirements">
                      <Text>{game.levelRequirements}</Text>
                    </View>
                    <View className="recommend-games-list-item-addon-message-play-type">
                      <Text>{game.playType}</Text>
                    </View>
                  </View>
                </View>
              </View>
            ))}
          </View>
        </ScrollView>
      </View>
    </View>
  );
}

function Index() {
  const [detail, setDetail] = useState<any>({});
  const { params } = useRouter();
  const [currentLocation, setCurrentLocation] = useState<[number, number]>([
    0, 0,
  ]);
  const { id, from } = params;
  const [userInfo, setUserInfo] = useState({}); // 组织者的userInfo
  const { fetchUserInfo } = useUserActions(); // 获取登录用户的userInfo

  const sharePopupRef = useRef<any>(null);

  useDidShow(async () => {
    await updateLocation();
    await fetchUserInfo();
    // await fetchDetail();
  });

  const updateLocation = async () => {
    try {
      const { address, ...location } = await getCurrentLocation();
      setCurrentLocation([location.latitude, location.longitude]);

      // 使用 userStore 中的统一位置更新方法
      // await updateUserInfo({ latitude: location.latitude, longitude: location.longitude })
      await DetailService.updateLocation({
        latitude: Number(location.latitude),
        longitude: Number(location.longitude),
      });

      // 位置更新后，重新获取详情页数据（因为距离等信息可能发生变化）
      await fetchDetail();
    } catch (error) {
      console.error("用户位置更新失败", error);
    }
  };

  const fetchDetail = async () => {
    if (!id) return;
    const res = await DetailService.getDetail(Number(id));
    if (res.code === 0) {
      setDetail(res.data);
      fetchUserInfoById(res.data.publisher_id);
    }
  };

  const onUpdateUserInfo = () => {
    fetchUserInfoById(detail.publisher_id);
  };

  async function fetchUserInfoById(user_id) {
    const userDetailInfo = await LoginService.getUserInfoById(Number(user_id));
    if (userDetailInfo.code === 0) {
      // console.log(userDetailInfo.data);
      setUserInfo(userDetailInfo.data);
    }
  }

  function handleShare() {
    sharePopupRef.current.show();
  }

  const handleJoinGame = () => {
    Taro.navigateTo({
      url: `/mod_user/orderDetail/index?gameId=${id}`,
    });
  };

  function handleBack() {
    const pages = Taro.getCurrentPages();
    if (pages.length <= 1) {
      Taro.redirectTo({
        url: "/pages/list/index",
      });
    } else {
      Taro.navigateBack();
    }
  }

  console.log("detail", detail);
  const backgroundImage = detail?.image_list?.[0]
    ? { backgroundImage: `url(${detail?.image_list?.[0]})` }
    : {};

  return (
    <View className="detail-page">
      {/* custom navbar */}
      <view className="custom-navbar">
        <View className="detail-navigator">
          <View className="detail-navigator-back" onClick={handleBack}>
            <Image
              className="detail-navigator-back-icon"
              src={img.ICON_ARROW_LEFT}
            />
          </View>
          <View className="detail-navigator-icon">
            <Image
              className="detail-navigator-logo-icon"
              src={img.ICON_LOGO_GO}
            />
          </View>
        </View>
      </view>
      <View className="detail-page-bg" style={backgroundImage} />
      {/* swiper */}
      <Coursel detail={detail} />
      {/* content */}
      <View className="detail-page-content">
        {/* avatar and tags */}
        <GameTags detail={detail} />
        {/* title */}
        <View className="detail-page-content-title">
          <Text className="detail-page-content-title-text">{detail.title}</Text>
        </View>
        {/* Date and Place and weather */}
        <GameInfo detail={detail} currentLocation={currentLocation} />
        {/* detail */}
        <VenueInfo detail={detail} />
        {/* gameplay requirements */}
        <GamePlayAndRequirement detail={detail} />
        {/* participants */}
        <Participants detail={detail} handleJoinGame={handleJoinGame} />
        {/* supplemental notes */}
        <SupplementalNotes detail={detail} />
        {/* organizer and recommend games by organizer */}
        <OrganizerInfo
          detail={detail}
          userInfo={userInfo}
          currentLocation={currentLocation}
          onUpdateUserInfo={onUpdateUserInfo}
        />
        {/* sticky bottom action bar */}
        <StickyButton
          handleShare={handleShare}
          handleJoinGame={handleJoinGame}
          detail={detail}
        />
        {/* share popup */}
        <SharePopup
          ref={sharePopupRef}
          id={id as string}
          from={from as string}
        />
      </View>
    </View>
  );
}

export default withAuth(Index);