import React, { useState, useEffect } from 'react';
import { View, Text, ScrollView } from '@tarojs/components';
import Taro from '@tarojs/taro';
import './index.scss';
import GuideBar from '@/components/GuideBar';
import { UserInfoCard, GameCard, GameTabs, UserInfo, GameRecord } from '@/components/UserInfo';
import { UserService } from '@/services/userService';

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',
    nickname: '网球爱好者',
    avatar: require('../../../static/userInfo/default_avatar.svg'),
    join_date: '2024年3月加入',
    stats: {
      following: 89,
      friends: 15,
      hosted: 12,
      participated: 35
    },
    tags: ['北京朝阳', '金融从业者', 'NTRP 3.5'],
    bio: '热爱网球的金融从业者，周末喜欢约球\n技术还在提升中，欢迎一起切磋\n平时在朝阳公园附近活动',
    location: '北京朝阳',
    occupation: '金融从业者',
    ntrp_level: 'NTRP 3.5'
  });

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

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

  // 当前激活的标签页
  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);
          setUserInfo(user_data);

          const games_data = await UserService.get_user_games(user_id, active_tab);
          setGameRecords(games_data);
        } catch (error) {
          console.error('加载用户数据失败:', error);
          Taro.showToast({
            title: '加载失败',
            icon: 'none'
          });
        }
      }
    };

    load_user_data();
  }, [user_id, 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: `/pages/message/chat/index?user_id=${user_info.id}&nickname=${user_info.nickname}`
    });
  };


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

  return (
    <View className="other_user_page">
      {/* 主要内容 */}
      <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_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;