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

describe('PasswordStrengthIndicator', () => {
  it('should not render when password is empty', () => {
    const { container } = render(<PasswordStrengthIndicator password="" />);
    expect(container.firstChild).toBeNull();
  });

  it('should display weak strength for short password', () => {
    render(<PasswordStrengthIndicator password="abc" />);
    expect(screen.getByText('Force: Faible')).toBeInTheDocument();
  });

  it('should display weak strength for password with only lowercase', () => {
    render(<PasswordStrengthIndicator password="abcdefgh" />);
    expect(screen.getByText('Force: Faible')).toBeInTheDocument();
  });

  it('should display weak strength for password with length >= 8 and mixed case', () => {
    render(<PasswordStrengthIndicator password="Abcdefgh" />);
    expect(screen.getByText('Force: Faible')).toBeInTheDocument();
  });

  it('should display medium strength for password with length >= 8, mixed case and numbers', () => {
    render(<PasswordStrengthIndicator password="Abcdefgh1" />);
    expect(screen.getByText('Force: Moyen')).toBeInTheDocument();
  });

  it('should display strong strength for password with length >= 8, mixed case, numbers and special chars', () => {
    render(<PasswordStrengthIndicator password="Abcdefgh1!" />);
    expect(screen.getByText('Force: Fort')).toBeInTheDocument();
  });

  it('should display very strong strength for long password with all requirements', () => {
    render(<PasswordStrengthIndicator password="Abcdefgh123!@#" />);
    expect(screen.getByText('Force: Très fort')).toBeInTheDocument();
  });

  it('should display very strong strength for password with length >= 12 and all requirements', () => {
    render(<PasswordStrengthIndicator password="Abcdefghijkl1!" />);
    expect(screen.getByText('Force: Très fort')).toBeInTheDocument();
  });

  it('should render progress bar', () => {
    const { container } = render(
      <PasswordStrengthIndicator password="Abcdefgh1!" />,
    );
    const progressBar = container.querySelector('.bg-gray-200');
    expect(progressBar).toBeInTheDocument();
  });

  it('should render progress fill with correct width for weak password', () => {
    const { container } = render(<PasswordStrengthIndicator password="abc" />);
    const progressFill = container.querySelector('.bg-red-500');
    expect(progressFill).toBeInTheDocument();
    expect(progressFill).toHaveStyle({ width: '25%' });
  });

  it('should render progress fill with correct width for medium password', () => {
    const { container } = render(
      <PasswordStrengthIndicator password="Abcdefgh1" />,
    );
    const progressFill = container.querySelector('.bg-yellow-500');
    expect(progressFill).toBeInTheDocument();
    expect(progressFill).toHaveStyle({ width: '50%' });
  });

  it('should render progress fill with correct width for strong password', () => {
    const { container } = render(
      <PasswordStrengthIndicator password="Abcdefgh1!" />,
    );
    const progressFill = container.querySelector('.bg-green-500');
    expect(progressFill).toBeInTheDocument();
    expect(progressFill).toHaveStyle({ width: '75%' });
  });

  it('should render progress fill with correct width for very strong password', () => {
    const { container } = render(
      <PasswordStrengthIndicator password="Abcdefghijkl1!" />,
    );
    const progressFill = container.querySelector('.bg-green-600');
    expect(progressFill).toBeInTheDocument();
    expect(progressFill).toHaveStyle({ width: '100%' });
  });
});