import React from 'react';
import { describe, it, expect, vi } from 'vitest';
import { render, screen } from '@testing-library/react';
import { UserAvatar } from './UserAvatar';

// Mock the auth store
vi.mock('@/store/authStore', () => ({
  useAuthStore: vi.fn(),
}));

// Mock the API
vi.mock('@/lib/api/auth', () => ({
  uploadAvatar: vi.fn(),
}));

import { useAuthStore } from '@/store/authStore';

describe('UserAvatar', () => {
  it('renders login button when not authenticated', () => {
    (useAuthStore as any).mockReturnValue({
      user: null,
      isAuthenticated: false,
      isLoading: false,
    });

    render(<UserAvatar />);
    expect(screen.getByRole('link')).toHaveAttribute('href', '/login');
  });

  it('renders user initials when authenticated without avatar', () => {
    (useAuthStore as any).mockReturnValue({
      user: { username: 'john', email: 'john@example.com', avatarUrl: undefined },
      isAuthenticated: true,
      isLoading: false,
      logout: vi.fn(),
      fetchSession: vi.fn(),
    });

    render(<UserAvatar />);
    expect(screen.getByText('J')).toBeInTheDocument();
  });

  it('renders avatar image when user has avatar', () => {
    (useAuthStore as any).mockReturnValue({
      user: {
        username: 'john',
        email: 'john@example.com',
        avatarUrl: 'https://example.com/avatar.png'
      },
      isAuthenticated: true,
      isLoading: false,
      logout: vi.fn(),
      fetchSession: vi.fn(),
    });

    render(<UserAvatar />);
    const img = screen.getByAltText('john');
    expect(img).toHaveAttribute('src', 'https://example.com/avatar.png');
  });
});
