import React, { useEffect, useState, useContext } from 'react';
import axios from 'axios';
import { UserContext } from '../../context/UserContext';

const UserStatusChecker = () => {
  const { user } = useContext(UserContext); // 假设你在上下文中已经有 user 信息
  const [statusMessage, setStatusMessage] = useState('');
  const [statusType, setStatusType] = useState('normal'); // normal / warning / danger

  useEffect(() => {
    if (user?.id) {
      checkUserShareRate(user.id);
    }
  }, [user]);

  const checkUserShareRate = async (userId) => {
    try {
      const response = await axios.get(`/users/${userId}/share-rate`);
      const message = response.data;

      setStatusMessage(message);

      if (message.includes('账号已被注销')) {
        setStatusType('danger');
      } else if (message.includes('警告')) {
        setStatusType('warning');
      } else {
        setStatusType('normal');
      }

    } catch (error) {
      console.error('获取用户状态失败：', error);
      setStatusMessage('无法获取用户状态');
      setStatusType('danger');
    }
  };

  const getStatusStyle = () => {
    switch (statusType) {
      case 'warning':
        return { backgroundColor: '#fff3cd', color: '#856404', padding: '10px', borderRadius: '8px' };
      case 'danger':
        return { backgroundColor: '#f8d7da', color: '#721c24', padding: '10px', borderRadius: '8px' };
      default:
        return { backgroundColor: '#d4edda', color: '#155724', padding: '10px', borderRadius: '8px' };
    }
  };

  return (
    <div style={{ marginTop: '20px' }}>
      <div style={getStatusStyle()}>
        <strong>账号状态提示：</strong> {statusMessage}
      </div>
    </div>
  );
};

export default UserStatusChecker;