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

vi.mock("./QrInviteModal", () => ({
  default: ({ open }: { open: boolean }) =>
    open ? <div data-testid="qr-modal">QR Modal</div> : null,
}));

vi.mock("./RoomManageModal", () => ({
  default: ({ open }: { open: boolean }) =>
    open ? <div data-testid="manage-modal">Manage Modal</div> : null,
}));

describe("TopNav", () => {
  it("renders room ID in invite button", () => {
    render(<TopNav roomId="ROOM01" />);
    expect(screen.getByText(/ROOM01/)).toBeInTheDocument();
  });

  it("renders exit button", () => {
    const onExit = vi.fn();
    render(<TopNav roomId="ROOM01" onExit={onExit} />);

    const exitBtn = screen.getByLabelText("退出房间");
    fireEvent.click(exitBtn);
    expect(onExit).toHaveBeenCalled();
  });

  it("shows manage button only for creator", () => {
    const { rerender } = render(<TopNav roomId="ROOM01" isCreator={false} />);
    expect(screen.queryByText("管理")).not.toBeInTheDocument();

    rerender(<TopNav roomId="ROOM01" isCreator />);
    expect(screen.getByText("管理")).toBeInTheDocument();
  });

  it("opens QR invite modal on button click", () => {
    render(<TopNav roomId="ROOM01" />);
    expect(screen.queryByTestId("qr-modal")).not.toBeInTheDocument();

    fireEvent.click(screen.getByText(/ROOM01/));
    expect(screen.getByTestId("qr-modal")).toBeInTheDocument();
  });

  it("opens manage modal on manage button click", () => {
    render(<TopNav roomId="ROOM01" isCreator />);
    expect(screen.queryByTestId("manage-modal")).not.toBeInTheDocument();

    fireEvent.click(screen.getByText("管理"));
    expect(screen.getByTestId("manage-modal")).toBeInTheDocument();
  });

  it("renders brand title", () => {
    render(<TopNav roomId="ROOM01" />);
    expect(screen.getByText("NoWhatever")).toBeInTheDocument();
    expect(screen.getByText("别说随便")).toBeInTheDocument();
  });
});
