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

// 마이페이지(/mypage) E2E
// - 비로그인 사용자는 /login 으로 리다이렉트되어야 한다.
// - 로그인 사용자는 My page 헤더와 프로필/계정 관리 섹션을 볼 수 있어야 한다.
// - 로그인 사용자는 마이페이지에서 이메일 인증 메일을 보낼 수 있어야 한다.

test("비로그인 사용자가 /mypage 에 접근하면 /login 으로 리다이렉트되어야 한다", async ({ page }) => {
  // /api/auth/me 를 401 로 목 처리해 비로그인 상태를 시뮬레이션한다.
  await page.route("**/api/auth/me", async (route) => {
    await route.fulfill({
      status: 401,
      contentType: "application/json",
      body: JSON.stringify({ message: "인증이 필요합니다." }),
    });
  });

  await page.goto("/mypage");

  await expect(page).toHaveURL(/\/login/);
  await expect(page.getByRole("heading", { name: "Log in" })).toBeVisible();
});

test("로그인 사용자가 /mypage 에 접근하면 My page 헤더와 프로필/계정 관리 섹션이 보여야 한다", async ({ page }) => {
  const email = `mypage+${Date.now()}@example.com`;

  // 로그인된 상태를 시뮬레이션하기 위해 /api/auth/me 를 200 으로 목 처리한다.
  await page.route("**/api/auth/me", async (route) => {
    await route.fulfill({
      status: 200,
      contentType: "application/json",
      body: JSON.stringify({ id: "user-mypage", email, tokenVersion: 1 }),
    });
  });

  await page.goto("/mypage");

  // 마이페이지 헤더와 기본 섹션들이 보여야 한다.
  await expect(page.getByRole("heading", { name: "My page" })).toBeVisible();
  await expect(page.getByText(email)).toBeVisible();

  // 비밀번호/이메일 변경 섹션의 기본 라벨이 존재하는지만 확인한다.
  await expect(page.getByText(/Change password/i)).toBeVisible();
  await expect(page.getByText(/Change email/i)).toBeVisible();
});

test("마이페이지 헤더에서 대시보드로 이동할 수 있어야 한다", async ({ page }) => {
  const email = `mypage-nav+${Date.now()}@example.com`;

  // /api/auth/me 를 200 으로 목 처리해 로그인 상태를 시뮬레이션한다.
  await page.route("**/api/auth/me", async (route) => {
    await route.fulfill({
      status: 200,
      contentType: "application/json",
      body: JSON.stringify({ id: "user-mypage-nav", email, tokenVersion: 1, emailVerified: true }),
    });
  });

  // 대시보드 개요 API 를 목 처리해 /dashboard 진입 시 데이터를 안정적으로 반환한다.
  await page.route("**/api/dashboard/overview", async (route) => {
    await route.fulfill({
      status: 200,
      contentType: "application/json",
      body: JSON.stringify({
        summaryStats: {
          totalProjects: 0,
          totalSubmissions: 0,
          todaySubmissions: 0,
          last7DaysSubmissions: 0,
        },
        projectStats: [],
        dailySubmissions: [],
      }),
    });
  });

  await page.goto("/mypage");

  const toDashboard = page.getByRole("link", { name: "Go to dashboard" });
  await expect(toDashboard).toBeVisible();

  await toDashboard.click();

  await expect(page).toHaveURL(/\/dashboard/);
  await expect(page.getByRole("heading", { name: "Dashboard" })).toBeVisible();
});

test("로그인 사용자는 마이페이지에서 이메일 인증 메일을 보낼 수 있어야 한다", async ({ page }) => {
	const email = `verify+${Date.now()}@example.com`;

	// 로그인된 상태를 시뮬레이션하기 위해 /api/auth/me 를 200 으로 목 처리한다.
	await page.route("**/api/auth/me", async (route) => {
		await route.fulfill({
			status: 200,
			contentType: "application/json",
			body: JSON.stringify({ id: "user-verify", email, tokenVersion: 1 }),
		});
	});

	// 이메일 인증 메일 전송 API 를 목 처리해 성공 응답을 시뮬레이션한다.
	await page.route("**/api/auth/request-email-verification", async (route) => {
		await route.fulfill({
			status: 200,
			contentType: "application/json",
			body: JSON.stringify({
				message: "Verification email has been sent.",
				verificationToken: "dummy-token",
			}),
		});
	});

	await page.goto("/mypage");

	// 이메일 인증 안내 텍스트와 버튼이 보여야 한다.
	await expect(
		page.getByText(/If your email is not verified yet, you can send a verification email from here\./i),
	).toBeVisible();

	const button = page.getByRole("button", { name: "Send verification email" });
	await expect(button).toBeVisible();

	await button.click();

	// 성공 메시지가 노출되어야 한다.
	await expect(page.getByText(/Verification email has been sent\./i)).toBeVisible();
});