/**
 * 리포트 관리 페이지 대시보드 UI 검증
 * - 로그인 후 /admin/screenMng/reportList 접속
 * - 대시보드 카드 표시 방식, 로딩 상태, 레이아웃 확인
 * 실행: node scripts/report-list-dashboard-verify.js
 * 브라우저 표시: HEADLESS=0 node scripts/report-list-dashboard-verify.js
 */
const { chromium } = require("playwright");
const path = require("path");

const BASE_URL = "http://localhost:9771";
const SCREENSHOT_DIR = path.join(__dirname, "../test-screenshots/report-dashboard");

async function runVerification() {
  const results = { success: [], failed: [], screenshots: [] };
  const browser = await chromium.launch({
    headless: process.env.HEADLESS !== "0",
    slowMo: 50,
  });
  const context = await browser.newContext({
    viewport: { width: 1440, height: 900 },
    ignoreHTTPSErrors: true,
  });
  const page = await context.newPage();

  const screenshot = async (name, options = {}) => {
    const fs = require("fs");
    if (!fs.existsSync(SCREENSHOT_DIR)) {
      fs.mkdirSync(SCREENSHOT_DIR, { recursive: true });
    }
    const filePath = path.join(SCREENSHOT_DIR, `${name}.png`);
    await page.screenshot({ path: filePath, fullPage: options.fullPage !== false });
    results.screenshots.push(filePath);
    console.log(`  [스크린샷] ${filePath}`);
    return filePath;
  };

  try {
    console.log("\n=== 1단계: 로그인 ===\n");
    await page.goto(`${BASE_URL}/login`, { waitUntil: "domcontentloaded", timeout: 15000 });
    await page.fill("#userId", "wace");
    await page.fill("#password", "qlalfqjsgh11");
    await page.click('button[type="submit"]');
    await page.waitForURL((url) => !url.pathname.includes("/login"), { timeout: 10000 }).catch(() => {});
    await page.waitForTimeout(2000);

    console.log("\n=== 2단계: 리포트 목록 페이지 이동 ===\n");
    await page.goto(`${BASE_URL}/admin/screenMng/reportList`, {
      waitUntil: "domcontentloaded",
      timeout: 15000,
    });

    // 2-1. 로딩 상태 캡처 (페이지 로드 직후 가능한 빠르게)
    await page.waitForTimeout(200);
    await screenshot("01_initial_load", { fullPage: true });
    console.log("  [관찰] 초기 로딩 상태 캡처");

    // 2-2. 대시보드 카드 영역 대기 후 캡처
    const dashboardSelector =
      '[class*="grid"] [class*="rounded-xl"], .report-page-content [class*="grid-cols"]';
    try {
      await page.waitForSelector(dashboardSelector, { timeout: 8000 });
      console.log("  [관찰] 대시보드 그리드 DOM 감지");
    } catch (e) {
      console.log("  [경고] 대시보드 셀렉터 타임아웃, 계속 진행");
    }

    await page.waitForTimeout(1500);
    await screenshot("02_dashboard_loaded", { fullPage: true });
    console.log("  [관찰] 로드 완료 후 전체 페이지 캡처");

    // 2-3. 대시보드 영역만 캡처 (4개 카드)
    const dashboardCards = await page.$$(
      '.report-page-content [class*="grid"] > div[class*="rounded-xl"]'
    );
    console.log(`  [관찰] 대시보드 카드 수: ${dashboardCards.length}개`);

    if (dashboardCards.length > 0) {
      await dashboardCards[0].scrollIntoViewIfNeeded();
      await page.waitForTimeout(300);
      await screenshot("03_dashboard_area_focus", { fullPage: false });
    }

    // 2-4. 리포트 목록 테이블 영역 확인
    const listSection = await page.$(".report-page-content [class*='overflow-hidden rounded-xl']");
    if (listSection) {
      await listSection.scrollIntoViewIfNeeded();
      await page.waitForTimeout(500);
      await screenshot("04_report_list_section", { fullPage: true });
    }

    results.success.push("리포트 목록 대시보드 검증 완료");
  } catch (error) {
    console.error("검증 중 오류:", error);
    results.failed.push(error.message);
    await screenshot("99_error_state", { fullPage: true });
  } finally {
    await browser.close();
  }

  console.log("\n=== 결과 요약 ===\n");
  results.success.forEach((s) => console.log("  [OK]", s));
  results.failed.forEach((s) => console.log("  [FAIL]", s));
  console.log("\n스크린샷 파일:", results.screenshots.join("\n              "));
  return results;
}

runVerification()
  .then((r) => process.exit(r.failed.length > 0 ? 1 : 0))
  .catch((e) => {
    console.error(e);
    process.exit(1);
  });