import type { Page } from '@playwright/test';

export async function demo(page: Page): Promise<void> {
  // Navigate to the home page
  await page.goto('http://localhost:3000');
  await page.waitForLoadState('networkidle');
  await page.waitForTimeout(1500);

  // Look for a PR comment or demo section that shows media previews
  // Try to find any element that resembles a bot comment with media
  const commentSection = page.locator('[class*="comment"], [class*="Comment"], article, .timeline-item').first();
  
  // Scroll down to find the bot-generated demo comment area
  await page.evaluate(() => window.scrollTo(0, 300));
  await page.waitForTimeout(1000);

  // Try to find the fallback link with the camera/phone emoji text
  const fallbackLink = page.getByText("Can't see the preview? Open it directly").first();
  const fallbackLinkAlt = page.getByText("Can't see the preview").first();
  const screenshotFallback = page.getByText("Can't see screenshot").first();

  // Check if we can find the fallback link on the current page
  const fallbackVisible = await fallbackLink.isVisible().catch(() => false);
  const fallbackAltVisible = await fallbackLinkAlt.isVisible().catch(() => false);
  const screenshotFallbackVisible = await screenshotFallback.isVisible().catch(() => false);

  if (fallbackVisible) {
    // Scroll to the fallback link
    await fallbackLink.scrollIntoViewIfNeeded();
    await page.waitForTimeout(1500);

    // Hover over the fallback link to show it's interactive
    await fallbackLink.hover();
    await page.waitForTimeout(1500);

  } else if (fallbackAltVisible) {
    await fallbackLinkAlt.scrollIntoViewIfNeeded();
    await page.waitForTimeout(1500);
    await fallbackLinkAlt.hover();
    await page.waitForTimeout(1500);

  } else if (screenshotFallbackVisible) {
    await screenshotFallback.scrollIntoViewIfNeeded();
    await page.waitForTimeout(1500);
    await screenshotFallback.hover();
    await page.waitForTimeout(1500);

  } else {
    // Demonstrate the feature by showing a mock comment page if available
    // Try navigating to a PR page or any page that might show comments
    await page.goto('http://localhost:3000');
    await page.waitForLoadState('networkidle');
    await page.waitForTimeout(1500);

    // Scroll through the page to show the current state
    await page.evaluate(() => window.scrollTo(0, document.body.scrollHeight / 2));
    await page.waitForTimeout(1500);

    // Look for any media preview elements (img tags with Demo alt text)
    const demoImg = page.locator('img[alt="Demo"], img[alt*="Screenshot"]').first();
    const demoImgVisible = await demoImg.isVisible().catch(() => false);

    if (demoImgVisible) {
      await demoImg.scrollIntoViewIfNeeded();
      await page.waitForTimeout(1500);

      // Look for the fallback link near the image
      const nearbyLink = page.locator('a:has-text("Open it directly")').first();
      const nearbyLinkVisible = await nearbyLink.isVisible().catch(() => false);

      if (nearbyLinkVisible) {
        await nearbyLink.scrollIntoViewIfNeeded();
        await nearbyLink.hover();
        await page.waitForTimeout(1500);
      }
    }

    // Final scroll to show the full page
    await page.evaluate(() => window.scrollTo(0, document.body.scrollHeight));
    await page.waitForTimeout(1500);
  }

  // Final pause to capture the end state
  await page.waitForTimeout(1000);
}