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

// Mock recharts
vi.mock('recharts', () => ({
  ResponsiveContainer: ({ children }: { children: React.ReactNode }) => (
    <div data-testid="responsive-container">{children}</div>
  ),
  LineChart: ({ children, data }: { children: React.ReactNode; data: unknown[] }) => (
    <div data-testid="line-chart" data-count={data.length}>{children}</div>
  ),
  Line: ({ dataKey }: { dataKey: string }) => <div data-testid={`line-${dataKey}`} />,
  XAxis: ({ dataKey }: { dataKey: string }) => <div data-testid={`xaxis-${dataKey}`} />,
  YAxis: ({ yAxisId }: { yAxisId?: string }) => <div data-testid={`yaxis-${yAxisId || 'default'}`} />,
  CartesianGrid: () => <div data-testid="grid" />,
  Tooltip: () => <div data-testid="tooltip" />,
  Legend: () => <div data-testid="legend" />,
}));

const sampleData = [
  { period: 'T1/2026', 'Gia/m2': 65, 'Tin đăng': 120 },
  { period: 'T2/2026', 'Gia/m2': 68, 'Tin đăng': 130 },
  { period: 'T3/2026', 'Gia/m2': 70, 'Tin đăng': 125 },
];

describe('PriceTrendChart', () => {
  it('renders responsive container', () => {
    render(<PriceTrendChart data={sampleData} />);
    expect(screen.getByTestId('responsive-container')).toBeInTheDocument();
  });

  it('renders line chart', () => {
    render(<PriceTrendChart data={sampleData} />);
    expect(screen.getByTestId('line-chart')).toBeInTheDocument();
  });

  it('renders price line', () => {
    render(<PriceTrendChart data={sampleData} />);
    expect(screen.getByTestId('line-Gia/m2')).toBeInTheDocument();
  });

  it('renders listings count line', () => {
    render(<PriceTrendChart data={sampleData} />);
    expect(screen.getByTestId('line-Tin đăng')).toBeInTheDocument();
  });

  it('renders XAxis with period key', () => {
    render(<PriceTrendChart data={sampleData} />);
    expect(screen.getByTestId('xaxis-period')).toBeInTheDocument();
  });

  it('renders dual Y axes', () => {
    render(<PriceTrendChart data={sampleData} />);
    expect(screen.getByTestId('yaxis-left')).toBeInTheDocument();
    expect(screen.getByTestId('yaxis-right')).toBeInTheDocument();
  });

  it('renders Legend', () => {
    render(<PriceTrendChart data={sampleData} />);
    expect(screen.getByTestId('legend')).toBeInTheDocument();
  });

  it('passes data to chart', () => {
    render(<PriceTrendChart data={sampleData} />);
    expect(screen.getByTestId('line-chart')).toHaveAttribute('data-count', '3');
  });
});