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

// 프리뷰/뷰 모드 TDD: 먼저 실패하는 E2E부터 작성한다.

test("/preview 페이지는 에디터 크롬 없이 컨텐츠만 보여야 한다", async ({ page }) => {
  // 프리뷰 페이지로 이동한다.
  await page.goto("/preview");

  // 프리뷰 전용 헤더가 있어야 한다.
  await expect(page.getByRole("heading", { name: "Page Preview" })).toBeVisible();

  // 에디터 좌측 패널용 버튼들은 나타나지 않아야 한다.
  await expect(page.getByRole("button", { name: "텍스트 블록 추가" })).toHaveCount(0);
  await expect(page.getByRole("button", { name: "Hero 템플릿 추가" })).toHaveCount(0);
});

test("에디터에서 Hero 템플릿을 추가하면 프리뷰에서 동일한 Hero 콘텐츠가 보여야 한다", async ({ page }) => {
  // 에디터에서 Hero 템플릿을 추가한다.
  await page.goto("/editor");

  await page.getByRole("button", { name: "Hero 템플릿 추가" }).click();

  // 헤드라인과 CTA 버튼이 에디터에서 생성되었는지 한 번 확인한다.
  const editorCanvas = page.getByTestId("editor-canvas");
  await expect(editorCanvas.getByText("Hero 제목을 여기에 입력하세요")).toBeVisible();
  await expect(editorCanvas.getByRole("button", { name: "지금 시작하기" })).toBeVisible();

  // 헤더의 프리뷰 열기 링크를 통해 /preview 로 이동한다 (클라이언트 내 내비게이션 유지).
  await page.getByRole("link", { name: "프리뷰 열기" }).click();

  // 프리뷰 헤더가 보여야 한다.
  await expect(page.getByRole("heading", { name: "Page Preview" })).toBeVisible();

  // 프리뷰에서도 Hero 헤드라인과 CTA 버튼이 그대로 보여야 한다.
  await expect(page.getByText("Hero 제목을 여기에 입력하세요")).toBeVisible();
  // 프리뷰에서는 CTA를 실제 링크(<a>)로 렌더링하므로 텍스트 기준으로만 검증한다.
  await expect(page.getByText("지금 시작하기")).toBeVisible();

  // 프리뷰 화면에는 에디터용 "텍스트 블록 추가" 버튼이 없어야 한다.
  await expect(page.getByRole("button", { name: "텍스트 블록 추가" })).toHaveCount(0);
});

test("에디터에서 Features 템플릿을 추가하면 프리뷰에서 3개의 Feature 섹션이 보여야 한다", async ({ page }) => {
  await page.goto("/editor");

  await page.getByRole("button", { name: "Features 템플릿 추가" }).click();

  const editorCanvas = page.getByTestId("editor-canvas");
  await expect(editorCanvas.getByText("Feature 1 제목")).toBeVisible();
  await expect(editorCanvas.getByText("Feature 2 제목")).toBeVisible();
  await expect(editorCanvas.getByText("Feature 3 제목")).toBeVisible();

  await page.getByRole("link", { name: "프리뷰 열기" }).click();

  await expect(page.getByRole("heading", { name: "Page Preview" })).toBeVisible();

  await expect(page.getByText("Feature 1 제목")).toBeVisible();
  await expect(page.getByText("Feature 2 제목")).toBeVisible();
  await expect(page.getByText("Feature 3 제목")).toBeVisible();
});

test("에디터에서 CTA 템플릿을 추가하면 프리뷰에서 CTA 텍스트와 버튼이 보여야 한다", async ({ page }) => {
  await page.goto("/editor");

  await page.getByRole("button", { name: "CTA 템플릿 추가" }).click();

  const editorCanvas = page.getByTestId("editor-canvas");
  await expect(editorCanvas.getByText("지금 바로 행동을 유도하는 CTA 텍스트를 입력하세요.")).toBeVisible();
  await expect(editorCanvas.getByRole("button", { name: "CTA 버튼" })).toBeVisible();

  await page.getByRole("link", { name: "프리뷰 열기" }).click();

  await expect(page.getByRole("heading", { name: "Page Preview" })).toBeVisible();

  await expect(page.getByText("지금 바로 행동을 유도하는 CTA 텍스트를 입력하세요.")).toBeVisible();
  await expect(page.getByText("CTA 버튼")).toBeVisible();
});

test("모바일 뷰에서도 프리뷰 페이지가 깨지지 않고 주요 템플릿 컨텐츠를 보여줘야 한다", async ({ page }) => {
  // 에디터에서 여러 템플릿을 추가한다.
  await page.goto("/editor");

  await page.getByRole("button", { name: "Hero 템플릿 추가" }).click();
  await page.getByRole("button", { name: "Features 템플릿 추가" }).click();
  await page.getByRole("button", { name: "Pricing 템플릿 추가" }).click();
  await page.getByRole("button", { name: "Testimonials 템플릿 추가" }).click();

  // 모바일 뷰포트로 전환한다.
  await page.setViewportSize({ width: 390, height: 844 });

  // 프리뷰로 이동한다.
  await page.getByRole("link", { name: "프리뷰 열기" }).click();

  // 프리뷰 헤더와 주요 템플릿 텍스트들이 모두 보여야 한다.
  await expect(page.getByRole("heading", { name: "Page Preview" })).toBeVisible();

  // Hero 헤드라인
  await expect(page.getByText("Hero 제목을 여기에 입력하세요")).toBeVisible();

  // Features 제목 일부
  await expect(page.getByText("Feature 1 제목")).toBeVisible();

  // Pricing 플랜 이름/가격 일부
  await expect(page.getByText("Basic")).toBeVisible();
  await expect(page.getByText("₩9,900/월")).toBeVisible();

  // Testimonials 본문 일부
  await expect(page.getByText("이 서비스 덕분에 랜딩 페이지 제작 시간이 크게 줄었습니다.")).toBeVisible();
});