// src/utils/stringUtils.ts
export function capitalizeFirstLetter(str: string): string {
  if (!str) return str;
  return str.charAt(0).toUpperCase() + str.slice(1);
}

export function truncateString(str: string, maxLength: number): string {
  if (str.length <= maxLength) return str;
  return str.slice(0, maxLength) + '...';
}

export function formatCurrency(amount: number, currency: string = 'USD'): string {
  return new Intl.NumberFormat('en-US', {
    style: 'currency',
    currency
  }).format(amount);
}

// src/utils/__tests__/stringUtils.test.ts
import { capitalizeFirstLetter, truncateString, formatCurrency } from '../stringUtils';

describe('String Utils', () => {
  describe('capitalizeFirstLetter', () => {
    it('should capitalize the first letter of a string', () => {
      expect(capitalizeFirstLetter('hello')).toBe('Hello');
      expect(capitalizeFirstLetter('world')).toBe('World');
    });

    it('should handle empty strings', () => {
      expect(capitalizeFirstLetter('')).toBe('');
      expect(capitalizeFirstLetter(null as any)).toBe(null);
    });

    it('should handle single character strings', () => {
      expect(capitalizeFirstLetter('a')).toBe('A');
    });
  });

  describe('truncateString', () => {
    it('should truncate strings longer than maxLength', () => {
      expect(truncateString('Hello World', 5)).toBe('Hello...');
      expect(truncateString('Testing', 3)).toBe('Tes...');
    });

    it('should return original string if shorter than maxLength', () => {
      expect(truncateString('Hi', 5)).toBe('Hi');
      expect(truncateString('', 10)).toBe('');
    });
  });

  describe('formatCurrency', () => {
    it('should format USD currency correctly', () => {
      expect(formatCurrency(1234.56)).toBe('$1,234.56');
      expect(formatCurrency(0)).toBe('$0.00');
    });

    it('should format different currencies', () => {
      expect(formatCurrency(1234.56, 'EUR')).toBe('€1,234.56');
      expect(formatCurrency(1234.56, 'GBP')).toBe('£1,234.56');
    });
  });
});

// src/services/userService.ts
export interface User {
  id: number;
  name: string;
  email: string;
  isActive: boolean;
}

export class UserService {
  private apiUrl: string;

  constructor(apiUrl: string = '/api/users') {
    this.apiUrl = apiUrl;
  }

  async getUsers(): Promise<User[]> {
    const response = await fetch(this.apiUrl);
    if (!response.ok) {
      throw new Error(`Failed to fetch users: ${response.status}`);
    }
    return response.json();
  }

  async getUserById(id: number): Promise<User> {
    const response = await fetch(`${this.apiUrl}/${id}`);
    if (!response.ok) {
      throw new Error(`Failed to fetch user: ${response.status}`);
    }
    return response.json();
  }

  async createUser(userData: Omit<User, 'id'>): Promise<User> {
    const response = await fetch(this.apiUrl, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(userData),
    });
    if (!response.ok) {
      throw new Error(`Failed to create user: ${response.status}`);
    }
    return response.json();
  }
}

// src/services/__tests__/userService.test.ts
import { UserService, User } from '../userService';

// Mock fetch globally
global.fetch = jest.fn();

