import React from "react";
import { render, screen, waitFor } from "@testing-library/react";
import { jest } from "@jest/globals";
import TopUsersScreen from "../pages/TopUsersScreen.js";
import { UserProvider } from "../context/UserContext.js";
import { BrowserRouter } from "react-router-dom";

// Mock data for top users
const mockData = {
  SystemLoginDetailsTop10ActiveTime: [
    { EmpCode: "E001", EmployeeName: "John Doe", Top10_ActiveTime: "08:30:00" },
    { EmpCode: "E002", EmployeeName: "Jane Smith", Top10_ActiveTime: "07:45:00" },
  ],
  SystemLoginDetailsTop10SleepTime: [
    { EmpCode: "E003", EmployeeName: "Bob Wilson", Top10_IdleTime: "02:30:00" },
    { EmpCode: "E004", EmployeeName: "Alice Brown", Top10_IdleTime: "03:15:00" },
  ],
  SystemLoginDetailsTop10CallDurationTime: [
    { EmpCode: "E005", EmployeeName: "Charlie Davis", CallsCount: "15", Top10_Call_Duration: "01:45:00" },
    { EmpCode: "E006", EmployeeName: "Diana Miller", CallsCount: "20", Top10_Call_Duration: "02:00:00" },
  ],
};

const emptyData = {
  SystemLoginDetailsTop10ActiveTime: [],
  SystemLoginDetailsTop10SleepTime: [],
  SystemLoginDetailsTop10CallDurationTime: [],
};

const mockUserContext = {
  permissions: [{ Path: "/dashboard", Permission_Id: "1" }],
};

const renderComponent = (props = {}) => {
  const defaultProps = {
    data: mockData,
    loading: false,
    filters: {},
    isAutoHeight: false,
    ...props,
  };

  return render(
    <BrowserRouter>
      <UserProvider value={mockUserContext}>
        <TopUsersScreen {...defaultProps} />
      </UserProvider>
    </BrowserRouter>
  );
};

describe("TopUsersScreen Component", () => {
  beforeEach(() => {
    jest.clearAllMocks();
  });

  it("should render the component", () => {
    renderComponent();
    expect(screen.getByText("Top 10 Users")).toBeInTheDocument();
  });

  it("should display Active section header", () => {
    renderComponent();
    expect(screen.getByText("Active")).toBeInTheDocument();
  });

  it("should display Idle section header", () => {
    renderComponent();
    expect(screen.getByText("Idle")).toBeInTheDocument();
  });

  it("should display Call section header", () => {
    renderComponent();
    expect(screen.getByText("Call")).toBeInTheDocument();
  });

  it("should show loader when loading is true", () => {
    renderComponent({ loading: true });
    const loaders = screen.getAllByTestId("loader");
    expect(loaders.length).toBeGreaterThan(0);
  });

  it("should render with empty data", () => {
    renderComponent({ data: emptyData });
    expect(screen.getByText("Top 10 Users")).toBeInTheDocument();
  });

  it("should render with default expanded accordion", () => {
    renderComponent();
    // Accordion should be expanded by default
    const accordionSummary = screen.getByRole("button", { name: /Top 10 Users/i });
    expect(accordionSummary).toBeInTheDocument();
  });

  it("should render common tables for each section", async () => {
    renderComponent();
    await waitFor(() => {
      const tables = screen.getAllByTestId("common-table");
      expect(tables.length).toBe(3);
    });
  });

  it("should pass isAutoHeight prop to tables", () => {
    renderComponent({ isAutoHeight: true });
    expect(screen.getByText("Top 10 Users")).toBeInTheDocument();
  });

  it("should pass filters prop to tables", () => {
    const customFilters = { PageSize: 10, PageNumber: 1 };
    renderComponent({ filters: customFilters });
    expect(screen.getByText("Top 10 Users")).toBeInTheDocument();
  });

  it("should render employee names from active data", async () => {
    renderComponent();
    await waitFor(() => {
      // These should appear in the rendered tables
      expect(screen.getByText("John Doe")).toBeInTheDocument();
    });
  });

  it("should handle undefined data gracefully", () => {
    renderComponent({ data: {} });
    expect(screen.getByText("Top 10 Users")).toBeInTheDocument();
  });
});
