import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { describe, expect, it, vi } from 'vitest';
import { AddToCompareButton } from '../add-to-compare-button';

// Mock next-intl
vi.mock('next-intl', () => ({
  useTranslations: () => (key: string) => key,
}));

// Mock comparison store
vi.mock('@/lib/comparison-store', () => {
  let selectedIds: string[] = [];
  return {
    useComparisonStore: (selector: (state: unknown) => unknown) => {
      const state = {
        isSelected: (id: string) => selectedIds.includes(id),
        addToCompare: vi.fn((id: string) => { selectedIds.push(id); }),
        removeFromCompare: vi.fn((id: string) => { selectedIds = selectedIds.filter((i) => i !== id); }),
        canAdd: () => selectedIds.length < 5,
      };
      return selector(state);
    },
  };
});

describe('AddToCompareButton', () => {
  it('renders add button in full mode', () => {
    render(<AddToCompareButton listingId="listing-1" />);
    expect(screen.getByRole('button', { name: 'addToCompare' })).toBeInTheDocument();
  });

  it('renders compact button with aria-label', () => {
    render(<AddToCompareButton listingId="listing-1" compact />);
    expect(screen.getByRole('button', { name: 'addToCompare' })).toBeInTheDocument();
  });

  it('shows add text in full mode', () => {
    render(<AddToCompareButton listingId="listing-1" />);
    expect(screen.getByText('addToCompare')).toBeInTheDocument();
  });

  it('handles click on compact button', async () => {
    render(<AddToCompareButton listingId="listing-2" compact />);
    const btn = screen.getByRole('button');
    await userEvent.click(btn);
    // Should not throw - click handler stops propagation
  });

  it('handles click on full button', async () => {
    render(<AddToCompareButton listingId="listing-3" />);
    const btn = screen.getByRole('button', { name: 'addToCompare' });
    await userEvent.click(btn);
    // Should not throw
  });
});