import { describe, it, expect, vi } from "vitest";
import { render, screen } from "@testing-library/react";
import LoginPage from "./page";

// Mock next/navigation
vi.mock("next/navigation", () => ({
  useRouter: (): { push: ReturnType<typeof vi.fn> } => ({
    push: vi.fn(),
  }),
}));

describe("LoginPage", (): void => {
  it("should render the login page with title", (): void => {
    render(<LoginPage />);
    expect(screen.getByRole("heading", { level: 1 })).toHaveTextContent("Welcome to Mosaic Stack");
  });

  it("should display the description", (): void => {
    render(<LoginPage />);
    const descriptions = screen.getAllByText(/Your personal assistant platform/i);
    expect(descriptions.length).toBeGreaterThan(0);
    expect(descriptions[0]).toBeInTheDocument();
  });

  it("should render the sign in button", (): void => {
    render(<LoginPage />);
    const buttons = screen.getAllByRole("button", { name: /sign in/i });
    expect(buttons.length).toBeGreaterThan(0);
    expect(buttons[0]).toBeInTheDocument();
  });

  it("should have proper layout styling", (): void => {
    const { container } = render(<LoginPage />);
    const main = container.querySelector("main");
    expect(main).toHaveClass("flex", "min-h-screen");
  });
});