import React, { useState, useEffect } from 'react';
import apiClient from '../utils/request';
import { useLanguageStore } from '../store/languageStore';

const UserManagement: React.FC = () => {
  const { t, currentLanguage } = useLanguageStore();
  const [users, setUsers] = useState<any[]>([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const fetchUsers = async () => {
    setLoading(true);
    setError(null);
    try {
      const response = await apiClient.get('/api/users');
      if (response.data.success) {
        setUsers(response.data.data || []);
      } else {
        throw new Error(t('userManagement.apiFailed') + (response.data.message || t('userManagement.unknownError')));
      }
    } catch (error) {
      console.error('获取用户列表失败:', error);
      setError(error instanceof Error ? error.message : t('userManagement.unknownError'));
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    fetchUsers();
  }, []);

  return (
    <div style={{ padding: 24 }}>
      <h1>{t('userManagement.title')}</h1>
      <p>{t('userManagement.testPage')}</p>
      <button onClick={fetchUsers} disabled={loading}>
        {loading ? t('common.loading') : t('userManagement.refreshList')}
      </button>
      {error && (
        <div style={{ marginTop: 10, color: 'red' }}>
          {t('userManagement.errorPrefix')}{error}
        </div>
      )}
      <div style={{ marginTop: 20 }}>
        <h2>{t('userManagement.apiResult')}</h2>
        <pre>{JSON.stringify(users, null, 2)}</pre>
      </div>
      <div style={{ marginTop: 20 }}>
        <h2>{t('userManagement.loadStatus')}</h2>
        <p>{loading ? t('common.loading') : t('userManagement.loadComplete')}</p>
      </div>
    </div>
  );
};

export default UserManagement;