describe('UserService', () => {
  let userService: UserService;
  const mockUsers: User[] = [
    { id: 1, name: 'John Doe', email: 'john@example.com', isActive: true },
    { id: 2, name: 'Jane Smith', email: 'jane@example.com', isActive: false }
  ];

  beforeEach(() => {
    userService = new UserService();
    jest.clearAllMocks();
  });

  describe('getUsers', () => {
    it('should fetch users successfully', async () => {
      const mockResponse = { ok: true, json: jest.fn().mockResolvedValue(mockUsers) };
      (fetch as jest.Mock).mockResolvedValue(mockResponse);

      const result = await userService.getUsers();

      expect(fetch).toHaveBeenCalledWith('/api/users');
      expect(result).toEqual(mockUsers);
    });

    it('should throw error when API call fails', async () => {
      const mockResponse = { ok: false, status: 500 };
      (fetch as jest.Mock).mockResolvedValue(mockResponse);

      await expect(userService.getUsers()).rejects.toThrow('Failed to fetch users: 500');
    });
  });

  describe('getUserById', () => {
    it('should fetch user by id successfully', async () => {
      const mockUser = mockUsers[0];
      const mockResponse = { ok: true, json: jest.fn().mockResolvedValue(mockUser) };
      (fetch as jest.Mock).mockResolvedValue(mockResponse);

      const result = await userService.getUserById(1);

      expect(fetch).toHaveBeenCalledWith('/api/users/1');
      expect(result).toEqual(mockUser);
    });
  });

  describe('createUser', () => {
    it('should create user successfully', async () => {
      const newUser = { name: 'New User', email: 'new@example.com', isActive: true };
      const createdUser = { id: 3, ...newUser };
      const mockResponse = { ok: true, json: jest.fn().mockResolvedValue(createdUser) };
      (fetch as jest.Mock).mockResolvedValue(mockResponse);

      const result = await userService.createUser(newUser);

      expect(fetch).toHaveBeenCalledWith('/api/users', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(newUser)
      });
      expect(result).toEqual(createdUser);
    });
  });
});

// src/components/UserList.tsx
import React, { useState, useEffect } from 'react';
import { UserService, User } from '../services/userService';

interface UserListProps {
  userService: UserService;
  onUserSelect?: (user: User) => void;
}

export const UserList: React.FC<UserListProps> = ({ userService, onUserSelect }) => {
  const [users, setUsers] = useState<User[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    const fetchUsers = async () => {
      try {
        setLoading(true);
        const fetchedUsers = await userService.getUsers();
        setUsers(fetchedUsers);
      } catch (err) {
        setError(err instanceof Error ? err.message : 'Failed to fetch users');
      } finally {
        setLoading(false);
      }
    };

    fetchUsers();
  }, [userService]);

  if (loading) return <div data-testid="loading">Loading users...</div>;
  if (error) return <div data-testid="error">Error: {error}</div>;

  return (
    <div data-testid="user-list">
      <h2>Users</h2>
      <ul>
        {users.map(user => (
          <li 
            key={user.id} 
            data-testid={`user-${user.id}`}
            onClick={() => onUserSelect?.(user)}
            style={{ cursor: onUserSelect ? 'pointer' : 'default' }}
          >
            {user.name} ({user.email})
            {user.isActive && <span data-testid="active-badge">Active</span>}
          </li>
        ))}
      </ul>
    </div>
  );
};

// src/components/__tests__/UserList.test.tsx
import React from 'react';
import { render, screen, waitFor, fireEvent } from '@testing-library/react';
import { UserList } from '../UserList';
import { UserService, User } from '../../services/userService';

// Mock the UserService
jest.mock('../../services/userService');

describe('UserList', () => {
  let mockUserService: jest.Mocked<UserService>;
  const mockUsers: User[] = [
    { id: 1, name: 'John Doe', email: 'john@example.com', isActive: true },
    { id: 2, name: 'Jane Smith', email: 'jane@example.com', isActive: false }
  ];

  beforeEach(() => {
    mockUserService = {
      getUsers: jest.fn(),
      getUserById: jest.fn(),
      createUser: jest.fn()
    } as any;
  });

  it('should render loading state initially', () => {
    mockUserService.getUsers.mockImplementation(() => new Promise(() => {}));
    
    render(<UserList userService={mockUserService} />);
    
    expect(screen.getByTestId('loading')).toBeInTheDocument();
  });

  it('should render users when data is loaded', async () => {
    mockUserService.getUsers.mockResolvedValue(mockUsers);
    
    render(<UserList userService={mockUserService} />);
    
    await waitFor(() => {
      expect(screen.getByTestId('user-list')).toBeInTheDocument();
    });
    
    expect(screen.getByText('John Doe (john@example.com)')).toBeInTheDocument();
    expect(screen.getByText('Jane Smith (jane@example.com)')).toBeInTheDocument();
    expect(screen.getByTestId('active-badge')).toBeInTheDocument();
  });

  it('should render error state when API call fails', async () => {
    mockUserService.getUsers.mockRejectedValue(new Error('API Error'));
    
    render(<UserList userService={mockUserService} />);
    
    await waitFor(() => {
      expect(screen.getByTestId('error')).toBeInTheDocument();
    });
    
    expect(screen.getByText('Error: API Error')).toBeInTheDocument();
  });

  it('should call onUserSelect when user is clicked', async () => {
    mockUserService.getUsers.mockResolvedValue(mockUsers);
    const mockOnUserSelect = jest.fn();
    
    render(<UserList userService={mockUserService} onUserSelect={mockOnUserSelect} />);
    
    await waitFor(() => {
      expect(screen.getByTestId('user-1')).toBeInTheDocument();
    });
    
    fireEvent.click(screen.getByTestId('user-1'));
    
    expect(mockOnUserSelect).toHaveBeenCalledWith(mockUsers[0]);
  });
});

