import React from 'react';
import Taro from '@tarojs/taro';
import { View, Text, Image, Button } from '@tarojs/components';
import './index.scss';

// 用户信息接口
export interface UserInfo {
  id: string;
  nickname: string;
  avatar: string;
  join_date: string;
  stats: {
    following: number;
    friends: number;
    hosted: number;
    participated: number;
  };
  personal_profile: string;
  location: string;
  occupation: string;
  ntrp_level: string;
  phone?: string;
  gender?: string;

  latitude?: number,
  longitude?: number,
}


// 用户信息卡片组件属性
interface UserInfoCardProps {
  user_info: UserInfo;
  is_current_user: boolean;
  is_following?: boolean;
  on_follow?: () => void;
  on_message?: () => void;
  on_share?: () => void;
}


// 处理编辑用户信息
const on_edit = () => {
  Taro.navigateTo({
    url: '/pages/userInfo/edit/index'
  });
};
// 用户信息卡片组件
export const UserInfoCard: React.FC<UserInfoCardProps> = ({
  user_info,
  is_current_user,
  is_following = false,
  on_follow,
  on_message,
  on_share
}) => {
  return (
    <View className="user_info_card">
      {/* 头像和基本信息 */}
      <View className="basic_info">
        <View className="avatar_container">
          <Image className="avatar" src={user_info.avatar} />
        </View>
        <View className="info_container">
          <Text className="nickname">{user_info.nickname}</Text>
          <Text className="join_date">{user_info.join_date}</Text>
        </View>
        <View className='tag_item' onClick={on_edit}>
          <Image
            className="tag_icon"
            src={require('../../static/userInfo/edit.svg')}
          /> </View>
      </View>

      {/* 统计数据 */}
      <View className="stats_section">
        <View className="stats_container">
          <View className="stat_item">
            <Text className="stat_number">{user_info.stats.following}</Text>
            <Text className="stat_label">关注</Text>
          </View>
          <View className="stat_item">
            <Text className="stat_number">{user_info.stats.friends}</Text>
            <Text className="stat_label">球友</Text>
          </View>
          <View className="stat_item">
            <Text className="stat_number">{user_info.stats.hosted}</Text>
            <Text className="stat_label">主办</Text>
          </View>
          <View className="stat_item">
            <Text className="stat_number">{user_info.stats.participated}</Text>
            <Text className="stat_label">参加</Text>
          </View>
        </View>
        <View className="action_buttons">
          {/* 只有非当前用户才显示关注按钮 */}
          {!is_current_user && on_follow && (
            <Button
              className={`follow_button ${is_following ? 'following' : ''}`}
              onClick={on_follow}
            >
              <Image
                className="button_icon"
                src={require('../../static/userInfo/plus.svg')}
              />
              <Text className="button_text">
                {is_following ? '已关注' : '关注'}
              </Text>
            </Button>
          )}
          {/* 只有非当前用户才显示消息按钮 */}
          {!is_current_user && on_message && (
            <Button className="message_button" onClick={on_message}>
              <Image
                className="button_icon"
                src={require('../../static/userInfo/message.svg')}
              />
            </Button>
          )}

          {/* 只有当前用户才显示分享按钮 */}
          {is_current_user && on_share && (
            <Button className="share_button" onClick={on_share}>
              <Text className="button_text">分享</Text>
            </Button>
          )}
        </View>
      </View>

      {/* 标签和简介 */}
      <View className="tags_bio_section">
        <View className="tags_container">
          <View className="tag_item">

            {user_info.gender === "0" && (
              <Image
                className="tag_icon"
                src={require('../../static/userInfo/male.svg')}
              />
            )}
            {user_info.gender === "1" && (
              <Image
                className="tag_icon"
                src={require('../../static/userInfo/female.svg')}
              />
            )}

          </View>
          <View className="tag_item">
            <Text className="tag_text">{user_info.ntrp_level || '未设置'}</Text>
          </View>
          <View className="tag_item">
            <Text className="tag_text">{user_info.occupation || '未设置'}</Text>
          </View>
          <View className="tag_item">
            <Image
              className="tag_icon"
              src={require('../../static/userInfo/location.svg')}
            />
            <Text className="tag_text">{user_info.location || '未设置'}</Text>
          </View>
        </View>
        <Text className="bio_text">{user_info.personal_profile}</Text>
      </View>
    </View>
  );
};

