import { jest } from "@jest/globals";
import React from "react";
import { render, screen, fireEvent } from "@testing-library/react";
import { BrowserRouter, MemoryRouter } from "react-router-dom";
import Widgets from "../components/Widgets.js";

const renderWithRouter = (component) => {
  return render(<MemoryRouter>{component}</MemoryRouter>);
};

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

  it("should render widget with title and number", () => {
    renderWithRouter(
      <Widgets
        className="firstwidget actv-User"
        Icons="/path/to/icon.svg"
        number={100}
        title="Active Users"
      />
    );

    expect(screen.getByText("100")).toBeInTheDocument();
    expect(screen.getByText("Active Users")).toBeInTheDocument();
  });

  it("should render green background for active users widget", () => {
    renderWithRouter(
      <Widgets
        className="firstwidget actv-User"
        Icons="/path/to/icon.svg"
        number={50}
        title="Active Users"
      />
    );

    const leftDiv = screen.getByTestId("widget-left");
    expect(leftDiv).toHaveStyle({ backgroundColor: "#84c484" });
  });

  it("should render blue background for all users widget", () => {
    renderWithRouter(
      <Widgets
        className="secondwidget all-user"
        Icons="/path/to/icon.svg"
        number={200}
        title="All Users"
      />
    );

    const leftDiv = screen.getByTestId("widget-left");
    expect(leftDiv).toHaveStyle({ backgroundColor: "#61C4E8" });
  });

  it("should render dark blue background for total usage widget", () => {
    renderWithRouter(
      <Widgets
        className="thirdwidget total-usage-time"
        Icons="/path/to/icon.svg"
        number={150}
        title="Total Usage"
      />
    );

    const leftDiv = screen.getByTestId("widget-left");
    expect(leftDiv).toHaveStyle({ backgroundColor: "#71a6d3" });
  });

  it("should render with default background for unknown className", () => {
    renderWithRouter(
      <Widgets
        className="unknownwidget"
        Icons="/path/to/icon.svg"
        number={50}
        title="Unknown"
      />
    );

    const leftDiv = screen.getByTestId("widget-left");
    expect(leftDiv).toBeInTheDocument();
  });

  it("should navigate to users page with state when active users widget is clicked", () => {
    renderWithRouter(
      <Widgets
        className="firstwidget actv-User"
        Icons="/path/to/icon.svg"
        number={50}
        title="Active Users"
      />
    );

    const clickableElement = screen.getByText("50");
    fireEvent.click(clickableElement);

    // Component should render without errors after click
    expect(screen.getByText("50")).toBeInTheDocument();
  });

  it("should navigate to users page without state when all users widget is clicked", () => {
    renderWithRouter(
      <Widgets
        className="secondwidget all-user"
        Icons="/path/to/icon.svg"
        number={100}
        title="All Users"
      />
    );

    const clickableElement = screen.getByText("100");
    fireEvent.click(clickableElement);

    // Component should render without errors after click
    expect(screen.getByText("100")).toBeInTheDocument();
  });

  it("should render Hours text for thirdwidget", () => {
    renderWithRouter(
      <Widgets
        className="thirdwidget"
        Icons="/path/to/icon.svg"
        number={24}
        title="Total Time"
      />
    );

    expect(screen.getByText("Hours")).toBeInTheDocument();
  });

  it("should render icon image", () => {
    renderWithRouter(
      <Widgets
        className="firstwidget actv-User"
        Icons="/path/to/icon.svg"
        number={50}
        title="Active Users"
      />
    );

    const img = screen.getByRole("img");
    expect(img).toHaveAttribute("src", "/path/to/icon.svg");
    expect(img).toHaveAttribute("alt", "Active Users");
  });

  it("should apply custom styles", () => {
    const customStyle = { margin: "10px" };
    renderWithRouter(
      <Widgets
        className="firstwidget actv-User"
        Icons="/path/to/icon.svg"
        number={50}
        title="Active Users"
        style={customStyle}
      />
    );

    // Widget should be rendered with styles
    expect(screen.getByText("50")).toBeInTheDocument();
  });

  it("should handle string number prop", () => {
    renderWithRouter(
      <Widgets
        className="firstwidget actv-User"
        Icons="/path/to/icon.svg"
        number="150"
        title="Active Users"
      />
    );

    expect(screen.getByText("150")).toBeInTheDocument();
  });

  it("should render NavigateNext icon for user widgets", () => {
    renderWithRouter(
      <Widgets
        className="firstwidget actv-User"
        Icons="/path/to/icon.svg"
        number={50}
        title="Active Users"
      />
    );

    // Check that multiple buttons are rendered for interactive elements
    const buttons = screen.getAllByRole("button");
    expect(buttons.length).toBeGreaterThan(0);
  });
});
