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

test.describe('Mobile Navigation', () => {
  test.use({ viewport: { width: 375, height: 812 } }); // iPhone X

  test.beforeEach(async ({ page }) => {
    await page.goto('/');
  });

  test('hamburger menu opens and closes', async ({ page }) => {
    // Find hamburger menu button
    const menuButton = page.getByRole('button', { name: /navigation menu/i });
    await expect(menuButton).toBeVisible();

    // Menu should be closed initially
    await expect(menuButton).toHaveAttribute('aria-expanded', 'false');

    // Open menu
    await menuButton.click();
    await expect(menuButton).toHaveAttribute('aria-expanded', 'true');

    // Navigation links should be visible
    await expect(page.getByRole('link', { name: 'Home' })).toBeVisible();
    await expect(page.getByRole('link', { name: 'Blocks' })).toBeVisible();
    await expect(page.getByRole('link', { name: 'Mempool' })).toBeVisible();
    await expect(page.getByRole('link', { name: 'DAG' })).toBeVisible();

    // Close menu
    await menuButton.click();
    await expect(menuButton).toHaveAttribute('aria-expanded', 'false');
  });

  test('mobile navigation links work', async ({ page }) => {
    // Open menu
    const menuButton = page.getByRole('button', { name: /navigation menu/i });
    await menuButton.click();

    // Click Blocks link
    await page.getByRole('navigation', { name: /mobile/i }).getByRole('link', { name: 'Blocks' }).click();

    // Should navigate to blocks page
    await expect(page).toHaveURL(/\/blocks/);

    // Menu should close after navigation
    await expect(menuButton).toHaveAttribute('aria-expanded', 'false');
  });

  test('theme toggle is accessible in mobile menu', async ({ page }) => {
    // Open menu
    const menuButton = page.getByRole('button', { name: /navigation menu/i });
    await menuButton.click();

    // Theme toggle buttons should be visible
    await expect(page.getByRole('button', { name: /light theme/i })).toBeVisible();
    await expect(page.getByRole('button', { name: /dark theme/i })).toBeVisible();
    await expect(page.getByRole('button', { name: /system theme/i })).toBeVisible();
  });

  test('mobile search is accessible in menu', async ({ page }) => {
    // Open menu
    const menuButton = page.getByRole('button', { name: /navigation menu/i });
    await menuButton.click();

    // Search input should be visible
    const searchInput = page.getByRole('combobox', { name: /search/i });
    await expect(searchInput).toBeVisible();
  });
});