import { render, screen } from '@testing-library/react';
import { describe, expect, it, vi } from 'vitest';
import { NeighborhoodRadarChart } from '../neighborhood-radar-chart';
import type { NeighborhoodCategory } from '../types';

// Mock recharts
vi.mock('recharts', () => ({
  ResponsiveContainer: ({ children }: { children: React.ReactNode }) => (
    <div data-testid="responsive-container">{children}</div>
  ),
  RadarChart: ({ children, data }: { children: React.ReactNode; data: unknown[] }) => (
    <div data-testid="radar-chart" data-count={data.length}>
      {children}
    </div>
  ),
  Radar: ({ dataKey }: { dataKey: string }) => <div data-testid={`radar-${dataKey}`} />,
  PolarGrid: () => <div data-testid="polar-grid" />,
  PolarAngleAxis: ({ dataKey }: { dataKey: string }) => (
    <div data-testid={`polar-angle-${dataKey}`} />
  ),
  PolarRadiusAxis: () => <div data-testid="polar-radius" />,
  Tooltip: () => <div data-testid="tooltip" />,
}));

const sampleCategories: NeighborhoodCategory[] = [
  { category: 'education', label: 'Giáo dục', score: 8.5 },
  { category: 'healthcare', label: 'Y tế', score: 7.2 },
  { category: 'transport', label: 'Giao thông', score: 6.0 },
  { category: 'shopping', label: 'Mua sắm', score: 4.5 },
  { category: 'dining', label: 'Ẩm thực', score: 9.0 },
  { category: 'environment', label: 'Môi trường', score: 3.2 },
];

describe('NeighborhoodRadarChart', () => {
  it('renders responsive container', () => {
    render(<NeighborhoodRadarChart categories={sampleCategories} />);
    expect(screen.getByTestId('responsive-container')).toBeInTheDocument();
  });

  it('renders radar chart with correct data count', () => {
    render(<NeighborhoodRadarChart categories={sampleCategories} />);
    expect(screen.getByTestId('radar-chart')).toHaveAttribute('data-count', '6');
  });

  it('renders radar data layer', () => {
    render(<NeighborhoodRadarChart categories={sampleCategories} />);
    expect(screen.getByTestId('radar-score')).toBeInTheDocument();
  });

  it('renders polar grid and axes', () => {
    render(<NeighborhoodRadarChart categories={sampleCategories} />);
    expect(screen.getByTestId('polar-grid')).toBeInTheDocument();
    expect(screen.getByTestId('polar-angle-subject')).toBeInTheDocument();
    expect(screen.getByTestId('polar-radius')).toBeInTheDocument();
  });

  it('renders score badges by default', () => {
    render(<NeighborhoodRadarChart categories={sampleCategories} />);
    // Green badge for scores > 7
    expect(screen.getByText(/Giáo dục: 8.5/)).toBeInTheDocument();
    // Yellow badge for scores 5-7
    expect(screen.getByText(/Giao thông: 6.0/)).toBeInTheDocument();
    // Red badge for scores < 5
    expect(screen.getByText(/Môi trường: 3.2/)).toBeInTheDocument();
  });

  it('hides badges when showBadges is false', () => {
    render(<NeighborhoodRadarChart categories={sampleCategories} showBadges={false} />);
    expect(screen.queryByText(/Giáo dục: 8.5/)).not.toBeInTheDocument();
  });
});
