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

// Mock data for bottom users
const mockData = {
  SystemLoginDetailsBottom10ActiveTime: [
    { EmpCode: "E001", EmployeeName: "John Doe", Bottom10_ActiveTime: "02:30:00" },
    { EmpCode: "E002", EmployeeName: "Jane Smith", Bottom10_ActiveTime: "02:45:00" },
  ],
  SystemLoginDetailsBottom10SleepTime: [
    { EmpCode: "E003", EmployeeName: "Bob Wilson", Bottom10_IdleTime: "06:30:00" },
    { EmpCode: "E004", EmployeeName: "Alice Brown", Bottom10_IdleTime: "07:15:00" },
  ],
  SystemLoginDetailsBottom10CallDurationTime: [
    { EmpCode: "E005", EmployeeName: "Charlie Davis", CallsCount: "2", Bottom10_Call_Duration: "00:15:00" },
    { EmpCode: "E006", EmployeeName: "Diana Miller", CallsCount: "3", Bottom10_Call_Duration: "00:25:00" },
  ],
};

const emptyData = {
  SystemLoginDetailsBottom10ActiveTime: [],
  SystemLoginDetailsBottom10SleepTime: [],
  SystemLoginDetailsBottom10CallDurationTime: [],
};

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

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

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

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

  it("should render the component", () => {
    renderComponent();
    expect(screen.getByText("Bottom 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("Bottom 10 Users")).toBeInTheDocument();
  });

  it("should render with default expanded accordion", () => {
    renderComponent();
    // Accordion should be expanded by default
    const accordionSummary = screen.getByRole("button", { name: /Bottom 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("Bottom 10 Users")).toBeInTheDocument();
  });

  it("should handle selectedDate as string", () => {
    renderComponent({ selectedDate: "2024-01-15" });
    expect(screen.getByText("Bottom 10 Users")).toBeInTheDocument();
  });

  it("should handle selectedDate as Date object", () => {
    renderComponent({ selectedDate: new Date("2024-01-15") });
    expect(screen.getByText("Bottom 10 Users")).toBeInTheDocument();
  });

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

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

  it("should render with null selectedDate", () => {
    renderComponent({ selectedDate: null });
    expect(screen.getByText("Bottom 10 Users")).toBeInTheDocument();
  });
});
