import { render, screen, fireEvent } from '@testing-library/react'
import '@testing-library/jest-dom'
import { AdvancedChart } from './index'

// Mock recharts to avoid canvas issues in tests
jest.mock('recharts', () => ({
  ResponsiveContainer: ({ children }: any) => <div data-testid="responsive-container">{children}</div>,
  LineChart: ({ children }: any) => <div data-testid="line-chart">{children}</div>,
  BarChart: ({ children }: any) => <div data-testid="bar-chart">{children}</div>,
  AreaChart: ({ children }: any) => <div data-testid="area-chart">{children}</div>,
  PieChart: ({ children }: any) => <div data-testid="pie-chart">{children}</div>,
  ScatterChart: ({ children }: any) => <div data-testid="scatter-chart">{children}</div>,
  Line: () => <div data-testid="line" />,
  Bar: () => <div data-testid="bar" />,
  Area: () => <div data-testid="area" />,
  Pie: () => <div data-testid="pie" />,
  Scatter: () => <div data-testid="scatter" />,
  Cell: () => <div data-testid="cell" />,
  XAxis: () => <div data-testid="x-axis" />,
  YAxis: () => <div data-testid="y-axis" />,
  CartesianGrid: () => <div data-testid="grid" />,
  Tooltip: () => <div data-testid="tooltip" />,
  Legend: () => <div data-testid="legend" />,
  ReferenceLine: () => <div data-testid="reference-line" />,
  ReferenceArea: () => <div data-testid="reference-area" />,
  Brush: () => <div data-testid="brush" />,
}))

// Mock data for testing
const mockData = [
  { name: 'Jan', value: 400, revenue: 2400 },
  { name: 'Feb', value: 300, revenue: 1398 },
  { name: 'Mar', value: 200, revenue: 9800 },
  { name: 'Apr', value: 278, revenue: 3908 },
  { name: 'May', value: 189, revenue: 4800 },
  { name: 'Jun', value: 239, revenue: 3800 },
]

const mockSeries = [
  {
    dataKey: 'value',
    name: 'Users',
    color: '#8884d8',
  },
  {
    dataKey: 'revenue',
    name: 'Revenue',
    color: '#82ca9d',
  },
]

describe('AdvancedChart', () => {
  it('renders without crashing', () => {
    render(
      <AdvancedChart
        data={mockData}
        series={mockSeries}
        type="line"
      />
    )
    
    expect(screen.getByText('Advanced Chart')).toBeInTheDocument()
  })

  it('renders with custom title', () => {
    render(
      <AdvancedChart
        data={mockData}
        series={mockSeries}
        type="line"
        title="Custom Chart Title"
      />
    )
    
    expect(screen.getByText('Custom Chart Title')).toBeInTheDocument()
  })

  it('renders with subtitle', () => {
    render(
      <AdvancedChart
        data={mockData}
        series={mockSeries}
        type="line"
        title="Chart Title"
        subtitle="Chart Subtitle"
      />
    )
    
    expect(screen.getByText('Chart Subtitle')).toBeInTheDocument()
  })

  it('renders line chart type', () => {
    render(
      <AdvancedChart
        data={mockData}
        series={mockSeries}
        type="line"
      />
    )
    
    expect(screen.getByTestId('line-chart')).toBeInTheDocument()
  })

  it('renders bar chart type', () => {
    render(
      <AdvancedChart
        data={mockData}
        series={mockSeries}
        type="bar"
      />
    )
    
    expect(screen.getByTestId('bar-chart')).toBeInTheDocument()
  })

  it('renders area chart type', () => {
    render(
      <AdvancedChart
        data={mockData}
        series={mockSeries}
        type="area"
      />
    )
    
    expect(screen.getByTestId('area-chart')).toBeInTheDocument()
  })

  it('renders pie chart type', () => {
    render(
      <AdvancedChart
        data={mockData}
        series={mockSeries}
        type="pie"
      />
    )
    
    expect(screen.getByTestId('pie-chart')).toBeInTheDocument()
  })

  it('renders scatter chart type', () => {
    render(
      <AdvancedChart
        data={mockData}
        series={mockSeries}
        type="scatter"
      />
    )
    
    expect(screen.getByTestId('scatter-chart')).toBeInTheDocument()
  })

  it('shows loading state', () => {
    render(
      <AdvancedChart
        data={mockData}
        series={mockSeries}
        type="line"
        loading={true}
      />
    )
    
    expect(screen.getByText('Loading chart...')).toBeInTheDocument()
  })

  it('shows error state', () => {
    render(
      <AdvancedChart
        data={mockData}
        series={mockSeries}
        type="line"
        error="Something went wrong"
      />
    )
    
    expect(screen.getByText('Something went wrong')).toBeInTheDocument()
    expect(screen.getByText('Retry')).toBeInTheDocument()
  })

  it('calls onRefresh when refresh button is clicked', () => {
    const mockOnRefresh = jest.fn()
    
    render(
      <AdvancedChart
        data={mockData}
        series={mockSeries}
        type="line"
        onRefresh={mockOnRefresh}
      />
    )
    
    const refreshButton = screen.getByRole('button', { name: /refresh/i })
    fireEvent.click(refreshButton)
    
    expect(mockOnRefresh).toHaveBeenCalled()
  })

  it('calls onExport when export button is clicked', () => {
    const mockOnExport = jest.fn()
    
    render(
      <AdvancedChart
        data={mockData}
        series={mockSeries}
        type="line"
        onExport={mockOnExport}
      />
    )
    
    const exportButton = screen.getByRole('button', { name: /download/i })
    fireEvent.click(exportButton)
    
    expect(mockOnExport).toHaveBeenCalledWith('png')
  })

  it('displays trend indicator', () => {
    render(
      <AdvancedChart
        data={mockData}
        series={mockSeries}
        type="line"
        title="Revenue Chart"
      />
    )
    
    // Should display trend percentage
    expect(screen.getByText(/%/)).toBeInTheDocument()
  })

  it('renders with custom height', () => {
    render(
      <AdvancedChart
        data={mockData}
        series={mockSeries}
        type="line"
        height={600}
      />
    )
    
    expect(screen.getByTestId('responsive-container')).toBeInTheDocument()
  })

  it('handles responsive mode', () => {
    render(
      <AdvancedChart
        data={mockData}
        series={mockSeries}
        type="line"
        responsive={true}
      />
    )
    
    expect(screen.getByTestId('responsive-container')).toBeInTheDocument()
  })

  it('handles non-responsive mode', () => {
    render(
      <AdvancedChart
        data={mockData}
        series={mockSeries}
        type="line"
        responsive={false}
      />
    )
    
    expect(screen.queryByTestId('responsive-container')).not.toBeInTheDocument()
  })

  it('applies custom className', () => {
    render(
      <AdvancedChart
        data={mockData}
        series={mockSeries}
        type="line"
        className="custom-chart"
      />
    )
    
    const chartContainer = screen.getByText('Advanced Chart').closest('div')
    expect(chartContainer).toHaveClass('custom-chart')
  })
})