import { render, screen } from '@testing-library/react';
import { describe, expect, it, vi } from 'vitest';
import type { ComparisonStats } from '@/lib/comparison-store';
import { ComparisonStatsBanner } from '../comparison-stats';

// Mock next-intl
vi.mock('next-intl', () => ({
  useTranslations: () => (key: string, _params?: Record<string, unknown>) => {
    if (key === 'priceRange') return 'Khoảng giá';
    if (key === 'areaRange') return 'Khoảng diện tích';
    if (key === 'pricePerM2Range') return 'Giá/m²';
    if (key === 'average') return 'Trung bình';
    return key;
  },
}));

const mockStats: ComparisonStats = {
  priceRange: { min: 2_000_000_000, max: 5_000_000_000, avg: 3_500_000_000 },
  areaRange: { min: 60, max: 120, avg: 90 },
  pricePerM2Range: { min: 30_000_000, max: 50_000_000, avg: 40_000_000 },
};

describe('ComparisonStatsBanner', () => {
  it('renders price range card', () => {
    render(<ComparisonStatsBanner stats={mockStats} />);
    expect(screen.getByText('Khoảng giá')).toBeInTheDocument();
  });

  it('renders area range card', () => {
    render(<ComparisonStatsBanner stats={mockStats} />);
    expect(screen.getByText('Khoảng diện tích')).toBeInTheDocument();
  });

  it('renders price per m² card when data available', () => {
    render(<ComparisonStatsBanner stats={mockStats} />);
    expect(screen.getByText('Giá/m²')).toBeInTheDocument();
  });

  it('renders min and max area', () => {
    render(<ComparisonStatsBanner stats={mockStats} />);
    expect(screen.getByText(/60.*120 m²/)).toBeInTheDocument();
  });

  it('renders average area', () => {
    render(<ComparisonStatsBanner stats={mockStats} />);
    expect(screen.getByText(/Trung bình.*90 m²/)).toBeInTheDocument();
  });

  it('hides price per m² card when data is null', () => {
    const statsNoM2 = { ...mockStats, pricePerM2Range: null };
    render(<ComparisonStatsBanner stats={statsNoM2} />);
    expect(screen.queryByText('Giá/m²')).not.toBeInTheDocument();
  });
});