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

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

describe("DashboardTable (BasicTable) Component", () => {
  const mockData = [
    {
      Device: "Device1",
      TotalActiveUsers: 50,
      SleepCount: 3600,
      IdleCount: 7200,
      ActiveCount: 14400,
      TotalUsageCount: 25200,
    },
  ];

  const mockColumns = [
    { field: "TotalActiveUsers", headerName: "Total Active Users" },
  ];

  beforeEach(() => {
    jest.clearAllMocks();
  });

  it("should render table headers", () => {
    renderWithRouter(<BasicTable data={mockData} Columns={mockColumns} />);

    expect(screen.getByText("Total Active User")).toBeInTheDocument();
    expect(screen.getByText("Past 24h Active")).toBeInTheDocument();
    expect(screen.getByText("Past 24h Idle")).toBeInTheDocument();
    expect(screen.getByText("Past 24h Sleep")).toBeInTheDocument();
    expect(screen.getByText("Total Usage")).toBeInTheDocument();
  });

  it("should render TotalActiveUsers count", () => {
    renderWithRouter(<BasicTable data={mockData} Columns={mockColumns} />);

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

  it("should convert seconds to HH:MM:SS format for sleep count", () => {
    renderWithRouter(<BasicTable data={mockData} Columns={mockColumns} />);

    // SleepCount of 3600 should be "01:00:00"
    expect(screen.getByText("01:00:00")).toBeInTheDocument();
  });

  it("should convert seconds to HH:MM:SS format for idle count", () => {
    renderWithRouter(<BasicTable data={mockData} Columns={mockColumns} />);

    // IdleCount of 7200 should be "02:00:00"
    expect(screen.getByText("02:00:00")).toBeInTheDocument();
  });

  it("should convert seconds to HH:MM:SS format for active count", () => {
    renderWithRouter(<BasicTable data={mockData} Columns={mockColumns} />);

    // ActiveCount of 14400 should be "04:00:00"
    expect(screen.getByText("04:00:00")).toBeInTheDocument();
  });

  it("should convert seconds to HH:MM:SS format for total usage", () => {
    renderWithRouter(<BasicTable data={mockData} Columns={mockColumns} />);

    // TotalUsageCount of 25200 should be "07:00:00"
    expect(screen.getByText("07:00:00")).toBeInTheDocument();
  });

  it("should calculate and display percentages", () => {
    renderWithRouter(<BasicTable data={mockData} Columns={mockColumns} />);

    // Percentages should be rendered
    const percentElements = screen.getAllByText(/%$/);
    expect(percentElements.length).toBeGreaterThan(0);
  });

  it("should navigate to users page when clicking on TotalActiveUsers", () => {
    renderWithRouter(<BasicTable data={mockData} Columns={mockColumns} />);

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

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

  it("should handle empty data gracefully", () => {
    renderWithRouter(<BasicTable data={[{}]} Columns={mockColumns} />);

    // Should render 0 for TotalActiveUsers
    expect(screen.getByText("0")).toBeInTheDocument();
  });

  it("should handle missing Columns prop", () => {
    renderWithRouter(<BasicTable data={mockData} />);

    // Should still render without errors
    expect(screen.getByText("Total Active User")).toBeInTheDocument();
  });

  it("should use default props when data is undefined", () => {
    renderWithRouter(<BasicTable />);

    // Should render with default empty data
    expect(screen.getByText("Total Active User")).toBeInTheDocument();
  });

  it("should render table with correct styling classes", () => {
    renderWithRouter(<BasicTable data={mockData} Columns={mockColumns} />);

    // Check for border-radius classes
    const leftRadiusElements = document.querySelectorAll(".border-radius-left");
    expect(leftRadiusElements.length).toBeGreaterThan(0);
  });

  it("should handle zero values correctly", () => {
    const zeroData = [
      {
        Device: "Device1",
        TotalActiveUsers: 0,
        SleepCount: 0,
        IdleCount: 0,
        ActiveCount: 0,
        TotalUsageCount: 0,
      },
    ];

    renderWithRouter(<BasicTable data={zeroData} Columns={mockColumns} />);

    // Should show 00:00:00 for all time values
    const zeroTimes = screen.getAllByText("00:00:00");
    expect(zeroTimes.length).toBeGreaterThan(0);
  });
});
