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>
  ),
  LineChart: ({ children }: { children: React.ReactNode }) => (
    <div data-testid="line-chart">{children}</div>
  ),
  Line: () => <div data-testid="line" />,
  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 { DeviceChart } from './DeviceChart';

const sampleData = [
  {
    device: 'MOBILE',
    clicks: 1000,
    impressions: 10000,
    ctr: 0.1,
    position: 5.5,
  },
  {
    device: 'DESKTOP',
    clicks: 800,
    impressions: 8000,
    ctr: 0.1,
    position: 6.2,
  },
  {
    device: 'TABLET',
    clicks: 200,
    impressions: 2000,
    ctr: 0.1,
    position: 7.1,
  },
];

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

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

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

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

  it('renders with default aria-label when not provided', () => {
    render(<DeviceChart data={sampleData} />);
    expect(screen.getByLabelText('Device performance trend chart')).toBeInTheDocument();
  });

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

    render(<DeviceChart data={singleDevice} />);
    expect(screen.getByTestId('line-chart')).toBeInTheDocument();
  });

  it('renders multiple trend lines', () => {
    render(<DeviceChart data={sampleData} />);
    const lines = screen.getAllByTestId('line');
    expect(lines).toHaveLength(2); // clicks and impressions
  });

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

  it('can disable legend', () => {
    render(<DeviceChart data={sampleData} showLegend={false} />);
    expect(screen.getByTestId('line-chart')).toBeInTheDocument();
  });

  it('can disable grid', () => {
    render(<DeviceChart data={sampleData} showGrid={false} />);
    expect(screen.getByTestId('line-chart')).toBeInTheDocument();
  });

  it('can disable tooltip', () => {
    render(<DeviceChart data={sampleData} showTooltip={false} />);
    expect(screen.getByTestId('line-chart')).toBeInTheDocument();
  });
});