import { createTheme, ThemeProvider } from "@mui/material/styles";
import { act, render, screen } from "@testing-library/react";

import { useAuthStore } from "@/store/authStore";
import { SessionExpiryDialog } from "./SessionExpiryDialog";

jest.mock("next-auth/react", () => ({
  signIn: jest.fn(),
}));

describe("SessionExpiryDialog", () => {
  beforeEach(() => {
    useAuthStore.setState({
      accessToken: null,
      sessionExpired: true,
      sessionExpiryReason: "unauthorized",
    });
  });

  afterEach(() => {
    act(() => useAuthStore.getState().clearSessionExpired());
  });

  it("renders above every regular application overlay", () => {
    const theme = createTheme();

    render(
      <ThemeProvider theme={theme}>
        <SessionExpiryDialog />
      </ThemeProvider>,
    );

    const dialogRoot = screen.getByRole("dialog").closest(".MuiModal-root");
    expect(dialogRoot).not.toBeNull();
    expect(dialogRoot).toHaveStyle({
      zIndex: theme.zIndex.tooltip + 1,
    });
  });
});