// UserProfileCard.test.jsx - Comprehensive Test Suite
import React from 'react';
import { render, screen, fireEvent, waitFor, within } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { vi, describe, it, expect, beforeEach, afterEach } from 'vitest';
import { faker } from '@faker-js/faker';
import fc from 'fast-check';
import { axe, toHaveNoViolations } from 'jest-axe';

import UserProfileCard from '../UserProfileCard';
import { fetchUserProfile, updateUserProfile } from '../api/users';
import { useAuth } from '../hooks/useAuth';
import { toast } from '../utils/toast';

// Extend Jest matchers
expect.extend(toHaveNoViolations);

// Mock dependencies
vi.mock('../api/users');
vi.mock('../hooks/useAuth');
vi.mock('../utils/toast');

const mockFetchUserProfile = vi.mocked(fetchUserProfile);
const mockUpdateUserProfile = vi.mocked(updateUserProfile);
const mockUseAuth = vi.mocked(useAuth);
const mockToast = vi.mocked(toast);

// Test data generators
const generateValidUser = () => ({
  id: faker.string.uuid(),
  name: faker.person.fullName(),
  email: faker.internet.email(),
  bio: faker.lorem.paragraph(),
  avatar: faker.image.avatar(),
  createdAt: faker.date.past().toISOString(),
  updatedAt: faker.date.recent().toISOString()
});

const generateInvalidUser = () => ({
  id: '',
  name: '',
  email: 'invalid-email',
  bio: 'x'.repeat(600), // Exceeds 500 char limit
  avatar: null
});

// Custom render function with providers
const renderUserProfileCard = (props = {}) => {
  const defaultProps = {
    userId: faker.string.uuid(),
    editable: false,
    onProfileUpdate: vi.fn(),
    ...props
  };
  
  return {
    ...render(<UserProfileCard {...defaultProps} />),
    props: defaultProps
  };
};

