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

describe('LoadingSpinner', () => {
  it('renders spinner element', () => {
    const { container } = render(<LoadingSpinner />);
    expect(container.querySelector('.animate-spin')).toBeInTheDocument();
  });

  it('applies default size (md)', () => {
    const { container } = render(<LoadingSpinner />);
    const spinner = container.querySelector('.animate-spin');
    expect(spinner).toHaveClass('h-6', 'w-6');
  });

  it('applies xs size', () => {
    const { container } = render(<LoadingSpinner size="xs" />);
    const spinner = container.querySelector('.animate-spin');
    expect(spinner).toHaveClass('h-3', 'w-3');
  });

  it('applies sm size', () => {
    const { container } = render(<LoadingSpinner size="sm" />);
    const spinner = container.querySelector('.animate-spin');
    expect(spinner).toHaveClass('h-4', 'w-4');
  });

  it('applies lg size', () => {
    const { container } = render(<LoadingSpinner size="lg" />);
    const spinner = container.querySelector('.animate-spin');
    expect(spinner).toHaveClass('h-8', 'w-8');
  });

  it('applies xl size', () => {
    const { container } = render(<LoadingSpinner size="xl" />);
    const spinner = container.querySelector('.animate-spin');
    expect(spinner).toHaveClass('h-12', 'w-12');
  });

  it('applies default color', () => {
    const { container } = render(<LoadingSpinner />);
    const spinner = container.querySelector('.animate-spin');
    expect(spinner).toHaveClass('text-gray-500');
  });

  it('applies white color', () => {
    const { container } = render(<LoadingSpinner color="white" />);
    const spinner = container.querySelector('.animate-spin');
    expect(spinner).toHaveClass('text-white');
  });

  it('applies brand color', () => {
    const { container } = render(<LoadingSpinner color="brand" />);
    const spinner = container.querySelector('.animate-spin');
    expect(spinner).toHaveClass('text-brand-600');
  });

  it('applies blue color', () => {
    const { container } = render(<LoadingSpinner color="blue" />);
    const spinner = container.querySelector('.animate-spin');
    expect(spinner).toHaveClass('text-blue-600');
  });

  it('renders label when provided', () => {
    render(<LoadingSpinner label="Loading data..." />);
    expect(screen.getByText('Loading data...')).toBeInTheDocument();
  });

  it('does not render label when not provided', () => {
    const { container } = render(<LoadingSpinner />);
    const spans = container.querySelectorAll('span');
    expect(spans.length).toBe(0);
  });

  it('centers spinner when centered prop is true', () => {
    const { container } = render(<LoadingSpinner centered />);
    expect(container.firstChild).toHaveClass('flex', 'items-center', 'justify-center');
  });

  it('does not center spinner by default', () => {
    const { container } = render(<LoadingSpinner />);
    expect(container.firstChild).not.toHaveClass('py-12');
  });

  it('applies custom className', () => {
    const { container } = render(<LoadingSpinner className="custom-class" />);
    expect(container.firstChild).toHaveClass('custom-class');
  });
});

describe('PageLoading', () => {
  it('renders with default loading text', () => {
    render(<PageLoading />);
    expect(screen.getByText('Loading...')).toBeInTheDocument();
  });

  it('renders with custom label', () => {
    render(<PageLoading label="Fetching data..." />);
    expect(screen.getByText('Fetching data...')).toBeInTheDocument();
  });

  it('renders large spinner', () => {
    const { container } = render(<PageLoading />);
    const spinner = container.querySelector('.animate-spin');
    expect(spinner).toHaveClass('h-8', 'w-8');
  });

  it('renders with brand color', () => {
    const { container } = render(<PageLoading />);
    const spinner = container.querySelector('.animate-spin');
    expect(spinner).toHaveClass('text-brand-600');
  });

  it('is centered in container', () => {
    const { container } = render(<PageLoading />);
    expect(container.firstChild).toHaveClass('flex', 'items-center', 'justify-center');
  });
});

describe('InlineLoading', () => {
  it('renders spinner', () => {
    const { container } = render(<InlineLoading />);
    expect(container.querySelector('.animate-spin')).toBeInTheDocument();
  });

  it('renders label when provided', () => {
    render(<InlineLoading label="Saving..." />);
    expect(screen.getByText('Saving...')).toBeInTheDocument();
  });

  it('does not render label when not provided', () => {
    render(<InlineLoading />);
    expect(screen.queryByText(/./)).not.toBeInTheDocument();
  });

  it('renders small spinner', () => {
    const { container } = render(<InlineLoading />);
    const spinner = container.querySelector('.animate-spin');
    expect(spinner).toHaveClass('h-4', 'w-4');
  });

  it('renders inline', () => {
    const { container } = render(<InlineLoading />);
    expect(container.firstChild).toHaveClass('inline-flex');
  });
});
