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

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

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

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

describe("AuditLogs 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 date filter dropdown", () => {
    renderComponent();
    const comboboxes = screen.getAllByRole("combobox");
    expect(comboboxes.length).toBeGreaterThan(0);
  });

  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: 123 });
    const searchInputs = container.querySelectorAll('input[placeholder*="Search"]');
    expect(searchInputs.length).toBe(0);
  });

  it("should handle search with text", 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 date filter change", async () => {
    renderComponent();
    
    const dateFilter = screen.getAllByRole("combobox")[0];
    fireEvent.mouseDown(dateFilter);
    
    // Select an option
    const todayOption = await screen.findByRole("option", { name: "Today" });
    fireEvent.click(todayOption);
    
    await waitFor(() => {
      expect(screen.getByTestId("common-table")).toBeInTheDocument();
    });
  });

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

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

  it("should render inner-container", () => {
    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 activityTable wrapper", () => {
    const { container } = renderComponent();
    expect(container.querySelector(".activityTable")).toBeInTheDocument();
  });

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

    // Look for clear button in search component
    const clearButtons = screen.getAllByRole("button");
    const searchClearBtn = clearButtons.find(btn => 
      btn.querySelector('svg[data-testid="CloseIcon"]') || 
      btn.getAttribute('aria-label')?.toLowerCase().includes('clear')
    );
    
    if (searchClearBtn) {
      fireEvent.click(searchClearBtn);
    }
    
    await waitFor(() => {
      expect(screen.getByTestId("common-table")).toBeInTheDocument();
    });
  });

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