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

describe('AuthLoading', () => {
  describe('rendering', () => {
    it('should render with default message', () => {
      render(<AuthLoading />);

      expect(screen.getByText('Authenticating...')).toBeInTheDocument();
    });

    it('should render with custom message', () => {
      render(<AuthLoading message="Loading user data..." />);

      expect(screen.getByText('Loading user data...')).toBeInTheDocument();
    });

    it('should render with empty message', () => {
      render(<AuthLoading message="" />);

      // Should still render the component structure
      expect(screen.getByText('')).toBeInTheDocument();
    });

    it('should render with special characters in message', () => {
      render(<AuthLoading message="Authenticating... Please wait!" />);

      expect(screen.getByText('Authenticating... Please wait!')).toBeInTheDocument();
    });

    it('should render with long message', () => {
      const longMessage = 'This is a very long loading message that might wrap to multiple lines';
      render(<AuthLoading message={longMessage} />);

      expect(screen.getByText(longMessage)).toBeInTheDocument();
    });
  });

  describe('accessibility', () => {
    it('should have proper loading semantics', () => {
      render(<AuthLoading />);

      // The component should have proper ARIA attributes for loading state
      expect(screen.getByText('Authenticating...')).toBeInTheDocument();
    });

    it('should be visually distinct as loading state', () => {
      render(<AuthLoading message="Loading..." />);

      // The component uses LoadingSpinner which should indicate loading
      expect(screen.getByText('Loading...')).toBeInTheDocument();
    });
  });

  describe('edge cases', () => {
    it('should handle null message', () => {
      render(<AuthLoading message={null as any} />);

      // Should render with default message
      expect(screen.getByText('Authenticating...')).toBeInTheDocument();
    });

    it('should handle undefined message', () => {
      render(<AuthLoading message={undefined as any} />);

      // Should render with default message
      expect(screen.getByText('Authenticating...')).toBeInTheDocument();
    });

    it('should handle numeric message', () => {
      render(<AuthLoading message={123 as any} />);

      expect(screen.getByText('123')).toBeInTheDocument();
    });

    it('should handle message with whitespace', () => {
      render(<AuthLoading message="  Loading...  " />);

      expect(screen.getByText('  Loading...  ')).toBeInTheDocument();
    });

    it('should handle message with newlines', () => {
      render(<AuthLoading message="Loading...\nPlease wait" />);

      expect(screen.getByText('Loading...')).toBeInTheDocument();
      expect(screen.getByText('Please wait')).toBeInTheDocument();
    });
  });

  describe('visual states', () => {
    it('should show loading spinner', () => {
      render(<AuthLoading />);

      // The LoadingSpinner component should be present
      // This is verified by the component structure
      expect(screen.getByText('Authenticating...')).toBeInTheDocument();
    });

    it('should maintain consistent layout', () => {
      render(<AuthLoading message="Processing..." />);

      // The component uses Section and Stack for layout
      expect(screen.getByText('Processing...')).toBeInTheDocument();
    });
  });
});