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

describe('Button', () => {
  it('renders children', () => {
    render(<Button>Click me</Button>);
    expect(screen.getByText('Click me')).toBeInTheDocument();
  });

  it('handles click events', () => {
    const handleClick = vi.fn();
    render(<Button onClick={handleClick}>Click me</Button>);
    fireEvent.click(screen.getByRole('button'));
    expect(handleClick).toHaveBeenCalled();
  });

  it('is disabled when disabled prop is true', () => {
    render(<Button disabled>Click me</Button>);
    expect(screen.getByRole('button')).toBeDisabled();
  });

  it('is disabled when loading', () => {
    render(<Button isLoading>Click me</Button>);
    expect(screen.getByRole('button')).toBeDisabled();
  });

  it('shows loading spinner when loading', () => {
    render(<Button isLoading>Click me</Button>);
    const spinner = document.querySelector('.animate-spin');
    expect(spinner).toBeInTheDocument();
  });

  it('shows loading text when loading', () => {
    render(<Button isLoading loadingText="Loading...">Click me</Button>);
    expect(screen.getByText('Loading...')).toBeInTheDocument();
  });

  it('applies primary variant by default', () => {
    render(<Button>Click me</Button>);
    expect(screen.getByRole('button')).toHaveClass('bg-brand-600');
  });

  it('applies secondary variant', () => {
    render(<Button variant="secondary">Click me</Button>);
    expect(screen.getByRole('button')).toHaveClass('bg-gray-600');
  });

  it('applies danger variant', () => {
    render(<Button variant="danger">Click me</Button>);
    expect(screen.getByRole('button')).toHaveClass('bg-red-600');
  });

  it('applies success variant', () => {
    render(<Button variant="success">Click me</Button>);
    expect(screen.getByRole('button')).toHaveClass('bg-green-600');
  });

  it('applies warning variant', () => {
    render(<Button variant="warning">Click me</Button>);
    expect(screen.getByRole('button')).toHaveClass('bg-amber-600');
  });

  it('applies outline variant', () => {
    render(<Button variant="outline">Click me</Button>);
    expect(screen.getByRole('button')).toHaveClass('bg-transparent');
  });

  it('applies ghost variant', () => {
    render(<Button variant="ghost">Click me</Button>);
    expect(screen.getByRole('button')).toHaveClass('bg-transparent');
  });

  it('applies size classes', () => {
    render(<Button size="sm">Small</Button>);
    expect(screen.getByRole('button')).toHaveClass('px-3');
  });

  it('applies full width', () => {
    render(<Button fullWidth>Full Width</Button>);
    expect(screen.getByRole('button')).toHaveClass('w-full');
  });

  it('renders left icon', () => {
    render(<Button leftIcon={<span data-testid="left-icon">L</span>}>With Icon</Button>);
    expect(screen.getByTestId('left-icon')).toBeInTheDocument();
  });

  it('renders right icon', () => {
    render(<Button rightIcon={<span data-testid="right-icon">R</span>}>With Icon</Button>);
    expect(screen.getByTestId('right-icon')).toBeInTheDocument();
  });

  it('applies custom className', () => {
    render(<Button className="custom-class">Click me</Button>);
    expect(screen.getByRole('button')).toHaveClass('custom-class');
  });
});

describe('SubmitButton', () => {
  it('renders submit text by default', () => {
    render(<SubmitButton />);
    expect(screen.getByText('Save')).toBeInTheDocument();
  });

  it('has type submit', () => {
    render(<SubmitButton />);
    expect(screen.getByRole('button')).toHaveAttribute('type', 'submit');
  });

  it('renders custom submit text', () => {
    render(<SubmitButton submitText="Submit" />);
    expect(screen.getByText('Submit')).toBeInTheDocument();
  });

  it('renders children over submitText', () => {
    render(<SubmitButton submitText="Submit">Custom</SubmitButton>);
    expect(screen.getByText('Custom')).toBeInTheDocument();
  });

  it('shows loading text when loading', () => {
    render(<SubmitButton isLoading />);
    expect(screen.getByText('Saving...')).toBeInTheDocument();
  });
});