// src/__tests__/api.integration.test.ts
import request from 'supertest';
import { app } from '../app';
import { connectDatabase, closeDatabase } from '../config/database';

describe('API Integration Tests', () => {
  beforeAll(async () => {
    await connectDatabase();
  });

  afterAll(async () => {
    await closeDatabase();
  });

  beforeEach(async () => {
    // Clear database before each test
    await request(app).delete('/api/test/clear');
  });

  describe('User API', () => {
    it('should create and retrieve a user', async () => {
      const userData = {
        name: 'Test User',
        email: 'test@example.com',
        password: 'password123'
      };

      // Create user
      const createResponse = await request(app)
        .post('/api/users')
        .send(userData)
        .expect(201);

      expect(createResponse.body).toHaveProperty('id');
      expect(createResponse.body.name).toBe(userData.name);
      expect(createResponse.body.email).toBe(userData.email);
      expect(createResponse.body).not.toHaveProperty('password');

      // Retrieve user
      const userId = createResponse.body.id;
      const getResponse = await request(app)
        .get(`/api/users/${userId}`)
        .expect(200);

      expect(getResponse.body.id).toBe(userId);
      expect(getResponse.body.name).toBe(userData.name);
    });

    it('should return 400 for invalid user data', async () => {
      const invalidUserData = {
        name: '', // Invalid: empty name
        email: 'invalid-email', // Invalid: malformed email
        password: '123' // Invalid: too short
      };

      const response = await request(app)
        .post('/api/users')
        .send(invalidUserData)
        .expect(400);

      expect(response.body).toHaveProperty('errors');
      expect(response.body.errors).toHaveLength(3);
    });

    it('should return 404 for non-existent user', async () => {
      await request(app)
        .get('/api/users/999999')
        .expect(404);
    });
  });

  describe('Authentication API', () => {
    it('should authenticate user with valid credentials', async () => {
      // First create a user
      const userData = {
        name: 'Auth User',
        email: 'auth@example.com',
        password: 'password123'
      };

      await request(app)
        .post('/api/users')
        .send(userData);

      // Then authenticate
      const authResponse = await request(app)
        .post('/api/auth/login')
        .send({
          email: userData.email,
          password: userData.password
        })
        .expect(200);

      expect(authResponse.body).toHaveProperty('token');
      expect(authResponse.body).toHaveProperty('user');
      expect(authResponse.body.user.email).toBe(userData.email);
    });

    it('should reject invalid credentials', async () => {
      const response = await request(app)
        .post('/api/auth/login')
        .send({
          email: 'nonexistent@example.com',
          password: 'wrongpassword'
        })
        .expect(401);

      expect(response.body).toHaveProperty('error');
    });
  });
});

// tests/e2e/user-journey.spec.ts
import { test, expect } from '@playwright/test';

