import { chromium } from "playwright";

async function debugApp() {
  console.log("🚀 Playwright 디버깅 시작...");

  const browser = await chromium.launch({ headless: false });
  const context = await browser.newContext({
    viewport: { width: 1280, height: 720 },
  });
  const page = await context.newPage();

  // 콘솔 메시지 캐치
  page.on("console", (msg) => {
    const type = msg.type();
    const text = msg.text();
    console.log(`[CONSOLE ${type.toUpperCase()}] ${text}`);
  });

  // 에러 캐치
  page.on("pageerror", (error) => {
    console.log(`[PAGE ERROR] ${error.message}`);
    console.log(`[STACK] ${error.stack}`);
  });

  // 네트워크 요청 모니터링
  page.on("request", (request) => {
    console.log(`[REQUEST] ${request.method()} ${request.url()}`);
  });

  page.on("response", (response) => {
    const status = response.status();
    const url = response.url();
    if (status >= 400) {
      console.log(`[RESPONSE ERROR] ${status} ${url}`);
    }
  });

  try {
    console.log("📱 localhost:3000 접속 중...");
    await page.goto("http://localhost:3000", { waitUntil: "networkidle" });

    // 페이지 타이틀 확인
    const title = await page.title();
    console.log(`📄 페이지 타이틀: ${title}`);

    // Root 엘리먼트 확인
    const rootContent = await page.evaluate(() => {
      const root = document.getElementById("root");
      return {
        exists: !!root,
        innerHTML: root ? root.innerHTML.substring(0, 200) : null,
        children: root ? root.children.length : 0,
      };
    });
    console.log(`🎯 Root 엘리먼트:`, rootContent);

    // 환경 변수 확인 (단순화)
    const envVars = await page.evaluate(() => {
      return {
        hasGlobalVars: typeof window !== "undefined",
        location: window.location.href,
      };
    });
    console.log(`🔑 환경 변수:`, envVars);

    // React 앱 상태 확인
    const reactStatus = await page.evaluate(() => {
      return {
        reactExists: !!window.React,
        hasErrors: window.__REACT_ERROR__ || false,
        querySelector: !!document.querySelector("[data-reactroot]"),
      };
    });
    console.log(`⚛️ React 상태:`, reactStatus);

    // 스크립트 태그 확인
    const scripts = await page.evaluate(() => {
      const scriptTags = Array.from(document.querySelectorAll("script[src]"));
      return scriptTags.map((script) => ({
        src: script.src,
        type: script.type || "text/javascript",
      }));
    });
    console.log(`📜 로드된 스크립트:`, scripts.length, "개");
    scripts.forEach((script, i) => {
      console.log(`   ${i + 1}. ${script.src}`);
    });

    // 5초 대기하여 React 앱 로딩 확인
    console.log("⏳ 5초 대기 중...");
    await page.waitForTimeout(5000);

    // 최종 상태 확인
    const finalStatus = await page.evaluate(() => {
      const root = document.getElementById("root");
      return {
        rootHTML: root ? root.innerHTML.substring(0, 500) : null,
        bodyClasses: document.body.className,
        hasVisibleContent: document.body.children.length > 1,
      };
    });
    console.log(`🎬 최종 상태:`, finalStatus);

    // 스크린샷 촬영
    await page.screenshot({ path: "debug-screenshot.png", fullPage: true });
    console.log("📸 스크린샷 저장됨: debug-screenshot.png");
  } catch (error) {
    console.error("❌ 에러 발생:", error.message);
    console.error("스택:", error.stack);
  }

  // 브라우저를 5초간 열어두고 수동 확인 가능하게 함
  console.log("🔍 브라우저를 5초간 열어둡니다...");
  await page.waitForTimeout(5000);

  await browser.close();
  console.log("✅ 디버깅 완료");
}

debugApp().catch(console.error);