import { render, screen, fireEvent } from '@testing-library/react';
import UserInfoModal from '../UserInfoModal';
import { AuthProvider } from '@/client/home/hooks/AuthProvider';

// Mock useAuth
jest.mock('@/client/home-shadcn/hooks/AuthProvider', () => ({
  useAuth: () => ({
    user: {
      id: 1,
      username: 'testuser',
      nickname: '测试用户',
      email: 'test@example.com',
      phone: '13800138000',
      userType: 'premium',
      remainingCount: 500,
      expireAt: '2025-12-31T23:59:59Z',
      createdAt: '2024-01-01T00:00:00Z'
    },
    isAuthenticated: true,
    logout: jest.fn()
  })
}));

describe('UserInfoModal', () => {
  const mockOnClose = jest.fn();

  it('renders correctly when open', () => {
    render(
      <AuthProvider>
        <UserInfoModal isOpen={true} onClose={mockOnClose} />
      </AuthProvider>
    );

    expect(screen.getByText('用户中心')).toBeInTheDocument();
    expect(screen.getByText('测试用户')).toBeInTheDocument();
    expect(screen.getByText('@testuser')).toBeInTheDocument();
  });

  it('displays tabs correctly', () => {
    render(
      <AuthProvider>
        <UserInfoModal isOpen={true} onClose={mockOnClose} />
      </AuthProvider>
    );

    expect(screen.getByText('个人信息')).toBeInTheDocument();
    expect(screen.getByText('密码修改')).toBeInTheDocument();
    expect(screen.getByText('充值记录')).toBeInTheDocument();
  });

  it('closes when close button is clicked', () => {
    render(
      <AuthProvider>
        <UserInfoModal isOpen={true} onClose={mockOnClose} />
      </AuthProvider>
    );

    fireEvent.click(screen.getByText('✕'));
    expect(mockOnClose).toHaveBeenCalled();
  });

  it('does not render when closed', () => {
    const { container } = render(
      <AuthProvider>
        <UserInfoModal isOpen={false} onClose={mockOnClose} />
      </AuthProvider>
    );

    expect(container.querySelector('.fixed')).not.toBeInTheDocument();
  });
});