test.describe('User Journey Tests', () => {
  test.beforeEach(async ({ page }) => {
    await page.goto('http://localhost:3000');
  });

  test('should complete user registration and login flow', async ({ page }) => {
    // Navigate to registration page
    await page.click('[data-testid="register-link"]');
    await expect(page).toHaveURL(/.*register/);

    // Fill registration form
    await page.fill('[data-testid="name-input"]', 'Test User');
    await page.fill('[data-testid="email-input"]', 'test@example.com');
    await page.fill('[data-testid="password-input"]', 'Password123!');
    await page.fill('[data-testid="confirm-password-input"]', 'Password123!');

    // Submit registration
    await page.click('[data-testid="register-button"]');

    // Wait for successful registration
    await expect(page.locator('[data-testid="success-message"]')).toBeVisible();
    await expect(page).toHaveURL(/.*dashboard/);

    // Verify user is logged in
    await expect(page.locator('[data-testid="user-menu"]')).toBeVisible();
    await expect(page.locator('[data-testid="user-name"]')).toContainText('Test User');
  });

  test('should handle form validation errors', async ({ page }) => {
    await page.click('[data-testid="register-link"]');

    // Try to submit empty form
    await page.click('[data-testid="register-button"]');

    // Check for validation errors
    await expect(page.locator('[data-testid="name-error"]')).toBeVisible();
    await expect(page.locator('[data-testid="email-error"]')).toBeVisible();
    await expect(page.locator('[data-testid="password-error"]')).toBeVisible();

    // Fill with invalid data
    await page.fill('[data-testid="email-input"]', 'invalid-email');
    await page.fill('[data-testid="password-input"]', '123');

    await page.click('[data-testid="register-button"]');

    // Check for specific validation errors
    await expect(page.locator('[data-testid="email-error"]')).toContainText('Invalid email format');
    await expect(page.locator('[data-testid="password-error"]')).toContainText('Password too short');
  });

  test('should complete product purchase flow', async ({ page }) => {
    // Login first
    await page.click('[data-testid="login-link"]');
    await page.fill('[data-testid="email-input"]', 'test@example.com');
    await page.fill('[data-testid="password-input"]', 'Password123!');
    await page.click('[data-testid="login-button"]');

    // Navigate to products
    await page.click('[data-testid="products-link"]');
    await expect(page).toHaveURL(/.*products/);

    // Select a product
    await page.click('[data-testid="product-card-1"]');
    await expect(page.locator('[data-testid="product-details"])).toBeVisible();

    // Add to cart
    await page.click('[data-testid="add-to-cart-button"]');
    await expect(page.locator('[data-testid="cart-count"]')).toContainText('1');

    // Go to cart
    await page.click('[data-testid="cart-link"]');
    await expect(page).toHaveURL(/.*cart/);

    // Proceed to checkout
    await page.click('[data-testid="checkout-button"]');
    await expect(page).toHaveURL(/.*checkout/);

    // Fill checkout form
    await page.fill('[data-testid="shipping-name"]', 'Test User');
    await page.fill('[data-testid="shipping-address"]', '123 Test St');
    await page.fill('[data-testid="shipping-city"]', 'Test City');
    await page.fill('[data-testid="shipping-zip"]', '12345');

    // Submit order
    await page.click('[data-testid="place-order-button"]');

    // Verify order confirmation
    await expect(page.locator('[data-testid="order-confirmation"]')).toBeVisible();
    await expect(page.locator('[data-testid="order-number"]')).toBeVisible();
  });
});

// src/utils/performance.ts
export class PerformanceMonitor {
  private metrics: Map<string, number[]> = new Map();

  startTimer(operation: string): () => void {
    const startTime = performance.now();
    
    return () => {
      const duration = performance.now() - startTime;
      this.recordMetric(operation, duration);
    };
  }

  recordMetric(operation: string, value: number): void {
    if (!this.metrics.has(operation)) {
      this.metrics.set(operation, []);
    }
    this.metrics.get(operation)!.push(value);
  }

  getMetrics(operation: string): {
    count: number;
    average: number;
    min: number;
    max: number;
    p95: number;
  } {
    const values = this.metrics.get(operation) || [];
    if (values.length === 0) {
      return { count: 0, average: 0, min: 0, max: 0, p95: 0 };
    }

    const sorted = values.sort((a, b) => a - b);
    const count = values.length;
    const average = values.reduce((sum, val) => sum + val, 0) / count;
    const min = sorted[0];
    const max = sorted[sorted.length - 1];
    const p95Index = Math.floor(count * 0.95);
    const p95 = sorted[p95Index];

    return { count, average, min, max, p95 };
  }

  logMetrics(): void {
    console.log('Performance Metrics:');
    for (const [operation, values] of this.metrics) {
      const metrics = this.getMetrics(operation);
      console.log(`${operation}:`, metrics);
    }
  }
}

// Usage in tests
const performanceMonitor = new PerformanceMonitor();

test('API response time should be under 200ms', async () => {
  const stopTimer = performanceMonitor.startTimer('api-response');
  
  const response = await request(app).get('/api/users');
  
  stopTimer();
  
  const metrics = performanceMonitor.getMetrics('api-response');
  expect(metrics.average).toBeLessThan(200);
});

// tests/visual/visual-regression.spec.ts
import { test, expect } from '@playwright/test';

test.describe('Visual Regression Tests', () => {
  test('should match homepage screenshot', async ({ page }) => {
    await page.goto('http://localhost:3000');
    await page.waitForLoadState('networkidle');
    
    await expect(page).toHaveScreenshot('homepage.png', {
      threshold: 0.1,
      maxDiffPixels: 100
    });
  });

  test('should match user profile page', async ({ page }) => {
    // Login first
    await page.goto('http://localhost:3000/login');
    await page.fill('[data-testid="email-input"]', 'test@example.com');
    await page.fill('[data-testid="password-input"]', 'Password123!');
    await page.click('[data-testid="login-button"]');
    
    // Navigate to profile
    await page.click('[data-testid="profile-link"]');
    await page.waitForLoadState('networkidle');
    
    await expect(page).toHaveScreenshot('user-profile.png', {
      threshold: 0.1,
      maxDiffPixels: 100
    });
  });

  test('should match responsive design breakpoints', async ({ page }) => {
    await page.goto('http://localhost:3000');
    
    // Test mobile view
    await page.setViewportSize({ width: 375, height: 667 });
    await expect(page).toHaveScreenshot('homepage-mobile.png');
    
    // Test tablet view
    await page.setViewportSize({ width: 768, height: 1024 });
    await expect(page).toHaveScreenshot('homepage-tablet.png');
    
    // Test desktop view
    await page.setViewportSize({ width: 1920, height: 1080 });
    await expect(page).toHaveScreenshot('homepage-desktop.png');
  });
});

// tests/accessibility/a11y.spec.ts
import { test, expect } from '@playwright/test';
import { AxeBuilder } from '@axe-core/playwright';

test.describe('Accessibility Tests', () => {
  test('should pass accessibility audit on homepage', async ({ page }) => {
    await page.goto('http://localhost:3000');
    
    const accessibilityScanResults = await new AxeBuilder({ page }).analyze();
    
    expect(accessibilityScanResults.violations).toEqual([]);
  });

  test('should have proper heading structure', async ({ page }) => {
    await page.goto('http://localhost:3000');
    
    const headings = await page.$$eval('h1, h2, h3, h4, h5, h6', elements => 
      elements.map(el => ({
        level: parseInt(el.tagName.charAt(1)),
        text: el.textContent?.trim()
      }))
    );
    
    // Check for proper heading hierarchy
    let previousLevel = 0;
    for (const heading of headings) {
      expect(heading.level).toBeLessThanOrEqual(previousLevel + 1);
      previousLevel = heading.level;
    }
  });

  test('should have proper alt text for images', async ({ page }) => {
    await page.goto('http://localhost:3000');
    
    const images = await page.$$eval('img', elements =>
      elements.map(img => ({
        src: img.src,
        alt: img.alt,
        hasAlt: img.hasAttribute('alt')
      }))
    );
    
    for (const image of images) {
      if (!image.src.includes('data:')) { // Skip data URLs
        expect(image.hasAlt).toBe(true);
        expect(image.alt).not.toBe('');
      }
    }
  });

  test('should be keyboard navigable', async ({ page }) => {
    await page.goto('http://localhost:3000');
    
    // Test tab navigation
    await page.keyboard.press('Tab');
    await expect(page.locator(':focus')).toBeVisible();
    
    // Test all interactive elements are reachable
    const focusableElements = await page.$$eval(
      'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])',
      elements => elements.length
    );
    
    expect(focusableElements).toBeGreaterThan(0);
  });
});