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

test.describe("Mobile Dashboard Scroll", () => {
  test.use({
    viewport: { width: 390, height: 844 }, // iPhone 12 Pro size
    userAgent:
      "Mozilla/5.0 (iPhone; CPU iPhone OS 14_4 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.0.3 Mobile/15E148 Safari/604.1",
  });

  test("should allow scrolling to access order form at the bottom", async ({
    page,
  }) => {
    // 1. Navigate to dashboard
    await page.goto("http://localhost:3001/dashboard");
    await page.waitForLoadState("domcontentloaded");

    // 2. Check Top Element (Chart)
    const chart = page.locator("canvas").first();
    await expect(chart).toBeVisible();

    // 3. Scroll to Bottom
    await page.evaluate(() => window.scrollTo(0, document.body.scrollHeight));
    await page.waitForTimeout(500); // Wait for scroll

    // 4. Check Bottom Element (Order Form)
    // "매수하기" button is a good indicator of the order form
    const buyButton = page.getByRole("button", { name: "매수하기" });
    await expect(buyButton).toBeVisible();

    // 5. Verify Scroll Height is greater than Viewport Height
    const scrollHeight = await page.evaluate(
      () => document.documentElement.scrollHeight,
    );
    const viewportHeight = 844;
    expect(scrollHeight).toBeGreaterThan(viewportHeight);

    console.log(
      `Scroll Height: ${scrollHeight}, Viewport Height: ${viewportHeight}`,
    );

    // Capture screenshot at bottom
    await page.screenshot({
      path: "test-results/mobile-scroll-bottom.png",
      fullPage: false,
    });
  });
});