import { describe, it, expect, vi } from "vitest";
import { render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { AuthErrorBanner } from "./AuthErrorBanner";

describe("AuthErrorBanner", (): void => {
  it("should render the message text", (): void => {
    render(<AuthErrorBanner message="Authentication paused. Please try again when ready." />);
    expect(
      screen.getByText("Authentication paused. Please try again when ready.")
    ).toBeInTheDocument();
  });

  it("should have role alert and aria-live polite for accessibility", (): void => {
    render(<AuthErrorBanner message="Unable to connect." />);
    const alert = screen.getByRole("alert");
    expect(alert).toBeInTheDocument();
    expect(alert).toHaveAttribute("aria-live", "polite");
  });

  it("should render an icon", (): void => {
    const { container } = render(<AuthErrorBanner message="Test message" />);
    const svgs = container.querySelectorAll("svg");
    expect(svgs.length).toBeGreaterThanOrEqual(1);
  });

  it("should render dismiss button when onDismiss is provided", (): void => {
    const onDismiss = vi.fn();
    render(<AuthErrorBanner message="Test message" onDismiss={onDismiss} />);
    const dismissButton = screen.getByLabelText("Dismiss");
    expect(dismissButton).toBeInTheDocument();
  });

  it("should not render dismiss button when onDismiss is not provided", (): void => {
    render(<AuthErrorBanner message="Test message" />);
    expect(screen.queryByLabelText("Dismiss")).not.toBeInTheDocument();
  });

  it("should call onDismiss when dismiss button is clicked", async (): Promise<void> => {
    const user = userEvent.setup();
    const onDismiss = vi.fn();
    render(<AuthErrorBanner message="Test message" onDismiss={onDismiss} />);

    const dismissButton = screen.getByLabelText("Dismiss");
    await user.click(dismissButton);

    expect(onDismiss).toHaveBeenCalledTimes(1);
  });

  it("should render all PDA-friendly error messages", (): void => {
    const messages = [
      "Authentication paused. Please try again when ready.",
      "The email and password combination wasn't recognized.",
      "Unable to connect. Check your network and try again.",
      "The service is taking a break. Please try again in a moment.",
    ];

    for (const message of messages) {
      const { unmount } = render(<AuthErrorBanner message={message} />);
      expect(screen.getByText(message)).toBeInTheDocument();
      unmount();
    }
  });
});