// 球局记录接口
export interface GameRecord {
  id: string;
  title: string;
  date: string;
  time: string;
  duration: string;
  location: string;
  type: string;
  distance: string;
  participants: {
    avatar: string;
    nickname: string;
  }[];
  max_participants: number;
  current_participants: number;
  level_range: string;
  game_type: string;
  images: string[];
}

// 球局卡片组件属性
interface GameCardProps {
  game: GameRecord;
  on_click: (game_id: string) => void;
  on_participant_click?: (participant_id: string) => void;
}

// 球局卡片组件
export const GameCard: React.FC<GameCardProps> = ({
  game,
  on_click,
  on_participant_click
}) => {
  return (
    <View
      className="game_card"
      onClick={() => on_click(game.id)}
    >
      {/* 球局标题和类型 */}
      <View className="game_header">
        <Text className="game_title">{game.title}</Text>
        <View className="game_type_icon">
          <Image
            className="type_icon"
            src={require('../../static/userInfo/tennis.svg')}
          />
        </View>
      </View>

      {/* 球局时间 */}
      <View className="game_time">
        <Text className="time_text">
          {game.date} {game.time} {game.duration}
        </Text>
      </View>

      {/* 球局地点和类型 */}
      <View className="game_location">
        <Text className="location_text">{game.location}</Text>
        <Text className="separator">·</Text>
        <Text className="type_text">{game.type}</Text>
        <Text className="separator">·</Text>
        <Text className="distance_text">{game.distance}</Text>
      </View>

      {/* 球局图片 */}
      <View className="game_images">
        {game.images.map((image, index) => (
          <Image
            key={index}
            className="game_image"
            src={image}
          />
        ))}
      </View>

      {/* 球局信息标签 */}
      <View className="game_tags">
        <View className="participants_info">
          <View className="avatars">
            {game.participants.map((participant, index) => (
              <Image
                key={index}
                className="participant_avatar"
                src={participant.avatar}
                onClick={(e) => {
                  e.stopPropagation();
                  on_participant_click?.(participant.nickname);
                }}
              />
            ))}
          </View>
          <View className="participants_count">
            <Text className="count_text">
              报名人数 {game.current_participants}/{game.max_participants}
            </Text>
          </View>
        </View>
        <View className="game_info_tags">
          <View className="info_tag">
            <Text className="tag_text">{game.level_range}</Text>
          </View>
          <View className="info_tag">
            <Text className="tag_text">{game.game_type}</Text>
          </View>
        </View>
      </View>
    </View>
  );
};

// 球局标签页组件属性
interface GameTabsProps {
  active_tab: 'hosted' | 'participated';
  on_tab_change: (tab: 'hosted' | 'participated') => void;
  is_current_user: boolean;
}

// 球局标签页组件
export const GameTabs: React.FC<GameTabsProps> = ({
  active_tab,
  on_tab_change,
  is_current_user
}) => {
  const hosted_text = is_current_user ? '我主办的' : '他主办的';
  const participated_text = is_current_user ? '我参与的' : '他参与的';

  return (
    <View className="game_tabs_section">
      <View className="tab_container">
        <View className={`tab_item ${active_tab === 'hosted' ? 'active' : ''}`} onClick={() => on_tab_change('hosted')}>
          <Text className="tab_text">{hosted_text}</Text>
        </View>
        <View className={`tab_item ${active_tab === 'participated' ? 'active' : ''}`} onClick={() => on_tab_change('participated')}>
          <Text className="tab_text">{participated_text}</Text>
        </View>
      </View>
    </View>
  );
};