describe('UserProfileCard', () => {
  let mockCurrentUser;
  
  beforeEach(() => {
    vi.clearAllMocks();
    
    // Default auth state
    mockCurrentUser = generateValidUser();
    mockUseAuth.mockReturnValue({ user: mockCurrentUser });
    
    // Default toast implementation
    mockToast.success = vi.fn();
    mockToast.error = vi.fn();
  });
  
  afterEach(() => {
    vi.restoreAllMocks();
  });
  
  describe('Loading States', () => {
    it('should show loading spinner while fetching profile', () => {
      mockFetchUserProfile.mockImplementation(() => new Promise(() => {})); // Never resolves
      
      renderUserProfileCard();
      
      expect(screen.getByTestId('loading-spinner')).toBeInTheDocument();
      expect(screen.getByText('Loading...')).toBeInTheDocument();
    });
    
    it('should show loading button text while saving', async () => {
      const user = userEvent.setup();
      const mockProfile = generateValidUser();
      
      mockFetchUserProfile.mockResolvedValue(mockProfile);
      mockUpdateUserProfile.mockImplementation(() => new Promise(() => {})); // Never resolves
      
      renderUserProfileCard({ 
        userId: mockProfile.id, 
        editable: true 
      });
      
      await waitFor(() => {
        expect(screen.getByTestId('profile-name')).toHaveTextContent(mockProfile.name);
      });
      
      await user.click(screen.getByTestId('edit-button'));
      await user.click(screen.getByTestId('save-button'));
      
      expect(screen.getByTestId('save-button')).toHaveTextContent('Saving...');
      expect(screen.getByTestId('save-button')).toBeDisabled();
      expect(screen.getByTestId('cancel-button')).toBeDisabled();
    });
  });
  
  describe('Profile Display', () => {
    it('should display profile information correctly', async () => {
      const mockProfile = generateValidUser();
      mockFetchUserProfile.mockResolvedValue(mockProfile);
      
      renderUserProfileCard({ userId: mockProfile.id });
      
      await waitFor(() => {
        expect(screen.getByTestId('profile-name')).toHaveTextContent(mockProfile.name);
      });
      
      expect(screen.getByTestId('profile-email')).toHaveTextContent(mockProfile.email);
      expect(screen.getByTestId('profile-bio')).toHaveTextContent(mockProfile.bio);
      expect(screen.getByTestId('profile-avatar')).toHaveAttribute('src', mockProfile.avatar);
      expect(screen.getByTestId('profile-avatar')).toHaveAttribute('alt', `${mockProfile.name}'s avatar`);
    });
    
    it('should display default avatar when user has no avatar', async () => {
      const mockProfile = { ...generateValidUser(), avatar: null };
      mockFetchUserProfile.mockResolvedValue(mockProfile);
      
      renderUserProfileCard({ userId: mockProfile.id });
      
      await waitFor(() => {
        expect(screen.getByTestId('profile-avatar')).toHaveAttribute('src', '/default-avatar.png');
      });
    });
    
    it('should display "No bio available" when user has no bio', async () => {
      const mockProfile = { ...generateValidUser(), bio: null };
      mockFetchUserProfile.mockResolvedValue(mockProfile);
      
      renderUserProfileCard({ userId: mockProfile.id });
      
      await waitFor(() => {
        expect(screen.getByTestId('profile-bio')).toHaveTextContent('No bio available');
      });
    });
  });
  
  describe('Error Handling', () => {
    it('should show error message when profile fetch fails', async () => {
      const errorMessage = 'Network error';
      mockFetchUserProfile.mockRejectedValue(new Error(errorMessage));
      
      renderUserProfileCard();
      
      await waitFor(() => {
        expect(screen.getByTestId('error-message')).toBeInTheDocument();
      });
      
      expect(mockToast.error).toHaveBeenCalledWith('Failed to load profile');
    });
    
    it('should handle API errors during profile update', async () => {
      const user = userEvent.setup();
      const mockProfile = generateValidUser();
      
      mockFetchUserProfile.mockResolvedValue(mockProfile);
      mockUpdateUserProfile.mockRejectedValue(new Error('Server error'));
      
      renderUserProfileCard({ 
        userId: mockProfile.id, 
        editable: true 
      });
      
      await waitFor(() => {
        expect(screen.getByTestId('edit-button')).toBeInTheDocument();
      });
      
      await user.click(screen.getByTestId('edit-button'));
      await user.clear(screen.getByTestId('name-input'));
      await user.type(screen.getByTestId('name-input'), 'Updated Name');
      await user.click(screen.getByTestId('save-button'));
      
      await waitFor(() => {
        expect(mockToast.error).toHaveBeenCalledWith('Failed to update profile');
      });
    });
    
    it('should handle email conflict error specifically', async () => {
      const user = userEvent.setup();
      const mockProfile = generateValidUser();
      const conflictError = new Error('Conflict');
      conflictError.status = 409;
      
      mockFetchUserProfile.mockResolvedValue(mockProfile);
      mockUpdateUserProfile.mockRejectedValue(conflictError);
      
      renderUserProfileCard({ 
        userId: mockProfile.id, 
        editable: true 
      });
      
      await waitFor(() => {
        expect(screen.getByTestId('edit-button')).toBeInTheDocument();
      });
      
      await user.click(screen.getByTestId('edit-button'));
      await user.clear(screen.getByTestId('email-input'));
      await user.type(screen.getByTestId('email-input'), 'existing@example.com');
      await user.click(screen.getByTestId('save-button'));
      
      await waitFor(() => {
        expect(screen.getByTestId('email-error')).toHaveTextContent('Email already exists');
      });
    });
  });
  
  describe('Permission System', () => {
    it('should show edit button for profile owner', async () => {
      const mockProfile = { ...generateValidUser(), id: mockCurrentUser.id };
      mockFetchUserProfile.mockResolvedValue(mockProfile);
      
      renderUserProfileCard({ 
        userId: mockProfile.id, 
        editable: true 
      });
      
      await waitFor(() => {
        expect(screen.getByTestId('edit-button')).toBeInTheDocument();
      });
    });
    
    it('should show edit button for admin users', async () => {
      const mockProfile = generateValidUser();
      const adminUser = { ...mockCurrentUser, role: 'admin' };
      
      mockUseAuth.mockReturnValue({ user: adminUser });
      mockFetchUserProfile.mockResolvedValue(mockProfile);
      
      renderUserProfileCard({ 
        userId: mockProfile.id, 
        editable: true 
      });
      
      await waitFor(() => {
        expect(screen.getByTestId('edit-button')).toBeInTheDocument();
      });
    });
    
    it('should not show edit button for other users', async () => {
      const mockProfile = generateValidUser();
      mockFetchUserProfile.mockResolvedValue(mockProfile);
      
      renderUserProfileCard({ 
        userId: mockProfile.id, 
        editable: true 
      });
      
      await waitFor(() => {
        expect(screen.getByTestId('profile-name')).toBeInTheDocument();
      });
      
      expect(screen.queryByTestId('edit-button')).not.toBeInTheDocument();
    });
    
    it('should not show edit button when editable is false', async () => {
      const mockProfile = { ...generateValidUser(), id: mockCurrentUser.id };
      mockFetchUserProfile.mockResolvedValue(mockProfile);
      
      renderUserProfileCard({ 
        userId: mockProfile.id, 
        editable: false 
      });
      
      await waitFor(() => {
        expect(screen.getByTestId('profile-name')).toBeInTheDocument();
      });
      
      expect(screen.queryByTestId('edit-button')).not.toBeInTheDocument();
    });
  });
  
  describe('Form Validation', () => {
    beforeEach(async () => {
      const mockProfile = { ...generateValidUser(), id: mockCurrentUser.id };
      mockFetchUserProfile.mockResolvedValue(mockProfile);
      
      renderUserProfileCard({ 
        userId: mockProfile.id, 
        editable: true 
      });
      
      await waitFor(() => {
        expect(screen.getByTestId('edit-button')).toBeInTheDocument();
      });
      
      await userEvent.setup().click(screen.getByTestId('edit-button'));
    });
    
    it('should validate required name field', async () => {
      const user = userEvent.setup();
      
      await user.clear(screen.getByTestId('name-input'));
      await user.click(screen.getByTestId('save-button'));
      
      expect(screen.getByTestId('name-error')).toHaveTextContent('Name is required');
      expect(mockUpdateUserProfile).not.toHaveBeenCalled();
    });
    
    it('should validate minimum name length', async () => {
      const user = userEvent.setup();
      
      await user.clear(screen.getByTestId('name-input'));
      await user.type(screen.getByTestId('name-input'), 'A');
      await user.click(screen.getByTestId('save-button'));
      
      expect(screen.getByTestId('name-error')).toHaveTextContent('Name must be at least 2 characters');
    });
    
    it('should validate maximum name length', async () => {
      const user = userEvent.setup();
      const longName = 'A'.repeat(101);
      
      await user.clear(screen.getByTestId('name-input'));
      await user.type(screen.getByTestId('name-input'), longName);
      await user.click(screen.getByTestId('save-button'));
      
      expect(screen.getByTestId('name-error')).toHaveTextContent('Name must be less than 100 characters');
    });
    
    it('should validate required email field', async () => {
      const user = userEvent.setup();
      
      await user.clear(screen.getByTestId('email-input'));
      await user.click(screen.getByTestId('save-button'));
      
      expect(screen.getByTestId('email-error')).toHaveTextContent('Email is required');
    });
    
    it('should validate email format', async () => {
      const user = userEvent.setup();
      
      await user.clear(screen.getByTestId('email-input'));
      await user.type(screen.getByTestId('email-input'), 'invalid-email');
      await user.click(screen.getByTestId('save-button'));
      
      expect(screen.getByTestId('email-error')).toHaveTextContent('Invalid email format');
    });
    
    it('should validate bio length', async () => {
      const user = userEvent.setup();
      const longBio = 'A'.repeat(501);
      
      await user.clear(screen.getByTestId('bio-input'));
      await user.type(screen.getByTestId('bio-input'), longBio);
      await user.click(screen.getByTestId('save-button'));
      
      expect(screen.getByTestId('bio-error')).toHaveTextContent('Bio must be less than 500 characters');
    });
    
    it('should allow empty bio', async () => {
      const user = userEvent.setup();
      const updatedProfile = generateValidUser();
      
      mockUpdateUserProfile.mockResolvedValue(updatedProfile);
      
      await user.clear(screen.getByTestId('bio-input'));
      await user.click(screen.getByTestId('save-button'));
      
      expect(screen.queryByTestId('bio-error')).not.toBeInTheDocument();
      expect(mockUpdateUserProfile).toHaveBeenCalled();
    });
  });
  
  describe('Edit Mode Functionality', () => {
    let mockProfile;
    
    beforeEach(async () => {
      mockProfile = { ...generateValidUser(), id: mockCurrentUser.id };
      mockFetchUserProfile.mockResolvedValue(mockProfile);
      
      renderUserProfileCard({ 
        userId: mockProfile.id, 
        editable: true 
      });
      
      await waitFor(() => {
        expect(screen.getByTestId('edit-button')).toBeInTheDocument();
      });
    });
    
    it('should switch to edit mode when edit button is clicked', async () => {
      const user = userEvent.setup();
      
      await user.click(screen.getByTestId('edit-button'));
      
      expect(screen.getByTestId('name-input')).toHaveValue(mockProfile.name);
      expect(screen.getByTestId('email-input')).toHaveValue(mockProfile.email);
      expect(screen.getByTestId('bio-input')).toHaveValue(mockProfile.bio);
      expect(screen.getByTestId('save-button')).toBeInTheDocument();
      expect(screen.getByTestId('cancel-button')).toBeInTheDocument();
      expect(screen.queryByTestId('edit-button')).not.toBeInTheDocument();
    });
    
    it('should cancel edit mode and restore original values', async () => {
      const user = userEvent.setup();
      
      await user.click(screen.getByTestId('edit-button'));
      
      // Make changes
      await user.clear(screen.getByTestId('name-input'));
      await user.type(screen.getByTestId('name-input'), 'Changed Name');
      
      // Cancel
      await user.click(screen.getByTestId('cancel-button'));
      
      expect(screen.getByTestId('profile-name')).toHaveTextContent(mockProfile.name);
      expect(screen.getByTestId('edit-button')).toBeInTheDocument();
      expect(screen.queryByTestId('save-button')).not.toBeInTheDocument();
    });
    
    it('should save changes and exit edit mode', async () => {
      const user = userEvent.setup();
      const updatedProfile = {
        ...mockProfile,
        name: 'Updated Name',
        email: 'updated@example.com'
      };
      
      mockUpdateUserProfile.mockResolvedValue(updatedProfile);
      
      await user.click(screen.getByTestId('edit-button'));
      
      await user.clear(screen.getByTestId('name-input'));
      await user.type(screen.getByTestId('name-input'), updatedProfile.name);
      
      await user.clear(screen.getByTestId('email-input'));
      await user.type(screen.getByTestId('email-input'), updatedProfile.email);
      
      await user.click(screen.getByTestId('save-button'));
      
      await waitFor(() => {
        expect(mockUpdateUserProfile).toHaveBeenCalledWith(mockProfile.id, {
          name: updatedProfile.name,
          email: updatedProfile.email,
          bio: mockProfile.bio
        });
      });
      
      expect(mockToast.success).toHaveBeenCalledWith('Profile updated successfully');
      expect(screen.getByTestId('profile-name')).toHaveTextContent(updatedProfile.name);
      expect(screen.getByTestId('edit-button')).toBeInTheDocument();
    });
  });
  
  describe('Callback Functions', () => {
    it('should call onProfileUpdate callback after successful save', async () => {
      const user = userEvent.setup();
      const mockProfile = { ...generateValidUser(), id: mockCurrentUser.id };
      const updatedProfile = { ...mockProfile, name: 'Updated Name' };
      const mockOnProfileUpdate = vi.fn();
      
      mockFetchUserProfile.mockResolvedValue(mockProfile);
      mockUpdateUserProfile.mockResolvedValue(updatedProfile);
      
      renderUserProfileCard({ 
        userId: mockProfile.id, 
        editable: true,
        onProfileUpdate: mockOnProfileUpdate
      });
      
      await waitFor(() => {
        expect(screen.getByTestId('edit-button')).toBeInTheDocument();
      });
      
      await user.click(screen.getByTestId('edit-button'));
      await user.clear(screen.getByTestId('name-input'));
      await user.type(screen.getByTestId('name-input'), updatedProfile.name);
      await user.click(screen.getByTestId('save-button'));
      
      await waitFor(() => {
        expect(mockOnProfileUpdate).toHaveBeenCalledWith(updatedProfile);
      });
    });
    
    it('should not call onProfileUpdate callback on save failure', async () => {
      const user = userEvent.setup();
      const mockProfile = { ...generateValidUser(), id: mockCurrentUser.id };
      const mockOnProfileUpdate = vi.fn();
      
      mockFetchUserProfile.mockResolvedValue(mockProfile);
      mockUpdateUserProfile.mockRejectedValue(new Error('Save failed'));
      
      renderUserProfileCard({ 
        userId: mockProfile.id, 
        editable: true,
        onProfileUpdate: mockOnProfileUpdate
      });
      
      await waitFor(() => {
        expect(screen.getByTestId('edit-button')).toBeInTheDocument();
      });
      
      await user.click(screen.getByTestId('edit-button'));
      await user.click(screen.getByTestId('save-button'));
      
      await waitFor(() => {
        expect(mockToast.error).toHaveBeenCalled();
      });
      
      expect(mockOnProfileUpdate).not.toHaveBeenCalled();
    });
  });
  
  describe('Accessibility', () => {
    it('should have no accessibility violations', async () => {
      const mockProfile = generateValidUser();
      mockFetchUserProfile.mockResolvedValue(mockProfile);
      
      const { container } = renderUserProfileCard({ userId: mockProfile.id });
      
      await waitFor(() => {
        expect(screen.getByTestId('profile-name')).toBeInTheDocument();
      });
      
      const results = await axe(container);
      expect(results).toHaveNoViolations();
    });
    
    it('should have proper ARIA labels and roles', async () => {
      const mockProfile = generateValidUser();
      mockFetchUserProfile.mockResolvedValue(mockProfile);
      
      renderUserProfileCard({ userId: mockProfile.id, editable: true });
      
      await waitFor(() => {
        expect(screen.getByTestId('edit-button')).toBeInTheDocument();
      });
      
      const avatar = screen.getByTestId('profile-avatar');
      expect(avatar).toHaveAttribute('alt', `${mockProfile.name}'s avatar`);
      
      await userEvent.setup().click(screen.getByTestId('edit-button'));
      
      const nameInput = screen.getByTestId('name-input');
      expect(nameInput).toHaveAttribute('placeholder', 'Enter name');
      
      const bioInput = screen.getByTestId('bio-input');
      expect(bioInput).toHaveAttribute('placeholder', 'Tell us about yourself...');
      expect(bioInput).toHaveAttribute('maxLength', '500');
    });
  });
  
  describe('Property-Based Testing', () => {
    it('should handle any valid user profile data', () => {
      fc.assert(
        fc.property(
          fc.record({
            id: fc.string({ minLength: 1 }),
            name: fc.string({ minLength: 2, maxLength: 100 }),
            email: fc.emailAddress(),
            bio: fc.option(fc.string({ maxLength: 500 }), { nil: undefined }),
            avatar: fc.option(fc.webUrl(), { nil: undefined })
          }),
          (profile) => {
            mockFetchUserProfile.mockResolvedValue(profile);
            
            const { unmount } = renderUserProfileCard({ userId: profile.id });
            
            // Should not throw any errors
            expect(() => {
              screen.getByTestId('user-profile-card');
            }).not.toThrow();
            
            unmount();
          }
        ),
        { numRuns: 100 }
      );
    });
    
    it('should validate form inputs with random invalid data', () => {
      fc.assert(
        fc.property(
          fc.record({
            name: fc.oneof(
              fc.constant(''), // Empty string
              fc.string({ minLength: 1, maxLength: 1 }), // Too short
              fc.string({ minLength: 101, maxLength: 200 }), // Too long
            ),
            email: fc.oneof(
              fc.constant(''), // Empty string
              fc.string().filter(s => !s.includes('@')), // Invalid format
              fc.string().map(s => s + '@'), // Incomplete email
            ),
            bio: fc.string({ minLength: 501, maxLength: 1000 }) // Too long
          }),
          async (invalidData) => {
            const mockProfile = { ...generateValidUser(), id: mockCurrentUser.id };
            mockFetchUserProfile.mockResolvedValue(mockProfile);
            
            const { unmount } = renderUserProfileCard({ 
              userId: mockProfile.id, 
              editable: true 
            });
            
            await waitFor(() => {
              expect(screen.getByTestId('edit-button')).toBeInTheDocument();
            });
            
            const user = userEvent.setup();
            await user.click(screen.getByTestId('edit-button'));
            
            // Fill form with invalid data
            await user.clear(screen.getByTestId('name-input'));
            await user.type(screen.getByTestId('name-input'), invalidData.name);
            
            await user.clear(screen.getByTestId('email-input'));
            await user.type(screen.getByTestId('email-input'), invalidData.email);
            
            await user.clear(screen.getByTestId('bio-input'));
            await user.type(screen.getByTestId('bio-input'), invalidData.bio);
            
            await user.click(screen.getByTestId('save-button'));
            
            // Should show validation errors
            expect(
              screen.queryByTestId('name-error') ||
              screen.queryByTestId('email-error') ||
              screen.queryByTestId('bio-error')
            ).toBeInTheDocument();
            
            // Should not call update API
            expect(mockUpdateUserProfile).not.toHaveBeenCalled();
            
            unmount();
          }
        ),
        { numRuns: 50 }
      );
    });
  });
  
  describe('Performance Testing', () => {
    it('should render within performance budget', async () => {
      const mockProfile = generateValidUser();
      mockFetchUserProfile.mockResolvedValue(mockProfile);
      
      const startTime = performance.now();
      
      renderUserProfileCard({ userId: mockProfile.id });
      
      await waitFor(() => {
        expect(screen.getByTestId('profile-name')).toBeInTheDocument();
      });
      
      const endTime = performance.now();
      const renderTime = endTime - startTime;
      
      // Should render within 100ms
      expect(renderTime).toBeLessThan(100);
    });
    
    it('should handle rapid state changes without performance degradation', async () => {
      const mockProfile = { ...generateValidUser(), id: mockCurrentUser.id };
      mockFetchUserProfile.mockResolvedValue(mockProfile);
      mockUpdateUserProfile.mockResolvedValue(mockProfile);
      
      renderUserProfileCard({ 
        userId: mockProfile.id, 
        editable: true 
      });
      
      await waitFor(() => {
        expect(screen.getByTestId('edit-button')).toBeInTheDocument();
      });
      
      const user = userEvent.setup();
      const startTime = performance.now();
      
      // Rapid edit mode toggling
      for (let i = 0; i < 10; i++) {
        await user.click(screen.getByTestId('edit-button'));
        await user.click(screen.getByTestId('cancel-button'));
      }
      
      const endTime = performance.now();
      const totalTime = endTime - startTime;
      
      // Should complete all operations within 500ms
      expect(totalTime).toBeLessThan(500);
    });
  });
  
  describe('Visual Regression Testing', () => {
    it('should match visual snapshot in display mode', async () => {
      const mockProfile = generateValidUser();
      mockFetchUserProfile.mockResolvedValue(mockProfile);
      
      const { container } = renderUserProfileCard({ userId: mockProfile.id });
      
      await waitFor(() => {
        expect(screen.getByTestId('profile-name')).toBeInTheDocument();
      });
      
      expect(container.firstChild).toMatchSnapshot('user-profile-display-mode');
    });
    
    it('should match visual snapshot in edit mode', async () => {
      const mockProfile = { ...generateValidUser(), id: mockCurrentUser.id };
      mockFetchUserProfile.mockResolvedValue(mockProfile);
      
      const { container } = renderUserProfileCard({ 
        userId: mockProfile.id, 
        editable: true 
      });
      
      await waitFor(() => {
        expect(screen.getByTestId('edit-button')).toBeInTheDocument();
      });
      
      await userEvent.setup().click(screen.getByTestId('edit-button'));
      
      expect(container.firstChild).toMatchSnapshot('user-profile-edit-mode');
    });
  });
  
  describe('Integration Testing', () => {
    it('should integrate correctly with auth system', async () => {
      const adminUser = { ...mockCurrentUser, role: 'admin' };
      const regularUser = generateValidUser();
      
      // Test as admin
      mockUseAuth.mockReturnValue({ user: adminUser });
      mockFetchUserProfile.mockResolvedValue(regularUser);
      
      const { rerender } = renderUserProfileCard({ 
        userId: regularUser.id, 
        editable: true 
      });
      
      await waitFor(() => {
        expect(screen.getByTestId('edit-button')).toBeInTheDocument();
      });
      
      // Switch to regular user
      mockUseAuth.mockReturnValue({ user: regularUser });
      
      rerender(
        <UserProfileCard 
          userId={regularUser.id} 
          editable={true}
          onProfileUpdate={vi.fn()}
        />
      );
      
      expect(screen.queryByTestId('edit-button')).not.toBeInTheDocument();
    });
  });
  
  describe('Edge Cases', () => {
    it('should handle extremely long profile data gracefully', async () => {
      const mockProfile = {
        ...generateValidUser(),
        name: 'A'.repeat(1000),
        bio: 'B'.repeat(10000)
      };
      
      mockFetchUserProfile.mockResolvedValue(mockProfile);
      
      renderUserProfileCard({ userId: mockProfile.id });
      
      await waitFor(() => {
        expect(screen.getByTestId('user-profile-card')).toBeInTheDocument();
      });
      
      // Should not break rendering
      expect(screen.getByTestId('profile-name')).toBeInTheDocument();
      expect(screen.getByTestId('profile-bio')).toBeInTheDocument();
    });
    
    it('should handle special characters in profile data', async () => {
      const mockProfile = {
        ...generateValidUser(),
        name: '测试用户 🚀 <script>alert("xss")</script>',
        bio: 'Bio with 🎉 emojis and <b>HTML</b> & special chars: @#$%^&*()'
      };
      
      mockFetchUserProfile.mockResolvedValue(mockProfile);
      
      renderUserProfileCard({ userId: mockProfile.id });
      
      await waitFor(() => {
        expect(screen.getByTestId('profile-name')).toHaveTextContent(mockProfile.name);
      });
      
      // Should display special characters safely
      expect(screen.getByTestId('profile-bio')).toHaveTextContent(mockProfile.bio);
    });
    
    it('should handle rapid prop changes', async () => {
      const user1 = generateValidUser();
      const user2 = generateValidUser();
      
      mockFetchUserProfile.mockImplementation((id) => {
        if (id === user1.id) return Promise.resolve(user1);
        if (id === user2.id) return Promise.resolve(user2);
        return Promise.reject(new Error('User not found'));
      });
      
      const { rerender } = renderUserProfileCard({ userId: user1.id });
      
      await waitFor(() => {
        expect(screen.getByTestId('profile-name')).toHaveTextContent(user1.name);
      });
      
      // Rapidly change user ID
      rerender(
        <UserProfileCard 
          userId={user2.id}
          editable={false}
          onProfileUpdate={vi.fn()}
        />
      );
      
      await waitFor(() => {
        expect(screen.getByTestId('profile-name')).toHaveTextContent(user2.name);
      });
      
      expect(mockFetchUserProfile).toHaveBeenCalledWith(user1.id);
      expect(mockFetchUserProfile).toHaveBeenCalledWith(user2.id);
    });
  });
});

