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

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

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

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

describe("UserLocation 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 picker input", () => {
    renderComponent();
    expect(screen.getByPlaceholderText("Select Date Range")).toBeInTheDocument();
  });

  it("should render search input when no employeeId", () => {
    renderComponent();
    // There should be at least one text input (date picker or search)
    const inputs = screen.getAllByRole("textbox");
    expect(inputs.length).toBeGreaterThan(0);
  });

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

  it("should show date picker when input clicked", async () => {
    renderComponent();
    
    const dateInput = screen.getByPlaceholderText("Select Date Range");
    fireEvent.click(dateInput);
    
    await waitFor(() => {
      // Date picker should be visible
      expect(document.querySelector(".date-range-container")).toBeInTheDocument();
    });
  });

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

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

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

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

  it("should close date picker when apply is clicked", async () => {
    renderComponent();
    
    // Open date picker
    const dateInput = screen.getByPlaceholderText("Select Date Range");
    fireEvent.click(dateInput);
    
    await waitFor(() => {
      expect(document.querySelector(".date-range-container")).toBeInTheDocument();
    });
    
    // Click Apply
    const applyButton = screen.getByText("Apply");
    fireEvent.click(applyButton);
    
    await waitFor(() => {
      // Date picker should be closed
      expect(document.querySelector(".date-range-container")).not.toBeInTheDocument();
    });
  });

  it("should close date picker when close is clicked", async () => {
    renderComponent();
    
    // Open date picker
    const dateInput = screen.getByPlaceholderText("Select Date Range");
    fireEvent.click(dateInput);
    
    await waitFor(() => {
      expect(document.querySelector(".date-range-container")).toBeInTheDocument();
    });
    
    // Click Close
    const closeButton = screen.getByText("Close");
    fireEvent.click(closeButton);
    
    await waitFor(() => {
      // Date picker should be closed
      expect(document.querySelector(".date-range-container")).not.toBeInTheDocument();
    });
  });
});
