import { test, expect } from "@playwright/test";
import { Page } from "@playwright/test";

// src/renderer/src/App.test.tsx

// Mock data
const mockUser = {
  uid: "test123",
  email: "test@example.com",
  displayName: "Test User",
  toJSON: () => ({
    uid: "test123",
    email: "test@example.com",
    displayName: "Test User",
  }),
};

test.describe("App Component", () => {
  let page: Page;

  test.beforeEach(async ({ browser }) => {
    page = await browser.newPage();

    // Mock Firebase Auth
    await page.addInitScript(() => {
      window.mockAuthState = null;

      // Mock the firebase auth module
      jest.mock("./util/firebase", () => ({
        auth: {
          onAuthStateChanged: (callback) => {
            callback(window.mockAuthState);
            // Return mock unsubscribe function
            return () => {};
          },
        },
      }));

      // Mock electron IPC
      window.electron = {
        ipcRenderer: {
          send: jest.fn(),
        },
      };
    });

    await page.goto("/");
  });

  test("should show SignInForm when user is not authenticated", async () => {
    await page.evaluate(() => {
      window.mockAuthState = null;
    });

    await page.reload();

    // Check if SignInForm is visible
    const signInForm = await page
      .locator("form")
      .filter({ hasText: "Sign In" });
    await expect(signInForm).toBeVisible();
  });

  test("should show routes when user is authenticated", async () => {
    await page.evaluate((user) => {
      window.mockAuthState = user;
    }, mockUser);

    await page.reload();

    // Check if AuthHome is visible
    const authHome = await page.locator('div:text("AuthHome")');
    await expect(authHome).toBeVisible();

    // Check that electron IPC was called with auth state
    await expect(
      page.evaluate(() => {
        return window.electron.ipcRenderer.send.mock.calls.length > 0;
      }),
    ).resolves.toBe(true);
  });

  test("should navigate to settings page when authenticated", async () => {
    await page.evaluate((user) => {
      window.mockAuthState = user;
    }, mockUser);

    await page.reload();

    // Navigate to settings
    await page.click('a[href="/settings"]');

    // Check if Settings page is visible
    const settingsPage = await page.locator('div:text("Settings")');
    await expect(settingsPage).toBeVisible();
  });
});
