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

vi.mock('recharts', () => ({
  Radar: () => null,
  RadarChart: ({ children }: { children: React.ReactNode }) => <div data-testid="radar-chart">{children}</div>,
  PolarGrid: () => null,
  PolarAngleAxis: () => null,
  PolarRadiusAxis: () => null,
  ResponsiveContainer: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
  Legend: () => null,
  Tooltip: () => null,
}));

vi.mock('@/i18n/navigation', () => ({
  Link: ({ children, ...props }: React.PropsWithChildren<Record<string, unknown>>) => <a {...props}>{children}</a>,
}));

vi.mock('@/lib/hooks/use-khu-cong-nghiep', () => ({
  useIndustrialCompare: () => ({ data: undefined, isLoading: false }),
  useIndustrialParksSearch: () => ({ data: { data: [] } }),
}));

vi.mock('@/lib/khu-cong-nghiep-api', () => ({
  PARK_STATUS_COLORS: { OPERATIONAL: 'bg-green-100 text-green-800' },
  PARK_STATUS_LABELS: { OPERATIONAL: 'Hoạt động' },
  REGION_LABELS: { SOUTH: 'Miền Nam' },
}));

import { ParkCompareClient } from '../park-compare-client';

describe('ParkCompareClient', () => {
  it('renders heading', () => {
    render(<ParkCompareClient />);
    expect(screen.getByText('So Sánh Khu Công Nghiệp')).toBeInTheDocument();
  });

  it('shows empty state when fewer than 2 parks selected', () => {
    render(<ParkCompareClient />);
    expect(screen.getByText('Chọn ít nhất 2 KCN để so sánh')).toBeInTheDocument();
  });

  it('renders add park button', () => {
    render(<ParkCompareClient />);
    expect(screen.getByText('Thêm KCN')).toBeInTheDocument();
  });
});