import React, { useState, useEffect } from "react";
import { View, Text, ScrollView, Image } from "@tarojs/components";
import ListContainer from "@/container/listContainer";
import Taro from "@tarojs/taro";
import img from "@/config/images";
import "./index.scss";
// import GuideBar from "@/components/GuideBar";
import {
  UserInfoCard,
  // GameCard,
  GameTabs,
  UserInfo,
  GameRecord,
} from "@/components/UserInfo";
import { UserService } from "@/services/userService";
import * as LoginService from "@/services/loginService";

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

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

  // 模拟球局数据
  const [game_records, setGameRecords] = useState<GameRecord[]>([]);
  // 往期球局
  const [ended_game_records, setEndedGameRecords] = useState<GameRecord[]>([]);

  // 关注状态
  const [is_following, setIsFollowing] = useState(false);

  const [loading, set_loading] = useState(true);

  // 当前激活的标签页
  const [active_tab, setActiveTab] = useState<"hosted" | "participated">(
    "hosted"
  );

  // 页面加载时获取用户信息
  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: user_id || "",
            nickname: userData.nickname || "",
            avatar: userData.avatar_url || "",
            join_date: userData.subscribe_time
              ? `${new Date(userData.subscribe_time).getFullYear()}年${
                  new Date(userData.subscribe_time).getMonth() + 1
                }月加入`
              : "",
            stats: {
              following: userData.stats?.following_count || 0,
              friends: userData.stats?.followers_count || 0,
              hosted: userData.stats?.hosted_games_count || 0,
              participated: userData.stats?.participated_games_count || 0,
            },

            personal_profile: userData.personal_profile || "",
            location: userData.city + 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]);

  const classifyGameRecords = (
    game_records: GameRecord[]
  ): { notEndGames: GameRecord[]; finishedGames: GameRecord[] } => {
    const now = new Date().getTime();
    return game_records.reduce(
      (result, cur) => {
        let { end_time } = cur;
        end_time = end_time.replace(/\s/, "T");
        new Date(end_time).getTime() > now
          ? result.notEndGames.push(cur)
          : result.finishedGames.push(cur);
        return result;
      },
      {
        notEndGames: [] as GameRecord[],
        finishedGames: [] as GameRecord[],
      }
    );
  };

  const load_game_data = async () => {
    try {
      set_loading(true);
      const games_data = await UserService.get_user_games(
        user_id || "",
        active_tab
      );
      const sorted_games = games_data.sort((a, b) => {
        return new Date(a.original_start_time.replace(/\s/, 'T')).getTime() - new Date(b.original_start_time.replace(/\s/, 'T')).getTime();
      });
      const { notEndGames, finishedGames } = classifyGameRecords(sorted_games);
      setGameRecords(notEndGames);
      setEndedGameRecords(finishedGames);
    } catch (error) {
      console.error("加载球局数据失败:", error);
      Taro.showToast({
        title: "加载失败，请重试",
        icon: "error",
        duration: 2000,
      });
    } finally {
      set_loading(false);
    }
  };

  useEffect(() => {
    load_game_data();
  }, [active_tab]);

  // 处理关注/取消关注
  const handle_follow = async () => {
    try {
      const new_follow_status = await UserService.toggle_follow(
        user_info.id,
        is_following
      );
      setIsFollowing(new_follow_status);
      Taro.showToast({
        title: new_follow_status ? "关注成功" : "已取消关注",
        icon: "success",
        duration: 1500,
      });
    } catch (error) {
      console.error("关注操作失败:", error);
      Taro.showToast({
        title: "操作失败",
        icon: "none",
      });
    }
  };

  // 处理发送消息
  const handle_send_message = () => {
    Taro.navigateTo({
      url: `/mode_user/message/chat/index?user_id=${user_info.id}&nickname=${user_info.nickname}`,
    });
  };

  // 处理球局详情
  // const handle_game_detail = (game_id: string) => {
  //   Taro.navigateTo({
  //     url: `/game_pages/detail/index?id=${game_id}&from=personal`,
  //   });
  // };

  return (
    <View className="other_user_page">
      <View className="custom-navbar">
        <View className="detail-navigator">
          <View
            className="detail-navigator-back"
            onClick={() => {
              Taro.navigateBack();
            }}
          >
            <Image
              className="detail-navigator-back-icon"
              src={img.ICON_NAVIGATOR_BACK}
            />
          </View>
        </View>
      </View>
      {/* 主要内容 */}
      <View className="main_content">
        {/* 用户信息区域 */}
        <View className="user_info_section">
          <UserInfoCard
            user_info={user_info}
            is_current_user={false}
            is_following={is_following}
            on_follow={handle_follow}
            on_message={handle_send_message}
          />
        </View>

        {/* 球局类型标签页 */}
        <GameTabs
          active_tab={active_tab}
          on_tab_change={setActiveTab}
          is_current_user={false}
        />

        {/* 球局列表 */}
        <View className="game_list_section">
          {/* <View className="date_header">
            <Text className="date_text">5月29日</Text>
            <Text className="separator">/</Text>
            <Text className="weekday_text">星期六</Text>
          </View> */}

          {/* 球局列表 */}
          {/* <View className="game_list_section"> */}
            <ScrollView scrollY>
              <ListContainer
                data={game_records}
                recommendList={[]}
                loading={loading}
                error={null}
                reload={load_game_data}
                loadMoreMatches={() => {}}
              />
            </ScrollView>
          {/* </View> */}

          {/* 球局卡片 */}
          {/* <View className="game_cards">
            {game_records.map((game) => (
              <GameCard
                key={game.id}
                game={game}
                on_click={handle_game_detail}
              />
            ))}
          </View> */}
        </View>

        {/* 往期球局 */}
        <View className="ended_game_text">往期球局</View>
        <View className="game_list_section">
          {/* <View className="date_header">
            <Text className="date_text">5月29日</Text>
            <Text className="separator">/</Text>
            <Text className="weekday_text">星期六</Text>
          </View> */}

          {/* 球局列表 */}
          {/* <View className="game_list_section"> */}
            <ScrollView scrollY>
              <ListContainer
                data={ended_game_records}
                recommendList={[]}
                loading={loading}
                error={null}
                reload={load_game_data}
                loadMoreMatches={() => {}}
              />
            </ScrollView>
          {/* </View> */}

          {/* 球局卡片 */}
          {/* <View className="game_cards">
            {game_records.map((game) => (
              <GameCard
                key={game.id}
                game={game}
                on_click={handle_game_detail}
              />
            ))}
          </View> */}
        </View>
      </View>
      {/* <GuideBar currentPage="personal" /> */}
    </View>
  );
};

export default OtherUserPage;