import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { describe, expect, it, vi, beforeEach } from 'vitest';
import { CompareFloatingBar } from '../compare-floating-bar';

// Mock next-intl
vi.mock('next-intl', () => ({
  useTranslations: () => (key: string, params?: Record<string, unknown>) => {
    const translations: Record<string, string> = {
      selected: `${params?.['count'] ?? 0} of ${params?.['max'] ?? 5} selected`,
      removeItem: 'Remove item',
      clearAll: 'Clear all',
      compareNow: 'Compare now',
      needMore: 'Need more',
    };
    return translations[key] ?? key;
  },
}));

// Mock i18n navigation
vi.mock('@/i18n/navigation', () => ({
  Link: ({ children, href }: { children: React.ReactNode; href: string }) => (
    <a href={href}>{children}</a>
  ),
}));

const mockStoreState = {
  selectedIds: [] as string[],
  clearAll: vi.fn(),
  removeFromCompare: vi.fn(),
  canCompare: () => false,
};

// Mock comparison store
vi.mock('@/lib/comparison-store', () => ({
  useComparisonStore: (selector: (state: unknown) => unknown) => selector(mockStoreState),
  MAX_COMPARE: 5,
}));

describe('CompareFloatingBar', () => {
  beforeEach(() => {
    vi.clearAllMocks();
    mockStoreState.selectedIds = [];
    mockStoreState.canCompare = () => false;
  });

  it('renders nothing when no items selected', () => {
    const { container } = render(<CompareFloatingBar />);
    expect(container.firstChild).toBeNull();
  });

  it('renders floating bar when items are selected', () => {
    mockStoreState.selectedIds = ['listing-1'];
    render(<CompareFloatingBar />);
    expect(screen.getByText('1 of 5 selected')).toBeInTheDocument();
  });

  it('renders clear all button', () => {
    mockStoreState.selectedIds = ['listing-1'];
    render(<CompareFloatingBar />);
    expect(screen.getByRole('button', { name: 'Clear all' })).toBeInTheDocument();
  });

  it('calls clearAll when clear button is clicked', async () => {
    mockStoreState.selectedIds = ['listing-1'];
    render(<CompareFloatingBar />);
    await userEvent.click(screen.getByRole('button', { name: 'Clear all' }));
    expect(mockStoreState.clearAll).toHaveBeenCalled();
  });

  it('shows disabled compare button when canCompare is false', () => {
    mockStoreState.selectedIds = ['listing-1'];
    mockStoreState.canCompare = () => false;
    render(<CompareFloatingBar />);
    expect(screen.getByRole('button', { name: /Need more/ })).toBeDisabled();
  });

  it('shows compare now link when canCompare is true', () => {
    mockStoreState.selectedIds = ['listing-1', 'listing-2'];
    mockStoreState.canCompare = () => true;
    render(<CompareFloatingBar />);
    expect(screen.getByText('Compare now')).toBeInTheDocument();
  });

  it('renders remove buttons for each selected item', () => {
    mockStoreState.selectedIds = ['listing-1', 'listing-2'];
    render(<CompareFloatingBar />);
    const removeButtons = screen.getAllByRole('button', { name: 'Remove item' });
    expect(removeButtons).toHaveLength(2);
  });

  it('calls removeFromCompare when remove button is clicked', async () => {
    mockStoreState.selectedIds = ['listing-1'];
    render(<CompareFloatingBar />);
    const removeBtn = screen.getByRole('button', { name: 'Remove item' });
    await userEvent.click(removeBtn);
    expect(mockStoreState.removeFromCompare).toHaveBeenCalledWith('listing-1');
  });
});