import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { describe, expect, it, vi } from 'vitest';
import { type SearchFilters, FilterBar  } from '../filter-bar';

// Mock next-intl
vi.mock('next-intl', () => ({
  useTranslations: () => (key: string) => {
    const translations: Record<string, string> = {
      filters: 'Bộ lọc',
      allTransactions: 'Tất cả giao dịch',
      allPropertyTypes: 'Tất cả loại BĐS',
      allAreas: 'Tất cả khu vực',
      allPrices: 'Tất cả mức giá',
      bedrooms: 'Phòng ngủ',
      searchButton: 'Tìm kiếm',
      areaLabel: 'Diện tích',
      areaFrom: 'Từ',
      areaTo: 'Đến',
      district: 'Quận/Huyện',
      'bedroomsCount': '1+ PN',
      'priceRanges.under1b': 'Dưới 1 tỷ',
      'priceRanges.1to3b': '1-3 tỷ',
      'priceRanges.3to5b': '3-5 tỷ',
      'priceRanges.5to10b': '5-10 tỷ',
      'priceRanges.10to20b': '10-20 tỷ',
      'priceRanges.over20b': 'Trên 20 tỷ',
    };
    return translations[key] ?? key;
  },
}));

const defaultFilters: SearchFilters = {
  transactionType: '',
  propertyType: '',
  city: '',
  district: '',
  minPrice: '',
  maxPrice: '',
  minArea: '',
  maxArea: '',
  bedrooms: '',
  sort: '',
};

describe('FilterBar', () => {
  it('renders transaction type select', () => {
    render(<FilterBar filters={defaultFilters} onChange={vi.fn()} onSearch={vi.fn()} />);
    expect(screen.getByLabelText('Tất cả giao dịch')).toBeInTheDocument();
  });

  it('renders property type select', () => {
    render(<FilterBar filters={defaultFilters} onChange={vi.fn()} onSearch={vi.fn()} />);
    expect(screen.getByLabelText('Tất cả loại BĐS')).toBeInTheDocument();
  });

  it('renders city select', () => {
    render(<FilterBar filters={defaultFilters} onChange={vi.fn()} onSearch={vi.fn()} />);
    expect(screen.getByLabelText('Tất cả khu vực')).toBeInTheDocument();
  });

  it('renders transaction type options', () => {
    render(<FilterBar filters={defaultFilters} onChange={vi.fn()} onSearch={vi.fn()} />);
    expect(screen.getByText('Bán')).toBeInTheDocument();
    expect(screen.getByText('Cho thuê')).toBeInTheDocument();
  });

  it('renders city options', () => {
    render(<FilterBar filters={defaultFilters} onChange={vi.fn()} onSearch={vi.fn()} />);
    expect(screen.getByText('Hồ Chí Minh')).toBeInTheDocument();
    expect(screen.getByText('Hà Nội')).toBeInTheDocument();
    expect(screen.getByText('Đà Nẵng')).toBeInTheDocument();
  });

  it('renders bedrooms select', () => {
    render(<FilterBar filters={defaultFilters} onChange={vi.fn()} onSearch={vi.fn()} />);
    expect(screen.getByLabelText('Phòng ngủ')).toBeInTheDocument();
  });

  it('has search role', () => {
    render(<FilterBar filters={defaultFilters} onChange={vi.fn()} onSearch={vi.fn()} />);
    expect(screen.getByRole('search')).toBeInTheDocument();
  });

  it('calls onChange when transaction type changes', async () => {
    const user = userEvent.setup();
    const onChange = vi.fn();
    render(<FilterBar filters={defaultFilters} onChange={onChange} onSearch={vi.fn()} />);

    await user.selectOptions(screen.getByLabelText('Tất cả giao dịch'), 'SALE');
    expect(onChange).toHaveBeenCalledWith(expect.objectContaining({ transactionType: 'SALE' }));
  });

  it('calls onChange when city changes', async () => {
    const user = userEvent.setup();
    const onChange = vi.fn();
    render(<FilterBar filters={defaultFilters} onChange={onChange} onSearch={vi.fn()} />);

    await user.selectOptions(screen.getByLabelText('Tất cả khu vực'), 'Hồ Chí Minh');
    expect(onChange).toHaveBeenCalledWith(expect.objectContaining({ city: 'Hồ Chí Minh' }));
  });

  // Sidebar layout
  it('renders search button in sidebar layout', () => {
    render(<FilterBar filters={defaultFilters} onChange={vi.fn()} onSearch={vi.fn()} layout="sidebar" />);
    expect(screen.getByText('Tìm kiếm')).toBeInTheDocument();
  });

  it('renders heading in sidebar layout', () => {
    render(<FilterBar filters={defaultFilters} onChange={vi.fn()} onSearch={vi.fn()} layout="sidebar" />);
    expect(screen.getByText('Bộ lọc')).toBeInTheDocument();
  });

  it('renders area inputs in sidebar layout', () => {
    render(<FilterBar filters={defaultFilters} onChange={vi.fn()} onSearch={vi.fn()} layout="sidebar" />);
    expect(screen.getByLabelText(/Diện tích Từ/)).toBeInTheDocument();
  });

  it('renders district input in sidebar layout', () => {
    render(<FilterBar filters={defaultFilters} onChange={vi.fn()} onSearch={vi.fn()} layout="sidebar" />);
    expect(screen.getByLabelText('Quận/Huyện')).toBeInTheDocument();
  });

  it('calls onSearch when search button clicked in sidebar', async () => {
    const user = userEvent.setup();
    const onSearch = vi.fn();
    render(<FilterBar filters={defaultFilters} onChange={vi.fn()} onSearch={onSearch} layout="sidebar" />);

    await user.click(screen.getByText('Tìm kiếm'));
    expect(onSearch).toHaveBeenCalled();
  });

  it('does not render search button in horizontal layout', () => {
    render(<FilterBar filters={defaultFilters} onChange={vi.fn()} onSearch={vi.fn()} layout="horizontal" />);
    expect(screen.queryByText('Tìm kiếm')).not.toBeInTheDocument();
  });
});
