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

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

const renderComponent = (props = {}) => {
  const defaultProps = {
    employeeId: null,
    title: "",
    summaryFilter: {},
    ...props,
  };

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

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

  it("should render the component", () => {
    renderComponent();
    expect(screen.getByTestId("common-table")).toBeInTheDocument();
  });

  it("should render loader initially", () => {
    renderComponent();
    expect(screen.getByTestId("loader")).toBeInTheDocument();
  });

  it("should render smart date selector", () => {
    renderComponent();
    expect(screen.getByTestId("smart-date-selector")).toBeInTheDocument();
  });

  it("should render search input when no employeeId", () => {
    renderComponent();
    expect(screen.getByRole("textbox")).toBeInTheDocument();
  });

  it("should not render search input when employeeId is provided", () => {
    const { container } = renderComponent({ employeeId: "EMP001" });
    // Search input should not be rendered
    const inputs = container.querySelectorAll('input[placeholder*="Search"]');
    expect(inputs.length).toBe(0);
  });

  it("should render with summaryFilter", () => {
    const summaryFilter = {
      CallDate: { startDate: new Date(), endDate: new Date() },
      ResultsFor: "today",
    };
    renderComponent({ summaryFilter });
    expect(screen.getByTestId("common-table")).toBeInTheDocument();
  });

  it("should render with userProfile title", async () => {
    renderComponent({ title: "userProfile" });
    await waitFor(() => {
      expect(screen.getByTestId("common-table")).toBeInTheDocument();
    });
  });

  it("should handle date selector apply", async () => {
    renderComponent();
    
    // Open date selector
    const dateSelector = screen.getByRole("combobox");
    fireEvent.mouseDown(dateSelector);
    
    // Select Current Week
    const weekOption = screen.getByRole("option", { name: "Current Week" });
    fireEvent.click(weekOption);
    
    await waitFor(() => {
      expect(screen.getByTestId("common-table")).toBeInTheDocument();
    });
  });

  it("should handle search with text longer than 3 characters", async () => {
    renderComponent();
    
    const searchInput = screen.getByRole("textbox");
    fireEvent.change(searchInput, { target: { value: "test search" } });
    
    await waitFor(() => {
      expect(searchInput.value).toBe("test search");
    });
  });

  it("should handle search with empty text", async () => {
    renderComponent();
    
    const searchInput = screen.getByRole("textbox");
    fireEvent.change(searchInput, { target: { value: "" } });
    
    await waitFor(() => {
      expect(searchInput.value).toBe("");
    });
  });

  it("should render with employeeId", () => {
    renderComponent({ employeeId: "E001" });
    expect(screen.getByTestId("common-table")).toBeInTheDocument();
  });

  it("should render with EmpCode in summaryFilter", () => {
    const summaryFilter = {
      EmpCode: "EMP123",
      CallDate: { startDate: "2024-01-01", endDate: "2024-01-31" },
    };
    renderComponent({ summaryFilter });
    expect(screen.getByTestId("common-table")).toBeInTheDocument();
  });

  it("should render inner-container wrapper", () => {
    const { container } = renderComponent();
    expect(container.querySelector(".inner-container")).toBeInTheDocument();
  });

  it("should render filters-wrapper", () => {
    const { container } = renderComponent();
    expect(container.querySelector(".filters-wrapper")).toBeInTheDocument();
  });

  it("should render date-picker section", () => {
    const { container } = renderComponent();
    expect(container.querySelector(".datepicker")).toBeInTheDocument();
  });

  it("should handle date selector change", async () => {
    renderComponent();
    
    const dateSelector = screen.getByRole("combobox");
    fireEvent.mouseDown(dateSelector);
    
    // Select Current Month
    const monthOption = screen.getByRole("option", { name: "Current Month" });
    fireEvent.click(monthOption);
    
    await waitFor(() => {
      expect(screen.getByTestId("common-table")).toBeInTheDocument();
    });
  });

  it("should handle search with numeric text", async () => {
    renderComponent();
    
    const searchInput = screen.getByRole("textbox");
    fireEvent.change(searchInput, { target: { value: "1234" } });
    
    await waitFor(() => {
      expect(searchInput.value).toBe("1234");
    });
  });
});
