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

describe('ModalFooter', () => {
  it('renders cancel button when onCancel provided', () => {
    render(<ModalFooter onCancel={() => {}} />);
    expect(screen.getByText('Cancel')).toBeInTheDocument();
  });

  it('renders submit button when onSubmit provided', () => {
    render(<ModalFooter onSubmit={() => {}} />);
    expect(screen.getByText('Save')).toBeInTheDocument();
  });

  it('renders both buttons when both handlers provided', () => {
    render(<ModalFooter onCancel={() => {}} onSubmit={() => {}} />);
    expect(screen.getByText('Cancel')).toBeInTheDocument();
    expect(screen.getByText('Save')).toBeInTheDocument();
  });

  it('uses custom submit text', () => {
    render(<ModalFooter onSubmit={() => {}} submitText="Create" />);
    expect(screen.getByText('Create')).toBeInTheDocument();
  });

  it('uses custom cancel text', () => {
    render(<ModalFooter onCancel={() => {}} cancelText="Close" />);
    expect(screen.getByText('Close')).toBeInTheDocument();
  });

  it('calls onCancel when cancel button clicked', () => {
    const handleCancel = vi.fn();
    render(<ModalFooter onCancel={handleCancel} />);
    fireEvent.click(screen.getByText('Cancel'));
    expect(handleCancel).toHaveBeenCalled();
  });

  it('calls onSubmit when submit button clicked', () => {
    const handleSubmit = vi.fn();
    render(<ModalFooter onSubmit={handleSubmit} />);
    fireEvent.click(screen.getByText('Save'));
    expect(handleSubmit).toHaveBeenCalled();
  });

  it('disables submit button when isDisabled is true', () => {
    render(<ModalFooter onSubmit={() => {}} isDisabled />);
    expect(screen.getByText('Save')).toBeDisabled();
  });

  it('disables buttons when isLoading is true', () => {
    render(<ModalFooter onCancel={() => {}} onSubmit={() => {}} isLoading />);
    expect(screen.getByText('Cancel')).toBeDisabled();
    expect(screen.getByText('Save')).toBeDisabled();
  });

  it('shows loading spinner when isLoading', () => {
    const { container } = render(<ModalFooter onSubmit={() => {}} isLoading />);
    expect(container.querySelector('.animate-spin')).toBeInTheDocument();
  });

  it('renders back button when showBackButton is true', () => {
    render(<ModalFooter onBack={() => {}} showBackButton />);
    expect(screen.getByText('Back')).toBeInTheDocument();
  });

  it('uses custom back text', () => {
    render(<ModalFooter onBack={() => {}} showBackButton backText="Previous" />);
    expect(screen.getByText('Previous')).toBeInTheDocument();
  });

  it('calls onBack when back button clicked', () => {
    const handleBack = vi.fn();
    render(<ModalFooter onBack={handleBack} showBackButton />);
    fireEvent.click(screen.getByText('Back'));
    expect(handleBack).toHaveBeenCalled();
  });

  it('does not render back button without onBack handler', () => {
    render(<ModalFooter showBackButton />);
    expect(screen.queryByText('Back')).not.toBeInTheDocument();
  });

  it('applies primary variant by default', () => {
    render(<ModalFooter onSubmit={() => {}} />);
    expect(screen.getByText('Save')).toHaveClass('bg-blue-600');
  });

  it('applies danger variant', () => {
    render(<ModalFooter onSubmit={() => {}} submitVariant="danger" />);
    expect(screen.getByText('Save')).toHaveClass('bg-red-600');
  });

  it('applies success variant', () => {
    render(<ModalFooter onSubmit={() => {}} submitVariant="success" />);
    expect(screen.getByText('Save')).toHaveClass('bg-green-600');
  });

  it('applies warning variant', () => {
    render(<ModalFooter onSubmit={() => {}} submitVariant="warning" />);
    expect(screen.getByText('Save')).toHaveClass('bg-amber-600');
  });

  it('applies secondary variant', () => {
    render(<ModalFooter onSubmit={() => {}} submitVariant="secondary" />);
    expect(screen.getByText('Save')).toHaveClass('bg-gray-600');
  });

  it('renders children instead of default buttons', () => {
    render(
      <ModalFooter onSubmit={() => {}} onCancel={() => {}}>
        <button>Custom Button</button>
      </ModalFooter>
    );
    expect(screen.getByText('Custom Button')).toBeInTheDocument();
    expect(screen.queryByText('Cancel')).not.toBeInTheDocument();
    expect(screen.queryByText('Save')).not.toBeInTheDocument();
  });

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

  it('renders nothing when no handlers provided', () => {
    const { container } = render(<ModalFooter />);
    expect(container.querySelector('button')).not.toBeInTheDocument();
  });

  it('disables back button when loading', () => {
    render(<ModalFooter onBack={() => {}} showBackButton isLoading />);
    expect(screen.getByText('Back')).toBeDisabled();
  });
});
