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

const defaultProps: PackageFiltersProps = {
  searchQuery: '',
  onSearchChange: vi.fn(),
  categories: ['Email', 'CRM', 'Social'],
  categoryFilter: 'all',
  onCategoryChange: vi.fn(),
};

function renderFilters(overrides: Partial<PackageFiltersProps> = {}) {
  const props = { ...defaultProps, ...overrides };
  return render(<PackageFilters {...props} />);
}

describe('PackageFilters', () => {
  it('renders search input with placeholder', () => {
    renderFilters();
    const input = screen.getByPlaceholderText(/search/i);
    expect(input).toBeInTheDocument();
  });

  it('renders category chips including "All"', () => {
    renderFilters();
    expect(screen.getByRole('radio', { name: 'All' })).toBeInTheDocument();
    expect(screen.getByRole('radio', { name: 'Email' })).toBeInTheDocument();
    expect(screen.getByRole('radio', { name: 'CRM' })).toBeInTheDocument();
    expect(screen.getByRole('radio', { name: 'Social' })).toBeInTheDocument();
  });

  it('calls onSearchChange when typing in search input', () => {
    const onSearchChange = vi.fn();
    renderFilters({ onSearchChange });
    const input = screen.getByPlaceholderText(/search/i);
    fireEvent.change(input, { target: { value: 'mailchimp' } });
    expect(onSearchChange).toHaveBeenCalledWith('mailchimp');
  });

  it('renders status chips when statusOptions provided', () => {
    const statusOptions = [
      { value: 'all', label: 'All', count: 10 },
      { value: 'active', label: 'Active', count: 3 },
      { value: 'inactive', label: 'Inactive', count: 7 },
    ];
    renderFilters({
      statusFilter: 'all',
      onStatusChange: vi.fn(),
      statusOptions,
    });
    // Status chips should be present (they share role="radio" with category chips,
    // so check by text content)
    expect(screen.getByText('Active')).toBeInTheDocument();
    expect(screen.getByText('Inactive')).toBeInTheDocument();
    // Count badges
    expect(screen.getByText('10')).toBeInTheDocument();
    expect(screen.getByText('3')).toBeInTheDocument();
    expect(screen.getByText('7')).toBeInTheDocument();
  });

  it('does NOT render status chips when statusOptions not provided', () => {
    renderFilters();
    expect(screen.queryByText('Status')).not.toBeInTheDocument();
    expect(screen.queryByText('Active')).not.toBeInTheDocument();
  });

  it('calls onCategoryChange when category chip clicked', () => {
    const onCategoryChange = vi.fn();
    renderFilters({ onCategoryChange });
    fireEvent.click(screen.getByRole('radio', { name: 'Email' }));
    expect(onCategoryChange).toHaveBeenCalledWith('Email');
  });

  it('calls onStatusChange when status chip clicked', () => {
    const onStatusChange = vi.fn();
    const statusOptions = [
      { value: 'all', label: 'All' },
      { value: 'active', label: 'Active' },
    ];
    renderFilters({
      statusFilter: 'all',
      onStatusChange,
      statusOptions,
    });
    fireEvent.click(screen.getByText('Active'));
    expect(onStatusChange).toHaveBeenCalledWith('active');
  });
});