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

interface FollowUserCardProps {
  user: FollowUser;
  onFollowChange?: (userId: number, isFollowing: boolean) => void;
}

const FollowUserCard: React.FC<FollowUserCardProps> = ({ user, onFollowChange }) => {
  const [isProcessing, setIsProcessing] = useState(false);

  // 防御性检查
  if (!user || !user.id) {
    return null;
  }

  // 处理关注操作
  const handle_follow_action = async () => {
    if (isProcessing) return;

    try {
      setIsProcessing(true);
      
      // 根据当前状态决定操作
      let new_status = false;
      if (user.follow_status === 'follower' || user.follow_status === 'recommend') {
        // 粉丝或推荐用户，执行关注操作
        new_status = true;
      } else if (user.follow_status === 'following' || user.follow_status === 'mutual_follow') {
        // 已关注或互相关注，执行取消关注操作
        new_status = false;
      }

      onFollowChange?.(user.id, new_status);
    } catch (error) {
      console.error('关注操作失败:', error);
      Taro.showToast({
        title: '操作失败',
        icon: 'none'
      });
    } finally {
      setIsProcessing(false);
    }
  };

  // 加入黑名单
  const add_to_blacklist = () => {
    if (isProcessing) return;

    try {
      setIsProcessing(true);
      // TODO: 加入黑名单逻辑
       Taro.showToast({
        title: '不会再为您推荐该用户',
        icon: 'none'
      });
    } catch (error) {
      console.error('删除推荐人员失败:', error);
      Taro.showToast({
        title: '操作失败',
        icon: 'none'
      });
    } finally {
      setIsProcessing(false);
    }
  };

  // 处理用户点击
  const handle_user_click = () => {
    Taro.navigateTo({
      url: `/user_pages/other/index?userid=${user.id}`
    });
  };

  // 获取按钮文本和样式
  const get_button_config = () => {
    switch (user.follow_status) {
      case 'follower':
      case 'recommend':
        return {
          text: '关注',
          className: 'follow_button'
        };
      case 'following':
        return {
          text: '已关注',
          className: 'following_button'
        };
      case 'mutual_follow':
        return {
          text: '互相关注',
          className: 'mutual_button'
        };
      default:
        return {
          text: '关注',
          className: 'follow_button'
        };
    }
  };

  const button_config = get_button_config();

  return (
    <View className="follow_user_card">
      <View className="user_info" onClick={handle_user_click}>
        <Image 
          className="avatar" 
          src={user.avatar_url || require('@/static/userInfo/default_avatar.svg')}
        />
        <View className="user_details">
          <Text className="nickname">{user.nickname}</Text>
          <Text className="signature">
            {user.personal_profile?.replace(/\n/g, ' ') || '签名写在这里'}
          </Text>
        </View>
      </View>
      
      <View 
        className={`action_button ${button_config.className} ${isProcessing ? 'processing' : ''}`}
        onClick={handle_follow_action}
      >
        <Text className="button_text">
          {isProcessing ? '处理中...' : button_config.text}
        </Text>
      </View>
      {
        user.follow_status === 'recommend' && (
          <View className='delete_button' onClick={add_to_blacklist}></View>
        )
      }
    </View>
  );
};

export default FollowUserCard;