import { render, screen } from '@testing-library/react';
import { describe, expect, it, vi } from 'vitest';
import type { PriceDriver } from '@/lib/valuation-api';
import { ValueDriversChart } from '../value-drivers-chart';

// Recharts uses ResizeObserver and SVG path measurements that jsdom does not
// implement. Stub ResponsiveContainer so child bars render in tests.
vi.mock('recharts', async () => {
  const actual = (await vi.importActual('recharts')) as Record<string, unknown>;
  return {
    ...actual,
    ResponsiveContainer: ({ children }: { children: React.ReactNode }) => (
      <div data-testid="chart-container" style={{ width: 800, height: 400 }}>
        {children}
      </div>
    ),
  };
});

const drivers: PriceDriver[] = [
  { feature: 'area_m2', impact: 20, direction: 'positive' },
  { feature: 'building_age_years', impact: -8, direction: 'negative' },
  { feature: 'distance_to_cbd_km', impact: -4.5, direction: 'negative' },
];

describe('ValueDriversChart', () => {
  it('renders header and description', () => {
    render(<ValueDriversChart drivers={drivers} />);
    expect(screen.getByText('Yếu tố ảnh hưởng giá')).toBeInTheDocument();
    expect(
      screen.getByText(/Biểu đồ thác nước/),
    ).toBeInTheDocument();
  });

  it('renders nothing when drivers list is empty', () => {
    const { container } = render(<ValueDriversChart drivers={[]} />);
    expect(container).toBeEmptyDOMElement();
  });

  it('renders chart container when drivers are provided', () => {
    render(<ValueDriversChart drivers={drivers} />);
    expect(screen.getByTestId('chart-container')).toBeInTheDocument();
  });
});