/**
 * ProjectFilters Component Tests
 */

import { render, screen, fireEvent } from '@testing-library/react';
import { ProjectFilters } from '@/components/projects/ProjectFilters';

describe('ProjectFilters', () => {
  const defaultProps = {
    searchQuery: '',
    onSearchChange: jest.fn(),
    statusFilter: 'all' as const,
    onStatusFilterChange: jest.fn(),
    complexityFilter: 'all' as const,
    onComplexityFilterChange: jest.fn(),
    sortBy: 'recent' as const,
    onSortByChange: jest.fn(),
    sortOrder: 'desc' as const,
    onSortOrderChange: jest.fn(),
    viewMode: 'grid' as const,
    onViewModeChange: jest.fn(),
  };

  beforeEach(() => {
    jest.clearAllMocks();
  });

  it('renders search input', () => {
    render(<ProjectFilters {...defaultProps} />);
    expect(screen.getByPlaceholderText('Search projects...')).toBeInTheDocument();
  });

  it('calls onSearchChange when typing in search', () => {
    render(<ProjectFilters {...defaultProps} />);

    const searchInput = screen.getByPlaceholderText('Search projects...');
    fireEvent.change(searchInput, { target: { value: 'test query' } });

    expect(defaultProps.onSearchChange).toHaveBeenCalledWith('test query');
  });

  it('renders status filter dropdown', () => {
    render(<ProjectFilters {...defaultProps} />);
    expect(screen.getByRole('combobox', { name: /Filter by status/i })).toBeInTheDocument();
  });

  it('renders filters button', () => {
    render(<ProjectFilters {...defaultProps} />);
    expect(screen.getByRole('button', { name: /Filters/i })).toBeInTheDocument();
  });

  it('renders view mode toggle buttons', () => {
    render(<ProjectFilters {...defaultProps} />);
    expect(screen.getByRole('button', { name: /Grid view/i })).toBeInTheDocument();
    expect(screen.getByRole('button', { name: /List view/i })).toBeInTheDocument();
  });

  it('calls onViewModeChange when clicking view toggle', () => {
    render(<ProjectFilters {...defaultProps} />);

    const listButton = screen.getByRole('button', { name: /List view/i });
    fireEvent.click(listButton);

    expect(defaultProps.onViewModeChange).toHaveBeenCalledWith('list');
  });

  it('shows extended filters when Filters button is clicked', () => {
    render(<ProjectFilters {...defaultProps} />);

    const filtersButton = screen.getByRole('button', { name: /Filters/i });
    fireEvent.click(filtersButton);

    expect(screen.getByText('Complexity')).toBeInTheDocument();
    expect(screen.getByText('Sort By')).toBeInTheDocument();
    expect(screen.getByText('Order')).toBeInTheDocument();
  });

  it('shows active filter count badge when filters are active', () => {
    render(<ProjectFilters {...defaultProps} statusFilter="active" />);

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

  it('shows Clear Filters button when filters are active and extended is open', () => {
    render(<ProjectFilters {...defaultProps} statusFilter="active" searchQuery="test" />);

    // Open extended filters
    const filtersButton = screen.getByRole('button', { name: /Filters/i });
    fireEvent.click(filtersButton);

    expect(screen.getByRole('button', { name: /Clear Filters/i })).toBeInTheDocument();
  });

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