import { fireEvent, render, screen, waitFor } from "@testing-library/react";
import { vi } from "vitest";
import App from "./App.jsx";
import { AuthProvider } from "./contexts/AuthContext";
import i18n from "./i18n";

vi.mock("./api/client", () => ({
  apiGet: vi.fn().mockResolvedValue([]),
  apiPost: vi.fn()
}));

function TestWrapper({ children }) {
  return <AuthProvider>{children}</AuthProvider>;
}

describe("App", () => {
  it("renders the hero copy", async () => {
    await i18n.changeLanguage("en");
    render(<App />, { wrapper: TestWrapper });
    expect(
      await screen.findByText("Find, compare, and book top salons near you.")
    ).toBeInTheDocument();
  });

  it("switches to Arabic and sets RTL direction", async () => {
    await i18n.changeLanguage("en");
    render(<App />, { wrapper: TestWrapper });
    const arabicButton = screen.getByRole("button", { name: "العربية" });
    fireEvent.click(arabicButton);
    await waitFor(() => {
      expect(document.documentElement.dir).toBe("rtl");
    });
    expect(arabicButton).toHaveClass("active");
  });
});