import React from 'react';
import { render, screen } from '@testing-library/react';
import '@testing-library/jest-dom';
import PieChart from './PieCharts.js';

describe('PieChart Component', () => {
  const mockSessionsData = [
    {
      Results: [
        { SystemStatus: 'Active', Count: 10 },
        { SystemStatus: 'Idle', Count: 5 },
        { SystemStatus: 'Sleep', Count: 3 },
      ],
    },
  ];

  const mockCallsData = [
    {
      Results: [
        { EmpCode: 'EMP001', CallsCount: 15 },
        { EmpCode: 'EMP002', CallsCount: 10 },
        { EmpCode: 'EMP003', CallsCount: 8 },
      ],
    },
  ];

  const mockApplicationsData = [
    {
      Results: [
        { ApplicationName: 'Chrome', ApplicationCount: 20 },
        { ApplicationName: 'VS Code', ApplicationCount: 15 },
        { ApplicationName: 'Teams', ApplicationCount: 10 },
      ],
    },
  ];

  test('renders without crashing with Sessions data', () => {
    render(
      <PieChart
        data={mockSessionsData}
        selectedValue="Sessions"
        selectedValue3=""
      />
    );
    expect(screen.getByText('Chart Rendered')).toBeInTheDocument();
  });

  test('renders without crashing with Calls data', () => {
    render(
      <PieChart
        data={mockCallsData}
        selectedValue="Calls"
        selectedValue3=""
      />
    );
    expect(screen.getByText('Chart Rendered')).toBeInTheDocument();
  });

  test('renders without crashing with Applications data', () => {
    render(
      <PieChart
        data={mockApplicationsData}
        selectedValue="Applications"
        selectedValue3=""
      />
    );
    expect(screen.getByText('Chart Rendered')).toBeInTheDocument();
  });

  test('displays "No Data found" message when data is null', () => {
    render(
      <PieChart
        data={null}
        selectedValue="Sessions"
        selectedValue3=""
      />
    );
    expect(screen.getByText('No Data found for selected filters')).toBeInTheDocument();
  });

  test('displays "No Data found" message when data is empty array', () => {
    render(
      <PieChart
        data={[]}
        selectedValue="Sessions"
        selectedValue3=""
      />
    );
    expect(screen.getByText('No Data found for selected filters')).toBeInTheDocument();
  });

  test('displays "No Data found" message when Results is missing', () => {
    render(
      <PieChart
        data={[{}]}
        selectedValue="Sessions"
        selectedValue3=""
      />
    );
    expect(screen.getByText('No Data found for selected filters')).toBeInTheDocument();
  });

  test('displays "No Data found" message when Results is empty', () => {
    render(
      <PieChart
        data={[{ Results: [] }]}
        selectedValue="Sessions"
        selectedValue3=""
      />
    );
    expect(screen.getByText('No Data found for selected filters')).toBeInTheDocument();
  });

  test('handles Sessions selectedValue correctly', () => {
    const { container } = render(
      <PieChart
        data={mockSessionsData}
        selectedValue="Sessions"
        selectedValue3=""
      />
    );
    expect(container.querySelector('div[style*="height"]')).toBeInTheDocument();
  });

  test('handles Calls selectedValue correctly', () => {
    const { container } = render(
      <PieChart
        data={mockCallsData}
        selectedValue="Calls"
        selectedValue3=""
      />
    );
    expect(container.querySelector('div[style*="height"]')).toBeInTheDocument();
  });

  test('handles default case (Applications) correctly', () => {
    const { container } = render(
      <PieChart
        data={mockApplicationsData}
        selectedValue="SomethingElse"
        selectedValue3=""
      />
    );
    expect(container.querySelector('div[style*="height"]')).toBeInTheDocument();
  });

  test('renders chart with correct height style', () => {
    const { container } = render(
      <PieChart
        data={mockSessionsData}
        selectedValue="Sessions"
        selectedValue3=""
      />
    );
    const chartContainer = container.querySelector('div[style*="calc(100vh - 160px)"]');
    expect(chartContainer).toBeInTheDocument();
  });

  test('renders chart with white background', () => {
    const { container } = render(
      <PieChart
        data={mockSessionsData}
        selectedValue="Sessions"
        selectedValue3=""
      />
    );
    const chartContainer = container.querySelector('div[style*="background"]');
    expect(chartContainer).toBeInTheDocument();
  });

  test('re-renders when data changes', () => {
    const { rerender } = render(
      <PieChart
        data={mockSessionsData}
        selectedValue="Sessions"
        selectedValue3=""
      />
    );
    expect(screen.getByText('Chart Rendered')).toBeInTheDocument();

    rerender(
      <PieChart
        data={mockCallsData}
        selectedValue="Calls"
        selectedValue3=""
      />
    );
    expect(screen.getByText('Chart Rendered')).toBeInTheDocument();
  });

  test('re-renders when selectedValue changes', () => {
    const { rerender } = render(
      <PieChart
        data={mockSessionsData}
        selectedValue="Sessions"
        selectedValue3=""
      />
    );
    expect(screen.getByText('Chart Rendered')).toBeInTheDocument();

    rerender(
      <PieChart
        data={mockSessionsData}
        selectedValue="Calls"
        selectedValue3=""
      />
    );
    expect(screen.getByText('Chart Rendered')).toBeInTheDocument();
  });

  test('re-renders when selectedValue3 changes', () => {
    const { rerender } = render(
      <PieChart
        data={mockSessionsData}
        selectedValue="Sessions"
        selectedValue3="value1"
      />
    );
    expect(screen.getByText('Chart Rendered')).toBeInTheDocument();

    rerender(
      <PieChart
        data={mockSessionsData}
        selectedValue="Sessions"
        selectedValue3="value2"
      />
    );
    expect(screen.getByText('Chart Rendered')).toBeInTheDocument();
  });

  test('handles undefined data gracefully', () => {
    render(
      <PieChart
        data={undefined}
        selectedValue="Sessions"
        selectedValue3=""
      />
    );
    expect(screen.getByText('No Data found for selected filters')).toBeInTheDocument();
  });

  test('processes Sessions data correctly', () => {
    render(
      <PieChart
        data={mockSessionsData}
        selectedValue="Sessions"
        selectedValue3=""
      />
    );
    // Chart should be rendered, not the "No Data" message
    expect(screen.queryByText('No Data found for selected filters')).not.toBeInTheDocument();
    expect(screen.getByText('Chart Rendered')).toBeInTheDocument();
  });

  test('processes Calls data correctly', () => {
    render(
      <PieChart
        data={mockCallsData}
        selectedValue="Calls"
        selectedValue3=""
      />
    );
    // Chart should be rendered, not the "No Data" message
    expect(screen.queryByText('No Data found for selected filters')).not.toBeInTheDocument();
    expect(screen.getByText('Chart Rendered')).toBeInTheDocument();
  });

  test('processes Applications data correctly', () => {
    render(
      <PieChart
        data={mockApplicationsData}
        selectedValue="Applications"
        selectedValue3=""
      />
    );
    // Chart should be rendered, not the "No Data" message
    expect(screen.queryByText('No Data found for selected filters')).not.toBeInTheDocument();
    expect(screen.getByText('Chart Rendered')).toBeInTheDocument();
  });
});