// Mutation Testing Configuration
export const mutationTestConfig = {
  testMatch: ['**/*.test.{js,jsx}'],
  mutators: [
    'ArithmeticOperator',
    'ArrayDeclaration',
    'ArrowFunction',
    'Block',
    'BooleanLiteral',
    'ConditionalExpression',
    'EqualityOperator',
    'LogicalOperator',
    'MethodExpression',
    'ObjectLiteral',
    'StringLiteral',
    'UnaryOperator',
    'UpdateOperator'
  ],
  thresholds: {
    high: 90,
    low: 80
  },
  timeoutMS: 30000,
  maxConcurrentTestRunners: 4
};

// Performance benchmarking
export const performanceBenchmarks = {
  'UserProfileCard render time': {
    threshold: 100, // milliseconds
    setup: () => {
      const mockProfile = generateValidUser();
      mockFetchUserProfile.mockResolvedValue(mockProfile);
      return { userId: mockProfile.id };
    },
    test: (props) => {
      const start = performance.now();
      renderUserProfileCard(props);
      return performance.now() - start;
    }
  },
  'Edit mode transition': {
    threshold: 50,
    setup: async () => {
      const mockProfile = { ...generateValidUser(), id: mockCurrentUser.id };
      mockFetchUserProfile.mockResolvedValue(mockProfile);
      
      renderUserProfileCard({ 
        userId: mockProfile.id, 
        editable: true 
      });
      
      await waitFor(() => {
        expect(screen.getByTestId('edit-button')).toBeInTheDocument();
      });
      
      return { editButton: screen.getByTestId('edit-button') };
    },
    test: async ({ editButton }) => {
      const start = performance.now();
      await userEvent.setup().click(editButton);
      await waitFor(() => {
        expect(screen.getByTestId('save-button')).toBeInTheDocument();
      });
      return performance.now() - start;
    }
  }
};