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

// Mock recharts to avoid canvas/SVG issues in jsdom
vi.mock('recharts', () => ({
  ResponsiveContainer: ({ children }: { children: React.ReactNode }) => (
    <div data-testid="responsive-container">{children}</div>
  ),
  BarChart: ({ children }: { children: React.ReactNode }) => (
    <div data-testid="bar-chart">{children}</div>
  ),
  Bar: ({ children }: { children: React.ReactNode }) => <div data-testid="bar">{children}</div>,
  Cell: () => <div data-testid="cell" />,
  CartesianGrid: () => null,
  XAxis: () => null,
  YAxis: () => null,
  Tooltip: () => null,
  Legend: () => null,
}));

vi.mock('@/Components/theme', () => ({
  useTheme: () => ({ resolvedTheme: 'light' }),
}));

vi.mock('@/hooks/use-mobile', () => ({
  useIsMobile: () => false,
}));

import { CountryMap } from './CountryMap';

const sampleData = [
  {
    country: 'USA',
    clicks: 1000,
    impressions: 10000,
    ctr: 0.1,
    position: 5.5,
  },
  {
    country: 'UK',
    clicks: 800,
    impressions: 8000,
    ctr: 0.1,
    position: 6.2,
  },
  {
    country: 'Canada',
    clicks: 600,
    impressions: 6000,
    ctr: 0.1,
    position: 7.1,
  },
];

describe('CountryMap', () => {
  it('renders country map with data', () => {
    render(<CountryMap data={sampleData} />);
    expect(screen.getByTestId('bar-chart')).toBeInTheDocument();
  });

  it('handles empty data gracefully', () => {
    render(<CountryMap data={[]} />);
    expect(screen.getByText('No geographic data available')).toBeInTheDocument();
    expect(screen.queryByTestId('bar-chart')).not.toBeInTheDocument();
  });

  it('renders with custom height', () => {
    const { container } = render(<CountryMap data={sampleData} height={500} />);
    const chartContainer = container.querySelector('[role="img"]');
    expect(chartContainer).toBeInTheDocument();
  });

  it('renders with custom aria-label', () => {
    render(<CountryMap data={sampleData} aria-label="Custom country heatmap" />);
    expect(screen.getByLabelText('Custom country heatmap')).toBeInTheDocument();
  });

  it('renders with default aria-label when not provided', () => {
    render(<CountryMap data={sampleData} />);
    expect(screen.getByLabelText('Top countries by clicks bar chart')).toBeInTheDocument();
  });

  it('limits display to top 20 countries', () => {
    const largeDataset = Array.from({ length: 50 }, (_, i) => ({
      country: `Country ${i}`,
      clicks: 1000 - i * 10,
      impressions: 10000 - i * 100,
      ctr: 0.1,
      position: 5.0 + i * 0.1,
    }));

    render(<CountryMap data={largeDataset} />);
    expect(screen.getByTestId('bar-chart')).toBeInTheDocument();
  });

  it('handles single country data', () => {
    const singleCountry = [
      {
        country: 'USA',
        clicks: 1000,
        impressions: 10000,
        ctr: 0.1,
        position: 5.5,
      },
    ];

    render(<CountryMap data={singleCountry} />);
    expect(screen.getByTestId('bar-chart')).toBeInTheDocument();
  });

  it('sorts countries by clicks descending', () => {
    const unsortedData = [
      {
        country: 'Low',
        clicks: 100,
        impressions: 1000,
        ctr: 0.1,
        position: 5.5,
      },
      {
        country: 'High',
        clicks: 1000,
        impressions: 10000,
        ctr: 0.1,
        position: 5.5,
      },
      {
        country: 'Medium',
        clicks: 500,
        impressions: 5000,
        ctr: 0.1,
        position: 5.5,
      },
    ];

    render(<CountryMap data={unsortedData} />);
    expect(screen.getByTestId('bar-chart')).toBeInTheDocument();
  });
});