import React, { useState, useEffect } from "react";
import { View, Text, Image } from "@tarojs/components";
import Taro from "@tarojs/taro";
import "./index.scss";
import { UserService, UserInfoType } from "@/services/userService";
import * as LoginService from "@/services/loginService";
import { useGlobalState } from "@/store/global";
import { GeneralNavbar } from "@/components";

const OtherUserPage: React.FC = () => {
  // 获取页面参数
  const instance = Taro.getCurrentInstance();
  const user_id = instance.router?.params?.userid;

  // 获取导航栏高度信息
  const { statusNavbarHeightInfo } = useGlobalState() || {};
  const { totalHeight = 98 } = statusNavbarHeightInfo || {};

  // 模拟用户数据
  const [user_info, setUserInfo] = useState<Partial<UserInfoType>>({
    id: parseInt(user_id || "1") || 1,
    gender: "",
    nickname: "网球爱好者",
    avatar_url: require("@/static/userInfo/default_avatar.svg"),
    join_date: "2024年3月加入",
    stats: {
      following_count: 0,
      followers_count: 0,
      hosted_games_count: 0,
      participated_games_count: 0,
    },
    tags: ["北京朝阳", "金融从业者", "NTRP 3.5"],
    bio: "热爱网球的金融从业者，周末喜欢约球\n技术还在提升中，欢迎一起切磋\n平时在朝阳公园附近活动",
    city: "北京",
    district: "朝阳",
    occupation: "金融从业者",
    ntrp_level: "NTRP 3.5",
    is_following: false,
    ongoing_games: [],
    personal_profile: "",
  });

  // 页面加载时获取用户信息
  useEffect(() => {
    const load_user_data = async () => {
      if (user_id) {
        try {
          // const user_data = await UserService.get_user_info(user_id);
          const res = await LoginService.getUserInfoById(user_id);
          const { data: userData } = res;
          // setUserInfo({...res.data as UserInfo, avatar: data.avatar_url || require("@/static/userInfo/default_avatar.svg")});
          setUserInfo({
            id: parseInt(user_id || "") || 0,
            nickname: userData.nickname || "",
            avatar_url: userData.avatar_url || "",
            join_date: userData.subscribe_time
              ? `${new Date(userData.subscribe_time).getFullYear()}年${new Date(userData.subscribe_time).getMonth() + 1
              }月加入`
              : "",
            stats: {
              following_count: userData.stats?.following_count || 0,
              followers_count: userData.stats?.followers_count || 0,
              hosted_games_count: userData.stats?.hosted_games_count || 0,
              participated_games_count:
                userData.stats?.participated_games_count || 0,
            },

            personal_profile: userData.personal_profile || "",
            province: userData.province || "",
            city: userData.city || "",
            district: userData.district || "",
            occupation: userData.occupation || "",
            ntrp_level: "",
            phone: userData.phone || "",
            gender: userData.gender || "",
            birthday: userData.birthday || "",
          });
          setIsFollowing(userData.is_following || false);
        } catch (error) {
          console.error("加载用户数据失败:", error);
          Taro.showToast({
            title: "加载失败",
            icon: "none",
          });
        }
      }
    };

    load_user_data();
  }, [user_id]);

  return (
    <View className="page_container">
      {/* 顶部导航栏 */}
      <GeneralNavbar
        title=""
        showBack={true}
        showAvatar={false}
        onBack={() => {
          Taro.navigateBack();
        }}
      />
      {/* 主要内容 */}
      <View className="main_content" style={{ paddingTop: `${totalHeight}px` }}>
        <Text className="title-text">你应该会想加入这里</Text>
        <Text>你会在这里遇见相似的人，和更好的自己。</Text>
        <Image className="qrcode" mode="scaleToFill" src={require("@/static/userInfo/group-qrcode.svg")} showMenuByLongpress></Image>
        <Text className="hint-text">长按入群吧👆让运动不再一个人</Text>
        <Text>你不是一个人在寻找球友。</Text>
        <Text>你想认识的人，也在找你。</Text>
        <Text>每一个热爱运动的人，</Text>
        <Text>都在这里相遇。</Text>
      </View>
    </View>
  );
};

export default OtherUserPage;